Merge version_1 into main
Merge version_1 into main
This commit was merged in pull request #2.
This commit is contained in:
454
src/app/page.tsx
454
src/app/page.tsx
@@ -17,323 +17,167 @@ import TextAbout from '@/components/sections/about/TextAbout';
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-bubble"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="rounded"
|
||||
defaultButtonVariant="hover-bubble"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Collection",
|
||||
id: "products",
|
||||
},
|
||||
{
|
||||
name: "Story",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Niso"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Collection", id: "products" },
|
||||
{ name: "Story", id: "about" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Niso"
|
||||
button={{ text: "Shop Now", href: "#products" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCarouselLogo
|
||||
logoText="Niso"
|
||||
description="Step into sophistication with Niso, where timeless craftsmanship meets modern comfort in every pair."
|
||||
buttons={[
|
||||
{
|
||||
text: "Shop Collection",
|
||||
href: "#products",
|
||||
},
|
||||
]}
|
||||
slides={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/fit-young-brunette-female-wearing-shirt-with-naked-legs-sitting-black-white-cubes-gray-background-copy-space-high-quality-photo_132075-10096.jpg?_wi=1",
|
||||
imageAlt: "Niso Shoes",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/flamenco-dancer-posing-legs-pink-background_23-2148235301.jpg",
|
||||
imageAlt: "Niso Shoes",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/groom-s-classy-shoes-lie-soft-armchair_8353-8463.jpg",
|
||||
imageAlt: "Niso Shoes",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-fit-legs-wearing-classy-heels_23-2148235410.jpg",
|
||||
imageAlt: "Niso Shoes",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/sunglasses-shoes-white-color_23-2148109272.jpg",
|
||||
imageAlt: "Niso Shoes",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-legs-heels-holding-glass-champagne_23-2147988548.jpg",
|
||||
imageAlt: "Niso Shoes",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCarouselLogo
|
||||
logoText="Niso"
|
||||
description="Step into sophistication with Niso, where timeless craftsmanship meets modern comfort in every pair."
|
||||
buttons={[{ text: "Shop Collection", href: "#products" }]}
|
||||
slides={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/fit-young-brunette-female-wearing-shirt-with-naked-legs-sitting-black-white-cubes-gray-background-copy-space-high-quality-photo_132075-10096.jpg", imageAlt: "Niso Shoes" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/flamenco-dancer-posing-legs-pink-background_23-2148235301.jpg", imageAlt: "Niso Shoes" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/groom-s-classy-shoes-lie-soft-armchair_8353-8463.jpg", imageAlt: "Niso Shoes" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/close-up-fit-legs-wearing-classy-heels_23-2148235410.jpg", imageAlt: "Niso Shoes" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/sunglasses-shoes-white-color_23-2148109272.jpg", imageAlt: "Niso Shoes" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/woman-legs-heels-holding-glass-champagne_23-2147988548.jpg", imageAlt: "Niso Shoes" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextAbout
|
||||
useInvertedBackground={false}
|
||||
title="Crafted for the Modern Journey"
|
||||
buttons={[
|
||||
{
|
||||
text: "Our Story",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TextAbout
|
||||
useInvertedBackground={false}
|
||||
title="Crafted for the Modern Journey"
|
||||
buttons={[{ text: "Our Story", href: "#" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Urban Elite Sneaker",
|
||||
price: "$120",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-sport-composition-with-colorful-trainers_23-2148000187.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Classic Loafer",
|
||||
price: "$150",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/travel-still-life-pack-top-view_23-2148837323.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Daily Comfort Walk",
|
||||
price: "$95",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/ice-skates-studio-still-life_23-2150558981.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "City Casual Trainer",
|
||||
price: "$110",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-photo-stylish-shoes-store_627829-6034.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Evening Elegance Pump",
|
||||
price: "$180",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/black-shoe-rock-studio_52683-94835.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Modern Sport Runner",
|
||||
price: "$135",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hand-holding-fedora-hat-studio_23-2150737162.jpg",
|
||||
},
|
||||
]}
|
||||
title="The Collection"
|
||||
description="Explore our curated selection of premium footwear."
|
||||
/>
|
||||
</div>
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "p1", name: "Urban Elite Sneaker", price: "$120", imageSrc: "http://img.b2bpic.net/free-photo/modern-sport-composition-with-colorful-trainers_23-2148000187.jpg" },
|
||||
{ id: "p2", name: "Classic Loafer", price: "$150", imageSrc: "http://img.b2bpic.net/free-photo/travel-still-life-pack-top-view_23-2148837323.jpg" },
|
||||
{ id: "p3", name: "Daily Comfort Walk", price: "$95", imageSrc: "http://img.b2bpic.net/free-photo/ice-skates-studio-still-life_23-2150558981.jpg" },
|
||||
{ id: "p4", name: "City Casual Trainer", price: "$110", imageSrc: "http://img.b2bpic.net/free-photo/closeup-photo-stylish-shoes-store_627829-6034.jpg" },
|
||||
{ id: "p5", name: "Evening Elegance Pump", price: "$180", imageSrc: "http://img.b2bpic.net/free-photo/black-shoe-rock-studio_52683-94835.jpg" },
|
||||
{ id: "p6", name: "Modern Sport Runner", price: "$135", imageSrc: "http://img.b2bpic.net/free-photo/hand-holding-fedora-hat-studio_23-2150737162.jpg" },
|
||||
]}
|
||||
title="The Collection"
|
||||
description="Explore our curated selection of premium footwear."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardEight
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Premium Materials",
|
||||
description: "Sourced from the finest leather artisans globally.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-tailor-working-with-leather-fabric_1303-23394.jpg",
|
||||
imageAlt: "shoe craftsmanship workshop interior",
|
||||
},
|
||||
{
|
||||
title: "Ergonomic Comfort",
|
||||
description: "Designed for all-day wear without compromise.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/fit-young-brunette-female-wearing-shirt-with-naked-legs-sitting-black-white-cubes-gray-background-copy-space-high-quality-photo_132075-10096.jpg?_wi=2",
|
||||
imageAlt: "shoe craftsmanship workshop interior",
|
||||
},
|
||||
{
|
||||
title: "Sustainable Practices",
|
||||
description: "Ethical production in every step of our process.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-sport-composition-with-colorful-trainers_23-2148000187.jpg?_wi=2",
|
||||
imageAlt: "shoe craftsmanship workshop interior",
|
||||
},
|
||||
]}
|
||||
title="Unrivaled Quality"
|
||||
description="Why choose Niso for your everyday footwear?"
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardEight
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ title: "Premium Materials", description: "Sourced from the finest leather artisans globally.", imageSrc: "http://img.b2bpic.net/free-photo/man-tailor-working-with-leather-fabric_1303-23394.jpg", imageAlt: "shoe craftsmanship" },
|
||||
{ title: "Ergonomic Comfort", description: "Designed for all-day wear without compromise.", imageSrc: "http://img.b2bpic.net/free-photo/fit-young-brunette-female-wearing-shirt-with-naked-legs-sitting-black-white-cubes-gray-background-copy-space-high-quality-photo_132075-10096.jpg", imageAlt: "comfortable shoes" },
|
||||
{ title: "Sustainable Practices", description: "Ethical production in every step of our process.", imageSrc: "http://img.b2bpic.net/free-photo/modern-sport-composition-with-colorful-trainers_23-2148000187.jpg", imageAlt: "sustainable production" },
|
||||
]}
|
||||
title="Unrivaled Quality"
|
||||
description="Why choose Niso for your everyday footwear?"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "50k+",
|
||||
description: "Satisfied Customers",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "120",
|
||||
description: "Styles Designed",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "15+",
|
||||
description: "Countries Served",
|
||||
},
|
||||
]}
|
||||
title="Our Impact"
|
||||
description="Numbers behind the Niso movement."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", value: "50k+", description: "Satisfied Customers" },
|
||||
{ id: "m2", value: "120", description: "Styles Designed" },
|
||||
{ id: "m3", value: "15+", description: "Countries Served" },
|
||||
]}
|
||||
title="Our Impact"
|
||||
description="Numbers behind the Niso movement."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="socialProof" data-section="socialProof">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"Vogue",
|
||||
"Harper's Bazaar",
|
||||
"GQ",
|
||||
"Esquire",
|
||||
"Elle",
|
||||
"Cosmopolitan",
|
||||
"Marie Claire",
|
||||
]}
|
||||
title="As Seen In"
|
||||
description="Recognized by fashion industry leaders."
|
||||
/>
|
||||
</div>
|
||||
<div id="socialProof" data-section="socialProof">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={["Vogue", "Harper's Bazaar", "GQ", "Esquire", "Elle", "Cosmopolitan", "Marie Claire"]}
|
||||
title="As Seen In"
|
||||
description="Recognized by fashion industry leaders."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFifteen
|
||||
useInvertedBackground={false}
|
||||
testimonial="Niso transformed my wardrobe. Comfort and elegance in one."
|
||||
rating={5}
|
||||
author="Sarah Jenkins"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-hispanic-sporty-woman-smiling-happy-using-headphones-dancing-city_839833-15444.jpg",
|
||||
alt: "User 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/beautiful-smiling-model-with-horns-hairstyle-dressed-summer-hipster-jacket-jeans-clothes-sexy-carefree-girl-posing-street-trendy-funny-positive-woman-having-fun-sunglasses_158538-6642.jpg",
|
||||
alt: "User 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/cheerful-african-american-girl-stylish-trench-coat-joyfully-looking-camera-cafe-city-street_574295-2887.jpg",
|
||||
alt: "User 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/business-owners-preparing-their-store_23-2149300867.jpg",
|
||||
alt: "User 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/happy-woman-cleaning-footwear_1398-1947.jpg",
|
||||
alt: "User 5",
|
||||
},
|
||||
]}
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFifteen
|
||||
useInvertedBackground={false}
|
||||
testimonial="Niso transformed my wardrobe. Comfort and elegance in one."
|
||||
rating={5}
|
||||
author="Sarah Jenkins"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/young-hispanic-sporty-woman-smiling-happy-using-headphones-dancing-city_839833-15444.jpg", alt: "User 1" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/beautiful-smiling-model-with-horns-hairstyle-dressed-summer-hipster-jacket-jeans-clothes-sexy-carefree-girl-posing-street-trendy-funny-positive-woman-having-fun-sunglasses_158538-6642.jpg", alt: "User 2" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/cheerful-african-american-girl-stylish-trench-coat-joyfully-looking-camera-cafe-city-street_574295-2887.jpg", alt: "User 3" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/business-owners-preparing-their-store_23-2149300867.jpg", alt: "User 4" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/happy-woman-cleaning-footwear_1398-1947.jpg", alt: "User 5" },
|
||||
]}
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Do you offer returns?",
|
||||
content: "Yes, within 30 days of purchase.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Where is my order?",
|
||||
content: "Tracking is provided via email.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Are materials sustainable?",
|
||||
content: "We prioritize ethical sourcing for all shoes.",
|
||||
},
|
||||
]}
|
||||
sideTitle="Common Questions"
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "f1", title: "Do you offer returns?", content: "Yes, within 30 days of purchase." },
|
||||
{ id: "f2", title: "Where is my order?", content: "Tracking is provided via email." },
|
||||
{ id: "f3", title: "Are materials sustainable?", content: "We prioritize ethical sourcing for all shoes." },
|
||||
]}
|
||||
sideTitle="Common Questions"
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Connect With Niso"
|
||||
description="Have questions? We're here to assist."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Name",
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Email",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/view-city-building-with-daylight-shadows_23-2149080232.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Connect With Niso"
|
||||
description="Have questions? We're here to assist."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Name" },
|
||||
{ name: "email", type: "email", placeholder: "Email" },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/view-city-building-with-daylight-shadows_23-2149080232.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
logoText="Niso"
|
||||
columns={[
|
||||
{
|
||||
title: "Shop",
|
||||
items: [
|
||||
{
|
||||
label: "All Shoes",
|
||||
href: "#products",
|
||||
},
|
||||
{
|
||||
label: "New Arrivals",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About Us",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
logoText="Niso"
|
||||
columns={[
|
||||
{ title: "Shop", items: [{ label: "All Shoes", href: "#products" }, { label: "New Arrivals", href: "#" }] },
|
||||
{ title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "Contact", href: "#contact" }] },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user