diff --git a/src/app/page.tsx b/src/app/page.tsx
index 9ff0eac..a49ea68 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,183 +2,193 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
-import HeroLogo from "@/components/sections/hero/HeroLogo";
-import TextAbout from "@/components/sections/about/TextAbout";
-import ProductCardFour from "@/components/sections/product/ProductCardFour";
-import FeatureBento from "@/components/sections/feature/FeatureBento";
-import MetricCardTen from "@/components/sections/metrics/MetricCardTen";
-import TestimonialCardOne from "@/components/sections/testimonial/TestimonialCardOne";
-import ContactCTA from "@/components/sections/contact/ContactCTA";
-import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
-import { Cloud, Code2, Container, Database, GitBranch, Mail, Server, Settings, Zap } from "lucide-react";
+import HeroLogo from '@/components/sections/hero/HeroLogo';
+import TextAbout from '@/components/sections/about/TextAbout';
+import ProductCardFour from '@/components/sections/product/ProductCardFour';
+import FeatureBento from '@/components/sections/feature/FeatureBento';
+import MetricCardTen from '@/components/sections/metrics/MetricCardTen';
+import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+import Link from 'next/link';
+import { Package, Code, Zap, Users, MessageSquare, Mail } from 'lucide-react';
+
+const page = () => {
+  const navItems = [
+    { name: "Home", id: "/" },
+    { name: "About", id: "/about" },
+    { name: "Contact", id: "/contact" }
+  ];
+
+  const products = [
+    {
+      id: "1",      name: "Portfolio Website",      price: "$5,000",      variant: "Custom Design",      imageSrc: "/placeholders/placeholder1.webp",      imageAlt: "Portfolio Website"
+    },
+    {
+      id: "2",      name: "Mobile App",      price: "$8,000",      variant: "Full Stack",      imageSrc: "/placeholders/placeholder2.webp",      imageAlt: "Mobile App"
+    },
+    {
+      id: "3",      name: "E-Commerce Platform",      price: "$12,000",      variant: "Enterprise Solution",      imageSrc: "/placeholders/placeholder3.webp",      imageAlt: "E-Commerce Platform"
+    }
+  ];
+
+  const skills = {
+    features: [
+      {
+        title: "Web Development",        description: "Build responsive and fast websites",        bentoComponent: "globe" as const
+      },
+      {
+        title: "Mobile Apps",        description: "Create native and cross-platform applications",        bentoComponent: "animated-bar-chart" as const
+      }
+    ]
+  };
+
+  const experience = [
+    {
+      id: "1",      title: "Senior Developer",      subtitle: "Tech Company Inc · Full-time",      category: "Engineering",      value: "3 years"
+    },
+    {
+      id: "2",      title: "Full Stack Engineer",      subtitle: "Startup XYZ · Full-time",      category: "Development",      value: "2 years"
+    },
+    {
+      id: "3",      title: "Junior Developer",      subtitle: "Agency ABC · Full-time",      category: "Development",      value: "1 year"
+    }
+  ];
+
+  const testimonials = [
+    {
+      id: "1",      name: "John Smith",      role: "CEO",      company: "Tech Innovations",      rating: 5,
+      imageSrc: "/placeholders/placeholder4.webp"
+    },
+    {
+      id: "2",      name: "Sarah Johnson",      role: "Product Manager",      company: "Digital Solutions",      rating: 5,
+      imageSrc: "/placeholders/placeholder5.webp"
+    },
+    {
+      id: "3",      name: "Michael Davis",      role: "Founder",      company: "Creative Agency",      rating: 5,
+      imageSrc: "/placeholders/placeholder6.webp"
+    }
+  ];
+
+  const footerColumns = [
+    {
+      title: "Product",      items: [
+        { label: "Features", href: "#skills" },
+        { label: "Portfolio", href: "#projects" }
+      ]
+    },
+    {
+      title: "Company",      items: [
+        { label: "About", href: "/about" },
+        { label: "Contact", href: "#contact" }
+      ]
+    },
+    {
+      title: "Resources",      items: [
+        { label: "Blog", href: "#" },
+        { label: "Documentation", href: "#" }
+      ]
+    }
+  ];
 
-export default function LandingPage() {
   return (
     <ThemeProvider
-      defaultButtonVariant="hover-magnetic"
-      defaultTextAnimation="background-highlight"
-      borderRadius="soft"
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
       contentWidth="medium"
-      sizing="largeSmallSizeLargeTitles"
-      background="grid"
-      cardStyle="inset"
-      primaryButtonStyle="flat"
-      secondaryButtonStyle="layered"
-      headingFontWeight="light"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="normal"
     >
       <div id="nav" data-section="nav">
         <NavbarLayoutFloatingOverlay
-          brandName="Dev"
-          navItems={[
-            { name: "About", id: "about" },
-            { name: "Projects", id: "projects" },
-            { name: "Experience", id: "experience" },
-            { name: "Contact", id: "contact" }
-          ]}
-          button={{ text: "View My Work", href: "#projects" }}
+          navItems={navItems}
+          brandName="Portfolio"
+          button={{ text: "Get Started", href: "#contact" }}
         />
       </div>
 
       <div id="hero" data-section="hero">
         <HeroLogo
-          logoText="Elegant code Thoughtful design"
-          description="I build scalable applications with clean architecture and user-focused design Explore my recent projects and technical work"
+          logoText="Portfolio"
+          description="Showcase of my work and capabilities"
           buttons={[
-            { text: "View My Work", href: "#projects" },
-            { text: "Get in Touch", href: "#contact" }
+            { text: "View Projects", href: "#projects" },
+            { text: "Contact Me", href: "#contact" }
           ]}
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoLvvgVwvre5EtpX2Ur0N2qcml/a-minimalist-elegant-abstract-background-1773254278536-0acf95fb.png"
-          imageAlt="Minimalist abstract background"
-          showDimOverlay={false}
-          buttonAnimation="slide-up"
-          ariaLabel="Hero section - Portfolio introduction"
+          imageSrc="/placeholders/placeholder1.webp"
+          imageAlt="Hero background"
         />
       </div>
 
       <div id="about" data-section="about">
         <TextAbout
-          tag="About"
-          title="I'm a full-stack developer passionate about creating elegant solutions to complex problems. With expertise in modern web technologies and a focus on user experience, I bridge the gap between design and engineering."
+          tag="About Me"
+          title="I'm a passionate developer creating digital experiences"
           useInvertedBackground={false}
-          buttons={[{ text: "View Resume", href: "#" }]}
-          buttonAnimation="slide-up"
-          ariaLabel="About section"
+          buttons={[
+            { text: "Learn More", href: "#skills" },
+            { text: "Contact", href: "#contact" }
+          ]}
         />
       </div>
 
       <div id="projects" data-section="projects">
         <ProductCardFour
+          products={products}
           title="Featured Projects"
-          description="A selection of recent work showcasing my approach to scalable, well-architected solutions"
+          description="Explore some of my recent work and projects"
           tag="Portfolio"
-          products={[
-            {
-              id: "1",              name: "Dashboard Analytics Platform",              price: "React + Node.js",              variant: "Real-time data visualization",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoLvvgVwvre5EtpX2Ur0N2qcml/a-clean-modern-web-application-interface-1773254280341-7a3116c5.png",              imageAlt: "Dashboard Analytics Platform"
-            },
-            {
-              id: "2",              name: "Social Collaboration App",              price: "Next.js + Supabase",              variant: "Mobile-first responsive design",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoLvvgVwvre5EtpX2Ur0N2qcml/a-sleek-mobile-app-interface-displaying--1773254280555-946ca008.png",              imageAlt: "Social Collaboration App"
-            },
-            {
-              id: "3",              name: "Enterprise SaaS Platform",              price: "TypeScript + PostgreSQL",              variant: "Microservices architecture",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoLvvgVwvre5EtpX2Ur0N2qcml/a-professional-saas-platform-interface-w-1773254281320-4f0ad153.png",              imageAlt: "Enterprise SaaS Platform"
-            }
-          ]}
+          tagIcon={Package}
+          textboxLayout="default"
           gridVariant="uniform-all-items-equal"
           animationType="slide-up"
-          textboxLayout="default"
           useInvertedBackground={false}
-          buttonAnimation="slide-up"
-          ariaLabel="Featured projects section"
         />
       </div>
 
       <div id="skills" data-section="skills">
         <FeatureBento
-          title="Technical Expertise"
-          description="Core technologies and skills that power my development work"
-          tag="Skills"
           features={[
             {
-              title: "Frontend Development",              description: "React, Next.js, TypeScript, Tailwind CSS",              bentoComponent: "marquee",              centerIcon: Code2,
-              variant: "text",              texts: ["React", "Next.js", "TypeScript", "Tailwind", "Vue.js"]
+              title: "Web Development",              description: "Build responsive and fast websites",              bentoComponent: "globe" as const
             },
             {
-              title: "Backend & Databases",              description: "Node.js, PostgreSQL, MongoDB, REST APIs",              bentoComponent: "icon-info-cards",              items: [
-                { icon: Database, label: "Databases", value: "PostgreSQL, MongoDB" },
-                { icon: Server, label: "Backends", value: "Node.js, Express" },
-                { icon: Zap, label: "APIs", value: "REST, GraphQL" }
-              ]
-            },
-            {
-              title: "DevOps & Tools",              description: "Git, Docker, AWS, CI/CD pipelines",              bentoComponent: "orbiting-icons",              centerIcon: Settings,
-              items: [
-                { icon: GitBranch, ring: 1 },
-                { icon: Container, ring: 1 },
-                { icon: Cloud, ring: 2 },
-                { icon: Zap, ring: 2 }
-              ]
+              title: "Mobile Apps",              description: "Create native and cross-platform applications",              bentoComponent: "animated-bar-chart" as const
             }
           ]}
-          animationType="slide-up"
+          title="My Skills"
+          description="Technologies and expertise I bring to every project"
           textboxLayout="default"
+          animationType="slide-up"
           useInvertedBackground={false}
-          buttonAnimation="slide-up"
-          ariaLabel="Technical skills section"
         />
       </div>
 
       <div id="experience" data-section="experience">
         <MetricCardTen
-          title="Professional Experience"
-          description="A track record of delivering high-quality software solutions across diverse domains"
-          tag="Experience"
-          metrics={[
-            {
-              id: "1",              title: "Senior Full-Stack Engineer",              subtitle: "TechCorp Inc · San Francisco, CA · 2022 - Present",              category: "Engineering",              value: "$150K - $200K"
-            },
-            {
-              id: "2",              title: "Full-Stack Developer",              subtitle: "StartupXYZ · Remote · 2020 - 2022",              category: "Development",              value: "$110K - $145K"
-            },
-            {
-              id: "3",              title: "Junior Developer",              subtitle: "WebAgency Co · New York, NY · 2019 - 2020",              category: "Frontend",              value: "$70K - $90K"
-            }
-          ]}
+          metrics={experience}
+          title="Experience"
+          description="My professional journey and roles"
           textboxLayout="default"
-          useInvertedBackground={false}
           animationType="slide-up"
-          carouselMode="buttons"
-          ariaLabel="Professional experience section"
+          useInvertedBackground={false}
         />
       </div>
 
       <div id="testimonials" data-section="testimonials">
         <TestimonialCardOne
-          title="What Others Say"
-          description="Feedback from colleagues and industry leaders who've experienced my work"
-          tag="Testimonials"
-          testimonials={[
-            {
-              id: "1",              name: "Sarah Johnson",              role: "Engineering Manager",              company: "TechCorp Inc",              rating: 5,
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoLvvgVwvre5EtpX2Ur0N2qcml/professional-portrait-photo-of-a-tech-in-1773254278880-8566f19b.png",              imageAlt: "Sarah Johnson"
-            },
-            {
-              id: "2",              name: "Michael Chen",              role: "Product Lead",              company: "StartupXYZ",              rating: 5,
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoLvvgVwvre5EtpX2Ur0N2qcml/professional-portrait-of-a-product-manag-1773254279858-7fa266a6.png",              imageAlt: "Michael Chen"
-            },
-            {
-              id: "3",              name: "Emily Rodriguez",              role: "CTO",              company: "InnovateLab",              rating: 5,
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoLvvgVwvre5EtpX2Ur0N2qcml/professional-portrait-of-a-software-engi-1773254280031-709789da.png",              imageAlt: "Emily Rodriguez"
-            },
-            {
-              id: "4",              name: "David Kim",              role: "CEO",              company: "GrowthCo",              rating: 5,
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AoLvvgVwvre5EtpX2Ur0N2qcml/professional-portrait-of-a-startup-found-1773254279469-5572f0c3.png",              imageAlt: "David Kim"
-            }
-          ]}
+          testimonials={testimonials}
+          title="What Clients Say"
+          description="Feedback from people I've worked with"
           gridVariant="uniform-all-items-equal"
           textboxLayout="default"
           animationType="slide-up"
           useInvertedBackground={false}
-          carouselMode="buttons"
-          ariaLabel="Testimonials section"
         />
       </div>
 
@@ -187,47 +197,24 @@ export default function LandingPage() {
           tag="Get in Touch"
           tagIcon={Mail}
           title="Ready to Work Together?"
-          description="Whether you're looking to hire, collaborate, or discuss a project, I'd love to hear from you. Let's create something amazing together."
+          description="Let's discuss your next project and how I can help bring your ideas to life."
           buttons={[
-            { text: "Send an Email", href: "mailto:hello@example.com" },
-            { text: "Connect on LinkedIn", href: "https://linkedin.com" }
+            { text: "Send Email", href: "mailto:contact@example.com" },
+            { text: "Schedule Call", href: "#" }
           ]}
-          buttonAnimation="slide-up"
           background={{ variant: "plain" }}
           useInvertedBackground={false}
-          tagAnimation="slide-up"
-          ariaLabel="Contact section"
         />
       </div>
 
       <div id="footer" data-section="footer">
         <FooterBaseReveal
-          columns={[
-            {
-              title: "Navigation",              items: [
-                { label: "About", href: "#about" },
-                { label: "Projects", href: "#projects" },
-                { label: "Experience", href: "#experience" }
-              ]
-            },
-            {
-              title: "Connect",              items: [
-                { label: "GitHub", href: "https://github.com" },
-                { label: "LinkedIn", href: "https://linkedin.com" },
-                { label: "Twitter", href: "https://twitter.com" }
-              ]
-            },
-            {
-              title: "Resources",              items: [
-                { label: "Blog", href: "#" },
-                { label: "Contact", href: "#contact" },
-                { label: "Privacy", href: "#" }
-              ]
-            }
-          ]}
-          copyrightText="© 2025 Developer Portfolio. All rights reserved."
+          columns={footerColumns}
+          copyrightText="© 2025 Portfolio. All rights reserved."
         />
       </div>
     </ThemeProvider>
   );
-}
+};
+
+export default page;