@doswiftly/cli 0.1.1

package/templates/storefront-nextjs-shadcn/components/home/category-grid.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import Link from "next/link";
+import { cn } from "@/lib/utils";
+import { useCollections } from "@/lib/graphql/hooks";
+
+export interface CategoryGridProps {
+  className?: string;
+}
+
+export function CategoryGrid({ className }: CategoryGridProps) {
+  // Use collections for homepage marketing (not categories)
+  // Collections are better for homepage because they're curated and flexible
+  const { data, isLoading, error } = useCollections({
+    first: 8,
+  });
+
+  const collections = data?.collections ?? [];
+
+  if (isLoading) {
+    return (
+      <section className={cn("container mx-auto px-4", className)}>
+        <div className="mb-8 text-center">
+          <h2 className="text-3xl font-bold text-foreground">Shop by Category</h2>
+          <p className="mt-2 text-muted-foreground">
+            Find exactly what you're looking for
+          </p>
+        </div>
+        <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-4">
+          {Array.from({ length: 8 }).map((_, i) => (
+            <div key={i} className="animate-pulse rounded-lg border border-border p-6">
+              <div className="mb-3 h-10 w-10 bg-muted rounded mx-auto"></div>
+              <div className="h-4 bg-muted rounded"></div>
+            </div>
+          ))}
+        </div>
+      </section>
+    );
+  }
+
+  if (error || collections.length === 0) {
+    return null; // Don't show section if no collections
+  }
+
+  return (
+    <section className={cn("container mx-auto px-4", className)}>
+      <div className="mb-8 text-center">
+        <h2 className="text-3xl font-bold text-foreground">Shop by Category</h2>
+        <p className="mt-2 text-muted-foreground">
+          Find exactly what you're looking for
+        </p>
+      </div>
+
+      <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-4">
+        {collections.map((collection: any) => (
+          <Link
+            key={collection.id}
+            href={`/collections/${collection.handle}`}
+            className="group flex flex-col items-center justify-center rounded-lg border border-border bg-background p-6 transition-all hover:border-primary hover:shadow-md"
+          >
+            <div className="mb-3 text-4xl transition-transform group-hover:scale-110">
+              🛍️
+            </div>
+            <span className="text-center font-medium text-foreground group-hover:text-primary">
+              {collection.title}
+            </span>
+          </Link>
+        ))}
+      </div>
+    </section>
+  );
+}

package/templates/storefront-nextjs-shadcn/components/home/featured-collections.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { useCollections } from "@/lib/graphql/hooks";
+
+export interface Collection {
+  id: string;
+  handle: string;
+  title: string;
+  description?: string;
+  image?: {
+    url: string;
+    altText?: string | null;
+  } | null;
+}
+
+export function FeaturedCollections() {
+  // Fetch collections using GraphQL
+  const { data, isLoading, error } = useCollections({
+    first: 3,
+  });
+
+  const collections = data?.collections ?? [];
+
+  if (isLoading) {
+    return (
+      <section className="container mx-auto px-4">
+        <div className="mb-8 text-center">
+          <h2 className="text-3xl font-bold text-foreground">Featured Collections</h2>
+          <p className="mt-2 text-muted-foreground">
+            Explore our curated collections
+          </p>
+        </div>
+        <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+          {Array.from({ length: 3 }).map((_, i) => (
+            <div key={i} className="animate-pulse">
+              <div className="aspect-[4/3] bg-muted rounded-lg mb-4"></div>
+              <div className="h-6 bg-muted rounded mb-2"></div>
+              <div className="h-4 bg-muted rounded w-3/4"></div>
+            </div>
+          ))}
+        </div>
+      </section>
+    );
+  }
+
+  if (error || collections.length === 0) {
+    return null; // Don't show section if no collections
+  }
+
+  return (
+    <section className="container mx-auto px-4">
+      <div className="mb-8 text-center">
+        <h2 className="text-3xl font-bold text-foreground">Featured Collections</h2>
+        <p className="mt-2 text-muted-foreground">
+          Explore our curated collections
+        </p>
+      </div>
+
+      {collections.length > 0 ? (
+        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+          {collections.map((collection: Collection) => (
+            <Link
+              key={collection.id}
+              href={`/collections/${collection.handle}`}
+              className="group"
+            >
+              <Card className="overflow-hidden transition-shadow hover:shadow-lg">
+                <div className="relative aspect-[16/9] overflow-hidden bg-muted">
+                  {collection.image?.url ? (
+                    <img
+                      src={collection.image.url}
+                      alt={collection.image.altText || collection.title}
+                      className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
+                    />
+                  ) : (
+                    <div className="flex h-full items-center justify-center text-muted-foreground">
+                      <span className="text-4xl">🛍️</span>
+                    </div>
+                  )}
+                </div>
+                <CardContent className="p-6">
+                  <h3 className="text-xl font-semibold text-foreground group-hover:text-primary">
+                    {collection.title}
+                  </h3>
+                  {collection.description && (
+                    <p className="mt-2 line-clamp-2 text-sm text-muted-foreground">
+                      {collection.description}
+                    </p>
+                  )}
+                </CardContent>
+              </Card>
+            </Link>
+          ))}
+        </div>
+      ) : (
+        <div className="rounded-lg border border-border bg-muted/50 p-12 text-center">
+          <p className="text-muted-foreground">
+            No collections available at the moment.
+          </p>
+        </div>
+      )}
+    </section>
+  );
+}

