@reinvented/design 0.4.0 → 1.1.0

package/skills/apps/e-commerce.md

@@ -0,0 +1,109 @@
+# App Type: E-Commerce
+
+Product catalogs, shopping carts, checkout flows, buyer account tracking, and storefronts.
+
+## Layout
+- **Storefront / Buyer View**: `layouts/topbar.md` — top navigation with prominent category mega-menus, global search, and a persistent cart icon.
+- **Admin / Seller View**: `layouts/sidebar.md` — sidebar focused on Inventory, Orders, Customers, and Settings.
+
+## Key Screens
+1. **Product Grid / Category List** — Filter sidebar on the left, responsive product grid on the right.
+2. **Product Detail Page (PDP)** — High quality masonry or carousel imagery on the left, purchase actions and variants on the right.
+3. **Cart Slide-out** — A `<Sheet>` (sidebar drawer) pattern for quick cart edits without leaving the shopping context.
+4. **Checkout Flow** — Multi-step wizard layout focused purely on conversion (no top nav distractions).
+
+## Component Composition Example
+
+```tsx
+<!-- Storefront Category View -->
+<div className="max-w-7xl mx-auto px-6 py-8">
+  
+  <!-- Breadcrumbs & Title -->
+  <div className="mb-8">
+    <div className="text-sm text-muted-foreground flex gap-2 items-center mb-2">
+      Home <ChevronRight className="w-3 h-3" /> Electronics <ChevronRight className="w-3 h-3" /> Audio
+    </div>
+    <h1 className="text-3xl font-bold">Wireless Audio</h1>
+  </div>
+
+  <div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
+    <!-- Filters Sidebar -->
+    <aside className="space-y-6 hidden lg:block">
+      <div>
+        <h3 className="font-semibold mb-3">Categories</h3>
+        <div className="space-y-2 text-sm text-muted-foreground">
+          <div className="flex items-center justify-between cursor-pointer hover:text-foreground">
+            <span>Headphones</span> <span>(24)</span>
+          </div>
+          <div className="flex items-center justify-between cursor-pointer text-foreground font-medium">
+            <span>Earbuds</span> <span>(12)</span>
+          </div>
+          <div className="flex items-center justify-between cursor-pointer hover:text-foreground">
+            <span>Speakers</span> <span>(8)</span>
+          </div>
+        </div>
+      </div>
+      <Separator />
+      <div>
+        <h3 className="font-semibold mb-3">Price Range</h3>
+        <Slider :defaultValue="[100, 500]" :max="1000" :step="10" />
+        <div className="flex justify-between text-xs text-muted-foreground mt-2">
+          <span>$100</span>
+          <span>$500</span>
+        </div>
+      </div>
+    </aside>
+
+    <!-- Product Grid -->
+    <main className="lg:col-span-3">
+      <div className="flex items-center justify-between mb-6">
+        <span className="text-sm text-muted-foreground">Showing 44 products</span>
+        <Select>
+          <SelectTrigger className="w-40"><SelectValue placeholder="Sort by" /></SelectTrigger>
+          <SelectContent>
+            <SelectItem value="featured">Featured</SelectItem>
+            <SelectItem value="price-low">Price: Low to High</SelectItem>
+            <SelectItem value="price-high">Price: High to Low</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+        <Card v-for="product in products" :key="product.id" className="group cursor-pointer overflow-hidden border-transparent hover:border-border shadow-none hover:shadow-md transition-all">
+          <div className="aspect-square bg-gradient-to-br from-secondary to-secondary/50 relative overflow-hidden">
+            <Badge v-if="product.tag" className="absolute top-2 left-2" variant="secondary">{{ product.tag }}</Badge>
+            <!-- In mockups: use gradient replacement for images -->
+          </div>
+          <CardContent className="p-4">
+            <h3 className="font-medium text-sm truncate">{{ product.name }}</h3>
+            <div className="flex items-center gap-1 mt-1">
+              <Star className="w-3 h-3 fill-primary text-primary" v-for="i in 5" :key="i" />
+              <span className="text-xs text-muted-foreground ml-1">({{ product.reviews }})</span>
+            </div>
+            <div className="flex items-center justify-between mt-3">
+              <div className="flex gap-2 items-center">
+                <span className="font-bold text-lg">${{ product.price }}</span>
+                <span v-if="product.oldPrice" className="text-xs text-muted-foreground line-through">${{ product.oldPrice }}</span>
+              </div>
+              <Button size="icon" variant="ghost" className="h-8 w-8 opacity-0 group-hover:opacity-100 transition-opacity">
+                <ShoppingCart className="w-4 h-4" />
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </main>
+  </div>
+</div>
+```
+
+## Anti-Patterns (DO NOT DO)
+
+- ❌ **Do not use complicated tables for the product catalog display**: Consumers shop visually. Use grid systems using `<Card>` elements for storefronts.
+- ❌ **Do not cram the checkout screen**: The checkout process should be a quiet, centered flow (`max-w-2xl` layout). Hide the main site navigation here.
+- ❌ **Do not miss the active state variants (size/color chips)**: PDP mockups need interactive-looking chips for selecting colors or sizes, not just native `<select>` dropdowns.
+
+## Design Notes
+
+- **Product images**: In mockups, use `aspect-square` with CSS gradient backgrounds unless explicitly asked to generate placeholders via `ComponentPlaceholder`.
+- **Cart Access**: Always include a cart button in the topbar with a numeric badge indicating item count. Clicking it should ideally open a sliding `<Sheet>` drawer overlay.

