@zevcommerce/theme-starter 1.0.0

package/src/sections/ContactInfo.tsx

@@ -0,0 +1,129 @@
+'use client';
+
+import { useTheme } from '@zevcommerce/storefront-api';
+
+export default function ContactInfo() {
+  const { theme } = useTheme();
+  const contact = theme?.settings?.contact;
+
+  if (!contact?.enabled) return null;
+
+  const heading = contact.heading || 'Get in Touch';
+  const showPhone = contact.showPhone && contact.phone;
+  const showEmail = contact.showEmail && contact.email;
+  const showWhatsApp = contact.showWhatsApp && contact.whatsapp;
+  const showAddress = contact.showAddress && contact.address;
+
+  const hasItems = showPhone || showEmail || showWhatsApp || showAddress;
+  if (!hasItems) return null;
+
+  const cards: Array<{ icon: React.ReactNode; label: string; value: string; href?: string }> = [];
+
+  if (showPhone) {
+    cards.push({
+      icon: (
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z" />
+        </svg>
+      ),
+      label: 'Phone',
+      value: contact.phone,
+      href: `tel:${contact.phone}`,
+    });
+  }
+
+  if (showEmail) {
+    cards.push({
+      icon: (
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
+          <polyline points="22,6 12,13 2,6" />
+        </svg>
+      ),
+      label: 'Email',
+      value: contact.email,
+      href: `mailto:${contact.email}`,
+    });
+  }
+
+  if (showWhatsApp) {
+    const waNumber = contact.whatsapp.replace(/[^0-9]/g, '');
+    cards.push({
+      icon: (
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+          <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" />
+        </svg>
+      ),
+      label: 'WhatsApp',
+      value: contact.whatsapp,
+      href: `https://wa.me/${waNumber}`,
+    });
+  }
+
+  if (showAddress) {
+    cards.push({
+      icon: (
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" />
+          <circle cx="12" cy="10" r="3" />
+        </svg>
+      ),
+      label: 'Address',
+      value: contact.address,
+    });
+  }
+
+  return (
+    <section className="py-12 md:py-16" style={{ backgroundColor: 'var(--color-background)' }}>
+      <div className="container mx-auto px-4 sm:px-6">
+        <h2
+          className="text-2xl md:text-3xl font-bold text-center mb-10"
+          style={{ color: 'var(--color-text)' }}
+        >
+          {heading}
+        </h2>
+
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 max-w-4xl mx-auto">
+          {cards.map((card, i) => {
+            const content = (
+              <div
+                key={i}
+                className="flex flex-col items-center text-center p-6 rounded-lg border transition-shadow hover:shadow-md"
+                style={{ borderColor: '#e5e7eb' }}
+              >
+                <div
+                  className="mb-3"
+                  style={{ color: 'var(--color-primary)' }}
+                >
+                  {card.icon}
+                </div>
+                <h3 className="text-xs font-semibold uppercase tracking-wider mb-1" style={{ color: 'var(--color-text)', opacity: 0.5 }}>
+                  {card.label}
+                </h3>
+                <p className="text-sm font-medium" style={{ color: 'var(--color-text)' }}>
+                  {card.value}
+                </p>
+              </div>
+            );
+
+            if (card.href) {
+              return (
+                <a key={i} href={card.href} target={card.label === 'WhatsApp' ? '_blank' : undefined} rel="noopener noreferrer">
+                  {content}
+                </a>
+              );
+            }
+            return content;
+          })}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export const schema = {
+  type: 'contact-info',
+  name: 'Contact Info',
+  limit: 1,
+  settings: [],
+};

package/src/sections/FeaturedProducts.tsx

@@ -0,0 +1,114 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import Link from 'next/link';
+import { useTheme, getCollection, ProductCard, getStorePermalink } from '@zevcommerce/storefront-api';
+import { useParams } from 'next/navigation';
+
+export default function FeaturedProducts() {
+  const { theme, storeConfig } = useTheme();
+  const params = useParams();
+  const domain = (params?.domain as string) || storeConfig?.handle || '';
+
+  const products_settings = theme?.settings?.products;
+  if (!products_settings?.enabled) return null;
+
+  const heading = products_settings.heading || 'Featured Products';
+  const collectionHandle = products_settings.collection || 'all';
+  const limit = parseInt(products_settings.limit || '8');
+  const columns = parseInt(products_settings.columns || '4');
+
+  const [products, setProducts] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    async function fetchData() {
+      if (!domain || !collectionHandle) {
+        setLoading(false);
+        return;
+      }
+      setLoading(true);
+      try {
+        const collection = await getCollection(domain, collectionHandle);
+        if (collection) {
+          const productList = collection.products?.map((p: any) => p.product || p) || [];
+          setProducts(productList.slice(0, limit));
+        }
+      } catch (error: any) {
+        if (error?.response?.status !== 404) {
+          console.error('Error fetching products:', error);
+        }
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchData();
+  }, [domain, collectionHandle, limit]);
+
+  const gridColsMap: Record<number, string> = {
+    2: 'sm:grid-cols-2',
+    3: 'sm:grid-cols-2 lg:grid-cols-3',
+    4: 'sm:grid-cols-2 lg:grid-cols-4',
+  };
+  const gridColsClass = gridColsMap[columns] || 'sm:grid-cols-2 lg:grid-cols-4';
+
+  if (loading) {
+    return (
+      <section className="py-12 md:py-16" style={{ backgroundColor: 'var(--color-background)' }}>
+        <div className="container mx-auto px-4 sm:px-6">
+          <div className="animate-pulse">
+            <div className="h-8 w-48 mb-8 rounded" style={{ backgroundColor: '#e5e7eb' }} />
+            <div className={`grid grid-cols-2 ${gridColsClass} gap-4 sm:gap-6`}>
+              {[...Array(columns)].map((_, i) => (
+                <div key={i} className="aspect-[3/4] rounded-lg" style={{ backgroundColor: '#e5e7eb' }} />
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
+    );
+  }
+
+  if (products.length === 0) return null;
+
+  return (
+    <section className="py-12 md:py-16" style={{ backgroundColor: 'var(--color-background)' }}>
+      <div className="container mx-auto px-4 sm:px-6">
+        {/* Header */}
+        <div className="flex items-center justify-between mb-8">
+          <h2
+            className="text-2xl md:text-3xl font-bold"
+            style={{ color: 'var(--color-text)' }}
+          >
+            {heading}
+          </h2>
+          <Link
+            href={getStorePermalink(domain, `/collections/${collectionHandle}`)}
+            className="text-sm font-medium transition-opacity hover:opacity-70"
+            style={{ color: 'var(--color-primary)' }}
+          >
+            View All
+          </Link>
+        </div>
+
+        {/* Grid */}
+        <div className={`grid grid-cols-2 ${gridColsClass} gap-4 sm:gap-6`}>
+          {products.map(product => (
+            <ProductCard
+              key={product.id}
+              product={product}
+              domain={domain}
+            />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export const schema = {
+  type: 'featured-products',
+  name: 'Featured Products',
+  limit: 1,
+  settings: [],
+};

package/src/sections/Footer.tsx

@@ -0,0 +1,167 @@
+'use client';
+
+import Link from 'next/link';
+import { useTheme, resolveMenuUrl, getStorePermalink } from '@zevcommerce/storefront-api';
+import { useParams } from 'next/navigation';
+
+export default function Footer() {
+  const { theme, storeConfig, menus } = useTheme();
+  const params = useParams();
+  const domain = (params?.domain as string) || storeConfig?.handle || '';
+
+  const footer = theme?.settings?.footer;
+  const storeName = storeConfig?.name || 'Store';
+  const logoSrc = storeConfig?.storeLogo;
+
+  const description = footer?.description || '';
+  const menuHandle = footer?.menuHandle || 'footer';
+  const copyright = footer?.copyright || `${new Date().getFullYear()} ${storeName}. All rights reserved.`;
+
+  // Social links
+  const socialLinks: Array<{ platform: string; url: string; icon: React.ReactNode }> = [];
+
+  if (footer?.instagram) {
+    socialLinks.push({
+      platform: 'Instagram',
+      url: footer.instagram,
+      icon: (
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+          <rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
+          <circle cx="12" cy="12" r="4" />
+          <circle cx="17.5" cy="6.5" r="0.5" fill="currentColor" />
+        </svg>
+      ),
+    });
+  }
+
+  if (footer?.facebook) {
+    socialLinks.push({
+      platform: 'Facebook',
+      url: footer.facebook,
+      icon: (
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+          <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z" />
+        </svg>
+      ),
+    });
+  }
+
+  if (footer?.twitter) {
+    socialLinks.push({
+      platform: 'Twitter',
+      url: footer.twitter,
+      icon: (
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+          <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
+        </svg>
+      ),
+    });
+  }
+
+  if (footer?.tiktok) {
+    socialLinks.push({
+      platform: 'TikTok',
+      url: footer.tiktok,
+      icon: (
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+          <path d="M19.59 6.69a4.83 4.83 0 01-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 01-2.88 2.5 2.89 2.89 0 01-2.89-2.89 2.89 2.89 0 012.89-2.89c.28 0 .54.04.79.1V9.01a6.33 6.33 0 00-.79-.05 6.34 6.34 0 00-6.34 6.34 6.34 6.34 0 006.34 6.34 6.34 6.34 0 006.33-6.34V9.04a8.28 8.28 0 004.84 1.55V7.14a4.85 4.85 0 01-1.07-.45z" />
+        </svg>
+      ),
+    });
+  }
+
+  // Footer menu
+  const footerMenu = menus?.[menuHandle];
+  const menuItems = (footerMenu as any)?.items || [];
+
+  return (
+    <footer
+      className="py-12 md:py-16 border-t"
+      style={{ backgroundColor: 'var(--color-background)', borderColor: '#e5e7eb' }}
+    >
+      <div className="container mx-auto px-4 sm:px-6">
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-10 md:gap-12">
+          {/* Brand column */}
+          <div>
+            <Link href={getStorePermalink(domain, '/')} className="inline-block mb-4">
+              {logoSrc ? (
+                <img src={logoSrc} alt={storeName} className="h-8 w-auto object-contain" />
+              ) : (
+                <span className="text-lg font-bold" style={{ color: 'var(--color-text)' }}>{storeName}</span>
+              )}
+            </Link>
+            {description && (
+              <p className="text-sm leading-relaxed max-w-xs" style={{ color: 'var(--color-text)', opacity: 0.6 }}>
+                {description}
+              </p>
+            )}
+            {/* Social icons */}
+            {socialLinks.length > 0 && (
+              <div className="flex items-center gap-4 mt-5">
+                {socialLinks.map((link, i) => (
+                  <a
+                    key={i}
+                    href={link.url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    aria-label={link.platform}
+                    className="transition-opacity hover:opacity-70"
+                    style={{ color: 'var(--color-text)', opacity: 0.5 }}
+                  >
+                    {link.icon}
+                  </a>
+                ))}
+              </div>
+            )}
+          </div>
+
+          {/* Footer menu */}
+          {menuItems.length > 0 && (
+            <div>
+              <h3 className="text-sm font-semibold uppercase tracking-wider mb-4" style={{ color: 'var(--color-text)' }}>
+                Quick Links
+              </h3>
+              <nav className="flex flex-col gap-2.5">
+                {menuItems.map((item: any) => (
+                  <Link
+                    key={item.id}
+                    href={resolveMenuUrl(item, domain)}
+                    className="text-sm transition-opacity hover:opacity-70"
+                    style={{ color: 'var(--color-text)', opacity: 0.6 }}
+                  >
+                    {item.title}
+                  </Link>
+                ))}
+              </nav>
+            </div>
+          )}
+
+          {/* Store info */}
+          <div>
+            <h3 className="text-sm font-semibold uppercase tracking-wider mb-4" style={{ color: 'var(--color-text)' }}>
+              Store
+            </h3>
+            <div className="flex flex-col gap-2.5 text-sm" style={{ color: 'var(--color-text)', opacity: 0.6 }}>
+              {storeConfig?.email && <p>{storeConfig.email}</p>}
+              {storeConfig?.phone && <p>{storeConfig.phone}</p>}
+            </div>
+          </div>
+        </div>
+
+        {/* Copyright */}
+        <div className="mt-12 pt-8 border-t text-center" style={{ borderColor: '#e5e7eb' }}>
+          <p className="text-xs" style={{ color: 'var(--color-text)', opacity: 0.4 }}>
+            &copy; {copyright}
+          </p>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+export const schema = {
+  type: 'footer',
+  name: 'Footer',
+  limit: 1,
+  settings: [],
+};