diff --git a/src/app/portfolio/page.tsx b/src/app/portfolio/page.tsx
index 0e9b5b3..d33c353 100644
--- a/src/app/portfolio/page.tsx
+++ b/src/app/portfolio/page.tsx
@@ -3,9 +3,59 @@
 import ReactLenis from "lenis/react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
-import FeatureCardTwentyEight from "@/components/sections/feature/FeatureCardTwentyEight";
+import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
 import FooterBase from "@/components/sections/footer/FooterBase";
-import { ArrowUpRight } from "lucide-react";
+import { Sparkles } from "lucide-react"; // Keep Sparkles as an example, add others if needed by sections
+
+const NAV_ITEMS = [
+  { name: "Home", id: "/" },
+  { name: "Portfolio", id: "/portfolio" },
+  { name: "Services", id: "/services" },
+  { name: "About", id: "/about" },
+  { name: "Contact", id: "/contact" }
+];
+
+const FOOTER_COLUMNS = [
+  {
+    title: "Company", items: [
+      { label: "About", href: "/about" },
+      { label: "Services", href: "/services" },
+      { label: "Work", href: "/portfolio" },
+      { label: "Contact", href: "/contact" }
+    ]
+  },
+  {
+    title: "Services", items: [
+      { label: "Web Development", href: "/services" },
+      { label: "SEO", href: "/services" },
+      { label: "Branding", href: "/services" },
+      { label: "UI/UX Design", href: "/services" }
+    ]
+  },
+  {
+    title: "Connect", items: [
+      { label: "Twitter", href: "#" },
+      { label: "LinkedIn", href: "#" },
+      { label: "Instagram", href: "#" },
+      { label: "Dribbble", href: "#" }
+    ]
+  }
+];
+
+const PORTFOLIO_FEATURES = [
+  {
+    id: "project-one",    title: "E-commerce Redesign",    author: "Client A",    description: "A complete overhaul of an existing e-commerce platform, focusing on user experience and conversion optimization.",    tags: ["Web Development", "UI/UX", "E-commerce"],
+    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-1.webp",    imageAlt: "E-commerce Redesign project"
+  },
+  {
+    id: "project-two",    title: "Brand Identity Launch",    author: "Client B",    description: "Developing a new brand identity from scratch, including logo design, color palette, and brand guidelines.",    tags: ["Branding", "Graphic Design"],
+    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-2.webp",    imageAlt: "Brand Identity Launch project"
+  },
+  {
+    id: "project-three",    title: "SEO Strategy & Implementation",    author: "Client C",    description: "Comprehensive SEO strategy leading to significant organic traffic growth for a SaaS company.",    tags: ["SEO", "Digital Marketing"],
+    imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency-2/shot-3.webp",    imageAlt: "SEO Strategy project"
+  }
+];
 
 export default function PortfolioPage() {
   return (
@@ -17,78 +67,36 @@ export default function PortfolioPage() {
       sizing="medium"
       background="none"
       cardStyle="glass-elevated"
-      primaryButtonStyle="metallic"
+      primaryButtonStyle="gradient"
       secondaryButtonStyle="glass"
       headingFontWeight="medium"
     >
       <ReactLenis root>
-        <NavbarLayoutFloatingOverlay
-          brandName="Webild"
-          navItems={[
-            { name: "Home", href: "/" },
-            { name: "Portfolio", href: "/portfolio" },
-            { name: "Services", id: "services" },
-            { name: "About", id: "about" },
-            { name: "Contact", href: "/contact" }
-          ]}
-          button={{ text: "Get Started", href: "/contact" }}
-        />
-        <FeatureCardTwentyEight
-          title="Our Portfolio & Case Studies"
-          description="Explore a selection of our award-winning projects and see how we help brands succeed online."
-          animationType="slide-up"
-          features={[
-            {
-              id: "1",              title: "Umbra Skincare Redesign",              subtitle: "E-commerce Platform",              category: "Web Design",              value: "+150% Conversions",              buttons: [{ text: "View Case Study", href: "#" }],
-            },
-            {
-              id: "2",              title: "Luxuria Travel Brand Identity",              subtitle: "Luxury Travel Agency",              category: "Branding",              value: "Increased Brand Recognition",              buttons: [{ text: "View Case Study", href: "#" }],
-            },
-            {
-              id: "3",              title: "Dental Care Digital Presence",              subtitle: "Healthcare Website",              category: "SEO & Web Dev",              value: "#1 Local Search Rank",              buttons: [{ text: "View Case Study", href: "#" }],
-            },
-            {
-              id: "4",              title: "Summit Roofing Lead Generation",              subtitle: "Contracting Business",              category: "Web Dev & Marketing",              value: "+200% Leads",              buttons: [{ text: "View Case Study", href: "#" }],
-            },
-            {
-              id: "5",              title: "Dubai Real Estate Portal",              subtitle: "Property Listing Site",              category: "UI/UX & Development",              value: "Streamlined User Journey",              buttons: [{ text: "View Case Study", href: "#" }],
-            },
-            {
-              id: "6",              title: "AgentFlow AI SaaS Platform",              subtitle: "Artificial Intelligence",              category: "Product Design",              value: "Enhanced User Experience",              buttons: [{ text: "View Case Study", href: "#" }],
-            },
-          ]}
-        />
-        <FooterBase
-          logoText="Webild"
-          copyrightText="© 2026 | Webild"
-          columns={[
-            {
-              title: "Company",              items: [
-                { label: "About", href: "#about" },
-                { label: "Services", href: "#services" },
-                { label: "Work", href: "/portfolio" },
-                { label: "Contact", href: "/contact" },
-              ],
-            },
-            {
-              title: "Services",              items: [
-                { label: "Web Development", href: "#" },
-                { label: "SEO", href: "#" },
-                { label: "Branding", href: "#" },
-                { label: "UI/UX Design", href: "#" },
-              ],
-            },
-            {
-              title: "Connect",              items: [
-                { label: "Twitter", href: "#" },
-                { label: "LinkedIn", href: "#" },
-                { label: "Instagram", href: "#" },
-                { label: "Dribbble", href: "#" },
-              ],
-            },
-          ]}
-        />
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            brandName="Webild"
+            navItems={NAV_ITEMS}
+            button={{ text: "Get Started", href: "/contact" }}
+          />
+        </div>
+        <div id="portfolio-features" data-section="portfolio-features">
+          <FeatureCardTwentyFour
+            title="Our Portfolio"
+            description="Explore our latest projects and client success stories."
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            features={PORTFOLIO_FEATURES}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterBase
+            logoText="Webild"
+            copyrightText="© 2026 | Webild"
+            columns={FOOTER_COLUMNS}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
\ No newline at end of file
+}