Update src/app/page.tsx

This commit is contained in:
2025-12-19 23:03:33 +00:00
parent 451c1af105
commit 0982a5c612

View File

@@ -11,6 +11,53 @@ import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
import { Zap, Heart, Smile, Sun } from 'lucide-react';
import { motion } from 'framer-motion';
const containerVariants = {
hidden: { opacity: 0 },
visible: {
opacity: 1,
transition: {
staggerChildren: 0.1,
delayChildren: 0.2,
},
},
};
const itemVariants = {
hidden: { opacity: 0, y: 20 },
visible: {
opacity: 1,
y: 0,
transition: {
duration: 0.8,
ease: "easeOut",
},
},
};
const slideInVariants = {
hidden: { opacity: 0, x: -50 },
visible: {
opacity: 1,
x: 0,
transition: {
duration: 0.8,
ease: "easeOut",
},
},
};
const fadeInVariants = {
hidden: { opacity: 0 },
visible: {
opacity: 1,
transition: {
duration: 1,
ease: "easeOut",
},
},
};
export default function LandingPage() {
return (
@@ -26,7 +73,14 @@ export default function LandingPage() {
secondaryButtonStyle="minimal"
headingFontWeight="bold"
>
<div id="nav" data-section="nav">
<motion.div
id="nav"
data-section="nav"
initial="hidden"
whileInView="visible"
viewport={{ once: true, amount: 0.5 }}
variants={fadeInVariants}
>
<NavbarStyleFullscreen
navItems={[
{ name: "Home", id: "hero" },
@@ -41,9 +95,16 @@ export default function LandingPage() {
bottomLeftText="Specialty Coffee & More"
bottomRightText="hello@brewhaven.com"
/>
</div>
</motion.div>
<div id="hero" data-section="hero">
<motion.div
id="hero"
data-section="hero"
initial="hidden"
whileInView="visible"
viewport={{ once: true, amount: 0.3 }}
variants={containerVariants}
>
<HeroOverlayBottomSplit
title="Craft Coffee, Crafted with Care"
description="Discover specialty coffee roasted fresh daily. We bring the finest beans from around the world to your cup."
@@ -56,9 +117,16 @@ export default function LandingPage() {
showDimOverlay={true}
ariaLabel="Hero section showcasing specialty coffee"
/>
</div>
</motion.div>
<div id="about" data-section="about">
<motion.div
id="about"
data-section="about"
initial="hidden"
whileInView="visible"
viewport={{ once: true, amount: 0.3 }}
variants={slideInVariants}
>
<TextAbout
title="We believe in honest coffee. Every cup tells a story of passion, quality, and connection to the farmers who grew it."
useInvertedBackground="noInvert"
@@ -67,9 +135,16 @@ export default function LandingPage() {
{ text: "Learn More", href: "contact" }
]}
/>
</div>
</motion.div>
<div id="menu" data-section="menu">
<motion.div
id="menu"
data-section="menu"
initial="hidden"
whileInView="visible"
viewport={{ once: true, amount: 0.3 }}
variants={containerVariants}
>
<ProductCardSix
title="Menu"
description="Explore our signature drinks and freshly baked pastries. Each item is crafted with precision and care."
@@ -102,9 +177,16 @@ export default function LandingPage() {
textboxLayout="default"
useInvertedBackground="noInvert"
/>
</div>
</motion.div>
<div id="competitors" data-section="competitors">
<motion.div
id="competitors"
data-section="competitors"
initial="hidden"
whileInView="visible"
viewport={{ once: true, amount: 0.3 }}
variants={containerVariants}
>
<PricingCardFive
title="How We Compare"
description="See why Brew Haven stands out from the competition. We deliver superior quality, service, and value."
@@ -165,9 +247,16 @@ export default function LandingPage() {
}
]}
/>
</div>
</motion.div>
<div id="testimonials" data-section="testimonials">
<motion.div
id="testimonials"
data-section="testimonials"
initial="hidden"
whileInView="visible"
viewport={{ once: true, amount: 0.3 }}
variants={containerVariants}
>
<TestimonialCardTen
title="What Our Customers Say"
description="Join hundreds of satisfied coffee lovers who have made Brew Haven their daily ritual."
@@ -213,9 +302,16 @@ export default function LandingPage() {
}
]}
/>
</div>
</motion.div>
<div id="social-proof" data-section="social-proof">
<motion.div
id="social-proof"
data-section="social-proof"
initial="hidden"
whileInView="visible"
viewport={{ once: true, amount: 0.3 }}
variants={fadeInVariants}
>
<SocialProofThree
title="Trusted by Coffee Enthusiasts"
description="We partner with the finest roasters and certification organizations committed to quality and sustainability."
@@ -235,9 +331,16 @@ export default function LandingPage() {
speed={40}
topMarqueeDirection="left"
/>
</div>
</motion.div>
<div id="contact" data-section="contact">
<motion.div
id="contact"
data-section="contact"
initial="hidden"
whileInView="visible"
viewport={{ once: true, amount: 0.3 }}
variants={slideInVariants}
>
<ContactSplit
tag="Stay Connected"
title="Join Our Coffee Community"
@@ -250,9 +353,16 @@ export default function LandingPage() {
buttonText="Subscribe"
termsText="We respect your inbox. Unsubscribe anytime."
/>
</div>
</motion.div>
<div id="footer" data-section="footer">
<motion.div
id="footer"
data-section="footer"
initial="hidden"
whileInView="visible"
viewport={{ once: true, amount: 0.5 }}
variants={fadeInVariants}
>
<FooterBaseCard
logoText="Brew Haven"
columns={[
@@ -291,7 +401,7 @@ export default function LandingPage() {
]}
copyrightText="© 2025 Brew Haven. All rights reserved."
/>
</div>
</motion.div>
</ThemeProvider>
);
}