package/skills/apps/education.md

@@ -0,0 +1,79 @@
+# App Type: Education / Learning Platform
+
+Courses, lessons, quizzes, and student progress tracking.
+
+## Layout
+Use `layouts/sidebar.md` for instructor dashboard. Use `layouts/topbar.md` for student-facing course browser.
+
+## Key Screens
+
+### 1. Course Browser (Student)
+
+```tsx
+<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+  <Card v-for="course in courses" :key="course.id"
+        className="cursor-pointer hover:bg-accent/50 transition-colors overflow-hidden">
+    <div className="aspect-video bg-gradient-to-br from-primary/20 via-primary/5 to-transparent" />
+    <CardContent className="p-4 space-y-2">
+      <Badge variant="secondary" className="text-xs">{{ course.category }}</Badge>
+      <p className="text-sm font-medium line-clamp-2">{{ course.title }}</p>
+      <div className="flex items-center gap-2 text-xs text-muted-foreground">
+        <span>{{ course.lessonsCount }} lessons</span>
+        <span>·</span>
+        <span>{{ course.duration }}</span>
+      </div>
+      <Progress :model-value="course.progress" className="h-1" />
+      <p className="text-xs text-muted-foreground">{{ course.progress }}% complete</p>
+    </CardContent>
+  </Card>
+</div>
+```
+
+### 2. Course Detail / Lesson View
+
+Two-panel layout: lesson content (left, `lg:col-span-2`) + course outline sidebar (right, `lg:col-span-1`).
+
+```tsx
+<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+  <!-- Lesson content -->
+  <div className="lg:col-span-2 space-y-6">
+    <div className="aspect-video rounded-lg bg-gradient-to-br from-muted to-muted/50" />
+    <div>
+      <h1 className="text-2xl font-bold">{{ lesson.title }}</h1>
+      <p className="text-muted-foreground">{{ lesson.description }}</p>
+    </div>
+    <!-- Lesson body content -->
+  </div>
+  <!-- Course outline sidebar -->
+  <Card>
+    <CardHeader>
+      <CardTitle className="text-sm">Course Outline</CardTitle>
+      <CardDescription>{{ completedLessons }}/{{ totalLessons }} complete</CardDescription>
+    </CardHeader>
+    <CardContent className="p-0">
+      <div v-for="lesson in lessons" :key="lesson.id"
+           className={cn('flex items-center gap-3 px-4 py-2 border-b last:border-b-0 transition-colors',
+             lesson.current ? 'bg-accent' : 'hover:bg-accent/50 cursor-pointer')}>
+        <div className={cn('w-5 h-5 rounded-full border-2 flex items-center justify-center shrink-0',
+          lesson.completed ? 'border-primary bg-primary' : 'border-border')}>
+          <Check v-if="lesson.completed" className="w-3 h-3 text-primary-foreground" />
+        </div>
+        <span className="text-sm" className={lesson.current ? 'font-medium' : ''}>{{ lesson.title }}</span>
+      </div>
+    </CardContent>
+  </Card>
+</div>
+```
+
+### 3. Instructor Dashboard
+Standard dashboard layout (see `layouts/dashboard.md`):
+- Stats: Total students, Course completions, Average rating, Revenue
+- Table: Enrolled students with progress bars
+- Recent activity feed
+
+## Design Notes
+- **Progress bars**: Use `Progress` component with `className="h-1"` for compact bars within cards
+- **Lesson completion**: Checkmark circles using `border-2 border-primary bg-primary` for completed, `border-border` for pending
+- **Course cards**: Always include category badge, lesson count, duration, and progress
+- **Quiz/assessment**: Use Card with RadioGroup for multiple-choice questions
+- **Ratings**: Use `Star` icons — `text-warning` for filled, `text-muted` for empty

