Add src/app/catalog/page.tsx

2026-05-12 08:25:53 +00:00
parent cbe8211166
commit 1fd7abef62
1 changed files with 71 additions and 0 deletions
--- a/src/app/catalog/page.tsx
+++ b/src/app/catalog/page.tsx
@@ -0,0 +1,71 @@
+"use client";
+
+import ReactLenis from "lenis/react";
+import ProductCatalog from "@/components/ecommerce/productCatalog/ProductCatalog";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import FooterCard from "@/components/sections/footer/FooterCard";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { useState } from "react";
+import { Instagram, Facebook, Linkedin } from "lucide-react";
+
+export default function CatalogPage() {
+    const [searchValue, setSearchValue] = useState("");
+    const [category, setCategory] = useState("All");
+
+    const products = [
+        { id: "1", name: "Range Rover Autobiography", price: "$450/day", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/destination/destination6.webp" },
+        { id: "2", name: "Porsche 911 Turbo", price: "$600/day", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/destination/destination5.webp" },
+        { id: "3", name: "Bentley Continental GT", price: "$800/day", rating: 4, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/luxury-travel-agency/destination/destination1.webp" },
+    ];
+
+    return (
+        <ThemeProvider
+            defaultButtonVariant="icon-arrow"
+            defaultTextAnimation="entrance-slide"
+            borderRadius="rounded"
+            contentWidth="medium"
+            sizing="medium"
+            background="none"
+            cardStyle="solid"
+            primaryButtonStyle="shadow"
+            secondaryButtonStyle="solid"
+            headingFontWeight="medium"
+        >
+            <ReactLenis root>
+                <NavbarLayoutFloatingInline
+                    navItems={[
+                        { name: "Home", id: "/" },
+                        { name: "Vehicles", id: "catalog" },
+                        { name: "Contact", id: "/#contact" },
+                    ]}
+                    brandName="Luxuria"
+                    button={{ text: "Plan Your Trip", href: "/#contact" }}
+                />
+                <div className="pt-32 pb-16">
+                    <ProductCatalog
+                        layout="page"
+                        products={products}
+                        searchValue={searchValue}
+                        onSearchChange={setSearchValue}
+                        filters={[
+                            {
+                                label: "Category",                                options: ["All", "SUV", "Sports", "Luxury"],
+                                selected: category,
+                                onChange: setCategory
+                            }
+                        ]}
+                    />
+                </div>
+                <FooterCard
+                    logoText="Luxuria"
+                    copyrightText="© 2025 Luxuria Travel | Luxury Journeys Worldwide"
+                    socialLinks={[
+                        { icon: Instagram, href: "#", ariaLabel: "Instagram" },
+                        { icon: Facebook, href: "#", ariaLabel: "Facebook" },
+                        { icon: Linkedin, href: "#", ariaLabel: "LinkedIn" },
+                    ]}
+                />
+            </ReactLenis>
+        </ThemeProvider>
+    );
+}