Merge version_2 into main

Merge version_2 into main

src/app/page.tsx

@@ -2,16 +2,16 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactText from '@/components/sections/contact/ContactText';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
-import FaqSplitText from '@/components/sections/faq/FaqSplitText';
+import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
-import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
+import FeatureBento from '@/components/sections/feature/FeatureBento';
-import FooterCard from '@/components/sections/footer/FooterCard';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
-import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
+import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
-import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
+import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
-import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
+import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
-import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
+import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
-import { Briefcase, CheckCircle, Github, Linkedin, MessageSquare, Network, Target, Twitter, Users, Zap } from "lucide-react";
+import { CheckCircle, MessageSquare, Target, Network } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -29,165 +29,107 @@ export default function LandingPage() {
     >
       <ReactLenis root>
         <div id="nav" data-section="nav">
-          <NavbarStyleApple
+          <NavbarStyleFullscreen
             navItems={[
-              { name: "Features", id: "#features" },
+              { name: "Features", id: "features" },
-              { name: "About", id: "#about" },
+              { name: "About", id: "about" },
-              { name: "Contact", id: "#contact" }
+              { name: "Contact", id: "contact" }
             ]}
             brandName="MentorAI"
           />
         </div>
 
         <div id="hero" data-section="hero">
-          <HeroSplitDoubleCarousel
+          <HeroSplitTestimonial
             background={{ variant: "plain" }}
             title="Your Future, Powered by AI."
             description="Stop settling for generic career advice. Get personalized paths, skill insights, and interview training with MentorAI."
-            leftCarouselItems={[
+            testimonials={[
-              { imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150165975.jpg?_wi=1", imageAlt: "AI Career Dashboard Analytics" },
+              { name: "Sarah Johnson", handle: "@sarahj", testimonial: "MentorAI completely changed my career trajectory in tech.", rating: 5 }
-              { imageSrc: "http://img.b2bpic.net/free-photo/creative-assortment-paper-planets_23-2148874915.jpg?_wi=1", imageAlt: "Skill Mapping Data" },
-              { imageSrc: "http://img.b2bpic.net/free-photo/business-meeting_1163-3186.jpg?_wi=1", imageAlt: "Career Chatbot Window" },
-              { imageSrc: "http://img.b2bpic.net/free-photo/set-stationery-pins-thread_23-2148510445.jpg?_wi=1", imageAlt: "AI Career Analysis" },
-              { imageSrc: "http://img.b2bpic.net/free-photo/people-practicing-social-integration-workspace_23-2149405350.jpg?_wi=1", imageAlt: "Career Mentoring Concept" },
-              { imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150165975.jpg?_wi=2", imageAlt: "Dashboard overview" }
             ]}
-            rightCarouselItems={[
-              { imageSrc: "http://img.b2bpic.net/free-photo/people-practicing-social-integration-workspace_23-2149405350.jpg?_wi=2", imageAlt: "Mentoring concept" },
-              { imageSrc: "http://img.b2bpic.net/free-photo/set-stationery-pins-thread_23-2148510445.jpg?_wi=2", imageAlt: "Networking AI" },
-              { imageSrc: "http://img.b2bpic.net/free-photo/business-meeting_1163-3186.jpg?_wi=2", imageAlt: "AI Mentor UI" },
-              { imageSrc: "http://img.b2bpic.net/free-photo/creative-assortment-paper-planets_23-2148874915.jpg?_wi=2", imageAlt: "Training nodes" },
-              { imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150165975.jpg?_wi=3", imageAlt: "Growth data" },
-              { imageSrc: "http://img.b2bpic.net/free-photo/people-practicing-social-integration-workspace_23-2149405350.jpg?_wi=3", imageAlt: "Professional collaboration" }
-            ]}
-            tag="Trusted AI Career Mentor"
             buttons={[{ text: "Get Started", href: "#contact" }]}
-            avatars={[
+            imageSrc="http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150165975.jpg?_wi=1"
-              { src: "http://img.b2bpic.net/free-photo/people-working-as-team-company_23-2149136851.jpg", alt: "User 1" },
-              { src: "http://img.b2bpic.net/free-photo/stunning-black-haired-girl-with-phone-hand-drinking-coffee-resting-home_197531-4637.jpg", alt: "User 2" },
-              { src: "http://img.b2bpic.net/free-photo/businessman-communicating-with-coworker-while-working-office_637285-1047.jpg", alt: "User 3" },
-              { src: "http://img.b2bpic.net/free-photo/woman-holding-t-letter_1149-1947.jpg", alt: "User 4" },
-              { src: "http://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg", alt: "User 5" }
-            ]}
-            marqueeItems={[
-              { type: "text", text: "Google" },
-              { type: "text", text: "Amazon" },
-              { type: "text", text: "Microsoft" },
-              { type: "text", text: "Meta" },
-              { type: "text", text: "Nvidia" }
-            ]}
           />
         </div>
 
         <div id="about" data-section="about">
-          <TestimonialAboutCard
+          <InlineImageSplitTextAbout
+            heading={[{ type: "text", content: "Bridging Data and Potential" }]}
             useInvertedBackground={false}
-            tag="About Us"
-            title="Bridging Data and Potential"
-            description="We believe career guidance shouldn't be one-size-fits-all. By combining real-world job market data with advanced machine learning, we uncover the best path for your unique skills."
-            subdescription="Our RAG and vector database technology ensures our insights are based on accurate, real-world data, giving you actionable steps every single day."
-            icon={Zap}
-            imageSrc="http://img.b2bpic.net/free-photo/people-practicing-social-integration-workspace_23-2149405350.jpg?_wi=4"
-            mediaAnimation="blur-reveal"
           />
         </div>
 
         <div id="features" data-section="features">
-          <FeatureCardTwentyFive
+          <FeatureBento
-            animationType="depth-3d"
+            animationType="blur-reveal"
             textboxLayout="split"
             useInvertedBackground={false}
-            features={[
-              {
-                title: "AI-Powered Mentoring",                description: "Our GPT-based bot answers questions about roles, resumes, and interview preparation in real-time.",                icon: MessageSquare,
-                mediaItems: [
-                  { imageSrc: "http://img.b2bpic.net/free-photo/business-meeting_1163-3186.jpg?_wi=3", imageAlt: "Chat Interface" },
-                  { imageSrc: "http://img.b2bpic.net/free-photo/business-meeting_1163-3186.jpg?_wi=4", imageAlt: "Chat Interface" }
-                ]
-              },
-              {
-                title: "Real-time Skill Gap Analysis",                description: "RAG-based insights fetch current market requirements, matching your profile against real job postings.",                icon: Target,
-                mediaItems: [
-                  { imageSrc: "http://img.b2bpic.net/free-photo/creative-assortment-paper-planets_23-2148874915.jpg?_wi=3", imageAlt: "Skill Analysis Dashboard" },
-                  { imageSrc: "http://img.b2bpic.net/free-photo/creative-assortment-paper-planets_23-2148874915.jpg?_wi=4", imageAlt: "Skill Analysis Dashboard" }
-                ]
-              },
-              {
-                title: "Career Path Clustering",                description: "We use advanced sklearn clustering to suggest suitable career trajectories based on your unique interests and potential.",                icon: Network,
-                mediaItems: [
-                  { imageSrc: "http://img.b2bpic.net/free-photo/set-stationery-pins-thread_23-2148510445.jpg?_wi=3", imageAlt: "Path Clusters" },
-                  { imageSrc: "http://img.b2bpic.net/free-photo/set-stationery-pins-thread_23-2148510445.jpg?_wi=4", imageAlt: "Path Clusters" }
-                ]
-              }
-            ]}
             title="Smart Tools for Your Journey"
             description="Powerful capabilities to help you navigate your career path from zero to hero."
+            features={[
+              { title: "AI-Powered Mentoring", description: "Our GPT-based bot answers questions about roles.", bentoComponent: "reveal-icon", icon: MessageSquare },
+              { title: "Real-time Analysis", description: "RAG-based insights fetch current market requirements.", bentoComponent: "reveal-icon", icon: Target },
+              { title: "Path Clustering", description: "We use advanced clustering to suggest trajectories.", bentoComponent: "reveal-icon", icon: Network }
+            ]}
           />
         </div>
 
         <div id="metrics" data-section="metrics">
-          <MetricCardOne
+          <MetricCardSeven
-            animationType="slide-up"
+            animationType="blur-reveal"
             textboxLayout="split"
-            gridVariant="uniform-all-items-equal"
             useInvertedBackground={false}
-            metrics={[
-              { id: "1", value: "10k+", title: "Careers Guided", description: "Successfully mentored students find their dream roles.", icon: Users },
-              { id: "2", value: "95%", title: "Accuracy", description: "Highly accurate career path suggestions based on market data.", icon: CheckCircle },
-              { id: "3", value: "500+", title: "Roles Covered", description: "Extensive database of job roles across all major tech sectors.", icon: Briefcase }
-            ]}
             title="Proven Impact"
             description="Empowering the next generation of professionals."
+            metrics={[
+              { id: "1", value: "10k+", title: "Careers Guided", items: ["Mentored students", "Success stories"] }
+            ]}
           />
         </div>
 
         <div id="testimonials" data-section="testimonials">
-          <TestimonialCardTwelve
+          <TestimonialCardSix
+            animationType="blur-reveal"
+            textboxLayout="split"
             useInvertedBackground={false}
+            title="Success Stories"
+            description="What our users say about us."
             testimonials={[
-              { id: "1", name: "Sarah Johnson", imageSrc: "http://img.b2bpic.net/free-photo/people-working-as-team-company_23-2149136851.jpg" },
+              { id: "1", name: "Sarah Johnson", handle: "@sarahj", testimonial: "Game changer!", icon: CheckCircle }
-              { id: "2", name: "Michael Chen", imageSrc: "http://img.b2bpic.net/free-photo/stunning-black-haired-girl-with-phone-hand-drinking-coffee-resting-home_197531-4637.jpg" },
-              { id: "3", name: "Emily Rodriguez", imageSrc: "http://img.b2bpic.net/free-photo/businessman-communicating-with-coworker-while-working-office_637285-1047.jpg" },
-              { id: "4", name: "David Kim", imageSrc: "http://img.b2bpic.net/free-photo/woman-holding-t-letter_1149-1947.jpg" },
-              { id: "5", name: "Sofia Rossi", imageSrc: "http://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg" }
             ]}
-            cardTitle="Career Breakthrough Stories"
-            cardTag="Success Stories"
-            cardAnimation="blur-reveal"
           />
         </div>
 
         <div id="faq" data-section="faq">
-          <FaqSplitText
+          <FaqSplitMedia
-            useInvertedBackground={false}
-            faqs={[
-              { id: "1", title: "How is this different from generic advice?", content: "We use real-time market data (RAG) and machine learning, ensuring advice is personalized to your skills and actual job market requirements." },
-              { id: "2", title: "What kind of data do you use?", content: "We source data from real-time job postings, skill demand databases, and industry-standard competency benchmarks." },
-              { id: "3", title: "Can I prepare for interviews here?", content: "Absolutely! Our AI chatbot acts as your personal interviewer, providing feedback and refining your responses for top-tier companies." }
-            ]}
-            sideTitle="Questions? We've Got Answers."
             faqsAnimation="blur-reveal"
+            textboxLayout="split"
+            useInvertedBackground={false}
+            title="Questions?"
+            description="We've Got Answers."
+            faqs={[
+              { id: "1", title: "How is this different?", content: "We use real-time market data." }
+            ]}
           />
         </div>
 
         <div id="contact" data-section="contact">
-          <ContactText
+          <ContactSplitForm
+            title="Get in touch"
+            description="Let's map your career path."
             useInvertedBackground={false}
-            background={{ variant: "plain" }}
+            inputs={[
-            text="Ready to map out your career path? Get started today."
+              { name: "name", type: "text", placeholder: "Your Name" },
-            buttons={[{ text: "Get Started", href: "#" }]}
+              { name: "email", type: "email", placeholder: "Email" }
+            ]}
           />
         </div>
 
         <div id="footer" data-section="footer">
-          <FooterCard
+          <FooterMedia
             logoText="MentorAI"
-            copyrightText="© 2025 MentorAI Inc."
+            columns={[{ title: "Links", items: [{ label: "Home", href: "#" }] }]}
-            socialLinks={[
+            imageSrc="http://img.b2bpic.net/free-photo/people-working-as-team-company_23-2149136851.jpg"
-              { icon: Twitter, href: "#", ariaLabel: "Twitter" },
-              { icon: Github, href: "#", ariaLabel: "Github" },
-              { icon: Linkedin, href: "#", ariaLabel: "LinkedIn" }
-            ]}
           />
         </div>
       </ReactLenis>