# Maple Crown Gourmet – Luxury E-commerce Website Project (crab) **Tagline:** Finest products from Canada and other select countries from the most prestigious and trusted suppliers **Positioning:** Michelin-star restaurant meets private chef’s table — 100% Halal-certified ultra-premium seafood, caviar & game **Testing Domain:** `crab.iceboxserver.co.uk` **Internal Project:** `crab` **Status:** Production-ready blueprint v1.0 **Target Clients:** Executive chefs, high-end restaurants, private yacht & jet caterers, discerning home gourmets --- ## Table of Contents - [Project Overview & Brand Story](#project-overview--brand-story) - [Design System](#design-system) - [Technical Stack & Architecture](#technical-stack--architecture) - [Project Structure](#project-structure) - [Sample Product Data](#sample-product-data) - [Reusable Components](#reusable-components) - [Page Blueprints](#page-blueprints) - [Homepage (`/`)](#homepage-) - [Category / Collection Page (`/live-seafood`, `/caviar-roe`, etc.)](#category--collection-page) - [Product Detail Page (`/products/[slug]`)](#product-detail-page) - [Additional Experiences](#additional-experiences) - [Implementation & Deployment](#implementation--deployment) - [Asset & Content Checklist](#asset--content-checklist) --- ## Project Overview & Brand Story Maple Crown Gourmet curates the rarest, most pristine seafood and proteins from Canada’s pristine waters and a handful of trusted international partners. Every product is hand-selected at peak season, handled with white-glove care, and certified 100% Halal. The digital experience must feel like stepping into the private dining room of a three-Michelin-star restaurant. Nothing is loud. Everything is intentional. The interface whispers exclusivity while the photography makes the mouth water. **Core Promise:** When a chef or private client opens this site, they must feel: *“These are the exact products I would fly to Halifax or Tofino to source myself.”* --- ## Design System ### Color Palette (Exact Match to Catalog) ```css :root { --bg: #0A0A0A; /* Deepest charcoal */ --bg-elevated: #121212; /* Cards & surfaces */ --bg-subtle: #1A1814; /* Warm undertone */ --gold: #D4AF77; /* Primary accent — exact catalog gold */ --gold-dark: #C9A66B; /* Bronze variant */ --gold-muted: #A68B5B; /* Subtle borders */ --text: #F8F4EC; /* Warm off-white */ --text-muted: #A99E8E; /* Secondary text */ --text-subtle: #6B6255; /* Captions */ --success: #4A7043; /* Halal / in-stock */ --border: rgba(212, 175, 119, 0.15); } ``` **Tailwind Configuration** ```ts // tailwind.config.ts colors: { 'mcg-bg': '#0A0A0A', 'mcg-surface': '#121212', 'mcg-gold': '#D4AF77', 'mcg-gold-dark': '#C9A66B', 'mcg-text': '#F8F4EC', 'mcg-text-muted': '#A99E8E', } ``` ### Typography - **Headings (serif):** `Playfair Display` (variable) or `EB Garamond` — 400/500/600, generous tracking on large sizes - **Body (sans):** `Inter` or `Geist` / `Satoshi` — 400/500, -0.01em tracking - **Accent / Small:** `Instrument Sans` or Inter with increased tracking ```tsx // Recommended font setup (app/layout.tsx) ``` ### Spacing & Elevation - Base unit: 4px - Generous: 12px, 24px, 48px, 96px, 160px vertical rhythm - Cards: `border border-[#D4AF77]/15`, subtle `backdrop-blur-xl`, soft gold glow on hover (`shadow-[0_0_0_1px_#D4AF77,0_25px_50px_-12px_rgb(0,0,0)]`) ### Iconography - Primary: Custom subtle maple leaf (single elegant line) - Secondary: Lucide icons in gold at 1px stroke weight - Never use heavy icon sets. Less is more. **Maple Leaf SVG (use everywhere as subtle watermark or logo mark)** ```tsx const MapleLeaf = () => ( ) ``` ### Photography Direction (Non-negotiable) - Dark, moody, high-contrast exactly like the supplied catalog - Heavy use of negative space, crushed blacks, glistening moisture, crushed ice, warm gold reflections - Models: Never show full faces. Hands of chefs, close-ups of product, condensation, steam, raw silk textures - Format: WebP + AVIF, 2400px wide hero, 1200px product, art-directed --- ## Technical Stack & Architecture - **Framework:** Next.js 15 (App Router) + TypeScript (strict) - **Styling:** Tailwind CSS 4 + shadcn/ui - **Luxury Blocks:** Heavy reliance on [21st.dev](https://21st.dev) — Éclat, Opulence, and Signature Commerce collections - **Motion:** Framer Motion (sub-400ms, gold-accented springs) - **State:** Zustand (cart + filters) + React Hook Form + Zod - **Images:** Next.js `Image` + Cloudinary or Vercel Blob (with blur placeholders) - **Animations:** 21st.dev motion primitives + custom Framer variants - **Deployment:** Vercel (primary) + existing iceboxserver.co.uk Nginx reverse proxy pattern --- ## Project Structure ``` crab/ ├── app/ │ ├── (marketing)/ │ │ ├── layout.tsx │ │ ├── page.tsx # Homepage │ │ └── about/ │ ├── (shop)/ │ │ ├── live-seafood/ │ │ ├── caviar-roe/ │ │ ├── wagyu-game/ │ │ └── seafood/ │ ├── products/[slug]/page.tsx │ ├── cart/ │ └── api/ ├── components/ │ ├── 21st/ # Curated 21st.dev blocks (customized) │ ├── ui/ # shadcn + custom luxury variants │ ├── product-card.tsx │ ├── luxury-navbar.tsx │ ├── filters.tsx │ └── cart-drawer.tsx ├── lib/ │ ├── products.ts # Source of truth (or CMS later) │ ├── types.ts │ └── utils.ts ├── public/ │ └── images/products/ # WebP + AVIF └── styles/ └── globals.css ``` --- ## Sample Product Data ```ts // lib/products.ts export interface Product { id: string slug: string name: string scientific: string category: 'live-seafood' | 'frozen-seafood' | 'caviar-roe' | 'wagyu-game' origin: string originFlag: string price: number unit: string availability: 'Year-Round' | 'Seasonal' | 'Bulk Orders Only' description: string longDescription: string specs: Record images: string[] badges: string[] isBestseller?: boolean isLive?: boolean } export const products: Product[] = [ { id: 'p01', slug: 'atlantic-snow-crab-clusters', name: 'Atlantic Snow Crab Clusters', scientific: 'Chionoecetes opilio', category: 'frozen-seafood', origin: 'Newfoundland & Labrador, Canada', originFlag: '🇨🇦', price: 68, unit: 'kg', availability: 'Year-Round', description: 'Sweet, delicate clusters with snow-white meat. Flash-frozen within hours of harvest.', longDescription: 'Harvested from the icy waters of the North Atlantic, these premium snow crab clusters deliver an exceptionally sweet, clean flavor with a tender, flaky texture prized by Michelin-starred kitchens worldwide. Each cluster is carefully selected for size and meat yield.', specs: { 'Pack Size': '1 kg vacuum-sealed clusters', 'Processing': 'Cooked & flash-frozen at sea', 'Yield': '≈ 45% meat', 'Storage': '-18°C for up to 12 months', }, images: ['/images/products/snow-crab-1.webp', '/images/products/snow-crab-2.webp'], badges: ['100% Halal', 'Wild Caught', 'Sustainable'], isBestseller: true, }, { id: 'p02', slug: 'alaskan-red-king-crab', name: 'Alaskan Red King Crab Legs', scientific: 'Paralithodes camtschaticus', category: 'frozen-seafood', origin: 'Bristol Bay, Alaska', originFlag: '🇺🇸', price: 145, unit: 'kg', availability: 'Year-Round', description: 'The undisputed king of crab. Massive, sweet legs with rich, buttery meat.', longDescription: 'Sourced exclusively from the pristine waters of Bristol Bay, these colossal Red King Crab legs represent the pinnacle of crustacean luxury. Each leg is hand-selected for exceptional size and meat density.', specs: { 'Pack Size': '1.5 kg (approx. 4–6 legs)', 'Processing': 'Pre-cooked & flash-frozen', 'Yield': '≈ 60% meat', }, images: ['/images/products/red-king-1.webp'], badges: ['100% Halal', 'Wild Caught', 'Premium'], isBestseller: true, }, { id: 'p03', slug: 'live-atlantic-lobster', name: 'Live Atlantic Lobster', scientific: 'Homarus americanus', category: 'live-seafood', origin: 'Nova Scotia, Canada', originFlag: '🇨🇦', price: 48, unit: 'each (1.25–1.5 lb)', availability: 'Year-Round', description: 'Live, vigorous lobsters from the cold, clear waters of Atlantic Canada.', longDescription: 'These live Homarus americanus lobsters are air-freighted within 24 hours of harvest from sustainable Nova Scotia fisheries. Each lobster is hand-selected for vitality and shell hardness.', specs: { 'Size': '1.25–1.5 lb (570–680 g)', 'Origin': 'Nova Scotia, Canada', 'Delivery': 'Live next-day air', }, images: ['/images/products/live-lobster-1.webp'], badges: ['100% Halal', 'Live', 'Wild'], isLive: true, }, { id: 'p04', slug: 'beausoleil-oysters', name: 'Beausoleil Oysters', scientific: 'Crassostrea virginica', category: 'live-seafood', origin: 'New Brunswick, Canada', originFlag: '🇨🇦', price: 2.85, unit: 'each (min 12)', availability: 'Year-Round', description: 'Briny, sweet, with a clean cucumber finish. The darling of Canadian oyster bars.', longDescription: 'Grown in the nutrient-rich waters of Bouctouche Bay, Beausoleil oysters are celebrated for their refined, crisp flavor and elegant presentation. A favorite among Canada’s most discerning chefs.', specs: { 'Size': 'Medium (3–3.5")', 'Flavor': 'Briny, cucumber, sweet finish', 'Packaging': 'Live in seaweed, 12 or 25 pcs', }, images: ['/images/products/beausoleil-1.webp'], badges: ['100% Halal', 'Live', 'Sustainable'], }, { id: 'p05', slug: 'geoduck-clam', name: 'Live Geoduck Clam', scientific: 'Panopea generosa', category: 'live-seafood', origin: 'British Columbia, Canada', originFlag: '🇨🇦', price: 85, unit: 'kg', availability: 'Seasonal', description: 'The world’s most coveted clam. Sweet, crunchy siphon with oceanic depth.', longDescription: 'Hand-harvested from the pristine seabed of British Columbia, the geoduck is prized across Asia and among top North American chefs for its extraordinary texture and pure, sweet flavor.', specs: { 'Size': '1.5–3 kg whole', 'Yield': 'Siphon + body meat', 'Best Used': 'Sashimi, crudo, hot pot', }, images: ['/images/products/geoduck-1.webp'], badges: ['100% Halal', 'Live', 'Wild'], }, { id: 'p06', slug: 'sushi-grade-bluefin-tuna', name: 'Sushi-Grade Bluefin Tuna Loin', scientific: 'Thunnus thynnus', category: 'frozen-seafood', origin: 'North Atlantic', originFlag: '🇨🇦', price: 95, unit: 'kg', availability: 'Year-Round', description: 'Premium sushi-grade bluefin, deep red and buttery. Flash-frozen at peak.', longDescription: 'Line-caught in the cold North Atlantic and immediately super-frozen to -60°C. The fat marbling and color meet the exacting standards of the world’s finest sushi counters.', specs: { 'Grade': 'Sushi / Sashimi', 'Cut': 'Center-cut loin', 'Packaging': 'Vacuum-sealed 500 g–2 kg blocks', }, images: ['/images/products/bluefin-1.webp'], badges: ['100% Halal', 'Sushi Grade', 'Wild'], isBestseller: true, }, { id: 'p07', slug: 'wild-sockeye-salmon', name: 'Wild Canadian Sockeye Salmon', scientific: 'Oncorhynchus nerka', category: 'frozen-seafood', origin: 'British Columbia, Canada', originFlag: '🇨🇦', price: 42, unit: 'kg', availability: 'Seasonal', description: 'Deep red, firm, intensely flavorful wild sockeye. The gold standard of Pacific salmon.', longDescription: 'Caught during the short, intense summer run in British Columbia’s pristine rivers and coastal waters. Sockeye’s distinctive ruby color and rich flavor come from its natural diet of krill.', specs: { 'Cut': 'Skin-on fillet portions', 'Pack': '1 kg vacuum packs', 'Fat Content': 'High (natural)', }, images: ['/images/products/sockeye-1.webp'], badges: ['100% Halal', 'Wild', 'Sustainable'], }, { id: 'p08', slug: 'sablefish-black-cod', name: 'Sablefish (Black Cod)', scientific: 'Anoplopoma fimbria', category: 'frozen-seafood', origin: 'Alaska & British Columbia', originFlag: '🇨🇦', price: 55, unit: 'kg', availability: 'Year-Round', description: 'Buttery, melt-in-mouth sablefish with a luxurious high fat content.', longDescription: 'Often called “butterfish,” this deep-sea treasure is revered by chefs for its extraordinary texture when miso-glazed or gently smoked. Sustainably harvested from the cold depths of the North Pacific.', specs: { 'Cut': 'Skin-on fillet', 'Pack': '800 g portions', 'Flavor': 'Rich, sweet, buttery', }, images: ['/images/products/sablefish-1.webp'], badges: ['100% Halal', 'Wild', 'Sustainable'], }, { id: 'p09', slug: 'acadian-emerald-caviar', name: 'Acadian Emerald Caviar', scientific: 'Acipenser brevirostrum', category: 'caviar-roe', origin: 'New Brunswick, Canada', originFlag: '🇨🇦', price: 385, unit: '50 g tin', availability: 'Year-Round', description: 'Sustainable shortnose sturgeon caviar. Delicate, nutty, with a clean oceanic finish.', longDescription: 'Farmed with the utmost care in the pristine waters of New Brunswick, Acadian Emerald is one of the finest sustainable caviars available in North America. Perfectly sized pearls with a subtle hazelnut note.', specs: { 'Species': 'Shortnose Sturgeon', 'Color': 'Deep emerald to golden', 'Grade': 'Imperial', }, images: ['/images/products/acadian-emerald-1.webp'], badges: ['100% Halal', 'Sustainable', 'Canadian'], }, { id: 'p10', slug: 'salmon-ikura', name: 'Premium Salmon Ikura', scientific: 'Oncorhynchus keta', category: 'caviar-roe', origin: 'British Columbia, Canada', originFlag: '🇨🇦', price: 95, unit: '200 g jar', availability: 'Year-Round', description: 'Large, glossy, ruby-red salmon roe with a clean pop and rich marine flavor.', longDescription: 'Hand-harvested from wild chum salmon during the autumn run, then gently cured using a traditional Japanese method. The pearls are large, intact, and explode with bright, briny sweetness.', specs: { 'Cure': 'Traditional Japanese (low salt)', 'Size': 'Large 4–5 mm pearls', 'Storage': '0–4°C, 30 days unopened', }, images: ['/images/products/ikura-1.webp'], badges: ['100% Halal', 'Wild', 'Premium'], }, { id: 'p11', slug: 'live-dungeness-crab', name: 'Live Dungeness Crab', scientific: 'Metacarcinus magister', category: 'live-seafood', origin: 'British Columbia, Canada', originFlag: '🇨🇦', price: 38, unit: 'each (1.75–2.25 lb)', availability: 'Seasonal', description: 'Sweet, meaty West Coast Dungeness. The pride of British Columbia fisheries.', longDescription: 'Live Dungeness crabs from the cold, clean waters of the Pacific Northwest. Exceptionally sweet meat with a firm yet delicate texture that shines in simple preparations.', specs: { 'Size': '1.75–2.25 lb', 'Meat Yield': '≈ 25–30%', }, images: ['/images/products/dungeness-1.webp'], badges: ['100% Halal', 'Live', 'Wild'], isLive: true, }, { id: 'p12', slug: 'fullblood-kurohana-wagyu', name: 'Fullblood Kurohana Wagyu Striploin', scientific: 'Bos taurus (Fullblood Wagyu)', category: 'wagyu-game', origin: 'Alberta, Canada', originFlag: '🇨🇦', price: 128, unit: 'kg', availability: 'Year-Round', description: 'Purebred Canadian Fullblood Wagyu with extraordinary marbling and silkiness.', longDescription: 'Raised on the open prairies of Alberta with the highest standards of animal husbandry. Kurohana bloodlines deliver the intense marbling and buttery mouthfeel demanded by the world’s greatest steakhouses.', specs: { 'Grade': 'Fullblood (100% Wagyu)', 'Marbling': 'A5 equivalent', 'Aging': '21–28 days dry-aged', }, images: ['/images/products/wagyu-1.webp'], badges: ['100% Halal', 'Fullblood', 'Canadian'], }, ] ``` --- ## Reusable Components ### 1. LuxuryNavbar (Sticky + 21st.dev inspired) ```tsx // components/luxury-navbar.tsx 'use client' import { useState } from 'react' import { motion } from 'framer-motion' import { MapleLeaf } from './icons' import { ShoppingCart, Search } from 'lucide-react' export function LuxuryNavbar() { const [isScrolled, setIsScrolled] = useState(false) return ( ) } ``` ### 2. Signature Product Card (21st.dev Opulence style) ```tsx // components/product-card.tsx 'use client' import { motion } from 'framer-motion' import Link from 'next/link' import { Product } from '@/lib/products' export function ProductCard({ product }: { product: Product }) { return (
{product.name}
{/* Badges */}
{product.badges.slice(0, 2).map((badge, i) => (
{badge}
))}
{product.isLive && (
LIVE
)}
{product.name}
{product.scientific}
${product.price}
{product.unit}
{product.originFlag} {product.origin.split(',')[0]}
{product.availability}
) } ``` --- ## Page Blueprints ### Homepage (`/`) **Hero** — Full-bleed dramatic catalog-style seafood image with heavy vignette. Centered elegant typography. **Key Sections (in order):** 1. **Hero** (using 21st.dev Éclat Hero as base) 2. **Trust Bar** — 100% Halal | Sourced in Canada | Year-Round | White-Glove Logistics 3. **Signature Categories** — 4 large elegant cards linking to collections 4. **Bestsellers** — 8-column responsive grid using `ProductCard` + Framer stagger 5. **Live Premium Seafood** — Dedicated live arrivals highlight with “Air-freighted within 24h” messaging 6. **Testimonials** — 21st.dev Signature Testimonial Carousel (3 chef quotes) 7. **Footer** — Ultra-minimal, gold accents **Hero Code Sketch (condensed):** ```tsx
EST. 2014 • CANADA

