Update src/app/page.tsx
This commit is contained in:
356
src/app/page.tsx
356
src/app/page.tsx
@@ -2,10 +2,10 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import BlogCardOne from '@/components/sections/blog/BlogCardOne';
|
||||
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||||
import BlogCardThree from '@/components/sections/blog/BlogCardThree';
|
||||
import FaqBase from '@/components/sections/faq/FaqBase';
|
||||
import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
|
||||
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
||||
import FooterCard from '@/components/sections/footer/FooterCard';
|
||||
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
|
||||
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
@@ -31,21 +31,13 @@ export default function LandingPage() {
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
name: "Home", id: "hero"},
|
||||
{
|
||||
name: "Collection",
|
||||
id: "products",
|
||||
},
|
||||
name: "Collection", id: "products"},
|
||||
{
|
||||
name: "Reviews",
|
||||
id: "testimonials",
|
||||
},
|
||||
name: "Reviews", id: "testimonials"},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
name: "Contact", id: "contact"},
|
||||
]}
|
||||
brandName="MODA"
|
||||
/>
|
||||
@@ -54,105 +46,23 @@ export default function LandingPage() {
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardTestimonial
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
variant: "gradient-bars"}}
|
||||
title="Timeless Elegance, Modern Soul."
|
||||
description="Experience the intersection of luxury craftsmanship and contemporary silhouette. Our latest collection is designed for the modern individual."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Aria V.",
|
||||
handle: "@ariav",
|
||||
testimonial: "The quality is simply unmatched. Feels like luxury every single day.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/non-binary-person-modern-clothes-posing-artistic-way_23-2148760574.jpg?_wi=1",
|
||||
imageAlt: "model fashion editorial photoshoot",
|
||||
},
|
||||
name: "Aria V.", handle: "@ariav", testimonial: "The quality is simply unmatched. Feels like luxury every single day.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/non-binary-person-modern-clothes-posing-artistic-way_23-2148760574.jpg?_wi=1", imageAlt: "model fashion editorial photoshoot"},
|
||||
{
|
||||
name: "Julian M.",
|
||||
handle: "@julianm",
|
||||
testimonial: "Sophisticated designs that never go out of style. My favorite brand.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-thimble-silk-arrangement_23-2148897939.jpg?_wi=1",
|
||||
imageAlt: "model fashion editorial photoshoot",
|
||||
},
|
||||
{
|
||||
name: "Elena R.",
|
||||
handle: "@elenar",
|
||||
testimonial: "Finally found a brand that fits perfectly and feels sustainable.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-garage-sale_23-2150574511.jpg?_wi=1",
|
||||
imageAlt: "model fashion editorial photoshoot",
|
||||
},
|
||||
{
|
||||
name: "Marco S.",
|
||||
handle: "@marcos",
|
||||
testimonial: "Impeccable service and even better clothing. Highly recommended.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-sant-jordi-day-books-roses_23-2151197568.jpg?_wi=1",
|
||||
imageAlt: "model fashion editorial photoshoot",
|
||||
},
|
||||
{
|
||||
name: "Sarah J.",
|
||||
handle: "@sarahj",
|
||||
testimonial: "The fabric quality is out of this world. Stunning pieces.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/elegant-female-model-posing-jacket-suit-with-tie-new-feminity-concept_23-2148951010.jpg?_wi=1",
|
||||
imageAlt: "model fashion editorial photoshoot",
|
||||
},
|
||||
name: "Julian M.", handle: "@julianm", testimonial: "Sophisticated designs that never go out of style. My favorite brand.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-thimble-silk-arrangement_23-2148897939.jpg?_wi=1", imageAlt: "model fashion editorial photoshoot"},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Shop Collection",
|
||||
href: "#products",
|
||||
},
|
||||
text: "Shop Collection", href: "#products"},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/non-binary-person-modern-clothes-posing-artistic-way_23-2148760574.jpg?_wi=2"
|
||||
imageAlt="model fashion editorial photoshoot"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/person-using-eco-transport-new-york_23-2149219978.jpg",
|
||||
alt: "Person using eco transport in new york",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-handsome-african-american-man-posing-outdoors-paris-happy-smile-fashion-style_1321-3388.jpg",
|
||||
alt: "Young handsome african american man posing outdoors in Paris. happy smile, fashion style.",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/stylish-urban-style-african-american-man-pink-hoodie-posed-afro-rapper-guy_627829-1470.jpg",
|
||||
alt: "Stylish urban style african american man in pink hoodie posed Afro rapper guy",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/cowboy-silhouette-against-warm-light_23-2149334101.jpg",
|
||||
alt: "Cowboy silhouette against warm light",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/beautiful-girl-studio-stylish-woman-black-dress_1157-47389.jpg",
|
||||
alt: "Beautiful girl in a studio. Stylish woman in a black dress.",
|
||||
},
|
||||
]}
|
||||
avatarText="Join 10,000+ fashion enthusiasts"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Sustainable",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Timeless",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Minimalist",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Premium",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Handcrafted",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -163,32 +73,11 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Premium Fabrics",
|
||||
tags: [
|
||||
"Textile",
|
||||
"Quality",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-thimble-silk-arrangement_23-2148897939.jpg?_wi=2",
|
||||
},
|
||||
id: "f1", title: "Premium Fabrics", tags: ["Textile", "Quality"],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-thimble-silk-arrangement_23-2148897939.jpg?_wi=2"},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Ethical Production",
|
||||
tags: [
|
||||
"Sustainability",
|
||||
"Fair-Trade",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-garage-sale_23-2150574511.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Timeless Design",
|
||||
tags: [
|
||||
"Aesthetic",
|
||||
"Minimalist",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-sant-jordi-day-books-roses_23-2151197568.jpg?_wi=2",
|
||||
},
|
||||
id: "f2", title: "Ethical Production", tags: ["Sustainability", "Fair-Trade"],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-garage-sale_23-2150574511.jpg?_wi=2"},
|
||||
]}
|
||||
title="Crafted with Intent"
|
||||
description="Every thread tells a story of quality, sustainability, and unparalleled design."
|
||||
@@ -203,59 +92,8 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
brand: "MODA",
|
||||
name: "Silk Flow Dress",
|
||||
price: "$295",
|
||||
rating: 5,
|
||||
reviewCount: "128",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/elegant-female-model-posing-jacket-suit-with-tie-new-feminity-concept_23-2148951010.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
brand: "MODA",
|
||||
name: "Classic Linen Shirt",
|
||||
price: "$145",
|
||||
rating: 4,
|
||||
reviewCount: "89",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-blonde-woman-blue-light_23-2149478941.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
brand: "MODA",
|
||||
name: "Tailored Wool Jacket",
|
||||
price: "$450",
|
||||
rating: 5,
|
||||
reviewCount: "45",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-rendering-jackets-display_23-2149745032.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
brand: "MODA",
|
||||
name: "Modern Slim Trouser",
|
||||
price: "$180",
|
||||
rating: 4,
|
||||
reviewCount: "67",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-spring-wardrobe-switch_23-2150478992.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
brand: "MODA",
|
||||
name: "Essential Cashmere Top",
|
||||
price: "$220",
|
||||
rating: 5,
|
||||
reviewCount: "102",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-spring-wardrobe-switch_23-2150478988.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
brand: "MODA",
|
||||
name: "Structured Canvas Coat",
|
||||
price: "$520",
|
||||
rating: 5,
|
||||
reviewCount: "34",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-teen-with-pink-hoodie_23-2148629629.jpg",
|
||||
},
|
||||
id: "p1", brand: "MODA", name: "Silk Flow Dress", price: "$295", rating: 5,
|
||||
reviewCount: "128", imageSrc: "http://img.b2bpic.net/free-photo/elegant-female-model-posing-jacket-suit-with-tie-new-feminity-concept_23-2148951010.jpg?_wi=2"},
|
||||
]}
|
||||
title="Latest Arrivals"
|
||||
description="Discover the curated selection of our seasonless essentials."
|
||||
@@ -268,21 +106,8 @@ export default function LandingPage() {
|
||||
title="By the Numbers"
|
||||
tag="Brand Impact"
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "12k+",
|
||||
description: "Happy Customers",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "98%",
|
||||
description: "Ethical Sourcing",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "25+",
|
||||
description: "Countries Reached",
|
||||
},
|
||||
{ id: "m1", value: "12k+", description: "Happy Customers" },
|
||||
{ id: "m2", value: "98%", description: "Ethical Sourcing" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -294,40 +119,7 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Alice M.",
|
||||
handle: "@alicem",
|
||||
testimonial: "Everything I bought was pure perfection.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-happy-europnean-woman-sunglasses-is-resting-sunny-street-with-palms-looking-aside-portrait-model-woman-with-smile-face-holds-hat-with-hands-wears-sunglasses_291650-2669.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Brian K.",
|
||||
handle: "@briank",
|
||||
testimonial: "Top tier quality and timeless look.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/rich-man-with-beard-thinking-about-business_1153-7867.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Chloe B.",
|
||||
handle: "@chloeb",
|
||||
testimonial: "Worth every single cent.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-stylish-woman-bwhite-shirt_1303-23905.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "David W.",
|
||||
handle: "@davidw",
|
||||
testimonial: "Amazing fit and style.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/stylish-african-american-man-model-gray-coat-jacket-tie-red-hat-with-mobile-phone-hands_627829-2833.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Emma R.",
|
||||
handle: "@emmar",
|
||||
testimonial: "Best wardrobe investment ever.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/crop-incognito-elegant-pregnant-woman-pink-dress-holding-pregnant-belly-front-view-mom-embracing-herself-stomach-posing-against-dark-background_132075-11666.jpg",
|
||||
},
|
||||
id: "t1", name: "Alice M.", handle: "@alicem", testimonial: "Everything I bought was pure perfection.", imageSrc: "http://img.b2bpic.net/free-photo/smiling-happy-europnean-woman-sunglasses-is-resting-sunny-street-with-palms-looking-aside-portrait-model-woman-with-smile-face-holds-hat-with-hands-wears-sunglasses_291650-2669.jpg"}
|
||||
]}
|
||||
title="Community Voices"
|
||||
description="See why our customers love our pieces."
|
||||
@@ -335,123 +127,45 @@ export default function LandingPage() {
|
||||
</div>
|
||||
|
||||
<div id="blog" data-section="blog">
|
||||
<BlogCardOne
|
||||
<BlogCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
title="Curated Insights"
|
||||
description="Style guides and sustainable living tips."
|
||||
blogs={[
|
||||
{
|
||||
id: "b1",
|
||||
category: "Style Guide",
|
||||
title: "Spring/Summer 2025 Trends",
|
||||
excerpt: "What to wear as the days get warmer.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-thoughtful-fashionable-woman-dressed-green-clothes-white-boots-sits-near-grey-concrete-wall-has-bun-hairstyle-vivid-makeup-thinks-about-something-urban-lifestyle-concept_273609-59968.jpg",
|
||||
authorName: "MODA Editorial",
|
||||
authorAvatar: "http://img.b2bpic.net/free-photo/young-woman-sitting-posing-near-christmas-tree_114579-66755.jpg",
|
||||
date: "Oct 12, 2024",
|
||||
},
|
||||
{
|
||||
id: "b2",
|
||||
category: "Sustainability",
|
||||
title: "The Art of Slow Fashion",
|
||||
excerpt: "Why your closet deserves longevity.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-warming-her-hands-beach-winter_23-2148820453.jpg",
|
||||
authorName: "MODA Editorial",
|
||||
authorAvatar: "http://img.b2bpic.net/free-photo/portrait-fashionable-man-stylish-clothes-walking-with-city-bicycle-street_613910-5195.jpg",
|
||||
date: "Oct 05, 2024",
|
||||
},
|
||||
{
|
||||
id: "b3",
|
||||
category: "Lookbook",
|
||||
title: "Minimalist Layers",
|
||||
excerpt: "The masterclass on effective layering.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-choosing-knitted-clothes-from-hangers-beach_343596-1288.jpg",
|
||||
authorName: "MODA Editorial",
|
||||
authorAvatar: "http://img.b2bpic.net/free-photo/happy-tanned-caucasian-female-amusement-park_181624-33174.jpg",
|
||||
date: "Sep 28, 2024",
|
||||
},
|
||||
id: "b1", category: "Style Guide", title: "Spring/Summer 2025 Trends", excerpt: "What to wear as the days get warmer.", imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-thoughtful-fashionable-woman-dressed-green-clothes-white-boots-sits-near-grey-concrete-wall-has-bun-hairstyle-vivid-makeup-thinks-about-something-urban-lifestyle-concept_273609-59968.jpg", authorName: "MODA Editorial", authorAvatar: "http://img.b2bpic.net/free-photo/young-woman-sitting-posing-near-christmas-tree_114579-66755.jpg", date: "Oct 12, 2024"}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
<FaqBase
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "What is the return policy?",
|
||||
content: "Returns are accepted within 30 days.",
|
||||
},
|
||||
id: "q1", title: "What is the return policy?", content: "Returns are accepted within 30 days."},
|
||||
{
|
||||
id: "q2",
|
||||
title: "Do you offer international shipping?",
|
||||
content: "Yes, we ship to over 25 countries worldwide.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "How do I care for my garments?",
|
||||
content: "Care instructions are included on every tag.",
|
||||
},
|
||||
id: "q2", title: "Do you offer international shipping?", content: "Yes, we ship to over 25 countries worldwide."},
|
||||
]}
|
||||
title="Questions Answered"
|
||||
description="Frequently asked questions about shipping, care, and sizing."
|
||||
faqsAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/interior-design-with-beautiful-plant_23-2149551429.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/painted-textured-wall_53876-88634.jpg"
|
||||
<FooterCard
|
||||
logoText="MODA"
|
||||
columns={[
|
||||
{
|
||||
title: "Shop",
|
||||
items: [
|
||||
{
|
||||
label: "New Arrivals",
|
||||
href: "#products",
|
||||
},
|
||||
{
|
||||
label: "All Apparel",
|
||||
href: "#products",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About Us",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Careers",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Help Center",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}"
|
||||
}
|
||||
],
|
||||
"rawPlan": "I've updated the blog, FAQ, and footer sections to reflect a more modern and clean clothing brand aesthetic. The blog now uses a polished grid layout, the FAQ is streamlined for better readability, and the footer is simplified to focus on brand identity."
|
||||
}
|
||||
Reference in New Issue
Block a user