diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 816413d..f60e12c 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -1,49 +1,13 @@
 "use client";
 
-import Link from "next/link";
-import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
-import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import HeroLogo from '@/components/sections/hero/HeroLogo';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import { Mail, Phone, MapPin, Linkedin, Github, Twitter } from 'lucide-react';
 
 export default function ContactPage() {
-  const footerColumns = [
-    {
-      title: "Navigation",
-      items: [
-        { label: "Home", href: "/" },
-        { label: "About", href: "/about" },
-        { label: "Services", href: "/services" },
-        { label: "Portfolio", href: "/portfolio" },
-      ],
-    },
-    {
-      title: "Resources",
-      items: [
-        { label: "Resume", href: "/resume" },
-        { label: "Blog", href: "/#blog" },
-        { label: "Contact", href: "/contact" },
-        { label: "GitHub", href: "https://github.com" },
-      ],
-    },
-    {
-      title: "Connect",
-      items: [
-        { label: "LinkedIn", href: "https://linkedin.com" },
-        { label: "Twitter", href: "https://twitter.com" },
-        { label: "Email", href: "mailto:lewisssmith19@gmail.com" },
-        { label: "Phone", href: "tel:+18018899932" },
-      ],
-    },
-    {
-      title: "Legal",
-      items: [
-        { label: "Privacy Policy", href: "#" },
-        { label: "Terms of Service", href: "#" },
-        { label: "Cookie Policy", href: "#" },
-      ],
-    },
-  ];
-
   return (
     <ThemeProvider
       defaultButtonVariant="bounce-effect"
@@ -65,115 +29,195 @@ export default function ContactPage() {
             { name: "About", id: "/about" },
             { name: "Services", id: "/services" },
             { name: "Portfolio", id: "/portfolio" },
-            { name: "Resume", id: "/resume" },
+            { name: "Resume", id: "/resume" }
           ]}
           button={{
-            text: "Get in Touch",
-            href: "/contact",
+            text: "Get in Touch",            href: "/contact"
           }}
           animateOnLoad={true}
           className="z-50"
         />
       </div>
 
-      <section id="contact" data-section="contact" className="py-20">
-        <div className="mx-auto px-4 md:px-6 max-w-3xl">
+      <div id="hero" data-section="hero" className="relative overflow-hidden">
+        <HeroLogo
+          logoText="Let's Work Together"
+          description="Ready to bring your vision to life? Whether you have a specific project in mind or just want to explore possibilities, I'd love to hear from you. Let's create something amazing."
+          buttons={[
+            {
+              text: "Send Email",              href: "mailto:lewisssmith19@gmail.com"
+            },
+            {
+              text: "Call Me",              href: "tel:+18018899932"
+            }
+          ]}
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/a-modern-minimalist-workspace-with-dual--1773176525201-be8e42a1.png"
+          imageAlt="Contact workspace"
+          showDimOverlay={true}
+          buttonAnimation="slide-up"
+        />
+      </div>
+
+      <div id="contact-form" data-section="contact-form" className="py-20">
+        <ContactCenter
+          tag="Get in Touch"
+          title="Let's Start a Conversation"
+          description="Send me a message and I'll respond as soon as possible. Whether it's a project inquiry, collaboration opportunity, or just to chat about web development, I'm always excited to connect."
+          background={{ variant: "rotated-rays-animated-grid" }}
+          useInvertedBackground={false}
+          onSubmit={(email) => console.log("Email submitted:", email)}
+        />
+      </div>
+
+      <div id="contact-info" data-section="contact-info" className="py-20">
+        <div className="max-w-6xl mx-auto px-4">
           <div className="text-center mb-16">
-            <span className="inline-block px-4 py-2 rounded-full bg-accent/10 text-accent text-sm font-medium mb-4">
-              Let's Talk
-            </span>
-            <h1 className="text-5xl md:text-6xl font-semibold text-foreground mb-6">
-              Ready to Work Together?
-            </h1>
-            <p className="text-lg text-foreground/70">
-              I'd love to hear about your project. Whether you need a new website, an application, or just have questions, feel free to reach out. I'm based in Providence, UT and available for both remote and local projects.
-            </p>
+            <span className="inline-block px-4 py-2 bg-blue-500/10 text-blue-600 rounded-full text-sm font-medium mb-4">Contact Methods</span>
+            <h2 className="text-4xl font-bold mb-4">Reach Out in Your Preferred Way</h2>
+            <p className="text-gray-600 max-w-2xl mx-auto">Multiple ways to connect with me and discuss your project needs</p>
           </div>
 
-          <div className="grid md:grid-cols-2 gap-8 mb-12">
-            <div className="bg-card rounded-lg p-8 border border-foreground/10">
-              <h3 className="text-2xl font-semibold text-foreground mb-4">Direct Contact</h3>
-              <div className="space-y-6">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
+            <div className="p-8 rounded-lg border border-gray-200 bg-white/50 hover:bg-white/80 transition">
+              <div className="flex items-start gap-4">
+                <div className="flex-shrink-0 w-12 h-12 bg-blue-500/10 rounded-lg flex items-center justify-center">
+                  <Mail className="w-6 h-6 text-blue-600" />
+                </div>
                 <div>
-                  <p className="text-sm font-medium text-foreground/60 mb-2">Email</p>
-                  <a href="mailto:lewisssmith19@gmail.com" className="text-lg text-accent hover:text-accent/80 transition-colors font-medium">
+                  <h3 className="font-bold text-lg mb-2">Email</h3>
+                  <p className="text-gray-600 mb-4">Best for detailed project discussions and inquiries</p>
+                  <a href="mailto:lewisssmith19@gmail.com" className="text-blue-600 font-medium hover:underline">
                     lewisssmith19@gmail.com
                   </a>
                 </div>
-                <div>
-                  <p className="text-sm font-medium text-foreground/60 mb-2">Phone</p>
-                  <a href="tel:+18018899932" className="text-lg text-accent hover:text-accent/80 transition-colors font-medium">
-                    (801) 889-9932
-                  </a>
+              </div>
+            </div>
+
+            <div className="p-8 rounded-lg border border-gray-200 bg-white/50 hover:bg-white/80 transition">
+              <div className="flex items-start gap-4">
+                <div className="flex-shrink-0 w-12 h-12 bg-green-500/10 rounded-lg flex items-center justify-center">
+                  <Phone className="w-6 h-6 text-green-600" />
                 </div>
                 <div>
-                  <p className="text-sm font-medium text-foreground/60 mb-2">Location</p>
-                  <p className="text-lg text-foreground font-medium">
-                    Providence, UT 84332
-                  </p>
+                  <h3 className="font-bold text-lg mb-2">Phone</h3>
+                  <p className="text-gray-600 mb-4">Quick conversations and urgent matters</p>
+                  <a href="tel:+18018899932" className="text-green-600 font-medium hover:underline">
+                    +1 (801) 889-9932
+                  </a>
                 </div>
               </div>
             </div>
 
-            <div className="bg-card rounded-lg p-8 border border-foreground/10">
-              <h3 className="text-2xl font-semibold text-foreground mb-4">Connect Online</h3>
-              <div className="space-y-6">
-                <div>
-                  <p className="text-sm font-medium text-foreground/60 mb-2">LinkedIn</p>
-                  <a href="https://linkedin.com" target="_blank" rel="noopener noreferrer" className="text-lg text-accent hover:text-accent/80 transition-colors font-medium">
-                    linkedin.com/in/lewissmith
-                  </a>
+            <div className="p-8 rounded-lg border border-gray-200 bg-white/50 hover:bg-white/80 transition">
+              <div className="flex items-start gap-4">
+                <div className="flex-shrink-0 w-12 h-12 bg-purple-500/10 rounded-lg flex items-center justify-center">
+                  <MapPin className="w-6 h-6 text-purple-600" />
                 </div>
                 <div>
-                  <p className="text-sm font-medium text-foreground/60 mb-2">GitHub</p>
-                  <a href="https://github.com" target="_blank" rel="noopener noreferrer" className="text-lg text-accent hover:text-accent/80 transition-colors font-medium">
-                    github.com/lewissmith
-                  </a>
+                  <h3 className="font-bold text-lg mb-2">Location</h3>
+                  <p className="text-gray-600 mb-4">Based in Providence, UT - Available for remote work worldwide</p>
+                  <span className="text-purple-600 font-medium">Providence, Utah</span>
+                </div>
+              </div>
+            </div>
+
+            <div className="p-8 rounded-lg border border-gray-200 bg-white/50 hover:bg-white/80 transition">
+              <div className="flex items-start gap-4">
+                <div className="flex-shrink-0 w-12 h-12 bg-orange-500/10 rounded-lg flex items-center justify-center">
+                  <Linkedin className="w-6 h-6 text-orange-600" />
                 </div>
                 <div>
-                  <p className="text-sm font-medium text-foreground/60 mb-2">Portfolio</p>
-                  <Link href="/" className="text-lg text-accent hover:text-accent/80 transition-colors font-medium">
-                    lewissmith.dev
-                  </Link>
+                  <h3 className="font-bold text-lg mb-2">Social Media</h3>
+                  <p className="text-gray-600 mb-4">Connect with me on professional platforms</p>
+                  <div className="flex gap-3">
+                    <a href="https://linkedin.com" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline flex items-center gap-1">
+                      <Linkedin className="w-4 h-4" /> LinkedIn
+                    </a>
+                    <a href="https://github.com" target="_blank" rel="noopener noreferrer" className="text-gray-700 hover:underline flex items-center gap-1">
+                      <Github className="w-4 h-4" /> GitHub
+                    </a>
+                  </div>
                 </div>
               </div>
             </div>
           </div>
 
-          <div className="bg-accent/10 rounded-lg p-8 border border-accent/20 text-center">
-            <h3 className="text-2xl font-semibold text-foreground mb-4">Response Time</h3>
-            <p className="text-foreground/70 mb-6">
-              I typically respond to inquiries within 24 hours. For urgent matters, feel free to call directly at the number above.
-            </p>
-            <p className="text-sm text-foreground/60">
-              Available for freelance projects, full-time positions, and consulting work.
-            </p>
-          </div>
-
-          <div className="mt-12 grid md:grid-cols-3 gap-6">
-            <div className="text-center">
-              <div className="text-4xl font-bold text-accent mb-2">50+</div>
-              <p className="text-foreground/70">Projects Completed</p>
-            </div>
-            <div className="text-center">
-              <div className="text-4xl font-bold text-accent mb-2">30+</div>
-              <p className="text-foreground/70">Happy Clients</p>
-            </div>
-            <div className="text-center">
-              <div className="text-4xl font-bold text-accent mb-2">5+</div>
-              <p className="text-foreground/70">Years Experience</p>
-            </div>
+          <div className="p-8 rounded-lg bg-gradient-to-r from-blue-500/10 to-purple-500/10 border border-blue-200/50">
+            <h3 className="font-bold text-lg mb-4">Response Time</h3>
+            <p className="text-gray-700">I typically respond to inquiries within 24 hours during business days. For urgent matters, feel free to call me directly. I'm always happy to discuss how I can help your project succeed.</p>
           </div>
         </div>
-      </section>
+      </div>
 
-      <footer id="footer" data-section="footer">
+      <div id="footer" data-section="footer">
         <FooterBaseCard
           logoText="Lewis Smith"
-          columns={footerColumns}
+          columns={[
+            {
+              title: "Navigation",              items: [
+                {
+                  label: "Home",                  href: "/"
+                },
+                {
+                  label: "About",                  href: "/about"
+                },
+                {
+                  label: "Services",                  href: "/#services"
+                },
+                {
+                  label: "Portfolio",                  href: "/#portfolio"
+                }
+              ]
+            },
+            {
+              title: "Resources",              items: [
+                {
+                  label: "Resume",                  href: "/resume"
+                },
+                {
+                  label: "Blog",                  href: "/#blog"
+                },
+                {
+                  label: "Contact",                  href: "/contact"
+                },
+                {
+                  label: "GitHub",                  href: "https://github.com"
+                }
+              ]
+            },
+            {
+              title: "Connect",              items: [
+                {
+                  label: "LinkedIn",                  href: "https://linkedin.com"
+                },
+                {
+                  label: "Twitter",                  href: "https://twitter.com"
+                },
+                {
+                  label: "Email",                  href: "mailto:lewisssmith19@gmail.com"
+                },
+                {
+                  label: "Phone",                  href: "tel:+18018899932"
+                }
+              ]
+            },
+            {
+              title: "Legal",              items: [
+                {
+                  label: "Privacy Policy",                  href: "#"
+                },
+                {
+                  label: "Terms of Service",                  href: "#"
+                },
+                {
+                  label: "Cookie Policy",                  href: "#"
+                }
+              ]
+            }
+          ]}
           copyrightText="© 2025 Lewis Smith. All rights reserved. Built with modern web technologies."
         />
-      </footer>
+      </div>
     </ThemeProvider>
   );
 }
