Merge version_3 into main

Merge version_3 into main
This commit was merged in pull request #10.
This commit is contained in:
2026-03-10 07:51:29 +00:00
3 changed files with 182 additions and 160 deletions

View File

@@ -1,8 +1,15 @@
import type { Metadata } from "next";
import "./styles/globals.css";
import { Manrope } from "next/font/google";
import "./globals.css";
const manrope = Manrope({
variable: "--font-manrope", subsets: ["latin"],
weight: ["200", "300", "400", "500", "600", "700", "800"],
});
export const metadata: Metadata = {
title: "Mac's Route 8 Cafe", description: "Welcome to Mac's Route 8 Cafe - Where Retro Diner Charm Meets Modern Comfort. Serving up nostalgia and great food since day one."};
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,
@@ -10,8 +17,17 @@ export default function RootLayout({
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>{children}
<html lang="en" suppressHydrationWarning>
<body className={`${manrope.variable}`}>
<ServiceWrapper>
<Tag />
{children}
</ServiceWrapper>
<script
async
src="https://cdn.jsdelivr.net/npm/tsparticles-slim@2.12.0/tsparticles.slim.bundle.min.js"
></script>
<script
dangerouslySetInnerHTML={{
__html: `
@@ -1382,3 +1398,11 @@ export default function RootLayout({
</html>
);
}
function ServiceWrapper({ children }: { children: React.ReactNode }) {
return <>{children}</>;
}
function Tag() {
return null;
}

View File

@@ -1,317 +1,315 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
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 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, Sparkles, CheckCircle } from "lucide-react";
import { Coffee, Clock, MapPin, Heart, Users, Utensils, Star } from "lucide-react";
export default function Home() {
return (
<ThemeProvider
defaultButtonVariant="expand-hover"
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="medium"
sizing="medium"
contentWidth="mediumLarge"
sizing="mediumLarge"
background="none"
cardStyle="solid"
primaryButtonStyle="shadow"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="bold"
>
<div id="nav" data-section="nav">
<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>
<NavbarStyleFullscreen
navItems={[
{ name: "Home", id: "/" },
{ name: "Menu", id: "#menu" },
{ name: "Experience", id: "#experience" },
{ name: "Contact", id: "#contact" },
{ name: "Reviews", id: "#reviews" },
]}
brandName="Mac's Route 8"
bottomLeftText="A Classic Diner"
bottomRightText="(555) 123-4567"
/>
{/* Hero Section */}
<div id="hero" data-section="hero">
<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"
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: "View Menu", href: "#menu" },
{ text: "Make a Reservation", href: "#contact" },
]}
mediaItems={[
{
imageSrc:
"https://images.unsplash.com/photo-1554118811-1e0d58224f24?w=800&h=600&fit=crop", imageAlt: "Retro diner counter"
},
"https://images.unsplash.com/photo-1495521821757-a1efb6729352?w=800&h=600&fit=crop", imageAlt: "Classic diner interior"},
{
imageSrc:
"https://images.unsplash.com/photo-1495521821757-a1efb6729352?w=800&h=600&fit=crop", imageAlt: "Classic breakfast plate"
},
"https://images.unsplash.com/photo-1552566626-52f8b828add9?w=800&h=600&fit=crop", imageAlt: "Fresh breakfast spread"},
{
imageSrc:
"https://images.unsplash.com/photo-1568901346375-23c9450c58cd?w=800&h=600&fit=crop", imageAlt: "Vintage diner aesthetic"
},
"https://images.unsplash.com/photo-1567521464027-f127ff144326?w=800&h=600&fit=crop", imageAlt: "Vintage diner vibes"},
{
imageSrc:
"https://images.unsplash.com/photo-1567627941487-c90e5089e586?w=800&h=600&fit=crop", imageAlt: "Fresh pastries and coffee"
},
"https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=800&h=600&fit=crop", imageAlt: "Delicious comfort food"},
{
imageSrc:
"https://images.unsplash.com/photo-1493857671505-72967e2e2760?w=800&h=600&fit=crop", imageAlt: "Warm diner interior"
},
]}
buttons={[
{ text: "View Menu", href: "#menu" },
{ text: "Reserve Table", href: "#contact" },
"https://images.unsplash.com/photo-1555939594-58d7cb561341?w=800&h=600&fit=crop", imageAlt: "Warm hospitality"},
]}
/>
</div>
<div id="socialProof" data-section="socialProof">
{/* Social Proof - Customer Reviews */}
<div id="reviews" data-section="reviews">
<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"
description="What our regulars and first-time visitors have to say about Mac's"
tag="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}
"★★★★★ Best breakfast in town!", "★★★★★ Authentic diner experience", "★★★★★ Amazing service & quality", "★★★★★ Worth the visit every time", "★★★★★ Family favorite for 20 years", "★★★★★ Classic comfort food done right"]}
speed={40}
showCard={true}
/>
</div>
{/* Breakfast Favorites Grid */}
<div id="menu" data-section="menu">
<FeatureCardTwentyFive
features={[
{
title: "The Classic Pancake Stack", description: "Fluffy buttermilk pancakes with butter and your choice of syrup", icon: Coffee,
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=400&h=300&fit=crop", imageAlt: "Pancakes"
},
"https://images.unsplash.com/photo-1567620905732-2d1ec7ab7445?w=500&h=400&fit=crop", imageAlt: "Classic pancakes"},
{
imageSrc:
"https://images.unsplash.com/photo-1559827260-dc66d52bef19?w=400&h=300&fit=crop", imageAlt: "Breakfast spread"
},
"https://images.unsplash.com/photo-1484723091739-37cacfe382d1?w=500&h=400&fit=crop", imageAlt: "Waffle special"},
],
},
{
title: "Hearty Breakfast Platter", description: "Eggs any way you like them with hash browns, toast, and bacon or sausage", icon: Heart,
title: "Country Breakfast", description: "Eggs your way, thick-cut bacon, hash browns, and homemade toast", icon: Utensils,
mediaItems: [
{
imageSrc:
"https://images.unsplash.com/photo-1585269654839-e7b99c4f5a9d?w=400&h=300&fit=crop", imageAlt: "Breakfast platter"
},
"https://images.unsplash.com/photo-1525351484163-7529414344d7?w=500&h=400&fit=crop", imageAlt: "Country breakfast plate"},
{
imageSrc:
"https://images.unsplash.com/photo-1595427707802-0b370d5c86b8?w=400&h=300&fit=crop", imageAlt: "Eggs and bacon"
},
"https://images.unsplash.com/photo-1509042239860-f550ce710b93?w=500&h=400&fit=crop", imageAlt: "Eggs and toast"},
],
},
{
title: "Homemade Biscuits & Gravy", description: "Fresh-baked biscuits smothered in our signature creamy sausage gravy", icon: Sparkles,
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-1585518419759-a355f54a6bc5?w=400&h=300&fit=crop", imageAlt: "Biscuits and gravy"
},
"https://images.unsplash.com/photo-1541519227354-08fa5d50c44d?w=500&h=400&fit=crop", imageAlt: "Delicious omelet"},
{
imageSrc:
"https://images.unsplash.com/photo-1535920527894-b65b4c9d5b4c?w=400&h=300&fit=crop", imageAlt: "Fresh baked goods"
},
"https://images.unsplash.com/photo-1568901346375-23c9450c58cd?w=500&h=400&fit=crop", imageAlt: "Omelet plating"},
],
},
{
title: "The Mac's Special Omelet", description: "Fluffy three-egg omelet with cheese, vegetables, and your protein of choice", icon: CheckCircle,
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-1541519227354-08fa5d50c44d?w=400&h=300&fit=crop", imageAlt: "Cheese omelet"
},
"https://images.unsplash.com/photo-1565299585323-38d6b0865b47?w=500&h=400&fit=crop", imageAlt: "Crispy hash browns"},
{
imageSrc:
"https://images.unsplash.com/photo-1517668808822-9ebb02ae2a0e?w=400&h=300&fit=crop", imageAlt: "Gourmet eggs"
},
"https://images.unsplash.com/photo-1612874742237-415c069381bd?w=500&h=400&fit=crop", imageAlt: "Loaded hash browns"},
],
},
]}
animationType="slide-up"
title="Breakfast Favorites"
description="From classic comfort food to modern takes on breakfast tradition"
description="Our most-loved dishes that keep customers coming back for more"
tag="Menu Highlights"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
{/* Mac's Experience */}
<div id="experience" data-section="experience">
<TestimonialAboutCard
tag="The Mac's Experience"
title="More Than Just Breakfast, It's a Feeling"
description="A Family Affair"
subdescription="Open to all who seek warmth, connection, and great food"
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}
videoSrc="https://videos.pexels.com/video-files/3407007/3407007-sd_640_360_30fps.mp4"
videoAriaLabel="Cozy diner interior"
mediaAnimation="none"
imageSrc="https://images.unsplash.com/photo-1495521821757-a1efb6729352?w=800&h=600&fit=crop"
imageAlt="Mac's diner interior"
useInvertedBackground={false}
mediaAnimation="slide-up"
/>
</div>
<div id="whyReturn" data-section="whyReturn">
{/* Why People Keep Coming Back */}
<div id="why-us" data-section="why-us">
<MetricCardFourteen
title="Why People Keep Coming Back to Mac's"
title="Why People Keep Coming Back to Mac's Route 8 Cafe"
tag="Our Promise"
metrics={[
{
id: "1", value: "25+", description: "Years of serving our community with authentic diner goodness"
},
id: "1", value: "40 Years", description: "Of consistent quality, authentic recipes, and genuine hospitality"},
{
id: "2", value: "100%", description: "Fresh ingredients and recipes made from scratch daily"
},
id: "2", value: "Family Made", description: "Every dish prepared with care using fresh, local ingredients"},
{
id: "3", value: "1000s", description: "Happy regulars who consider Mac's their home away from home"
},
id: "3", value: "Community Fueled", description: "Built on relationships and memories created over countless meals"},
{
id: "4", value: "24/7", description: "Consistent quality and hospitality with every visit"
},
id: "4", value: "Always Fresh", description: "Nothing frozen, nothing rushed—just real food, real slow"},
]}
metricsAnimation="none"
useInvertedBackground={false}
metricsAnimation="slide-up"
/>
</div>
<div id="location" data-section="location">
<FeatureCardTwentyFive
features={[
{/* Menu Highlights Pricing Section */}
<div id="pricing" data-section="pricing">
<PricingCardTwo
plans={[
{
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"
},
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"],
},
{
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"
},
id: "2", badge: "Lunch", badgeIcon: Utensils,
price: "$10-15", subtitle: "Midday Comfort", buttons: [
{ text: "Order Now", href: "#contact" },
{ text: "View Full Menu", href: "#menu" },
],
features: [
"Classic burgers & sandwiches", "Homemade soups", "Side salads or fries", "Served 11 AM - 5 PM"],
},
{
id: "3", badge: "Specials", badgeIcon: Star,
price: "$12-18", subtitle: "Daily Chef Creations", buttons: [
{ text: "Order Now", href: "#contact" },
{ text: "View Full Menu", href: "#menu" },
],
features: [
"Rotating daily specials", "Seasonal highlights", "Family portions available", "Ask your server for details"],
},
]}
animationType="slide-up"
title="Location & Hours"
description="Find us on Route 8 - Where memories are made over great food"
tag="Visit Us"
title="Menu Highlights & Pricing"
description="Discover our offerings and find your new favorite"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="community" data-section="community">
<TestimonialAboutCard
tag="Community Connection"
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}
videoSrc="https://videos.pexels.com/video-files/3605095/3605095-sd_640_360_30fps.mp4"
videoAriaLabel="Community gathering"
mediaAnimation="none"
{/* 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>
<div id="contact" data-section="contact">
{/* Community Connection */}
<div id="community" data-section="community">
<ContactText
text="Join Our Mac's Family - Get Updates on Menu Specials, Events, and Community News"
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: "Call Us", href: "tel:5551234567" },
{ text: "Visit Us", href: "#location" },
{ 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 Connected"
description="Subscribe to our newsletter for special offers, new menu items, and community updates straight to your inbox"
title="Stay Updated"
description="Get the latest specials, events, and community news delivered to your inbox"
tag="Newsletter"
tagIcon={Coffee}
inputPlaceholder="Enter your email"
inputPlaceholder="Your email address"
buttonText="Subscribe"
termsText="We respect your privacy. Unsubscribe anytime."
onSubmit={(email) => console.log("Subscribed:", email)}
termsText="We respect your inbox. Unsubscribe anytime. Specials sent weekly."
centered={true}
onSubmit={(email) => console.log("Newsletter signup:", email)}
/>
</div>
{/* Footer */}
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="Mac's Route 8"
logoText="Mac's Route 8 Cafe"
columns={[
{
title: "Hours", items: [
{ label: "Monday - Friday", href: "#" },
{ label: "6am - 10pm", href: "#" },
{ label: "Weekends", href: "#" },
{ label: "7am - 11pm", href: "#" },
{ 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: "Quick Links", items: [
title: "Navigation", items: [
{ label: "Menu", href: "#menu" },
{ label: "Location", href: "#location" },
{ label: "Contact", href: "#contact" },
{ label: "Catering", href: "#" },
],
},
{
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: "#" },
title: "Connect", items: [
{ label: "Instagram", href: "https://instagram.com" },
{ label: "Facebook", href: "https://facebook.com" },
{ label: "Call Us", href: "tel:(555)123-4567" },
],
},
]}
copyrightText="© 2025 Mac's Route 8 Cafe. Retro Diner. Modern Comfort."
onPrivacyClick={() => console.log("Privacy policy clicked")}
copyrightText="© 2025 Mac's Route 8 Cafe | A Classic Diner Experience"
onPrivacyClick={() => console.log("Privacy clicked")}
/>
</div>
</ThemeProvider>

View File

@@ -10,15 +10,15 @@
--accent: #ffffff;
--background-accent: #ffffff; */
--background: #faf5f0;
--card: #f3ede2;
--foreground: #1a0f08;
--primary-cta: #d92727;
--background: #f5f1eb;
--card: #fefbf7;
--foreground: #1a0f07;
--primary-cta: #c41e1e;
--primary-cta-text: #f5f5f5;
--secondary-cta: #1a2555;
--secondary-cta: #fefbf7;
--secondary-cta-text: #1c1c1c;
--accent: #f4b860;
--background-accent: #8b5a3c;
--accent: #f4d99b;
--background-accent: #5d4037;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);