Generated by Spark: Wire atomic components into snippet tool.

src/App.tsx

@@ -1,4 +1,5 @@
-import { useState } from 'react'
+import { useState, useCallback } from 'react'
+import { useKV } from '@github/spark/hooks'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { motion } from 'framer-motion'
 import {
@@ -13,12 +14,25 @@ import { MoleculesSection } from '@/components/molecules/MoleculesSection'
 import { OrganismsSection } from '@/components/organisms/OrganismsSection'
 import { TemplatesSection } from '@/components/templates/TemplatesSection'
 import { SnippetManager } from '@/components/SnippetManager'
-import type { AtomicLevel } from '@/lib/types'
+import type { AtomicLevel, Snippet } from '@/lib/types'
+import { toast } from 'sonner'
 
 type TabValue = AtomicLevel | 'snippets'
 
 function App() {
   const [activeTab, setActiveTab] = useState<TabValue>('atoms')
+  const [snippets, setSnippets] = useKV<Snippet[]>('snippets', [])
+
+  const handleSaveSnippet = useCallback((snippetData: Omit<Snippet, 'id' | 'createdAt' | 'updatedAt'>) => {
+    const newSnippet: Snippet = {
+      ...snippetData,
+      id: Date.now().toString(),
+      createdAt: Date.now(),
+      updatedAt: Date.now(),
+    }
+    setSnippets((currentSnippets) => [newSnippet, ...(currentSnippets || [])])
+    toast.success('Component saved as snippet!')
+  }, [setSnippets])
 
   return (
     <div className="min-h-screen bg-background">
@@ -112,7 +126,7 @@ function App() {
                     The fundamental building blocks - basic HTML elements styled as reusable components
                   </p>
                 </div>
-                <AtomsSection />
+                <AtomsSection onSaveSnippet={handleSaveSnippet} />
               </TabsContent>
 
               <TabsContent value="molecules" className="mt-8">
@@ -122,7 +136,7 @@ function App() {
                     Simple groups of atoms functioning together as a unit - form fields, search bars, and cards
                   </p>
                 </div>
-                <MoleculesSection />
+                <MoleculesSection onSaveSnippet={handleSaveSnippet} />
               </TabsContent>
 
               <TabsContent value="organisms" className="mt-8">
@@ -132,7 +146,7 @@ function App() {
                     Complex UI components composed of molecules and atoms - headers, forms, and data displays
                   </p>
                 </div>
-                <OrganismsSection />
+                <OrganismsSection onSaveSnippet={handleSaveSnippet} />
               </TabsContent>
 
               <TabsContent value="templates" className="mt-8">
@@ -142,7 +156,7 @@ function App() {
                     Page-level layouts that combine organisms into complete user interfaces
                   </p>
                 </div>
-                <TemplatesSection />
+                <TemplatesSection onSaveSnippet={handleSaveSnippet} />
               </TabsContent>
 
               <TabsContent value="snippets" className="mt-8">

src/components/ComponentShowcase.tsx

@@ -0,0 +1,88 @@
+import { useState } from 'react'
+import { Card } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { FloppyDisk } from '@phosphor-icons/react'
+import { SnippetDialog } from '@/components/SnippetDialog'
+import { Snippet } from '@/lib/types'
+
+interface ComponentShowcaseProps {
+  children: React.ReactNode
+  code: string
+  title: string
+  description?: string
+  language?: string
+  category: string
+  onSaveSnippet: (snippet: Omit<Snippet, 'id' | 'createdAt' | 'updatedAt'>) => void
+}
+
+export function ComponentShowcase({
+  children,
+  code,
+  title,
+  description = '',
+  language = 'tsx',
+  category,
+  onSaveSnippet,
+}: ComponentShowcaseProps) {
+  const [dialogOpen, setDialogOpen] = useState(false)
+  const [prefilledData, setPrefilledData] = useState<{
+    title: string
+    description: string
+    code: string
+    language: string
+    category: string
+  } | null>(null)
+
+  const handleSaveClick = () => {
+    setPrefilledData({
+      title,
+      description,
+      code,
+      language,
+      category,
+    })
+    setDialogOpen(true)
+  }
+
+  const handleSave = (snippetData: Omit<Snippet, 'id' | 'createdAt' | 'updatedAt'>) => {
+    onSaveSnippet(snippetData)
+    setDialogOpen(false)
+    setPrefilledData(null)
+  }
+
+  return (
+    <>
+      <Card className="relative group">
+        <div className="absolute top-4 right-4 z-10 opacity-0 group-hover:opacity-100 transition-opacity">
+          <Button
+            variant="secondary"
+            size="sm"
+            onClick={handleSaveClick}
+            className="gap-2 shadow-lg"
+          >
+            <FloppyDisk weight="bold" />
+            Save as Snippet
+          </Button>
+        </div>
+        {children}
+      </Card>
+      {prefilledData && (
+        <SnippetDialog
+          open={dialogOpen}
+          onOpenChange={setDialogOpen}
+          onSave={handleSave}
+          editingSnippet={{
+            id: '',
+            title: prefilledData.title,
+            description: prefilledData.description,
+            code: prefilledData.code,
+            language: prefilledData.language,
+            category: prefilledData.category,
+            createdAt: 0,
+            updatedAt: 0,
+          }}
+        />
+      )}
+    </>
+  )
+}

src/components/atoms/AtomsSection.tsx

@@ -13,8 +13,15 @@ import {
   Minus,
   MagnifyingGlass,
 } from '@phosphor-icons/react'
+import { ComponentShowcase } from '@/components/ComponentShowcase'
+import { atomsCodeSnippets } from '@/lib/component-code-snippets'
+import { Snippet } from '@/lib/types'
 
-export function AtomsSection() {
+interface AtomsSectionProps {
+  onSaveSnippet: (snippet: Omit<Snippet, 'id' | 'createdAt' | 'updatedAt'>) => void
+}
+
+export function AtomsSection({ onSaveSnippet }: AtomsSectionProps) {
   return (
     <div className="space-y-16">
       <section className="space-y-6">
@@ -25,75 +32,83 @@ export function AtomsSection() {
           </p>
         </div>
         
-        <Card className="p-6">
-          <div className="space-y-8">
-            <div className="space-y-3">
-              <h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wider">
-                Variants
-              </h3>
-              <div className="flex flex-wrap gap-4">
-                <Button>Default</Button>
-                <Button variant="secondary">Secondary</Button>
-                <Button variant="destructive">Destructive</Button>
-                <Button variant="outline">Outline</Button>
-                <Button variant="ghost">Ghost</Button>
-                <Button variant="link">Link</Button>
+        <ComponentShowcase
+          code={atomsCodeSnippets.buttonWithIcons}
+          title="Button with Icons"
+          description="Buttons with icon and text combinations"
+          category="atoms"
+          onSaveSnippet={onSaveSnippet}
+        >
+          <Card className="p-6">
+            <div className="space-y-8">
+              <div className="space-y-3">
+                <h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wider">
+                  Variants
+                </h3>
+                <div className="flex flex-wrap gap-4">
+                  <Button>Default</Button>
+                  <Button variant="secondary">Secondary</Button>
+                  <Button variant="destructive">Destructive</Button>
+                  <Button variant="outline">Outline</Button>
+                  <Button variant="ghost">Ghost</Button>
+                  <Button variant="link">Link</Button>
+                </div>
+              </div>
+
+              <Separator />
+
+              <div className="space-y-3">
+                <h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wider">
+                  Sizes
+                </h3>
+                <div className="flex flex-wrap items-center gap-4">
+                  <Button size="sm">Small</Button>
+                  <Button size="default">Default</Button>
+                  <Button size="lg">Large</Button>
+                  <Button size="icon">
+                    <Heart weight="fill" />
+                  </Button>
+                </div>
+              </div>
+
+              <Separator />
+
+              <div className="space-y-3">
+                <h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wider">
+                  With Icons
+                </h3>
+                <div className="flex flex-wrap gap-4">
+                  <Button>
+                    <Star weight="fill" />
+                    Favorite
+                  </Button>
+                  <Button variant="outline">
+                    <Plus weight="bold" />
+                    Add Item
+                  </Button>
+                  <Button variant="secondary">
+                    <Lightning weight="fill" />
+                    Quick Action
+                  </Button>
+                </div>
+              </div>
+
+              <Separator />
+
+              <div className="space-y-3">
+                <h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wider">
+                  States
+                </h3>
+                <div className="flex flex-wrap gap-4">
+                  <Button disabled>Disabled</Button>
+                  <Button variant="outline" disabled>
+                    Disabled Outline
+                  </Button>
+                </div>
               </div>
             </div>
-
-            <Separator />
-
-            <div className="space-y-3">
-              <h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wider">
-                Sizes
-              </h3>
-              <div className="flex flex-wrap items-center gap-4">
-                <Button size="sm">Small</Button>
-                <Button size="default">Default</Button>
-                <Button size="lg">Large</Button>
-                <Button size="icon">
-                  <Heart weight="fill" />
-                </Button>
-              </div>
-            </div>
-
-            <Separator />
-
-            <div className="space-y-3">
-              <h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wider">
-                With Icons
-              </h3>
-              <div className="flex flex-wrap gap-4">
-                <Button>
-                  <Star weight="fill" />
-                  Favorite
-                </Button>
-                <Button variant="outline">
-                  <Plus weight="bold" />
-                  Add Item
-                </Button>
-                <Button variant="secondary">
-                  <Lightning weight="fill" />
-                  Quick Action
-                </Button>
-              </div>
-            </div>
-
-            <Separator />
-
-            <div className="space-y-3">
-              <h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wider">
-                States
-              </h3>
-              <div className="flex flex-wrap gap-4">
-                <Button disabled>Disabled</Button>
-                <Button variant="outline" disabled>
-                  Disabled Outline
-                </Button>
-              </div>
-            </div>
-          </div>
-        </Card>
+          </Card>
+        </ComponentShowcase>
       </section>
 
       <section className="space-y-6">
@@ -104,43 +119,51 @@ export function AtomsSection() {
           </p>
         </div>
         
-        <Card className="p-6">
-          <div className="space-y-8">
-            <div className="space-y-3">
-              <h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wider">
-                Variants
-              </h3>
-              <div className="flex flex-wrap gap-4">
-                <Badge>Default</Badge>
-                <Badge variant="secondary">Secondary</Badge>
-                <Badge variant="destructive">Destructive</Badge>
-                <Badge variant="outline">Outline</Badge>
+        <ComponentShowcase
+          code={atomsCodeSnippets.badgeWithIcons}
+          title="Badge with Icons"
+          description="Badge components with icon combinations"
+          category="atoms"
+          onSaveSnippet={onSaveSnippet}
+        >
+          <Card className="p-6">
+            <div className="space-y-8">
+              <div className="space-y-3">
+                <h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wider">
+                  Variants
+                </h3>
+                <div className="flex flex-wrap gap-4">
+                  <Badge>Default</Badge>
+                  <Badge variant="secondary">Secondary</Badge>
+                  <Badge variant="destructive">Destructive</Badge>
+                  <Badge variant="outline">Outline</Badge>
+                </div>
+              </div>
+
+              <Separator />
+
+              <div className="space-y-3">
+                <h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wider">
+                  With Icons
+                </h3>
+                <div className="flex flex-wrap gap-4">
+                  <Badge>
+                    <Check weight="bold" className="mr-1" />
+                    Completed
+                  </Badge>
+                  <Badge variant="destructive">
+                    <X weight="bold" className="mr-1" />
+                    Failed
+                  </Badge>
+                  <Badge variant="secondary">
+                    <Star weight="fill" className="mr-1" />
+                    Featured
+                  </Badge>
+                </div>
               </div>
             </div>
-
-            <Separator />
-
-            <div className="space-y-3">
-              <h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wider">
-                With Icons
-              </h3>
-              <div className="flex flex-wrap gap-4">
-                <Badge>
-                  <Check weight="bold" className="mr-1" />
-                  Completed
-                </Badge>
-                <Badge variant="destructive">
-                  <X weight="bold" className="mr-1" />
-                  Failed
-                </Badge>
-                <Badge variant="secondary">
-                  <Star weight="fill" className="mr-1" />
-                  Featured
-                </Badge>
-              </div>
-            </div>
-          </div>
-        </Card>
+          </Card>
+        </ComponentShowcase>
       </section>
 
       <section className="space-y-6">
@@ -151,37 +174,45 @@ export function AtomsSection() {
           </p>
         </div>
         
-        <Card className="p-6">
-          <div className="space-y-8">
-            <div className="space-y-3">
-              <h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wider">
-                States
-              </h3>
-              <div className="space-y-4 max-w-md">
-                <Input placeholder="Default input" />
-                <Input placeholder="Disabled input" disabled />
-                <div className="relative">
-                  <MagnifyingGlass className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
-                  <Input placeholder="Search..." className="pl-10" />
+        <ComponentShowcase
+          code={atomsCodeSnippets.inputWithIcon}
+          title="Input with Icon"
+          description="Input field with icon decoration"
+          category="atoms"
+          onSaveSnippet={onSaveSnippet}
+        >
+          <Card className="p-6">
+            <div className="space-y-8">
+              <div className="space-y-3">
+                <h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wider">
+                  States
+                </h3>
+                <div className="space-y-4 max-w-md">
+                  <Input placeholder="Default input" />
+                  <Input placeholder="Disabled input" disabled />
+                  <div className="relative">
+                    <MagnifyingGlass className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
+                    <Input placeholder="Search..." className="pl-10" />
+                  </div>
+                </div>
+              </div>
+
+              <Separator />
+
+              <div className="space-y-3">
+                <h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wider">
+                  Types
+                </h3>
+                <div className="space-y-4 max-w-md">
+                  <Input type="text" placeholder="Text input" />
+                  <Input type="email" placeholder="email@example.com" />
+                  <Input type="password" placeholder="Password" />
+                  <Input type="number" placeholder="123" />
                 </div>
               </div>
             </div>
-
-            <Separator />
-
-            <div className="space-y-3">
-              <h3 className="text-sm font-medium text-muted-foreground uppercase tracking-wider">
-                Types
-              </h3>
-              <div className="space-y-4 max-w-md">
-                <Input type="text" placeholder="Text input" />
-                <Input type="email" placeholder="email@example.com" />
-                <Input type="password" placeholder="Password" />
-                <Input type="number" placeholder="123" />
-              </div>
-            </div>
-          </div>
-        </Card>
+          </Card>
+        </ComponentShowcase>
       </section>
 
       <section className="space-y-6">

src/components/molecules/MoleculesSection.tsx

@@ -16,8 +16,15 @@ import {
   Lock,
   Calendar,
 } from '@phosphor-icons/react'
+import { ComponentShowcase } from '@/components/ComponentShowcase'
+import { moleculesCodeSnippets } from '@/lib/component-code-snippets'
+import { Snippet } from '@/lib/types'
 
-export function MoleculesSection() {
+interface MoleculesSectionProps {
+  onSaveSnippet: (snippet: Omit<Snippet, 'id' | 'createdAt' | 'updatedAt'>) => void
+}
+
+export function MoleculesSection({ onSaveSnippet }: MoleculesSectionProps) {
   return (
     <div className="space-y-16">
       <section className="space-y-6">
@@ -28,33 +35,41 @@ export function MoleculesSection() {
           </p>
         </div>
 
-        <Card className="p-6">
-          <div className="space-y-6 max-w-md">
-            <div className="space-y-2">
-              <Label htmlFor="name">Full Name</Label>
-              <Input id="name" placeholder="John Doe" />
-            </div>
-
-            <div className="space-y-2">
-              <Label htmlFor="email">Email Address</Label>
-              <div className="relative">
-                <Envelope className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
-                <Input id="email" type="email" placeholder="john@example.com" className="pl-10" />
+        <ComponentShowcase
+          code={moleculesCodeSnippets.formField}
+          title="Form Field with Icon and Helper Text"
+          description="Complete form field with label, icon, and validation message"
+          category="molecules"
+          onSaveSnippet={onSaveSnippet}
+        >
+          <Card className="p-6">
+            <div className="space-y-6 max-w-md">
+              <div className="space-y-2">
+                <Label htmlFor="name">Full Name</Label>
+                <Input id="name" placeholder="John Doe" />
               </div>
-              <p className="text-sm text-muted-foreground">
-                We'll never share your email with anyone else.
-              </p>
-            </div>
 
-            <div className="space-y-2">
-              <Label htmlFor="password">Password</Label>
-              <div className="relative">
-                <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
-                <Input id="password" type="password" placeholder="••••••••" className="pl-10" />
+              <div className="space-y-2">
+                <Label htmlFor="email">Email Address</Label>
+                <div className="relative">
+                  <Envelope className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
+                  <Input id="email" type="email" placeholder="john@example.com" className="pl-10" />
+                </div>
+                <p className="text-sm text-muted-foreground">
+                  We'll never share your email with anyone else.
+                </p>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="password">Password</Label>
+                <div className="relative">
+                  <Lock className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
+                  <Input id="password" type="password" placeholder="••••••••" className="pl-10" />
+                </div>
               </div>
             </div>
-          </div>
-        </Card>
+          </Card>
+        </ComponentShowcase>
       </section>
 
       <section className="space-y-6">
@@ -65,31 +80,39 @@ export function MoleculesSection() {
           </p>
         </div>
 
-        <Card className="p-6">
-          <div className="space-y-6">
-            <div className="relative max-w-md">
-              <MagnifyingGlass className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
-              <Input placeholder="Search..." className="pl-10" />
-            </div>
-
-            <Separator />
-
-            <div className="flex gap-2 max-w-md">
-              <div className="relative flex-1">
+        <ComponentShowcase
+          code={moleculesCodeSnippets.searchBarWithButton}
+          title="Search Bar with Button"
+          description="Search input combined with action button"
+          category="molecules"
+          onSaveSnippet={onSaveSnippet}
+        >
+          <Card className="p-6">
+            <div className="space-y-6">
+              <div className="relative max-w-md">
                 <MagnifyingGlass className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
                 <Input placeholder="Search..." className="pl-10" />
               </div>
-              <Button>Search</Button>
-            </div>
 
-            <Separator />
+              <Separator />
 
-            <div className="relative max-w-md">
-              <MagnifyingGlass className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
-              <Input placeholder="Search products, articles, documentation..." className="pl-10 h-12" />
+              <div className="flex gap-2 max-w-md">
+                <div className="relative flex-1">
+                  <MagnifyingGlass className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
+                  <Input placeholder="Search..." className="pl-10" />
+                </div>
+                <Button>Search</Button>
+              </div>
+
+              <Separator />
+
+              <div className="relative max-w-md">
+                <MagnifyingGlass className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
+                <Input placeholder="Search products, articles, documentation..." className="pl-10 h-12" />
+              </div>
             </div>
-          </div>
-        </Card>
+          </Card>
+        </ComponentShowcase>
       </section>
 
       <section className="space-y-6">

src/components/organisms/OrganismsSection.tsx

@@ -32,8 +32,15 @@ import {
   Plus,
 } from '@phosphor-icons/react'
 import { useState } from 'react'
+import { ComponentShowcase } from '@/components/ComponentShowcase'
+import { organismsCodeSnippets } from '@/lib/component-code-snippets'
+import { Snippet } from '@/lib/types'
 
-export function OrganismsSection() {
+interface OrganismsSectionProps {
+  onSaveSnippet: (snippet: Omit<Snippet, 'id' | 'createdAt' | 'updatedAt'>) => void
+}
+
+export function OrganismsSection({ onSaveSnippet }: OrganismsSectionProps) {
   const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid')
 
   return (
@@ -46,47 +53,55 @@ export function OrganismsSection() {
           </p>
         </div>
 
-        <Card className="overflow-hidden">
-          <div className="border-b border-border bg-card p-4">
-            <div className="flex items-center justify-between">
-              <div className="flex items-center gap-6">
-                <h3 className="text-xl font-bold">BrandName</h3>
-                <nav className="hidden md:flex items-center gap-1">
-                  <Button variant="ghost" size="sm">
-                    <House className="mr-2" />
-                    Home
+        <ComponentShowcase
+          code={organismsCodeSnippets.navigationBar}
+          title="Navigation Bar"
+          description="Primary navigation with user menu and notifications"
+          category="organisms"
+          onSaveSnippet={onSaveSnippet}
+        >
+          <Card className="overflow-hidden">
+            <div className="border-b border-border bg-card p-4">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-6">
+                  <h3 className="text-xl font-bold">BrandName</h3>
+                  <nav className="hidden md:flex items-center gap-1">
+                    <Button variant="ghost" size="sm">
+                      <House className="mr-2" />
+                      Home
+                    </Button>
+                    <Button variant="ghost" size="sm">
+                      <ChartBar className="mr-2" />
+                      Analytics
+                    </Button>
+                    <Button variant="ghost" size="sm">
+                      <Folder className="mr-2" />
+                      Projects
+                    </Button>
+                  </nav>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Button variant="ghost" size="icon">
+                    <Bell />
                   </Button>
-                  <Button variant="ghost" size="sm">
-                    <ChartBar className="mr-2" />
-                    Analytics
+                  <Button variant="ghost" size="icon">
+                    <Gear />
                   </Button>
-                  <Button variant="ghost" size="sm">
-                    <Folder className="mr-2" />
-                    Projects
-                  </Button>
-                </nav>
-              </div>
-              <div className="flex items-center gap-2">
-                <Button variant="ghost" size="icon">
-                  <Bell />
-                </Button>
-                <Button variant="ghost" size="icon">
-                  <Gear />
-                </Button>
-                <Avatar className="h-8 w-8">
-                  <AvatarImage src="https://i.pravatar.cc/150?img=3" />
-                  <AvatarFallback>U</AvatarFallback>
-                </Avatar>
+                  <Avatar className="h-8 w-8">
+                    <AvatarImage src="https://i.pravatar.cc/150?img=3" />
+                    <AvatarFallback>U</AvatarFallback>
+                  </Avatar>
+                </div>
               </div>
             </div>
-          </div>
 
-          <div className="p-6">
-            <p className="text-sm text-muted-foreground">
-              Primary navigation with user menu and notifications
-            </p>
-          </div>
-        </Card>
+            <div className="p-6">
+              <p className="text-sm text-muted-foreground">
+                Primary navigation with user menu and notifications
+              </p>
+            </div>
+          </Card>
+        </ComponentShowcase>
 
         <Card className="overflow-hidden">
           <div className="border-b border-border bg-card">

src/components/templates/TemplatesSection.tsx

@@ -17,8 +17,15 @@ import {
   Users,
   ShoppingCart,
 } from '@phosphor-icons/react'
+import { ComponentShowcase } from '@/components/ComponentShowcase'
+import { templatesCodeSnippets } from '@/lib/component-code-snippets'
+import { Snippet } from '@/lib/types'
 
-export function TemplatesSection() {
+interface TemplatesSectionProps {
+  onSaveSnippet: (snippet: Omit<Snippet, 'id' | 'createdAt' | 'updatedAt'>) => void
+}
+
+export function TemplatesSection({ onSaveSnippet }: TemplatesSectionProps) {
   return (
     <div className="space-y-16">
       <section className="space-y-6">
@@ -29,26 +36,33 @@ export function TemplatesSection() {
           </p>
         </div>
 
-        <Card className="overflow-hidden">
-          <div className="border-b border-border bg-card p-4">
-            <div className="flex items-center justify-between">
-              <div className="flex items-center gap-6">
-                <h3 className="text-xl font-bold">Dashboard</h3>
-              </div>
-              <div className="flex items-center gap-2">
-                <Button variant="ghost" size="icon">
-                  <Bell />
-                </Button>
-                <Button variant="ghost" size="icon">
-                  <Gear />
-                </Button>
-                <Avatar className="h-8 w-8">
-                  <AvatarImage src="https://i.pravatar.cc/150?img=4" />
-                  <AvatarFallback>U</AvatarFallback>
-                </Avatar>
+        <ComponentShowcase
+          code={templatesCodeSnippets.dashboardLayout}
+          title="Dashboard Layout"
+          description="Full dashboard template with navigation, sidebar, and stats"
+          category="templates"
+          onSaveSnippet={onSaveSnippet}
+        >
+          <Card className="overflow-hidden">
+            <div className="border-b border-border bg-card p-4">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-6">
+                  <h3 className="text-xl font-bold">Dashboard</h3>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Button variant="ghost" size="icon">
+                    <Bell />
+                  </Button>
+                  <Button variant="ghost" size="icon">
+                    <Gear />
+                  </Button>
+                  <Avatar className="h-8 w-8">
+                    <AvatarImage src="https://i.pravatar.cc/150?img=4" />
+                    <AvatarFallback>U</AvatarFallback>
+                  </Avatar>
+                </div>
               </div>
             </div>
-          </div>
 
           <div className="flex">
             <aside className="w-64 border-r border-border bg-card/30 p-4 hidden lg:block">
@@ -175,6 +189,7 @@ export function TemplatesSection() {
             </main>
           </div>
         </Card>
+      </ComponentShowcase>
       </section>
 
       <section className="space-y-6">
@@ -185,100 +200,108 @@ export function TemplatesSection() {
           </p>
         </div>
 
-        <Card className="overflow-hidden">
-          <div className="border-b border-border bg-card p-4">
-            <div className="flex items-center justify-between">
-              <div className="flex items-center gap-2">
-                <div className="h-8 w-8 rounded-lg bg-accent" />
-                <h3 className="text-xl font-bold">ProductName</h3>
-              </div>
-              <div className="flex items-center gap-2">
-                <Button variant="ghost" size="sm">
-                  Features
-                </Button>
-                <Button variant="ghost" size="sm">
-                  Pricing
-                </Button>
-                <Button variant="ghost" size="sm">
-                  About
-                </Button>
-                <Button size="sm">Sign Up</Button>
+        <ComponentShowcase
+          code={templatesCodeSnippets.landingPage}
+          title="Landing Page Template"
+          description="Full marketing page with hero, features, and CTAs"
+          category="templates"
+          onSaveSnippet={onSaveSnippet}
+        >
+          <Card className="overflow-hidden">
+            <div className="border-b border-border bg-card p-4">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                  <div className="h-8 w-8 rounded-lg bg-accent" />
+                  <h3 className="text-xl font-bold">ProductName</h3>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Button variant="ghost" size="sm">
+                    Features
+                  </Button>
+                  <Button variant="ghost" size="sm">
+                    Pricing
+                  </Button>
+                  <Button variant="ghost" size="sm">
+                    About
+                  </Button>
+                  <Button size="sm">Sign Up</Button>
+                </div>
               </div>
             </div>
-          </div>
 
-          <div className="p-12 text-center bg-gradient-to-br from-primary/20 to-accent/20">
-            <Badge className="mb-4">New Release</Badge>
-            <h1 className="text-5xl font-bold mb-6">
-              Build Amazing Products Faster
-            </h1>
-            <p className="text-xl text-muted-foreground mb-8 max-w-2xl mx-auto">
-              The complete toolkit for modern product development. Ship faster with our
-              component library and design system.
-            </p>
-            <div className="flex items-center justify-center gap-4">
-              <Button size="lg">
-                Get Started
+            <div className="p-12 text-center bg-gradient-to-br from-primary/20 to-accent/20">
+              <Badge className="mb-4">New Release</Badge>
+              <h1 className="text-5xl font-bold mb-6">
+                Build Amazing Products Faster
+              </h1>
+              <p className="text-xl text-muted-foreground mb-8 max-w-2xl mx-auto">
+                The complete toolkit for modern product development. Ship faster with our
+                component library and design system.
+              </p>
+              <div className="flex items-center justify-center gap-4">
+                <Button size="lg">
+                  Get Started
+                  <ArrowRight className="ml-2" />
+                </Button>
+                <Button size="lg" variant="outline">
+                  View Demo
+                </Button>
+              </div>
+            </div>
+
+            <div className="p-12">
+              <div className="text-center mb-12">
+                <h2 className="text-3xl font-bold mb-4">Features</h2>
+                <p className="text-muted-foreground max-w-2xl mx-auto">
+                  Everything you need to build production-ready applications
+                </p>
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <Card className="p-6">
+                  <div className="h-12 w-12 rounded-lg bg-accent/20 flex items-center justify-center mb-4">
+                    <ChartBar className="h-6 w-6 text-accent" />
+                  </div>
+                  <h3 className="font-semibold text-lg mb-2">Analytics</h3>
+                  <p className="text-sm text-muted-foreground">
+                    Track and analyze your product metrics in real-time
+                  </p>
+                </Card>
+
+                <Card className="p-6">
+                  <div className="h-12 w-12 rounded-lg bg-accent/20 flex items-center justify-center mb-4">
+                    <Users className="h-6 w-6 text-accent" />
+                  </div>
+                  <h3 className="font-semibold text-lg mb-2">Collaboration</h3>
+                  <p className="text-sm text-muted-foreground">
+                    Work together with your team seamlessly
+                  </p>
+                </Card>
+
+                <Card className="p-6">
+                  <div className="h-12 w-12 rounded-lg bg-accent/20 flex items-center justify-center mb-4">
+                    <Gear className="h-6 w-6 text-accent" />
+                  </div>
+                  <h3 className="font-semibold text-lg mb-2">Customizable</h3>
+                  <p className="text-sm text-muted-foreground">
+                    Adapt the platform to your specific needs
+                  </p>
+                </Card>
+              </div>
+            </div>
+
+            <div className="p-12 text-center bg-gradient-to-br from-primary to-accent text-primary-foreground">
+              <h2 className="text-4xl font-bold mb-4">Ready to get started?</h2>
+              <p className="text-xl mb-8 opacity-90">
+                Join thousands of teams already building with our platform
+              </p>
+              <Button size="lg" variant="secondary">
+                Start Free Trial
                 <ArrowRight className="ml-2" />
               </Button>
-              <Button size="lg" variant="outline">
-                View Demo
-              </Button>
             </div>
-          </div>
-
-          <div className="p-12">
-            <div className="text-center mb-12">
-              <h2 className="text-3xl font-bold mb-4">Features</h2>
-              <p className="text-muted-foreground max-w-2xl mx-auto">
-                Everything you need to build production-ready applications
-              </p>
-            </div>
-
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-              <Card className="p-6">
-                <div className="h-12 w-12 rounded-lg bg-accent/20 flex items-center justify-center mb-4">
-                  <ChartBar className="h-6 w-6 text-accent" />
-                </div>
-                <h3 className="font-semibold text-lg mb-2">Analytics</h3>
-                <p className="text-sm text-muted-foreground">
-                  Track and analyze your product metrics in real-time
-                </p>
-              </Card>
-
-              <Card className="p-6">
-                <div className="h-12 w-12 rounded-lg bg-accent/20 flex items-center justify-center mb-4">
-                  <Users className="h-6 w-6 text-accent" />
-                </div>
-                <h3 className="font-semibold text-lg mb-2">Collaboration</h3>
-                <p className="text-sm text-muted-foreground">
-                  Work together with your team seamlessly
-                </p>
-              </Card>
-
-              <Card className="p-6">
-                <div className="h-12 w-12 rounded-lg bg-accent/20 flex items-center justify-center mb-4">
-                  <Gear className="h-6 w-6 text-accent" />
-                </div>
-                <h3 className="font-semibold text-lg mb-2">Customizable</h3>
-                <p className="text-sm text-muted-foreground">
-                  Adapt the platform to your specific needs
-                </p>
-              </Card>
-            </div>
-          </div>
-
-          <div className="p-12 text-center bg-gradient-to-br from-primary to-accent text-primary-foreground">
-            <h2 className="text-4xl font-bold mb-4">Ready to get started?</h2>
-            <p className="text-xl mb-8 opacity-90">
-              Join thousands of teams already building with our platform
-            </p>
-            <Button size="lg" variant="secondary">
-              Start Free Trial
-              <ArrowRight className="ml-2" />
-            </Button>
-          </div>
-        </Card>
+          </Card>
+        </ComponentShowcase>
       </section>
 
       <section className="space-y-6">

src/lib/component-code-snippets.ts

@@ -0,0 +1,416 @@
+export const atomsCodeSnippets = {
+  buttonDefault: `<Button>Default</Button>`,
+  buttonSecondary: `<Button variant="secondary">Secondary</Button>`,
+  buttonDestructive: `<Button variant="destructive">Destructive</Button>`,
+  buttonOutline: `<Button variant="outline">Outline</Button>`,
+  buttonGhost: `<Button variant="ghost">Ghost</Button>`,
+  buttonLink: `<Button variant="link">Link</Button>`,
+  buttonSizes: `<Button size="sm">Small</Button>
+<Button size="default">Default</Button>
+<Button size="lg">Large</Button>
+<Button size="icon">
+  <Heart weight="fill" />
+</Button>`,
+  buttonWithIcons: `<Button>
+  <Star weight="fill" />
+  Favorite
+</Button>
+<Button variant="outline">
+  <Plus weight="bold" />
+  Add Item
+</Button>`,
+  badgeVariants: `<Badge>Default</Badge>
+<Badge variant="secondary">Secondary</Badge>
+<Badge variant="destructive">Destructive</Badge>
+<Badge variant="outline">Outline</Badge>`,
+  badgeWithIcons: `<Badge>
+  <Check weight="bold" className="mr-1" />
+  Completed
+</Badge>
+<Badge variant="destructive">
+  <X weight="bold" className="mr-1" />
+  Failed
+</Badge>`,
+  inputBasic: `<Input placeholder="Default input" />`,
+  inputWithIcon: `<div className="relative">
+  <MagnifyingGlass className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
+  <Input placeholder="Search..." className="pl-10" />
+</div>`,
+  inputTypes: `<Input type="text" placeholder="Text input" />
+<Input type="email" placeholder="email@example.com" />
+<Input type="password" placeholder="Password" />
+<Input type="number" placeholder="123" />`,
+}
+
+export const moleculesCodeSnippets = {
+  formField: `<div className="space-y-2">
+  <Label htmlFor="email">Email Address</Label>
+  <div className="relative">
+    <Envelope className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
+    <Input id="email" type="email" placeholder="john@example.com" className="pl-10" />
+  </div>
+  <p className="text-sm text-muted-foreground">
+    We'll never share your email with anyone else.
+  </p>
+</div>`,
+  searchBar: `<div className="relative">
+  <MagnifyingGlass className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
+  <Input placeholder="Search..." className="pl-10" />
+</div>`,
+  searchBarWithButton: `<div className="flex gap-2">
+  <div className="relative flex-1">
+    <MagnifyingGlass className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
+    <Input placeholder="Search..." className="pl-10" />
+  </div>
+  <Button>Search</Button>
+</div>`,
+  userCard: `<Card className="p-6">
+  <div className="flex items-start gap-4">
+    <Avatar className="h-12 w-12">
+      <AvatarImage src="https://i.pravatar.cc/150?img=1" />
+      <AvatarFallback>AM</AvatarFallback>
+    </Avatar>
+    <div className="flex-1 min-w-0">
+      <h3 className="font-semibold text-lg">Alex Morgan</h3>
+      <p className="text-sm text-muted-foreground">@alexmorgan</p>
+      <p className="text-sm mt-2">
+        Product designer passionate about creating delightful user experiences.
+      </p>
+    </div>
+    <Button size="sm" variant="outline">
+      Follow
+    </Button>
+  </div>
+</Card>`,
+  socialActions: `<div className="flex items-center gap-2">
+  <Button variant="ghost" size="sm">
+    <Heart className="mr-2" />
+    Like
+  </Button>
+  <Button variant="ghost" size="sm">
+    <ChatCircle className="mr-2" />
+    Comment
+  </Button>
+  <Button variant="ghost" size="sm">
+    <Share className="mr-2" />
+    Share
+  </Button>
+</div>`,
+  statusIndicator: `<div className="flex items-center justify-between">
+  <div className="flex items-center gap-3">
+    <div className="h-3 w-3 rounded-full bg-accent animate-pulse" />
+    <span className="font-medium">System Online</span>
+  </div>
+  <Badge>Active</Badge>
+</div>`,
+  contentCard: `<Card className="p-6 hover:shadow-lg transition-shadow">
+  <div className="space-y-4">
+    <div className="flex items-start justify-between gap-4">
+      <div className="space-y-1">
+        <h3 className="font-semibold text-lg line-clamp-2">
+          Building Scalable Design Systems
+        </h3>
+        <p className="text-sm text-muted-foreground">
+          Learn how to create and maintain design systems that grow with your team.
+        </p>
+      </div>
+    </div>
+    <div className="flex items-center gap-4 text-sm text-muted-foreground">
+      <div className="flex items-center gap-1">
+        <Calendar className="h-4 w-4" />
+        <span>Mar 15, 2024</span>
+      </div>
+      <span>•</span>
+      <span>5 min read</span>
+    </div>
+    <div className="flex gap-2">
+      <Badge variant="outline">Design</Badge>
+      <Badge variant="outline">System</Badge>
+    </div>
+  </div>
+</Card>`,
+}
+
+export const organismsCodeSnippets = {
+  navigationBar: `<div className="border-b border-border bg-card p-4">
+  <div className="flex items-center justify-between">
+    <div className="flex items-center gap-6">
+      <h3 className="text-xl font-bold">BrandName</h3>
+      <nav className="hidden md:flex items-center gap-1">
+        <Button variant="ghost" size="sm">
+          <House className="mr-2" />
+          Home
+        </Button>
+        <Button variant="ghost" size="sm">
+          <ChartBar className="mr-2" />
+          Analytics
+        </Button>
+        <Button variant="ghost" size="sm">
+          <Folder className="mr-2" />
+          Projects
+        </Button>
+      </nav>
+    </div>
+    <div className="flex items-center gap-2">
+      <Button variant="ghost" size="icon">
+        <Bell />
+      </Button>
+      <Button variant="ghost" size="icon">
+        <Gear />
+      </Button>
+      <Avatar className="h-8 w-8">
+        <AvatarImage src="https://i.pravatar.cc/150?img=3" />
+        <AvatarFallback>U</AvatarFallback>
+      </Avatar>
+    </div>
+  </div>
+</div>`,
+  dataTable: `<Card>
+  <div className="p-4 border-b border-border">
+    <div className="flex items-center justify-between">
+      <h3 className="font-semibold text-lg">Recent Transactions</h3>
+      <Button variant="outline" size="sm">
+        Export
+      </Button>
+    </div>
+  </div>
+  <Table>
+    <TableHeader>
+      <TableRow>
+        <TableHead>Status</TableHead>
+        <TableHead>Transaction</TableHead>
+        <TableHead>Date</TableHead>
+        <TableHead className="text-right">Amount</TableHead>
+      </TableRow>
+    </TableHeader>
+    <TableBody>
+      <TableRow>
+        <TableCell>
+          <Badge>Completed</Badge>
+        </TableCell>
+        <TableCell className="font-medium">Payment received</TableCell>
+        <TableCell>Mar 15, 2024</TableCell>
+        <TableCell className="text-right">$250.00</TableCell>
+      </TableRow>
+    </TableBody>
+  </Table>
+</Card>`,
+  form: `<Card className="p-6">
+  <form className="space-y-6">
+    <div>
+      <h3 className="text-xl font-semibold mb-4">Create Account</h3>
+      <p className="text-sm text-muted-foreground">
+        Fill in your details to get started
+      </p>
+    </div>
+    <Separator />
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+      <div className="space-y-2">
+        <Label htmlFor="firstName">First Name</Label>
+        <Input id="firstName" placeholder="John" />
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor="lastName">Last Name</Label>
+        <Input id="lastName" placeholder="Doe" />
+      </div>
+    </div>
+    <div className="space-y-2">
+      <Label htmlFor="email">Email</Label>
+      <div className="relative">
+        <Envelope className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
+        <Input id="email" type="email" placeholder="john@example.com" className="pl-10" />
+      </div>
+    </div>
+    <Separator />
+    <div className="flex items-center justify-between gap-4">
+      <Button variant="outline" type="button">
+        Cancel
+      </Button>
+      <Button type="submit">
+        Create Account
+        <ArrowRight className="ml-2" />
+      </Button>
+    </div>
+  </form>
+</Card>`,
+  taskList: `<Card>
+  <div className="p-4 border-b border-border">
+    <div className="flex items-center justify-between">
+      <h3 className="font-semibold text-lg">Project Tasks</h3>
+      <Button size="sm">
+        <Plus className="mr-2" />
+        Add Task
+      </Button>
+    </div>
+  </div>
+  <div className="divide-y divide-border">
+    <div className="p-4 hover:bg-muted/50 transition-colors">
+      <div className="flex items-start gap-4">
+        <CheckCircle weight="fill" className="h-6 w-6 text-accent mt-0.5" />
+        <div className="flex-1 min-w-0">
+          <h4 className="font-medium">Design system documentation</h4>
+          <p className="text-sm text-muted-foreground mt-1">
+            Complete the component library documentation
+          </p>
+          <div className="flex items-center gap-4 mt-3">
+            <Badge variant="secondary">Design</Badge>
+            <span className="text-xs text-muted-foreground">Completed</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</Card>`,
+  sidebarNavigation: `<div className="flex">
+  <aside className="w-64 border-r border-border bg-card/50 p-4">
+    <div className="space-y-6">
+      <div className="flex items-center gap-2 px-2">
+        <div className="h-8 w-8 rounded-lg bg-accent" />
+        <span className="font-bold">Dashboard</span>
+      </div>
+      <nav className="space-y-1">
+        <Button variant="ghost" className="w-full justify-start">
+          <House className="mr-2" />
+          Home
+        </Button>
+        <Button variant="default" className="w-full justify-start">
+          <ChartBar className="mr-2" />
+          Analytics
+        </Button>
+        <Button variant="ghost" className="w-full justify-start">
+          <Folder className="mr-2" />
+          Projects
+        </Button>
+      </nav>
+    </div>
+  </aside>
+  <div className="flex-1 p-6">
+    <p className="text-sm text-muted-foreground">
+      Main content area
+    </p>
+  </div>
+</div>`,
+}
+
+export const templatesCodeSnippets = {
+  dashboardLayout: `<div className="min-h-screen bg-background">
+  <div className="border-b border-border bg-card p-4">
+    <div className="flex items-center justify-between">
+      <h3 className="text-xl font-bold">Dashboard</h3>
+      <div className="flex items-center gap-2">
+        <Button variant="ghost" size="icon">
+          <Bell />
+        </Button>
+        <Avatar className="h-8 w-8">
+          <AvatarFallback>U</AvatarFallback>
+        </Avatar>
+      </div>
+    </div>
+  </div>
+  <div className="flex">
+    <aside className="w-64 border-r border-border bg-card/30 p-4">
+      <nav className="space-y-1">
+        <Button variant="default" className="w-full justify-start">
+          <House className="mr-2" />
+          Overview
+        </Button>
+        <Button variant="ghost" className="w-full justify-start">
+          <ChartBar className="mr-2" />
+          Analytics
+        </Button>
+      </nav>
+    </aside>
+    <main className="flex-1 p-6">
+      <h1 className="text-3xl font-bold">Overview</h1>
+      <div className="grid grid-cols-3 gap-6 mt-6">
+        <Card className="p-6">
+          <p className="text-sm text-muted-foreground">Total Revenue</p>
+          <p className="text-3xl font-bold mt-2">$45,231</p>
+        </Card>
+      </div>
+    </main>
+  </div>
+</div>`,
+  landingPage: `<div className="min-h-screen">
+  <div className="border-b border-border bg-card p-4">
+    <div className="flex items-center justify-between">
+      <div className="flex items-center gap-2">
+        <div className="h-8 w-8 rounded-lg bg-accent" />
+        <h3 className="text-xl font-bold">ProductName</h3>
+      </div>
+      <div className="flex items-center gap-2">
+        <Button variant="ghost" size="sm">Features</Button>
+        <Button size="sm">Sign Up</Button>
+      </div>
+    </div>
+  </div>
+  <div className="p-12 text-center bg-gradient-to-br from-primary/20 to-accent/20">
+    <Badge className="mb-4">New Release</Badge>
+    <h1 className="text-5xl font-bold mb-6">
+      Build Amazing Products Faster
+    </h1>
+    <p className="text-xl text-muted-foreground mb-8 max-w-2xl mx-auto">
+      The complete toolkit for modern product development.
+    </p>
+    <Button size="lg">
+      Get Started
+      <ArrowRight className="ml-2" />
+    </Button>
+  </div>
+</div>`,
+  ecommercePage: `<div className="min-h-screen">
+  <div className="border-b border-border bg-card p-4">
+    <div className="flex items-center justify-between">
+      <h3 className="text-xl font-bold">Store</h3>
+      <Button variant="ghost" size="icon">
+        <ShoppingCart />
+      </Button>
+    </div>
+  </div>
+  <div className="p-8">
+    <div className="grid grid-cols-2 gap-12">
+      <div className="aspect-square rounded-lg bg-gradient-to-br from-primary to-accent" />
+      <div className="space-y-6">
+        <Badge>New Arrival</Badge>
+        <h1 className="text-4xl font-bold">Premium Product</h1>
+        <span className="text-3xl font-bold">$299.00</span>
+        <Button size="lg" className="w-full">
+          <ShoppingCart className="mr-2" />
+          Add to Cart
+        </Button>
+      </div>
+    </div>
+  </div>
+</div>`,
+  blogArticle: `<div className="min-h-screen">
+  <div className="border-b border-border bg-card p-4">
+    <h3 className="text-xl font-bold">Blog</h3>
+  </div>
+  <div className="p-8">
+    <div className="max-w-4xl mx-auto space-y-6">
+      <div className="flex gap-2">
+        <Badge>Design</Badge>
+        <Badge variant="secondary">Tutorial</Badge>
+      </div>
+      <h1 className="text-5xl font-bold">
+        Building a Comprehensive Component Library
+      </h1>
+      <div className="flex items-center gap-4">
+        <Avatar className="h-12 w-12">
+          <AvatarFallback>AW</AvatarFallback>
+        </Avatar>
+        <div>
+          <p className="font-medium">Alex Writer</p>
+          <p className="text-sm text-muted-foreground">
+            March 15, 2024 · 10 min read
+          </p>
+        </div>
+      </div>
+      <div className="aspect-video rounded-lg bg-gradient-to-br from-primary to-accent" />
+      <p className="text-lg text-muted-foreground leading-relaxed">
+        Design systems have become an essential part of modern product development.
+      </p>
+    </div>
+  </div>
+</div>`,
+}