22 Commits

Author SHA1 Message Date
f7b20e168c Merge version_3 into main
Merge version_3 into main
2026-03-10 07:53:29 +00:00
b6abeda42a Update src/app/page.tsx 2026-03-10 07:53:25 +00:00
db77e9f839 Merge version_3 into main
Merge version_3 into main
2026-03-10 07:52:49 +00:00
f55f455455 Update src/app/page.tsx 2026-03-10 07:52:45 +00:00
ec550ca696 Merge version_3 into main
Merge version_3 into main
2026-03-10 07:51:29 +00:00
8a9b9a43e8 Update src/app/styles/variables.css 2026-03-10 07:51:25 +00:00
2869b1fae9 Update src/app/page.tsx 2026-03-10 07:51:24 +00:00
3b68ed3573 Update src/app/layout.tsx 2026-03-10 07:51:22 +00:00
a76d228ee7 Merge version_3 into main
Merge version_3 into main
2026-03-10 07:47:13 +00:00
d135ce402c Update src/app/page.tsx 2026-03-10 07:47:10 +00:00
6717baa08e Merge version_3 into main
Merge version_3 into main
2026-03-10 07:43:08 +00:00
55840f8f3e Update src/app/page.tsx 2026-03-10 07:43:04 +00:00
1daa8df631 Merge version_3 into main
Merge version_3 into main
2026-03-10 07:41:52 +00:00
221f1f9045 Update src/app/page.tsx 2026-03-10 07:41:47 +00:00
77e0a58413 Update src/app/layout.tsx 2026-03-10 07:41:47 +00:00
173b719e42 Merge version_3 into main
Merge version_3 into main
2026-03-10 07:40:38 +00:00
8974255324 Update src/app/styles/variables.css 2026-03-10 07:40:34 +00:00
b33488f42d Update src/app/styles/base.css 2026-03-10 07:40:33 +00:00
7d368d1e7d Update src/app/page.tsx 2026-03-10 07:40:33 +00:00
d32a3c1ce1 Update src/app/layout.tsx 2026-03-10 07:40:32 +00:00
98ba573843 Merge version_2 into main
Merge version_2 into main
2026-03-10 07:30:33 +00:00
c2aaeaf9d0 Merge version_2 into main
Merge version_2 into main
2026-03-10 07:29:43 +00:00
4 changed files with 292 additions and 343 deletions

View File