package/skills/apps/finance.md

@@ -0,0 +1,68 @@
+# App Type: Finance / Banking
+
+Transaction management, budgets, accounts, and financial summaries.
+
+## Layout
+Use `layouts/sidebar.md`. Nav items: Dashboard, Accounts, Transactions, Budgets, Reports. Use `layouts/topbar.md` for consumer banking apps.
+
+## Key Screens
+
+### 1. Account Dashboard
+
+```tsx
+<div className="space-y-6">
+  <!-- Total balance -->
+  <Card>
+    <CardContent className="p-6">
+      <p className="text-sm text-muted-foreground">Total Balance</p>
+      <p className="text-3xl font-bold">$24,563.89</p>
+      <p className="text-xs text-muted-foreground">Across 3 accounts</p>
+    </CardContent>
+  </Card>
+
+  <!-- Account cards -->
+  <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+    <Card v-for="account in accounts" :key="account.id"
+          className="cursor-pointer hover:bg-accent/50 transition-colors">
+      <CardContent className="p-4 space-y-1">
+        <div className="flex items-center justify-between">
+          <p className="text-sm font-medium">{{ account.name }}</p>
+          <Badge variant="outline" className="text-xs">{{ account.type }}</Badge>
+        </div>
+        <p className="text-xl font-bold">${{ account.balance.toLocaleString() }}</p>
+        <p className="text-xs text-muted-foreground">•••• {{ account.lastFour }}</p>
+      </CardContent>
+    </Card>
+  </div>
+</div>
+```
+
+### 2. Transaction List
+Data table with columns:
+- Date (`text-muted-foreground`)
+- Description (name + category badge)
+- Account
+- Amount — right-aligned: positive in `text-foreground font-medium`, negative in `text-destructive font-medium`
+
+### 3. Budget Overview
+
+```tsx
+<div className="space-y-4">
+  <div v-for="budget in budgets" :key="budget.category" className="space-y-2">
+    <div className="flex items-center justify-between text-sm">
+      <span className="font-medium">{{ budget.category }}</span>
+      <span className="text-muted-foreground">${{ budget.spent }} / ${{ budget.limit }}</span>
+    </div>
+    <Progress :model-value="(budget.spent / budget.limit) * 100"
+              className={budget.spent > budget.limit * 0.9 ? 'bg-destructive/20' : ''} className="h-2" />
+  </div>
+</div>
+```
+
+## Design Notes
+- **Currency formatting**: Always right-aligned, `font-medium`. Use `text-destructive` for negative/expenses, `text-foreground` for positive/income
+- **Account masking**: Show only last 4 digits: `•••• 4242`
+- **Transaction categories**: Use `Badge variant="outline"` for category tags (Food, Transport, etc.)
+- **Date grouping**: Group transactions by date with sticky date headers
+- **Charts**: Revenue/expense trends, spending by category pie chart (use ComponentPlaceholder (Mockup Mode Only))
+- **Security**: Never show full account numbers. Sensitive fields should be masked by default with a toggle to reveal

