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 = { export const metadata: Metadata = {
title: "Sugarfire Smokehouse | St. Louis BBQ Legend", description: title: "Mac's Route 8 Cafe | Classic Diner Breakfast & Lunch", description:
"Authentic St. Louis BBQ smoked low and slow. Legendary brisket, pulled pork, and ribs. Visit Sugarfire for real smoke and real flavor."}; "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({ export default function RootLayout({
children, children,

View File

@@ -1,396 +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 TimelineProcessFlow from '@/components/cardStack/layouts/timelines/TimelineProcessFlow'; import ContactForm from "@/components/form/ContactForm";
import FooterBase from '@/components/sections/footer/FooterBase'; import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
import { MapPin, Clock, Users } from 'lucide-react'; 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: "locations" }, { 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={[
{
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>
<div id="social-proof" data-section="social-proof"> {/* Social Proof - Customer Reviews */}
<TestimonialCardTwelve <div id="reviews" data-section="reviews">
testimonials={[ <SocialProofOne
{ id: "1", name: "Sarah Johnson", imageSrc: "http://img.b2bpic.net/free-photo/multiracial-group-young-people-taking-selfie_1139-1031.jpg", imageAlt: "Sarah Johnson" }, title="Loved by Our Community"
{ id: "2", name: "Michael Chen", imageSrc: "http://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg", imageAlt: "Michael Chen" }, description="What our regulars and first-time visitors have to say about Mac's"
{ 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" }, tag="Reviews"
{ 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" textboxLayout="default"
useInvertedBackground={false} 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={[ 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" }, title: "Classic Pancakes", description: "Fluffy, golden pancakes served with fresh berries and real maple syrup", icon: Coffee,
{ 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" }, mediaItems: [
{ 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" } {
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" animationType="slide-up"
/> title="Breakfast Favorites"
</div> description="Our most-loved dishes that keep customers coming back for more"
tag="Menu Highlights"
<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" textboxLayout="default"
useInvertedBackground={false} 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>
{/* Mac's Experience */}
<div id="experience" data-section="experience"> <div id="experience" data-section="experience">
<MetricSplitMediaAbout <TestimonialAboutCard
tag="Our Atmosphere" tag="The Mac's Experience"
title="Rustic Smokehouse Experience" title="Where Every Meal Feels Like Home"
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." description="Step into a world of warm hospitality and vintage charm"
metrics={[ subdescription="Open since 1985, serving with heart"
{ value: "20+", title: "Years of BBQ Excellence" }, icon={Users}
{ value: "50k+", title: "Happy Customers Yearly" } imageSrc="https://images.unsplash.com/photo-1495521821757-a1efb6729352?w=800&h=600&fit=crop&_wi=2"
]} imageAlt="Mac's diner interior"
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} useInvertedBackground={false}
mediaAnimation="slide-up"
/> />
</div> </div>
<div id="why-sugarfire" data-section="why-sugarfire"> {/* Why People Keep Coming Back */}
<div id="why-us" data-section="why-us">
<MetricCardFourteen <MetricCardFourteen
title="Why People Love Sugarfire" title="Why People Keep Coming Back to Mac's Route 8 Cafe"
tag="What Sets Us Apart" tag="Our Promise"
tagAnimation="slide-up"
metrics={[ 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: "1", value: "40 Years", description: "Of consistent quality, authentic recipes, and genuine hospitality"
{ 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: "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" metricsAnimation="slide-up"
useInvertedBackground={false}
/> />
</div> </div>
<div id="catering" data-section="catering"> {/* Menu Highlights Pricing Section */}
<PricingCardNine <div id="pricing" data-section="pricing">
title="Bring the Smoke to Your Event" <PricingCardTwo
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={[ 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: "1", badge: "Breakfast", badgeIcon: Coffee,
{ 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" } } 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" animationType="slide-up"
items={[ title="Menu Highlights & Pricing"
{ description="Discover our offerings and find your new favorite"
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"
textboxLayout="default" 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} 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>
{/* 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"> <div id="footer" data-section="footer">
<FooterBase <FooterBaseCard
logoText="Sugarfire Smokehouse" logoText="Mac's Route 8 Cafe"
copyrightText="© 2025 Sugarfire Smokehouse. All rights reserved."
columns={[ columns={[
{ {
title: "Menu", items: [ title: "Hours", items: [
{ label: "Meats", href: "#signature-bbq" }, { label: "Mon-Fri: 6 AM - 9 PM", href: "#location" },
{ label: "Sides", href: "#fan-favorites" }, { label: "Sat: 7 AM - 10 PM", href: "#location" },
{ label: "Desserts", href: "#fan-favorites" }, { label: "Sun: 8 AM - 8 PM", href: "#location" },
{ label: "Order Online", href: "https://order.sugarfiresmokehouse.com" } ],
]
}, },
{ {
title: "Company", items: [ title: "Navigation", items: [
{ label: "About Us", href: "#experience" }, { label: "Menu", href: "#menu" },
{ label: "Catering", href: "#catering" }, { label: "Location", href: "#location" },
{ label: "Locations", href: "#locations" }, { label: "Contact", href: "#contact" },
{ label: "Events", href: "#community" } ],
]
}, },
{ {
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: "Newsletter", href: "#newsletter" }, { label: "Call Us", href: "tel:(555)123-4567" },
{ label: "Smokehouse Club", href: "#community" } ],
] },
}
]} ]}
copyrightText="© 2025 Mac's Route 8 Cafe | A Classic Diner Experience"
onPrivacyClick={() => console.log("Privacy clicked")}
/> />
</div> </div>
</ThemeProvider> </ThemeProvider>

View File

@@ -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;
} }

View File

@@ -10,15 +10,15 @@
--accent: #ffffff; --accent: #ffffff;
--background-accent: #ffffff; */ --background-accent: #ffffff; */
--background: #f6f0e9; --background: #f5f1eb;
--card: #efe7dd; --card: #fefbf7;
--foreground: #2b180a; --foreground: #1a0f07;
--primary-cta: #b82b40; --primary-cta: #c41e1e;
--primary-cta-text: #f5f5f5; --primary-cta-text: #f5f5f5;
--secondary-cta: #efe7dd; --secondary-cta: #fefbf7;
--secondary-cta-text: #1c1c1c; --secondary-cta-text: #1c1c1c;
--accent: #94877c; --accent: #f4d99b;
--background-accent: #c6b180; --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);