Update src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -4,13 +4,14 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import ContactCTA from '@/components/sections/contact/ContactCTA';
 import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
-import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
 import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
 import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
 import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
 import { Cpu, Zap, Palette, BookOpen } from "lucide-react";
+import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
 
 export default function PortfolioPage() {
   return (
@@ -31,6 +32,7 @@ export default function PortfolioPage() {
           <NavbarStyleFullscreen
             navItems={[
               { name: "Work", id: "hero" },
+              { name: "Experience", id: "experience" },
               { name: "About", id: "about" },
               { name: "Services", id: "features" },
               { name: "Contact", id: "contact" }
@@ -55,6 +57,20 @@ export default function PortfolioPage() {
           />
         </div>
 
+        <div id="experience" data-section="experience">
+          <MetricCardFourteen
+            title="Professional Journey"
+            tag="Timeline"
+            metrics={[
+                { id: "2024", value: "Senior Designer", description: "Leading UX initiatives for enterprise SaaS products." },
+                { id: "2021", value: "UX Lead", description: "Managed design teams and scaled component libraries." },
+                { id: "2018", value: "Front-end Dev", description: "Building accessible interfaces for global clients." }
+            ]}
+            metricsAnimation="slide-up"
+            useInvertedBackground={false}
+          />
+        </div>
+
         <div id="about" data-section="about">
           <TextSplitAbout
             title="My Philosophy"
@@ -66,7 +82,7 @@ export default function PortfolioPage() {
         <div id="problems" data-section="problems">
           <MetricCardThree
             title="What I Bring"
-            description="I combine technical expertise with creative vision to deliver impactful digital products."
+            description="Core competencies for digital excellence."
             metrics={[
               { id: "1", icon: Cpu, title: "Web Development", value: "Modern" },
               { id: "2", icon: Zap, title: "Performance Optimization", value: "Speed" },
@@ -99,26 +115,30 @@ export default function PortfolioPage() {
             rating={5}
             ratingAnimation="slide-up"
             avatarsAnimation="opacity"
-            avatars={[{ src: "https://img.b2bpic.net/free-photo/happy-woman_23-2148814057.jpg", alt: "Client" }]}
+            avatars={[{ src: "https://img.b2bpic.net/free-photo/happy-woman_23-2148814057.jpg", alt: "Client" }]
+            }
             useInvertedBackground={false}
           />
         </div>
 
         <div id="contact" data-section="contact">
           <ContactCTA
-            tag="Let's Connect"
-            title="Ready to Start a Project?"
-            description="Let's turn your idea into a digital reality."
-            buttons={[{ text: "Contact Me", href: "mailto:hello@example.com" }]}
+            tag="Get In Touch"
+            title="Portfolio Inquiries"
+            description="Interested in collaborating or have a question about my work? I'm always open to discussing new projects and creative opportunities."
+            buttons={[{ text: "Send an Email", href: "mailto:hello@portfolio.com" }, { text: "LinkedIn", href: "https://linkedin.com/in/me" }]}
             background={{ variant: "plain" }}
             useInvertedBackground={false}
           />
         </div>
 
         <div id="footer" data-section="footer">
-          <FooterLogoEmphasis
+          <FooterBaseCard
             logoText="Portfolio"
-            columns={[{ items: [{ label: "Home" }, { label: "Projects" }, { label: "Contact" }] }]}
+            columns={[
+                { title: "Navigation", items: [{ label: "Home", href: "#" }, { label: "Projects", href: "#features" }, { label: "Contact", href: "#contact" }] },
+                { title: "Connect", items: [{ label: "LinkedIn", href: "https://linkedin.com" }, { label: "Email", href: "mailto:hello@portfolio.com" }] }
+            ]}
           />
         </div>
       </ReactLenis>