Update src/app/page.tsx
This commit is contained in:
146
src/app/page.tsx
146
src/app/page.tsx
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user