// Bee Blossom — Main App // Tweakable defaults: palette lead, font pairing, imagery style, hero layout const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "palette": "green", "fontPair": "cormorant_manrope", "imagery": "stripes", "heroLayout": "split" }/*EDITMODE-END*/; // ── Palette presets ─────────────────────────────────── const PALETTES = { green: { "--bg": "#faf6ea", "--bg-2": "#f3eddb", "--ink": "#1a2e1f", "--ink-soft": "#3d4a3f", "--primary": "#2f5d3a", "--primary-deep": "#1f4128", "--accent": "#d97433", "--gold": "#c69a3c", "--gold-soft": "#e0c684", "--line": "rgba(26, 46, 31, 0.14)", }, orange: { "--bg": "#fbf7ea", "--bg-2": "#f5ead4", "--ink": "#2a1a0e", "--ink-soft": "#4a3322", "--primary": "#d97433", "--primary-deep": "#b25923", "--accent": "#2f5d3a", "--gold": "#c69a3c", "--gold-soft": "#e0c684", "--line": "rgba(42, 26, 14, 0.14)", }, gold: { "--bg": "#fbf6e2", "--bg-2": "#f3e9c6", "--ink": "#2a2110", "--ink-soft": "#52472a", "--primary": "#a8842a", "--primary-deep": "#7c601a", "--accent": "#2f5d3a", "--gold": "#c69a3c", "--gold-soft": "#e0c684", "--line": "rgba(42, 33, 16, 0.16)", }, forest: { "--bg": "#0f1e14", "--bg-2": "#162b1c", "--ink": "#f3eddb", "--ink-soft": "#cdc7b3", "--primary": "#c69a3c", "--primary-deep": "#a8842a", "--accent": "#e07b2a", "--gold": "#e0c684", "--gold-soft": "#f3eddb", "--line": "rgba(243, 237, 219, 0.16)", }, }; // ── Font pairings ───────────────────────────────────── // Each pairing also imports its Google Font in the page already. const FONT_PAIRS = { cormorant_manrope: { "--font-display": '"Cormorant Garamond", Georgia, serif', "--font-body": '"Manrope", ui-sans-serif, system-ui, sans-serif', }, playfair_dmsans: { "--font-display": '"Playfair Display", Georgia, serif', "--font-body": '"DM Sans", ui-sans-serif, system-ui, sans-serif', }, italiana_workSans: { "--font-display": '"Italiana", Georgia, serif', "--font-body": '"Work Sans", ui-sans-serif, system-ui, sans-serif', }, }; const SITE_IMAGES = { hero: { src: "images/1.jpeg", alt: "Bee Blossom mobile cocktail bar serving guests at an outdoor event" }, about: { src: "", alt: "Bee Blossom bar trailer serving guests during an evening garden party" }, }; // Honeycomb mark — simple geometric only const HoneycombMark = ({ size = 30, color = "currentColor" }) => ( ); const HoneycombBand = ({ className = "" }) => ( ); // ── Nav ────────────────────────────────────────────── function Nav({ activeSection }) { const [scrolled, setScrolled] = React.useState(false); const [open, setOpen] = React.useState(false); React.useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 24); onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); const links = [ ["about", "About"], ["menu", "Menu"], ["calculator", "Calculator"], ["contact", "Contact"], ]; const go = (id) => { setOpen(false); const el = document.getElementById(id); if (el) window.scrollTo({ top: el.offsetTop - 60, behavior: "smooth" }); }; return ( ); } // ── Hero ────────────────────────────────────────────── function Hero({ layout, imageryStyle }) { const imgClass = `bb-img tall ${imageryStyle === "botanical" ? "botanical" : "stripes"}`; return (
Mobile cocktail bar · est. 2019

Drinks on the go.

Bee Blossom builds beautiful, season-driven bars for weddings, launches and the kind of parties guests still talk about months later. Mobile setup, signature menu, your venue — anywhere within 60 miles.

{ e.preventDefault(); document.getElementById("contact")?.scrollIntoView({ behavior: "smooth", block: "start" }); }}> Book the bar { e.preventDefault(); document.getElementById("menu")?.scrollIntoView({ behavior: "smooth", block: "start" }); }}> Taste the menu
{layout === "editorial" && (
Service area60 mi · Bay Area
Crafted since2019
Events booked340+
)}
{SITE_IMAGES.hero.alt}
); } // ── About ──────────────────────────────────────────── function About({ imageryStyle }) { const imgClass = `bb-img tall ${imageryStyle === "botanical" ? "botanical" : "stripes"}`; return (
{SITE_IMAGES.about.alt}
About Bee Blossom

A small bar with big-hearted service.

We started Bee Blossom in 2019 with one bar cart, a notebook of honey-cocktail recipes, and a stubborn belief that great drinks shouldn't stay locked inside restaurants.

Today our two-truck team caters weddings, launches and private gatherings across the Bay Area — building seasonal menus around local apiaries, small distillers, and whatever's flowering that month. Every event is led by our founders. We arrive early, set up beautifully, and pour with care until your last guest is happy.

340+ Events poured
12 Local apiaries
4.9 ★ guest rating
); } // ── Menu Section ───────────────────────────────────── function MenuSection({ imageryStyle }) { return ( ); } // ── Calculator Section ─────────────────────────────── function CalculatorSection({ imageryStyle }) { return (
How much do I need?

The honest
pour calculator.

Tell us about your event and we'll estimate quantities, categories and all-in cost — no upselling, no mystery. Move the sliders to see things update in real time.

See our Additional Packages
); } // ── Contact Section ────────────────────────────────── function ContactSection() { return (
Let's design your bar

Tell us about the night.

We book six months out for weddings and three weeks for private parties. The more you share now, the faster we'll come back with a tailored menu and quote.

); } // ── Footer ─────────────────────────────────────────── function Footer() { return ( ); } // ── App ────────────────────────────────────────────── function App() { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); const [activeSection, setActiveSection] = React.useState("top"); // Apply tokens to :root React.useEffect(() => { const root = document.documentElement; const palette = PALETTES[t.palette] || PALETTES.green; Object.entries(palette).forEach(([k, v]) => root.style.setProperty(k, v)); const fonts = FONT_PAIRS[t.fontPair] || FONT_PAIRS.cormorant_manrope; Object.entries(fonts).forEach(([k, v]) => root.style.setProperty(k, v)); }, [t.palette, t.fontPair]); // Scroll-spy for active nav React.useEffect(() => { const ids = ["top", "about", "menu", "calculator", "contact"]; const onScroll = () => { const y = window.scrollY + 120; let cur = "top"; for (const id of ids) { const el = document.getElementById(id); if (el && el.offsetTop <= y) cur = id; } setActiveSection(cur); }; onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); return ( <>