bender/13555fca-1ff8-4754-845f-c9798f3567b4
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_1 into main #2

Merged
bender merged 1 commits from version_1 into main 2026-05-06 16:46:43 +00:00
Conversation 0 Commits 1 Files Changed 1 +154 -400
1 changed files with 154 additions and 400 deletions
Download Patch File Download Diff File Expand all files Collapse all files

554
src/app/page.tsx
View File

@@ -17,417 +17,171 @@ import { Award, CheckCircle, Shield, Sparkles, Star } from "lucide-react";
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="icon-arrow"
defaultTextAnimation="entrance-slide"
borderRadius="soft"
contentWidth="small"
sizing="medium"
background="aurora"
cardStyle="inset"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="solid"
headingFontWeight="semibold"
defaultButtonVariant="icon-arrow"
defaultTextAnimation="entrance-slide"
borderRadius="soft"
contentWidth="small"
sizing="medium"
background="aurora"
cardStyle="inset"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="solid"
headingFontWeight="semibold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
navItems={[
{
name: "Home",
id: "home",
},
{
name: "About",
id: "about",
},
{
name: "Collection",
id: "products",
},
{
name: "Contact",
id: "contact",
},
]}
brandName="First Look"
/>
</div>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
navItems={[
{ name: "Home", id: "home" },
{ name: "About", id: "about" },
{ name: "Collection", id: "products" },
{ name: "Contact", id: "contact" },
]}
brandName="First Look"
/>
</div>
<div id="home" data-section="home">
<HeroOverlayTestimonial
title="First Look Men's Wear"
description="Timeless elegance tailored for the modern man. Experience the perfect fit."
testimonials={[
{
name: "Rajiv Sharma",
handle: "@rajiv",
testimonial: "The best tailoring service in town. Truly top-notch experience.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-wearing-hat_23-2149213182.jpg",
},
{
name: "Vikram Singh",
handle: "@vikram",
testimonial: "Excellent collection and impeccable attention to detail.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/handsome-businessman-man-street_158538-10231.jpg",
},
{
name: "Rahul Verma",
handle: "@rahul",
testimonial: "Quality that speaks for itself. Absolutely satisfied.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-bearded-man-with-camera_171337-4805.jpg",
},
{
name: "Amit Gupta",
handle: "@amit",
testimonial: "Perfect fit, great fabrics, and helpful staff.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/handsome-young-man-shopping-salesman-stretching-out-orange-shopping-bag-client-looking-aside-stan_1258-152518.jpg",
},
{
name: "Sanjay Mehta",
handle: "@sanjay",
testimonial: "My go-to place for all formal attire needs.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/elegant-smiling-woman-is-trying-beautiful-necklace-posh-jewellery-shop_613910-20742.jpg",
},
]}
buttons={[
{
text: "Explore Collection",
href: "#products",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/man-with-hat-looking-down_23-2148316526.jpg?_wi=1"
imageAlt="Luxurious men's boutique display"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/medium-shot-young-man-posing-outdoors_23-2151038555.jpg",
alt: "Portrait of Raj",
},
{
src: "http://img.b2bpic.net/free-photo/portrait-handsome-fashion-stylish-hipster-businessman-model-dressed-elegant-light-blue-suit_158538-11399.jpg",
alt: "Portrait of Vikram",
},
{
src: "http://img.b2bpic.net/free-photo/concentrated-young-woman-sitting-barn-holding-seddle_171337-18338.jpg",
alt: "Portrait of Rahul",
},
{
src: "http://img.b2bpic.net/free-photo/fashion-portrait-young-businessman-handsome-model-man-dressed-elegant-brown-suit-with-accessories_158538-11207.jpg",
alt: "Portrait of Amit",
},
{
src: "http://img.b2bpic.net/free-photo/hipster-model-with-long-hair_158595-2504.jpg",
alt: "Portrait of Sanjay",
},
]}
avatarText="Join 5,000+ satisfied gentlemen"
/>
</div>
<div id="home" data-section="home">
<HeroOverlayTestimonial
title="First Look Men's Wear"
description="Timeless elegance tailored for the modern man. Experience the perfect fit."
testimonials={[
{ name: "Rajiv Sharma", handle: "@rajiv", testimonial: "The best tailoring service in town. Truly top-notch experience.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-wearing-hat_23-2149213182.jpg" },
{ name: "Vikram Singh", handle: "@vikram", testimonial: "Excellent collection and impeccable attention to detail.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/handsome-businessman-man-street_158538-10231.jpg" },
{ name: "Rahul Verma", handle: "@rahul", testimonial: "Quality that speaks for itself. Absolutely satisfied.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-bearded-man-with-camera_171337-4805.jpg" },
{ name: "Amit Gupta", handle: "@amit", testimonial: "Perfect fit, great fabrics, and helpful staff.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/handsome-young-man-shopping-salesman-stretching-out-orange-shopping-bag-client-looking-aside-stan_1258-152518.jpg" },
{ name: "Sanjay Mehta", handle: "@sanjay", testimonial: "My go-to place for all formal attire needs.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/elegant-smiling-woman-is-trying-beautiful-necklace-posh-jewellery-shop_613910-20742.jpg" },
]}
buttons={[{ text: "Explore Collection", href: "#products" }]}
imageSrc="http://img.b2bpic.net/free-photo/man-with-hat-looking-down_23-2148316526.jpg"
imageAlt="Luxurious men's boutique display"
avatars={[
{ src: "http://img.b2bpic.net/free-photo/medium-shot-young-man-posing-outdoors_23-2151038555.jpg", alt: "Portrait of Raj" },
{ src: "http://img.b2bpic.net/free-photo/portrait-handsome-fashion-stylish-hipster-businessman-model-dressed-elegant-light-blue-suit_158538-11399.jpg", alt: "Portrait of Vikram" },
{ src: "http://img.b2bpic.net/free-photo/concentrated-young-woman-sitting-barn-holding-seddle_171337-18338.jpg", alt: "Portrait of Rahul" },
{ src: "http://img.b2bpic.net/free-photo/fashion-portrait-young-businessman-handsome-model-man-dressed-elegant-brown-suit-with-accessories_158538-11207.jpg", alt: "Portrait of Amit" },
{ src: "http://img.b2bpic.net/free-photo/hipster-model-with-long-hair_158595-2504.jpg", alt: "Portrait of Sanjay" },
]}
avatarText="Join 5,000+ satisfied gentlemen"
/>
</div>
<div id="about" data-section="about">
<TextSplitAbout
useInvertedBackground={false}
title="Our Legacy of Style"
description={[
"For over a decade, First Look Men's Wear has defined sophistication in tailoring. We believe in providing apparel that enhances your confidence and character.",
"Every piece we curate reflects our dedication to craftsmanship and timeless style.",
]}
/>
</div>
<div id="about" data-section="about">
<TextSplitAbout
useInvertedBackground={false}
title="Our Legacy of Style"
description={[
"For over a decade, First Look Men's Wear has defined sophistication in tailoring. We believe in providing apparel that enhances your confidence and character.", "Every piece we curate reflects our dedication to craftsmanship and timeless style."]}
/>
</div>
<div id="products" data-section="products">
<ProductCardThree
animationType="slide-up"
textboxLayout="split"
gridVariant="four-items-2x2-equal-grid"
useInvertedBackground={true}
products={[
{
id: "1",
name: "Classic Navy Blazer",
price: "₹8,999",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-sexy-handsome-fashion-businessman-model-dressed-elegant-blue-suit-posing-street-background-metrosexual_158538-10466.jpg?_wi=1",
},
{
id: "2",
name: "Casual Cotton Shirt",
price: "₹1,999",
imageSrc: "http://img.b2bpic.net/free-photo/stylish-tall-arabian-man-model-white-shirt-jeans-sunglasses-posed-against-wooden-wall-indoor-beard-attractive-arab-guy_627829-12979.jpg",
},
{
id: "3",
name: "Leather Oxford Shoes",
price: "₹4,500",
imageSrc: "http://img.b2bpic.net/free-photo/shoes_1303-3611.jpg",
},
{
id: "4",
name: "Tailored Formal Trousers",
price: "₹2,499",
imageSrc: "http://img.b2bpic.net/free-photo/casual-businessman-portrait-demonstrating-facial-expression_158595-2923.jpg",
},
{
id: "5",
name: "Wool Blend Sweater",
price: "₹3,299",
imageSrc: "http://img.b2bpic.net/free-photo/new-year-s-composition-with-knitted-items-dark-background_169016-6520.jpg",
},
{
id: "6",
name: "Silk Premium Tie",
price: "₹999",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-thoughtful-handsome-groom-wearing-brown-plaid-suit-with-bow-tie-sitting-floor-with-glass-alcohol-beverage-white-background-seriously-looking-camera_8353-12557.jpg",
},
]}
title="Seasonal Collection"
description="Discover our latest range of premium tailoring and smart-casual wear."
/>
</div>
<div id="products" data-section="products">
<ProductCardThree
animationType="slide-up"
textboxLayout="split"
gridVariant="four-items-2x2-equal-grid"
useInvertedBackground={true}
products={[
{ id: "1", name: "Classic Navy Blazer", price: "₹8,999", imageSrc: "http://img.b2bpic.net/free-photo/portrait-sexy-handsome-fashion-businessman-model-dressed-elegant-blue-suit-posing-street-background-metrosexual_158538-10466.jpg" },
{ id: "2", name: "Casual Cotton Shirt", price: "₹1,999", imageSrc: "http://img.b2bpic.net/free-photo/stylish-tall-arabian-man-model-white-shirt-jeans-sunglasses-posed-against-wooden-wall-indoor-beard-attractive-arab-guy_627829-12979.jpg" },
{ id: "3", name: "Leather Oxford Shoes", price: "₹4,500", imageSrc: "http://img.b2bpic.net/free-photo/shoes_1303-3611.jpg" },
{ id: "4", name: "Tailored Formal Trousers", price: "₹2,499", imageSrc: "http://img.b2bpic.net/free-photo/casual-businessman-portrait-demonstrating-facial-expression_158595-2923.jpg" },
{ id: "5", name: "Wool Blend Sweater", price: "₹3,299", imageSrc: "http://img.b2bpic.net/free-photo/new-year-s-composition-with-knitted-items-dark-background_169016-6520.jpg" },
{ id: "6", name: "Silk Premium Tie", price: "₹999", imageSrc: "http://img.b2bpic.net/free-photo/portrait-thoughtful-handsome-groom-wearing-brown-plaid-suit-with-bow-tie-sitting-floor-with-glass-alcohol-beverage-white-background-seriously-looking-camera_8353-12557.jpg" },
]}
title="Seasonal Collection"
description="Discover our latest range of premium tailoring and smart-casual wear."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardSixteen
textboxLayout="split"
useInvertedBackground={false}
testimonials={[
{
id: "1",
name: "Rajiv Sharma",
role: "CEO",
company: "Tech Corp",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/young-caucasian-woman-holding-shopping-bags-make-selfie-by-camera-clothing-store_839833-1916.jpg",
},
{
id: "2",
name: "Vikram Singh",
role: "Manager",
company: "Innovate",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/handsome-businesman-summer-city_1157-18997.jpg",
},
{
id: "3",
name: "Rahul Verma",
role: "Design Lead",
company: "Creative",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/male-tailor-trying-blue-coat-his-customer-sitting-wooden-chair-shop_23-2148180345.jpg",
},
{
id: "4",
name: "Amit Gupta",
role: "Entrepreneur",
company: "Self-made",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/elegance-blonde-girl-coat-store-fur-coats-leather-jackets_627829-8510.jpg",
},
{
id: "5",
name: "Sanjay Mehta",
role: "Director",
company: "Global Group",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-handsome-afro-american-male-elegant-brown-jacket-hat-isolated-dark-background_613910-17811.jpg",
},
]}
kpiItems={[
{
value: "5000+",
label: "Happy Clients",
},
{
value: "12+",
label: "Years Experience",
},
{
value: "99%",
label: "Satisfaction Rate",
},
]}
title="Customer Stories"
description="What our patrons say about their First Look experience."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardSixteen
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
testimonials={[
{ id: "1", name: "Rajiv Sharma", role: "CEO", company: "Tech Corp", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-caucasian-woman-holding-shopping-bags-make-selfie-by-camera-clothing-store_839833-1916.jpg" },
{ id: "2", name: "Vikram Singh", role: "Manager", company: "Innovate", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/handsome-businesman-summer-city_1157-18997.jpg" },
{ id: "3", name: "Rahul Verma", role: "Design Lead", company: "Creative", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/male-tailor-trying-blue-coat-his-customer-sitting-wooden-chair-shop_23-2148180345.jpg" },
{ id: "4", name: "Amit Gupta", role: "Entrepreneur", company: "Self-made", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/elegance-blonde-girl-coat-store-fur-coats-leather-jackets_627829-8510.jpg" },
{ id: "5", name: "Sanjay Mehta", role: "Director", company: "Global Group", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-handsome-afro-american-male-elegant-brown-jacket-hat-isolated-dark-background_613910-17811.jpg" },
]}
kpiItems={[
{ value: "5000+", label: "Happy Clients" },
{ value: "12+", label: "Years Experience" },
{ value: "99%", label: "Satisfaction Rate" },
]}
title="Customer Stories"
description="What our patrons say about their First Look experience."
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwentyFive
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={true}
features={[
{
title: "Bespoke Tailoring",
description: "Precision tailoring to get your measurements exactly right.",
icon: Sparkles,
mediaItems: [
{
imageSrc: "http://img.b2bpic.net/free-photo/extreme-close-up-skilled-suitmaker-doing-fit-sizing-bespoken-clothing-piece-using-measurement-tape-precise-experienced-couturier-helping-customer-with-custom-made-sartorial-suit_482257-64887.jpg",
imageAlt: "Tailoring services",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/hands-creating-clothes-close-up_23-2149007421.jpg",
imageAlt: "Bespoke process",
},
],
imageSrc: "http://img.b2bpic.net/free-photo/man-with-hat-looking-down_23-2148316526.jpg?_wi=2",
imageAlt: "tailor measuring customer",
},
{
title: "Style Consultation",
description: "Personalized advice to define your unique aesthetic.",
icon: CheckCircle,
mediaItems: [
{
imageSrc: "http://img.b2bpic.net/free-photo/young-man-fitting-grey-jacket-with-fashionable-print_7502-4371.jpg",
imageAlt: "Style consult",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/clothing-store-smiling-client-assistant-discussing-apparel-style-while-browsing-through-rack-african-american-man-showing-outfit-mall-customer-giving-fashion-advice_482257-71789.jpg",
imageAlt: "Professional advice",
},
],
imageSrc: "http://img.b2bpic.net/free-photo/black-white-analog-portrait-handsome-man-posing-indoors_23-2149630125.jpg",
imageAlt: "tailor measuring customer",
},
{
title: "Garment Care",
description: "Complete care and alterations for your valuable collection.",
icon: Shield,
mediaItems: [
{
imageSrc: "http://img.b2bpic.net/free-photo/close-up-detail-talented-professional-young-caucasian-male-designer-working-new-dress-spring-collection-checking-sizes-with-measuring-tape-spending-day-his-workshop_176420-11855.jpg",
imageAlt: "Alterations",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/close-up-client-measurement_482257-101884.jpg",
imageAlt: "Care services",
},
],
imageSrc: "http://img.b2bpic.net/free-photo/portrait-sexy-handsome-fashion-businessman-model-dressed-elegant-blue-suit-posing-street-background-metrosexual_158538-10466.jpg?_wi=2",
imageAlt: "tailor measuring customer",
},
]}
title="Our Specialized Services"
description="Beyond apparel, we offer a suite of services to ensure your perfect look."
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwentyFive
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={true}
features={[
{ title: "Bespoke Tailoring", description: "Precision tailoring to get your measurements exactly right.", icon: Sparkles, mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-photo/extreme-close-up-skilled-suitmaker-doing-fit-sizing-bespoken-clothing-piece-using-measurement-tape-precise-experienced-couturier-helping-customer-with-custom-made-sartorial-suit_482257-64887.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/hands-creating-clothes-close-up_23-2149007421.jpg" }] },
{ title: "Style Consultation", description: "Personalized advice to define your unique aesthetic.", icon: CheckCircle, mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-photo/young-man-fitting-grey-jacket-with-fashionable-print_7502-4371.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/clothing-store-smiling-client-assistant-discussing-apparel-style-while-browsing-through-rack-african-american-man-showing-outfit-mall-customer-giving-fashion-advice_482257-71789.jpg" }] },
{ title: "Garment Care", description: "Complete care and alterations for your valuable collection.", icon: Shield, mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-photo/close-up-detail-talented-professional-young-caucasian-male-designer-working-new-dress-spring-collection-checking-sizes-with-measuring-tape-spending-day-his-workshop_176420-11855.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/close-up-client-measurement_482257-101884.jpg" }] },
]}
title="Our Specialized Services"
description="Beyond apparel, we offer a suite of services to ensure your perfect look."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardThree
animationType="scale-rotate"
textboxLayout="split"
useInvertedBackground={false}
metrics={[
{
id: "m1",
icon: Award,
title: "Garments Crafted",
value: "15,000+",
},
{
id: "m2",
icon: Star,
title: "Average Rating",
value: "4.9/5",
},
{
id: "m3",
icon: CheckCircle,
title: "Perfect Fits",
value: "99.8%",
},
]}
title="Our Quality Commitment"
description="Numbers reflect our commitment to excellence."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardThree
animationType="scale-rotate"
textboxLayout="split"
useInvertedBackground={false}
metrics={[
{ id: "m1", icon: Award, title: "Garments Crafted", value: "15,000+" },
{ id: "m2", icon: Star, title: "Average Rating", value: "4.9/5" },
{ id: "m3", icon: CheckCircle, title: "Perfect Fits", value: "99.8%" },
]}
title="Our Quality Commitment"
description="Numbers reflect our commitment to excellence."
/>
</div>
<div id="faq" data-section="faq">
<FaqBase
textboxLayout="split"
useInvertedBackground={true}
faqs={[
{
id: "f1",
title: "Do you offer alterations?",
content: "Yes, we provide full alteration services for all garments purchased here.",
},
{
id: "f2",
title: "How long does a suit take?",
content: "Standard tailoring takes about 7-10 business days.",
},
{
id: "f3",
title: "Do you offer home visits?",
content: "We offer personal style consultations at your convenience.",
},
]}
title="Common Questions"
description="Have questions? We're here to help."
faqsAnimation="slide-up"
/>
</div>
<div id="faq" data-section="faq">
<FaqBase
textboxLayout="split"
useInvertedBackground={true}
faqs={[
{ id: "f1", title: "Do you offer alterations?", content: "Yes, we provide full alteration services for all garments purchased here." },
{ id: "f2", title: "How long does a suit take?", content: "Standard tailoring takes about 7-10 business days." },
{ id: "f3", title: "Do you offer home visits?", content: "We offer personal style consultations at your convenience." },
]}
title="Common Questions"
description="Have questions? We're here to help."
faqsAnimation="slide-up"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplit
useInvertedBackground={false}
background={{
variant: "gradient-bars",
}}
tag="Visit Us"
title="Start Your Style Journey"
description="Get in touch or book an appointment at our store."
imageSrc="http://img.b2bpic.net/free-photo/young-handsome-man-choosing-clothes-shop_1303-19712.jpg"
mediaAnimation="slide-up"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplit
useInvertedBackground={false}
background={{ variant: "gradient-bars" }}
tag="Visit Us"
title="Start Your Style Journey"
description="Get in touch or book an appointment at our store."
imageSrc="http://img.b2bpic.net/free-photo/young-handsome-man-choosing-clothes-shop_1303-19712.jpg"
mediaAnimation="slide-up"
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="First Look"
columns={[
{
title: "Navigation",
items: [
{
label: "Home",
href: "#home",
},
{
label: "Collection",
href: "#products",
},
{
label: "About",
href: "#about",
},
],
},
{
title: "Support",
items: [
{
label: "FAQ",
href: "#faq",
},
{
label: "Contact",
href: "#contact",
},
{
label: "Privacy",
href: "#",
},
],
},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="First Look"
columns={[
{ title: "Navigation", items: [{ label: "Home", href: "#home" }, { label: "Collection", href: "#products" }, { label: "About", href: "#about" }] },
{ title: "Support", items: [{ label: "FAQ", href: "#faq" }, { label: "Contact", href: "#contact" }, { label: "Privacy", href: "#" }] },
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);