111 lines
4.5 KiB
TypeScript
111 lines
4.5 KiB
TypeScript
'use client';
|
|
|
|
import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import HeroCentered from '@/components/sections/hero/HeroCentered';
|
|
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
|
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
|
import SplitAbout from '@/components/sections/about/SplitAbout';
|
|
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
|
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
|
import { Star, MapPin } from 'lucide-react';
|
|
|
|
const navItems = [
|
|
{ name: 'Home', id: '/' },
|
|
{ name: 'Menu', id: '/menu' },
|
|
{ name: 'About', id: '/about' },
|
|
{ name: 'Contact', id: '/contact' }
|
|
];
|
|
|
|
export default function Home() {
|
|
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"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered navItems={navItems} brandName="CafeFlow" />
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroCentered
|
|
title="Experience the Art of Coffee"
|
|
description="Hand-roasted beans, expert brewing, and a cozy atmosphere await you."
|
|
background={{ variant: "gradient-bars" }}
|
|
avatars={[{ src: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&q=80&w=200", alt: "User" }]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="menu" data-section="menu">
|
|
<ProductCardThree
|
|
title="Signature Menu"
|
|
description="Our most loved beverages and treats."
|
|
products={[
|
|
{ id: "1", name: "Espresso", price: "$3.50", imageSrc: "https://images.unsplash.com/photo-1510591509098-f4fdc6d0ff04?auto=format&fit=crop&q=80&w=400" },
|
|
{ id: "2", name: "Latte", price: "$4.50", imageSrc: "https://images.unsplash.com/photo-1570968915860-54da5c3a416b?auto=format&fit=crop&q=80&w=400" },
|
|
{ id: "3", name: "Cappuccino", price: "$4.25", imageSrc: "https://images.unsplash.com/photo-1534778101976-62847bb82c03?auto=format&fit=crop&q=80&w=400" }
|
|
]}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardOne
|
|
title="Loved by Locals"
|
|
description="See what our community has to say."
|
|
testimonials={[
|
|
{ id: "1", name: "Sarah J.", role: "Designer", company: "Creative Studio", rating: 5, imageSrc: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&q=80&w=200" },
|
|
{ id: "2", name: "Mark T.", role: "Developer", company: "Tech Solutions", rating: 5, imageSrc: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&q=80&w=200" }
|
|
]}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<SplitAbout
|
|
title="Our Story"
|
|
description="We believe in sustainable sourcing and the perfect roast."
|
|
bulletPoints={[
|
|
{ title: "Ethical", description: "Fair trade sourcing.", icon: Star },
|
|
{ title: "Local", description: "Roasted in town.", icon: MapPin }
|
|
]}
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplit
|
|
tag="Newsletter"
|
|
title="Stay Updated"
|
|
description="Get the latest coffee news delivered to your inbox."
|
|
useInvertedBackground={false}
|
|
background={{ variant: "plain" }}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoReveal
|
|
logoText="CafeFlow"
|
|
leftLink={{ text: "Privacy", href: "/privacy" }}
|
|
rightLink={{ text: "Terms", href: "/terms" }}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |