Skip to content

Home page

The home route (apps/web/app/page.tsx) is the marketing surface of fruitplug.co.uk. It carries the heaviest commercial weight in the app, so the section rhythm is deliberate: hero, then the boxes that drive revenue, then the build-your-own promo, then trust and atmosphere.

Section order

The page composes nine sections plus footer, separated by fp-stripe seams where appropriate. Order is load-bearing — the boxes sit immediately under the hero because they're the main seller.

# Section File Why it's there
1 Hero app/page.tsx (inline) Wordmark, brand promise, primary CTAs
2 Boxes showcase components/home/BoxesShowcase.tsx Bestselling boxes — first thing under the fold
3 Build-your-own promo components/home/BuildYourOwnPromo.tsx Counter-offer for shoppers who want to curate
4 Trust strip components/brand/TrustStrip.tsx Three-up trust signals (fresh, fast, reviewed)
5 Seasonal strip components/seasonal/SeasonalStrip.tsx What's peak this month
6 Stats app/page.tsx (inline) Followers, views, reviews, orders
7 Watch the plug app/page.tsx (inline) Featured Instagram + TikTok reels
8 Atlas peek components/atlas/AtlasPeek.tsx Botanical field guide teaser
9 What's coming app/page.tsx (inline) Roadmap teaser cards

BoxesShowcase

Server Component. Reuses the products array already fetched once on the home page (the same call that feeds AtlasPeek), so adding the section costs zero extra Woo round-trips.

Data flow

For every entry in apps/web/lib/box-templates.ts the component looks up the matching Woo product by woo_product_id. The Woo product slug is the canonical PDP route, so "Shop this box" deep-links to /p/{woo-slug} when the product is in the feed; if it's missing the tile falls back to /build-your-box/{template-slug} so the CTA never dead-ends.

Visual rhythm

  • Section header. Leaf-green uppercase kicker, fp-display text-4xl sm:text-5xl headline ("Tropical boxes, delivered") with an outline TreePalm flourish, and a one-sentence supporting line.
  • Tiles. rounded-3xl (one notch more generous than the rounded-2xl cards used elsewhere) with the standard border-border/60 bg-white/[0.02] recipe. Each tile rotates a brand-accent: tile 1 magenta, tile 2 leaf, tile 3 sticker, with magenta-900 reserved for an additional fourth tile.
  • Outline icon chip. Top-left of each image well, accent-tinted, outline-only lucide-react icons at strokeWidth={1.5} (a touch thinner than the project default 1.75 for a luxury feel).
  • Tropical Box S → Leaf
  • Exotic Box M → Citrus
  • Plug-In Box L → Sparkles
  • Position pill. Top-right "No. 01 / 02 / 03" — small editorial numbering that reinforces the curated lineup.
  • Body. Accent-tinted credits line ("Up to N fruits"), display title, two-line benefit copy, big magenta fp-display price with a tiny "/ box" suffix, and the "Shop this box" arrow CTA.

Layout

  • Mobile. Single-column snap-x horizontal scroll for thumb-driven scan. The end-cap "See all boxes" tile sits last in the scroll track.
  • sm:+. Two-column grid; promotes to 3-up at lg:. The end-cap is hidden on sm: because the section header already carries the "See all boxes" pill — duplication would dilute it.
  • Connector. A 1px border-dashed border-border/40 line under the grid on sm: adds a tropical, scrappy-but-intentional rhythm.

BuildYourOwnPromo

Server Component. Sits directly below BoxesShowcase and converts the shopper who wants flexibility instead of a curated assortment.

Visual contract

  • Canvas. Full-bleed bg-black band with the same hero radial magenta glow recipe (radial-gradient(ellipse_at_top, var(--fp-magenta)/15%, transparent 60%)). A 1px magenta seam at the bottom edge echoes the fp-stripe rhythm of the rest of the page.
  • Decoration. Three outline tropical icons (TreePalm, Citrus, Cherry) float at 10% opacity in varied sizes, positioned with absolute so they sit behind the headline at any breakpoint. All are aria-hidden and pointer-events-none.
  • Header. Sticker-amber kicker ("BUILD YOUR OWN" with a Sparkles glyph), then fp-display text-5xl sm:text-7xl headline ("Craft your tropical box"), then the supporting copy.
  • CTAs. Primary magenta pill ("Build your box" → /build-your-box)
  • ghost outline secondary ("See how it works" → /build-your-box#how).
  • Benefit pills. Four bordered pills under the CTAs, each with a small accent-tinted outline icon: any 32 fruits (sticker), weekly rotate (leaf), free swaps before 4pm (magenta), UK next-day (leaf).

Design rationale

Three principles drive the order and density of these sections:

  1. Sell the boxes first. Curated boxes are the highest-margin, highest-volume product. Putting them under the hero — before any trust strip or social proof — is the single biggest commercial change in the redesign. Trust signals work because the shopper has already seen something they want.
  2. Counter-offer immediately. Some shoppers don't want "the curator's choice" — they want to pick. The Build-Your-Own promo sits second so that intent is captured the moment the shopper decides the curated option isn't quite right, instead of forcing them to scroll past trust + seasonal + reels to find the builder.
  3. Tropical, but editorial. Outline icons only. strokeWidth=1.5 on marketing surfaces (vs the project default 1.75) reads thinner and more luxurious, while still landing tropical with the right icon vocabulary (Leaf, TreePalm, Citrus, Cherry, Sparkles). Brand-colour rotation across tiles gives visual rhythm without inventing new colours.

For colour tokens, typography, spacing, motion and the icon system that govern these decisions, see Design system. For the box-builder feature itself, see Custom Box Builder.