Merge version_2 into main
Merge version_2 into main
This commit was merged in pull request #4.
This commit is contained in:
1435
src/app/layout.tsx
1435
src/app/layout.tsx
File diff suppressed because it is too large
Load Diff
196
src/app/page.tsx
196
src/app/page.tsx
@@ -10,7 +10,9 @@ import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaA
|
||||
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';
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -32,7 +34,7 @@ export default function LandingPage() {
|
||||
{ name: "Menu", id: "fan-favorites" },
|
||||
{ name: "Experience", id: "experience" },
|
||||
{ name: "Catering", id: "catering" },
|
||||
{ name: "Locations", id: "contact" },
|
||||
{ name: "Locations", id: "locations" },
|
||||
{ name: "Order Online", id: "https://order.sugarfiresmokehouse.com" }
|
||||
]}
|
||||
brandName="Sugarfire"
|
||||
@@ -160,7 +162,189 @@ export default function LandingPage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<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"
|
||||
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"
|
||||
@@ -194,16 +378,16 @@ export default function LandingPage() {
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "#experience" },
|
||||
{ label: "Catering", href: "#catering" },
|
||||
{ label: "Locations", href: "#" },
|
||||
{ label: "Careers", href: "#" }
|
||||
{ label: "Locations", href: "#locations" },
|
||||
{ label: "Events", href: "#community" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Connect", items: [
|
||||
{ label: "Instagram", href: "https://instagram.com" },
|
||||
{ label: "Facebook", href: "https://facebook.com" },
|
||||
{ label: "Contact", href: "#contact" },
|
||||
{ label: "Newsletter", href: "#contact" }
|
||||
{ label: "Newsletter", href: "#newsletter" },
|
||||
{ label: "Smokehouse Club", href: "#community" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #f5f5f5;
|
||||
--card: #ffffff;
|
||||
--foreground: #1c1c1c;
|
||||
--primary-cta: #1f514c;
|
||||
--background: #f6f0e9;
|
||||
--card: #efe7dd;
|
||||
--foreground: #2b180a;
|
||||
--primary-cta: #b82b40;
|
||||
--primary-cta-text: #f5f5f5;
|
||||
--secondary-cta: #ffffff;
|
||||
--secondary-cta: #efe7dd;
|
||||
--secondary-cta-text: #1c1c1c;
|
||||
--accent: #35c18b;
|
||||
--background-accent: #ecebe4;
|
||||
--accent: #94877c;
|
||||
--background-accent: #c6b180;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user