package/templates/storefront-nextjs-shadcn/components/home/featured-products.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import Link from "next/link";
+import { ProductGrid } from "@/components/product/product-grid";
+import { Button } from "@/components/ui/button";
+import { useProducts } from "@/lib/graphql/hooks";
+
+export function FeaturedProducts() {
+  // Fetch featured products using GraphQL
+  const { data, isLoading, error } = useProducts({
+    first: 8,
+    // TODO: Add featured filter when backend supports it
+  });
+
+  const products = data?.products ?? [];
+
+  if (isLoading) {
+    return (
+      <section className="container mx-auto px-4">
+        <div className="mb-8 flex items-center justify-between">
+          <div>
+            <h2 className="text-3xl font-bold text-foreground">Featured Products</h2>
+            <p className="mt-2 text-muted-foreground">
+              Handpicked favorites just for you
+            </p>
+          </div>
+        </div>
+        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
+          {Array.from({ length: 4 }).map((_, i) => (
+            <div key={i} className="animate-pulse">
+              <div className="aspect-square bg-muted rounded-lg mb-4"></div>
+              <div className="h-4 bg-muted rounded mb-2"></div>
+              <div className="h-4 bg-muted rounded w-1/2"></div>
+            </div>
+          ))}
+        </div>
+      </section>
+    );
+  }
+
+  // Handle error state explicitly
+  if (error) {
+    console.error('[FeaturedProducts] Failed to load products:', error);
+    return null; // Gracefully hide section on error
+  }
+
+  // Hide section if no products
+  if (products.length === 0) {
+    return null;
+  }
+
+  return (
+    <section className="container mx-auto px-4">
+      <div className="mb-8 flex items-center justify-between">
+        <div>
+          <h2 className="text-3xl font-bold text-foreground">Featured Products</h2>
+          <p className="mt-2 text-muted-foreground">
+            Handpicked favorites just for you
+          </p>
+        </div>
+        <Button variant="outline" asChild>
+          <Link href="/products">View All</Link>
+        </Button>
+      </div>
+
+      {products.length > 0 ? (
+        <ProductGrid
+          products={products}
+          columns={4}
+          priorityCount={4}
+          showBadges
+        />
+      ) : (
+        <div className="rounded-lg border border-border bg-muted/50 p-12 text-center">
+          <p className="text-muted-foreground">
+            No featured products available at the moment.
+          </p>
+          <Button className="mt-4" asChild>
+            <Link href="/products">Browse All Products</Link>
+          </Button>
+        </div>
+      )}
+    </section>
+  );
+}

package/templates/storefront-nextjs-shadcn/components/home/hero-section.tsx

