Compare commits
29 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| f7b20e168c | |||
| b6abeda42a | |||
| db77e9f839 | |||
| f55f455455 | |||
| ec550ca696 | |||
| 8a9b9a43e8 | |||
| 2869b1fae9 | |||
| 3b68ed3573 | |||
| a76d228ee7 | |||
| d135ce402c | |||
| 6717baa08e | |||
| 55840f8f3e | |||
| 1daa8df631 | |||
| 221f1f9045 | |||
| 77e0a58413 | |||
| 173b719e42 | |||
| 8974255324 | |||
| b33488f42d | |||
| 7d368d1e7d | |||
| d32a3c1ce1 | |||
| 98ba573843 | |||
| 1cc3251e8d | |||
| c2aaeaf9d0 | |||
| 38286c8117 | |||
| 38cf72f73a | |||
| 14efaee167 | |||
| a6d67f8bf8 | |||
| ac25d7b9c9 | |||
| 188e4640a1 |
1428
src/app/layout.tsx
1428
src/app/layout.tsx
File diff suppressed because it is too large
Load Diff
499
src/app/page.tsx
499
src/app/page.tsx
@@ -1,212 +1,345 @@
|
|||||||
"use client"
|
"use client";
|
||||||
|
|
||||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||||
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
|
import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
|
||||||
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
|
||||||
import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
|
import FeatureCardTwentyFive from "@/components/sections/feature/FeatureCardTwentyFive";
|
||||||
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
import TestimonialAboutCard from "@/components/sections/about/TestimonialAboutCard";
|
||||||
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
import MetricCardFourteen from "@/components/sections/metrics/MetricCardFourteen";
|
||||||
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
|
import PricingCardTwo from "@/components/sections/pricing/PricingCardTwo";
|
||||||
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
|
import FaqDouble from "@/components/sections/faq/FaqDouble";
|
||||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
import ContactText from "@/components/sections/contact/ContactText";
|
||||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
import ContactForm from "@/components/form/ContactForm";
|
||||||
|
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
||||||
|
import { Coffee, Clock, MapPin, Heart, Users, Utensils, Star } from "lucide-react";
|
||||||
|
|
||||||
export default function LandingPage() {
|
export default function Home() {
|
||||||
return (
|
return (
|
||||||
<ThemeProvider
|
<ThemeProvider
|
||||||
defaultButtonVariant="text-shift"
|
defaultButtonVariant="hover-magnetic"
|
||||||
defaultTextAnimation="reveal-blur"
|
defaultTextAnimation="entrance-slide"
|
||||||
borderRadius="soft"
|
borderRadius="rounded"
|
||||||
contentWidth="small"
|
contentWidth="mediumLarge"
|
||||||
sizing="mediumSizeLargeTitles"
|
sizing="mediumLarge"
|
||||||
background="grid"
|
background="none"
|
||||||
cardStyle="solid"
|
cardStyle="solid"
|
||||||
primaryButtonStyle="double-inset"
|
primaryButtonStyle="gradient"
|
||||||
secondaryButtonStyle="solid"
|
secondaryButtonStyle="glass"
|
||||||
headingFontWeight="light"
|
headingFontWeight="bold"
|
||||||
>
|
>
|
||||||
<div id="nav" data-section="nav">
|
<div id="nav" data-section="nav">
|
||||||
<NavbarStyleFullscreen
|
<NavbarStyleFullscreen
|
||||||
navItems={[
|
navItems={[
|
||||||
{ name: "Menu", id: "fan-favorites" },
|
{ name: "Home", id: "/" },
|
||||||
{ name: "Experience", id: "experience" },
|
{ name: "Menu", id: "#menu" },
|
||||||
{ name: "Catering", id: "catering" },
|
{ name: "Experience", id: "#experience" },
|
||||||
{ name: "Locations", id: "contact" },
|
{ name: "Contact", id: "#contact" },
|
||||||
{ name: "Order Online", id: "https://order.sugarfiresmokehouse.com" }
|
{ name: "Reviews", id: "#reviews" },
|
||||||
]}
|
]}
|
||||||
brandName="Sugarfire"
|
brandName="Mac's Route 8"
|
||||||
bottomLeftText="St. Louis BBQ Legend"
|
bottomLeftText="A Classic Diner"
|
||||||
bottomRightText="hello@sugarfiresmokehouse.com"
|
bottomRightText="(555) 123-4567"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Hero Section */}
|
||||||
<div id="hero" data-section="hero">
|
<div id="hero" data-section="hero">
|
||||||
<HeroOverlay
|
<HeroBillboardCarousel
|
||||||
title="Real Smoke. Real Flavor. No Shortcuts."
|
title="Welcome to Mac's Route 8 Cafe"
|
||||||
description="Authentic St. Louis BBQ smoked low and slow — tender brisket, legendary pork, and sides people drive miles for."
|
description="Retro charm meets modern comfort. Serving classic breakfast and lunch favorites since day one. Where nostalgia tastes delicious."
|
||||||
tag="St. Louis BBQ Legend"
|
background={{ variant: "plain" }}
|
||||||
imageSrc="http://img.b2bpic.net/free-photo/chef-cutting-into-pieces-grilled-lamb-steak_140725-10720.jpg?_wi=1"
|
tag="Since '85"
|
||||||
imageAlt="Smoked brisket with smoke and char"
|
|
||||||
textPosition="bottom-left"
|
|
||||||
showBlur={true}
|
|
||||||
showDimOverlay={true}
|
|
||||||
buttons={[
|
buttons={[
|
||||||
{ text: "Order Online", href: "https://order.sugarfiresmokehouse.com" },
|
{ text: "View Menu", href: "#menu" },
|
||||||
{ text: "View Menu", href: "#fan-favorites" }
|
{ text: "Make a Reservation", href: "#contact" },
|
||||||
]}
|
]}
|
||||||
/>
|
mediaItems={[
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="social-proof" data-section="social-proof">
|
|
||||||
<TestimonialCardTwelve
|
|
||||||
testimonials={[
|
|
||||||
{ id: "1", name: "Sarah Johnson", imageSrc: "http://img.b2bpic.net/free-photo/multiracial-group-young-people-taking-selfie_1139-1031.jpg", imageAlt: "Sarah Johnson" },
|
|
||||||
{ id: "2", name: "Michael Chen", imageSrc: "http://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg", imageAlt: "Michael Chen" },
|
|
||||||
{ id: "3", name: "Emily Rodriguez", imageSrc: "http://img.b2bpic.net/free-photo/closeup-satisfied-bearded-guy-white-shirt-showing-thumbs-up-approval-like-agree-positiv_1258-113283.jpg", imageAlt: "Emily Rodriguez" },
|
|
||||||
{ id: "4", name: "David Kim", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-cafe_273609-12865.jpg", imageAlt: "David Kim" }
|
|
||||||
]}
|
|
||||||
cardTitle="One of St. Louis' Most Loved BBQ Spots"
|
|
||||||
cardTag="4.7★ Rating"
|
|
||||||
cardAnimation="slide-up"
|
|
||||||
useInvertedBackground={false}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="signature-bbq" data-section="signature-bbq">
|
|
||||||
<FeatureCardTwentySeven
|
|
||||||
title="The Smokehouse Classics"
|
|
||||||
description="Our signature meats smoked to perfection with authentic BBQ technique."
|
|
||||||
tag="Premium Meats"
|
|
||||||
textboxLayout="default"
|
|
||||||
useInvertedBackground={false}
|
|
||||||
features={[
|
|
||||||
{ id: "brisket", title: "Texas Brisket", description: "12-hour slow smoked Texas style brisket with perfect bark and tender interior.", imageSrc: "http://img.b2bpic.net/free-photo/chef-cutting-into-pieces-grilled-lamb-steak_140725-10720.jpg?_wi=2", imageAlt: "Smoked Texas brisket" },
|
|
||||||
{ id: "pork", title: "Pulled Pork", description: "Tender pork shoulder smoked to perfection, bursting with flavor even without sauce.", imageSrc: "http://img.b2bpic.net/free-photo/cook-making-meal-slicing-meet-bbq_1268-17680.jpg?_wi=1", imageAlt: "Smoked pulled pork" },
|
|
||||||
{ id: "turkey", title: "Smoked Turkey", description: "Juicy and perfectly seasoned smoked turkey breast, a lighter protein option.", imageSrc: "http://img.b2bpic.net/free-photo/tasty-appetizing-roasted-meat-pork-with-vegetables-thanksgiving-day-closeup_1220-6563.jpg", imageAlt: "Smoked turkey breast" },
|
|
||||||
{ id: "ribs", title: "St. Louis Ribs", description: "Fall-off-the-bone BBQ ribs with our house sauce that keeps customers coming back.", imageSrc: "http://img.b2bpic.net/free-photo/fried-meat-pomegranate-sauce_140725-8553.jpg?_wi=1", imageAlt: "St. Louis style ribs" }
|
|
||||||
]}
|
|
||||||
gridVariant="four-items-2x2-equal-grid"
|
|
||||||
animationType="slide-up"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="fan-favorites" data-section="fan-favorites">
|
|
||||||
<ProductCardTwo
|
|
||||||
title="Local Legends"
|
|
||||||
description="The dishes people drive miles for. Customer favorites that define Sugarfire."
|
|
||||||
tag="Most Ordered"
|
|
||||||
textboxLayout="default"
|
|
||||||
useInvertedBackground={false}
|
|
||||||
products={[
|
|
||||||
{ id: "1", brand: "Sugarfire", name: "Smoked Brisket", price: "$18.99", rating: 5, reviewCount: "1.2k", imageSrc: "http://img.b2bpic.net/free-photo/chef-cutting-into-pieces-grilled-lamb-steak_140725-10720.jpg?_wi=3", imageAlt: "Smoked brisket platter" },
|
|
||||||
{ id: "2", brand: "Sugarfire", name: "Pulled Pork Sandwich", price: "$12.99", rating: 5, reviewCount: "892", imageSrc: "http://img.b2bpic.net/free-photo/cook-making-meal-slicing-meet-bbq_1268-17680.jpg?_wi=2", imageAlt: "Pulled pork sandwich" },
|
|
||||||
{ id: "3", brand: "Sugarfire", name: "Mac & Cheese", price: "$5.99", rating: 5, reviewCount: "654", imageSrc: "http://img.b2bpic.net/free-photo/concept-tasty-delicious-homemade-food-potato-casserole_185193-165418.jpg", imageAlt: "Creamy mac and cheese" },
|
|
||||||
{ id: "4", brand: "Sugarfire", name: "Baked Beans", price: "$4.99", rating: 5, reviewCount: "478", imageSrc: "http://img.b2bpic.net/free-photo/steamed-white-beans-with-vegetables-tomato-sauce-vegan-food-asian-meal_2829-7113.jpg", imageAlt: "Best baked beans in St. Louis" },
|
|
||||||
{ id: "5", brand: "Sugarfire", name: "Pecan Pie", price: "$6.99", rating: 5, reviewCount: "923", imageSrc: "http://img.b2bpic.net/free-photo/top-view-delicious-apple-cake-with-nuts-cinnamon-cake-biscuit-sugar-fruit_140725-22471.jpg?_wi=1", imageAlt: "Legendary pecan pie" },
|
|
||||||
{ id: "6", brand: "Sugarfire", name: "St. Louis Ribs", price: "$16.99", rating: 5, reviewCount: "745", imageSrc: "http://img.b2bpic.net/free-photo/fried-meat-pomegranate-sauce_140725-8553.jpg?_wi=2", imageAlt: "Fall-off-the-bone ribs" }
|
|
||||||
]}
|
|
||||||
gridVariant="three-columns-all-equal-width"
|
|
||||||
animationType="slide-up"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="experience" data-section="experience">
|
|
||||||
<MetricSplitMediaAbout
|
|
||||||
tag="Our Atmosphere"
|
|
||||||
title="Rustic Smokehouse Experience"
|
|
||||||
description="Walk in to the smell of real wood smoke, classic rock playing, and the sound of brisket being sliced fresh. Every element of Sugarfire is designed to immerse you in authentic BBQ culture. From the rustic wooden interior to the open smoker view, you're experiencing real smokehouse tradition."
|
|
||||||
metrics={[
|
|
||||||
{ value: "20+", title: "Years of BBQ Excellence" },
|
|
||||||
{ value: "50k+", title: "Happy Customers Yearly" }
|
|
||||||
]}
|
|
||||||
imageSrc="http://img.b2bpic.net/free-photo/young-woman-with-child-mom-son-are-fooling-around-having-fun-near-fireplace_1321-1578.jpg"
|
|
||||||
imageAlt="Rustic smokehouse dining room"
|
|
||||||
mediaAnimation="slide-up"
|
|
||||||
metricsAnimation="slide-up"
|
|
||||||
useInvertedBackground={false}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="why-sugarfire" data-section="why-sugarfire">
|
|
||||||
<MetricCardFourteen
|
|
||||||
title="Why People Love Sugarfire"
|
|
||||||
tag="What Sets Us Apart"
|
|
||||||
tagAnimation="slide-up"
|
|
||||||
metrics={[
|
|
||||||
{ id: "1", value: "100%", description: "Authentic slow-smoked meats using traditional techniques and real wood smoke." },
|
|
||||||
{ id: "2", value: "⚡", description: "Fast cafeteria-style service means fresh hot food within minutes of ordering." },
|
|
||||||
{ id: "3", value: "🍰", description: "Legendary desserts like our famous pecan pie that customers specifically request." },
|
|
||||||
{ id: "4", value: "#1", description: "One of the top-rated BBQ spots in St. Louis with 4.7-star average rating." }
|
|
||||||
]}
|
|
||||||
metricsAnimation="slide-up"
|
|
||||||
useInvertedBackground={false}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="catering" data-section="catering">
|
|
||||||
<PricingCardNine
|
|
||||||
title="Bring the Smoke to Your Event"
|
|
||||||
description="Sugarfire catering brings authentic BBQ directly to your celebration. Perfect for corporate events, weddings, parties, and game day gatherings."
|
|
||||||
tag="Catering"
|
|
||||||
textboxLayout="default"
|
|
||||||
useInvertedBackground={false}
|
|
||||||
animationType="slide-up"
|
|
||||||
plans={[
|
|
||||||
{ id: "basic", title: "Small Gathering", price: "$349", period: "for up to 20 people", imageSrc: "http://img.b2bpic.net/free-photo/chicken-kebab-with-lavash-wooden-board_140725-332.jpg?_wi=1", imageAlt: "BBQ catering platter", features: ["2 meat choices (brisket, pork, ribs, or turkey)", "2 sides (mac & cheese, baked beans, corn bites)", "House BBQ sauce", "Serving utensils included", "Setup assistance provided"], button: { text: "Book Catering", href: "#contact" } },
|
|
||||||
{ id: "pro", title: "Corporate Event", price: "$899", period: "for up to 50 people", imageSrc: "http://img.b2bpic.net/free-photo/chicken-kebab-with-lavash-wooden-board_140725-332.jpg?_wi=2", imageAlt: "Large BBQ catering spread", features: ["3 meat choices for variety", "3 premium sides with options", "House BBQ sauce + spicy option", "Full serving setup", "Professional catering staff", "Custom menu planning"], button: { text: "Book Corporate Catering", href: "#contact" } },
|
|
||||||
{ id: "premium", title: "Large Celebration", price: "$1,799", period: "for up to 100 people", imageSrc: "http://img.b2bpic.net/free-photo/chicken-kebab-with-lavash-wooden-board_140725-332.jpg?_wi=3", imageAlt: "Premium BBQ catering feast", features: ["All 4 meats included", "All sides + premium options", "Multiple sauce varieties", "Full professional catering team", "Beverage service available", "Dedicated event coordinator"], button: { text: "Custom Quote", href: "#contact" } }
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="contact" data-section="contact">
|
|
||||||
<ContactSplit
|
|
||||||
tag="Newsletter"
|
|
||||||
title="Join the Smokehouse Club"
|
|
||||||
description="Get exclusive deals, new menu updates, and a free dessert on your birthday. Join our community of BBQ lovers."
|
|
||||||
background={{ variant: "sparkles-gradient" }}
|
|
||||||
useInvertedBackground={false}
|
|
||||||
imageSrc="http://img.b2bpic.net/free-photo/top-view-delicious-apple-cake-with-nuts-cinnamon-cake-biscuit-sugar-fruit_140725-22471.jpg?_wi=2"
|
|
||||||
imageAlt="Birthday dessert offer"
|
|
||||||
mediaAnimation="slide-up"
|
|
||||||
mediaPosition="right"
|
|
||||||
inputPlaceholder="Enter your email"
|
|
||||||
buttonText="Join the Club"
|
|
||||||
termsText="We respect your privacy. Unsubscribe anytime. Birthday desserts for members only!"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="footer" data-section="footer">
|
|
||||||
<FooterBase
|
|
||||||
logoText="Sugarfire Smokehouse"
|
|
||||||
copyrightText="© 2025 Sugarfire Smokehouse. All rights reserved."
|
|
||||||
columns={[
|
|
||||||
{
|
{
|
||||||
title: "Menu", items: [
|
imageSrc:
|
||||||
{ label: "Meats", href: "#signature-bbq" },
|
"https://images.unsplash.com/photo-1495521821757-a1efb6729352?w=800&h=600&fit=crop&_wi=1", imageAlt: "Classic diner interior"
|
||||||
{ label: "Sides", href: "#fan-favorites" },
|
|
||||||
{ label: "Desserts", href: "#fan-favorites" },
|
|
||||||
{ label: "Order Online", href: "https://order.sugarfiresmokehouse.com" }
|
|
||||||
]
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Company", items: [
|
imageSrc:
|
||||||
{ label: "About Us", href: "#experience" },
|
"https://images.unsplash.com/photo-1552566626-52f8b828add9?w=800&h=600&fit=crop", imageAlt: "Fresh breakfast spread"
|
||||||
{ label: "Catering", href: "#catering" },
|
},
|
||||||
{ label: "Locations", href: "#" },
|
{
|
||||||
{ label: "Careers", href: "#" }
|
imageSrc:
|
||||||
]
|
"https://images.unsplash.com/photo-1567521464027-f127ff144326?w=800&h=600&fit=crop", imageAlt: "Vintage diner vibes"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
imageSrc:
|
||||||
|
"https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=800&h=600&fit=crop", imageAlt: "Delicious comfort food"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
imageSrc:
|
||||||
|
"https://images.unsplash.com/photo-1555939594-58d7cb561341?w=800&h=600&fit=crop", imageAlt: "Warm hospitality"
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Social Proof - Customer Reviews */}
|
||||||
|
<div id="reviews" data-section="reviews">
|
||||||
|
<SocialProofOne
|
||||||
|
title="Loved by Our Community"
|
||||||
|
description="What our regulars and first-time visitors have to say about Mac's"
|
||||||
|
tag="Reviews"
|
||||||
|
textboxLayout="default"
|
||||||
|
useInvertedBackground={false}
|
||||||
|
names={[
|
||||||
|
"★★★★★ Best breakfast in town!", "★★★★★ Authentic diner experience", "★★★★★ Amazing service & quality", "★★★★★ Worth the visit every time", "★★★★★ Family favorite for 20 years", "★★★★★ Classic comfort food done right"
|
||||||
|
]}
|
||||||
|
speed={40}
|
||||||
|
showCard={true}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Breakfast Favorites Grid */}
|
||||||
|
<div id="menu" data-section="menu">
|
||||||
|
<FeatureCardTwentyFive
|
||||||
|
features={[
|
||||||
|
{
|
||||||
|
title: "Classic Pancakes", description: "Fluffy, golden pancakes served with fresh berries and real maple syrup", icon: Coffee,
|
||||||
|
mediaItems: [
|
||||||
|
{
|
||||||
|
imageSrc:
|
||||||
|
"https://images.unsplash.com/photo-1567620905732-2d1ec7ab7445?w=500&h=400&fit=crop", imageAlt: "Classic pancakes"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
imageSrc:
|
||||||
|
"https://images.unsplash.com/photo-1484723091739-37cacfe382d1?w=500&h=400&fit=crop", imageAlt: "Waffle special"
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Country Breakfast", description: "Eggs your way, thick-cut bacon, hash browns, and homemade toast", icon: Utensils,
|
||||||
|
mediaItems: [
|
||||||
|
{
|
||||||
|
imageSrc:
|
||||||
|
"https://images.unsplash.com/photo-1525351484163-7529414344d7?w=500&h=400&fit=crop", imageAlt: "Country breakfast plate"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
imageSrc:
|
||||||
|
"https://images.unsplash.com/photo-1509042239860-f550ce710b93?w=500&h=400&fit=crop", imageAlt: "Eggs and toast"
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Mac's Omelet Special", description: "Fluffy three-egg omelet with cheese, peppers, and onions, handcrafted fresh", icon: Star,
|
||||||
|
mediaItems: [
|
||||||
|
{
|
||||||
|
imageSrc:
|
||||||
|
"https://images.unsplash.com/photo-1541519227354-08fa5d50c44d?w=500&h=400&fit=crop", imageAlt: "Delicious omelet"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
imageSrc:
|
||||||
|
"https://images.unsplash.com/photo-1568901346375-23c9450c58cd?w=500&h=400&fit=crop", imageAlt: "Omelet plating"
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Hash Brown Heaven", description: "Crispy on the outside, tender inside, topped with cheese and bacon", icon: Heart,
|
||||||
|
mediaItems: [
|
||||||
|
{
|
||||||
|
imageSrc:
|
||||||
|
"https://images.unsplash.com/photo-1565299585323-38d6b0865b47?w=500&h=400&fit=crop", imageAlt: "Crispy hash browns"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
imageSrc:
|
||||||
|
"https://images.unsplash.com/photo-1612874742237-415c069381bd?w=500&h=400&fit=crop", imageAlt: "Loaded hash browns"
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
animationType="slide-up"
|
||||||
|
title="Breakfast Favorites"
|
||||||
|
description="Our most-loved dishes that keep customers coming back for more"
|
||||||
|
tag="Menu Highlights"
|
||||||
|
textboxLayout="default"
|
||||||
|
useInvertedBackground={false}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Mac's Experience */}
|
||||||
|
<div id="experience" data-section="experience">
|
||||||
|
<TestimonialAboutCard
|
||||||
|
tag="The Mac's Experience"
|
||||||
|
title="Where Every Meal Feels Like Home"
|
||||||
|
description="Step into a world of warm hospitality and vintage charm"
|
||||||
|
subdescription="Open since 1985, serving with heart"
|
||||||
|
icon={Users}
|
||||||
|
imageSrc="https://images.unsplash.com/photo-1495521821757-a1efb6729352?w=800&h=600&fit=crop&_wi=2"
|
||||||
|
imageAlt="Mac's diner interior"
|
||||||
|
useInvertedBackground={false}
|
||||||
|
mediaAnimation="slide-up"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Why People Keep Coming Back */}
|
||||||
|
<div id="why-us" data-section="why-us">
|
||||||
|
<MetricCardFourteen
|
||||||
|
title="Why People Keep Coming Back to Mac's Route 8 Cafe"
|
||||||
|
tag="Our Promise"
|
||||||
|
metrics={[
|
||||||
|
{
|
||||||
|
id: "1", value: "40 Years", description: "Of consistent quality, authentic recipes, and genuine hospitality"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "2", value: "Family Made", description: "Every dish prepared with care using fresh, local ingredients"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "3", value: "Community Fueled", description: "Built on relationships and memories created over countless meals"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "4", value: "Always Fresh", description: "Nothing frozen, nothing rushed—just real food, real slow"
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
useInvertedBackground={false}
|
||||||
|
metricsAnimation="slide-up"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Menu Highlights Pricing Section */}
|
||||||
|
<div id="pricing" data-section="pricing">
|
||||||
|
<PricingCardTwo
|
||||||
|
plans={[
|
||||||
|
{
|
||||||
|
id: "1", badge: "Breakfast", badgeIcon: Coffee,
|
||||||
|
price: "$8-12", subtitle: "Rise and Shine Special", buttons: [
|
||||||
|
{ text: "Order Now", href: "#contact" },
|
||||||
|
{ text: "View Full Menu", href: "#menu" },
|
||||||
|
],
|
||||||
|
features: [
|
||||||
|
"Pancakes, eggs, bacon", "Hash browns or fruit", "Fresh coffee or juice", "Served until 11 AM"
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "2", badge: "Lunch", badgeIcon: Utensils,
|
||||||
|
price: "$10-15", subtitle: "Midday Comfort", buttons: [
|
||||||
|
{ text: "Order Now", href: "#contact" },
|
||||||
|
{ text: "View Full Menu", href: "#menu" },
|
||||||
|
],
|
||||||
|
features: [
|
||||||
|
"Classic burgers & sandwiches", "Homemade soups", "Side salads or fries", "Served 11 AM - 5 PM"
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "3", badge: "Specials", badgeIcon: Star,
|
||||||
|
price: "$12-18", subtitle: "Daily Chef Creations", buttons: [
|
||||||
|
{ text: "Order Now", href: "#contact" },
|
||||||
|
{ text: "View Full Menu", href: "#menu" },
|
||||||
|
],
|
||||||
|
features: [
|
||||||
|
"Rotating daily specials", "Seasonal highlights", "Family portions available", "Ask your server for details"
|
||||||
|
],
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
animationType="slide-up"
|
||||||
|
title="Menu Highlights & Pricing"
|
||||||
|
description="Discover our offerings and find your new favorite"
|
||||||
|
textboxLayout="default"
|
||||||
|
useInvertedBackground={false}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Location & Hours */}
|
||||||
|
<div id="location" data-section="location">
|
||||||
|
<FaqDouble
|
||||||
|
faqs={[
|
||||||
|
{
|
||||||
|
id: "1", title: "Where is Mac's Route 8 Cafe located?", content:
|
||||||
|
"We're right on Route 8, easy to spot with our classic retro sign. Address: 123 Route 8, Historic District. Right next to the vintage gas station!"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "2", title: "What are your hours?", content:
|
||||||
|
"Monday - Friday: 6 AM - 9 PM | Saturday: 7 AM - 10 PM | Sunday: 8 AM - 8 PM. We're closed every 2nd Tuesday for deep cleaning and family time."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "3", title: "Do you take reservations?", content:
|
||||||
|
"We accept reservations for groups of 6 or more on weekdays. Walk-ins always welcome! Call us at (555) 123-4567 to book your table."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "4", title: "Do you have parking?", content:
|
||||||
|
"Yes! Free parking in our lot and on the street. We also have accessible parking right by the entrance for our guests with mobility needs."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "5", title: "What payment methods do you accept?", content:
|
||||||
|
"Cash, credit cards (Visa, Mastercard, AmEx), and mobile payments. We love cash tips, but digital works great too!"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "6", title: "Can I bring my family and pets?", content:
|
||||||
|
"Families with kids are our specialty! Well-behaved service animals are welcome inside. Other pets can enjoy our outdoor patio area during nice weather."
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
title="Location & Hours"
|
||||||
|
description="Everything you need to know about visiting Mac's"
|
||||||
|
tag="Info"
|
||||||
|
textboxLayout="default"
|
||||||
|
useInvertedBackground={false}
|
||||||
|
faqsAnimation="slide-up"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Community Connection */}
|
||||||
|
<div id="community" data-section="community">
|
||||||
|
<ContactText
|
||||||
|
text="Join our community of Mac's regulars. We're more than a cafe—we're a gathering place for neighbors, friends, and families creating memories over breakfast."
|
||||||
|
animationType="entrance-slide"
|
||||||
|
buttons={[
|
||||||
|
{ text: "Join Our Mailing List", href: "#newsletter" },
|
||||||
|
{ text: "Follow Us On Social", href: "https://instagram.com" },
|
||||||
|
]}
|
||||||
|
background={{ variant: "plain" }}
|
||||||
|
useInvertedBackground={false}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Email Signup */}
|
||||||
|
<div id="newsletter" data-section="newsletter">
|
||||||
|
<ContactForm
|
||||||
|
title="Stay Updated"
|
||||||
|
description="Get the latest specials, events, and community news delivered to your inbox"
|
||||||
|
tag="Newsletter"
|
||||||
|
tagIcon={Coffee}
|
||||||
|
inputPlaceholder="Your email address"
|
||||||
|
buttonText="Subscribe"
|
||||||
|
termsText="We respect your inbox. Unsubscribe anytime. Specials sent weekly."
|
||||||
|
centered={true}
|
||||||
|
onSubmit={(email) => console.log("Newsletter signup:", email)}
|
||||||
|
useInvertedBackground={false}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
|
<div id="footer" data-section="footer">
|
||||||
|
<FooterBaseCard
|
||||||
|
logoText="Mac's Route 8 Cafe"
|
||||||
|
columns={[
|
||||||
|
{
|
||||||
|
title: "Hours", items: [
|
||||||
|
{ label: "Mon-Fri: 6 AM - 9 PM", href: "#location" },
|
||||||
|
{ label: "Sat: 7 AM - 10 PM", href: "#location" },
|
||||||
|
{ label: "Sun: 8 AM - 8 PM", href: "#location" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Navigation", items: [
|
||||||
|
{ label: "Menu", href: "#menu" },
|
||||||
|
{ label: "Location", href: "#location" },
|
||||||
|
{ label: "Contact", href: "#contact" },
|
||||||
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Connect", items: [
|
title: "Connect", items: [
|
||||||
{ label: "Instagram", href: "https://instagram.com" },
|
{ label: "Instagram", href: "https://instagram.com" },
|
||||||
{ label: "Facebook", href: "https://facebook.com" },
|
{ label: "Facebook", href: "https://facebook.com" },
|
||||||
{ label: "Contact", href: "#contact" },
|
{ label: "Call Us", href: "tel:(555)123-4567" },
|
||||||
{ label: "Newsletter", href: "#contact" }
|
],
|
||||||
]
|
},
|
||||||
}
|
|
||||||
]}
|
]}
|
||||||
|
copyrightText="© 2025 Mac's Route 8 Cafe | A Classic Diner Experience"
|
||||||
|
onPrivacyClick={() => console.log("Privacy clicked")}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
|
|||||||
@@ -11,7 +11,7 @@ html {
|
|||||||
body {
|
body {
|
||||||
background-color: var(--background);
|
background-color: var(--background);
|
||||||
color: var(--foreground);
|
color: var(--foreground);
|
||||||
font-family: var(--font-montserrat), sans-serif;
|
font-family: var(--font-lato), sans-serif;
|
||||||
position: relative;
|
position: relative;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
overscroll-behavior: none;
|
overscroll-behavior: none;
|
||||||
@@ -24,5 +24,5 @@ h3,
|
|||||||
h4,
|
h4,
|
||||||
h5,
|
h5,
|
||||||
h6 {
|
h6 {
|
||||||
font-family: var(--font-montserrat), sans-serif;
|
font-family: var(--font-playfair-display), serif;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -10,15 +10,15 @@
|
|||||||
--accent: #ffffff;
|
--accent: #ffffff;
|
||||||
--background-accent: #ffffff; */
|
--background-accent: #ffffff; */
|
||||||
|
|
||||||
--background: #f5f5f5;
|
--background: #f5f1eb;
|
||||||
--card: #ffffff;
|
--card: #fefbf7;
|
||||||
--foreground: #1c1c1c;
|
--foreground: #1a0f07;
|
||||||
--primary-cta: #1f514c;
|
--primary-cta: #c41e1e;
|
||||||
--primary-cta-text: #f5f5f5;
|
--primary-cta-text: #f5f5f5;
|
||||||
--secondary-cta: #ffffff;
|
--secondary-cta: #fefbf7;
|
||||||
--secondary-cta-text: #1c1c1c;
|
--secondary-cta-text: #1c1c1c;
|
||||||
--accent: #35c18b;
|
--accent: #f4d99b;
|
||||||
--background-accent: #ecebe4;
|
--background-accent: #5d4037;
|
||||||
|
|
||||||
/* text sizing - set by ThemeProvider */
|
/* text sizing - set by ThemeProvider */
|
||||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||||
|
|||||||
Reference in New Issue
Block a user