@@ -8,8 +8,8 @@ const manrope = Manrope({
});
export const metadata: Metadata = {
title: "Sugarfire Smokehouse | St. Louis BBQ Legend", description:
"Authentic St. Louis BBQ smoked low and slow. Legendary brisket, pulled pork, and ribs. Visit Sugarfire for real smoke and real flavor."};
title: "Mac's Route 8 Cafe | Classic Diner Breakfast & Lunch", description:
"Mac's Route 8 Cafe: retro diner charm meets modern comfort. Breakfast favorites, lunch specials, and community connection. Open daily with a nostalgic twist."};
export default function RootLayout({
children,

View File

@@ -1,396 +1,345 @@
"use client"
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import TimelineProcessFlow from '@/components/cardStack/layouts/timelines/TimelineProcessFlow';
import FooterBase from '@/components/sections/footer/FooterBase';
import { MapPin, Clock, Users } from 'lucide-react';
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import FeatureCardTwentyFive from "@/components/sections/feature/FeatureCardTwentyFive";
import TestimonialAboutCard from "@/components/sections/about/TestimonialAboutCard";
import MetricCardFourteen from "@/components/sections/metrics/MetricCardFourteen";
import PricingCardTwo from "@/components/sections/pricing/PricingCardTwo";
import FaqDouble from "@/components/sections/faq/FaqDouble";
import ContactText from "@/components/sections/contact/ContactText";
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 (
<ThemeProvider
defaultButtonVariant="text-shift"
defaultTextAnimation="reveal-blur"
borderRadius="soft"
contentWidth="small"
sizing="mediumSizeLargeTitles"
background="grid"
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="mediumLarge"
sizing="mediumLarge"
background="none"
cardStyle="solid"
primaryButtonStyle="double-inset"
secondaryButtonStyle="solid"
headingFontWeight="light"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="bold"
>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{ name: "Menu", id: "fan-favorites" },
{ name: "Experience", id: "experience" },
{ name: "Catering", id: "catering" },
{ name: "Locations", id: "locations" },
{ name: "Order Online", id: "https://order.sugarfiresmokehouse.com" }
{ name: "Home", id: "/" },
{ name: "Menu", id: "#menu" },
{ name: "Experience", id: "#experience" },
{ name: "Contact", id: "#contact" },
{ name: "Reviews", id: "#reviews" },
]}
brandName="Sugarfire"
bottomLeftText="St. Louis BBQ Legend"
bottomRightText="hello@sugarfiresmokehouse.com"
brandName="Mac's Route 8"
bottomLeftText="A Classic Diner"
bottomRightText="(555) 123-4567"
/>
</div>
{/* Hero Section */}
<div id="hero" data-section="hero">
<HeroOverlay
title="Real Smoke. Real Flavor. No Shortcuts."
description="Authentic St. Louis BBQ smoked low and slow — tender brisket, legendary pork, and sides people drive miles for."
tag="St. Louis BBQ Legend"
imageSrc="http://img.b2bpic.net/free-photo/chef-cutting-into-pieces-grilled-lamb-steak_140725-10720.jpg?_wi=1"
imageAlt="Smoked brisket with smoke and char"
textPosition="bottom-left"
showBlur={true}
showDimOverlay={true}
<HeroBillboardCarousel
title="Welcome to Mac's Route 8 Cafe"
description="Retro charm meets modern comfort. Serving classic breakfast and lunch favorites since day one. Where nostalgia tastes delicious."
background={{ variant: "plain" }}
tag="Since '85"
buttons={[
{ text: "Order Online", href: "https://order.sugarfiresmokehouse.com" },
{ text: "View Menu", href: "#fan-favorites" }
{ text: "View Menu", href: "#menu" },
{ text: "Make a Reservation", href: "#contact" },
]}
mediaItems={[
{
imageSrc:
"https://images.unsplash.com/photo-1495521821757-a1efb6729352?w=800&h=600&fit=crop&_wi=1", imageAlt: "Classic diner interior"
},
{
imageSrc:
"https://images.unsplash.com/photo-1552566626-52f8b828add9?w=800&h=600&fit=crop", imageAlt: "Fresh breakfast spread"
},
{
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>
<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"
{/* 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={[
{ 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" }
{
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"
},
],
},
]}
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"
title="Breakfast Favorites"
description="Our most-loved dishes that keep customers coming back for more"
tag="Menu Highlights"
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>
{/* Mac's Experience */}
<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"
<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>
<div id="why-sugarfire" data-section="why-sugarfire">
{/* Why People Keep Coming Back */}
<div id="why-us" data-section="why-us">
<MetricCardFourteen
title="Why People Love Sugarfire"
tag="What Sets Us Apart"
tagAnimation="slide-up"
title="Why People Keep Coming Back to Mac's Route 8 Cafe"
tag="Our Promise"
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." }
{
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"
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"
{/* Menu Highlights Pricing Section */}
<div id="pricing" data-section="pricing">
<PricingCardTwo
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" } }
{
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"
],
},
]}
/>
</div>
<div id="locations" data-section="locations">
<TimelineProcessFlow
title="Visit Sugarfire"
description="Three legendary smokehouse locations serving St. Louis with authentic BBQ and unforgettable dining experiences."
tag="Locations & Hours"
textboxLayout="default"
animationType="slide-up"
items={[
{
id: "downtown", reverse: false,
media: (
<div className="w-full h-full bg-gradient-to-br from-amber-900 via-yellow-800 to-orange-700 flex items-center justify-center rounded-theme-capped">
<div className="text-white text-center">
<MapPin className="w-16 h-16 mx-auto mb-4" />
<p className="text-lg font-semibold">Downtown St. Louis</p>
</div>
</div>
),
content: (
<div className="space-y-4">
<div>
<h3 className="text-2xl font-semibold mb-2">Downtown Location</h3>
<p className="text-base opacity-85 mb-2">123 BBQ Lane, St. Louis, MO 63101</p>
<p className="text-sm opacity-75">(314) 555-0101</p>
</div>
<div className="flex items-start gap-3">
<Clock className="w-5 h-5 flex-shrink-0 mt-1" />
<div>
<p className="font-medium">Hours</p>
<p className="text-sm opacity-85">Mon-Thu: 10:30am - 10pm</p>
<p className="text-sm opacity-85">Fri-Sat: 10:30am - 11pm</p>
<p className="text-sm opacity-85">Sun: 11am - 9pm</p>
</div>
</div>
<p className="text-sm opacity-75 italic">Features our full menu, dining area, and catering counter</p>
</div>
)
},
{
id: "south", reverse: true,
media: (
<div className="w-full h-full bg-gradient-to-br from-amber-900 via-yellow-800 to-orange-700 flex items-center justify-center rounded-theme-capped">
<div className="text-white text-center">
<MapPin className="w-16 h-16 mx-auto mb-4" />
<p className="text-lg font-semibold">South City</p>
</div>
</div>
),
content: (
<div className="space-y-4">
<div>
<h3 className="text-2xl font-semibold mb-2">South City Location</h3>
<p className="text-base opacity-85 mb-2">456 Smokehouse Ave, St. Louis, MO 63118</p>
<p className="text-sm opacity-75">(314) 555-0202</p>
</div>
<div className="flex items-start gap-3">
<Clock className="w-5 h-5 flex-shrink-0 mt-1" />
<div>
<p className="font-medium">Hours</p>
<p className="text-sm opacity-85">Mon-Fri: 11am - 10pm</p>
<p className="text-sm opacity-85">Sat: 10am - 11pm</p>
<p className="text-sm opacity-85">Sun: 11am - 8:30pm</p>
</div>
</div>
<p className="text-sm opacity-75 italic">Casual dine-in, takeout, and delivery available</p>
</div>
)
},
{
id: "westport", reverse: false,
media: (
<div className="w-full h-full bg-gradient-to-br from-amber-900 via-yellow-800 to-orange-700 flex items-center justify-center rounded-theme-capped">
<div className="text-white text-center">
<MapPin className="w-16 h-16 mx-auto mb-4" />
<p className="text-lg font-semibold">Westport Road</p>
</div>
</div>
),
content: (
<div className="space-y-4">
<div>
<h3 className="text-2xl font-semibold mb-2">Westport Road Location</h3>
<p className="text-base opacity-85 mb-2">789 Ribs & Rolls Pkwy, St. Louis, MO 63132</p>
<p className="text-sm opacity-75">(314) 555-0303</p>
</div>
<div className="flex items-start gap-3">
<Clock className="w-5 h-5 flex-shrink-0 mt-1" />
<div>
<p className="font-medium">Hours</p>
<p className="text-sm opacity-85">Mon-Sun: 11am - 9:30pm</p>
<p className="text-sm opacity-75">Extended hours during football season</p>
</div>
</div>
<p className="text-sm opacity-75 italic">Large patio, perfect for groups and game day</p>
</div>
)
}
]}
/>
</div>
<div id="community" data-section="community">
<TimelineProcessFlow
title="Join the Sugarfire Community"
description="Connect with fellow BBQ lovers, stay updated on special events, and be part of our smokehouse family."
tag="Community Connection"
title="Menu Highlights & Pricing"
description="Discover our offerings and find your new favorite"
textboxLayout="default"
animationType="slide-up"
items={[
{
id: "smokeclub", reverse: false,
media: (
<div className="w-full h-full bg-gradient-to-br from-red-900 via-orange-800 to-yellow-700 flex items-center justify-center rounded-theme-capped">
<div className="text-white text-center">
<Users className="w-16 h-16 mx-auto mb-4" />
<p className="text-lg font-semibold">Smokehouse Club</p>
</div>
</div>
),
content: (
<div className="space-y-3">
<h3 className="text-2xl font-semibold">Join the Smokehouse Club</h3>
<p className="opacity-85">Exclusive member benefits including special discounts, early access to new menu items, and birthday desserts.</p>
<ul className="space-y-2 text-sm opacity-85">
<li className="flex gap-2"><span></span> <span>Birthday surprise dessert</span></li>
<li className="flex gap-2"><span></span> <span>15% member discount</span></li>
<li className="flex gap-2"><span></span> <span>Weekly specials via email</span></li>
<li className="flex gap-2"><span></span> <span>Early catering booking priority</span></li>
</ul>
</div>
)
},
{
id: "events", reverse: true,
media: (
<div className="w-full h-full bg-gradient-to-br from-purple-900 via-red-800 to-orange-700 flex items-center justify-center rounded-theme-capped">
<div className="text-white text-center">
<Clock className="w-16 h-16 mx-auto mb-4" />
<p className="text-lg font-semibold">Monthly Events</p>
</div>
</div>
),
content: (
<div className="space-y-3">
<h3 className="text-2xl font-semibold">Monthly BBQ Events</h3>
<p className="opacity-85">Join us for special themed nights, live music, and BBQ competitions celebrating the art of smokehouse cooking.</p>
<ul className="space-y-2 text-sm opacity-85">
<li className="flex gap-2"><span>🎵</span> <span>Live local music every Friday night</span></li>
<li className="flex gap-2"><span>🏆</span> <span>Quarterly rib-eating contests</span></li>
<li className="flex gap-2"><span>👨🍳</span> <span>Master pitmaster Q&A sessions</span></li>
<li className="flex gap-2"><span>🎉</span> <span>Seasonal celebration specials</span></li>
</ul>
</div>
)
},
{
id: "social", reverse: false,
media: (
<div className="w-full h-full bg-gradient-to-br from-blue-900 via-red-800 to-orange-700 flex items-center justify-center rounded-theme-capped">
<div className="text-white text-center">
<Users className="w-16 h-16 mx-auto mb-4" />
<p className="text-lg font-semibold">Follow & Share</p>
</div>
</div>
),
content: (
<div className="space-y-3">
<h3 className="text-2xl font-semibold">Connect on Social Media</h3>
<p className="opacity-85">Follow @SugerfireSmokeHouse for daily BBQ inspiration, behind-the-scenes smokehouse action, and community stories.</p>
<ul className="space-y-2 text-sm opacity-85">
<li className="flex gap-2"><span>📸</span> <span>Instagram: Daily smoke shots and customer features</span></li>
<li className="flex gap-2"><span>👍</span> <span>Facebook: Events, deals, and community updates</span></li>
<li className="flex gap-2"><span>🐦</span> <span>Twitter: Quick tips, specials, and BBQ talk</span></li>
<li className="flex gap-2"><span>💬</span> <span>Tag us and get featured!</span></li>
</ul>
</div>
)
}
]}
/>
</div>
<div id="newsletter" data-section="newsletter">
<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>
{/* 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">
<FooterBase
logoText="Sugarfire Smokehouse"
copyrightText="© 2025 Sugarfire Smokehouse. All rights reserved."
<FooterBaseCard
logoText="Mac's Route 8 Cafe"
columns={[
{
title: "Menu", items: [
{ label: "Meats", href: "#signature-bbq" },
{ label: "Sides", href: "#fan-favorites" },
{ label: "Desserts", href: "#fan-favorites" },
{ label: "Order Online", href: "https://order.sugarfiresmokehouse.com" }
]
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: "Company", items: [
{ label: "About Us", href: "#experience" },
{ label: "Catering", href: "#catering" },
{ label: "Locations", href: "#locations" },
{ label: "Events", href: "#community" }
]
title: "Navigation", items: [
{ label: "Menu", href: "#menu" },
{ label: "Location", href: "#location" },
{ label: "Contact", href: "#contact" },
],
},
{
title: "Connect", items: [
{ label: "Instagram", href: "https://instagram.com" },
{ label: "Facebook", href: "https://facebook.com" },
{ label: "Newsletter", href: "#newsletter" },
{ label: "Smokehouse Club", href: "#community" }
]
}
{ label: "Call Us", href: "tel:(555)123-4567" },
],
},
]}
copyrightText="© 2025 Mac's Route 8 Cafe | A Classic Diner Experience"
onPrivacyClick={() => console.log("Privacy clicked")}
/>
</div>
</ThemeProvider>

View File

@@ -11,7 +11,7 @@ html {
body {
background-color: var(--background);
color: var(--foreground);
font-family: var(--font-montserrat), sans-serif;
font-family: var(--font-lato), sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
h4,
h5,
h6 {
font-family: var(--font-montserrat), sans-serif;
font-family: var(--font-playfair-display), serif;
}

View File

@@ -10,15 +10,15 @@
--accent: #ffffff;
--background-accent: #ffffff; */
--background: #f6f0e9;
--card: #efe7dd;
--foreground: #2b180a;
--primary-cta: #b82b40;
--background: #f5f1eb;
--card: #fefbf7;
--foreground: #1a0f07;
--primary-cta: #c41e1e;
--primary-cta-text: #f5f5f5;
--secondary-cta: #efe7dd;
--secondary-cta: #fefbf7;
--secondary-cta-text: #1c1c1c;
--accent: #94877c;
--background-accent: #c6b180;
--accent: #f4d99b;
--background-accent: #5d4037;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);