Merge version_5 into main

Merge version_5 into main

src/app/page.tsx

@@ -2,15 +2,15 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactText from '@/components/sections/contact/ContactText';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
 import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
-import FooterBase from '@/components/sections/footer/FooterBase';
-import HeroOverlay from '@/components/sections/hero/HeroOverlay';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 import ProductCardFour from '@/components/sections/product/ProductCardFour';
 import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
-import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
-import { Feather, Hash, Layers } from "lucide-react";
+import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
+import { Feather, Hash, Layers, MessageSquare } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -41,7 +41,7 @@ export default function LandingPage() {
         </div>
 
         <div id="home" data-section="home">
-          <HeroOverlay
+          <HeroSplitKpi
             title="Crafting Visual Experiences That Drive Results"
             description="I’m Nijaran — a Graphic Designer specializing in branding, social media creatives, packaging design, and UI visuals."
             tag="Hello There!"
@@ -49,7 +49,14 @@ export default function LandingPage() {
               { text: "View Portfolio", href: "#portfolio" },
               { text: "Hire Me", href: "#contact" },
             ]}
-            imageSrc="http://img.b2bpic.net/free-photo/man-portrait-with-blue-lights-visual-effects_23-2149419462.jpg"
+            kpis={[
+              { value: "50+", label: "Projects Completed" },
+              { value: "100%", label: "Client Satisfaction" },
+              { value: "4+", label: "Years Experience" }
+            ]}
+            enableKpiAnimation={true}
+            imageSrc="http://img.b2bpic.net/free-photo/man-portrait-with-blue-lights-visual-effects_23-2149419462.jpg?_wi=1"
+            background={{ variant: "sparkles-gradient" }}
           />
         </div>
 
@@ -103,11 +110,15 @@ export default function LandingPage() {
         </div>
 
         <div id="about" data-section="about">
-          <TextSplitAbout
-            useInvertedBackground={false}
+          <TestimonialAboutCard
+            tag="About Me"
+            tagIcon={MessageSquare}
             title="The Story Behind Nijaran Designs"
-            description={[
-              "I’m a Sri Lanka–based graphic designer who blends creativity with strategy. My work focuses on clean visuals, modern aesthetics, and designs that convert.",              "With over 50 projects completed, I help brands stand out in competitive markets through thoughtful, results-oriented design."]}
+            description="I’m a Sri Lanka–based graphic designer who blends creativity with strategy. My work focuses on clean visuals, modern aesthetics, and designs that convert."
+            subdescription="With over 50 projects completed, I help brands stand out in competitive markets through thoughtful, results-oriented design."
+            icon={MessageSquare}
+            imageSrc="http://img.b2bpic.net/free-photo/man-portrait-with-blue-lights-visual-effects_23-2149419462.jpg?_wi=2"
+            useInvertedBackground={false}
           />
         </div>
 
@@ -119,8 +130,6 @@ export default function LandingPage() {
               { id: "t1", name: "Mohamed Shan", date: "Oct 2025", title: "CEO", quote: "Nijaran delivered exceptional designs that boosted our customer engagement. Highly professional and creative!", tag: "Ayna Beauty", avatarSrc: "http://img.b2bpic.net/free-photo/portrait-business-woman-smiling_23-2148352574.jpg", imageSrc: "http://img.b2bpic.net/free-vector/information-technology-vectors_23-2147501064.jpg?_wi=3" },
               { id: "t2", name: "Nimesha", date: "Sept 2025", title: "Marketing Director", quote: "The branding package was exactly what we needed. Clean, modern, and delivered on time.", tag: "Marketing Co", avatarSrc: "http://img.b2bpic.net/free-photo/low-angle-smiley-lawyer-posing-outdoors_23-2148230752.jpg", imageSrc: "http://img.b2bpic.net/free-vector/gradient-abstract-logo-flat-design_23-2148203432.jpg" },
               { id: "t3", name: "Vishnu", date: "Aug 2025", title: "Founder", quote: "Best poster designs we've ever had. Nijaran understands visual hierarchy perfectly.", tag: "Casino Royale", avatarSrc: "http://img.b2bpic.net/free-photo/fashion-portrait-young-elegant-woman_1328-4107.jpg", imageSrc: "http://img.b2bpic.net/free-vector/realistic-new-year-2020-poster-template_52683-30518.jpg?_wi=2" },
-              { id: "t4", name: "Sarah Miller", date: "July 2025", title: "Brand Lead", quote: "Incredible communication and beautiful results. Truly a talent in the design space.", tag: "Startup Hub", avatarSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-businessman-close-up_23-2148746290.jpg", imageSrc: "http://img.b2bpic.net/free-vector/spring-sale-flyer-template_23-2148857394.jpg?_wi=2" },
-              { id: "t5", name: "David Chen", date: "June 2025", title: "Director", quote: "A true professional who brings unique artistic vision to every project.", tag: "Tech Solutions", avatarSrc: "http://img.b2bpic.net/free-photo/portrait-business-woman-smiling_23-2148352574.jpg", imageSrc: "http://img.b2bpic.net/free-vector/letterhead-template-design_1142-369.jpg?_wi=2" },
             ]}
             title="What Clients Say"
             description="Trusted by brands to deliver high-quality, creative, and professional design work."
@@ -128,21 +137,23 @@ export default function LandingPage() {
         </div>
 
         <div id="contact" data-section="contact">
-          <ContactText
-            useInvertedBackground={false}
-            background={{ variant: "canvas-reveal" }}
-            text="Ready to bring your brand to life? Let's discuss your project today and create something extraordinary."
+          <ContactCTA
+            tag="Contact"
+            title="Ready to get started?"
+            description="Bring your brand to life today with professional, results-oriented design."
             buttons={[{ text: "Contact Me", href: "mailto:thenijaranofficalinfo@gmail.com" }]}
+            background={{ variant: "sparkles-gradient" }}
+            useInvertedBackground={false}
           />
         </div>
 
         <div id="footer" data-section="footer">
-          <FooterBase
+          <FooterLogoEmphasis
+            logoText="Nijaran Designs"
             columns={[
-              { title: "Links", items: [{ label: "Home", href: "#home" }, { label: "Portfolio", href: "#portfolio" }, { label: "Contact", href: "#contact" }] },
-              { title: "Services", items: [{ label: "Branding", href: "#services" }, { label: "UI/UX", href: "#services" }, { label: "Video", href: "#services" }] },
+              { items: [{ label: "Home", href: "#home" }, { label: "Portfolio", href: "#portfolio" }, { label: "Contact", href: "#contact" }] },
+              { items: [{ label: "Branding", href: "#services" }, { label: "UI/UX", href: "#services" }, { label: "Video", href: "#services" }] },
             ]}
-            copyrightText="© 2026 Nijaran Designs. All Rights Reserved."
           />
         </div>
       </ReactLenis>