Merge version_2 into main

Merge version_2 into main

src/app/page.tsx

@@ -2,14 +2,12 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactText from '@/components/sections/contact/ContactText';
-import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
-import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
-import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
-import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
-import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import ProductCardFour from '@/components/sections/product/ProductCardFour';
-import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
+import HeroBillboard from '@/components/sections/hero/HeroBillboard';
+import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 
 export default function LandingPage() {
   return (
@@ -26,139 +24,69 @@ export default function LandingPage() {
         headingFontWeight="light"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingInline
-      navItems={[
-        { name: "About", id: "about" },
-        { name: "Skills", id: "skills" },
-        { name: "Projects", id: "projects" },
-        { name: "Contact", id: "contact" },
-      ]}
-      brandName="DevPortfolio"
-      button={{
-        text: "Contact Me",        href: "#contact"
-      }}
-    />
-  </div>
+        <div id="nav" data-section="nav">
+            <NavbarLayoutFloatingOverlay
+              brandName="DevPortfolio"
+              navItems={[
+                { name: "About", id: "about" },
+                { name: "Skills", id: "skills" },
+                { name: "Contact", id: "contact" },
+              ]}
+            />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroBillboardCarousel
-      background={{ variant: "gradient-bars" }}
-      title="Crafting Modern Digital Experiences"
-      description="Hi, I'm a junior developer passionate about building clean, efficient, and user-friendly web applications. Eager to contribute and grow."
-      tag="Available for new projects"
-      buttons={[
-        { text: "View My Work", href: "#projects" },
-        { text: "Contact Me", href: "#contact" }
-      ]}
-      mediaItems={[
-        { imageSrc: "http://img.b2bpic.net/free-photo/programming-language-digital-device-screen-empty-it-department-office-used-app-development_482257-133402.jpg", imageAlt: "developer workstation code desk" },
-        { imageSrc: "http://img.b2bpic.net/free-photo/abstract-background-with-flowing-particle-dots-against-bright-blurred-background_1048-10710.jpg", imageAlt: "tech abstract background" },
-        { imageSrc: "http://img.b2bpic.net/free-photo/it-professional-office-training-ai-predictive-models_482257-108479.jpg", imageAlt: "programmer working on laptop" },
-        { imageSrc: "http://img.b2bpic.net/free-photo/3d-render-abstract-with-flowing-cyber-dots_1048-13630.jpg", imageAlt: "abstract tech 3d background" },
-        { imageSrc: "http://img.b2bpic.net/free-photo/neon-purple-lights-with-bokeh-effect_1017-2671.jpg", imageAlt: "minimal digital interface" },
-        { imageSrc: "http://img.b2bpic.net/free-photo/close-up-tidy-workspace-with-laptop_23-2148592296.jpg", imageAlt: "clean productive office desk" }
-      ]}
-    />
-  </div>
+        <div id="hero" data-section="hero">
+            <HeroBillboard
+              title="Crafting Modern Digital Experiences"
+              description="Hi, I'm a junior developer passionate about building clean, efficient, and user-friendly web applications."
+              background={{ variant: "sparkles-gradient" }}
+              buttons={[{ text: "View Skills", href: "#skills" }]}
+              imageSrc="https://img.b2bpic.net/free-photo/programming-language-digital-device-screen-empty-it-department-office-used-app-development_482257-133402.jpg"
+            />
+        </div>
 
-  <div id="about" data-section="about">
-      <MetricSplitMediaAbout
-      useInvertedBackground={true}
-      title="My Development Journey"
-      description="Passionate about modern web technologies like React, Next.js, and Tailwind CSS. I enjoy turning complex problems into simple, beautiful, and intuitive solutions. Constantly learning to stay updated with industry trends."
-      metrics={[
-        { value: "10+", title: "Projects Completed" },
-        { value: "2", title: "Years Experience" },
-        { value: "5+", title: "Languages" }
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/smiling-man-sitting-home-office-desk-typing-laptop-keyboard_482257-101018.jpg"
-      imageAlt="young developer portrait"
-      mediaAnimation="slide-up"
-      metricsAnimation="slide-up"
-    />
-  </div>
+        <div id="about" data-section="about">
+            <InlineImageSplitTextAbout
+              heading={[{ type: 'text', content: "About Me" }]}
+              useInvertedBackground={true}
+            />
+        </div>
 
-  <div id="skills" data-section="skills">
-      <FeatureCardThree
-      animationType="slide-up"
-      textboxLayout="split-description"
-      gridVariant="three-columns-all-equal-width"
-      useInvertedBackground={false}
-      features={[
-        {
-          title: "Frontend Development",          description: "Expertise in React, Next.js, HTML5, CSS3, and JavaScript, focusing on creating responsive and accessible interfaces.",          imageSrc: "http://img.b2bpic.net/free-photo/data-center-computer-systems-controlling-network-resources-closeup_482257-126065.jpg"
-        },
-        {
-          title: "Backend Knowledge",          description: "Understanding of Node.js, Express, and database management with MongoDB and PostgreSQL for full-stack applications.",          imageSrc: "http://img.b2bpic.net/free-photo/variety-people-multitasking-3d-cartoon-scene_23-2151294555.jpg"
-        },
-        {
-          title: "Web Design",          description: "Strong design sensibility with Figma, leveraging modern design systems to bridge the gap between design and development.",          imageSrc: "http://img.b2bpic.net/free-photo/smartphone-with-user-interface-concept_52683-104211.jpg"
-        }
-      ]}
-      title="Technical Skills"
-      description="The toolset I use to build robust digital solutions."
-    />
-  </div>
+        <div id="skills" data-section="skills">
+            <FeatureCardTwelve
+              title="Technical Skills"
+              description="My current toolkit"
+              textboxLayout="split-description"
+              animationType="slide-up"
+              useInvertedBackground={false}
+              features={[
+                { id: "s1", label: "Frontend", title: "Modern UI", items: ["React", "Next.js", "Tailwind"] },
+                { id: "s2", label: "Backend", title: "Server Side", items: ["Node.js", "PostgreSQL"] },
+                { id: "s3", label: "Design", title: "Tools", items: ["Figma", "GSAP"] }
+              ]}
+            />
+        </div>
 
-  <div id="projects" data-section="projects">
-      <ProductCardFour
-      animationType="slide-up"
-      textboxLayout="split-description"
-      gridVariant="three-columns-all-equal-width"
-      useInvertedBackground={true}
-      products={[
-        { id: "p1", name: "Analytics Dashboard", price: "View Project", variant: "Web Development", imageSrc: "http://img.b2bpic.net/free-photo/close-up-architect-using-tablet-with-touch-screen-analyze-building-model-architectural-development-man-engineer-working-with-device-construction-layout-design_482257-39970.jpg" },
-        { id: "p2", name: "E-commerce App", price: "View Project", variant: "Mobile App", imageSrc: "http://img.b2bpic.net/free-photo/man-delivering-groceries-customers_23-2149950112.jpg" },
-        { id: "p3", name: "Social Media Platform", price: "View Project", variant: "Full Stack", imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-colorless-apps_23-2148808892.jpg" },
-        { id: "p4", name: "Travel Landing Page", price: "View Project", variant: "Frontend", imageSrc: "http://img.b2bpic.net/free-vector/task-management-app-interface_23-2148655618.jpg" },
-        { id: "p5", name: "Task Manager", price: "View Project", variant: "Productivity", imageSrc: "http://img.b2bpic.net/free-photo/customer-marketing-sales-dashboard-graphics-concept_53876-133831.jpg" },
-        { id: "p6", name: "Crypto Tracker", price: "View Project", variant: "Finance App", imageSrc: "http://img.b2bpic.net/free-photo/digital-assets-business-management-system-concept_53876-121226.jpg" }
-      ]}
-      title="My Featured Projects"
-      description="A showcase of my recent work, highlighting technical implementations and design choices."
-    />
-  </div>
+        <div id="contact" data-section="contact">
+            <ContactSplitForm
+              title="Get in Touch"
+              description="Have a project in mind or just want to say hi?"
+              inputs={[{ name: "name", type: "text", placeholder: "Name" }, { name: "email", type: "email", placeholder: "Email" }]}
+              textarea={{ name: "message", placeholder: "Your message" }}
+              useInvertedBackground={false}
+            />
+        </div>
 
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardTen
-      textboxLayout="split-description"
-      useInvertedBackground={false}
-      testimonials={[
-        { id: "t1", title: "Excellent Developer", quote: "Incredibly professional and always met deadlines. A pleasure to work with.", name: "John Smith", role: "Project Manager", imageSrc: "http://img.b2bpic.net/free-photo/man-portrait-posing-loft-modern-space_158595-5365.jpg" },
-        { id: "t2", title: "Highly Recommend", quote: "Very thorough, clean code, and great attention to detail.", name: "Sarah Lee", role: "Senior Engineer", imageSrc: "http://img.b2bpic.net/free-photo/brunette-woman-standing-bricks-wall-smiling-with-happy-face-looking-pointing-side-with-thumb-up_839833-15096.jpg" },
-        { id: "t3", title: "Fast Learner", quote: "Caught on to our stack in no time. Great team player.", name: "Mark Wilson", role: "Team Lead", imageSrc: "http://img.b2bpic.net/free-photo/alone-specialist-handsome-daydreaming-collar_1262-870.jpg" },
-        { id: "t4", title: "Great Vision", quote: "Understands both design and development, very well-rounded.", name: "Emily Chen", role: "Design Lead", imageSrc: "http://img.b2bpic.net/free-photo/close-up-positive-businesswoman_1098-3531.jpg" },
-        { id: "t5", title: "Reliable", quote: "Consistently delivered high-quality results. Very promising developer.", name: "David King", role: "Client", imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-black-man-wool-suit_613910-16435.jpg" }
-      ]}
-      title="Client Feedback"
-      description="What partners and mentors say about my work and attitude."
-    />
-  </div>
-
-  <div id="contact" data-section="contact">
-      <ContactText
-      useInvertedBackground={true}
-      background={{ variant: "gradient-bars" }}
-      text="Let's work together! I am currently open to new opportunities and exciting collaborations."
-      buttons={[
-        { text: "Email Me", href: "mailto:hello@dev.com" },
-        { text: "Connect on LinkedIn", href: "#" }
-      ]}
-    />
-  </div>
-
-  <div id="footer" data-section="footer">
-      <FooterLogoEmphasis
-      columns={[
-        { items: [{ label: "About", href: "#about" }, { label: "Projects", href: "#projects" }, { label: "Contact", href: "#contact" }] },
-        { items: [{ label: "LinkedIn", href: "#" }, { label: "GitHub", href: "#" }, { label: "Twitter", href: "#" }] },
-        { items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] }
-      ]}
-      logoText="DevPortfolio"
-    />
-  </div>
+        <div id="footer" data-section="footer">
+            <FooterMedia
+              logoText="DevPortfolio"
+              imageSrc="https://img.b2bpic.net/free-photo/abstract-background-with-flowing-particle-dots-against-bright-blurred-background_1048-10710.jpg"
+              columns={[
+                { title: "Navigation", items: [{ label: "Home", href: "#" }, { label: "Contact", href: "#contact" }] }
+              ]}
+            />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}