Maple Crown
Gourmet

Finest products from Canada and other select countries.

``` ### Category / Collection Page Advanced filters (origin, price range, availability, live/frozen) using shadcn/ui + Radix. Results update instantly with `framer-motion` layout animation. Filter bar inspired directly by 21st.dev Commerce Filter Block. ### Product Detail Page **Layout:** Two-column on desktop (70/30). Left: hero image gallery with elegant zoom (use `react-medium-image-zoom` or 21st.dev lightbox). Right: sticky purchase panel. **Key elements on PDP:** - Scientific name in elegant italic - Origin with flag + map pin micro-interaction - Seasonality badge (large, gold-bordered) - Full catalog description + chef’s tasting notes - Specs table (beautiful minimal) - Quantity stepper (luxury version) - Prominent gold “Add to Cart” + secondary “Request Bulk Quote” (opens modal) - Related products row --- ## Additional Experiences - **Cart Drawer** — Slide from right, beautiful item rows with edit/remove, subtotal, gold “Checkout” or “Request Quote” (B2B path) - **Chef Inquiry Modal** — For bulk, custom cuts, or live tank reservations. Sends to dedicated CRM. - **Command Palette Search** — `cmd+k` global search with product preview (use `cmdk` + 21st.dev Command component) --- ## Implementation & Deployment 1. **Start project** ```bash npx create-next-app@latest crab --tailwind --yes --eslint --app npx shadcn@latest init ``` 2. **21st.dev Integration** - Visit https://21st.dev - Copy the Éclat, Signature, and Commerce blocks you need - Paste and restyle with our gold palette (takes ~20 minutes per major section) 3. **Image Optimization** - Use catalog photography as primary source - Generate AVIF/WebP variants + beautiful blur placeholders - Consider commissioning a dedicated shoot with the same lighting language as the print catalog 4. **Halal Compliance** - Prominently display certification badge on every product and in footer - Add dedicated `/halal` transparency page with supplier certificates 5. **Deployment (iceboxserver pattern)** - Deploy to Vercel - Add custom domain `crab.iceboxserver.co.uk` - Mirror existing Nginx + PM2 reverse proxy pattern from ribble project - Enable Vercel Image Optimization or Cloudinary --- ## Asset & Content Checklist - [ ] Full product photography export from catalog (high-res) - [ ] Logo files (vector + horizontal lockup) - [ ] Maple leaf icon suite (line + filled) - [ ] Chef testimonial photos or written quotes (with permission) - [ ] Halal certification documentation - [ ] Shipping & cold-chain logistics copy - [ ] B2B pricing tiers (future) --- **This blueprint is ready for immediate implementation.** Every component, color, interaction, and piece of copy has been designed to feel like a $250,000 custom luxury build — but built with modern, maintainable tools. The final experience should make a Michelin-starred chef pause and say: *“Finally. Someone who understands.”* Ready when you are.