package/skills/apps/health-fitness.md

@@ -0,0 +1,72 @@
+# App Type: Health & Fitness
+
+Workout tracking, health metrics, progress dashboards, and activity logging.
+
+## Layout
+Use `layouts/topbar.md` for consumer apps. Use `layouts/sidebar.md` for professional/coach dashboards.
+
+## Key Screens
+
+### 1. Today's Summary
+
+```tsx
+<div className="space-y-6">
+  <!-- Greeting + date -->
+  <div>
+    <h1 className="text-2xl font-bold">Good morning, Sarah</h1>
+    <p className="text-muted-foreground">Monday, March 15, 2024</p>
+  </div>
+
+  <!-- Activity rings / stats -->
+  <div className="grid grid-cols-3 gap-4">
+    <Card v-for="metric in dailyMetrics" :key="metric.label">
+      <CardContent className="p-4 text-center space-y-1">
+        <div className="mx-auto w-12 h-12 rounded-full border-4 flex items-center justify-center"
+             className={metric.progress >= 100 ? 'border-primary' : 'border-border'}>
+          <component :is="metric.icon" className="w-5 h-5" className={metric.progress >= 100 ? 'text-primary' : 'text-muted-foreground'} />
+        </div>
+        <p className="text-xl font-bold">{{ metric.value }}</p>
+        <p className="text-xs text-muted-foreground">{{ metric.label }}</p>
+      </CardContent>
+    </Card>
+  </div>
+
+  <!-- Today's workouts -->
+  <div className="space-y-3">
+    <h2 className="text-lg font-semibold">Today's Plan</h2>
+    <Card v-for="workout in todayPlan" :key="workout.id"
+          className="cursor-pointer hover:bg-accent/50 transition-colors">
+      <CardContent className="flex items-center gap-4 p-4">
+        <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
+          <component :is="workout.icon" className="w-5 h-5 text-primary" />
+        </div>
+        <div className="flex-1 min-w-0">
+          <p className="text-sm font-medium">{{ workout.name }}</p>
+          <p className="text-xs text-muted-foreground">{{ workout.duration }} · {{ workout.calories }} cal</p>
+        </div>
+        <Badge v-if="workout.completed" variant="default">Done</Badge>
+        <ChevronRight v-else className="w-4 h-4 text-muted-foreground" />
+      </CardContent>
+    </Card>
+  </div>
+</div>
+```
+
+### 2. Workout Detail
+- Exercise list with sets × reps format
+- Timer/stopwatch (use ComponentPlaceholder (Mockup Mode Only))
+- Rest timer between sets
+
+### 3. Progress Dashboard
+Standard dashboard layout with:
+- Stats: Current weight, Workouts this week, Streak, Total calories burned
+- Weight trend chart (use ComponentPlaceholder (Mockup Mode Only))
+- Weekly activity grid (7 day heatmap-style display)
+
+## Design Notes
+- **Metric rings**: Use `border-4` circles with `border-primary` when goal is met, `border-border` when pending
+- **Activity streaks**: Use `bg-primary/20` for active days, `bg-muted` for inactive in a 7-day grid
+- **Exercise sets**: Display as `3 × 12` in `text-sm font-medium`, with weight in `text-muted-foreground`
+- **Rest timers**: Centered countdown display with `text-4xl font-bold`
+- **Personal greeting**: Use time-of-day greeting ("Good morning", "Good afternoon") for consumer warmth
+- **Color coding**: Use `text-primary` for achievements/completions, `text-muted-foreground` for pending

