Add src/app/shop/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/contact/page.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import HeroBillboard from '@/components/sections/hero/HeroBillboard';
+import ContactSplit from '@/components/sections/contact/ContactSplit';
+import FooterBase from '@/components/sections/footer/FooterBase';
+import { Mail, Zap } from 'lucide-react';
+
+export default function ContactPage() {
+  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: "Testimonials", id: "testimonials" }
+          ]}
+          button={{
+            text: "Enroll Now",            href: "contact"
+          }}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroBillboard
+          title="Get In Touch With IT Home"
+          description="Have questions about our programs? Want to schedule a consultation? We're here to help you start your journey to a rewarding tech career."
+          background={{ variant: "sparkles-gradient" }}
+          tag="Contact Us"
+          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 contact page"
+          buttons={[
+            { text: "Back to Home", href: "/" }
+          ]}
+        />
+      </div>
+
+      <div id="contact-form" data-section="contact-form">
+        <ContactSplit
+          tag="Contact Information"
+          tagIcon={Mail}
+          title="Let's Connect"
+          description="Fill out the form below and our team will get back to you within 24 hours. Whether you have questions about our programs, need financial aid information, or want to schedule a campus tour, we're ready to help."
+          useInvertedBackground="noInvert"
+          imageSrc="https://img.b2bpic.net/free-photo/team-collaboration-IT-professionals_146671-16510.jpg"
+          imageAlt="IT Home team ready to help"
+          mediaPosition="right"
+          inputPlaceholder="your@email.com"
+          buttonText="Send Message"
+          termsText="We respect your privacy and will only use your email to respond to your inquiry."
+          onSubmit={(email) => {
+            console.log('Contact form submitted with email:', email);
+          }}
+        />
+      </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: "/" },
+                { label: "Data Science", href: "/" },
+                { label: "Python Programming", href: "/" }
+              ]
+            },
+            {
+              title: "Company",              items: [
+                { label: "About Us", href: "/" },
+                { label: "Our Team", href: "/" },
+                { label: "Careers", href: "contact" }
+              ]
+            },
+            {
+              title: "Support",              items: [
+                { label: "Contact Us", href: "contact" },
+                { label: "FAQ", href: "/" },
+                { label: "Student Portal", href: "https://portal.ithome.example.com" }
+              ]
+            }
+          ]}
+        />
+      </div>
+    </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';
@@ -9,9 +9,9 @@ import MetricCardTen from '@/components/sections/metrics/MetricCardTen';
 import TeamCardSix from '@/components/sections/team/TeamCardSix';
 import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
 import FaqSplitText from '@/components/sections/faq/FaqSplitText';
-import ContactText from '@/components/sections/contact/ContactText';
+import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FooterBase from '@/components/sections/footer/FooterBase';
-import { Award, Globe, Users, Zap } from 'lucide-react';
+import { Award, Globe, Users, Zap, Mail } from 'lucide-react';
 
 export default function LandingPage() {
   return (
@@ -193,14 +193,19 @@ export default function LandingPage() {
       </div>
 
       <div id="contact" data-section="contact">
-        <ContactText
-          text="Ready to transform your career with IT Home? Join thousands of successful graduates and start your journey into technology today."
-          useInvertedBackground="invertDefault"
-          animationType="entrance-slide"
-          buttons={[
-            { text: "Enroll Today", href: "contact" },
-            { text: "Schedule a Consultation", href: "contact" }
-          ]}
+        <ContactSplit
+          tag="Get In Touch"
+          tagIcon={Mail}
+          title="Ready to Start Your Journey?"
+          description="Join thousands of successful graduates and transform your career with IT Home. Contact us today to learn more about our programs and get started."
+          useInvertedBackground="noInvert"
+          imageSrc="https://img.b2bpic.net/free-photo/spacious-area-group-young-people-casual-clothes-working-modern-office_146671-16510.jpg"
+          imageAlt="Contact us at IT Home"
+          mediaPosition="right"
+          inputPlaceholder="Enter your email"
+          buttonText="Sign Up"
+          termsText="By signing up, you agree to our Terms and Conditions. We respect your privacy."
+          onSubmit={(email) => console.log('Submitted email:', email)}
         />
       </div>
 
@@ -235,4 +240,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: "/shop" },
+            { text: "Filter by Category", href: "/shop" }
+          ]}
+        />
+      </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>
+  );
+}

src/app/shop/page.tsx

