Merge version_2 into main #6
195
src/app/page.tsx
195
src/app/page.tsx
@@ -1,5 +1,6 @@
|
||||
'use client';
|
||||
import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
|
||||
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
||||
@@ -10,97 +11,165 @@ import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCar
|
||||
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||||
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
import { Coffee, Utensils, Star, MapPin } from 'lucide-react';
|
||||
|
||||
export default function Page() {
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider defaultButtonVariant="hover-magnetic" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="elastic-effect"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="none"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[{ name: "Home", id: "/" }, { name: "About", id: "/about" }, { name: "Contact", id: "/contact" }]}
|
||||
<NavbarStyleCentered
|
||||
brandName="Johnny’s Diner"
|
||||
navItems={[
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Menu", id: "cuts" },
|
||||
{ name: "Why Us", id: "experience" },
|
||||
{ name: "Reviews", id: "testimonials" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
button={{
|
||||
text: "Call Now", href: "tel:+13219728276"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardCarousel
|
||||
title="Welcome to Our Platform"
|
||||
description="Experience the future of digital solutions."
|
||||
background={{ variant: "radial-gradient" }}
|
||||
mediaItems={[{ imageSrc: "https://images.unsplash.com/photo-1550745165-9bc0b252726f?q=80&w=2070&auto=format&fit=crop" }]}
|
||||
<HeroBillboardCarousel
|
||||
title="A Warm Welcome to Johnny’s"
|
||||
description="Start your day with homemade meals and the friendly, cozy comfort of our classic neighborhood diner."
|
||||
tag="Proudly Serving Casselberry"
|
||||
tagIcon={Star}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
buttons={[
|
||||
{ text: "Call to Order", href: "tel:+13219728276" },
|
||||
{ text: "Our Menu", href: "#cuts" }
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
mediaItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/front-view-yummy-pancakes-with-berries-flowers-grey_140725-129388.jpg", imageAlt: "Fluffy pancake stack" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/view-delicious-food-from-around-world_23-2151596604.jpg", imageAlt: "Classic breakfast" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<MetricSplitMediaAbout
|
||||
title="Our Impact"
|
||||
description="Driving results through innovation."
|
||||
metrics={[{ value: "100+", title: "Projects Completed" }, { value: "50+", title: "Happy Clients" }]}
|
||||
useInvertedBackground={false}
|
||||
mediaAnimation="slide-up"
|
||||
metricsAnimation="slide-up"
|
||||
<MetricSplitMediaAbout
|
||||
tag="Our Story"
|
||||
tagIcon={Utensils}
|
||||
title="Diner Classics, Home-Style Comfort"
|
||||
description="At Johnny’s Diner, we believe every meal should feel like a warm hug. We’ve been a local staple in Casselberry, serving breakfast and lunch with genuine hospitality and fresh, wholesome ingredients."
|
||||
metrics={[
|
||||
{ value: "15+", title: "Years Serving" },
|
||||
{ value: "100%", title: "Homemade" }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/two-happy-women-holding-ice-cream-amusement-park_23-2147911706.jpg"
|
||||
imageAlt="Friendly dining experience"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="cuts" data-section="cuts">
|
||||
<ProductCardTwo
|
||||
title="Our Featured Products"
|
||||
description="High quality solutions for your needs."
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
products={[{ id: "1", brand: "BrandX", name: "Pro Model", price: "$99", rating: 5, reviewCount: "10", imageSrc: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e?q=80&w=1000&auto=format&fit=crop" }]}
|
||||
<ProductCardTwo
|
||||
title="Taste the Tradition"
|
||||
description="From golden pancakes to hearty lunch favorites, our menu is filled with timeless classics made just right."
|
||||
tag="Breakfast & Lunch"
|
||||
tagIcon={Coffee}
|
||||
products={[
|
||||
{ id: "1", brand: "Morning", name: "Stack of Pancakes", price: "$9.99", rating: 5, reviewCount: "150", imageSrc: "http://img.b2bpic.net/free-photo/front-view-delicious-pancakes-with-fresh-red-strawberries-white-space_140725-95168.jpg" },
|
||||
{ id: "2", brand: "Morning", name: "Farmhouse Eggs", price: "$11.99", rating: 5, reviewCount: "210", imageSrc: "http://img.b2bpic.net/free-photo/breakfast_1339-1100.jpg" },
|
||||
{ id: "3", brand: "Afternoon", name: "Classic Burger", price: "$13.99", rating: 4.8, reviewCount: "300", imageSrc: "http://img.b2bpic.net/free-photo/serving-burger-background_1321-4523.jpg" }
|
||||
]}
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="experience" data-section="experience">
|
||||
<FeatureCardNineteen
|
||||
title="Our Experience"
|
||||
description="Years of excellence."
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[{ tag: "Innovation", title: "Expertise", subtitle: "Driven by data", description: "We leverage the latest technology to deliver results." }]}
|
||||
<FeatureCardNineteen
|
||||
title="The Johnny’s Difference"
|
||||
description="We focus on the small details that create big smiles."
|
||||
tag="Our Values"
|
||||
features={[
|
||||
{ tag: "Ingredients", title: "Farm Fresh", subtitle: "Daily Sourcing", description: "Locally sourced produce for authentic flavor.", imageSrc: "http://img.b2bpic.net/free-photo/sliced-cucumber-cutting-board-with-tomatoes-lettuce-lemon-top-view-dark-wooden-background_176474-3688.jpg" },
|
||||
{ tag: "Service", title: "Heartfelt Hospitality", subtitle: "Like Family", description: "Our team welcomes every guest with warmth and care.", imageSrc: "http://img.b2bpic.net/free-photo/bartender-working-club_23-2150497614.jpg" },
|
||||
{ tag: "Comfort", title: "Cozy Vibes", subtitle: "Relaxed Setting", description: "Come as you are and stay as long as you like.", imageSrc: "http://img.b2bpic.net/free-photo/hand-holding-dish_23-2147680624.jpg" }
|
||||
]}
|
||||
textboxLayout="default"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardTwo
|
||||
title="Meet Our Team"
|
||||
description="The minds behind the magic."
|
||||
animationType="slide-up"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
members={[{ id: "1", name: "John Doe", role: "CEO", description: "Leading with passion." }]}
|
||||
<TeamCardTwo
|
||||
title="Meet Our Friendly Team"
|
||||
description="The hardworking people who make your day a little brighter."
|
||||
tag="The Crew"
|
||||
members={[
|
||||
{ id: "1", name: "Johnny Miller", role: "Founder", description: "Bringing over 15 years of diner expertise to your table.", imageSrc: "http://img.b2bpic.net/free-photo/male-jeweler-working-shop_23-2150914243.jpg" },
|
||||
{ id: "2", name: "Sarah D.", role: "Hospitality Lead", description: "The smiling face that greets you every single morning.", imageSrc: "http://img.b2bpic.net/free-photo/front-view-business-owner-working_23-2148366612.jpg" }
|
||||
]}
|
||||
gridVariant="two-columns-alternating-heights"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSix
|
||||
title="Client Reviews"
|
||||
description="See what others have to say."
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[{ id: "1", name: "Jane Smith", handle: "@janesmith", testimonial: "Fantastic service!" }]}
|
||||
<TestimonialCardSix
|
||||
title="Kind Words from Locals"
|
||||
description="We're honored to be a part of the Casselberry community."
|
||||
tag="Community Love"
|
||||
testimonials={[
|
||||
{ id: "1", name: "Linda R.", handle: "@Regular", testimonial: "The atmosphere is always welcoming and the food is so consistent. Love it!", imageSrc: "http://img.b2bpic.net/free-photo/vertical-photo-beautiful-lady-sitting-restaurant-smiling-camera_114579-92383.jpg" },
|
||||
{ id: "2", name: "Tom B.", handle: "@Neighbor", testimonial: "My favorite weekend spot. The staff are genuinely nice people.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-waitress-holding-plate-with-muffin_107420-12322.jpg" }
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
title="Common Questions"
|
||||
description="We're here to help."
|
||||
faqsAnimation="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[{ id: "1", title: "How do I start?", content: "Simply sign up for an account." }]}
|
||||
<FaqSplitMedia
|
||||
title="Common Questions"
|
||||
description="Everything you need to know about Johnny’s."
|
||||
faqs={[
|
||||
{ id: "1", title: "Where can I find you?", content: "Located centrally in Casselberry, FL." },
|
||||
{ id: "2", title: "Are you open daily?", content: "Yes, we’re here to serve you every day of the week!" },
|
||||
{ id: "3", title: "How do I place an order?", content: "Just give us a quick ring at (321) 972-8276!" }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/pouring-hot-coffee-drink_53876-30609.jpg"
|
||||
faqsAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
tag="Contact Us"
|
||||
title="Let's Connect"
|
||||
description="Drop us a message."
|
||||
background={{ variant: "radial-gradient" }}
|
||||
useInvertedBackground={false}
|
||||
<ContactCenter
|
||||
tag="Connect"
|
||||
title="Come See Us Soon"
|
||||
description="Whether it’s for a quick coffee or a full family lunch, we can’t wait to have you."
|
||||
tagIcon={MapPin}
|
||||
background={{ variant: "radial-gradient" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
logoText="Webild"
|
||||
columns={[{ title: "Links", items: [{ label: "Home", href: "/" }] }]}
|
||||
<FooterBase
|
||||
logoText="Johnny’s Diner"
|
||||
copyrightText="© 2025 Johnny’s Diner. Made with warmth."
|
||||
columns={[
|
||||
{ title: "Visit", items: [{ label: "500 FL-436, Casselberry", href: "#" }, { label: "Call (321) 972-8276", href: "tel:+13219728276" }] },
|
||||
{ title: "Menu", items: [{ label: "Breakfast", href: "#cuts" }, { label: "Lunch", href: "#cuts" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
|
||||
Reference in New Issue
Block a user