Merge version_2 into main #2
@@ -2,175 +2,26 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import TeamCardOne from '@/components/sections/team/TeamCardOne';
|
||||
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
||||
import { MapPin, PenTool } from "lucide-react";
|
||||
import MediaAbout from '@/components/sections/about/MediaAbout';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
|
||||
export default function LandingPage() {
|
||||
export default function AboutPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="expand-hover"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="largeSizeMediumTitles"
|
||||
background="noiseDiagonalGradient"
|
||||
cardStyle="subtle-shadow"
|
||||
primaryButtonStyle="flat"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<ThemeProvider>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "/",
|
||||
},
|
||||
{
|
||||
name: "Women",
|
||||
id: "/women",
|
||||
},
|
||||
{
|
||||
name: "Men",
|
||||
id: "/men",
|
||||
},
|
||||
{
|
||||
name: "New Arrivals",
|
||||
id: "/new-arrivals",
|
||||
},
|
||||
{
|
||||
name: "Sale",
|
||||
id: "/sale",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "/about",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "/contact",
|
||||
},
|
||||
]}
|
||||
brandName="VELORA"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about-brand" data-section="about-brand">
|
||||
<TextSplitAbout
|
||||
useInvertedBackground={false}
|
||||
title="Our Story"
|
||||
description={[
|
||||
"VELORA was born from a desire to blend minimalist aesthetics with timeless quality.",
|
||||
"Our mission is to create garments that are both elegant and functional for the modern lifestyle.",
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metric" data-section="metric">
|
||||
<MetricCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
title="Our Reach"
|
||||
description="Growing globally."
|
||||
metrics={[
|
||||
{
|
||||
id: "a1",
|
||||
value: "10",
|
||||
title: "Flagship Stores",
|
||||
description: "Global presence.",
|
||||
icon: MapPin,
|
||||
},
|
||||
{
|
||||
id: "a2",
|
||||
value: "200",
|
||||
title: "Expert Designers",
|
||||
description: "The heart of VELORA.",
|
||||
icon: PenTool,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
title="Leadership"
|
||||
description="The minds behind the brand."
|
||||
members={[
|
||||
{
|
||||
id: "tm1",
|
||||
name: "Sarah J.",
|
||||
role: "Creative Director",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-wearing-black-dress_23-2149884577.jpg?_wi=3",
|
||||
},
|
||||
{
|
||||
id: "tm2",
|
||||
name: "David W.",
|
||||
role: "CEO",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-confident-stylish-hipster-lambersexual-model-sexy-man-dressed-jeans-overcoat-fashion-male-posing-near-grey-wall-studio_158538-26515.jpg?_wi=4",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Shop",
|
||||
items: [
|
||||
{
|
||||
label: "Women",
|
||||
href: "/women",
|
||||
},
|
||||
{
|
||||
label: "Men",
|
||||
href: "/men",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "/about",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "/contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Policies",
|
||||
items: [
|
||||
{
|
||||
label: "Shipping",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Returns",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
bottomLeftText="© 2024 VELORA. All rights reserved."
|
||||
bottomRightText="Privacy Policy | Terms of Service"
|
||||
/>
|
||||
</div>
|
||||
<NavbarStyleApple
|
||||
navItems={[{ name: "Home", id: "/" }, { name: "About", id: "/about" }, { name: "Contact", id: "/contact" }, { name: "Cart", id: "/cart" }]}
|
||||
brandName="VELORA"
|
||||
/>
|
||||
<MediaAbout
|
||||
title="Our Story"
|
||||
description="Founded on the principles of timeless design, Velora redefines modern luxury for the discerning individual."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/luxury-fashion-atelier_23-2150863970.jpg"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
<FooterSimple columns={[]} />
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
28
src/app/cart/page.tsx
Normal file
28
src/app/cart/page.tsx
Normal file
@@ -0,0 +1,28 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import ProductCart from '@/components/ecommerce/cart/ProductCart';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
|
||||
export default function CartPage() {
|
||||
return (
|
||||
<ThemeProvider>
|
||||
<ReactLenis root>
|
||||
<NavbarStyleApple
|
||||
navItems={[{ name: "Home", id: "/" }, { name: "About", id: "/about" }, { name: "Contact", id: "/contact" }, { name: "Cart", id: "/cart" }]}
|
||||
brandName="VELORA"
|
||||
/>
|
||||
<ProductCart
|
||||
isOpen={true}
|
||||
onClose={() => {}}
|
||||
items={[]}
|
||||
total="$0"
|
||||
buttons={[{ text: "Proceed to Checkout", href: "/checkout" }]}
|
||||
/>
|
||||
<FooterSimple columns={[]} />
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
24
src/app/checkout/page.tsx
Normal file
24
src/app/checkout/page.tsx
Normal file
@@ -0,0 +1,24 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
|
||||
export default function CheckoutPage() {
|
||||
return (
|
||||
<ThemeProvider>
|
||||
<ReactLenis root>
|
||||
<NavbarStyleApple
|
||||
navItems={[{ name: "Home", id: "/" }, { name: "About", id: "/about" }, { name: "Contact", id: "/contact" }, { name: "Cart", id: "/cart" }]}
|
||||
brandName="VELORA"
|
||||
/>
|
||||
<div className="min-h-[60vh] flex flex-col items-center justify-center p-8">
|
||||
<h1 className="text-4xl font-bold mb-4">Secure Checkout</h1>
|
||||
<p>Complete your purchase securely.</p>
|
||||
</div>
|
||||
<FooterSimple columns={[]} />
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
@@ -2,188 +2,29 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import ContactFaq from '@/components/sections/contact/ContactFaq';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import { Clock, Headphones, Mail, Phone } from "lucide-react";
|
||||
import { Mail } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
export default function ContactPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="expand-hover"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="largeSizeMediumTitles"
|
||||
background="noiseDiagonalGradient"
|
||||
cardStyle="subtle-shadow"
|
||||
primaryButtonStyle="flat"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<ThemeProvider>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "/",
|
||||
},
|
||||
{
|
||||
name: "Women",
|
||||
id: "/women",
|
||||
},
|
||||
{
|
||||
name: "Men",
|
||||
id: "/men",
|
||||
},
|
||||
{
|
||||
name: "New Arrivals",
|
||||
id: "/new-arrivals",
|
||||
},
|
||||
{
|
||||
name: "Sale",
|
||||
id: "/sale",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "/about",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "/contact",
|
||||
},
|
||||
]}
|
||||
brandName="VELORA"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact-faq" data-section="contact-faq">
|
||||
<ContactFaq
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Shipping Times",
|
||||
content: "We offer worldwide shipping within 3-5 business days.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Returns Policy",
|
||||
content: "Returns are accepted within 30 days of purchase for a full refund.",
|
||||
},
|
||||
]}
|
||||
ctaTitle="Need assistance?"
|
||||
ctaDescription="Our support team is ready to help you with your order."
|
||||
ctaButton={{
|
||||
text: "Contact Support",
|
||||
}}
|
||||
ctaIcon={Phone}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metric" data-section="metric">
|
||||
<MetricCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
title="Reach Us Anytime"
|
||||
description="We are here to help."
|
||||
metrics={[
|
||||
{
|
||||
id: "c1",
|
||||
value: "24/7",
|
||||
title: "Customer Service",
|
||||
description: "Always ready.",
|
||||
icon: Headphones,
|
||||
},
|
||||
{
|
||||
id: "c2",
|
||||
value: "1hr",
|
||||
title: "Avg Response Time",
|
||||
description: "Fast support.",
|
||||
icon: Clock,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactFaq
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
ctaTitle="Get In Touch"
|
||||
ctaDescription="Have questions? Email our team directly."
|
||||
ctaButton={{
|
||||
text: "Email Us",
|
||||
}}
|
||||
ctaIcon={Mail}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "Where are you based?",
|
||||
content: "Our design studio is in Paris.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "Can I visit a store?",
|
||||
content: "Yes, visit our flagship stores globally.",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Shop",
|
||||
items: [
|
||||
{
|
||||
label: "Women",
|
||||
href: "/women",
|
||||
},
|
||||
{
|
||||
label: "Men",
|
||||
href: "/men",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "/about",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "/contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Policies",
|
||||
items: [
|
||||
{
|
||||
label: "Shipping",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Returns",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
bottomLeftText="© 2024 VELORA. All rights reserved."
|
||||
bottomRightText="Privacy Policy | Terms of Service"
|
||||
/>
|
||||
</div>
|
||||
<NavbarStyleApple
|
||||
navItems={[{ name: "Home", id: "/" }, { name: "About", id: "/about" }, { name: "Contact", id: "/contact" }, { name: "Cart", id: "/cart" }]}
|
||||
brandName="VELORA"
|
||||
/>
|
||||
<ContactFaq
|
||||
ctaTitle="Get In Touch"
|
||||
ctaDescription="Our dedicated team is here to assist you with your luxury needs."
|
||||
ctaButton={{ text: "Email Us" }}
|
||||
ctaIcon={Mail}
|
||||
animationType="slide-up"
|
||||
faqs={[]}
|
||||
/>
|
||||
<FooterSimple columns={[]} />
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
254
src/app/page.tsx
254
src/app/page.tsx
@@ -29,34 +29,12 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "/",
|
||||
},
|
||||
{
|
||||
name: "Women",
|
||||
id: "/women",
|
||||
},
|
||||
{
|
||||
name: "Men",
|
||||
id: "/men",
|
||||
},
|
||||
{
|
||||
name: "New Arrivals",
|
||||
id: "/new-arrivals",
|
||||
},
|
||||
{
|
||||
name: "Sale",
|
||||
id: "/sale",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "/about",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "/contact",
|
||||
},
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Women", id: "/women" },
|
||||
{ name: "Men", id: "/men" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
{ name: "Cart", id: "/cart" }
|
||||
]}
|
||||
brandName="VELORA"
|
||||
/>
|
||||
@@ -64,73 +42,12 @@ export default function LandingPage() {
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplit
|
||||
background={{
|
||||
variant: "radial-gradient",
|
||||
}}
|
||||
background={{ variant: "radial-gradient" }}
|
||||
title="New Season, New Statement"
|
||||
description="Discover timeless fashion for every day, curated for the modern wardrobe."
|
||||
buttons={[
|
||||
{
|
||||
text: "Shop Women",
|
||||
href: "/women",
|
||||
},
|
||||
{
|
||||
text: "Shop Men",
|
||||
href: "/men",
|
||||
},
|
||||
{
|
||||
text: "New Arrivals",
|
||||
href: "/new-arrivals",
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "Shop Women", href: "/women" }, { text: "Shop Men", href: "/men" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-psd/luxury-men-s-fashion-template-design_23-2150863970.jpg?_wi=1"
|
||||
imageAlt="Fashion model wearing new collection"
|
||||
mediaAnimation="blur-reveal"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/front-view-woman-wearing-black-dress_23-2149884577.jpg",
|
||||
alt: "Customer 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-handsome-confident-stylish-hipster-lambersexual-model-sexy-man-dressed-jeans-overcoat-fashion-male-posing-near-grey-wall-studio_158538-26515.jpg",
|
||||
alt: "Customer 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/attractive-young-woman-dressed-floral-dress_158595-4779.jpg",
|
||||
alt: "Customer 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/beautiful-woman-talking-phone_23-2148660691.jpg",
|
||||
alt: "Customer 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-psd/luxury-men-s-fashion-template-design_23-2150863970.jpg",
|
||||
alt: "Customer 5",
|
||||
},
|
||||
]}
|
||||
avatarText="Trusted by 10,000+ fashion enthusiasts"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Timeless Elegance",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Sustainable Luxury",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Modern Silhouette",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Premium Quality",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Worldwide Delivery",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -140,44 +57,7 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
brand: "VELORA",
|
||||
name: "Oversized Blazer",
|
||||
price: "$295",
|
||||
rating: 5,
|
||||
reviewCount: "120",
|
||||
imageSrc: "http://img.b2bpic.net/free-psd/luxury-men-s-fashion-template-design_23-2150863970.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
brand: "VELORA",
|
||||
name: "Linen Shirt",
|
||||
price: "$120",
|
||||
rating: 4,
|
||||
reviewCount: "85",
|
||||
imageSrc: "http://img.b2bpic.net/free-psd/luxury-men-s-fashion-template-design_23-2150863970.jpg?_wi=3",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
brand: "VELORA",
|
||||
name: "Wide-Leg Trousers",
|
||||
price: "$180",
|
||||
rating: 5,
|
||||
reviewCount: "92",
|
||||
imageSrc: "http://img.b2bpic.net/free-psd/luxury-men-s-fashion-template-design_23-2150863970.jpg?_wi=4",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
brand: "VELORA",
|
||||
name: "Basic Tee",
|
||||
price: "$45",
|
||||
rating: 4,
|
||||
reviewCount: "210",
|
||||
imageSrc: "http://img.b2bpic.net/free-psd/luxury-men-s-fashion-template-design_23-2150863970.jpg?_wi=5",
|
||||
},
|
||||
]}
|
||||
products={[]}
|
||||
title="Best Sellers"
|
||||
description="Our most loved pieces, essential for your luxury wardrobe."
|
||||
/>
|
||||
@@ -186,33 +66,7 @@ export default function LandingPage() {
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwelve
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Alice M.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-wearing-black-dress_23-2149884577.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "James L.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-confident-stylish-hipster-lambersexual-model-sexy-man-dressed-jeans-overcoat-fashion-male-posing-near-grey-wall-studio_158538-26515.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Sofia R.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/attractive-young-woman-dressed-floral-dress_158595-4779.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Marcus K.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-talking-phone_23-2148660691.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Elena D.",
|
||||
imageSrc: "http://img.b2bpic.net/free-psd/luxury-men-s-fashion-template-design_23-2150863970.jpg?_wi=6",
|
||||
},
|
||||
]}
|
||||
testimonials={[]}
|
||||
cardTitle="Client Voices"
|
||||
cardTag="Reviews"
|
||||
cardAnimation="blur-reveal"
|
||||
@@ -227,94 +81,16 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
title="Our Impact"
|
||||
description="Redefining the standard of luxury fashion with conscious craftsmanship."
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "15+",
|
||||
title: "Years Experience",
|
||||
description: "Defining style since 2009.",
|
||||
icon: Clock,
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "50K",
|
||||
title: "Happy Clients",
|
||||
description: "Across 40+ countries.",
|
||||
icon: Users,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="product" data-section="product">
|
||||
<ProductCardFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
title="New Arrivals"
|
||||
description="Explore the freshest pieces for the upcoming season."
|
||||
products={[
|
||||
{
|
||||
id: "n1",
|
||||
name: "Silk Blouse",
|
||||
price: "$210",
|
||||
variant: "Cream",
|
||||
imageSrc: "http://img.b2bpic.net/free-psd/luxury-men-s-fashion-template-design_23-2150863970.jpg?_wi=7",
|
||||
},
|
||||
{
|
||||
id: "n2",
|
||||
name: "Cashmere Knit",
|
||||
price: "$340",
|
||||
variant: "Grey",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-confident-stylish-hipster-lambersexual-model-sexy-man-dressed-jeans-overcoat-fashion-male-posing-near-grey-wall-studio_158538-26515.jpg?_wi=2",
|
||||
},
|
||||
]}
|
||||
metrics={[]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Shop",
|
||||
items: [
|
||||
{
|
||||
label: "Women",
|
||||
href: "/women",
|
||||
},
|
||||
{
|
||||
label: "Men",
|
||||
href: "/men",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "/about",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "/contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Policies",
|
||||
items: [
|
||||
{
|
||||
label: "Shipping",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Returns",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ title: "Shop", items: [{ label: "Women", href: "/women" }, { label: "Men", href: "/men" }] },
|
||||
{ title: "Company", items: [{ label: "About", href: "/about" }, { label: "Contact", href: "/contact" }] },
|
||||
{ title: "Account", items: [{ label: "Cart", href: "/cart" }, { label: "Checkout", href: "/checkout" }] }
|
||||
]}
|
||||
bottomLeftText="© 2024 VELORA. All rights reserved."
|
||||
bottomRightText="Privacy Policy | Terms of Service"
|
||||
@@ -323,4 +99,4 @@ export default function LandingPage() {
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
32
src/app/product/[id]/page.tsx
Normal file
32
src/app/product/[id]/page.tsx
Normal file
@@ -0,0 +1,32 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import { useParams } from "next/navigation";
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
|
||||
export default function ProductDetailPage() {
|
||||
return (
|
||||
<ThemeProvider>
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Shop", id: "/shop" },
|
||||
]}
|
||||
brandName="VELORA"
|
||||
/>
|
||||
<div className="container mx-auto pt-32 px-6 flex flex-col md:flex-row gap-12">
|
||||
<div className="w-full md:w-1/2 aspect-square bg-gray-100 rounded-lg flex items-center justify-center">
|
||||
<span className="text-gray-400">Product Image</span>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 flex flex-col gap-6">
|
||||
<h1 className="text-4xl font-bold">Premium Essential Piece</h1>
|
||||
<p className="text-2xl">$295</p>
|
||||
<p className="text-gray-600">Crafted with precision, designed for elegance. This piece is a wardrobe staple.</p>
|
||||
<button className="w-full md:w-auto bg-black text-white px-8 py-3 rounded-full hover:opacity-80">
|
||||
Add to Cart
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
34
src/app/shop/page.tsx
Normal file
34
src/app/shop/page.tsx
Normal file
@@ -0,0 +1,34 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ProductCatalog from "@/components/ecommerce/productCatalog/ProductCatalog";
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import ReactLenis from "lenis/react";
|
||||
|
||||
export default function ShopPage() {
|
||||
return (
|
||||
<ThemeProvider>
|
||||
<ReactLenis root>
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Shop", id: "/shop" },
|
||||
{ name: "Women", id: "/women" },
|
||||
{ name: "Men", id: "/men" },
|
||||
]}
|
||||
brandName="VELORA"
|
||||
/>
|
||||
<div className="pt-24">
|
||||
<ProductCatalog
|
||||
layout="page"
|
||||
products={[
|
||||
{ id: "p1", name: "Oversized Blazer", price: "$295", rating: 5, imageSrc: "http://img.b2bpic.net/free-psd/luxury-men-s-fashion-template-design_23-2150863970.jpg?_wi=2" },
|
||||
{ id: "p2", name: "Linen Shirt", price: "$120", rating: 4, imageSrc: "http://img.b2bpic.net/free-psd/luxury-men-s-fashion-template-design_23-2150863970.jpg?_wi=3" }
|
||||
]}
|
||||
filters={[{ label: "Category", options: ["All", "Men", "Women"], selected: "All", onChange: (v) => console.log(v) }]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
@@ -11,14 +11,14 @@
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #ffffff;
|
||||
--card: #f9f9f9;
|
||||
--card: #f7f2ea;
|
||||
--foreground: #1a1a1a;
|
||||
--primary-cta: #1c1c1c;
|
||||
--primary-cta-text: #ffffff;
|
||||
--secondary-cta: #ffffff;
|
||||
--secondary-cta: #efebe5;
|
||||
--secondary-cta-text: #1c1c1c;
|
||||
--accent: #e2e2e2;
|
||||
--background-accent: #f5f5f5;
|
||||
--background-accent: #f5f4f0;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user