Wireframe · v1
Bel Air Landing Page — Layout Wireframe
Low-fidelity greybox wireframe of the section plan locked in .claude/context.md, across desktop / tablet / mobile — built to guide the Elementor simulation on the concepts site, for client review.
Legend & assumptions
read before the breakpoints belowImage / graphic placeholder — dims + recommended max file size
Popup / overlay — trigger + duration noted
TBDNot yet decided — flagged, not assumed
from ShopVibe canvasReal, already-designed element from
Belair home 1.zip's StorefrontPage.dc.html — positioned as-is, not inventedAssumptions used for the estimates below — flag if any are wrong
- Sale-banner tile count assumed at 6 — never specified in discussion; treat as a placeholder TBD.
- New Products / Bestseller grid DB cost assumes the rebuilt, right-sized database plus proper query batching (1 batched query per grid, not 1-per-product) — per the 2026-08-27 discussion that the new DB removes the old install's query-cost problem. Without batching/object cache, multiply each grid's query count roughly ×3–4 (per-product price/stock/image lookups run separately).
- All images assumed WebP, served responsively (
srcset) — file-size targets are per-breakpoint, not one size for all. - Scroll-to-bottom discount popup's product fetch is assumed async (fires on scroll-trigger, not on initial page load) so it doesn't add to the base page's query budget — not yet confirmed as a build requirement, just the sane default.
Desktop
reference width ~1440px · frame scaled for legibility1a — Utility bar from ShopVibe canvas
36px, dark (--sv-ink). Left: promo message + rotating dot indicators. Right: retail support phone · Ordering Guide · Privacy Policy links.
🎒 Back to School sale now on! ● ○ ○
☎ 1 (868) 658-3545
Ordering Guide
Privacy Policy
1b — Head row from ShopVibe canvas
84px. Logo · search bar (flex, max 720px, always visible) · account / wishlist / cart icons + cart total. Logo shrinks to 44px on scroll.
Logo
160×40px · SVG ≤10KB
160×40px · SVG ≤10KB
Search input — "Search products, brands and departments" (flex:1, max 720px)
Account
Wishlist
Cart 🛒(2) · TTD$104.20
1c — Main Menu menu 1 of 2
46px, centered row, below the head row. Home (active/underlined) · Hampers · Specials · New Arrivals · Bridal Registry.
Home
Hampers
Specials
New Arrivals
Bridal Registry
This is the site's primary/utility menu — mirrored in the mobile drawer's "Menu" tab. Note: context.md's earlier plan referred to a department "mega-menu" for header navigation — the Mega Menu (1d) below is the closest existing match, but whether it fully satisfies that original concept is still unreconciled.
1d — Mega Menu menu 2 of 2
64px wide, sticky, full page height, sits left of the content column (desktop/tablet only). "All categories" button + ~10 department icons, stacked vertically. Mirrored in the mobile drawer's "Categories" tab.
☰ all
🛒
🥫
🧴
🔌
⋯
2 — Hero (full viewport)
Delivery-themed image · "From our store to your door" · CTA → department page.
HERO IMAGE — full-bleed
1920×1080 source, eager-loaded (LCP)
≤200KB WebP
1920×1080 source, eager-loaded (LCP)
≤200KB WebP
Popup 1 · post-load"Know what you want? Hunt it down in our search bar." → arrow to header search. Icon ≤5KB. ~5s, dismiss on hover/tap, no focus steal.
Popup 2 · +3s after popup 1"Want it all? Tap our mega menu for the full view." → arrow to mega-menu. Every page load, all visitors.
3 — Delivery strip
Below the fold, part of the hero section, not footer-linked. 3-column row, evenly filling the frame width.
🚚 fee
⏱ time
📍 zone TBD
4 — Sale banners exposure TBD
Swipe/click-optional carousel — page scroll never hijacked. 3 tiles visible at once, evenly filling the frame width — this row sets the reference width every other section/subsection is sized to.
Banner 1
≤100KB · lazy
≤100KB · lazy
Banner 2
≤100KB · lazy
≤100KB · lazy
Banner 3
≤100KB · lazy
≤100KB · lazy
Pool assumed at 6 banners total TBD; auto-rotate-on-timer vs. show-several-at-once not yet decided.
5 — New Products locked
One shared 6-column grid: ad tile spans columns 1–2 / both rows (a true 2×2 block), 8 products auto-fill the remaining 4×2 area on the right — same column tracks, so the ad genuinely reads as 2 columns wide, not a same-height sidebar.
AD TILE (2×2)
600×600 · ≤60KB
600×600 · ≤60KB
P1
300×300 · ≤35KB
300×300 · ≤35KB
P2
P3
P4
P5
P6
P7
P8
6 — Bestseller rail
Same shared 6-column grid, mirrored: 8 products auto-fill columns 1–4, ad tile explicitly spans columns 5–6 / both rows (2×2) on the right.
P1
P2
P3
P4
P5
P6
P7
P8
AD TILE (2×2)
600×600 · ≤60KB
600×600 · ≤60KB
7 — Bridal registry banner
~Half hero height. CTA opens off-site registry, new tab (labelled).
BRIDAL REGISTRY BANNER
1920×540 · ≤100KB · lazy
1920×540 · ≤100KB · lazy
8 — Footer from ShopVibe canvas, 3-col
Dark (--sv-ink) 3-column grid: Contact Info (address, phone, social icons) · Opening Hours (hours + "Open now" chip) · Quick Links. Copyright bar below.
Contact Info
2 Gopaul Circular Dr, Marabella
Phone · FB IG TikTok
2 Gopaul Circular Dr, Marabella
Phone · FB IG TikTok
Opening Hours
Mon–Sat / Sun
● Open now
Mon–Sat / Sun
● Open now
Quick Links
My Account · Ordering Guide · Track Order · Customer Service · Terms
My Account · Ordering Guide · Track Order · Customer Service · Terms
Added on top, not in the source footer: payment badges below (Visa, First Atlantic Commerce, WiPay, PayWise) — punch-list gap the existing design doesn't cover.
VisaFACWiPayPayWise
© 2026 Bel Air Store Limited — copyright bar
Scroll-to-bottom discount popup
Fires at page end · landing page onlyBest discounted item. Real close control (button + Esc), no auto-dismiss timer. Frequency TBD.
Product image
300×300 · ≤40KB
300×300 · ≤40KB
| Section | Images | DB queries | Image requests | Notes |
|---|---|---|---|---|
| Header | 1 | 1 | 1 | Menu query cacheable |
| Hero | 1 | 0 | 1 | Eager-loaded, static |
| Delivery strip | 3 | 0 | 3 | Static content block |
| Sale banners | 6 | 0 | 3 initial / 3 lazy | Count assumed (TBD) |
| New Products | 9 | 1 | 9 | Batched query (new DB) |
| Bestseller rail | 9 | 1 | 9 | +stock filter, same query |
| Bridal banner | 1 | 0 | 1 | Lazy-loaded |
| Footer | 7 | 0 | 7 | Badges + social icons |
| Scroll popup | 1 | 1 | 1 | Async, on-trigger only |
| Total | 38 | 3 initial + 1 async | 35 initial + async |
Tablet
reference width ~768–1024px, landscape-optimized · responsive if rotated1a — Utility bar from ShopVibe canvas
Ordering Guide / Privacy Policy links drop at this width — promo message + phone number only.
🎒 Promo message ●○○
☎ Phone
1b — Head row from ShopVibe canvas
Logo
130×32 · ≤8KB
130×32 · ≤8KB
Search input
👤♡🛒
1c — Main Menu menu 1 of 2
HomeHam.Spec.NewBridal
1d — Mega Menu menu 2 of 2
Same 64px sticky icon rail as desktop, still present at tablet width.
☰
🛒
🥫
⋯
2 — Hero (full viewport)
HERO IMAGE — landscape crop
1024×768 · eager · ≤150KB
1024×768 · eager · ≤150KB
Popup 1 → 2Same sequence/wording as desktop, arrows repositioned to tablet header layout.
3 — Delivery strip
🚚 fee
⏱ time
📍 zone TBD
4 — Sale banners TBD
2 tiles visible at once, evenly filling the frame width — reference width for this breakpoint.
Banner 1
≤80KB
≤80KB
Banner 2
≤80KB
≤80KB
Pool of 6 assumed.
5 — New Products locked
One shared 4-column grid: ad tile spans columns 1–2 / both rows (true 2×2), 4 products auto-fill columns 3–4 / both rows (2×2).
AD TILE (2×2)
420×420 · ≤45KB
420×420 · ≤45KB
P1
220×220 · ≤25KB
220×220 · ≤25KB
P2
P3
P4
6 — Bestseller rail
Same shared 4-column grid, mirrored: 4 products auto-fill columns 1–2, ad tile spans columns 3–4 / both rows (2×2) on the right. Out-of-stock excluded.
P1
P2
P3
P4
AD TILE (2×2)
420×420 · ≤45KB
420×420 · ≤45KB
7 — Bridal registry banner
BANNER
1024×300 · ≤70KB · lazy
1024×300 · ≤70KB · lazy
8 — Footer from ShopVibe canvas, 3-col
Contact Info
Opening Hours
Quick Links
3-column grid persists at tablet width (only collapses to 1-col at mobile). Payment badges added below.
VisaFACWiPayPayWise
Scroll-to-bottom discount popup
Landing page onlyBest discounted item. Manual close only. Frequency TBD.
Product img
260×260 · ≤35KB
260×260 · ≤35KB
| Section | Images | DB queries | Image requests | Notes |
|---|---|---|---|---|
| Header | 1 | 1 | 1 | |
| Hero | 1 | 0 | 1 | Eager-loaded |
| Delivery strip | 3 | 0 | 3 | |
| Sale banners | 6 | 0 | 2 initial / 4 lazy | Count assumed (TBD) |
| New Products | 5 | 1 | 5 | Batched query |
| Bestseller rail | 5 | 1 | 5 | +stock filter |
| Bridal banner | 1 | 0 | 1 | Lazy-loaded |
| Footer | 7 | 0 | 7 | |
| Scroll popup | 1 | 1 | 1 | Async, on-trigger |
| Total | 30 | 3 initial + 1 async | 26 initial + async |
Mobile
reference width ~375–428px, portrait-optimized · responsive if rotated1a — Utility bar from ShopVibe canvas
Phone/Ordering Guide/Privacy links drop entirely on mobile — promo message only.
🎒 Promo message ●○○
1b — Head row from ShopVibe canvas
Hamburger (opens drawer) · logo (shrinks on scroll) · account/wishlist/cart icons, no cart total. Search wraps to its own full-width row below.
☰
Logo
100×24 · ≤6KB
100×24 · ≤6KB
👤♡🛒
Search input — full width
Search appears in header and bottom nav — intentional redundancy, both always-visible entry points.
1c — Slide-out drawer both menus, collapsed
Hamburger opens a left-side drawer with two tabs, replacing the desktop's Main Menu + Mega Menu pairing. Categories tab = the department icon list (Mega Menu's content). Menu tab = Home/Hampers/Specials/New Arrivals/Bridal Registry + retail support phone (Main Menu's content).
Categories
Menu
2 — Hero (full viewport)
HERO IMAGE — portrait crop
828×1792 · eager · ≤100KB
828×1792 · eager · ≤100KB
Popup 1 → 2Same sequence, compact arrow positioning. Pause on tap, no focus steal.
3 — Delivery strip
Stacked single column.
🚚 fee
⏱ time
📍 zone TBD
4 — Sale banners TBD
Full-width single banner — this is the reference width every other row on mobile fills.
Banner (1 at a time, swipe)
375×220 · ≤60KB
375×220 · ≤60KB
Pool of 6 assumed; 1 visible, swipe for rest.
5 — New Products locked
Ad + 2×1 grid (2 products) — not ad-only, see decisions.md #004.
AD TILE
750×750 · ≤50KB
750×750 · ≤50KB
P1
180×180 ≤20KB
180×180 ≤20KB
P2
6 — Bestseller rail
Same arrangement as New Products (ad + 2×1).
AD TILE
750×750 · ≤50KB
750×750 · ≤50KB
P1
P2
7 — Bridal registry banner
BANNER
750×420 · ≤50KB · lazy
750×420 · ≤50KB · lazy
8 — Footer from ShopVibe canvas, 1-col
Grid collapses to a single centered column at mobile width: Contact Info, then Opening Hours, then Quick Links, stacked.
Contact Info
Opening Hours
Quick Links
Payment badges added on top:
Visa
FAC
WiPay
PayWise
Scroll-to-bottom discount popup
Landing page onlyBest discounted item, manual close, frequency TBD.
Product img
220×220 · ≤25KB
220×220 · ≤25KB
Discrepancy flagged, not resolvedShopVibe canvas order is Home · Account · Cart · Search, and it's hidden until the user scrolls (slides up from off-screen). Earlier discussion locked Home · Search · Cart · Account, always visible. Pick one before build.
🏠
Home
Home
👤
Account
Account
🛒(2)
Cart
Cart
🔍
Search
Search
| Section | Images | DB queries | Image requests | Notes |
|---|---|---|---|---|
| Header | 1 | 1 | 1 | |
| Hero | 1 | 0 | 1 | Eager-loaded |
| Delivery strip | 3 | 0 | 3 | |
| Sale banners | 6 | 0 | 1 initial / 5 lazy | Count assumed (TBD) |
| New Products | 3 | 1 | 3 | Ad + 2 products |
| Bestseller rail | 3 | 1 | 3 | +stock filter |
| Bridal banner | 1 | 0 | 1 | Lazy-loaded |
| Footer | 7 | 0 | 7 | |
| Bottom nav | 4 | 0–1 | 4 | Cart badge count optional, usually session-cached |
| Scroll popup | 1 | 1 | 1 | Async, on-trigger |
| Total | 30 | 3–4 initial + 1 async | 24 initial + async |