Update src/app/projects/page.tsx

src/app/projects/page.tsx

@@ -2,10 +2,9 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
-import FooterBase from '@/components/sections/footer/FooterBase';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import ProductCardThree from '@/components/sections/product/ProductCardThree';
+import CardStack from '@/components/cardStack/CardStack';
+import FooterBase from '@/components/sections/footer/FooterBase';
 
 export default function LandingPage() {
   return (
@@ -25,132 +24,43 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingOverlay
       navItems={[
-        {
-          name: "Home",
-          id: "/",
-        },
-        {
-          name: "About",
-          id: "/about",
-        },
-        {
-          name: "Services",
-          id: "/services",
-        },
-        {
-          name: "Projects",
-          id: "/projects",
-        },
-        {
-          name: "Safety",
-          id: "/safety",
-        },
-        {
-          name: "Contact",
-          id: "/contact",
-        },
+        { name: "Home", id: "/" },
+        { name: "About", id: "/about" },
+        { name: "Services", id: "/services" },
+        { name: "Projects", id: "/projects" },
+        { name: "Safety", id: "/safety" },
+        { name: "Contact", id: "/contact" },
       ]}
       brandName="Jasso Framing LLC"
     />
   </div>
 
-  <div id="product" data-section="product">
-      <ProductCardThree
+  <div id="portfolio" data-section="portfolio">
+      <CardStack
       animationType="slide-up"
       textboxLayout="default"
-      gridVariant="uniform-all-items-equal"
-      useInvertedBackground={false}
       title="Completed Work"
-      description="A glimpse of our portfolio."
-      products={[
-        {
-          id: "a1",
-          name: "Austin Heights",
-          price: "Large Scale",
-          imageSrc: "http://img.b2bpic.net/free-photo/modern-country-houses-construction_1385-20.jpg",
-        },
-        {
-          id: "a2",
-          name: "Dallas Commercial",
-          price: "High Density",
-          imageSrc: "http://img.b2bpic.net/free-photo/horizontal-shot-construction-site-with-scaffolding-clear-blue-sky_181624-27944.jpg",
-        },
-      ]}
-    />
-  </div>
-
-  <div id="feature" data-section="feature">
-      <FeatureCardSix
-      textboxLayout="default"
-      useInvertedBackground={false}
-      title="Quality Benchmarks"
-      description="We exceed industry expectations."
-      features={[
-        {
-          title: "Precision Framing",
-          description: "Engineered for durability.",
-          imageSrc: "http://img.b2bpic.net/free-photo/low-view-wooden-house-construction_23-2148748793.jpg",
-        },
-        {
-          title: "Timely Delivery",
-          description: "Always hitting our targets.",
-          imageSrc: "http://img.b2bpic.net/free-photo/idea-adult-man-protective-helmet-plaid-shirt-with-tablet-his-hands-thinking-looking-side-standing-construction-site_259150-57618.jpg",
-        },
-      ]}
-    />
+      description="Our projects gallery."
+      gridVariant="four-items-2x2-equal-grid"
+      className="py-16"
+    >
+      {[ { name: "Austin Heights", title: "Structural Build" }, { name: "Dallas Commercial", title: "Framing Project" } ].map((item, i) => (
+        <div key={i} className="p-4 border border-zinc-200 rounded-lg flex flex-col items-center text-center">
+          <img src="http://img.b2bpic.net/free-photo/modern-country-houses-construction_1385-20.jpg" alt={item.name} className="w-full h-48 object-cover rounded mb-4" />
+          <h3 className="text-lg font-bold">{item.name}</h3>
+          <p className="text-sm text-zinc-600">{item.title}</p>
+        </div>
+      ))}
+    </CardStack>
   </div>
 
   <div id="footer" data-section="footer">
       <FooterBase
-      columns={[
-        {
-          title: "Company",
-          items: [
-            {
-              label: "About Us",
-              href: "/about",
-            },
-            {
-              label: "Services",
-              href: "/services",
-            },
-            {
-              label: "Careers",
-              href: "/careers",
-            },
-          ],
-        },
-        {
-          title: "Projects",
-          items: [
-            {
-              label: "Portfolio",
-              href: "/projects",
-            },
-            {
-              label: "Safety",
-              href: "/safety",
-            },
-          ],
-        },
-        {
-          title: "Support",
-          items: [
-            {
-              label: "Contact",
-              href: "/contact",
-            },
-            {
-              label: "Request Bid",
-              href: "/contact",
-            },
-          ],
-        },
-      ]}
+      columns={[]}
       logoText="Jasso Framing LLC"
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}