quick-start page (#1117)

## Description

Closes #966
Closes Shopify/oasis-frontend#317

Adds Quick Start page with example pipelines.

<!-- Please provide a brief description of the changes made in this pull request. Include any relevant context or reasoning for the changes. -->

## Demo

<!-- Link to any related issues using the format #<issue-number> -->

## [Screen Recording 2025-10-20 at 4.31.44 PM.mov <span class="graphite__hidden">(uploaded via Graphite)</span> <img class="graphite__hidden" src="https://app.graphite.dev/user-attachments/thumbnails/f8a4db9c-b27a-49f4-89d1-01a7f00e020c.mov" />](https://app.graphite.dev/user-attachments/video/f8a4db9c-b27a-49f4-89d1-01a7f00e020c.mov)

## Type of Change

<!-- Please delete options that are not relevant -->

- [ ] Bug fix
- [x] New feature
- [ ] Improvement
- [ ] Cleanup/Refactor
- [ ] Breaking change
- [ ] Documentation update

## Checklist

<!-- Please ensure the following are completed before submitting the PR -->

- [x] I have tested this does not break current pipelines / runs functionality
- [ ] I have tested the changes on staging

<!-- Include any screenshots that might help explain the changes or provide visual context -->

## Test Instructions

1. Open "Quick start" page to get to the example pipelines

<!-- Detail steps and prerequisites for testing the changes in this PR -->

## Additional Comments

Future of the "Quick Start" page could be AI assisted start.

Author: maxy-shpfy

public/example-pipelines/Pytorch pipeline.pipeline.component.png

@@ -1,6 +1,7 @@
 import { type ChangeEvent, useCallback, useEffect, useState } from "react";
 
 import NewPipelineButton from "@/components/shared/NewPipelineButton";
+import QuickStartCards from "@/components/shared/QuickStart/QuickStartCards";
 import { withSuspenseWrapper } from "@/components/shared/SuspenseWrapper";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
@@ -18,7 +19,7 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import { Paragraph } from "@/components/ui/typography";
+import { Paragraph, Text } from "@/components/ui/typography";
 import {
   type ComponentFileEntry,
   getAllComponentFilesFromList,
@@ -140,9 +141,19 @@ export const PipelineSection = withSuspenseWrapper(() => {
 
   if (pipelines.size === 0) {
     return (
-      <BlockStack gap="2" align="center" className="mt-4">
-        <Paragraph>No pipelines found.</Paragraph>
-        <NewPipelineButton />
+      <BlockStack gap="4" align="center">
+        <BlockStack gap="2">
+          <Paragraph size="md" tone="subdued">
+            You don&apos;t have any pipelines yet. Get started with a template
+            below.
+          </Paragraph>
+
+          <QuickStartCards />
+        </BlockStack>
+        <BlockStack align="center" gap="2">
+          <Text tone="subdued">Or start from scratch with</Text>
+          <NewPipelineButton />
+        </BlockStack>
       </BlockStack>
     );
   }

public/example-pipelines/Pytorch pipeline.pipeline.component.yaml

@@ -0,0 +1,112 @@
+import { useMutation } from "@tanstack/react-query";
+import { useNavigate } from "@tanstack/react-router";
+
+import { InfoBox } from "@/components/shared/InfoBox";
+import { Badge } from "@/components/ui/badge";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { BlockStack, InlineStack } from "@/components/ui/layout";
+import { Spinner } from "@/components/ui/spinner";
+import { Paragraph } from "@/components/ui/typography";
+import useToastNotification from "@/hooks/useToastNotification";
+import { cn } from "@/lib/utils";
+import { EDITOR_PATH } from "@/routes/router";
+
+import { importPipelineFromUrl } from "./importPipelineFromUrl";
+import { type SamplePipeline, samplePipelines } from "./samplePipelines";
+
+const QuickStartCards = () => {
+  const navigate = useNavigate();
+  const notify = useToastNotification();
+
+  const {
+    mutate: importPipeline,
+    isPending,
+    error,
+  } = useMutation({
+    mutationFn: async (url: string) => await importPipelineFromUrl(url),
+    onSuccess: (result) => {
+      notify(`Pipeline "${result.name}" created successfully`, "success");
+      navigate({
+        to: `${EDITOR_PATH}/${encodeURIComponent(result.name)}`,
+      });
+    },
+  });
+
+  return (
+    <BlockStack>
+      {!!error && (
+        <InfoBox title="Error importing pipeline" variant="error">
+          <Paragraph>{error.message}</Paragraph>
+        </InfoBox>
+      )}
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+        {samplePipelines.map((pipeline: SamplePipeline) => (
+          <Card
+            key={pipeline.name}
+            className={cn(
+              "overflow-hidden hover:shadow-lg transition-shadow duration-200 cursor-pointer group",
+              isPending && "opacity-50 pointer-events-none",
+            )}
+            onClick={() => importPipeline(pipeline.url)}
+          >
+            <div className="aspect-video relative bg-gradient-to-br from-gray-100 to-gray-200 overflow-hidden relative">
+              <img
+                src={pipeline.previewImage}
+                alt={pipeline.name}
+                className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200"
+                onError={(e) => {
+                  // If image fails to load, hide it and show fallback gradient
+                  e.currentTarget.style.display = "none";
+                }}
+              />
+              {isPending && (
+                <div className="absolute inset-0 flex items-center justify-center">
+                  <Spinner size={20} />
+                </div>
+              )}
+            </div>
+            <CardHeader>
+              <CardTitle className="text-lg line-clamp-2">
+                {pipeline.name}
+              </CardTitle>
+              <CardDescription className="line-clamp-3">
+                {pipeline.description}
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              {pipeline.tags && pipeline.tags.length > 0 && (
+                <InlineStack
+                  gap="1"
+                  wrap="wrap"
+                  blockAlign="start"
+                  align="start"
+                >
+                  {pipeline.tags.map((tag: string) => (
+                    <Badge size="sm" key={tag}>
+                      {tag}
+                    </Badge>
+                  ))}
+                </InlineStack>
+              )}
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      {samplePipelines.length === 0 && (
+        <InfoBox title="No sample pipelines available yet." variant="info">
+          <Paragraph>No sample pipelines available yet.</Paragraph>
+        </InfoBox>
+      )}
+    </BlockStack>
+  );
+};
+
+export default QuickStartCards;