@@ -0,0 +1,163 @@
+"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, Package } from 'lucide-react';
+
+export default function ShopPage() {
+  const allProducts = [
+    {
+      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")
+    },
+    {
+      id: "5",      name: "Cybersecurity Fundamentals",      price: "$379",      variant: "12 Weeks · Certification",      imageSrc: "https://img.b2bpic.net/free-photo/close-up-colleagues-learning-work_23-2149300706.jpg",      imageAlt: "Cybersecurity training course",      isFavorited: false,
+      onFavorite: () => console.log("Favorited product 5"),
+      onProductClick: () => console.log("Clicked product 5")
+    },
+    {
+      id: "6",      name: "JavaScript & React Advanced",      price: "$329",      variant: "8 Weeks · Project-Based",      imageSrc: "https://img.b2bpic.net/free-photo/mid-shot-counselor-cabinet_23-2148759108.jpg",      imageAlt: "JavaScript and React course",      isFavorited: false,
+      onFavorite: () => console.log("Favorited product 6"),
+      onProductClick: () => console.log("Clicked product 6")
+    },
+    {
+      id: "7",      name: "Machine Learning Basics",      price: "$449",      variant: "16 Weeks · Hands-on Labs",      imageSrc: "https://img.b2bpic.net/free-photo/closeup-senior-lecturer-with-arms-crossed_1262-1753.jpg",      imageAlt: "Machine learning course",      isFavorited: false,
+      onFavorite: () => console.log("Favorited product 7"),
+      onProductClick: () => console.log("Clicked product 7")
+    },
+    {
+      id: "8",      name: "Mobile App Development with Flutter",      price: "$369",      variant: "10 Weeks · Cross-Platform",      imageSrc: "https://img.b2bpic.net/free-photo/close-up-young-business-person-doing-internship_23-2149305396.jpg",      imageAlt: "Flutter mobile development course",      isFavorited: false,
+      onFavorite: () => console.log("Favorited product 8"),
+      onProductClick: () => console.log("Clicked product 8")
+    },
+    {
+      id: "9",      name: "Database Design & SQL",      price: "$279",      variant: "6 Weeks · Fundamentals",      imageSrc: "https://img.b2bpic.net/free-photo/cheerful-young-man-holding-folder-outdoor_74855-2121.jpg",      imageAlt: "Database and SQL course",      isFavorited: false,
+      onFavorite: () => console.log("Favorited product 9"),
+      onProductClick: () => console.log("Clicked product 9")
+    },
+    {
+      id: "10",      name: "UI/UX Design Principles",      price: "$319",      variant: "8 Weeks · Design Thinking",      imageSrc: "https://img.b2bpic.net/free-photo/blonde-young-woman-smiling-portrait-wearing-blue-gentle-shirt-building_158595-6609.jpg",      imageAlt: "UI/UX design course",      isFavorited: false,
+      onFavorite: () => console.log("Favorited product 10"),
+      onProductClick: () => console.log("Clicked product 10")
+    },
+    {
+      id: "11",      name: "AWS Solutions Architect",      price: "$429",      variant: "12 Weeks · Certification Prep",      imageSrc: "https://img.b2bpic.net/free-photo/blonde-young-woman-smiling-portrait-wearing-blue-gentle-shirt-building_158595-6612.jpg",      imageAlt: "AWS architect course",      isFavorited: false,
+      onFavorite: () => console.log("Favorited product 11"),
+      onProductClick: () => console.log("Clicked product 11")
+    },
+    {
+      id: "12",      name: "Docker & Kubernetes Essentials",      price: "$389",      variant: "10 Weeks · Container Orchestration",      imageSrc: "https://img.b2bpic.net/free-photo/close-up-smiley-woman-library_23-2149204737.jpg",      imageAlt: "Docker and Kubernetes course",      isFavorited: false,
+      onFavorite: () => console.log("Favorited product 12"),
+      onProductClick: () => console.log("Clicked product 12")
+    }
+  ];
+
+  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 Complete Course Shop"
+          description="Browse our comprehensive selection of in-demand tech courses designed to advance your career. Find the perfect course to match your learning goals."
+          background={{ variant: "sparkles-gradient" }}
+          tag="All 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: "Get Started", href: "contact" }
+          ]}
+        />
+      </div>
+
+      <div id="products" data-section="products">
+        <ProductCardFour
+          products={allProducts}
+          title="All Available Courses"
+          description="Discover our complete collection of technology courses with flexible learning options and industry certifications."
+          tag="Shop"
+          tagIcon={Package}
+          textboxLayout="default"
+          gridVariant="uniform-all-items-equal"
+          animationType="slide-up"
+          useInvertedBackground="noInvert"
+        />
+      </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>
+  );
+}