Merge version_3 into main

Merge version_3 into main

src/app/page.tsx

@@ -2,17 +2,17 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactCTA from '@/components/sections/contact/ContactCTA';
+import ContactText from '@/components/sections/contact/ContactText';
 import FaqDouble from '@/components/sections/faq/FaqDouble';
 import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
-import FooterSimple from '@/components/sections/footer/FooterSimple';
-import HeroSplit from '@/components/sections/hero/HeroSplit';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
 import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
-import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
 import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
 import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
-import { MessageSquare, Sparkles } from "lucide-react";
+import { MessageSquare } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -30,42 +30,48 @@ export default function LandingPage() {
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
-      <NavbarStyleFullscreen
+      <NavbarStyleCentered
       navItems={[
-        { name: "Features", id: "features" },
-        { name: "Pricing", id: "pricing" },
-        { name: "Contact", id: "contact" },
+        {
+          name: "Features",          id: "features"},
+        {
+          name: "Pricing",          id: "pricing"},
+        {
+          name: "Contact",          id: "contact"},
       ]}
       brandName="MsgReplyAI"
     />
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroSplit
-      background={{ variant: "sparkles-gradient" }}
-      title="AI Messaging Assistant: Reply Instantly"
-      description="Paste your message or upload a screenshot to get the perfect response in English, Hindi, or Hinglish. Choose your tone and conquer your chats."
+      <HeroBillboardTestimonial
+      background={{
+        variant: "plain"}}
+      title="The Messaging Response Engine"
+      description="The ultimate AI tool for effortless, witty, and contextual replies. Handle every social interaction with ease—now featuring auto-roast, multi-lingual support, and screenshot OCR."
+      buttons={[
+        {
+          text: "Get Started",          href: "#contact"},
+      ]}
+      testimonials={[
+        {
+          name: "Rahul Verma",          handle: "@rahulv",          testimonial: "The roast mode is absolutely ruthless. My friends are so confused!",          rating: 5
+        },
+        {
+          name: "Priya Sharma",          handle: "@priyas",          testimonial: "I use the Hinglish mode all the time. It feels so natural.",          rating: 5
+        }
+      ]}
       imageSrc="http://img.b2bpic.net/free-photo/ui-ux-representations-with-smartphone_23-2150201872.jpg"
       mediaAnimation="slide-up"
     />
   </div>
 
-  <div id="contact" data-section="contact">
-      <ContactCTA
-      tag="Try it now"
-      tagIcon={Sparkles}
-      title="Ready to master your chats?"
-      description="Enter the message you want to reply to below and select your vibe."
-      buttons={[{ text: "Generate Reply" }]}
-      background={{ variant: "sparkles-gradient" }}
-    />
-  </div>
-
   <div id="about" data-section="about">
       <TestimonialAboutCard
+      useInvertedBackground={false}
       tag="How it works"
       title="Smart Responses in Seconds"
-      description="Just paste the text or upload a screenshot, select your preferred tone, and get the perfect reply for any situation."
+      description="Just paste the text or upload a screenshot, select your preferred tone, and get the perfect reply for any situation. We support multi-lingual context including Hindi and Hinglish."
       subdescription="Powered by advanced NLP models specifically trained for casual banter and social messaging contexts."
       icon={MessageSquare}
       imageSrc="http://img.b2bpic.net/free-photo/digital-art-ai-technology-background_23-2151719573.jpg"
@@ -76,13 +82,17 @@ export default function LandingPage() {
   <div id="features" data-section="features">
       <FeatureCardSix
       textboxLayout="default"
+      useInvertedBackground={false}
       features={[
-        { title: "Multi-Tone Selection", description: "Normal, funny, sarcastic, or roast mode.", imageSrc: "http://img.b2bpic.net/free-photo/large-round-white-bluetooth-speaker-gray-laptop-smartphone-side_181624-3694.jpg" },
-        { title: "Multi-Lingual", description: "English, Hindi, and Hinglish support.", imageSrc: "http://img.b2bpic.net/free-photo/human-brain-detailed-structure_23-2150929948.jpg" },
-        { title: "OCR Power", description: "Snap a screenshot and let AI handle the parsing.", imageSrc: "http://img.b2bpic.net/free-photo/wireless-businessman-holding-futuristic-internet-equipment-network-generated-by-ai_188544-26813.jpg" },
+        {
+          title: "Multi-Tone Selection",          description: "Choose between normal, funny, sarcastic, or roast mode to perfectly match your desired social vibe.",          imageSrc: "http://img.b2bpic.net/free-photo/large-round-white-bluetooth-speaker-gray-laptop-smartphone-side_181624-3694.jpg"},
+        {
+          title: "Multi-Lingual Support",          description: "Seamlessly chat in English, Hindi, and Hinglish with context-aware responses.",          imageSrc: "http://img.b2bpic.net/free-photo/human-brain-detailed-structure_23-2150929948.jpg"},
+        {
+          title: "Screenshot Parsing",          description: "Snap a screenshot of the message and let our AI do the hard work instantly.",          imageSrc: "http://img.b2bpic.net/free-photo/wireless-businessman-holding-futuristic-internet-equipment-network-generated-by-ai_188544-26813.jpg"},
       ]}
-      title="Assistant Features"
-      description="Everything you need to stay ahead."
+      title="Why Choose Our Assistant?"
+      description="Powerful features designed to keep your conversations engaging and fun."
     />
   </div>
 
@@ -90,57 +100,121 @@ export default function LandingPage() {
       <PricingCardEight
       animationType="slide-up"
       textboxLayout="default"
+      useInvertedBackground={false}
       plans={[
-        { id: "free", badge: "Free", price: "$0", subtitle: "Casual use", buttons: [{ text: "Start" }], features: ["10 requests/day"] },
-        { id: "pro", badge: "Pro", price: "$9", subtitle: "Power users", buttons: [{ text: "Upgrade" }], features: ["Unlimited requests", "Screenshot OCR"] },
+        {
+          id: "basic",          badge: "Free",          price: "$0",          subtitle: "Perfect for casual users",          buttons: [
+            {
+              text: "Get Started"},
+          ],
+          features: [
+            "10 requests/day",            "Normal & Funny modes"],
+        },
+        {
+          id: "pro",          badge: "Pro",          price: "$9",          subtitle: "For the social power user",          buttons: [
+            {
+              text: "Upgrade"},
+          ],
+          features: [
+            "Unlimited requests",            "All modes unlocked",            "Screenshot parsing"],
+        },
       ]}
-      title="Simple Pricing"
-      description="Unlock the full potential of your messaging."
+      title="Choose Your Plan"
+      description="Simple pricing to unlock the perfect response engine."
     />
   </div>
 
   <div id="testimonials" data-section="testimonials">
       <TestimonialCardTen
       textboxLayout="default"
+      useInvertedBackground={false}
       testimonials={[
-        { id: "1", title: "Game changer!", quote: "The roast mode is ruthless.", name: "Rahul V.", role: "Student" },
-        { id: "2", title: "Life saver", quote: "Hinglish mode feels natural.", name: "Priya S.", role: "Designer" },
+        {
+          id: "1",          title: "Game changer!",          quote: "The roast mode is absolutely ruthless. My friends are so confused!",          name: "Rahul Verma",          role: "Student",          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-african-american-woman-cafe_273609-5283.jpg"},
+        {
+          id: "2",          title: "Life saver",          quote: "I use the Hinglish mode all the time. It feels so natural.",          name: "Priya Sharma",          role: "Designer",          imageSrc: "http://img.b2bpic.net/free-photo/smiling-millennial-man-looking-camera-cafe-headshot-portrait_1163-5163.jpg"},
+        {
+          id: "3",          title: "Hilarious",          quote: "Seriously the funniest AI for messaging I've tried.",          name: "Amit Kumar",          role: "Developer",          imageSrc: "http://img.b2bpic.net/free-photo/hipster-woman-smile-away-enjoy-with-summer-field-evening-with-vintage-tone-filter_1150-1168.jpg"},
+        {
+          id: "4",          title: "Must have!",          quote: "Screenshot parsing actually works perfect. Saves so much typing.",          name: "Sneha Patil",          role: "Marketer",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-dark-skinned-guy-shouts-emotionally-keeps-mouth-wide-opened-eyes-shut-wears-warm-white-sweater-headphones-around-neck_273609-32883.jpg"},
+        {
+          id: "5",          title: "Great",          quote: "Finally an AI that understands Hinglish banter.",          name: "Vikram Singh",          role: "Freelancer",          imageSrc: "http://img.b2bpic.net/free-photo/young-red-hair-woman-casual-orange-blouse-green-wall-look-camera-excited-smile-laugh_343596-6923.jpg"},
       ]}
-      title="User Voices"
-      description="Loved by friends everywhere."
+      title="Loved by Friends"
+      description="See what our users say about the replies they get."
     />
   </div>
 
   <div id="metrics" data-section="metrics">
       <MetricCardEleven
       animationType="slide-up"
+      textboxLayout="default"
+      useInvertedBackground={false}
       metrics={[
-        { id: "m1", value: "50K+", title: "Users", description: "Happy members", imageSrc: "http://img.b2bpic.net/free-vector/gradient-technology-logo-template-collection_23-2148218237.jpg" },
-        { id: "m2", value: "1M+", title: "Replies", description: "Sent successfully", imageSrc: "http://img.b2bpic.net/free-photo/hands-cutting-carrot-close-up_23-2148994140.jpg" },
+        {
+          id: "m1",          value: "50K+",          title: "Happy Users",          description: "People relying on our AI for banter.",          imageSrc: "http://img.b2bpic.net/free-vector/gradient-technology-logo-template-collection_23-2148218237.jpg"},
+        {
+          id: "m2",          value: "1M+",          title: "Responses",          description: "Messages sent using our engine.",          imageSrc: "http://img.b2bpic.net/free-photo/hands-cutting-carrot-close-up_23-2148994140.jpg"},
+        {
+          id: "m3",          value: "3",          title: "Languages",          description: "Eng, Hindi, and Hinglish fluent.",          imageSrc: "http://img.b2bpic.net/free-photo/touch-screen-technology-connects-modern-mobile-phone-users-generated-by-ai_188544-17120.jpg"},
       ]}
-      title="Our Growth"
-      description="Milestones reached together."
+      title="Milestones We've Reached"
+      description="Our community is growing rapidly."
     />
   </div>
 
   <div id="faq" data-section="faq">
       <FaqDouble
       textboxLayout="default"
-      faqs={[{ id: "q1", title: "Free tier?", content: "Yes, basic tier is free." }]}
-      title="FAQ"
-      description="Common questions."
+      useInvertedBackground={false}
+      faqs={[
+        {
+          id: "q1",          title: "Is it really free?",          content: "Yes, we offer a basic free tier for everyday messaging."},
+        {
+          id: "q2",          title: "Does it support Hinglish?",          content: "Absolutely, our models are trained specifically to handle Hinglish slang."},
+        {
+          id: "q3",          title: "How do I upload images?",          content: "Just use the image input button, and our OCR engine will read it."},
+      ]}
+      title="Frequently Asked Questions"
+      description="Common questions about our reply assistant."
       faqsAnimation="slide-up"
     />
   </div>
 
-  <div id="footer" data-section="footer">
-      <FooterSimple
-      columns={[
-        { title: "Product", items: [{ label: "Features", href: "#features" }] },
-        { title: "Support", items: [{ label: "Contact", href: "#contact" }] },
+  <div id="contact" data-section="contact">
+      <ContactText
+      useInvertedBackground={false}
+      background={{
+        variant: "plain"}}
+      text="Ready to master your chats? Get started with MsgReplyAI today and never run out of comebacks."
+      buttons={[
+        {
+          text: "Contact Support"},
+      ]}
+    />
+  </div>
+
+  <div id="footer" data-section="footer">
+      <FooterBaseCard
+      logoText="MsgReplyAI"
+      columns={[
+        {
+          title: "Product",          items: [
+            {
+              label: "Features",              href: "#features"},
+            {
+              label: "Pricing",              href: "#pricing"},
+          ],
+        },
+        {
+          title: "Company",          items: [
+            {
+              label: "About",              href: "#"},
+            {
+              label: "Contact",              href: "#contact"},
+          ],
+        },
       ]}
-      bottomLeftText="© 2025 MsgReplyAI"
-      bottomRightText="hello@msgreply.ai"
     />
   </div>
       </ReactLenis>