chris
50680a323f
Navigation & layout - Replace per-page hardcoded nav/footer with shared nav.js (client-side injection) - Add nginx reverse proxy back to docker-compose for clean localhost routing - Rename /color-picker/ to /color/ across nav, directory, and references eStore admin - Add variation hiding controls (mirrors existing modifier hiding) - Add delivery rate editor (base fee + per-mile per tier, persisted to data/) - Fix all missing BASE prefix on fetch calls (admin PATCH/DELETE, availability, slots, colors) - Mount estore/data/ as a Docker volume so admin config survives rebuilds Booking & calendar - Set pickup calendar events to TRANSPARENT (free) so they don't block delivery slots - Skip CANCELLED events in busy-time calculation - Re-check slot availability at checkout before charging (409 on conflict) Phone & email validation - Auto-format phone as (XXX) XXX-XXXX as user types - Require exactly 10 digits; tighten email regex Confirmation emails (store alert + customer) - Full item detail per line: name, price, add-ons, colors, note - Charges breakdown: subtotal, delivery fee, tax, total - Delivery window: simplified M/D/YY h:mm – h:mm AM/PM format - .ics calendar attachment on customer confirmation Delivery rates - Extract configurable rates to delivery-rates.ts (server-only, no fs in client bundle) - calcDelivery() accepts optional rates param; delivery-quote route passes configured rates Content - Change all "40+ latex colors" references to "70+" Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
88 lines
3.3 KiB
TypeScript
88 lines
3.3 KiB
TypeScript
/**
|
|
* Hero section — matches the layout of beachpartyballoons.com's index.html:
|
|
* full-width image with the logo overlaid, then centered address + CTA.
|
|
*/
|
|
export default function Hero() {
|
|
return (
|
|
<>
|
|
{/* Scrolling announcement bar */}
|
|
<div className="update">
|
|
<div id="message">
|
|
🎈 Walk-ins welcome! · Delivery available across CT · Over 70 latex colors in stock · Custom arrangements made while you wait · 203.283.5626
|
|
</div>
|
|
</div>
|
|
|
|
{/* Hero image with logo overlay */}
|
|
<div className="container is-justify-content-center padding">
|
|
<figure className="image" style={{ position: 'relative' }}>
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img src="/images/classic/hero.webp" alt="Beach Party Balloons" />
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img
|
|
className="is-overlay"
|
|
src="/images/logo/BeachPartyBalloons-logo.webp"
|
|
alt="Beach Party Balloons logo"
|
|
style={{ width: '50%', height: 'auto', margin: 'auto' }}
|
|
/>
|
|
</figure>
|
|
</div>
|
|
|
|
{/* Address + contact */}
|
|
<div className="is-flex-direction-column is-dark">
|
|
<h1 className="is-size-3" style={{ textAlign: 'center' }}>
|
|
Shop Online
|
|
</h1>
|
|
<h2 className="is-size-4" style={{ textAlign: 'center' }}>
|
|
<a
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
href="https://maps.app.goo.gl/gRk6NztgMRUsSVJf9"
|
|
>
|
|
554 Boston Post Road, Milford, CT 06460
|
|
</a>
|
|
</h2>
|
|
<h2 className="is-size-4" style={{ textAlign: 'center' }}>
|
|
<a href="tel:203.283.5626">203.283.5626</a>
|
|
</h2>
|
|
<div className="py-2 has-text-centered">
|
|
<a href="https://beachpartyballoons.com/contact/">
|
|
<button className="button is-info">Contact Us</button>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Intro image + copy */}
|
|
<div className="container is-justify-content-center padding">
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img src="/images/organic/img1.webp" alt="Organic balloon arrangement" />
|
|
</div>
|
|
|
|
<p className="is-size-5 has-text-centered">Walk-ins welcome!</p>
|
|
<p className="is-size-6 has-text-centered">
|
|
Pick up a balloon arrangement for birthdays or any occasion. We will make
|
|
it while you wait!
|
|
</p>
|
|
<p className="is-size-6 has-text-centered">
|
|
We have hundreds of foil balloon choices in stock and over 70 latex colors!
|
|
</p>
|
|
|
|
<p className="is-size-5 has-text-centered">
|
|
...Or consult with one of our designers about your balloon decorating needs.
|
|
</p>
|
|
|
|
<div className="container is-justify-content-center padding">
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img src="/images/organic/img2.webp" alt="Delivery balloon arrangement" />
|
|
</div>
|
|
|
|
<p className="is-size-5 has-text-centered">Delivery available!</p>
|
|
<p className="is-size-5 has-text-centered">
|
|
Have your balloons delivered! Our delivery staff will make sure your order
|
|
arrives safe and sound!
|
|
</p>
|
|
|
|
<hr className="section-divider" />
|
|
</>
|
|
)
|
|
}
|