Add src/app/products/page.tsx

src/app/blog/page.tsx

@@ -79,7 +79,8 @@ export default function BlogPage() {
                 const url = `${apiUrl}/posts/${projectId}?status=published`;
                 const response = await fetch(url, {
                     method: "GET",                    headers: {
-                        "Content-Type": "application/json"},
+                        "Content-Type": "application/json"
+                    },
                 });
 
                 if (response.ok) {
@@ -164,7 +165,7 @@ export default function BlogPage() {
                             },
                             {
                                 title: "Company",                                items: [
-                                    {label: "About Us", href: "about"},
+                                    {label: "About Us", href: "/"},
                                     {label: "Our Team", href: "team"},
                                     {label: "Careers", href: "contact"}
                                 ]
@@ -182,4 +183,4 @@ export default function BlogPage() {
             </ReactLenis>
         </ThemeProvider>
     );
-}
+}

src/app/layout.tsx

@@ -1261,4 +1261,4 @@ export default function RootLayout({
       </ServiceWrapper>
     </html>
   );
-}
+}

src/app/page.tsx

@@ -1,4 +1,4 @@
-"use client"
+"use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
@@ -235,4 +235,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/products/page.tsx

@@ -0,0 +1,127 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import HeroBillboard from '@/components/sections/hero/HeroBillboard';
+import ProductCardFour from '@/components/sections/product/ProductCardFour';
+import FooterBase from '@/components/sections/footer/FooterBase';
+import { Zap, Heart } from 'lucide-react';
+
+export default function ProductsPage() {
+  const products = [
+    {
+      id: "1",      name: "Advanced Python Course",      price: "$299",      variant: "Lifetime Access · 40 Hours",      imageSrc: "https://img.b2bpic.net/free-photo/person-computing-software-code-laptop_482257-85707.jpg",      imageAlt: "Python programming course",      isFavorited: false,
+      onFavorite: () => console.log("Favorited product 1"),
+      onProductClick: () => console.log("Clicked product 1")
+    },
+    {
+      id: "2",      name: "Web Development Bootcamp",      price: "$499",      variant: "12 Weeks · Job Guarantee",      imageSrc: "https://img.b2bpic.net/free-photo/side-view-attractive-hispanic-developer-programming-software-using-computer-while-working-from-home_662251-988.jpg",      imageAlt: "Web development course",      isFavorited: false,
+      onFavorite: () => console.log("Favorited product 2"),
+      onProductClick: () => console.log("Clicked product 2")
+    },
+    {
+      id: "3",      name: "Data Science Masterclass",      price: "$399",      variant: "14 Weeks · Certification",      imageSrc: "https://img.b2bpic.net/free-photo/man-working-energy-innovations-his-laptop_23-2148820170.jpg",      imageAlt: "Data science course",      isFavorited: false,
+      onFavorite: () => console.log("Favorited product 3"),
+      onProductClick: () => console.log("Clicked product 3")
+    },
+    {
+      id: "4",      name: "Cloud & DevOps Course",      price: "$349",      variant: "10 Weeks · Hands-on Labs",      imageSrc: "https://img.b2bpic.net/free-photo/spacious-area-group-young-people-casual-clothes-working-modern-office_146671-16510.jpg",      imageAlt: "Cloud and DevOps training",      isFavorited: false,
+      onFavorite: () => console.log("Favorited product 4"),
+      onProductClick: () => console.log("Clicked product 4")
+    }
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="elastic-effect"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="sharp"
+      contentWidth="smallMedium"
+      sizing="largeSmallSizeMediumTitles"
+      background="floatingGradient"
+      cardStyle="gradient-bordered"
+      primaryButtonStyle="double-inset"
+      secondaryButtonStyle="solid"
+      headingFontWeight="semibold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          brandName="IT Home"
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "About", id: "about" },
+            { name: "Courses", id: "courses" },
+            { name: "Team", id: "team" },
+            { name: "Contact", id: "contact" }
+          ]}
+          button={{
+            text: "Enroll Now",            href: "contact"
+          }}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroBillboard
+          title="Explore Our Course Catalog"
+          description="Browse our comprehensive selection of in-demand tech courses designed to advance your career."
+          background={{ variant: "sparkles-gradient" }}
+          tag="Course Products"
+          tagIcon={Zap}
+          imageSrc="https://img.b2bpic.net/free-photo/spacious-area-group-young-people-casual-clothes-working-modern-office_146671-16510.jpg"
+          imageAlt="IT Home courses showcase"
+          buttons={[
+            { text: "View All Courses", href: "#products" },
+            { text: "Get Started", href: "contact" }
+          ]}
+        />
+      </div>
+
+      <div id="products" data-section="products">
+        <ProductCardFour
+          products={products}
+          title="Featured Courses"
+          description="Discover our most popular and highly-rated technology courses."
+          tag="Products"
+          textboxLayout="default"
+          gridVariant="uniform-all-items-equal"
+          animationType="slide-up"
+          useInvertedBackground="noInvert"
+          buttons={[
+            { text: "View All Products", href: "/products" },
+            { text: "Filter by Category", href: "/products" }
+          ]}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBase
+          logoText="IT Home"
+          copyrightText="© 2025 IT Home. All rights reserved."
+          columns={[
+            {
+              title: "Programs",              items: [
+                { label: "Web Development", href: "courses" },
+                { label: "Data Science", href: "courses" },
+                { label: "Python Programming", href: "courses" }
+              ]
+            },
+            {
+              title: "Company",              items: [
+                { label: "About Us", href: "/" },
+                { label: "Our Team", href: "team" },
+                { label: "Careers", href: "contact" }
+              ]
+            },
+            {
+              title: "Support",              items: [
+                { label: "Contact Us", href: "contact" },
+                { label: "FAQ", href: "faq" },
+                { label: "Student Portal", href: "https://portal.ithome.example.com" }
+              ]
+            }
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}