Merge version_2 into main #2
296
src/app/page.tsx
296
src/app/page.tsx
@@ -3,7 +3,7 @@
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import FaqBase from '@/components/sections/faq/FaqBase';
|
||||
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
||||
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
||||
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
||||
@@ -15,31 +15,22 @@ export default function LandingPage() {
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="soft"
|
||||
borderRadius="pill"
|
||||
contentWidth="mediumSmall"
|
||||
sizing="largeSizeMediumTitles"
|
||||
background="noise"
|
||||
cardStyle="inset"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
background="fluid"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="light"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Shop",
|
||||
id: "#products",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "#about",
|
||||
},
|
||||
{
|
||||
name: "Community",
|
||||
id: "#testimonials",
|
||||
},
|
||||
{ name: "Shop", id: "#products" },
|
||||
{ name: "About", id: "#about" },
|
||||
{ name: "Community", id: "#testimonials" },
|
||||
]}
|
||||
brandName="VIRTUAL-STREET"
|
||||
/>
|
||||
@@ -47,77 +38,24 @@ export default function LandingPage() {
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitKpi
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
background={{ variant: "glowing-orb" }}
|
||||
title="DEFY CONVENTIONAL STREETWEAR"
|
||||
description="Experience our futuristic collection with high-fidelity 3D designs that push the boundaries of urban fashion. Join the new wave of digital-native style."
|
||||
kpis={[
|
||||
{
|
||||
value: "500+",
|
||||
label: "Active Users",
|
||||
},
|
||||
{
|
||||
value: "12k",
|
||||
label: "Items Sold",
|
||||
},
|
||||
{
|
||||
value: "4.9",
|
||||
label: "Rating",
|
||||
},
|
||||
{ value: "500+", label: "Active Users" },
|
||||
{ value: "12k", label: "Items Sold" },
|
||||
{ value: "4.9", label: "Rating" },
|
||||
]}
|
||||
enableKpiAnimation={true}
|
||||
buttons={[
|
||||
{
|
||||
text: "Shop Now",
|
||||
href: "#products",
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "Shop Now", href: "#products" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/pink-hair-girl-avantgarde-style-wearing-sunglasses_114579-17766.jpg?_wi=1"
|
||||
mediaAnimation="blur-reveal"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-teenage-girl-recording-reels-herself-outdoors-social-media_23-2149749778.jpg",
|
||||
alt: "User 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/gen-z-people-exploring-absurdist-fashion-beauty_23-2151104085.jpg",
|
||||
alt: "User 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/african-american-woman-violet-dress-cap-posed-outdoor-walking-stairs_627829-2115.jpg",
|
||||
alt: "User 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/teenager-shooting-with-projector-side-view_23-2149424980.jpg",
|
||||
alt: "User 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-person-traveling-through-japan_23-2149287924.jpg",
|
||||
alt: "User 5",
|
||||
},
|
||||
]}
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "FUTURISTIC",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "URBAN",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "DIGITAL-FIRST",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "LIMITLESS",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "NEXT-GEN",
|
||||
},
|
||||
{ type: "text", text: "FUTURISTIC" },
|
||||
{ type: "text", text: "URBAN" },
|
||||
{ type: "text", text: "DIGITAL-FIRST" },
|
||||
{ type: "text", text: "LIMITLESS" },
|
||||
{ type: "text", text: "NEXT-GEN" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -129,60 +67,10 @@ export default function LandingPage() {
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
brand: "V-Street",
|
||||
name: "Cyber Hoodie",
|
||||
price: "$120",
|
||||
rating: 5,
|
||||
reviewCount: "42",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cool-hip-hop-young-man-white_1385-931.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
brand: "V-Street",
|
||||
name: "Neon Runner",
|
||||
price: "$180",
|
||||
rating: 5,
|
||||
reviewCount: "128",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-person-wearing-futuristic-sneakers_23-2151005728.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
brand: "V-Street",
|
||||
name: "Digital Tee",
|
||||
price: "$45",
|
||||
rating: 4,
|
||||
reviewCount: "85",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-man-leaning-against-fence_23-2148239532.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
brand: "V-Street",
|
||||
name: "Cargo Tech",
|
||||
price: "$140",
|
||||
rating: 5,
|
||||
reviewCount: "34",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/low-section-man-standing-rock-against-blue-sky_23-2148182853.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
brand: "V-Street",
|
||||
name: "Urban Cap",
|
||||
price: "$30",
|
||||
rating: 5,
|
||||
reviewCount: "91",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-cool-teenage-boy-wearing-cap_23-2149085893.jpg",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
brand: "V-Street",
|
||||
name: "Tech Bomber",
|
||||
price: "$220",
|
||||
rating: 5,
|
||||
reviewCount: "15",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-attractive-male-model-color-flash-light_158595-5117.jpg",
|
||||
},
|
||||
{ id: "1", brand: "V-Street", name: "Cyber Hoodie", price: "$120", rating: 5, reviewCount: "42", imageSrc: "http://img.b2bpic.net/free-photo/cool-hip-hop-young-man-white_1385-931.jpg?_wi=1" },
|
||||
{ id: "2", brand: "V-Street", name: "Neon Runner", price: "$180", rating: 5, reviewCount: "128", imageSrc: "http://img.b2bpic.net/free-photo/close-up-person-wearing-futuristic-sneakers_23-2151005728.jpg" },
|
||||
{ id: "3", brand: "V-Street", name: "Digital Tee", price: "$45", rating: 4, reviewCount: "85", imageSrc: "http://img.b2bpic.net/free-photo/front-view-man-leaning-against-fence_23-2148239532.jpg" },
|
||||
{ id: "4", brand: "V-Street", name: "Cargo Tech", price: "$140", rating: 5, reviewCount: "34", imageSrc: "http://img.b2bpic.net/free-photo/low-section-man-standing-rock-against-blue-sky_23-2148182853.jpg" }
|
||||
]}
|
||||
title="THE COLLECTION"
|
||||
description="Engineered for the future, designed for the street."
|
||||
@@ -196,18 +84,9 @@ export default function LandingPage() {
|
||||
title="BORN IN THE METAVERSE"
|
||||
description="We are a digital-native streetwear brand bridging the gap between virtual aesthetics and physical reality. Each garment is meticulously designed for comfort, style, and a touch of the future."
|
||||
bulletPoints={[
|
||||
{
|
||||
title: "Sustainable Tech",
|
||||
description: "Made with eco-friendly technical fabrics.",
|
||||
},
|
||||
{
|
||||
title: "Limited Drops",
|
||||
description: "Exclusive releases for the community.",
|
||||
},
|
||||
{
|
||||
title: "Community-First",
|
||||
description: "Designs influenced by our followers.",
|
||||
},
|
||||
{ title: "Sustainable Tech", description: "Made with eco-friendly technical fabrics." },
|
||||
{ title: "Limited Drops", description: "Exclusive releases for the community." },
|
||||
{ title: "Community-First", description: "Designs influenced by our followers." },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/cool-hip-hop-young-man-white_1385-931.jpg?_wi=2"
|
||||
mediaAnimation="slide-up"
|
||||
@@ -220,41 +99,8 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Alex K.",
|
||||
role: "Trendsetter",
|
||||
testimonial: "The design quality is unmatched. Truly the future of streetwear.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-teenage-girl-recording-reels-herself-outdoors-social-media_23-2149749778.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Maya R.",
|
||||
role: "Artist",
|
||||
testimonial: "I love the cyberpunk aesthetic in every piece. Highly recommended!",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/gen-z-people-exploring-absurdist-fashion-beauty_23-2151104085.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Sam B.",
|
||||
role: "Creative",
|
||||
testimonial: "These fits are comfortable, edgy, and definitely start conversations.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/african-american-woman-violet-dress-cap-posed-outdoor-walking-stairs_627829-2115.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Jordan P.",
|
||||
role: "Gamer",
|
||||
testimonial: "Finally, streetwear that looks like it belongs in the future.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/teenager-shooting-with-projector-side-view_23-2149424980.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Elena M.",
|
||||
role: "Collector",
|
||||
testimonial: "Each drop feels like a work of art. The quality is exceptional.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-person-traveling-through-japan_23-2149287924.jpg",
|
||||
},
|
||||
{ id: "1", name: "Alex K.", role: "Trendsetter", testimonial: "The design quality is unmatched. Truly the future of streetwear." },
|
||||
{ id: "2", name: "Maya R.", role: "Artist", testimonial: "I love the cyberpunk aesthetic in every piece. Highly recommended!" },
|
||||
]}
|
||||
title="VOICES OF THE STREET"
|
||||
description="Hear what our early adopters and trendsetters have to say about the future of fashion."
|
||||
@@ -267,94 +113,24 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
title="FREQUENTLY ASKED"
|
||||
description="Everything you need to know about our drops and shipping."
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "What is digital-native streetwear?",
|
||||
content: "It's apparel designed with virtual aesthetics in mind, bridging the gap between gaming culture and physical fashion.",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "How do shipping times work?",
|
||||
content: "We ship worldwide. Most orders arrive within 7-14 business days depending on your location.",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Are these limited editions?",
|
||||
content: "Yes, we operate on a drop-model basis to ensure exclusivity and quality.",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
title: "How do I return an item?",
|
||||
content: "Returns are accepted within 30 days of receiving your item, provided it is in original condition.",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
title: "Where are you based?",
|
||||
content: "Our creative team operates out of the digital ether and physical studios worldwide.",
|
||||
},
|
||||
]}
|
||||
faqsAnimation="slide-up"
|
||||
faqs={[
|
||||
{ id: "1", title: "What is digital-native streetwear?", content: "It's apparel designed with virtual aesthetics in mind." },
|
||||
{ id: "2", title: "How do shipping times work?", content: "We ship worldwide." },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/pink-hair-girl-avantgarde-style-wearing-sunglasses_114579-17766.jpg?_wi=2"
|
||||
<FooterLogoEmphasis
|
||||
logoText="VIRTUAL-STREET"
|
||||
columns={[
|
||||
{
|
||||
title: "Shop",
|
||||
items: [
|
||||
{
|
||||
label: "New Arrivals",
|
||||
href: "#products",
|
||||
},
|
||||
{
|
||||
label: "Hoodies",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Sneakers",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "Our Story",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Press",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ items: [{ label: "New Arrivals", href: "#products" }, { label: "Hoodies" }] },
|
||||
{ items: [{ label: "Our Story", href: "#about" }, { label: "Contact" }] },
|
||||
]}
|
||||
copyrightText="© 2025 VIRTUAL-STREET | Digital Fashion Co."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -11,7 +11,7 @@ html {
|
||||
body {
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: var(--font-open-sans), sans-serif;
|
||||
font-family: var(--font-montserrat), sans-serif;
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
overscroll-behavior: none;
|
||||
@@ -24,5 +24,5 @@ h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: var(--font-inter), sans-serif;
|
||||
font-family: var(--font-montserrat), sans-serif;
|
||||
}
|
||||
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #050012;
|
||||
--card: #040121;
|
||||
--foreground: #f0e6ff;
|
||||
--primary-cta: #c89bff;
|
||||
--background: #0a0a0a;
|
||||
--card: #1a1a1a;
|
||||
--foreground: #f5f5f5;
|
||||
--primary-cta: #dfff1c;
|
||||
--primary-cta-text: #050012;
|
||||
--secondary-cta: #1d123b;
|
||||
--secondary-cta: #1a1a1a;
|
||||
--secondary-cta-text: #f0e6ff;
|
||||
--accent: #684f7b;
|
||||
--background-accent: #65417c;
|
||||
--accent: #8b9a1b;
|
||||
--background-accent: #5d6b00;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user