Merge version_1 into main
Merge version_1 into main
This commit was merged in pull request #1.
This commit is contained in:
295
src/app/page.tsx
295
src/app/page.tsx
@@ -33,25 +33,15 @@ export default function LandingPage() {
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "#hero",
|
||||
},
|
||||
name: "Home", id: "#hero"},
|
||||
{
|
||||
name: "Collection",
|
||||
id: "#products",
|
||||
},
|
||||
name: "Collection", id: "#products"},
|
||||
{
|
||||
name: "About Us",
|
||||
id: "#about",
|
||||
},
|
||||
name: "About Us", id: "#about"},
|
||||
{
|
||||
name: "Testimonials",
|
||||
id: "#testimonials",
|
||||
},
|
||||
name: "Testimonials", id: "#testimonials"},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "#contact",
|
||||
},
|
||||
name: "Contact", id: "#contact"},
|
||||
]}
|
||||
logoSrc="http://img.b2bpic.net/free-photo/fashion-stylish-model-dressed-elegant-light-pink-suit-posing-near-white-wall_158538-13424.jpg"
|
||||
logoAlt="Mocca Mens Wear logo"
|
||||
@@ -62,69 +52,44 @@ export default function LandingPage() {
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCentered
|
||||
background={{
|
||||
variant: "radial-gradient",
|
||||
}}
|
||||
variant: "radial-gradient"}}
|
||||
title="Mocca Mens Wear: Elevate Your Style."
|
||||
description="Discover timeless elegance and modern sophistication with our exclusive collection. Crafted for the discerning gentleman."
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-pensive-african-american-man-dressed-classic-brown-jacket-standing-studio-dark-background_613910-6565.jpg",
|
||||
alt: "Stylish man",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-pensive-african-american-man-dressed-classic-brown-jacket-standing-studio-dark-background_613910-6565.jpg", alt: "Stylish man"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/medium-shot-young-man-posing-chair_23-2149518257.jpg",
|
||||
alt: "Professional male model",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/medium-shot-young-man-posing-chair_23-2149518257.jpg", alt: "Professional male model"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-smiling-businessman-outdoors_23-2148170991.jpg",
|
||||
alt: "Gentleman in suit",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-smiling-businessman-outdoors_23-2148170991.jpg", alt: "Gentleman in suit"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/guy-dressed-brown-outfit-wearing-sunglasses-poses-with-backpack_197531-26761.jpg",
|
||||
alt: "Fashionable man",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/guy-dressed-brown-outfit-wearing-sunglasses-poses-with-backpack_197531-26761.jpg", alt: "Fashionable man"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/rich-man-with-beard-smokes-cradle_1153-7859.jpg",
|
||||
alt: "Classic male model",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/rich-man-with-beard-smokes-cradle_1153-7859.jpg", alt: "Classic male model"},
|
||||
]}
|
||||
avatarText="Loved by thousands of stylish men."
|
||||
buttons={[
|
||||
{
|
||||
text: "Shop Now",
|
||||
href: "#products",
|
||||
},
|
||||
text: "Shop Now", href: "#products"},
|
||||
{
|
||||
text: "Explore Collection",
|
||||
href: "#products",
|
||||
},
|
||||
text: "Explore Collection", href: "#products"},
|
||||
]}
|
||||
buttonAnimation="opacity"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Premium Craftsmanship",
|
||||
icon: Sparkles,
|
||||
type: "text-icon", text: "Premium Craftsmanship", icon: Sparkles,
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Ethically Sourced Materials",
|
||||
icon: Leaf,
|
||||
type: "text-icon", text: "Ethically Sourced Materials", icon: Leaf,
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Tailored for Perfection",
|
||||
icon: Ruler,
|
||||
type: "text-icon", text: "Tailored for Perfection", icon: Ruler,
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Unparalleled Comfort",
|
||||
icon: Feather,
|
||||
type: "text-icon", text: "Unparalleled Comfort", icon: Feather,
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Iconic Style",
|
||||
icon: Crown,
|
||||
type: "text-icon", text: "Iconic Style", icon: Crown,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
@@ -138,12 +103,9 @@ export default function LandingPage() {
|
||||
title="Crafting Distinction: The Mocca Mens Wear Legacy"
|
||||
buttons={[
|
||||
{
|
||||
text: "Learn More",
|
||||
href: "#",
|
||||
},
|
||||
text: "Learn More", href: "#"},
|
||||
]}
|
||||
buttonAnimation="blur-reveal"
|
||||
description="At Mocca, we believe clothing is an expression of self. Our journey began with a passion for exceptional quality and refined aesthetics, delivering garments that empower confidence and define modern masculinity. Each piece is a testament to meticulous craftsmanship and a commitment to enduring style."
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -156,27 +118,16 @@ export default function LandingPage() {
|
||||
tagAnimation="blur-reveal"
|
||||
buttons={[
|
||||
{
|
||||
text: "Discover Craftsmanship",
|
||||
href: "#about",
|
||||
},
|
||||
text: "Discover Craftsmanship", href: "#about"},
|
||||
]}
|
||||
buttonAnimation="blur-reveal"
|
||||
accordionItems={[
|
||||
{
|
||||
id: "quality",
|
||||
title: "Premium Fabric Selection",
|
||||
content: "We meticulously source the finest natural fibers and innovative blends, ensuring each garment feels luxurious and performs impeccably.",
|
||||
},
|
||||
id: "quality", title: "Premium Fabric Selection", content: "We meticulously source the finest natural fibers and innovative blends, ensuring each garment feels luxurious and performs impeccably."},
|
||||
{
|
||||
id: "craftsmanship",
|
||||
title: "Artisanal Tailoring",
|
||||
content: "Our skilled artisans employ time-honored techniques coupled with modern precision to create pieces with impeccable fit and finish.",
|
||||
},
|
||||
id: "craftsmanship", title: "Artisanal Tailoring", content: "Our skilled artisans employ time-honored techniques coupled with modern precision to create pieces with impeccable fit and finish."},
|
||||
{
|
||||
id: "sustainability",
|
||||
title: "Sustainable Practices",
|
||||
content: "Committed to ethical production, we prioritize eco-friendly processes and materials, ensuring style without compromise.",
|
||||
},
|
||||
id: "sustainability", title: "Sustainable Practices", content: "Committed to ethical production, we prioritize eco-friendly processes and materials, ensuring style without compromise."},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/closeup-shot-colorful-fabric-section-outdoor-market_181624-20445.jpg"
|
||||
imageAlt="Tailor working on a suit"
|
||||
@@ -193,47 +144,17 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "product-1",
|
||||
name: "Classic White Dress Shirt",
|
||||
price: "$89.00",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-groom-buttoning-his-shirt_1153-444.jpg",
|
||||
imageAlt: "Classic white dress shirt",
|
||||
},
|
||||
id: "product-1", name: "Classic White Dress Shirt", price: "$89.00", imageSrc: "http://img.b2bpic.net/free-photo/close-up-groom-buttoning-his-shirt_1153-444.jpg", imageAlt: "Classic white dress shirt"},
|
||||
{
|
||||
id: "product-2",
|
||||
name: "Indigo Denim Casual Shirt",
|
||||
price: "$75.00",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-confident-stylish-hipster-lambersexual-model-with-curly-hairstyle-sexy-man-dressed-jeans-jacket-fashion-male-isolated-blue-wall-studio_158538-26534.jpg",
|
||||
imageAlt: "Indigo denim casual shirt",
|
||||
},
|
||||
id: "product-2", name: "Indigo Denim Casual Shirt", price: "$75.00", imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-confident-stylish-hipster-lambersexual-model-with-curly-hairstyle-sexy-man-dressed-jeans-jacket-fashion-male-isolated-blue-wall-studio_158538-26534.jpg", imageAlt: "Indigo denim casual shirt"},
|
||||
{
|
||||
id: "product-3",
|
||||
name: "Tailored Grey Blazer",
|
||||
price: "$299.00",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-sexy-handsome-fashion-businessman-model-dressed-elegant-suit-posing-street-background-metrosexual_158538-10616.jpg",
|
||||
imageAlt: "Tailored grey blazer",
|
||||
},
|
||||
id: "product-3", name: "Tailored Grey Blazer", price: "$299.00", imageSrc: "http://img.b2bpic.net/free-photo/portrait-sexy-handsome-fashion-businessman-model-dressed-elegant-suit-posing-street-background-metrosexual_158538-10616.jpg", imageAlt: "Tailored grey blazer"},
|
||||
{
|
||||
id: "product-4",
|
||||
name: "Merino Wool Knit Sweater",
|
||||
price: "$120.00",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-man-wooden-wall_176420-11290.jpg",
|
||||
imageAlt: "Merino wool knit sweater",
|
||||
},
|
||||
id: "product-4", name: "Merino Wool Knit Sweater", price: "$120.00", imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-man-wooden-wall_176420-11290.jpg", imageAlt: "Merino wool knit sweater"},
|
||||
{
|
||||
id: "product-5",
|
||||
name: "Slim Fit Chino Trousers",
|
||||
price: "$95.00",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-having-iced-coffee-break-while-using-smartphone-outdoors_23-2149567222.jpg",
|
||||
imageAlt: "Slim fit chino trousers",
|
||||
},
|
||||
id: "product-5", name: "Slim Fit Chino Trousers", price: "$95.00", imageSrc: "http://img.b2bpic.net/free-photo/man-having-iced-coffee-break-while-using-smartphone-outdoors_23-2149567222.jpg", imageAlt: "Slim fit chino trousers"},
|
||||
{
|
||||
id: "product-6",
|
||||
name: "Premium Leather Wallet",
|
||||
price: "$60.00",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-image-redhead-bearded-male-holds-cup-coffee-grey-background_613910-10244.jpg",
|
||||
imageAlt: "Premium leather wallet",
|
||||
},
|
||||
id: "product-6", name: "Premium Leather Wallet", price: "$60.00", imageSrc: "http://img.b2bpic.net/free-photo/close-up-image-redhead-bearded-male-holds-cup-coffee-grey-background_613910-10244.jpg", imageAlt: "Premium leather wallet"},
|
||||
]}
|
||||
title="Shop the Latest in Menswear"
|
||||
description="Explore our curated selection of suits, casual wear, and accessories designed for every occasion, ensuring you look impeccable."
|
||||
@@ -241,9 +162,7 @@ export default function LandingPage() {
|
||||
tagAnimation="blur-reveal"
|
||||
buttons={[
|
||||
{
|
||||
text: "View All Products",
|
||||
href: "#",
|
||||
},
|
||||
text: "View All Products", href: "#"},
|
||||
]}
|
||||
buttonAnimation="blur-reveal"
|
||||
/>
|
||||
@@ -257,50 +176,20 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Alex R.",
|
||||
role: "Entrepreneur",
|
||||
company: "Innovate Ventures",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/attractive-young-woman-dressed-floral-dress_158595-4778.jpg",
|
||||
imageAlt: "Alex R. testimonial avatar",
|
||||
},
|
||||
id: "1", name: "Alex R.", role: "Entrepreneur", company: "Innovate Ventures", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/attractive-young-woman-dressed-floral-dress_158595-4778.jpg", imageAlt: "Alex R. testimonial avatar"},
|
||||
{
|
||||
id: "2",
|
||||
name: "Ben S.",
|
||||
role: "Fashion Blogger",
|
||||
company: "Style Savvy",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-confident-stylish-hipster-lambersexual-modelmodern-man-dressed-elegant-suit-fashion-male-posing-street-background-europe-city-sunset-sunglasses_158538-22398.jpg",
|
||||
imageAlt: "Ben S. testimonial avatar",
|
||||
},
|
||||
id: "2", name: "Ben S.", role: "Fashion Blogger", company: "Style Savvy", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-confident-stylish-hipster-lambersexual-modelmodern-man-dressed-elegant-suit-fashion-male-posing-street-background-europe-city-sunset-sunglasses_158538-22398.jpg", imageAlt: "Ben S. testimonial avatar"},
|
||||
{
|
||||
id: "3",
|
||||
name: "Charles L.",
|
||||
role: "Senior Executive",
|
||||
company: "Global Corp",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/senior-businessman-outside-modern-office-building_1139-1076.jpg",
|
||||
imageAlt: "Charles L. testimonial avatar",
|
||||
},
|
||||
id: "3", name: "Charles L.", role: "Senior Executive", company: "Global Corp", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/senior-businessman-outside-modern-office-building_1139-1076.jpg", imageAlt: "Charles L. testimonial avatar"},
|
||||
{
|
||||
id: "4",
|
||||
name: "David K.",
|
||||
role: "Creative Director",
|
||||
company: "Pixel Studio",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/male-painter-studio-using-watercolor-his-art_52683-109302.jpg",
|
||||
imageAlt: "David K. testimonial avatar",
|
||||
},
|
||||
id: "4", name: "David K.", role: "Creative Director", company: "Pixel Studio", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/male-painter-studio-using-watercolor-his-art_52683-109302.jpg", imageAlt: "David K. testimonial avatar"},
|
||||
{
|
||||
id: "5",
|
||||
name: "Ethan P.",
|
||||
role: "Marketing Manager",
|
||||
company: "Brand Builders",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/expressive-transgender-posing-medium-shot_23-2149154632.jpg",
|
||||
imageAlt: "Ethan P. testimonial avatar",
|
||||
},
|
||||
id: "5", name: "Ethan P.", role: "Marketing Manager", company: "Brand Builders", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/expressive-transgender-posing-medium-shot_23-2149154632.jpg", imageAlt: "Ethan P. testimonial avatar"},
|
||||
]}
|
||||
title="Voices of Style and Satisfaction"
|
||||
description="Our commitment to quality and service shines through in the words of those who wear Mocca and experience its unparalleled comfort and elegance."
|
||||
@@ -308,9 +197,7 @@ export default function LandingPage() {
|
||||
tagAnimation="blur-reveal"
|
||||
buttons={[
|
||||
{
|
||||
text: "Read All Reviews",
|
||||
href: "#",
|
||||
},
|
||||
text: "Read All Reviews", href: "#"},
|
||||
]}
|
||||
buttonAnimation="blur-reveal"
|
||||
/>
|
||||
@@ -321,23 +208,14 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"GQ Magazine",
|
||||
"Vogue Hommes",
|
||||
"Esquire",
|
||||
"FashionBeans",
|
||||
"Hypebeast",
|
||||
"Complex Style",
|
||||
"Highsnobiety",
|
||||
]}
|
||||
"GQ Magazine", "Vogue Hommes", "Esquire", "FashionBeans", "Hypebeast", "Complex Style", "Highsnobiety"]}
|
||||
title="Trusted by Influencers & Stylists"
|
||||
description="Mocca Mens Wear is the choice for those who set trends, not follow them. Our brand is featured and celebrated by leading voices in fashion."
|
||||
tag="As Seen On"
|
||||
tagAnimation="blur-reveal"
|
||||
buttons={[
|
||||
{
|
||||
text: "See Features",
|
||||
href: "#",
|
||||
},
|
||||
text: "See Features", href: "#"},
|
||||
]}
|
||||
buttonAnimation="blur-reveal"
|
||||
speed={40}
|
||||
@@ -350,28 +228,17 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "faq-1",
|
||||
title: "What materials are used in Mocca Mens Wear?",
|
||||
content: "We primarily use premium natural fibers like Supima cotton, Merino wool, and luxurious linen blends, alongside innovative synthetic blends for enhanced performance and durability.",
|
||||
},
|
||||
id: "faq-1", title: "What materials are used in Mocca Mens Wear?", content: "We primarily use premium natural fibers like Supima cotton, Merino wool, and luxurious linen blends, alongside innovative synthetic blends for enhanced performance and durability."},
|
||||
{
|
||||
id: "faq-2",
|
||||
title: "How do I find my correct size?",
|
||||
content: "Please refer to our detailed sizing guide available on each product page. It includes measurements and tips to help you find the perfect fit. Our customer service team is also available for personalized advice.",
|
||||
},
|
||||
id: "faq-2", title: "How do I find my correct size?", content: "Please refer to our detailed sizing guide available on each product page. It includes measurements and tips to help you find the perfect fit. Our customer service team is also available for personalized advice."},
|
||||
{
|
||||
id: "faq-3",
|
||||
title: "What is your return policy?",
|
||||
content: "We offer hassle-free returns within 30 days of purchase for unworn items with original tags. Please visit our 'Returns & Exchanges' page for complete details and instructions.",
|
||||
},
|
||||
id: "faq-3", title: "What is your return policy?", content: "We offer hassle-free returns within 30 days of purchase for unworn items with original tags. Please visit our 'Returns & Exchanges' page for complete details and instructions."},
|
||||
]}
|
||||
sideTitle="Your Questions, Answered"
|
||||
sideDescription="Find quick answers to common queries about our clothing, sizing, orders, and more. We're here to make your Mocca experience seamless."
|
||||
buttons={[
|
||||
{
|
||||
text: "View All FAQs",
|
||||
href: "#",
|
||||
},
|
||||
text: "View All FAQs", href: "#"},
|
||||
]}
|
||||
buttonAnimation="blur-reveal"
|
||||
faqsAnimation="slide-up"
|
||||
@@ -384,18 +251,13 @@ export default function LandingPage() {
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
variant: "gradient-bars"}}
|
||||
text="Ready to Refine Your Wardrobe? Get in Touch with Mocca Mens Wear"
|
||||
buttons={[
|
||||
{
|
||||
text: "Contact Us",
|
||||
href: "#",
|
||||
},
|
||||
text: "Contact Us", href: "#"},
|
||||
{
|
||||
text: "Email Us",
|
||||
href: "mailto:info@moccawear.com",
|
||||
},
|
||||
text: "Email Us", href: "mailto:info@moccawear.com"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -407,66 +269,39 @@ export default function LandingPage() {
|
||||
logoText="Mocca Mens Wear"
|
||||
columns={[
|
||||
{
|
||||
title: "Shop",
|
||||
items: [
|
||||
title: "Shop", items: [
|
||||
{
|
||||
label: "New Arrivals",
|
||||
href: "#",
|
||||
},
|
||||
label: "New Arrivals", href: "#"},
|
||||
{
|
||||
label: "Suits & Blazers",
|
||||
href: "#",
|
||||
},
|
||||
label: "Suits & Blazers", href: "#"},
|
||||
{
|
||||
label: "Shirts",
|
||||
href: "#",
|
||||
},
|
||||
label: "Shirts", href: "#"},
|
||||
{
|
||||
label: "Accessories",
|
||||
href: "#",
|
||||
},
|
||||
label: "Accessories", href: "#"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "About",
|
||||
items: [
|
||||
title: "About", items: [
|
||||
{
|
||||
label: "Our Story",
|
||||
href: "#about",
|
||||
},
|
||||
label: "Our Story", href: "#about"},
|
||||
{
|
||||
label: "Craftsmanship",
|
||||
href: "#features",
|
||||
},
|
||||
label: "Craftsmanship", href: "#features"},
|
||||
{
|
||||
label: "Careers",
|
||||
href: "#",
|
||||
},
|
||||
label: "Careers", href: "#"},
|
||||
{
|
||||
label: "Press",
|
||||
href: "#social-proof",
|
||||
},
|
||||
label: "Press", href: "#social-proof"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
title: "Support", items: [
|
||||
{
|
||||
label: "Contact Us",
|
||||
href: "#contact",
|
||||
},
|
||||
label: "Contact Us", href: "#contact"},
|
||||
{
|
||||
label: "FAQs",
|
||||
href: "#faq",
|
||||
},
|
||||
label: "FAQs", href: "#faq"},
|
||||
{
|
||||
label: "Shipping & Returns",
|
||||
href: "#",
|
||||
},
|
||||
label: "Shipping & Returns", href: "#"},
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
label: "Privacy Policy", href: "#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
|
||||
Reference in New Issue
Block a user