Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 9616a106ae | |||
| 3b9010e558 | |||
| 123f1aebed | |||
| 1ba7bf2f0f |
349
src/app/page.tsx
349
src/app/page.tsx
@@ -8,11 +8,8 @@ import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
|
|||||||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||||||
import HeroOverlayTestimonial from '@/components/sections/hero/HeroOverlayTestimonial';
|
import HeroOverlayTestimonial from '@/components/sections/hero/HeroOverlayTestimonial';
|
||||||
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
||||||
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
||||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||||
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
|
||||||
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
|
|
||||||
import { Sparkles, Users, Zap } from "lucide-react";
|
|
||||||
|
|
||||||
export default function LandingPage() {
|
export default function LandingPage() {
|
||||||
return (
|
return (
|
||||||
@@ -33,21 +30,13 @@ export default function LandingPage() {
|
|||||||
<NavbarStyleApple
|
<NavbarStyleApple
|
||||||
navItems={[
|
navItems={[
|
||||||
{
|
{
|
||||||
name: "Home",
|
name: "Home", id: "hero"},
|
||||||
id: "hero",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
name: "Features",
|
name: "Features", id: "features"},
|
||||||
id: "features",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
name: "Shop",
|
name: "Shop", id: "product"},
|
||||||
id: "product",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
name: "FAQ",
|
name: "FAQ", id: "faq"},
|
||||||
id: "faq",
|
|
||||||
},
|
|
||||||
]}
|
]}
|
||||||
brandName="Verve Gen Z"
|
brandName="Verve Gen Z"
|
||||||
/>
|
/>
|
||||||
@@ -59,71 +48,17 @@ export default function LandingPage() {
|
|||||||
description="Engineered for comfort, built for life. Waterproof, machine-washable, and ready for your next move."
|
description="Engineered for comfort, built for life. Waterproof, machine-washable, and ready for your next move."
|
||||||
testimonials={[
|
testimonials={[
|
||||||
{
|
{
|
||||||
name: "Alex",
|
name: "Alex", handle: "@alex", testimonial: "These shoes feel like walking on air.", rating: 5,
|
||||||
handle: "@alex",
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-blonde-woman-posing-street_1303-32229.jpg"},
|
||||||
testimonial: "These shoes feel like walking on air.",
|
|
||||||
rating: 5,
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-blonde-woman-posing-street_1303-32229.jpg",
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
name: "Jordan",
|
name: "Jordan", handle: "@jordan", testimonial: "Machine washable? Absolute game changer.", rating: 5,
|
||||||
handle: "@jordan",
|
imageSrc: "http://img.b2bpic.net/free-photo/stylish-indian-beard-man-pink-tshirt-sitting-against-wooden-table-cafe-india-model-posed-outdoor_627829-2594.jpg"},
|
||||||
testimonial: "Machine washable? Absolute game changer.",
|
|
||||||
rating: 5,
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/stylish-indian-beard-man-pink-tshirt-sitting-against-wooden-table-cafe-india-model-posed-outdoor_627829-2594.jpg",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Casey",
|
|
||||||
handle: "@casey",
|
|
||||||
testimonial: "Waterproof and they look so good.",
|
|
||||||
rating: 5,
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/cute-girl-with-charming-friendly-smile-long-ginger-hair-braid_273609-9481.jpg",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Sam",
|
|
||||||
handle: "@sam",
|
|
||||||
testimonial: "Best Gen Z design I've ever owned.",
|
|
||||||
rating: 5,
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-portrait-young-model-with-colorful-makeup-with-hands-touching-her-chin_633478-410.jpg",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Riley",
|
|
||||||
handle: "@riley",
|
|
||||||
testimonial: "Smoothness is real, feels incredible.",
|
|
||||||
rating: 5,
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-smiling-woman-shows-peace-sign-trendy-girl-casual-summer-hoodie-skirt-clothes_158538-1425.jpg",
|
|
||||||
},
|
|
||||||
]}
|
]}
|
||||||
buttons={[
|
buttons={[
|
||||||
{
|
{
|
||||||
text: "Shop Now",
|
text: "Shop Now", href: "#product"},
|
||||||
},
|
|
||||||
]}
|
]}
|
||||||
imageSrc="http://img.b2bpic.net/free-photo/close-up-futuristic-sneakers-showcase_23-2151005686.jpg"
|
imageSrc="http://img.b2bpic.net/free-photo/close-up-futuristic-sneakers-showcase_23-2151005686.jpg"
|
||||||
imageAlt="modern sneakers futuristic dark"
|
|
||||||
avatars={[
|
|
||||||
{
|
|
||||||
src: "http://img.b2bpic.net/free-photo/close-up-person-wearing-futuristic-sneakers_23-2151005652.jpg",
|
|
||||||
alt: "Close up on person wearing futuristic sneakers",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
src: "http://img.b2bpic.net/free-photo/close-up-futuristic-sneakers-presentation_23-2151005715.jpg",
|
|
||||||
alt: "Close up on futuristic sneakers presentation",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
src: "http://img.b2bpic.net/free-photo/muscular-male-legs-sportswear_23-2147775560.jpg",
|
|
||||||
alt: "Muscular male legs in sportswear",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
src: "http://img.b2bpic.net/free-photo/close-up-futuristic-sneakers-urban-setting_23-2151005699.jpg",
|
|
||||||
alt: "Close up on futuristic sneakers in urban setting",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
src: "http://img.b2bpic.net/free-photo/front-view-young-man-outdoor_23-2148296630.jpg",
|
|
||||||
alt: "Front view young man outdoor",
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
avatarText="Join 50k+ happy users"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -131,19 +66,9 @@ export default function LandingPage() {
|
|||||||
<InlineImageSplitTextAbout
|
<InlineImageSplitTextAbout
|
||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
heading={[
|
heading={[
|
||||||
{
|
{ type: "text", content: "Redefining " },
|
||||||
type: "text",
|
{ type: "image", src: "http://img.b2bpic.net/free-photo/top-view-plastic-bag-floating-water_23-2151013929.jpg" },
|
||||||
content: "Redefining ",
|
{ type: "text", content: " Every Step." },
|
||||||
},
|
|
||||||
{
|
|
||||||
type: "image",
|
|
||||||
src: "http://img.b2bpic.net/free-photo/top-view-plastic-bag-floating-water_23-2151013929.jpg",
|
|
||||||
alt: "shoe texture close up",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: "text",
|
|
||||||
content: " Every Step.",
|
|
||||||
},
|
|
||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@@ -154,269 +79,55 @@ export default function LandingPage() {
|
|||||||
textboxLayout="default"
|
textboxLayout="default"
|
||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
features={[
|
features={[
|
||||||
{
|
{ title: "Waterproof", description: "Rain or shine.", imageSrc: "http://img.b2bpic.net/free-photo/front-view-liquid-with-drop_23-2148635066.jpg" },
|
||||||
title: "Waterproof",
|
{ title: "Washable", description: "Machine safe.", imageSrc: "http://img.b2bpic.net/free-photo/attractive-bearded-indian-male-drinks-craft-beer-room-with-christmas-decoration_613910-14604.jpg" },
|
||||||
description: "Rain or shine, your feet stay dry.",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-liquid-with-drop_23-2148635066.jpg",
|
|
||||||
imageAlt: "waterproof icon tech",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Machine Washable",
|
|
||||||
description: "Toss them in the wash and watch them sparkle.",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/attractive-bearded-indian-male-drinks-craft-beer-room-with-christmas-decoration_613910-14604.jpg",
|
|
||||||
imageAlt: "machine wash icon",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Supreme Smoothness",
|
|
||||||
description: "Advanced cushioning for maximum comfort.",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-vector/childlike-interior-design-furniture-stickers-collection_23-2149862690.jpg",
|
|
||||||
imageAlt: "cushion comfort icon",
|
|
||||||
},
|
|
||||||
]}
|
]}
|
||||||
title="Designed for the Modern Life"
|
title="Designed for Modern Life"
|
||||||
description="Innovation meets comfort in every pair."
|
description="Innovation meets comfort."
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="product" data-section="product">
|
<div id="product" data-section="product">
|
||||||
<ProductCardTwo
|
<ProductCardFour
|
||||||
animationType="slide-up"
|
animationType="slide-up"
|
||||||
textboxLayout="default"
|
textboxLayout="default"
|
||||||
gridVariant="uniform-all-items-equal"
|
gridVariant="four-items-2x2-equal-grid"
|
||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
|
title="Product Manager Dashboard"
|
||||||
|
description="Manage and add new shoes to the Verve Gen Z collection."
|
||||||
products={[
|
products={[
|
||||||
{
|
{ id: "p1", name: "Add New Shoe", price: "$0", variant: "Admin Access", imageSrc: "http://img.b2bpic.net/free-photo/child-having-fun-outdoors_23-2148817361.jpg" },
|
||||||
id: "p1",
|
|
||||||
brand: "Verve",
|
|
||||||
name: "Gen Z Lite",
|
|
||||||
price: "$89",
|
|
||||||
rating: 5,
|
|
||||||
reviewCount: "120",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/child-having-fun-outdoors_23-2148817361.jpg",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "p2",
|
|
||||||
brand: "Verve",
|
|
||||||
name: "Gen Z Pro",
|
|
||||||
price: "$99",
|
|
||||||
rating: 4,
|
|
||||||
reviewCount: "95",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/view-skateboard-with-retro-memorabilia_23-2150583924.jpg",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "p3",
|
|
||||||
brand: "Verve",
|
|
||||||
name: "Urban Flow",
|
|
||||||
price: "$109",
|
|
||||||
rating: 5,
|
|
||||||
reviewCount: "210",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-futuristic-sneakers_23-2151005646.jpg",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "p4",
|
|
||||||
brand: "Verve",
|
|
||||||
name: "Street Smooth",
|
|
||||||
price: "$79",
|
|
||||||
rating: 4,
|
|
||||||
reviewCount: "60",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-futuristic-sneakers_23-2151005661.jpg",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "p5",
|
|
||||||
brand: "Verve",
|
|
||||||
name: "Neon Runner",
|
|
||||||
price: "$119",
|
|
||||||
rating: 5,
|
|
||||||
reviewCount: "45",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-legs-doing-sport_23-2147995879.jpg",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "p6",
|
|
||||||
brand: "Verve",
|
|
||||||
name: "Midnight Elite",
|
|
||||||
price: "$129",
|
|
||||||
rating: 5,
|
|
||||||
reviewCount: "30",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-beautiful-hipster-bad-girl-trendy-red-summer-clothes-earring-her-nose-sexy-carefree-smiling-woman-sitting-studio-pink-wig-near-blue-wall-positive-model-having-fun_158538-15533.jpg",
|
|
||||||
},
|
|
||||||
]}
|
]}
|
||||||
title="Shop the Collection"
|
|
||||||
description="Choose your style, experience the Verve."
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="metrics" data-section="metrics">
|
|
||||||
<MetricCardThree
|
|
||||||
animationType="slide-up"
|
|
||||||
textboxLayout="default"
|
|
||||||
useInvertedBackground={false}
|
|
||||||
metrics={[
|
|
||||||
{
|
|
||||||
id: "m1",
|
|
||||||
title: "Happy Users",
|
|
||||||
value: "50k+",
|
|
||||||
icon: Users,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "m2",
|
|
||||||
title: "Washes Completed",
|
|
||||||
value: "200k+",
|
|
||||||
icon: Sparkles,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "m3",
|
|
||||||
title: "Satisfied Steps",
|
|
||||||
value: "1M+",
|
|
||||||
icon: Zap,
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
title="Stats That Matter"
|
|
||||||
description="Join thousands who trust Verve."
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="testimonials" data-section="testimonials">
|
|
||||||
<TestimonialCardSixteen
|
|
||||||
animationType="slide-up"
|
|
||||||
textboxLayout="default"
|
|
||||||
useInvertedBackground={false}
|
|
||||||
testimonials={[
|
|
||||||
{
|
|
||||||
id: "st1",
|
|
||||||
name: "Alex",
|
|
||||||
role: "Creative",
|
|
||||||
company: "VerveFan",
|
|
||||||
rating: 5,
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/tattooed-redhead-girl-wearing-trendy-clothes-sitting-stairs-outside_613910-17935.jpg",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "st2",
|
|
||||||
name: "Jordan",
|
|
||||||
role: "Designer",
|
|
||||||
company: "VerveFan",
|
|
||||||
rating: 5,
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/attractive-young-beautiful-woman-has-private-conversation-has-bob-hairstyle-rosy-hair-wig-dressed-fashionable-denim-jacket_273609-42938.jpg",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "st3",
|
|
||||||
name: "Casey",
|
|
||||||
role: "Student",
|
|
||||||
company: "VerveFan",
|
|
||||||
rating: 5,
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/positive-brunette-woman-laughing-sincerely-striped-background-shorthaired-girl-orange-sweatshirt-smiling-outdoors_197531-29500.jpg",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "st4",
|
|
||||||
name: "Sam",
|
|
||||||
role: "Dev",
|
|
||||||
company: "VerveFan",
|
|
||||||
rating: 5,
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/toned-portrait-exited-happy-woman-with-unusual-trendy-ombre-pink-hairs-posing-yellow-wall-surprised-emotions-cozy-sweater-vintage-sunglasses_291049-396.jpg",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "st5",
|
|
||||||
name: "Riley",
|
|
||||||
role: "Artist",
|
|
||||||
company: "VerveFan",
|
|
||||||
rating: 5,
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/attractive-redhead-female-holds-longboard_613910-10442.jpg",
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
kpiItems={[
|
|
||||||
{
|
|
||||||
value: "4.9/5",
|
|
||||||
label: "Average Rating",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: "99%",
|
|
||||||
label: "Customer Satisfaction",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: "50k+",
|
|
||||||
label: "Pairs Sold",
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
title="What They Say"
|
|
||||||
description="Real people, real comfort."
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="faq" data-section="faq">
|
<div id="faq" data-section="faq">
|
||||||
<FaqSplitMedia
|
<FaqSplitMedia
|
||||||
|
faqsAnimation="slide-up"
|
||||||
textboxLayout="default"
|
textboxLayout="default"
|
||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
faqs={[
|
faqs={[
|
||||||
{
|
{ id: "f1", title: "Are they waterproof?", content: "Yes." },
|
||||||
id: "f1",
|
{ id: "f2", title: "Washable?", content: "Yes, machine washable." },
|
||||||
title: "Are they really waterproof?",
|
|
||||||
content: "Yes, our proprietary fabric repels water effortlessly.",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "f2",
|
|
||||||
title: "How do I wash them?",
|
|
||||||
content: "Place them in a laundry bag, cold wash, gentle cycle.",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "f3",
|
|
||||||
title: "What makes them smooth?",
|
|
||||||
content: "Our custom foam midsole provides unmatched energy return.",
|
|
||||||
},
|
|
||||||
]}
|
]}
|
||||||
imageSrc="http://img.b2bpic.net/free-photo/abstract-fabric-moles-texture_1194-6456.jpg"
|
title="FAQs"
|
||||||
mediaAnimation="slide-up"
|
description="We have answers."
|
||||||
title="Frequently Asked Questions"
|
|
||||||
description="Have questions? We have answers."
|
|
||||||
faqsAnimation="slide-up"
|
|
||||||
imageAlt="water droplets on textile"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="contact" data-section="contact">
|
<div id="contact" data-section="contact">
|
||||||
<ContactText
|
<ContactText
|
||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
background={{
|
background={{ variant: "animated-grid" }}
|
||||||
variant: "animated-grid",
|
|
||||||
}}
|
|
||||||
text="Ready to step into the future? Get in touch today."
|
text="Ready to step into the future? Get in touch today."
|
||||||
buttons={[
|
buttons={[{ text: "Contact" }]}
|
||||||
{
|
|
||||||
text: "Contact Support",
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="footer" data-section="footer">
|
<div id="footer" data-section="footer">
|
||||||
<FooterBaseCard
|
<FooterBaseCard
|
||||||
logoText="Verve Gen Z"
|
logoText="Verve Gen Z"
|
||||||
columns={[
|
columns={[{ title: "Links", items: [{ label: "Home", href: "#" }] }]}
|
||||||
{
|
|
||||||
title: "Company",
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
label: "About",
|
|
||||||
href: "#",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Contact",
|
|
||||||
href: "#",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Shop",
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
label: "Latest",
|
|
||||||
href: "#",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Sale",
|
|
||||||
href: "#",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</ReactLenis>
|
</ReactLenis>
|
||||||
|
|||||||
Reference in New Issue
Block a user