\ No newline at end of file
diff --git a/src/app/page.tsx b/src/app/page.tsx
index a21b433..befa9df 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -31,13 +31,12 @@ export default function HomePage() {
           navItems={[
             { name: "Home", id: "/" },
             { name: "About", id: "/about" },
-            { name: "Services", id: "services" },
-            { name: "Portfolio", id: "portfolio" },
-            { name: "Resume", id: "resume" }
+            { name: "Services", id: "/services" },
+            { name: "Portfolio", id: "/#portfolio" },
+            { name: "Resume", id: "/resume" }
           ]}
           button={{
-            text: "Get in Touch",
-            href: "/contact"
+            text: "Get in Touch",            href: "/contact"
           }}
           animateOnLoad={true}
           className="z-50"
@@ -50,12 +49,10 @@ export default function HomePage() {
           description="Full-stack web developer specializing in modern web applications, responsive design, and conversion-optimized solutions. Based in Providence, UT."
           buttons={[
             {
-              text: "View My Work",
-              href: "portfolio"
+              text: "View My Work",              href: "/#portfolio"
             },
             {
-              text: "Hire Me",
-              href: "/contact"
+              text: "Hire Me",              href: "/contact"
             }
           ]}
           imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/a-modern-minimalist-workspace-with-dual--1773176525201-be8e42a1.png"
@@ -72,12 +69,10 @@ export default function HomePage() {
           description="I'm Lewis Smith, a driven web developer pursuing my electrician journeyman license while building innovative digital solutions. With experience in leadership, project management, and technical development, I combine strategic thinking with hands-on coding expertise. My background in diverse roles—from missionary work to tech startups—has shaped my ability to adapt, communicate effectively, and deliver results."
           buttons={[
             {
-              text: "Download Resume",
-              href: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/professional-resume-document-screenshot--1773176526215-aeac2617.png"
+              text: "Download Resume",              href: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/professional-resume-document-screenshot--1773176526215-aeac2617.png"
             },
             {
-              text: "Connect on LinkedIn",
-              href: "https://linkedin.com"
+              text: "Connect on LinkedIn",              href: "https://linkedin.com"
             }
           ]}
           imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/professional-headshot-of-a-confident-you-1773176525817-4e217539.png?_wi=1"
@@ -96,27 +91,19 @@ export default function HomePage() {
           features={[
             {
               id: 1,
-              title: "Web Application Development",
-              description: "Full-stack web applications built with modern frameworks. Responsive, scalable, and optimized for performance. Specializing in React, Next.js, and contemporary web technologies.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/close-up-of-code-editor-screen-showing-m-1773176526705-ac3c8e27.png?_wi=1"
+              title: "Web Application Development",              description: "Full-stack web applications built with modern frameworks. Responsive, scalable, and optimized for performance. Specializing in React, Next.js, and contemporary web technologies.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/close-up-of-code-editor-screen-showing-m-1773176526705-ac3c8e27.png?_wi=1"
             },
             {
               id: 2,
-              title: "UI/UX Design & Implementation",
-              description: "Beautiful, intuitive interfaces that convert. I combine design principles with technical implementation to create engaging user experiences that drive results.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/ui-ux-design-interface-showing-beautiful-1773176525120-bb1c9769.png?_wi=1"
+              title: "UI/UX Design & Implementation",              description: "Beautiful, intuitive interfaces that convert. I combine design principles with technical implementation to create engaging user experiences that drive results.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/ui-ux-design-interface-showing-beautiful-1773176525120-bb1c9769.png?_wi=1"
             },
             {
               id: 3,
-              title: "Site Optimization & Performance",
-              description: "Fast-loading, SEO-optimized websites that rank. From Core Web Vitals to mobile responsiveness, every detail is engineered for success.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/analytics-dashboard-showing-performance--1773176526177-786547c8.png?_wi=1"
+              title: "Site Optimization & Performance",              description: "Fast-loading, SEO-optimized websites that rank. From Core Web Vitals to mobile responsiveness, every detail is engineered for success.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/analytics-dashboard-showing-performance--1773176526177-786547c8.png?_wi=1"
             },
             {
               id: 4,
-              title: "Conversion-Focused Solutions",
-              description: "Strategic implementations designed to increase leads, sales, and customer engagement. Data-driven approach to digital growth.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/conversion-funnel-visualization-with-flo-1773176525399-ab011113.png?_wi=1"
+              title: "Conversion-Focused Solutions",              description: "Strategic implementations designed to increase leads, sales, and customer engagement. Data-driven approach to digital growth.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/conversion-funnel-visualization-with-flo-1773176525399-ab011113.png?_wi=1"
             }
           ]}
         />
@@ -133,34 +120,16 @@ export default function HomePage() {
           animationType="slide-up"
           products={[
             {
-              id: "1",
-              brand: "Local Service Business",
-              name: "Lead Generation Landing Page",
-              price: "Conversion +45%",
-              rating: 5,
-              reviewCount: "12.4k",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/professional-landing-page-screenshot-sho-1773176527313-95d27acc.png?_wi=1",
-              imageAlt: "Lead generation landing page project"
+              id: "1",              brand: "Local Service Business",              name: "Lead Generation Landing Page",              price: "Conversion +45%",              rating: 5,
+              reviewCount: "12.4k",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/professional-landing-page-screenshot-sho-1773176527313-95d27acc.png?_wi=1",              imageAlt: "Lead generation landing page project"
             },
             {
-              id: "2",
-              brand: "SaaS Startup",
-              name: "Full-Stack Application",
-              price: "250+ Users",
-              rating: 5,
-              reviewCount: "8.7k",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/saas-application-dashboard-interface-sho-1773176525911-fd5f9a70.png?_wi=1",
-              imageAlt: "SaaS application dashboard"
+              id: "2",              brand: "SaaS Startup",              name: "Full-Stack Application",              price: "250+ Users",              rating: 5,
+              reviewCount: "8.7k",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/saas-application-dashboard-interface-sho-1773176525911-fd5f9a70.png?_wi=1",              imageAlt: "SaaS application dashboard"
             },
             {
-              id: "3",
-              brand: "E-Commerce Brand",
-              name: "Responsive Store Frontend",
-              price: "$2.5M Revenue",
-              rating: 5,
-              reviewCount: "15.3k",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/e-commerce-storefront-displaying-product-1773176529352-96c16aec.png?_wi=1",
-              imageAlt: "E-commerce store responsive design"
+              id: "3",              brand: "E-Commerce Brand",              name: "Responsive Store Frontend",              price: "$2.5M Revenue",              rating: 5,
+              reviewCount: "15.3k",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/e-commerce-storefront-displaying-product-1773176529352-96c16aec.png?_wi=1",              imageAlt: "E-commerce store responsive design"
             }
           ]}
         />
@@ -173,20 +142,16 @@ export default function HomePage() {
           author="Michael Chen, CEO at TechFlow Solutions"
           avatars={[
             {
-              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/professional-portrait-photo-of-business--1773176524478-08f12ed2.png",
-              alt: "Michael Chen"
+              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/professional-portrait-photo-of-business--1773176524478-08f12ed2.png",              alt: "Michael Chen"
             },
             {
-              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/professional-portrait-of-confident-woman-1773176524790-5f44bdcd.png",
-              alt: "Sarah Johnson"
+              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/professional-portrait-of-confident-woman-1773176524790-5f44bdcd.png",              alt: "Sarah Johnson"
             },
             {
-              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/professional-portrait-of-young-professio-1773176524351-267124b2.png",
-              alt: "David Kim"
+              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/professional-portrait-of-young-professio-1773176524351-267124b2.png",              alt: "David Kim"
             },
             {
-              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/professional-portrait-of-woman-in-busine-1773176525557-33611a5d.png",
-              alt: "Emily Rodriguez"
+              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/professional-portrait-of-woman-in-busine-1773176525557-33611a5d.png",              alt: "Emily Rodriguez"
             }
           ]}
           ratingAnimation="slide-up"
@@ -206,37 +171,13 @@ export default function HomePage() {
           carouselMode="buttons"
           blogs={[
             {
-              id: "1",
-              category: "Web Development",
-              title: "Building High-Converting Landing Pages in 2025",
-              excerpt: "Learn the proven strategies and technical implementations that drive real business results for online businesses.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/blog-article-cover-image-showing-a-moder-1773176525342-f8a3e793.png?_wi=1",
-              imageAlt: "Landing page design blog cover",
-              authorName: "Lewis Smith",
-              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/small-circular-avatar-photo-of-a-profess-1773176525516-f4520111.png",
-              date: "Jan 15, 2025"
+              id: "1",              category: "Web Development",              title: "Building High-Converting Landing Pages in 2025",              excerpt: "Learn the proven strategies and technical implementations that drive real business results for online businesses.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/blog-article-cover-image-showing-a-moder-1773176525342-f8a3e793.png?_wi=1",              imageAlt: "Landing page design blog cover",              authorName: "Lewis Smith",              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/small-circular-avatar-photo-of-a-profess-1773176525516-f4520111.png",              date: "Jan 15, 2025"
             },
             {
-              id: "2",
-              category: "Performance Optimization",
-              title: "Mastering Core Web Vitals for SEO Success",
-              excerpt: "Technical guide to improving page speed, interactivity, and visual stability for better rankings and user experience.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/performance-metrics-and-speed-optimizati-1773176528830-b4fd0008.png",
-              imageAlt: "Performance metrics blog cover",
-              authorName: "Lewis Smith",
-              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/small-circular-avatar-photo-of-a-profess-1773176525516-f4520111.png",
-              date: "Jan 8, 2025"
+              id: "2",              category: "Performance Optimization",              title: "Mastering Core Web Vitals for SEO Success",              excerpt: "Technical guide to improving page speed, interactivity, and visual stability for better rankings and user experience.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/performance-metrics-and-speed-optimizati-1773176528830-b4fd0008.png",              imageAlt: "Performance metrics blog cover",              authorName: "Lewis Smith",              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/small-circular-avatar-photo-of-a-profess-1773176525516-f4520111.png",              date: "Jan 8, 2025"
             },
             {
-              id: "3",
-              category: "Design & UX",
-              title: "Designing for Accessibility Without Sacrificing Beauty",
-              excerpt: "How to create inclusive, accessible websites that are both beautiful and compliant with modern web standards.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/accessible-web-design-interface-showing--1773176525609-41747602.png",
-              imageAlt: "Accessible web design blog cover",
-              authorName: "Lewis Smith",
-              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/small-circular-avatar-photo-of-a-profess-1773176525516-f4520111.png",
-              date: "Dec 29, 2024"
+              id: "3",              category: "Design & UX",              title: "Designing for Accessibility Without Sacrificing Beauty",              excerpt: "How to create inclusive, accessible websites that are both beautiful and compliant with modern web standards.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/accessible-web-design-interface-showing--1773176525609-41747602.png",              imageAlt: "Accessible web design blog cover",              authorName: "Lewis Smith",              authorAvatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/small-circular-avatar-photo-of-a-profess-1773176525516-f4520111.png",              date: "Dec 29, 2024"
             }
           ]}
         />
@@ -247,82 +188,63 @@ export default function HomePage() {
           logoText="Lewis Smith"
           columns={[
             {
-              title: "Navigation",
-              items: [
+              title: "Navigation",              items: [
                 {
-                  label: "Home",
-                  href: "/"
+                  label: "Home",                  href: "/"
                 },
                 {
-                  label: "About",
-                  href: "/about"
+                  label: "About",                  href: "/about"
                 },
                 {
-                  label: "Services",
-                  href: "/#services"
+                  label: "Services",                  href: "/services"
                 },
                 {
-                  label: "Portfolio",
-                  href: "/#portfolio"
+                  label: "Portfolio",                  href: "/#portfolio"
                 }
               ]
             },
             {
-              title: "Resources",
-              items: [
+              title: "Resources",              items: [
                 {
-                  label: "Resume",
-                  href: "/#resume"
+                  label: "Resume",                  href: "/resume"
                 },
                 {
-                  label: "Blog",
-                  href: "/#blog"
+                  label: "Blog",                  href: "/#blog"
                 },
                 {
-                  label: "Contact",
-                  href: "/contact"
+                  label: "Contact",                  href: "/contact"
                 },
                 {
-                  label: "GitHub",
-                  href: "https://github.com"
+                  label: "GitHub",                  href: "https://github.com"
                 }
               ]
             },
             {
-              title: "Connect",
-              items: [
+              title: "Connect",              items: [
                 {
-                  label: "LinkedIn",
-                  href: "https://linkedin.com"
+                  label: "LinkedIn",                  href: "https://linkedin.com"
                 },
                 {
-                  label: "Twitter",
-                  href: "https://twitter.com"
+                  label: "Twitter",                  href: "https://twitter.com"
                 },
                 {
-                  label: "Email",
-                  href: "mailto:lewisssmith19@gmail.com"
+                  label: "Email",                  href: "mailto:lewisssmith19@gmail.com"
                 },
                 {
-                  label: "Phone",
-                  href: "tel:+18018899932"
+                  label: "Phone",                  href: "tel:+18018899932"
                 }
               ]
             },
             {
-              title: "Legal",
-              items: [
+              title: "Legal",              items: [
                 {
-                  label: "Privacy Policy",
-                  href: "#"
+                  label: "Privacy Policy",                  href: "#"
                 },
                 {
-                  label: "Terms of Service",
-                  href: "#"
+                  label: "Terms of Service",                  href: "#"
                 },
                 {
-                  label: "Cookie Policy",
-                  href: "#"
+                  label: "Cookie Policy",                  href: "#"
                 }
               ]
             }
diff --git a/src/app/resume/page.tsx b/src/app/resume/page.tsx
index e81a62a..f87a726 100644
--- a/src/app/resume/page.tsx
+++ b/src/app/resume/page.tsx
@@ -1,58 +1,13 @@
 "use client";
 
-import Link from "next/link";
-import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
-import FeatureCardSix from "@/components/sections/feature/FeatureCardSix";
-import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import HeroLogo from '@/components/sections/hero/HeroLogo';
+import TimelineProcessFlow from '@/components/cardStack/layouts/timelines/TimelineProcessFlow';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import { Briefcase, Award, Code, Users } from 'lucide-react';
 
 export default function ResumePage() {
-  const navItems = [
-    { name: "Home", id: "/" },
-    { name: "About", id: "/about" },
-    { name: "Services", id: "/services" },
-    { name: "Portfolio", id: "/portfolio" },
-    { name: "Resume", id: "/resume" },
-  ];
-
-  const footerColumns = [
-    {
-      title: "Navigation",
-      items: [
-        { label: "Home", href: "/" },
-        { label: "About", href: "/about" },
-        { label: "Services", href: "/services" },
-        { label: "Portfolio", href: "/portfolio" },
-      ],
-    },
-    {
-      title: "Resources",
-      items: [
-        { label: "Resume", href: "/resume" },
-        { label: "Blog", href: "/#blog" },
-        { label: "Contact", href: "/contact" },
-        { label: "GitHub", href: "https://github.com" },
-      ],
-    },
-    {
-      title: "Connect",
-      items: [
-        { label: "LinkedIn", href: "https://linkedin.com" },
-        { label: "Twitter", href: "https://twitter.com" },
-        { label: "Email", href: "mailto:lewisssmith19@gmail.com" },
-        { label: "Phone", href: "tel:+18018899932" },
-      ],
-    },
-    {
-      title: "Legal",
-      items: [
-        { label: "Privacy Policy", href: "#" },
-        { label: "Terms of Service", href: "#" },
-        { label: "Cookie Policy", href: "#" },
-      ],
-    },
-  ];
-
   return (
     <ThemeProvider
       defaultButtonVariant="bounce-effect"
@@ -74,132 +29,235 @@ export default function ResumePage() {
             { name: "About", id: "/about" },
             { name: "Services", id: "/services" },
             { name: "Portfolio", id: "/portfolio" },
-            { name: "Resume", id: "/resume" },
+            { name: "Resume", id: "/resume" }
           ]}
           button={{
-            text: "Get in Touch",
-            href: "/contact",
+            text: "Get in Touch",            href: "/contact"
           }}
           animateOnLoad={true}
           className="z-50"
         />
       </div>
 
-      <div id="experience" data-section="experience">
-        <FeatureCardSix
+      <div id="hero" data-section="hero" className="relative overflow-hidden">
+        <HeroLogo
+          logoText="My Professional Journey"
+          description="Comprehensive overview of my experience, skills, and professional achievements in web development and digital innovation."
+          buttons={[
+            {
+              text: "Download Full Resume",              href: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/professional-resume-document-screenshot--1773176526215-aeac2617.png"
+            },
+            {
+              text: "Back Home",              href: "/"
+            }
+          ]}
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/professional-headshot-of-a-confident-you-1773176525817-4e217539.png"
+          imageAlt="Professional resume portrait"
+          showDimOverlay={true}
+          buttonAnimation="slide-up"
+        />
+      </div>
+
+      <div id="experience" data-section="experience" className="py-20">
+        <TimelineProcessFlow
           title="Professional Experience"
-          description="Strategic roles combining technical expertise, leadership, and project management across diverse industries"
-          tag="Experience"
+          description="A journey of growth, leadership, and technical excellence across diverse roles"
+          tag="Career Timeline"
           textboxLayout="default"
-          useInvertedBackground={false}
-          features={[
+          animationType="slide-up"
+          items={[
             {
-              id: 1,
-              title: "Full-Stack Web Developer",
-              description: "Designing and building modern web applications using React, Next.js, and Node.js. Developed multiple SaaS platforms and e-commerce solutions that generated significant revenue. Led frontend architecture decisions and mentored junior developers on best practices.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/close-up-of-code-editor-screen-showing-m-1773176526705-ac3c8e27.png?_wi=4",
+              id: "1",              reverse: false,
+              media: (
+                <div className="w-full h-full flex items-center justify-center bg-gradient-to-br from-blue-500/20 to-purple-500/20 rounded-lg">
+                  <Code className="w-16 h-16 text-blue-500" />
+                </div>
+              ),
+              content: (
+                <div>
+                  <h3 className="text-2xl font-bold mb-2">Full-Stack Web Developer</h3>
+                  <p className="text-sm text-gray-600 mb-4">2023 - Present</p>
+                  <p className="mb-4">Designing and building modern web applications with React, Next.js, and Node.js. Specializing in conversion-optimized landing pages and responsive design.</p>
+                  <ul className="list-disc list-inside space-y-2 text-sm">
+                    <li>Developed 15+ production web applications</li>
+                    <li>Improved client conversion rates by average 40%</li>
+                    <li>Led technical architecture decisions</li>
+                    <li>Mentored junior developers</li>
+                  </ul>
+                </div>
+              )
             },
             {
-              id: 2,
-              title: "Project Manager & Technical Lead",
-              description: "Managed cross-functional teams of 8-15 people on software development projects. Implemented agile methodologies, improved delivery timelines by 35%, and maintained 98% client satisfaction rate. Coordinated between business stakeholders and technical teams.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/analytics-dashboard-showing-performance--1773176526177-786547c8.png?_wi=3",
+              id: "2",              reverse: true,
+              media: (
+                <div className="w-full h-full flex items-center justify-center bg-gradient-to-br from-green-500/20 to-teal-500/20 rounded-lg">
+                  <Briefcase className="w-16 h-16 text-green-500" />
+                </div>
+              ),
+              content: (
+                <div>
+                  <h3 className="text-2xl font-bold mb-2">Project Manager & Technical Lead</h3>
+                  <p className="text-sm text-gray-600 mb-4">2021 - 2023</p>
+                  <p className="mb-4">Managed cross-functional teams delivering digital solutions to enterprise clients. Combined technical expertise with project management skills.</p>
+                  <ul className="list-disc list-inside space-y-2 text-sm">
+                    <li>Oversaw $2M+ in project deliverables</li>
+                    <li>Managed teams of 5-10 developers</li>
+                    <li>90% on-time project completion rate</li>
+                    <li>Implemented agile methodologies</li>
+                  </ul>
+                </div>
+              )
             },
             {
-              id: 3,
-              title: "Digital Marketing Specialist",
-              description: "Managed paid advertising campaigns across Google, Facebook, and Instagram with combined budgets exceeding $500k annually. Optimized landing pages for conversion, achieving average conversion rates of 8.2%. Analyzed marketing data to drive strategic decisions.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/conversion-funnel-visualization-with-flo-1773176525399-ab011113.png?_wi=4",
-            },
-            {
-              id: 4,
-              title: "Missionary & Community Leader",
-              description: "Served as organizational leader managing complex operations and building relationships across diverse communities. Developed strong communication, adaptability, and problem-solving skills while working independently in challenging environments.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/professional-landing-page-screenshot-sho-1773176527313-95d27acc.png?_wi=3",
-            },
+              id: "3",              reverse: false,
+              media: (
+                <div className="w-full h-full flex items-center justify-center bg-gradient-to-br from-orange-500/20 to-red-500/20 rounded-lg">
+                  <Users className="w-16 h-16 text-orange-500" />
+                </div>
+              ),
+              content: (
+                <div>
+                  <h3 className="text-2xl font-bold mb-2">Community Leader & Mentor</h3>
+                  <p className="text-sm text-gray-600 mb-4">2019 - 2021</p>
+                  <p className="mb-4">Led teams in humanitarian and community development projects. Developed strong communication and leadership skills while making positive impact.</p>
+                  <ul className="list-disc list-inside space-y-2 text-sm">
+                    <li>Led teams of 20+ people</li>
+                    <li>Managed complex logistics and planning</li>
+                    <li>Developed communication strategies</li>
+                    <li>Mentored emerging leaders</li>
+                  </ul>
+                </div>
+              )
+            }
           ]}
         />
       </div>
 
-      <div id="skills" data-section="skills">
-        <FeatureCardSix
-          title="Core Technical Skills"
-          description="Deep expertise in modern web development, design systems, and scalable application architecture"
-          tag="Skills"
-          textboxLayout="default"
-          useInvertedBackground={true}
-          features={[
-            {
-              id: 1,
-              title: "Frontend Development",
-              description: "React, Next.js, TypeScript, Tailwind CSS, HTML5, CSS3, JavaScript ES6+, Responsive Design, Performance Optimization, Accessibility (WCAG 2.1)",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/ui-ux-design-interface-showing-beautiful-1773176525120-bb1c9769.png?_wi=3",
-            },
-            {
-              id: 2,
-              title: "Backend Development",
-              description: "Node.js, Express, MongoDB, PostgreSQL, REST APIs, GraphQL, Authentication & Authorization, Database Design, Deployment & DevOps",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/saas-application-dashboard-interface-sho-1773176525911-fd5f9a70.png?_wi=3",
-            },
-            {
-              id: 3,
-              title: "Design & UX",
-              description: "Figma, Responsive Design Systems, User Experience Research, Conversion Rate Optimization (CRO), Wireframing, Prototyping, Design Thinking, User Testing",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/e-commerce-storefront-displaying-product-1773176529352-96c16aec.png?_wi=3",
-            },
-            {
-              id: 4,
-              title: "Business & Analytics",
-              description: "Google Analytics, SEO Optimization, Marketing Automation, Project Management, Leadership, Agile Methodologies, Data Analysis, Business Strategy",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/blog-article-cover-image-showing-a-moder-1773176525342-f8a3e793.png?_wi=2",
-            },
-          ]}
-        />
+      <div id="skills" data-section="skills" className="py-20">
+        <div className="max-w-6xl mx-auto px-4">
+          <div className="text-center mb-16">
+            <span className="inline-block px-4 py-2 bg-blue-500/10 text-blue-600 rounded-full text-sm font-medium mb-4">Technical Skills</span>
+            <h2 className="text-4xl font-bold mb-4">Core Competencies</h2>
+            <p className="text-gray-600 max-w-2xl mx-auto">Technical expertise and tools I use to build exceptional digital solutions</p>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+            <div className="p-6 rounded-lg border border-gray-200 bg-white/50 hover:bg-white/80 transition">
+              <h3 className="font-bold mb-3">Frontend</h3>
+              <ul className="space-y-2 text-sm text-gray-600">
+                <li>• React & Next.js</li>
+                <li>• TypeScript</li>
+                <li>• Tailwind CSS</li>
+                <li>• GSAP Animations</li>
+                <li>• Three.js</li>
+              </ul>
+            </div>
+
+            <div className="p-6 rounded-lg border border-gray-200 bg-white/50 hover:bg-white/80 transition">
+              <h3 className="font-bold mb-3">Backend</h3>
+              <ul className="space-y-2 text-sm text-gray-600">
+                <li>• Node.js</li>
+                <li>• Python</li>
+                <li>• Express.js</li>
+                <li>• Firebase</li>
+                <li>• PostgreSQL</li>
+              </ul>
+            </div>
+
+            <div className="p-6 rounded-lg border border-gray-200 bg-white/50 hover:bg-white/80 transition">
+              <h3 className="font-bold mb-3">Tools & Platforms</h3>
+              <ul className="space-y-2 text-sm text-gray-600">
+                <li>• Git & GitHub</li>
+                <li>• AWS S3</li>
+                <li>• Figma</li>
+                <li>• Docker</li>
+                <li>• Vercel</li>
+              </ul>
+            </div>
+
+            <div className="p-6 rounded-lg border border-gray-200 bg-white/50 hover:bg-white/80 transition">
+              <h3 className="font-bold mb-3">Specialties</h3>
+              <ul className="space-y-2 text-sm text-gray-600">
+                <li>• Conversion Optimization</li>
+                <li>• Performance Tuning</li>
+                <li>• SEO Implementation</li>
+                <li>• UI/UX Design</li>
+                <li>• Full-Stack Architecture</li>
+              </ul>
+            </div>
+          </div>
+        </div>
       </div>
 
-      <div id="education" data-section="education">
-        <FeatureCardSix
-          title="Education & Certifications"
-          description="Continuous learning and professional development in technology and business"
-          tag="Education"
-          textboxLayout="default"
-          useInvertedBackground={false}
-          features={[
-            {
-              id: 1,
-              title: "Brigham Young University",
-              description: "Studied Computer Science with focus on software development and algorithms. Completed coursework in data structures, web technologies, and software engineering principles.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/professional-headshot-of-a-confident-you-1773176525817-4e217539.png?_wi=3",
-            },
-            {
-              id: 2,
-              title: "Full-Stack Web Development Bootcamp",
-              description: "Intensive 12-week program covering modern web development stack. Built 15+ projects using MERN stack, mastered deployment, and learned industry best practices.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/blog-article-cover-image-showing-a-moder-1773176525342-f8a3e793.png?_wi=3",
-            },
-            {
-              id: 3,
-              title: "Google Analytics Certification",
-              description: "Advanced certification in Google Analytics 4, demonstrating expertise in web analytics, audience measurement, and data-driven marketing decision making.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/analytics-dashboard-showing-performance--1773176526177-786547c8.png?_wi=4",
-            },
-            {
-              id: 4,
-              title: "Electrician Apprenticeship Program",
-              description: "Currently pursuing journeyman electrician license through Utah Division of Occupational and Professional Licensing. Combining technical trades knowledge with digital expertise.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/service-optimization-metrics.png",
-            },
-          ]}
-        />
-      </div>
-
-      <footer id="footer" data-section="footer">
+      <div id="footer" data-section="footer">
         <FooterBaseCard
           logoText="Lewis Smith"
-          columns={footerColumns}
+          columns={[
+            {
+              title: "Navigation",              items: [
+                {
+                  label: "Home",                  href: "/"
+                },
+                {
+                  label: "About",                  href: "/about"
+                },
+                {
+                  label: "Services",                  href: "/#services"
+                },
+                {
+                  label: "Portfolio",                  href: "/#portfolio"
+                }
+              ]
+            },
+            {
+              title: "Resources",              items: [
+                {
+                  label: "Resume",                  href: "/resume"
+                },
+                {
+                  label: "Blog",                  href: "/#blog"
+                },
+                {
+                  label: "Contact",                  href: "/contact"
+                },
+                {
+                  label: "GitHub",                  href: "https://github.com"
+                }
+              ]
+            },
+            {
+              title: "Connect",              items: [
+                {
+                  label: "LinkedIn",                  href: "https://linkedin.com"
+                },
+                {
+                  label: "Twitter",                  href: "https://twitter.com"
+                },
+                {
+                  label: "Email",                  href: "mailto:lewisssmith19@gmail.com"
+                },
+                {
+                  label: "Phone",                  href: "tel:+18018899932"
+                }
+              ]
+            },
+            {
+              title: "Legal",              items: [
+                {
+                  label: "Privacy Policy",                  href: "#"
+                },
+                {
+                  label: "Terms of Service",                  href: "#"
+                },
+                {
+                  label: "Cookie Policy",                  href: "#"
+                }
+              ]
+            }
+          ]}
           copyrightText="© 2025 Lewis Smith. All rights reserved. Built with modern web technologies."
         />
-      </footer>
+      </div>
     </ThemeProvider>
   );
 }
\ No newline at end of file
diff --git a/src/app/services/page.tsx b/src/app/services/page.tsx
index a7e4d8c..2199ef7 100644
--- a/src/app/services/page.tsx
+++ b/src/app/services/page.tsx
@@ -1,58 +1,13 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import Link from "next/link";
-import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
-import FeatureCardSix from "@/components/sections/feature/FeatureCardSix";
-import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import HeroLogo from '@/components/sections/hero/HeroLogo';
+import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import { Code, Zap, TrendingUp, Target } from 'lucide-react';
 
 export default function ServicesPage() {
-  const navItems = [
-    { name: "Home", id: "/" },
-    { name: "About", id: "/about" },
-    { name: "Services", id: "/services" },
-    { name: "Portfolio", id: "/portfolio" },
-    { name: "Resume", id: "/resume" },
-  ];
-
-  const footerColumns = [
-    {
-      title: "Navigation",
-      items: [
-        { label: "Home", href: "/" },
-        { label: "About", href: "/about" },
-        { label: "Services", href: "/services" },
-        { label: "Portfolio", href: "/portfolio" },
-      ],
-    },
-    {
-      title: "Resources",
-      items: [
-        { label: "Resume", href: "/resume" },
-        { label: "Blog", href: "/#blog" },
-        { label: "Contact", href: "/contact" },
-        { label: "GitHub", href: "https://github.com" },
-      ],
-    },
-    {
-      title: "Connect",
-      items: [
-        { label: "LinkedIn", href: "https://linkedin.com" },
-        { label: "Twitter", href: "https://twitter.com" },
-        { label: "Email", href: "mailto:lewisssmith19@gmail.com" },
-        { label: "Phone", href: "tel:+18018899932" },
-      ],
-    },
-    {
-      title: "Legal",
-      items: [
-        { label: "Privacy Policy", href: "#" },
-        { label: "Terms of Service", href: "#" },
-        { label: "Cookie Policy", href: "#" },
-      ],
-    },
-  ];
-
   return (
     <ThemeProvider
       defaultButtonVariant="bounce-effect"
@@ -69,67 +24,284 @@ export default function ServicesPage() {
       <div id="nav" data-section="nav">
         <NavbarLayoutFloatingInline
           brandName="Lewis Smith"
-          navItems={navItems.map((item) => ({
-            name: item.name,
-            id: item.id,
-          }))}
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "About", id: "/about" },
+            { name: "Services", id: "/services" },
+            { name: "Portfolio", id: "/portfolio" },
+            { name: "Resume", id: "/resume" }
+          ]}
           button={{
-            text: "Get in Touch",
-            href: "contact",
+            text: "Get in Touch",            href: "/contact"
           }}
           animateOnLoad={true}
           className="z-50"
         />
       </div>
 
-      <div id="services" data-section="services" className="py-20">
+      <div id="hero" data-section="hero" className="relative overflow-hidden">
+        <HeroLogo
+          logoText="My Services"
+          description="Comprehensive web development solutions tailored to your business needs. From concept to deployment, I provide end-to-end services that drive results."
+          buttons={[
+            {
+              text: "Discuss Your Project",              href: "/contact"
+            },
+            {
+              text: "View Portfolio",              href: "/#portfolio"
+            }
+          ]}
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/professional-workspace-showing-web-develo-1773176527652-91c2f3f5.png"
+          imageAlt="Web development services"
+          showDimOverlay={true}
+          buttonAnimation="slide-up"
+        />
+      </div>
+
+      <div id="services-detailed" data-section="services-detailed" className="py-20">
         <FeatureCardSix
-          title="My Core Services"
-          description="Comprehensive web development solutions tailored to your business needs and goals"
+          title="Complete Web Development Services"
+          description="Everything you need to establish and grow your digital presence"
           tag="Services"
           textboxLayout="default"
           useInvertedBackground={false}
           features={[
             {
               id: 1,
-              title: "Web Application Development",
-              description:
-                "Full-stack web applications built with modern frameworks. Responsive, scalable, and optimized for performance. Specializing in React, Next.js, and contemporary web technologies.",
-              imageSrc:
-                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/close-up-of-code-editor-screen-showing-m-1773176526705-ac3c8e27.png?_wi=3",
+              title: "Web Application Development",              description: "Full-stack web applications built with modern frameworks and best practices. I create scalable, performant applications using React, Next.js, Node.js, and cloud technologies. From concept to deployment, every detail is optimized for success.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/close-up-of-code-editor-screen-showing-m-1773176526705-ac3c8e27.png?_wi=1"
             },
             {
               id: 2,
-              title: "UI/UX Design & Implementation",
-              description:
-                "Beautiful, intuitive interfaces that convert. I combine design principles with technical implementation to create engaging user experiences that drive results.",
-              imageSrc:
-                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/ui-ux-design-interface-showing-beautiful-1773176525120-bb1c9769.png?_wi=2",
+              title: "UI/UX Design & Implementation",              description: "Beautiful, intuitive interfaces that users love. I combine design principles with technical implementation to create engaging user experiences. Every interaction is thoughtfully crafted to guide users toward conversion.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/ui-ux-design-interface-showing-beautiful-1773176525120-bb1c9769.png?_wi=1"
             },
             {
               id: 3,
-              title: "Site Optimization & Performance",
-              description:
-                "Fast-loading, SEO-optimized websites that rank. From Core Web Vitals to mobile responsiveness, every detail is engineered for success.",
-              imageSrc:
-                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/analytics-dashboard-showing-performance--1773176526177-786547c8.png?_wi=2",
+              title: "Performance Optimization",              description: "Fast-loading websites that rank well in search results. I optimize Core Web Vitals, implement lazy loading, code splitting, and other performance best practices. Every millisecond counts for user satisfaction and SEO.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/analytics-dashboard-showing-performance--1773176526177-786547c8.png?_wi=1"
             },
             {
               id: 4,
-              title: "Conversion-Focused Solutions",
-              description:
-                "Strategic implementations designed to increase leads, sales, and customer engagement. Data-driven approach to digital growth.",
-              imageSrc:
-                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/conversion-funnel-visualization-with-flo-1773176525399-ab011113.png?_wi=3",
-            },
+              title: "Conversion Optimization",              description: "Strategic implementations designed to increase leads, sales, and customer engagement. I apply data-driven insights and A/B testing to maximize your return on investment. Every element serves a purpose.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASuQY91zuIP6LLPC2DcvO3IU3P/conversion-funnel-visualization-with-flo-1773176525399-ab011113.png?_wi=1"
+            }
           ]}
         />
       </div>
 
+      <div id="service-packages" data-section="service-packages" className="py-20">
+        <div className="max-w-6xl mx-auto px-4">
+          <div className="text-center mb-16">
+            <span className="inline-block px-4 py-2 bg-blue-500/10 text-blue-600 rounded-full text-sm font-medium mb-4">Service Packages</span>
+            <h2 className="text-4xl font-bold mb-4">Flexible Solutions for Every Need</h2>
+            <p className="text-gray-600 max-w-2xl mx-auto">Whether you're just starting out or scaling an established business, I have the right package for you</p>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+            <div className="p-8 rounded-lg border border-gray-200 bg-white/50 hover:bg-white/80 transition">
+              <div className="flex items-center gap-3 mb-4">
+                <div className="w-10 h-10 bg-blue-500/10 rounded-lg flex items-center justify-center">
+                  <Code className="w-5 h-5 text-blue-600" />
+                </div>
+                <h3 className="font-bold text-lg">Web Design & Development</h3>
+              </div>
+              <p className="text-gray-600 mb-6">Perfect for startups and small businesses launching their first website</p>
+              <ul className="space-y-3 text-sm text-gray-700 mb-8">
+                <li className="flex items-start gap-2">
+                  <span className="text-blue-600 mt-1">✓</span>
+                  <span>Responsive website design</span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="text-blue-600 mt-1">✓</span>
+                  <span>SEO optimization</span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="text-blue-600 mt-1">✓</span>
+                  <span>Contact forms & integrations</span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="text-blue-600 mt-1">✓</span>
+                  <span>Mobile optimization</span>
+                </li>
+              </ul>
+              <a href="/contact" className="inline-block px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
+                Get Started
+              </a>
+            </div>
+
+            <div className="p-8 rounded-lg border border-gray-200 bg-white/50 hover:bg-white/80 transition lg:ring-2 lg:ring-blue-500/50">
+              <div className="flex items-center gap-3 mb-4">
+                <div className="w-10 h-10 bg-purple-500/10 rounded-lg flex items-center justify-center">
+                  <Target className="w-5 h-5 text-purple-600" />
+                </div>
+                <h3 className="font-bold text-lg">Conversion Optimization</h3>
+              </div>
+              <p className="text-gray-600 mb-6">For businesses looking to maximize leads and sales from their website</p>
+              <ul className="space-y-3 text-sm text-gray-700 mb-8">
+                <li className="flex items-start gap-2">
+                  <span className="text-purple-600 mt-1">✓</span>
+                  <span>Landing page optimization</span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="text-purple-600 mt-1">✓</span>
+                  <span>A/B testing & analytics</span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="text-purple-600 mt-1">✓</span>
+                  <span>Lead capture systems</span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="text-purple-600 mt-1">✓</span>
+                  <span>Conversion tracking</span>
+                </li>
+              </ul>
+              <a href="/contact" className="inline-block px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition">
+                Learn More
+              </a>
+            </div>
+
+            <div className="p-8 rounded-lg border border-gray-200 bg-white/50 hover:bg-white/80 transition">
+              <div className="flex items-center gap-3 mb-4">
+                <div className="w-10 h-10 bg-green-500/10 rounded-lg flex items-center justify-center">
+                  <Zap className="w-5 h-5 text-green-600" />
+                </div>
+                <h3 className="font-bold text-lg">Enterprise Solutions</h3>
+              </div>
+              <p className="text-gray-600 mb-6">Complex projects requiring custom architecture and dedicated support</p>
+              <ul className="space-y-3 text-sm text-gray-700 mb-8">
+                <li className="flex items-start gap-2">
+                  <span className="text-green-600 mt-1">✓</span>
+                  <span>Custom web applications</span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="text-green-600 mt-1">✓</span>
+                  <span>Database architecture</span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="text-green-600 mt-1">✓</span>
+                  <span>API development & integration</span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="text-green-600 mt-1">✓</span>
+                  <span>Ongoing maintenance & support</span>
+                </li>
+              </ul>
+              <a href="/contact" className="inline-block px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition">
+                Discuss Project
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div id="process" data-section="process" className="py-20">
+        <div className="max-w-6xl mx-auto px-4">
+          <div className="text-center mb-16">
+            <span className="inline-block px-4 py-2 bg-blue-500/10 text-blue-600 rounded-full text-sm font-medium mb-4">My Process</span>
+            <h2 className="text-4xl font-bold mb-4">How I Work With Clients</h2>
+            <p className="text-gray-600 max-w-2xl mx-auto">A collaborative approach ensures your vision becomes reality</p>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
+            <div className="relative">
+              <div className="p-6 rounded-lg border border-gray-200 bg-white/50 text-center">
+                <div className="w-12 h-12 bg-blue-500 text-white rounded-full flex items-center justify-center mx-auto mb-4 text-xl font-bold">1</div>
+                <h3 className="font-bold mb-2">Discovery & Planning</h3>
+                <p className="text-sm text-gray-600">Understand your goals, audience, and requirements</p>
+              </div>
+              <div className="hidden md:block absolute top-1/2 -right-3 w-6 h-0.5 bg-gradient-to-r from-blue-500 to-transparent"></div>
+            </div>
+
+            <div className="relative">
+              <div className="p-6 rounded-lg border border-gray-200 bg-white/50 text-center">
+                <div className="w-12 h-12 bg-blue-500 text-white rounded-full flex items-center justify-center mx-auto mb-4 text-xl font-bold">2</div>
+                <h3 className="font-bold mb-2">Design & Prototyping</h3>
+                <p className="text-sm text-gray-600">Create mockups and get your feedback</p>
+              </div>
+              <div className="hidden md:block absolute top-1/2 -right-3 w-6 h-0.5 bg-gradient-to-r from-blue-500 to-transparent"></div>
+            </div>
+
+            <div className="relative">
+              <div className="p-6 rounded-lg border border-gray-200 bg-white/50 text-center">
+                <div className="w-12 h-12 bg-blue-500 text-white rounded-full flex items-center justify-center mx-auto mb-4 text-xl font-bold">3</div>
+                <h3 className="font-bold mb-2">Development & Testing</h3>
+                <p className="text-sm text-gray-600">Build with best practices and rigorous testing</p>
+              </div>
+              <div className="hidden md:block absolute top-1/2 -right-3 w-6 h-0.5 bg-gradient-to-r from-blue-500 to-transparent"></div>
+            </div>
+
+            <div className="p-6 rounded-lg border border-gray-200 bg-white/50 text-center">
+              <div className="w-12 h-12 bg-blue-500 text-white rounded-full flex items-center justify-center mx-auto mb-4 text-xl font-bold">4</div>
+              <h3 className="font-bold mb-2">Launch & Support</h3>
+              <p className="text-sm text-gray-600">Deploy and provide ongoing support</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
       <div id="footer" data-section="footer">
         <FooterBaseCard
           logoText="Lewis Smith"
-          columns={footerColumns}
+          columns={[
+            {
+              title: "Navigation",              items: [
+                {
+                  label: "Home",                  href: "/"
+                },
+                {
+                  label: "About",                  href: "/about"
+                },
+                {
+                  label: "Services",                  href: "/services"
+                },
+                {
+                  label: "Portfolio",                  href: "/#portfolio"
+                }
+              ]
+            },
+            {
+              title: "Resources",              items: [
+                {
+                  label: "Resume",                  href: "/resume"
+                },
+                {
+                  label: "Blog",                  href: "/#blog"
+                },
+                {
+                  label: "Contact",                  href: "/contact"
+                },
+                {
+                  label: "GitHub",                  href: "https://github.com"
+                }
+              ]
+            },
+            {
+              title: "Connect",              items: [
+                {
+                  label: "LinkedIn",                  href: "https://linkedin.com"
+                },
+                {
+                  label: "Twitter",                  href: "https://twitter.com"
+                },
+                {
+                  label: "Email",                  href: "mailto:lewisssmith19@gmail.com"
+                },
+                {
+                  label: "Phone",                  href: "tel:+18018899932"
+                }
+              ]
+            },
+            {
+              title: "Legal",              items: [
+                {
+                  label: "Privacy Policy",                  href: "#"
+                },
+                {
+                  label: "Terms of Service",                  href: "#"
+                },
+                {
+                  label: "Cookie Policy",                  href: "#"
+                }
+              ]
+            }
+          ]}
           copyrightText="© 2025 Lewis Smith. All rights reserved. Built with modern web technologies."
         />
       </div>