Merge version_2 into main #4
@@ -29,10 +29,10 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Men", id: "#men" },
|
||||
{ name: "Women", id: "#women" },
|
||||
{ name: "New Arrivals", id: "#new-arrivals" },
|
||||
{ name: "Trending", id: "#trending" },
|
||||
{ name: "Men", id: "/products" },
|
||||
{ name: "Women", id: "/products" },
|
||||
{ name: "New Arrivals", id: "/products" },
|
||||
{ name: "Trending", id: "/products" },
|
||||
]}
|
||||
brandName="VOXE"
|
||||
/>
|
||||
@@ -59,7 +59,7 @@ export default function LandingPage() {
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/view-young-man-smiling-camera_197531-33438.jpg?_wi=11", imageAlt: "Model in inclusive fashion 5" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/view-young-man-smiling-camera_197531-33438.jpg?_wi=12", imageAlt: "Model in inclusive fashion 6" },
|
||||
]}
|
||||
buttons={[{ text: "Shop Men", href: "#men" }, { text: "Shop Women", href: "#women" }]}
|
||||
buttons={[{ text: "Shop Men", href: "/products" }, { text: "Shop Women", href: "/products" }]}
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/young-woman-blue-suit-posing-with-mirror-outdoors_23-2149445026.jpg", alt: "User 1" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/elegant-female-model-posing-window-elegant-waistcoat-new-feminity-concept_23-2148951061.jpg", alt: "User 2" },
|
||||
@@ -158,8 +158,8 @@ export default function LandingPage() {
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{ items: [{ label: "Men", href: "#men" }, { label: "Women", href: "#women" }] },
|
||||
{ items: [{ label: "Contact Us", href: "#contact" }, { label: "Privacy Policy", href: "#" }] },
|
||||
{ items: [{ label: "Men", href: "/products" }, { label: "Women", href: "/products" }] },
|
||||
{ items: [{ label: "Contact Us", href: "/products" }, { label: "Privacy Policy", href: "#" }] },
|
||||
{ items: [{ label: "Instagram", href: "#" }, { label: "Twitter", href: "#" }] },
|
||||
]}
|
||||
logoText="VOXE"
|
||||
|
||||
94
src/app/products/page.tsx
Normal file
94
src/app/products/page.tsx
Normal file
@@ -0,0 +1,94 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
||||
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
||||
import { ChevronRight, Filter, SlidersHorizontal } from "lucide-react";
|
||||
|
||||
export default function ProductListingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="mediumSizeLargeTitles"
|
||||
background="noiseDiagonalGradient"
|
||||
cardStyle="subtle-shadow"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Men", id: "/products" },
|
||||
{ name: "Women", id: "/products" },
|
||||
{ name: "Shop All", id: "/products" },
|
||||
]}
|
||||
brandName="VOXE"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<main className="pt-24 pb-16 px-4 md:px-8 max-w-7xl mx-auto flex gap-8">
|
||||
<aside className="hidden md:block w-64 space-y-8">
|
||||
<div className="flex items-center gap-2 font-semibold text-lg border-b pb-4 mb-4">
|
||||
<SlidersHorizontal className="w-5 h-5" />
|
||||
Filters
|
||||
</div>
|
||||
{['Category', 'Type', 'Size', 'Color', 'Price Range'].map((filter) => (
|
||||
<div key={filter} className="space-y-3">
|
||||
<h4 className="font-medium">{filter}</h4>
|
||||
<div className="space-y-1.5">
|
||||
{['Option 1', 'Option 2', 'Option 3'].map(opt => (
|
||||
<label key={opt} className="flex items-center gap-2 text-sm cursor-pointer hover:text-amber-600">
|
||||
<input type="checkbox" className="accent-amber-500" /> {opt}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</aside>
|
||||
|
||||
<div className="flex-1">
|
||||
<div className="flex justify-between items-center mb-6 text-sm text-gray-500">
|
||||
<div className="flex items-center gap-2">
|
||||
<span>Home</span> <ChevronRight className="w-4 h-4" /> <span>Shop All</span>
|
||||
</div>
|
||||
<span>Showing 124 products</span>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardTwo
|
||||
animationType="slide-up"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
textboxLayout="default"
|
||||
title=""
|
||||
description=""
|
||||
products={[
|
||||
{ id: "p1", brand: "VOXE", name: "Signature Blazer", price: "$185", rating: 5, reviewCount: "24", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-blue-suit-posing-with-mirror-outdoors_23-2149445026.jpg" },
|
||||
{ id: "p2", brand: "VOXE", name: "Essential Loafer", price: "$140", rating: 4, reviewCount: "42", imageSrc: "http://img.b2bpic.net/free-photo/elegant-female-model-posing-window-elegant-waistcoat-new-feminity-concept_23-2148951061.jpg" },
|
||||
{ id: "p3", brand: "VOXE", name: "Urban Tee", price: "$55", rating: 5, reviewCount: "89", imageSrc: "http://img.b2bpic.net/free-photo/fashion-portrait-young-elegant-woman_1328-2718.jpg" },
|
||||
{ id: "p4", brand: "VOXE", name: "Classic Trouser", price: "$125", rating: 4, reviewCount: "15", imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-linens_23-2148817547.jpg" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{ items: [{ label: "Shop All", href: "/products" }, { label: "Help", href: "#" }] },
|
||||
{ items: [{ label: "Contact Us", href: "#" }, { label: "Terms", href: "#" }] },
|
||||
]}
|
||||
logoText="VOXE"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user