package/skills/apps/marketplace.md

@@ -0,0 +1,99 @@
+# App Type: Marketplace
+
+Listings, search with filters, seller profiles, and reviews.
+
+## Layout
+Use `layouts/topbar.md` with category navigation. Search bar prominently in the top bar.
+
+## Key Screens
+
+### 1. Browse / Search Results
+
+```tsx
+<div className="flex gap-6">
+  <!-- Filter sidebar -->
+  <aside className="w-56 shrink-0 space-y-6 hidden lg:block">
+    <div className="space-y-3">
+      <h3 className="text-sm font-semibold">Category</h3>
+      <div className="space-y-2">
+        <label v-for="cat in categories" :key="cat" className="flex items-center gap-2 text-sm">
+          <Checkbox /> {{ cat }}
+        </label>
+      </div>
+    </div>
+    <Separator />
+    <div className="space-y-3">
+      <h3 className="text-sm font-semibold">Price Range</h3>
+      <div className="flex items-center gap-2">
+        <Input className="h-8" placeholder="Min" />
+        <span className="text-muted-foreground">–</span>
+        <Input className="h-8" placeholder="Max" />
+      </div>
+    </div>
+    <Separator />
+    <div className="space-y-3">
+      <h3 className="text-sm font-semibold">Rating</h3>
+      <RadioGroup>
+        <label className="flex items-center gap-2 text-sm">
+          <RadioGroupItem value="4" /> 4+ stars
+        </label>
+        <label className="flex items-center gap-2 text-sm">
+          <RadioGroupItem value="3" /> 3+ stars
+        </label>
+      </RadioGroup>
+    </div>
+  </aside>
+
+  <!-- Listing grid -->
+  <div className="flex-1">
+    <div className="flex items-center justify-between mb-4">
+      <p className="text-sm text-muted-foreground">{{ totalResults }} results</p>
+      <Select defaultValue="sortBy">
+        <SelectTrigger className="w-36">
+          <SelectValue placeholder="Sort by" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="newest">Newest</SelectItem>
+          <SelectItem value="price-low">Price: Low to High</SelectItem>
+          <SelectItem value="price-high">Price: High to Low</SelectItem>
+          <SelectItem value="rating">Highest Rated</SelectItem>
+        </SelectContent>
+      </Select>
+    </div>
+    <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
+      <Card v-for="item in listings" :key="item.id"
+            className="cursor-pointer hover:bg-accent/50 transition-colors overflow-hidden">
+        <div className="aspect-square bg-gradient-to-br from-muted to-muted/50" />
+        <CardContent className="p-3 space-y-1">
+          <p className="text-sm font-medium line-clamp-2">{{ item.title }}</p>
+          <div className="flex items-center gap-1">
+            <Star className="w-3 h-3 text-warning fill-warning" />
+            <span className="text-xs">{{ item.rating }}</span>
+            <span className="text-xs text-muted-foreground">({{ item.reviewCount }})</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <span className="text-sm font-bold">${{ item.price }}</span>
+            <span v-if="item.originalPrice" className="text-xs line-through text-muted-foreground">${{ item.originalPrice }}</span>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  </div>
+</div>
+```
+
+### 2. Listing Detail
+Full-width layout with:
+- Image gallery (aspect-square grid or horizontal scroll)
+- Title, price, seller info (avatar + name + rating)
+- Description, specifications table
+- Review list with star ratings
+- Contact seller / Buy now action buttons
+
+## Design Notes
+- **Product grid**: `grid-cols-2 sm:grid-cols-3 lg:grid-cols-4` is standard
+- **Price display**: `text-sm font-bold` for current price, `text-xs line-through text-muted-foreground` for original price
+- **Star ratings**: Use `Star` icon — `text-warning fill-warning` for filled, `text-muted` for empty
+- **Filter sidebar**: Left-aligned, `w-56`, hidden on mobile (`hidden lg:block`), use Sheet for mobile filters
+- **Sort control**: Select dropdown aligned right above the grid
+- **Seller badge**: Verified sellers get `Badge variant="default"` next to their name

