chore: initial import

frontend/components/AdminLayout.js

@@ -0,0 +1,39 @@
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+
+const navLinks = [
+  { href: '/admin', label: 'Dashboard' },
+  { href: '/admin/menu', label: 'Menu' },
+  { href: '/admin/orders', label: 'Orders' },
+  { href: '/admin/inventory', label: 'Inventory' },
+  { href: '/admin/delivery', label: 'Delivery' },
+];
+
+export function AdminLayout({ children, title = 'Admin' }) {
+  const router = useRouter();
+  return (
+    <div className="admin-shell">
+      <div className="admin-container">
+        <header style={{ marginBottom: '2.5rem' }}>
+          <div className="admin-badge">Full Moon Bakehouse Operations</div>
+          <h1 className="admin-section-title">{title}</h1>
+          <nav className="admin-nav" style={{ marginTop: '1.2rem' }}>
+            {navLinks.map((link) => {
+              const isActive = router.pathname.startsWith(link.href);
+              return (
+                <Link
+                  key={link.href}
+                  href={link.href}
+                  className={isActive ? 'active' : 'inactive'}
+                >
+                  {link.label}
+                </Link>
+              );
+            })}
+          </nav>
+        </header>
+        <section className="admin-card">{children}</section>
+      </div>
+    </div>
+  );
+}

frontend/components/FaqSection.js

@@ -0,0 +1,16 @@
+export function FaqSection({ items }) {
+  if (!items?.length) {
+    return null;
+  }
+
+  return (
+    <div className="faq-grid">
+      {items.map((item) => (
+        <article key={item.question} className="faq-item">
+          <h4>{item.question}</h4>
+          <p>{item.answer}</p>
+        </article>
+      ))}
+    </div>
+  );
+}

frontend/components/ProductCard.js

@@ -0,0 +1,52 @@
+import Link from 'next/link';
+
+import { useCart } from '../context/CartContext';
+
+const FALLBACK_IMAGE =
+  'https://images.unsplash.com/photo-1608198093002-ad4e005484ec?auto=format&fit=crop&w=1200&q=80';
+
+export default function ProductCard({ product }) {
+  const { addItem } = useCart();
+
+  const imageUrl = product?.imageUrl || product?.hero_image || FALLBACK_IMAGE;
+  const price = Number(product?.price || 0).toFixed(2);
+  const canPurchase = Boolean(product?.id) && !product?.isSample;
+  const hasDetail = Boolean(product?.slug) && !product?.isSample;
+
+  return (
+    <article className="product-card">
+      <div className="product-card__image">
+        <img src={imageUrl} alt={product?.name || 'Bakehouse item'} loading="lazy" />
+      </div>
+
+      <div>
+        <h3>{product?.name || 'Menu item'}</h3>
+        {product?.short_description ? <p>{product.short_description}</p> : null}
+      </div>
+
+      <div className="product-card__meta">
+        <span>${price}</span>
+        <span>{product?.inventory_quantity ?? '—'} available</span>
+      </div>
+
+      <div className="product-card__tags">
+        <span>Max {product?.max_per_order ?? '—'} / order</span>
+        {product?.allergens ? <span>{product.allergens}</span> : null}
+      </div>
+
+      <div className="product-card__actions">
+        {canPurchase ? (
+          <button type="button" className="btn btn-outline" onClick={() => addItem(product)}>
+            Add to cart
+          </button>
+        ) : (
+          <span className="sample-tag">Sample listing</span>
+        )}
+
+        {hasDetail ? (
+          <Link href={`/products/${product.slug}`}>View details</Link>
+        ) : null}
+      </div>
+    </article>
+  );
+}

frontend/components/SiteLayout.js

@@ -0,0 +1,66 @@
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+
+import { useCart } from '../context/CartContext';
+
+const NAV_LINKS = [
+  { href: '/', label: 'Home' },
+  { href: '/products', label: 'Products' },
+  { href: '/cart', label: 'Cart' },
+];
+
+export default function SiteLayout({ children }) {
+  const router = useRouter();
+  const { itemCount } = useCart();
+
+  return (
+    <div className="site-shell">
+      <header className="site-header">
+        <div className="site-header__inner">
+          <Link href="/" className="logo">
+            <img src="/logo.png" alt="Full Moon Bakehouse" />
+            <span>Full Moon Bakehouse</span>
+          </Link>
+
+          <nav className="nav-links">
+            {NAV_LINKS.map((link) => {
+              const isActive = router.pathname === link.href || router.pathname.startsWith(`${link.href}/`);
+              const isCart = link.href === '/cart';
+
+              return (
+                <Link key={link.href} href={link.href} className={isActive ? 'active' : ''}>
+                  {link.label}
+                  {isCart && itemCount > 0 ? <span className="badge">{itemCount}</span> : null}
+                </Link>
+              );
+            })}
+          </nav>
+
+          <div className="header-actions">
+            <Link href="/admin" className="ghost-btn">
+              Admin
+            </Link>
+          </div>
+        </div>
+      </header>
+
+      <main className="site-main">{children}</main>
+
+      <footer className="site-footer">
+        <div className="site-footer__inner">
+          <div>
+            <strong>Full Moon Bakehouse</strong>
+            <p>Eau Claire & Altoona, Wisconsin</p>
+          </div>
+          <div className="footer-links">
+            <Link href="mailto:bonna@fullmoonbakehouse.com">bonna@fullmoonbakehouse.com</Link>
+            <Link href="https://www.instagram.com" target="_blank" rel="noreferrer">
+              Instagram
+            </Link>
+          </div>
+          <span className="copyright">© {new Date().getFullYear()} Full Moon Bakehouse</span>
+        </div>
+      </footer>
+    </div>
+  );
+}