@hustle-together/api-dev-tools 3.12.3 → 4.5.1

package/templates/brand-page/page.tsx

@@ -0,0 +1,645 @@
+/**
+ * Brand Page Template
+ *
+ * A comprehensive showcase of your brand identity including:
+ * - Color palette with copy-to-clipboard
+ * - Typography scale
+ * - Component states (buttons, forms, cards)
+ * - Animation examples
+ * - Voice and tone guidelines
+ * - Custom elements (based on interview)
+ *
+ * Generated by: /hustle-brand
+ * Last Updated: {{LAST_UPDATED}}
+ */
+
+"use client";
+
+import { useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Badge } from "@/components/ui/badge";
+import { Separator } from "@/components/ui/separator";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Check, Copy, Loader2, ChevronRight, ExternalLink } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+// ============================================================================
+// BRAND CONFIGURATION (Generated from interview)
+// ============================================================================
+
+// ============================================================================
+// HUSTLE TOGETHER BRANDING (Default)
+// Run `/hustle-brand` to customize these values via interview
+// ============================================================================
+
+const BRAND = {
+  name: "Hustle Together",
+  tagline: "Interview-Driven, Research-First API Development",
+
+  colors: {
+    primary: { name: "Hustle Red", hex: "#ba0c2f", hsl: "350 87% 39%" },
+    secondary: { name: "Background", hex: "#f8f8f8", hsl: "0 0% 97%" },
+    accent: { name: "Accent Red Light", hex: "#ba0c2f1a", hsl: "350 87% 39% / 0.1" },
+    background: { name: "White", hex: "#ffffff", hsl: "0 0% 100%" },
+    foreground: { name: "Black", hex: "#000000", hsl: "0 0% 0%" },
+    muted: { name: "Grey", hex: "#666666", hsl: "0 0% 40%" },
+    destructive: { name: "Error Red", hex: "#ef4444", hsl: "0 84% 60%" },
+  },
+
+  // Dark mode variants
+  colorsDark: {
+    background: { name: "Dark BG", hex: "#0a0a0a", hsl: "0 0% 4%" },
+    secondary: { name: "Dark Secondary", hex: "#111111", hsl: "0 0% 7%" },
+    foreground: { name: "Light Text", hex: "#f0f0f0", hsl: "0 0% 94%" },
+    muted: { name: "Dark Muted", hex: "#999999", hsl: "0 0% 60%" },
+    border: { name: "Dark Border", hex: "#333333", hsl: "0 0% 20%" },
+  },
+
+  gradients: [
+    { name: "Hustle Glow", value: "radial-gradient(circle, rgba(186, 12, 47, 0.3) 0%, transparent 70%)" },
+    { name: "Red Accent", value: "linear-gradient(135deg, #ba0c2f 0%, #8a0922 100%)" },
+  ],
+
+  typography: {
+    fontSans: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif",
+    fontMono: "'SF Mono', 'Fira Code', 'Consolas', monospace",
+    fontHeading: "-apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif",
+  },
+
+  motion: {
+    style: "snappy", // 90s boxy = snappy animations
+    durationFast: "150ms",
+    durationNormal: "300ms",
+    durationSlow: "500ms",
+    easing: "cubic-bezier(0.4, 0, 0.2, 1)",
+    library: "gsap", // Uses GSAP for animations
+  },
+
+  voice: {
+    tone: "technical", // Professional but technical for developers
+    terminology: {
+      users: "developers",
+      cta: "Get Started",
+    },
+    dos: [
+      "Use clear, concise technical language",
+      "Provide code examples for every concept",
+      "Explain the 'why' not just the 'what'",
+      "Reference official documentation",
+    ],
+    donts: [
+      "Don't use marketing buzzwords",
+      "Don't assume prior context - be explicit",
+      "Don't skip error handling examples",
+      "Don't use placeholder data without noting it",
+    ],
+  },
+
+  customElements: ["terminal-animation", "gsap-animations", "typing-effect", "grid-background"],
+};
+
+// ============================================================================
+// COMPONENTS
+// ============================================================================
+
+function ColorSwatch({ name, hex, hsl }: { name: string; hex: string; hsl: string }) {
+  const [copied, setCopied] = useState(false);
+
+  const copyToClipboard = (value: string) => {
+    navigator.clipboard.writeText(value);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <div className="group relative">
+      <div
+        className="h-24 rounded-lg shadow-sm border cursor-pointer transition-transform hover:scale-105"
+        style={{ backgroundColor: hex }}
+        onClick={() => copyToClipboard(hex)}
+      />
+      <div className="mt-2 space-y-1">
+        <p className="font-medium text-sm">{name}</p>
+        <div className="flex items-center gap-2 text-xs text-muted-foreground">
+          <code className="bg-muted px-1 rounded">{hex}</code>
+          <button
+            onClick={() => copyToClipboard(hex)}
+            className="opacity-0 group-hover:opacity-100 transition-opacity"
+          >
+            {copied ? <Check className="h-3 w-3 text-green-500" /> : <Copy className="h-3 w-3" />}
+          </button>
+        </div>
+        <p className="text-xs text-muted-foreground">{hsl}</p>
+      </div>
+    </div>
+  );
+}
+
+function TypographyScale() {
+  const scale = [
+    { name: "Display", class: "text-5xl font-bold", size: "48px" },
+    { name: "H1", class: "text-4xl font-bold", size: "36px" },
+    { name: "H2", class: "text-3xl font-semibold", size: "30px" },
+    { name: "H3", class: "text-2xl font-semibold", size: "24px" },
+    { name: "H4", class: "text-xl font-medium", size: "20px" },
+    { name: "Body Large", class: "text-lg", size: "18px" },
+    { name: "Body", class: "text-base", size: "16px" },
+    { name: "Body Small", class: "text-sm", size: "14px" },
+    { name: "Caption", class: "text-xs", size: "12px" },
+  ];
+
+  return (
+    <div className="space-y-4">
+      {scale.map((item) => (
+        <div key={item.name} className="flex items-baseline gap-4">
+          <span className="w-24 text-sm text-muted-foreground">{item.name}</span>
+          <span className={item.class}>The quick brown fox</span>
+          <span className="text-xs text-muted-foreground ml-auto">{item.size}</span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function ButtonStates() {
+  const [loading, setLoading] = useState(false);
+
+  const handleLoadingDemo = () => {
+    setLoading(true);
+    setTimeout(() => setLoading(false), 2000);
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="flex flex-wrap gap-4">
+        <div className="space-y-2">
+          <p className="text-sm text-muted-foreground">Default</p>
+          <Button>Primary</Button>
+        </div>
+        <div className="space-y-2">
+          <p className="text-sm text-muted-foreground">Secondary</p>
+          <Button variant="secondary">Secondary</Button>
+        </div>
+        <div className="space-y-2">
+          <p className="text-sm text-muted-foreground">Outline</p>
+          <Button variant="outline">Outline</Button>
+        </div>
+        <div className="space-y-2">
+          <p className="text-sm text-muted-foreground">Ghost</p>
+          <Button variant="ghost">Ghost</Button>
+        </div>
+        <div className="space-y-2">
+          <p className="text-sm text-muted-foreground">Destructive</p>
+          <Button variant="destructive">Destructive</Button>
+        </div>
+      </div>
+
+      <Separator />
+
+      <div className="flex flex-wrap gap-4">
+        <div className="space-y-2">
+          <p className="text-sm text-muted-foreground">Hover (interact)</p>
+          <Button>Hover me</Button>
+        </div>
+        <div className="space-y-2">
+          <p className="text-sm text-muted-foreground">Disabled</p>
+          <Button disabled>Disabled</Button>
+        </div>
+        <div className="space-y-2">
+          <p className="text-sm text-muted-foreground">Loading</p>
+          <Button disabled={loading} onClick={handleLoadingDemo}>
+            {loading ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                Loading...
+              </>
+            ) : (
+              "Click to load"
+            )}
+          </Button>
+        </div>
+        <div className="space-y-2">
+          <p className="text-sm text-muted-foreground">With Icon</p>
+          <Button>
+            Continue <ChevronRight className="ml-2 h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+
+      <Separator />
+
+      <div className="flex flex-wrap gap-4">
+        <div className="space-y-2">
+          <p className="text-sm text-muted-foreground">Small</p>
+          <Button size="sm">Small</Button>
+        </div>
+        <div className="space-y-2">
+          <p className="text-sm text-muted-foreground">Default</p>
+          <Button size="default">Default</Button>
+        </div>
+        <div className="space-y-2">
+          <p className="text-sm text-muted-foreground">Large</p>
+          <Button size="lg">Large</Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function FormElements() {
+  return (
+    <div className="grid gap-6 md:grid-cols-2">
+      <div className="space-y-4">
+        <div className="space-y-2">
+          <Label htmlFor="email">Email</Label>
+          <Input id="email" type="email" placeholder="name@example.com" />
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="email-error">Email (Error State)</Label>
+          <Input id="email-error" type="email" placeholder="name@example.com" className="border-destructive" />
+          <p className="text-sm text-destructive">Please enter a valid email address.</p>
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="disabled">Disabled Input</Label>
+          <Input id="disabled" disabled placeholder="Disabled input" />
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <div className="space-y-2">
+          <Label>Select</Label>
+          <Select>
+            <SelectTrigger>
+              <SelectValue placeholder="Select an option" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="option1">Option 1</SelectItem>
+              <SelectItem value="option2">Option 2</SelectItem>
+              <SelectItem value="option3">Option 3</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div className="flex items-center space-x-2">
+          <Checkbox id="terms" />
+          <Label htmlFor="terms" className="text-sm">Accept terms and conditions</Label>
+        </div>
+
+        <div className="space-y-2">
+          <Label>Radio Group</Label>
+          <RadioGroup defaultValue="option1">
+            <div className="flex items-center space-x-2">
+              <RadioGroupItem value="option1" id="r1" />
+              <Label htmlFor="r1">Option 1</Label>
+            </div>
+            <div className="flex items-center space-x-2">
+              <RadioGroupItem value="option2" id="r2" />
+              <Label htmlFor="r2">Option 2</Label>
+            </div>
+          </RadioGroup>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function CardVariations() {
+  return (
+    <div className="grid gap-4 md:grid-cols-3">
+      <Card>
+        <CardHeader>
+          <CardTitle>Default Card</CardTitle>
+          <CardDescription>Standard card with header and content.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm text-muted-foreground">
+            This is the default card style used throughout the application.
+          </p>
+        </CardContent>
+      </Card>
+
+      <Card className="border-primary">
+        <CardHeader>
+          <Badge className="w-fit">Featured</Badge>
+          <CardTitle>Highlighted Card</CardTitle>
+          <CardDescription>Card with primary border accent.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm text-muted-foreground">
+            Used to highlight important content or featured items.
+          </p>
+        </CardContent>
+      </Card>
+
+      <Card className="bg-muted">
+        <CardHeader>
+          <CardTitle>Muted Card</CardTitle>
+          <CardDescription>Card with muted background.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm text-muted-foreground">
+            Used for secondary or supporting content.
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+function AnimationExamples() {
+  const [isVisible, setIsVisible] = useState(true);
+
+  return (
+    <div className="space-y-8">
+      <div className="space-y-4">
+        <div className="flex items-center gap-4">
+          <p className="text-sm font-medium">Motion Style:</p>
+          <Badge variant="outline">{BRAND.motion.style}</Badge>
+          <Badge variant="outline">{BRAND.motion.durationNormal}</Badge>
+          <Badge variant="outline">{BRAND.motion.easing}</Badge>
+        </div>
+      </div>
+
+      <div className="grid gap-6 md:grid-cols-2">
+        <div className="space-y-4">
+          <p className="text-sm font-medium">Fade In/Out</p>
+          <Button variant="outline" onClick={() => setIsVisible(!isVisible)}>
+            Toggle Animation
+          </Button>
+          <AnimatePresence>
+            {isVisible && (
+              <motion.div
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: -20 }}
+                transition={{ duration: 0.3 }}
+                className="p-4 bg-muted rounded-lg"
+              >
+                Animated content
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </div>
+
+        <div className="space-y-4">
+          <p className="text-sm font-medium">Hover Scale</p>
+          <motion.div
+            whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
+            className="p-4 bg-primary text-primary-foreground rounded-lg cursor-pointer text-center"
+          >
+            Hover or tap me
+          </motion.div>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <p className="text-sm font-medium">Loading States</p>
+        <div className="flex gap-4">
+          <div className="space-y-2">
+            <Skeleton className="h-12 w-12 rounded-full" />
+            <Skeleton className="h-4 w-24" />
+          </div>
+          <div className="space-y-2">
+            <Skeleton className="h-4 w-48" />
+            <Skeleton className="h-4 w-36" />
+            <Skeleton className="h-4 w-40" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function VoiceExamples() {
+  const examples = {
+    success: {
+      professional: "Your changes have been saved successfully.",
+      friendly: "Awesome! Your changes are all saved!",
+      technical: "Changes committed. 3 records updated.",
+      playful: "Boom! Saved it like a boss!",
+    },
+    error: {
+      professional: "An error occurred. Please try again.",
+      friendly: "Oops! Something went wrong. Let's try that again.",
+      technical: "Error 500: Internal server error. Retry in 30s.",
+      playful: "Uh oh! The hamsters powering our servers took a break.",
+    },
+    empty: {
+      professional: "No results found for your search.",
+      friendly: "Hmm, we couldn't find anything. Try different keywords?",
+      technical: "Query returned 0 results. Broaden search parameters.",
+      playful: "It's a ghost town here! Nothing to see.",
+    },
+  };
+
+  return (
+    <div className="space-y-8">
+      <div className="space-y-4">
+        <div className="flex items-center gap-4">
+          <p className="text-sm font-medium">Voice Tone:</p>
+          <Badge>{BRAND.voice.tone}</Badge>
+        </div>
+      </div>
+
+      <div className="grid gap-6">
+        {Object.entries(examples).map(([type, messages]) => (
+          <Card key={type}>
+            <CardHeader>
+              <CardTitle className="capitalize">{type} Message</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <p className="text-lg">
+                {messages[BRAND.voice.tone as keyof typeof messages]}
+              </p>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      <Separator />
+
+      <div className="grid gap-6 md:grid-cols-2">
+        <div>
+          <h4 className="font-semibold text-green-600 mb-4">Do's</h4>
+          <ul className="space-y-2">
+            {BRAND.voice.dos.map((item, i) => (
+              <li key={i} className="flex items-start gap-2 text-sm">
+                <Check className="h-4 w-4 text-green-600 mt-0.5 shrink-0" />
+                {item}
+              </li>
+            ))}
+          </ul>
+        </div>
+        <div>
+          <h4 className="font-semibold text-red-600 mb-4">Don'ts</h4>
+          <ul className="space-y-2">
+            {BRAND.voice.donts.map((item, i) => (
+              <li key={i} className="flex items-start gap-2 text-sm text-muted-foreground">
+                <span className="text-red-600 mt-0.5 shrink-0">✕</span>
+                {item}
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ============================================================================
+// MAIN PAGE
+// ============================================================================
+
+export default function BrandPage() {
+  return (
+    <div className="container py-12 space-y-16">
+      {/* Header */}
+      <div className="space-y-4">
+        <h1 className="text-4xl font-bold">{BRAND.name} Brand Guide</h1>
+        <p className="text-xl text-muted-foreground">{BRAND.tagline}</p>
+        <div className="flex gap-2">
+          <Badge variant="outline">Last updated: {{LAST_UPDATED}}</Badge>
+          <Badge variant="outline">Version {{VERSION}}</Badge>
+        </div>
+      </div>
+
+      {/* Navigation */}
+      <Tabs defaultValue="colors" className="space-y-8">
+        <TabsList className="grid grid-cols-3 lg:grid-cols-6 w-full">
+          <TabsTrigger value="colors">Colors</TabsTrigger>
+          <TabsTrigger value="typography">Typography</TabsTrigger>
+          <TabsTrigger value="components">Components</TabsTrigger>
+          <TabsTrigger value="forms">Forms</TabsTrigger>
+          <TabsTrigger value="animations">Animations</TabsTrigger>
+          <TabsTrigger value="voice">Voice</TabsTrigger>
+        </TabsList>
+
+        {/* Colors */}
+        <TabsContent value="colors" className="space-y-8">
+          <div>
+            <h2 className="text-2xl font-semibold mb-6">Color Palette</h2>
+            <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-6">
+              {Object.entries(BRAND.colors).map(([key, color]) => (
+                <ColorSwatch key={key} {...color} />
+              ))}
+            </div>
+          </div>
+
+          {BRAND.gradients.length > 0 && (
+            <div>
+              <h3 className="text-xl font-semibold mb-4">Gradients</h3>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                {BRAND.gradients.map((gradient, i) => (
+                  <div key={i} className="space-y-2">
+                    <div
+                      className="h-24 rounded-lg"
+                      style={{ background: gradient.value }}
+                    />
+                    <p className="text-sm font-medium">{gradient.name}</p>
+                    <code className="text-xs bg-muted px-2 py-1 rounded">{gradient.value}</code>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </TabsContent>
+
+        {/* Typography */}
+        <TabsContent value="typography" className="space-y-8">
+          <div>
+            <h2 className="text-2xl font-semibold mb-6">Typography Scale</h2>
+            <div className="space-y-4 mb-8">
+              <div className="flex gap-4 text-sm">
+                <span className="text-muted-foreground">Sans:</span>
+                <code className="bg-muted px-2 rounded">{BRAND.typography.fontSans}</code>
+              </div>
+              <div className="flex gap-4 text-sm">
+                <span className="text-muted-foreground">Mono:</span>
+                <code className="bg-muted px-2 rounded">{BRAND.typography.fontMono}</code>
+              </div>
+              <div className="flex gap-4 text-sm">
+                <span className="text-muted-foreground">Heading:</span>
+                <code className="bg-muted px-2 rounded">{BRAND.typography.fontHeading}</code>
+              </div>
+            </div>
+            <TypographyScale />
+          </div>
+        </TabsContent>
+
+        {/* Components */}
+        <TabsContent value="components" className="space-y-8">
+          <div>
+            <h2 className="text-2xl font-semibold mb-6">Button States</h2>
+            <ButtonStates />
+          </div>
+
+          <Separator />
+
+          <div>
+            <h2 className="text-2xl font-semibold mb-6">Card Variations</h2>
+            <CardVariations />
+          </div>
+        </TabsContent>
+
+        {/* Forms */}
+        <TabsContent value="forms" className="space-y-8">
+          <div>
+            <h2 className="text-2xl font-semibold mb-6">Form Elements</h2>
+            <FormElements />
+          </div>
+        </TabsContent>
+
+        {/* Animations */}
+        <TabsContent value="animations" className="space-y-8">
+          <div>
+            <h2 className="text-2xl font-semibold mb-6">Animation Examples</h2>
+            <AnimationExamples />
+          </div>
+        </TabsContent>
+
+        {/* Voice */}
+        <TabsContent value="voice" className="space-y-8">
+          <div>
+            <h2 className="text-2xl font-semibold mb-6">Voice & Tone</h2>
+            <VoiceExamples />
+          </div>
+        </TabsContent>
+      </Tabs>
+
+      {/* Custom Elements Section (if any) */}
+      {BRAND.customElements.length > 0 && (
+        <div className="space-y-6">
+          <h2 className="text-2xl font-semibold">Custom Elements</h2>
+          <p className="text-muted-foreground">
+            Unique brand elements selected during the brand interview.
+          </p>
+          <div className="flex flex-wrap gap-2">
+            {BRAND.customElements.map((element) => (
+              <Badge key={element} variant="secondary">{element}</Badge>
+            ))}
+          </div>
+          {/* Custom element demos would be rendered here based on BRAND.customElements */}
+        </div>
+      )}
+
+      {/* Footer */}
+      <div className="border-t pt-8">
+        <p className="text-sm text-muted-foreground">
+          Generated by <code className="bg-muted px-1 rounded">/hustle-brand</code> •
+          Edit with <code className="bg-muted px-1 rounded">/hustle-brand --edit</code>
+        </p>
+      </div>
+    </div>
+  );
+}