Update src/app/returns/page.tsx

Merge version_2 into main

src/app/admin/dashboard/page.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+
+export default function AdminDashboardPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="text-stagger"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="pill"
+        contentWidth="medium"
+        sizing="largeSmall"
+        background="aurora"
+        cardStyle="subtle-shadow"
+        primaryButtonStyle="double-inset"
+        secondaryButtonStyle="layered"
+        headingFontWeight="medium"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Dashboard", id: "#overview" },
+              { name: "Analytics", id: "#analytics" },
+            ]}
+            brandName="PulseGaming Admin"
+          />
+        </div>
+
+        <div id="overview" data-section="overview">
+          <MetricCardFourteen
+            tag="Dashboard"
+            title="Overview"
+            metrics={[
+              { id: "1", value: "$84,290", description: "Total Revenue" },
+              { id: "2", value: "1,284", description: "New Signups" },
+              { id: "3", value: "482", description: "Active Orders" },
+              { id: "4", value: "98%", description: "System Uptime" },
+            ]}
+            useInvertedBackground={false}
+          />
+        </div>
+
+        <div id="analytics" data-section="analytics">
+          <MetricCardFourteen
+            tag="Analytics"
+            title="Performance Metrics"
+            metrics={[
+              { id: "a1", value: "+12%", description: "Conversion Growth" },
+              { id: "a2", value: "4.8s", description: "Avg Page Load" },
+              { id: "a3", value: "32ms", description: "API Response" },
+              { id: "a4", value: "85%", description: "Retention Rate" },
+            ]}
+            useInvertedBackground={true}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterSimple
+            columns={[
+              { title: "System", items: [{ label: "Logs", href: "#" }, { label: "Settings", href: "#" }] },
+              { title: "Support", items: [{ label: "Documentation", href: "#" }] },
+            ]}
+            bottomLeftText="© 2024 PulseGaming Admin."
+            bottomRightText=""
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/book-reservations/page.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+import ContactSplit from '@/components/sections/contact/ContactSplit';
+
+export default function BookReservationsPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="text-stagger"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="pill"
+        contentWidth="medium"
+        sizing="largeSmall"
+        background="aurora"
+        cardStyle="subtle-shadow"
+        primaryButtonStyle="double-inset"
+        secondaryButtonStyle="layered"
+        headingFontWeight="medium"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+            <NavbarStyleCentered
+            navItems={[
+                { name: "Home", id: "/" },
+                { name: "Book Reservations", id: "#reservation" },
+                { name: "Contact", id: "#contact" },
+            ]}
+            brandName="PulseGaming"
+            />
+        </div>
+
+        <div id="reservation" data-section="reservation">
+            <ContactSplit
+                tag="Reserve Your Spot"
+                title="Book Your Experience"
+                description="Secure your time in our premium gaming lounge for an unmatched competitive atmosphere."
+                background={{ variant: "plain" }}
+                useInvertedBackground={false}
+                buttonText="Reserve Now"
+            />
+        </div>
+
+        <div id="contact" data-section="contact">
+            <ContactCTA
+                useInvertedBackground={true}
+                background={{ variant: "plain" }}
+                tag="Need Help?"
+                title="Questions About Booking?"
+                description="Reach out to our support team for any inquiries regarding private events or group reservations."
+                buttons={[{ text: "Contact Support", href: "#" }]}
+            />
+        </div>
+
+        <div id="footer" data-section="footer">
+            <FooterSimple
+                columns={[
+                    { title: "Company", items: [{ label: "About", href: "/" }, { label: "Careers", href: "/" }] },
+                    { title: "Products", items: [{ label: "Keyboards", href: "/" }, { label: "Mice", href: "/" }] },
+                ]}
+                bottomLeftText="© 2024 PulseGaming. All rights reserved."
+                bottomRightText="Privacy Policy"
+            />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/catalog/page.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+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"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="pill"
+        contentWidth="medium"
+        sizing="largeSmall"
+        background="aurora"
+        cardStyle="subtle-shadow"
+        primaryButtonStyle="double-inset"
+        secondaryButtonStyle="layered"
+        headingFontWeight="medium"
+    >
+      <ReactLenis root>
+        <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

