Merge version_1 into main #1
246
src/app/page.tsx
246
src/app/page.tsx
@@ -30,24 +30,13 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Collection",
|
||||
id: "products",
|
||||
},
|
||||
{
|
||||
name: "FAQ",
|
||||
id: "faq",
|
||||
},
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Collection", id: "products" },
|
||||
{ name: "FAQ", id: "faq" },
|
||||
]}
|
||||
brandName="DEMON APPAREL"
|
||||
button={{ text: "Shop Now", href: "#products" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -56,14 +45,8 @@ export default function LandingPage() {
|
||||
logoText="DEMON APPAREL"
|
||||
description="Premium, dark streetwear crafted for those who embrace the shadow. Redefining men's fashion with a bold, demonic edge."
|
||||
buttons={[
|
||||
{
|
||||
text: "Shop Collection",
|
||||
href: "#products",
|
||||
},
|
||||
{
|
||||
text: "Learn More",
|
||||
href: "#about",
|
||||
},
|
||||
{ text: "Shop Collection", href: "#products" },
|
||||
{ text: "Learn More", href: "#about" },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/young-beautiful-woman-business-suit_1303-17722.jpg"
|
||||
imageAlt="edgy streetwear men editorial"
|
||||
@@ -77,18 +60,9 @@ export default function LandingPage() {
|
||||
title="Born in the Dark"
|
||||
description="We are a boutique fashion house dedicated to high-quality, dark-aesthetic clothing. Our designs are inspired by ancient myth, modern grit, and the rebellious spirit within."
|
||||
bulletPoints={[
|
||||
{
|
||||
title: "Premium Fabrics",
|
||||
description: "Constructed from high-grade cotton and leather.",
|
||||
},
|
||||
{
|
||||
title: "Edgy Design",
|
||||
description: "Unique graphics and silhouettes inspired by gothic legends.",
|
||||
},
|
||||
{
|
||||
title: "Limited Drops",
|
||||
description: "Exclusivity guaranteed in every piece we craft.",
|
||||
},
|
||||
{ title: "Premium Fabrics", description: "Constructed from high-grade cotton and leather." },
|
||||
{ title: "Edgy Design", description: "Unique graphics and silhouettes inspired by gothic legends." },
|
||||
{ title: "Limited Drops", description: "Exclusivity guaranteed in every piece we craft." },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/stylish-young-man-sitting-stool-sunlight-against-grey-wall_23-2148130365.jpg"
|
||||
imageAlt="gothic streetwear fashion detail"
|
||||
@@ -103,48 +77,12 @@ export default function LandingPage() {
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Sigil Hoodie",
|
||||
price: "$120",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/husband-pointing-something-wife_23-2148399519.jpg",
|
||||
imageAlt: "black streetwear hoodie gothic",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Tactical Trouser",
|
||||
price: "$145",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/red-haired-punk-girl-wear-black-with-bass-guitar-abadoned-place-portrait-gothic-woman-musician_627829-13998.jpg",
|
||||
imageAlt: "tactical urban trousers men",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Abyss Graphic Tee",
|
||||
price: "$55",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-streetwear-illustration_23-2151222427.jpg",
|
||||
imageAlt: "dark graphic streetwear tee",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Leather Jacket",
|
||||
price: "$320",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-man-listening-music-headphones-close-up_23-2148381737.jpg",
|
||||
imageAlt: "leather streetwear jacket men",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Dark Tech Accessory",
|
||||
price: "$85",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/dark-style-lamp-indoors_23-2151105978.jpg",
|
||||
imageAlt: "urban accessory dark streetwear",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Combat Boot",
|
||||
price: "$190",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/legs-woman-black-dress-with-hat-ground_23-2147902821.jpg",
|
||||
imageAlt: "edgy combat boots streetwear",
|
||||
},
|
||||
{ id: "p1", name: "Sigil Hoodie", price: "$120", imageSrc: "http://img.b2bpic.net/free-photo/husband-pointing-something-wife_23-2148399519.jpg", imageAlt: "black streetwear hoodie gothic" },
|
||||
{ id: "p2", name: "Tactical Trouser", price: "$145", imageSrc: "http://img.b2bpic.net/free-photo/red-haired-punk-girl-wear-black-with-bass-guitar-abadoned-place-portrait-gothic-woman-musician_627829-13998.jpg", imageAlt: "tactical urban trousers men" },
|
||||
{ id: "p3", name: "Abyss Graphic Tee", price: "$55", imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-streetwear-illustration_23-2151222427.jpg", imageAlt: "dark graphic streetwear tee" },
|
||||
{ id: "p4", name: "Leather Jacket", price: "$320", imageSrc: "http://img.b2bpic.net/free-photo/young-man-listening-music-headphones-close-up_23-2148381737.jpg", imageAlt: "leather streetwear jacket men" },
|
||||
{ id: "p5", name: "Dark Tech Accessory", price: "$85", imageSrc: "http://img.b2bpic.net/free-photo/dark-style-lamp-indoors_23-2151105978.jpg", imageAlt: "urban accessory dark streetwear" },
|
||||
{ id: "p6", name: "Combat Boot", price: "$190", imageSrc: "http://img.b2bpic.net/free-photo/legs-woman-black-dress-with-hat-ground_23-2147902821.jpg", imageAlt: "edgy combat boots streetwear" },
|
||||
]}
|
||||
title="The Collection"
|
||||
description="Explore our curated lineup of edgy, dark streetwear for the modern man."
|
||||
@@ -157,39 +95,9 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Durable Stitching",
|
||||
author: "Tailoring",
|
||||
description: "Reinforced seams for lasting durability in high-stress wear.",
|
||||
tags: [
|
||||
"Quality",
|
||||
"Build",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-model-with-earphones_23-2149429038.jpg",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Breathable Material",
|
||||
author: "Comfort",
|
||||
description: "High-quality, moisture-wicking materials for daily use.",
|
||||
tags: [
|
||||
"Tech",
|
||||
"Comfort",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/expressive-woman-moving-her-body-full-shot_23-2149429034.jpg",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Sustainable Supply",
|
||||
author: "Ethics",
|
||||
description: "Responsibly sourced materials for a cleaner conscience.",
|
||||
tags: [
|
||||
"Ethics",
|
||||
"Earth",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/crow-skull-tshirt-illustration_43623-1831.jpg",
|
||||
},
|
||||
{ id: "f1", title: "Durable Stitching", author: "Tailoring", description: "Reinforced seams for lasting durability in high-stress wear.", tags: ["Quality", "Build"], imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-model-with-earphones_23-2149429038.jpg" },
|
||||
{ id: "f2", title: "Breathable Material", author: "Comfort", description: "High-quality, moisture-wicking materials for daily use.", tags: ["Tech", "Comfort"], imageSrc: "http://img.b2bpic.net/free-photo/expressive-woman-moving-her-body-full-shot_23-2149429034.jpg" },
|
||||
{ id: "f3", title: "Sustainable Supply", author: "Ethics", description: "Responsibly sourced materials for a cleaner conscience.", tags: ["Ethics", "Earth"], imageSrc: "http://img.b2bpic.net/free-vector/crow-skull-tshirt-illustration_43623-1831.jpg" },
|
||||
]}
|
||||
title="Unrivaled Quality"
|
||||
description="Beyond the design, we prioritize comfort, durability, and a perfect fit."
|
||||
@@ -202,60 +110,16 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Alex R.",
|
||||
role: "Creative",
|
||||
company: "Urban Edge",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/dark-blonde-bearded-man-crosses-his-hands-chest-posing-black-shirt_8353-1116.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Mark V.",
|
||||
role: "Designer",
|
||||
company: "Ink & Steel",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/stylish-blond-bearded-male-dressed-elegant-classic-jacket_613910-11188.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Josh P.",
|
||||
role: "Developer",
|
||||
company: "Code Tech",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-with-red-beard-poses-black-background_8353-1317.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Chris D.",
|
||||
role: "Artist",
|
||||
company: "Neon Sky",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-sitting_23-2149213193.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Sam K.",
|
||||
role: "Photographer",
|
||||
company: "Dark Lens",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-young-woman-black-jacket-with-stylish-hairstyle-looking-camera-isolated-purple-background_291049-2380.jpg",
|
||||
},
|
||||
{ id: "t1", name: "Alex R.", role: "Creative", company: "Urban Edge", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/dark-blonde-bearded-man-crosses-his-hands-chest-posing-black-shirt_8353-1116.jpg" },
|
||||
{ id: "t2", name: "Mark V.", role: "Designer", company: "Ink & Steel", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/stylish-blond-bearded-male-dressed-elegant-classic-jacket_613910-11188.jpg" },
|
||||
{ id: "t3", name: "Josh P.", role: "Developer", company: "Code Tech", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-with-red-beard-poses-black-background_8353-1317.jpg" },
|
||||
{ id: "t4", name: "Chris D.", role: "Artist", company: "Neon Sky", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-sitting_23-2149213193.jpg" },
|
||||
{ id: "t5", name: "Sam K.", role: "Photographer", company: "Dark Lens", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-young-woman-black-jacket-with-stylish-hairstyle-looking-camera-isolated-purple-background_291049-2380.jpg" },
|
||||
]}
|
||||
kpiItems={[
|
||||
{
|
||||
value: "10k+",
|
||||
label: "Community Members",
|
||||
},
|
||||
{
|
||||
value: "5k+",
|
||||
label: "Orders Fulfilled",
|
||||
},
|
||||
{
|
||||
value: "4.9/5",
|
||||
label: "Average Rating",
|
||||
},
|
||||
{ value: "10k+", label: "Community Members" },
|
||||
{ value: "5k+", label: "Orders Fulfilled" },
|
||||
{ value: "4.9/5", label: "Average Rating" },
|
||||
]}
|
||||
title="Voice of the Dark"
|
||||
description="What our customers are saying about our premium streetwear."
|
||||
@@ -266,21 +130,9 @@ export default function LandingPage() {
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "What sizing guide do you use?",
|
||||
content: "Our clothes are true to size; consult our detailed size chart for precise fits.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "Are designs limited?",
|
||||
content: "Yes, our drops are strictly limited to ensure exclusivity.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "How long is shipping?",
|
||||
content: "Shipping within the continental region typically takes 3-5 business days.",
|
||||
},
|
||||
{ id: "q1", title: "What sizing guide do you use?", content: "Our clothes are true to size; consult our detailed size chart for precise fits." },
|
||||
{ id: "q2", title: "Are designs limited?", content: "Yes, our drops are strictly limited to ensure exclusivity." },
|
||||
{ id: "q3", title: "How long is shipping?", content: "Shipping within the continental region typically takes 3-5 business days." },
|
||||
]}
|
||||
sideTitle="Common Questions"
|
||||
sideDescription="Need clarity? We have answers."
|
||||
@@ -291,9 +143,7 @@ export default function LandingPage() {
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "animated-grid",
|
||||
}}
|
||||
background={{ variant: "animated-grid" }}
|
||||
tag="Newsletter"
|
||||
title="Join the Legion"
|
||||
description="Sign up for updates on our newest drops and exclusive community content."
|
||||
@@ -305,38 +155,8 @@ export default function LandingPage() {
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Home",
|
||||
href: "#hero",
|
||||
},
|
||||
{
|
||||
label: "Collection",
|
||||
href: "#products",
|
||||
},
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms of Use",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ items: [{ label: "Home", href: "#hero" }, { label: "Collection", href: "#products" }, { label: "About", href: "#about" }] },
|
||||
{ items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Use", href: "#" }, { label: "Contact", href: "#contact" }] },
|
||||
]}
|
||||
logoText="DEMON APPAREL"
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user