Merge version_2 into main #2
230
src/app/page.tsx
230
src/app/page.tsx
@@ -28,22 +28,11 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Shop",
|
||||
id: "products",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Reviews",
|
||||
id: "testimonials",
|
||||
},
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Shop", id: "products" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Reviews", id: "testimonials" },
|
||||
{ name: "Product", id: "/product-detail" },
|
||||
]}
|
||||
brandName="ThreadsCollection"
|
||||
/>
|
||||
@@ -51,64 +40,13 @@ export default function LandingPage() {
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboard
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Timeless Style for Every Season"
|
||||
description="Discover ThreadsCollection, where quality meets comfort. Hand-picked pieces to elevate your daily wardrobe."
|
||||
buttons={[
|
||||
{
|
||||
text: "Shop New Arrivals",
|
||||
href: "#products",
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "Shop New Arrivals", href: "#products" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/fashionable-clothing-collection-modern-boutique-store-generated-by-ai_188544-33893.jpg?_wi=1"
|
||||
imageAlt="ThreadsCollection storefront collection"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-male-personal-shopper-working_23-2148924132.jpg",
|
||||
alt: "Customer 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-caucasian-woman-holding-shopping-bags-make-selfie-by-camera-clothing-store_839833-1916.jpg",
|
||||
alt: "Customer 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/cheerful-young-girl-with-purchases_23-2147652124.jpg",
|
||||
alt: "Customer 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/brunette-woman-standing-bricks-wall-smiling-with-happy-face-looking-pointing-side-with-thumb-up_839833-15096.jpg",
|
||||
alt: "Customer 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/personal-shopper-helping-cutomer_23-2148924084.jpg",
|
||||
alt: "Customer 5",
|
||||
},
|
||||
]}
|
||||
avatarText="Join 5,000+ satisfied customers"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Sustainable Materials",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Free Shipping on Orders Over $100",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Worldwide Delivery",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Curated Quality",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Timeless Aesthetics",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -119,42 +57,9 @@ export default function LandingPage() {
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Classic Summer Dress",
|
||||
price: "$89",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-pretty-woman-walking-street-fashionable-outfit-holding-purse-wearing-black-leather-jacket-white-lace-dress-spring-autumn-style-full-length_285396-6762.jpg",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Linen Casual Shirt",
|
||||
price: "$65",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-looking-away_23-2148665449.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Structured Winter Coat",
|
||||
price: "$150",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-talking-phone-street_1303-13380.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Silk Minimalist Blouse",
|
||||
price: "$75",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/fathers-day-composition-with-jersey-shoes_23-2147790773.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Tailored Everyday Trousers",
|
||||
price: "$95",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-sexy-fashion-modern-businesswoman-model-white-suit-posing-street-background-blue-sky-walking_158538-11908.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Soft Knit Sweater",
|
||||
price: "$80",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-charming-brunette-dressed-stylish-clothes-leaning-against-brick-wall-room-with-loft-interior_613910-9341.jpg",
|
||||
},
|
||||
{ id: "p1", name: "Classic Summer Dress", price: "$89", imageSrc: "http://img.b2bpic.net/free-photo/young-pretty-woman-walking-street-fashionable-outfit-holding-purse-wearing-black-leather-jacket-white-lace-dress-spring-autumn-style-full-length_285396-6762.jpg", onProductClick: () => window.location.href = '/product-detail' },
|
||||
{ id: "p2", name: "Linen Casual Shirt", price: "$65", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-looking-away_23-2148665449.jpg" },
|
||||
{ id: "p3", name: "Structured Winter Coat", price: "$150", imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-talking-phone-street_1303-13380.jpg" },
|
||||
]}
|
||||
title="Curated Essentials"
|
||||
description="Our latest collection, designed for those who appreciate lasting quality and minimalist design."
|
||||
@@ -165,12 +70,7 @@ export default function LandingPage() {
|
||||
<TextAbout
|
||||
useInvertedBackground={true}
|
||||
title="Our Commitment to Quality Threads"
|
||||
buttons={[
|
||||
{
|
||||
text: "Learn More",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "Learn More", href: "#" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -178,48 +78,7 @@ export default function LandingPage() {
|
||||
<TestimonialCardTen
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
title: "Great quality!",
|
||||
quote: "I love the fabrics here. Everything is so soft and well-made.",
|
||||
name: "Emily P.",
|
||||
role: "Creative",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-male-personal-shopper-working_23-2148924132.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
title: "Staple pieces",
|
||||
quote: "ThreadsCollection has become my go-to for daily staples.",
|
||||
name: "Mark S.",
|
||||
role: "Designer",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-caucasian-woman-holding-shopping-bags-make-selfie-by-camera-clothing-store_839833-1916.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
title: "Perfect fit",
|
||||
quote: "The sizing is always spot on. Finally, clothing that fits just right.",
|
||||
name: "Sarah L.",
|
||||
role: "Architect",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cheerful-young-girl-with-purchases_23-2147652124.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
title: "Love the style",
|
||||
quote: "Chic, simple, and elegant pieces. I get compliments all the time.",
|
||||
name: "Anna V.",
|
||||
role: "Marketing",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/brunette-woman-standing-bricks-wall-smiling-with-happy-face-looking-pointing-side-with-thumb-up_839833-15096.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
title: "Sustainable focus",
|
||||
quote: "I appreciate the attention to detail and sustainable practices.",
|
||||
name: "David W.",
|
||||
role: "Writer",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/personal-shopper-helping-cutomer_23-2148924084.jpg",
|
||||
},
|
||||
]}
|
||||
testimonials={[]}
|
||||
title="Trusted by Style Seekers"
|
||||
description="Hear what our community says about ThreadsCollection."
|
||||
/>
|
||||
@@ -230,28 +89,8 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
title="Let's Connect"
|
||||
description="Have questions about our collections? Our team is here to assist you."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/fashionable-clothing-collection-modern-boutique-store-generated-by-ai_188544-33893.jpg?_wi=2"
|
||||
imageAlt="Contact support"
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Your Name",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Your Email",
|
||||
required: true,
|
||||
},
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "How can we help?",
|
||||
rows: 4,
|
||||
required: true,
|
||||
}}
|
||||
inputs={[{ name: "name", type: "text", placeholder: "Your Name", required: true }, { name: "email", type: "email", placeholder: "Your Email", required: true }]}
|
||||
textarea={{ name: "message", placeholder: "How can we help?", rows: 4, required: true }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -259,45 +98,8 @@ export default function LandingPage() {
|
||||
<FooterBaseReveal
|
||||
logoText="ThreadsCollection"
|
||||
columns={[
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About Us",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Careers",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
{
|
||||
label: "Shipping",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Returns",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Follow",
|
||||
items: [
|
||||
{
|
||||
label: "Instagram",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Twitter",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "Careers", href: "#" }] },
|
||||
{ title: "Support", items: [{ label: "Shipping", href: "#" }, { label: "Returns", href: "#" }] },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
77
src/app/product-detail/page.tsx
Normal file
77
src/app/product-detail/page.tsx
Normal file
@@ -0,0 +1,77 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
|
||||
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
|
||||
import ProductDetailCard from "@/components/ecommerce/productDetail/ProductDetailCard";
|
||||
|
||||
export default function ProductDetailPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-shift"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="soft"
|
||||
contentWidth="smallMedium"
|
||||
sizing="mediumLarge"
|
||||
background="fluid"
|
||||
cardStyle="subtle-shadow"
|
||||
primaryButtonStyle="double-inset"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Shop", id: "/#products" },
|
||||
{ name: "About", id: "/#about" },
|
||||
{ name: "Reviews", id: "/#testimonials" },
|
||||
]}
|
||||
brandName="ThreadsCollection"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="py-20">
|
||||
<ProductDetailCard
|
||||
layout="page"
|
||||
name="Classic Summer Dress"
|
||||
price="$89"
|
||||
description="A timeless summer essential, crafted from breathable, high-quality linen. Designed for comfort and effortless style on any occasion."
|
||||
images={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/young-pretty-woman-walking-street-fashionable-outfit-holding-purse-wearing-black-leather-jacket-white-lace-dress-spring-autumn-style-full-length_285396-6762.jpg", alt: "Front View" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/portrait-young-woman-looking-away_23-2148665449.jpg", alt: "Side View" }
|
||||
]}
|
||||
variants={[
|
||||
{ label: "Size", options: ["S", "M", "L", "XL"], selected: "M", onChange: (v) => console.log(v) },
|
||||
{ label: "Color", options: ["White", "Beige", "Black"], selected: "White", onChange: (v) => console.log(v) }
|
||||
]}
|
||||
quantity={{ label: "Quantity", options: ["1", "2", "3"], selected: "1", onChange: (v) => console.log(v) }}
|
||||
buttons={[{ text: "Add to Cart", onClick: () => console.log("Added") }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
logoText="ThreadsCollection"
|
||||
columns={[
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/#about" },
|
||||
{ label: "Careers", href: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
{ label: "Shipping", href: "#" },
|
||||
{ label: "Returns", href: "#" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
67
src/app/shop/page.tsx
Normal file
67
src/app/shop/page.tsx
Normal file
@@ -0,0 +1,67 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
||||
import ProductCatalog from '@/components/ecommerce/productCatalog/ProductCatalog';
|
||||
|
||||
export default function ShopPage() {
|
||||
const products = [
|
||||
{ id: "1", name: "Classic Summer Dress", price: "$89", rating: 4.8, imageSrc: "http://img.b2bpic.net/free-photo/young-pretty-woman-walking-street-fashionable-outfit-holding-purse-wearing-black-leather-jacket-white-lace-dress-spring-autumn-style-full-length_285396-6762.jpg" },
|
||||
{ id: "2", name: "Linen Casual Shirt", price: "$65", rating: 4.5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-looking-away_23-2148665449.jpg" },
|
||||
{ id: "3", name: "Structured Winter Coat", price: "$150", rating: 4.9, imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-talking-phone-street_1303-13380.jpg" },
|
||||
{ id: "4", name: "Silk Minimalist Blouse", price: "$75", rating: 4.7, imageSrc: "http://img.b2bpic.net/free-photo/fathers-day-composition-with-jersey-shoes_23-2147790773.jpg" },
|
||||
{ id: "5", name: "Tailored Everyday Trousers", price: "$95", rating: 4.6, imageSrc: "http://img.b2bpic.net/free-photo/portrait-sexy-fashion-modern-businesswoman-model-white-suit-posing-street-background-blue-sky-walking_158538-11908.jpg" },
|
||||
{ id: "6", name: "Soft Knit Sweater", price: "$80", rating: 4.8, imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-charming-brunette-dressed-stylish-clothes-leaning-against-brick-wall-room-with-loft-interior_613910-9341.jpg" },
|
||||
];
|
||||
|
||||
const filters = [
|
||||
{ label: "Category", options: ["All", "Dresses", "Shirts", "Coats", "Trousers"], selected: "All", onChange: () => {} },
|
||||
{ label: "Sort By", options: ["Featured", "Price: Low to High", "Price: High to Low"], selected: "Featured", onChange: () => {} }
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-shift"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="soft"
|
||||
contentWidth="smallMedium"
|
||||
sizing="mediumLarge"
|
||||
background="fluid"
|
||||
cardStyle="subtle-shadow"
|
||||
primaryButtonStyle="double-inset"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Shop", id: "/shop" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Reviews", id: "/testimonials" },
|
||||
]}
|
||||
brandName="ThreadsCollection"
|
||||
/>
|
||||
|
||||
<div className="pt-32 pb-20">
|
||||
<ProductCatalog
|
||||
layout="page"
|
||||
products={products}
|
||||
filters={filters}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<FooterBaseReveal
|
||||
logoText="ThreadsCollection"
|
||||
columns={[
|
||||
{ title: "Company", items: [{ label: "About Us", href: "/about" }, { label: "Careers", href: "#" }] },
|
||||
{ title: "Support", items: [{ label: "Shipping", href: "#" }, { label: "Returns", href: "#" }] },
|
||||
{ title: "Follow", items: [{ label: "Instagram", href: "#" }, { label: "Twitter", href: "#" }] },
|
||||
]}
|
||||
/>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user