// sections-top.jsx — Nav, Hero, Marquee, Pillars, ProductShowcase const { useState, useEffect, useRef } = React; // ───────────────────────────────────────────────────────────────────────────── // Logo mark — circular badge style matching the brand logo function LogoMark({ size = 36 }) { return ( Real Date Bar Real Date Bar ); } // ───────────────────────────────────────────────────────────────────────────── function Nav({ onOrder }) { const [scrolled, setScrolled] = useState(false); useEffect(() => { const on = () => setScrolled(window.scrollY > 24); window.addEventListener('scroll', on, { passive: true }); return () => window.removeEventListener('scroll', on); }, []); const links = [ ['The Bar', '#product'], ['Why', '#why'], ['Nutrition', '#nutrition'], ['Pricing', '#pricing'], ['Pickup', '#pickup'], ['Reviews', '#reviews'], ['Founder', '#founder'], ]; return (
); } // ───────────────────────────────────────────────────────────────────────────── // Product bar placeholder — a stylized SVG of the actual bar shape function BarShot({ aspect = '1', label = 'PRODUCT SHOT · 600×800' }) { return (
{label} {/* Stylized bar silhouette */} REAL date bar ORGANIC · 2 INGREDIENTS DATES · CASHEWS NET WT 1.7 OZ (48g)
); } // ───────────────────────────────────────────────────────────────────────────── function Hero({ variant = 'editorial', eyebrowStyle = 'mono' }) { // 'editorial' — split layout w/ huge serif headline left, product right // 'split' — dark block left like reference inspiration, cream right // 'centered' — centered headline with product floating below if (variant === 'centered') { return (
Frisco, TX · Est. 2026

Real fuel.
Two ingredients.

A filling, energizing date bar built for athletes who are tired of gels that don't keep them full. Organic dates. Organic cashews. Nothing else.

Order a pack → Why date bars?
); } if (variant === 'split') { return (
Real Date Bar · Est. 2026

Real fuel.
Two ingredients.

Organic dates. Organic cashews. Nothing else. A filling, energizing snack made by a swimmer who got tired of energy gels.

◆ Organic◆ 2 Ingredients◆ Athlete-made
); } // editorial (default) return (
Frisco, Texas · Est. 2026

Real fuel.
Two ingredients.
Zero nonsense.

A filling, energizing date bar made for student athletes who deserve more than a sugary gel. Organic dates, organic cashews — that's it.

Order a pack → Why date bars?
{/* Inline meta strip */}
Organic 2 ingredients Athlete-made
); } // ───────────────────────────────────────────────────────────────────────────── function Marquee() { const items = ['Organic dates', 'Organic cashews', 'No fillers', 'No syrups', 'No preservatives', 'Made in Frisco, TX', 'Athlete-fueled']; const seq = [...items, ...items, ...items]; return ( ); } // ───────────────────────────────────────────────────────────────────────────── function Pillars() { const items = [ { n: '02', label: 'Ingredients', body: 'Organic dates and organic cashews. Read the back of an energy gel sometime — we did, and we got mad.' }, { n: '00', label: 'Fillers', body: 'No syrups, no maltodextrin, no preservatives, no mystery powders. Real food that travels well.' }, { n: '01', label: 'Founder', body: 'Made by a competitive swimmer who needed something to give her energy and keep her full.' }, ]; return (
{items.map((it, i) => (
{it.n}
{it.label}

{it.body}

))}
); } // ───────────────────────────────────────────────────────────────────────────── function ProductShowcase() { return (
The Bar

One bar. That's the menu.

We focused on getting one thing perfect before adding anything else. A dense, soft, chewy bar made by hand — every bite is dates and cashews and nothing else.

Real Date Bar — whole bar on parchment
Real Date Bar — detail
LIFESTYLE
Add a lifestyle photo
(bar at a meet / practice)
{/* Spec table */}
{[ ['Net weight', '1.7 oz / 48 g'], ['Ingredients', 'Dates, cashews'], ['Shelf life', 'Months at room temp'], ['Made in', 'Frisco, TX'], ].map(([k, v], i) => (
{k}
{v}
))}
); } Object.assign(window, { Nav, Hero, Marquee, Pillars, ProductShowcase, LogoMark, BarShot });