@@ -0,0 +1,34 @@
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+
+export function HeroSection() {
+  return (
+    <section className="container mx-auto px-4">
+      <div className="relative overflow-hidden rounded-2xl bg-gradient-to-r from-primary/10 via-primary/5 to-background p-8 md:p-16">
+        <div className="relative z-10 mx-auto max-w-3xl text-center">
+          <h1 className="mb-4 text-4xl font-bold tracking-tight text-foreground sm:text-5xl md:text-6xl">
+            Welcome to{" "}
+            <span className="text-primary">
+              {process.env.NEXT_PUBLIC_SITE_NAME || "My Store"}
+            </span>
+          </h1>
+          <p className="mx-auto mb-8 max-w-2xl text-lg text-muted-foreground">
+            Discover our curated collection of quality products. Shop with confidence and enjoy exceptional service.
+          </p>
+          <div className="flex flex-col justify-center gap-4 sm:flex-row">
+            <Button size="lg" asChild>
+              <Link href="/products">Shop Now</Link>
+            </Button>
+            <Button size="lg" variant="outline" asChild>
+              <Link href="/products">Browse Products</Link>
+            </Button>
+          </div>
+        </div>
+
+        {/* Decorative elements */}
+        <div className="absolute -right-20 -top-20 h-64 w-64 rounded-full bg-primary/10 blur-3xl" />
+        <div className="absolute -bottom-20 -left-20 h-64 w-64 rounded-full bg-primary/10 blur-3xl" />
+      </div>
+    </section>
+  );
+}

package/templates/storefront-nextjs-shadcn/components/home/index.ts

@@ -0,0 +1,8 @@
+export { HeroSection } from './hero-section';
+export { FeaturedProducts } from './featured-products';
+export { FeaturedCollections } from './featured-collections';
+export type { Collection } from './featured-collections';
+export { CategoryGrid } from './category-grid';
+export type { CategoryGridProps } from './category-grid';
+export { NewsletterSignup } from './newsletter-signup';
+export type { NewsletterSignupProps } from './newsletter-signup';

