Update src/app/page.tsx

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>
   );
 }