bender/38b01b7a-25ba-45f2-be22-b717c1a23967
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_3 into main #6

Merged
bender merged 4 commits from version_3 into main 2026-03-10 07:40:38 +00:00
Conversation 0 Commits 4 Files Changed 4 +248 -349
4 changed files with 248 additions and 349 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/app/layout.tsx
View File

@@ -1,15 +1,19 @@
import type { Metadata } from "next";
import { Manrope } from "next/font/google";
import { Playfair_Display, Lato } from "next/font/google";
import "./globals.css";
const manrope = Manrope({
variable: "--font-manrope", subsets: ["latin"],
weight: ["200", "300", "400", "500", "600", "700", "800"],
const playfairDisplay = Playfair_Display({
variable: "--font-playfair-display", subsets: ["latin"],
weight: ["400", "500", "600", "700", "800", "900"],
});
const lato = Lato({
variable: "--font-lato", subsets: ["latin"],
weight: ["100", "300", "400", "700", "900"],
});
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 | Retro Diner Experience", description: "Welcome to Mac's Route 8 Cafe - Where retro diner charm meets modern comfort. Enjoy classic breakfast favorites and warm hospitality."};
export default function RootLayout({
children,
@@ -18,7 +22,7 @@ export default function RootLayout({
}) {
return (
<html lang="en" suppressHydrationWarning>
<body className={`${manrope.variable}`}>
<body className={`${playfairDisplay.variable} ${lato.variable}`}>
<ServiceWrapper>
<Tag />
{children}

561
src/app/page.tsx
View File

@@ -1,396 +1,291 @@
"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 { ThemeProvider } from "@/components/theme/ThemeProvider";
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 PricingCardTwo from "@/components/sections/pricing/PricingCardTwo";
import MetricCardFourteen from "@/components/sections/metrics/MetricCardFourteen";
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, Sparkles, CheckCircle } 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="expand-hover"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="medium"
sizing="medium"
background="none"
cardStyle="solid"
primaryButtonStyle="double-inset"
secondaryButtonStyle="solid"
headingFontWeight="light"
primaryButtonStyle="shadow"
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" }
]}
brandName="Sugarfire"
bottomLeftText="St. Louis BBQ Legend"
bottomRightText="hello@sugarfiresmokehouse.com"
/>
</div>
<NavbarStyleFullscreen
navItems={[
{ name: "Home", id: "/" },
{ name: "Menu", id: "menu" },
{ name: "Hours & Location", id: "location" },
{ name: "Community", id: "community" },
{ name: "Contact", id: "contact" },
]}
brandName="Mac's Route 8"
bottomLeftText="Open Daily"
bottomRightText="(555) 123-4567"
/>
<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
background={{ variant: "plain" }}
title="Welcome to Mac's Route 8 Cafe"
description="Where Retro Diner Charm Meets Modern Comfort. Serving up nostalgia and great food since day one."
tag="Est. Retro Diner"
mediaItems={[
{
imageSrc:
"https://images.unsplash.com/photo-1554118811-1e0d58224f24?w=800&h=600&fit=crop", imageAlt: "Retro diner counter"},
{
imageSrc:
"https://images.unsplash.com/photo-1495521821757-a1efb6729352?w=800&h=600&fit=crop", imageAlt: "Classic breakfast plate"},
{
imageSrc:
"https://images.unsplash.com/photo-1568901346375-23c9450c58cd?w=800&h=600&fit=crop", imageAlt: "Vintage diner aesthetic"},
{
imageSrc:
"https://images.unsplash.com/photo-1567627941487-c90e5089e586?w=800&h=600&fit=crop", imageAlt: "Fresh pastries and coffee"},
{
imageSrc:
"https://images.unsplash.com/photo-1493857671505-72967e2e2760?w=800&h=600&fit=crop", imageAlt: "Warm diner interior"},
]}
buttons={[
{ text: "Order Online", href: "https://order.sugarfiresmokehouse.com" },
{ text: "View Menu", href: "#fan-favorites" }
{ text: "View Menu", href: "#menu" },
{ text: "Reserve Table", href: "#contact" },
]}
/>
</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"
<div id="socialProof" data-section="socialProof">
<SocialProofOne
title="Loved by Our Community"
description="Guests keep coming back for the food, the atmosphere, and the memories we create together"
tag="Customer Reviews"
textboxLayout="default"
useInvertedBackground={false}
names={[
"★★★★★ Best breakfast spot in town!", "★★★★★ The coffee is always hot and the smiles are genuine.", "★★★★★ A true piece of Americana. Love this place!", "★★★★★ Classic diner vibes and amazing food."]}
speed={35}
showCard={true}
/>
</div>
<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: "The Classic Pancake Stack", description: "Fluffy buttermilk pancakes with butter and your choice of syrup", icon: Coffee,
mediaItems: [
{
imageSrc:
"https://images.unsplash.com/photo-1567620905732-2d1ec7ab7445?w=400&h=300&fit=crop", imageAlt: "Pancakes"},
{
imageSrc:
"https://images.unsplash.com/photo-1559827260-dc66d52bef19?w=400&h=300&fit=crop", imageAlt: "Breakfast spread"},
],
},
{
title: "Hearty Breakfast Platter", description: "Eggs any way you like them with hash browns, toast, and bacon or sausage", icon: Heart,
mediaItems: [
{
imageSrc:
"https://images.unsplash.com/photo-1585269654839-e7b99subsidiary4f5a9d?w=400&h=300&fit=crop", imageAlt: "Breakfast platter"},
{
imageSrc:
"https://images.unsplash.com/photo-1595427707802-0b370d5c86b8?w=400&h=300&fit=crop", imageAlt: "Eggs and bacon"},
],
},
{
title: "Homemade Biscuits & Gravy", description: "Fresh-baked biscuits smothered in our signature creamy sausage gravy", icon: Sparkles,
mediaItems: [
{
imageSrc:
"https://images.unsplash.com/photo-1585518419759-a355f54a6bc5?w=400&h=300&fit=crop", imageAlt: "Biscuits and gravy"},
{
imageSrc:
"https://images.unsplash.com/photo-1535920527894-b65b4c9d5b4c?w=400&h=300&fit=crop", imageAlt: "Fresh baked goods"},
],
},
{
title: "The Mac's Special Omelet", description: "Fluffy three-egg omelet with cheese, vegetables, and your protein of choice", icon: CheckCircle,
mediaItems: [
{
imageSrc:
"https://images.unsplash.com/photo-1541519227354-08fa5d50c44d?w=400&h=300&fit=crop", imageAlt: "Cheese omelet"},
{
imageSrc:
"https://images.unsplash.com/photo-1517668808822-9ebb02ae2a0e?w=400&h=300&fit=crop", imageAlt: "Gourmet eggs"},
],
},
]}
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="From classic comfort food to modern takes on breakfast tradition"
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>
<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="More Than Just Breakfast, It's a Feeling"
description="A Family Affair"
subdescription="Open to all who seek warmth, connection, and great food"
icon={Users}
imageSrc="https://images.unsplash.com/photo-1559631079-641ba2e37565?w=600&h=600&fit=crop"
imageAlt="Cozy diner interior"
useInvertedBackground={false}
/>
</div>
<div id="why-sugarfire" data-section="why-sugarfire">
<div id="whyReturn" data-section="whyReturn">
<MetricCardFourteen
title="Why People Love Sugarfire"
tag="What Sets Us Apart"
tagAnimation="slide-up"
title="Why People Keep Coming Back to Mac's"
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: "25+", description: "Years of serving our community with authentic diner goodness"},
{
id: "2", value: "100%", description: "Fresh ingredients and recipes made from scratch daily"},
{
id: "3", value: "1000s", description: "Happy regulars who consider Mac's their home away from home"},
{
id: "4", value: "24/7", description: "Consistent quality and hospitality with every visit"},
]}
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"
<div id="location" data-section="location">
<FeatureCardTwentyFive
features={[
{
title: "Route 8 Main Location", description: "Our flagship diner with vintage charm and modern comfort", icon: MapPin,
mediaItems: [
{
imageSrc:
"https://images.unsplash.com/photo-1552566626-52f8b828add9?w=400&h=300&fit=crop", imageAlt: "Exterior storefront"},
{
imageSrc:
"https://images.unsplash.com/photo-1568901346375-23c9450c58cd?w=400&h=300&fit=crop", imageAlt: "Interior seating"},
],
},
{
title: "Hours & Reservations", description: "Open 6am - 10pm Daily | Walk-ins Welcome | Groups Welcome", icon: Clock,
mediaItems: [
{
imageSrc:
"https://images.unsplash.com/photo-1554118811-1e0d58224f24?w=400&h=300&fit=crop", imageAlt: "Early morning service"},
{
imageSrc:
"https://images.unsplash.com/photo-1567521464027-f127ff144326?w=400&h=300&fit=crop", imageAlt: "Evening dining"},
],
},
]}
animationType="slide-up"
title="Location & Hours"
description="Find us on Route 8 - Where memories are made over great food"
tag="Visit Us"
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="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."
<TestimonialAboutCard
tag="Community Connection"
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>
)
}
title="More Than a Diner, We're a Gathering Place"
description="Local Events & Gatherings"
subdescription="Host your celebrations, meetings, and memories at Mac's"
icon={Heart}
imageSrc="https://images.unsplash.com/photo-1517457373614-b7152f800fd1?w=600&h=600&fit=crop"
imageAlt="Community gathering"
useInvertedBackground={false}
/>
</div>
<div id="contact" data-section="contact">
<ContactText
text="Join Our Mac's Family - Get Updates on Menu Specials, Events, and Community News"
animationType="entrance-slide"
buttons={[
{ text: "Call Us", href: "tel:5551234567" },
{ text: "Visit Us", href: "#location" },
]}
background={{ variant: "plain" }}
useInvertedBackground={false}
/>
</div>
<div id="newsletter" data-section="newsletter">
<ContactSplit
<ContactForm
title="Stay Connected"
description="Subscribe to our newsletter for special offers, new menu items, and community updates straight to your inbox"
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"
tagIcon={Coffee}
inputPlaceholder="Enter your email"
buttonText="Join the Club"
termsText="We respect your privacy. Unsubscribe anytime. Birthday desserts for members only!"
buttonText="Subscribe"
termsText="We respect your privacy. Unsubscribe anytime."
onSubmit={(email) => console.log("Subscribed:", email)}
centered={true}
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
logoText="Sugarfire Smokehouse"
copyrightText="© 2025 Sugarfire Smokehouse. All rights reserved."
<FooterBaseCard
logoText="Mac's Route 8"
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: "Monday - Friday", href: "#" },
{ label: "6am - 10pm", href: "#" },
{ label: "Weekends", href: "#" },
{ label: "7am - 11pm", href: "#" },
],
},
{
title: "Company", items: [
{ label: "About Us", href: "#experience" },
{ label: "Catering", href: "#catering" },
{ label: "Locations", href: "#locations" },
{ label: "Events", href: "#community" }
]
title: "Quick Links", items: [
{ label: "Menu", href: "#menu" },
{ label: "Location", href: "#location" },
{ label: "Contact", href: "#contact" },
{ label: "Catering", href: "#" },
],
},
{
title: "Connect", items: [
{ label: "Instagram", href: "https://instagram.com" },
{ label: "Facebook", href: "https://facebook.com" },
{ label: "Newsletter", href: "#newsletter" },
{ label: "Smokehouse Club", href: "#community" }
]
}
title: "Community", items: [
{ label: "Events", href: "#community" },
{ label: "Local Favorites", href: "#" },
{ label: "Reviews", href: "#" },
{ label: "Social Media", href: "#" },
],
},
{
title: "Contact", items: [
{ label: "Phone", href: "tel:5551234567" },
{ label: "Email", href: "mailto:hello@macsroute8.com" },
{ label: "Route 8 Main", href: "#" },
{ label: "Catering Info", href: "#" },
],
},
]}
copyrightText="© 2025 Mac's Route 8 Cafe. Retro Diner. Modern Comfort."
onPrivacyClick={() => console.log("Privacy policy clicked")}
/>
</div>
</ThemeProvider>

4
src/app/styles/base.css
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;
}

14
src/app/styles/variables.css
View File

@@ -10,15 +10,15 @@
--accent: #ffffff;
--background-accent: #ffffff; */
--background: #f6f0e9;
--card: #efe7dd;
--foreground: #2b180a;
--primary-cta: #b82b40;
--background: #faf5f0;
--card: #f3ede2;
--foreground: #1a0f08;
--primary-cta: #d92727;
--primary-cta-text: #f5f5f5;
--secondary-cta: #efe7dd;
--secondary-cta: #1a2555;
--secondary-cta-text: #1c1c1c;
--accent: #94877c;
--background-accent: #c6b180;
--accent: #f4b860;
--background-accent: #8b5a3c;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);