package/templates/storefront-nextjs-shadcn/components/home/newsletter-signup.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import { useState } from "react";
+import { Mail, Check } from "lucide-react";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+export interface NewsletterSignupProps {
+  className?: string;
+}
+
+export function NewsletterSignup({ className }: NewsletterSignupProps) {
+  const [email, setEmail] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [isSuccess, setIsSuccess] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    if (!email || !email.includes("@")) {
+      setError("Please enter a valid email address");
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      // TODO: Implement newsletter subscription API call
+      // await subscribeToNewsletter(email);
+      
+      // Simulate API call
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+      
+      setIsSuccess(true);
+      setEmail("");
+      
+      // Reset success state after 3 seconds
+      setTimeout(() => {
+        setIsSuccess(false);
+      }, 3000);
+    } catch (err) {
+      setError("Failed to subscribe. Please try again.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <section className={cn("container mx-auto px-4", className)}>
+      <div className="rounded-2xl bg-gradient-to-r from-primary/10 via-primary/5 to-background p-8 md:p-12">
+        <div className="mx-auto max-w-2xl text-center">
+          <div className="mb-4 inline-flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
+            <Mail className="h-6 w-6 text-primary" />
+          </div>
+          
+          <h2 className="mb-2 text-3xl font-bold text-foreground">
+            Stay in the Loop
+          </h2>
+          <p className="mb-6 text-muted-foreground">
+            Subscribe to our newsletter for exclusive offers, new arrivals, and insider news.
+          </p>
+
+          {isSuccess ? (
+            <div className="flex items-center justify-center gap-2 rounded-lg bg-green-50 p-4 text-green-700 dark:bg-green-950 dark:text-green-400">
+              <Check className="h-5 w-5" />
+              <span className="font-medium">
+                Thanks for subscribing! Check your email for confirmation.
+              </span>
+            </div>
+          ) : (
+            <form onSubmit={handleSubmit} className="mx-auto max-w-md">
+              <div className="flex flex-col gap-3 sm:flex-row">
+                <Input
+                  type="email"
+                  placeholder="Enter your email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  disabled={isLoading}
+                  className="flex-1"
+                  required
+                />
+                <Button
+                  type="submit"
+                  disabled={isLoading || !email}
+                  size="lg"
+                  className="sm:w-auto"
+                >
+                  {isLoading ? "Subscribing..." : "Subscribe"}
+                </Button>
+              </div>
+              
+              {error && (
+                <p className="mt-2 text-sm text-destructive">{error}</p>
+              )}
+              
+              <p className="mt-3 text-xs text-muted-foreground">
+                By subscribing, you agree to our Privacy Policy and consent to receive updates.
+              </p>
+            </form>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+}

package/templates/storefront-nextjs-shadcn/components/layout/breadcrumbs.tsx

@@ -0,0 +1,133 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { ChevronRight, Home } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export interface BreadcrumbItem {
+  label: string;
+  href: string;
+}
+
+export interface BreadcrumbsProps {
+  items?: BreadcrumbItem[];
+  className?: string;
+  showHome?: boolean;
+}
+
+/**
+ * Breadcrumbs component for navigation hierarchy
+ * 
+ * @example
+ * // Auto-generate from pathname
+ * <Breadcrumbs />
+ * 
+ * @example
+ * // Custom breadcrumb items
+ * <Breadcrumbs items={[
+ *   { label: "Products", href: "/products" },
+ *   { label: "Electronics", href: "/products/electronics" },
+ *   { label: "Laptops", href: "/products/electronics/laptops" }
+ * ]} />
+ */
+export function Breadcrumbs({
+  items,
+  className,
+  showHome = true,
+}: BreadcrumbsProps) {
+  const pathname = usePathname();
+
+  // Auto-generate breadcrumbs from pathname if items not provided
+  const breadcrumbItems = items || generateBreadcrumbs(pathname);
+
+  // Don't show breadcrumbs on homepage
+  if (pathname === "/" || breadcrumbItems.length === 0) {
+    return null;
+  }
+
+  return (
+    <nav
+      aria-label="Breadcrumb"
+      className={cn("flex items-center gap-2 text-sm", className)}
+    >
+      <ol className="flex items-center gap-2">
+        {showHome && (
+          <li>
+            <Link
+              href="/"
+              className="flex items-center text-muted-foreground hover:text-foreground transition-colors"
+              aria-label="Home"
+            >
+              <Home className="h-4 w-4" />
+            </Link>
+          </li>
+        )}
+
+        {breadcrumbItems.map((item, index) => {
+          const isLast = index === breadcrumbItems.length - 1;
+
+          return (
+            <li key={item.href} className="flex items-center gap-2">
+              {(showHome || index > 0) && (
+                <ChevronRight
+                  className="h-4 w-4 text-muted-foreground"
+                  aria-hidden="true"
+                />
+              )}
+
+              {isLast ? (
+                <span
+                  className="font-medium text-foreground"
+                  aria-current="page"
+                >
+                  {item.label}
+                </span>
+              ) : (
+                <Link
+                  href={item.href}
+                  className="text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  {item.label}
+                </Link>
+              )}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+}
+
+/**
+ * Generate breadcrumb items from pathname
+ */
+function generateBreadcrumbs(pathname: string): BreadcrumbItem[] {
+  const segments = pathname.split("/").filter(Boolean);
+  const breadcrumbs: BreadcrumbItem[] = [];
+
+  let currentPath = "";
+  for (const segment of segments) {
+    currentPath += `/${segment}`;
+    
+    // Format label: remove hyphens, capitalize words
+    const label = segment
+      .split("-")
+      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+      .join(" ");
+
+    breadcrumbs.push({
+      label,
+      href: currentPath,
+    });
+  }
+
+  return breadcrumbs;
+}
+
+/**
+ * Helper function to create custom breadcrumb items
+ */
+export function createBreadcrumbs(...items: BreadcrumbItem[]): BreadcrumbItem[] {
+  return items;
+}