@@ -0,0 +1,27 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
+
+export default function CheckoutPage() {
+  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">
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <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>
+        <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>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/contact/page.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+
+export default function ContactPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="text-stagger"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="pill"
+        contentWidth="medium"
+        sizing="largeSmall"
+        background="aurora"
+        cardStyle="subtle-shadow"
+        primaryButtonStyle="double-inset"
+        secondaryButtonStyle="layered"
+        headingFontWeight="medium"
+    >
+      <ReactLenis root>
+        <NavbarStyleCentered
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Products", id: "/#products" },
+            { name: "Features", id: "/#features" },
+            { name: "FAQ", id: "/#faq" },
+            { name: "Contact", id: "/contact" },
+          ]}
+          brandName="PulseGaming"
+        />
+        
+        <ContactCenter
+          tag="Contact Us"
+          title="How can we help?"
+          description="Reach out to our team for any inquiries, support, or partnership opportunities."
+          background={{ variant: "plain" }}
+          useInvertedBackground={false}
+        />
+        
+        <FaqSplitMedia
+          title="Commonly Asked"
+          description="Find quick answers to common questions about our products and services."
+          faqs={[
+            { id: "f1", title: "Shipping times?", content: "Standard shipping takes 3-5 business days." },
+            { id: "f2", title: "Returns policy?", content: "We offer hassle-free 30-day returns on all items." }
+          ]}
+          faqsAnimation="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={true}
+          mediaPosition="left"
+        />
+        
+        <FooterSimple
+          columns={[
+            { title: "Company", items: [{ label: "About", href: "#" }, { label: "Careers", href: "#" }] },
+            { title: "Products", items: [{ label: "Keyboards", href: "#" }, { label: "Mice", href: "#" }] },
+          ]}
+          bottomLeftText="© 2024 PulseGaming. All rights reserved."
+          bottomRightText="Privacy Policy"
+        />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

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/members/page.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+import { useState } from "react";
+
+export default function MemberManagementPage() {
+  const [members, setMembers] = useState<Array<{ id: string, name: string, role: string }>>([
+      { id: "1", name: "Alex Smith", role: "Pro Player" },
+      { id: "2", name: "Jordan Lee", role: "Streamer" }
+  ]);
+
+  return (
+    <ThemeProvider
+        defaultButtonVariant="text-stagger"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="pill"
+        contentWidth="medium"
+        sizing="largeSmall"
+        background="aurora"
+        cardStyle="subtle-shadow"
+        primaryButtonStyle="double-inset"
+        secondaryButtonStyle="layered"
+        headingFontWeight="medium"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+            <NavbarStyleCentered
+            navItems={[
+                { name: "Home", id: "/" },
+                { name: "Members", id: "/members" },
+            ]}
+            brandName="PulseGaming"
+            />
+        </div>
+
+        <div id="registration" data-section="registration">
+            <ContactSplitForm 
+                title="Member Registration"
+                description="Join our professional network of gamers and creators today."
+                inputs={[
+                    { name: "name", type: "text", placeholder: "Full Name", required: true },
+                    { name: "email", type: "email", placeholder: "Email Address", required: true }
+                ]}
+                buttonText="Register Now"
+                useInvertedBackground={false}
+            />
+        </div>
+
+        <div id="profile" data-section="profile">
+            <div className="container mx-auto py-20">
+                <h2 className="text-3xl font-bold mb-10 text-center">Member Profiles</h2>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    {members.map(member => (
+                        <div key={member.id} className="p-6 rounded-2xl bg-card border shadow-sm">
+                            <h3 className="text-xl font-semibold">{member.name}</h3>
+                            <p className="text-muted-foreground">{member.role}</p>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </div>
+
+        <div id="footer" data-section="footer">
+            <FooterSimple
+            columns={[
+                { title: "Company", items: [{ label: "About", href: "#" }, { label: "Careers", href: "#" }] },
+                { title: "Products", items: [{ label: "Keyboards", href: "#" }, { label: "Mice", href: "#" }] },
+            ]}
+            bottomLeftText="© 2024 PulseGaming. All rights reserved."
+            bottomRightText="Privacy Policy"
+            />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -32,11 +32,12 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleCentered
       navItems={[
-        { name: "Home", id: "#hero" },
+        { name: "Home", id: "/" },
         { name: "Products", id: "#products" },
         { name: "Features", id: "#features" },
         { name: "FAQ", id: "#faq" },
-        { name: "Contact", id: "#contact" },
+        { 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" },
@@ -184,7 +185,7 @@ export default function LandingPage() {
       tag="Get In Touch"
       title="Ready to Upgrade?"
       description="Join our newsletter or reach out for bulk orders and support requests."
-      buttons={[{ text: "Contact Support", href: "#" }]}
+      buttons={[{ text: "Contact Support", href: "/contact" }]}
     />
   </div>
 
@@ -201,4 +202,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

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

@@ -0,0 +1,27 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
+
+export default function ReturnsPage() {
+  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">
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <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>
+        <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>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}