package/skills/apps/messaging.md

@@ -0,0 +1,84 @@
+# App Type: Messaging
+
+Chat applications, conversation threads, and real-time messaging interfaces.
+
+## Layout
+Use `layouts/list-detail.md` — conversation list on the left, active chat on the right.
+
+## Key Structure
+
+```tsx
+<div className="flex h-screen">
+  <!-- Conversation List (left panel) -->
+  <div className="w-80 border-r flex flex-col">
+    <div className="h-14 flex items-center justify-between px-4 border-b">
+      <h2 className="text-sm font-semibold">Messages</h2>
+      <Button variant="ghost" size="icon" className="h-8 w-8"><PenSquare className="w-4 h-4" /></Button>
+    </div>
+    <ScrollArea className="flex-1">
+      <div className="p-2 space-y-0.5">
+        <button v-for="convo in conversations" :key="convo.id"
+                className={cn('w-full text-left p-3 rounded-md flex items-start gap-3 transition-colors',
+                  activeId === convo.id ? 'bg-accent' : 'hover:bg-accent/50')}>
+          <div className="w-10 h-10 rounded-full shrink-0 bg-muted" />
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center justify-between">
+              <p className="text-sm font-medium truncate">{{ convo.name }}</p>
+              <span className="text-xs text-muted-foreground">{{ convo.time }}</span>
+            </div>
+            <p className="text-xs text-muted-foreground truncate">{{ convo.lastMessage }}</p>
+          </div>
+        </button>
+      </div>
+    </ScrollArea>
+  </div>
+
+  <!-- Chat Area (right panel) -->
+  <div className="flex-1 flex flex-col">
+    <!-- Chat header -->
+    <div className="h-14 flex items-center justify-between px-4 border-b">
+      <div className="flex items-center gap-3">
+        <div className="w-8 h-8 rounded-full bg-gradient-to-br from-primary/60 to-primary" />
+        <div>
+          <p className="text-sm font-medium">Sarah Chen</p>
+          <p className="text-xs text-muted-foreground">Online</p>
+        </div>
+      </div>
+      <Button variant="ghost" size="icon"><MoreHorizontal className="w-4 h-4" /></Button>
+    </div>
+
+    <!-- Messages -->
+    <ScrollArea className="flex-1 p-4">
+      <div className="space-y-4 max-w-2xl mx-auto">
+        <!-- Received message -->
+        <div className="flex items-end gap-2">
+          <div className="w-6 h-6 rounded-full shrink-0 bg-gradient-to-br from-primary/60 to-primary" />
+          <div className="bg-muted rounded-2xl rounded-bl-sm px-4 py-2 max-w-md">
+            <p className="text-sm">Hey, did you finish the design review?</p>
+          </div>
+        </div>
+        <!-- Sent message -->
+        <div className="flex items-end gap-2 justify-end">
+          <div className="bg-primary text-primary-foreground rounded-2xl rounded-br-sm px-4 py-2 max-w-md">
+            <p className="text-sm">Yes! Just pushed the final changes.</p>
+          </div>
+        </div>
+      </div>
+    </ScrollArea>
+
+    <!-- Input area -->
+    <div className="border-t p-4">
+      <div className="flex items-end gap-2 max-w-2xl mx-auto">
+        <Input className="flex-1" placeholder="Type a message..." />
+        <Button size="icon"><Send className="w-4 h-4" /></Button>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+## Design Notes
+- **Chat bubbles**: Received = `bg-muted rounded-bl-sm`, Sent = `bg-primary rounded-br-sm`
+- **Max bubble width**: `max-w-md`
+- **Online indicator**: Small green dot or "Online" text
+- **Input area**: Pinned to bottom with `border-t`

package/skills/apps/portfolio-personal.md

@@ -0,0 +1,90 @@
+# App Type: Portfolio / Personal Site
+
+Personal websites, developer portfolios, freelancer profiles, and creative showcases.
+
+## Layout
+Use `layouts/topbar.md` with minimal navigation (Home, Projects, About, Contact). Or `layouts/marketing.md` for single-page scrolling portfolios.
+
+## Key Screens
+
+### 1. Hero Section
+
+```tsx
+<div className="max-w-3xl mx-auto px-6 py-16 text-center space-y-6">
+  <div className="w-20 h-20 rounded-2xl bg-primary mx-auto flex items-center justify-center">
+    <Code className="w-8 h-8 text-primary-foreground" />
+  </div>
+  <div className="space-y-2">
+    <h1 className="text-3xl font-bold">Sarah Chen</h1>
+    <p className="text-lg text-muted-foreground">Product Designer & Frontend Developer</p>
+  </div>
+  <p className="text-muted-foreground max-w-lg mx-auto">
+    I design and build beautiful, functional interfaces for startups and creative teams.
+    Based in San Francisco, available for freelance work.
+  </p>
+  <div className="flex items-center justify-center gap-3">
+    <Button>View Projects</Button>
+    <Button variant="outline"><Mail className="w-4 h-4" /> Contact</Button>
+  </div>
+</div>
+```
+
+### 2. Project Grid
+
+```tsx
+<div className="max-w-5xl mx-auto px-6 py-12 space-y-8">
+  <div className="text-center space-y-1">
+    <h2 className="text-2xl font-bold">Selected Work</h2>
+    <p className="text-muted-foreground">Recent projects and case studies</p>
+  </div>
+  <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
+    <Card v-for="project in projects" :key="project.id"
+          className="cursor-pointer hover:bg-accent/50 transition-colors overflow-hidden">
+      <div className="aspect-video bg-gradient-to-br from-primary/10 via-primary/5 to-transparent" />
+      <CardContent className="p-4 space-y-2">
+        <div className="flex items-center gap-2">
+          <Badge v-for="tag in project.tags" :key="tag" variant="secondary" className="text-xs">{{ tag }}</Badge>
+        </div>
+        <p className="text-sm font-semibold">{{ project.title }}</p>
+        <p className="text-xs text-muted-foreground line-clamp-2">{{ project.description }}</p>
+      </CardContent>
+    </Card>
+  </div>
+</div>
+```
+
+### 3. Contact Section
+
+```tsx
+<div className="max-w-md mx-auto px-6 py-12 space-y-6">
+  <div className="text-center space-y-1">
+    <h2 className="text-2xl font-bold">Get in Touch</h2>
+    <p className="text-muted-foreground">Have a project in mind? Let's talk.</p>
+  </div>
+  <Card>
+    <CardContent className="p-6 space-y-4">
+      <div className="space-y-2">
+        <Label for="name">Name</Label>
+        <Input id="name" placeholder="Your name" />
+      </div>
+      <div className="space-y-2">
+        <Label for="email">Email</Label>
+        <Input id="email" type="email" placeholder="you@example.com" />
+      </div>
+      <div className="space-y-2">
+        <Label for="message">Message</Label>
+        <Textarea id="message" placeholder="Tell me about your project..." rows="4" />
+      </div>
+      <Button className="w-full">Send Message</Button>
+    </CardContent>
+  </Card>
+</div>
+```
+
+## Design Notes
+- **Content width**: Use `max-w-3xl` for text-heavy sections, `max-w-5xl` for grids — narrower than dashboard layouts
+- **Centering**: Heavy use of `text-center` and `mx-auto` for focused, personal feel
+- **Typography**: Can use `text-3xl font-bold` for hero heading (only place this is acceptable)
+- **Social links**: Row of ghost icon buttons (GitHub, LinkedIn, Twitter, etc.)
+- **Project tags**: Use `Badge variant="secondary"` for technology/category tags
+- **Whitespace**: More generous than dashboard apps — `py-12` to `py-16` between sections for breathing room