Update src/app/returns/page.tsx

Merge version_3 into main

src/app/catalog/page.tsx

@@ -3,10 +3,19 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import ProductCardFour from '@/components/sections/product/ProductCardFour';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
+import ProductCatalog from '@/components/ecommerce/productCatalog/ProductCatalog';
+import { useState } from "react";
 
 export default function CatalogPage() {
+  const [searchValue, setSearchValue] = useState("");
+
+  const allBooks = [
+    { id: "1", name: "The Great Gatsby", price: "Checked In", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/book-cover_23-2148890356.jpg" },
+    { id: "2", name: "A Brief History of Time", price: "Checked Out", rating: 4, imageSrc: "http://img.b2bpic.net/free-photo/scientific-journal-cover_23-2148890357.jpg" },
+    { id: "3", name: "1984", price: "Checked In", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/old-archive-document_23-2148890358.jpg" },
+  ];
+
   return (
     <ThemeProvider
         defaultButtonVariant="text-stagger"
@@ -21,44 +30,33 @@ export default function CatalogPage() {
         headingFontWeight="medium"
     >
       <ReactLenis root>
-        <div id="nav" data-section="nav">
-            <NavbarStyleCentered
-            navItems={[
-              { name: "Home", id: "/" },
-              { name: "Catalog", id: "/catalog" },
-            ]}
-            brandName="PulseGaming"
-          />
-        </div>
-
-        <div id="catalog" data-section="products" className="py-20">
-          <ProductCardFour
-            animationType="slide-up"
-            textboxLayout="default"
-            gridVariant="four-items-2x2-equal-grid"
-            useInvertedBackground={false}
-            title="Book Catalog"
-            description="Browse our complete library of titles and filter by category or genre."
-            products={[
-              { id: "1", name: "The Art of Gaming", price: "$29.00", variant: "Hardcover", imageSrc: "http://img.b2bpic.net/free-photo/still-life-books-versus-technology_23-2150062907.jpg" },
-              { id: "2", name: "Tech Future 2025", price: "$19.00", variant: "Paperback", imageSrc: "http://img.b2bpic.net/free-photo/computer-mouse-yellow-background-isolated-flat-lay_169016-26395.jpg" },
-              { id: "3", name: "Digital Horizons", price: "$35.00", variant: "E-Book", imageSrc: "http://img.b2bpic.net/free-photo/gradient-view-illuminated-neon-gaming-desk-setup-with-keyboard_23-2149529388.jpg" },
-              { id: "4", name: "Coding Mastery", price: "$45.00", variant: "Hardcover", imageSrc: "http://img.b2bpic.net/free-photo/gaming-setup-arrangement-high-angle_23-2149680232.jpg" }
-            ]}
-          />
-        </div>
-
-        <div id="footer" data-section="footer">
-            <FooterSimple
-            columns={[
-              { title: "Company", items: [{ label: "About", href: "/" }, { label: "Careers", href: "/" }] },
-              { title: "Library", items: [{ label: "Catalog", href: "/catalog" }] },
-            ]}
-            bottomLeftText="© 2024 PulseGaming. All rights reserved."
-            bottomRightText="Privacy Policy"
+        <NavbarStyleCentered
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Catalog", id: "/catalog" },
+            { name: "FAQ", id: "/#faq" },
+            { name: "Contact", id: "/#contact" },
+          ]}
+          brandName="LibrarySystem"
+        />
+        <div className="pt-32 pb-16">
+          <ProductCatalog 
+            layout="page"
+            products={allBooks.filter(b => b.name.toLowerCase().includes(searchValue.toLowerCase()))}
+            searchValue={searchValue}
+            onSearchChange={setSearchValue}
+            searchPlaceholder="Search our books..."
           />
         </div>
+        <FooterSimple
+          columns={[
+            { title: "System", items: [{ label: "About Us", href: "#" }, { label: "Help", href: "#" }] },
+            { title: "Quick Links", items: [{ label: "Catalog", href: "/catalog" }, { label: "Account", href: "#" }] },
+          ]}
+          bottomLeftText="© 2024 LibraryManagement. All rights reserved."
+          bottomRightText="Privacy Policy"
+        />
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/checkout/page.tsx

@@ -8,18 +8,16 @@ import ContactCTA from '@/components/sections/contact/ContactCTA';
 
 export default function CheckoutPage() {
   return (
-    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="pill" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
       <ReactLenis root>
         <div id="nav" data-section="nav">
-          <NavbarStyleCentered navItems={[{ name: "Home", id: "/" }, { name: "Checkout", id: "/checkout" }, { name: "Returns", id: "/returns" }]} />
+          <NavbarStyleCentered navItems={[{ name: "Home", id: "/" }, { name: "Checkout", id: "/checkout" }, { name: "Returns", id: "/returns" }]} brandName="PulseGaming" />
         </div>
         <div className="pt-32 pb-20 px-6 max-w-4xl mx-auto">
             <h1 className="text-4xl font-bold mb-8">Checkout</h1>
             <p>Your items are ready. Please complete your details to finish your order.</p>
         </div>
-        <div id="contact" data-section="contact">
-          <ContactCTA tag="Support" title="Need help with checkout?" description="Reach out if you have any trouble finishing your order." buttons={[{ text: "Support", href: "#" }]} background={{ variant: "plain" }} useInvertedBackground={false} />
-        </div>
+        <ContactCTA tag="Support" title="Need help with checkout?" description="Reach out if you have any trouble finishing your order." buttons={[{ text: "Support", href: "#" }]} background={{ variant: "plain" }} useInvertedBackground={false} />
         <div id="footer" data-section="footer">
           <FooterSimple columns={[{ title: "Links", items: [{ label: "Home", href: "/" }] }]} bottomLeftText="© 2024 PulseGaming" bottomRightText="Privacy Policy" />
         </div>

src/app/login/page.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import ContactForm from '@/components/form/ContactForm';
+
+export default function LoginPage() {
+  return (
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="pill" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Products", id: "/products" },
+            { name: "Features", id: "/features" },
+            { name: "Login", id: "/login" },
+            { name: "Register", id: "/register" },
+          ]}
+          brandName="PulseGaming"
+        />
+      </div>
+      <div className="min-h-screen flex items-center justify-center pt-24">
+        <ContactForm 
+            tag="Login"
+            title="Welcome Back"
+            description="Log in to access your account and manage your orders."
+            buttonText="Log In"
+            useInvertedBackground={false}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -37,6 +37,7 @@ export default function LandingPage() {
         { name: "Features", id: "#features" },
         { name: "FAQ", id: "#faq" },
         { name: "Contact", id: "/contact" },
+        { name: "Dashboard", id: "/dashboard" },
       ]}
       brandName="PulseGaming"
     />
@@ -47,7 +48,7 @@ export default function LandingPage() {
       background={{ variant: "rotated-rays-animated" }}
       title="Level Up Your Setup"
       description="Experience professional-grade gaming accessories designed for performance, comfort, and ultimate control."
-      buttons={[{ text: "Shop Now", href: "#products" }]}
+      buttons={[{ text: "Shop Now", href: "#products" }, { text: "Login", href: "/login" }]}
       carouselItems={[
         { id: "1", imageSrc: "http://img.b2bpic.net/free-photo/gaming-setup-arrangement-high-angle_23-2149680232.jpg", imageAlt: "Gaming setup" },
         { id: "2", imageSrc: "http://img.b2bpic.net/free-photo/gradient-view-illuminated-neon-gaming-desk-setup-with-keyboard_23-2149529388.jpg", imageAlt: "Keyboard" },

src/app/profile/page.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+
+export default function ProfilePage() {
+  return (
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="pill" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Products", id: "/products" },
+            { name: "Features", id: "/features" },
+            { name: "Login", id: "/login" },
+            { name: "Register", id: "/register" },
+          ]}
+          brandName="PulseGaming"
+        />
+      </div>
+      <div className="min-h-screen pt-32 px-8">
+        <h1 className="text-4xl font-bold">My Profile</h1>
+        <p className="mt-4 text-lg opacity-70">Account management settings will be displayed here.</p>
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/register/page.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import ContactForm from '@/components/form/ContactForm';
+
+export default function RegisterPage() {
+  return (
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="pill" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Products", id: "/products" },
+            { name: "Features", id: "/features" },
+            { name: "Login", id: "/login" },
+            { name: "Register", id: "/register" },
+          ]}
+          brandName="PulseGaming"
+        />
+      </div>
+      <div className="min-h-screen flex items-center justify-center pt-24">
+        <ContactForm 
+            tag="Register"
+            title="Create Account"
+            description="Join the community and get early access to new product drops."
+            buttonText="Register"
+            useInvertedBackground={false}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/returns/page.tsx

@@ -8,18 +8,16 @@ import ContactCTA from '@/components/sections/contact/ContactCTA';
 
 export default function ReturnsPage() {
   return (
-    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="pill" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
       <ReactLenis root>
         <div id="nav" data-section="nav">
-          <NavbarStyleCentered navItems={[{ name: "Home", id: "/" }, { name: "Checkout", id: "/checkout" }, { name: "Returns", id: "/returns" }]} />
+          <NavbarStyleCentered navItems={[{ name: "Home", id: "/" }, { name: "Checkout", id: "/checkout" }, { name: "Returns", id: "/returns" }]} brandName="PulseGaming" />
         </div>
         <div className="pt-32 pb-20 px-6 max-w-4xl mx-auto">
             <h1 className="text-4xl font-bold mb-8">Returns</h1>
             <p>Need to return an item? Our process is simple and hassle-free.</p>
         </div>
-        <div id="contact" data-section="contact">
-          <ContactCTA tag="Returns" title="Questions about returns?" description="Our support team is here to assist with any return requests." buttons={[{ text: "Contact", href: "#" }]} background={{ variant: "plain" }} useInvertedBackground={false} />
-        </div>
+        <ContactCTA tag="Returns" title="Questions about returns?" description="Our support team is here to assist with any return requests." buttons={[{ text: "Contact", href: "#" }]} background={{ variant: "plain" }} useInvertedBackground={false} />
         <div id="footer" data-section="footer">
           <FooterSimple columns={[{ title: "Links", items: [{ label: "Home", href: "/" }] }]} bottomLeftText="© 2024 PulseGaming" bottomRightText="Privacy Policy" />
         </div>