Merge version_2_1782031844612 into main #1
@@ -1,182 +1,32 @@
|
||||
import AboutMediaOverlay from '@/components/sections/about/AboutMediaOverlay';
|
||||
import ContactCta from '@/components/sections/contact/ContactCta';
|
||||
import FaqSimple from '@/components/sections/faq/FaqSimple';
|
||||
import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
|
||||
import HeroSplit from '@/components/sections/hero/HeroSplit';
|
||||
import TestimonialMarqueeOverlayCards from '@/components/sections/testimonial/TestimonialMarqueeOverlayCards';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
// AUTO-GENERATED shell by per-section-migrate.
|
||||
// Section bodies live in ./<PageBase>/sections/<X>.tsx. Edit the section
|
||||
// files directly. Non-block content (wrappers, non-inlinable sections) is
|
||||
// preserved inline; extracted section blocks become <XSection/> refs.
|
||||
|
||||
export default function HomePage() {
|
||||
import React from 'react';
|
||||
import HeroSection from './HomePage/sections/Hero';
|
||||
import AboutSection from './HomePage/sections/About';
|
||||
import ProductsSection from './HomePage/sections/Products';
|
||||
import TestimonialsSection from './HomePage/sections/Testimonials';
|
||||
import FaqSection from './HomePage/sections/Faq';
|
||||
import ContactSection from './HomePage/sections/Contact';
|
||||
|
||||
|
||||
import CertificationsSection from './HomePage/sections/Certifications';export default function HomePage(): React.JSX.Element {
|
||||
return (
|
||||
<>
|
||||
<div id="hero" data-section="hero">
|
||||
<SectionErrorBoundary name="hero">
|
||||
<HeroSplit
|
||||
tag="Luxury Defined"
|
||||
title="Timeless Elegance in Every Stitch"
|
||||
description="Discover the art of refined luxury with our exclusive collection of premium leather bags, handcrafted for the modern connoisseur."
|
||||
primaryButton={{
|
||||
text: "Explore Collection",
|
||||
href: "#products",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Contact Us",
|
||||
href: "#contact",
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/top-view-desk-concept-with-copy-space_23-2148459663.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<>
|
||||
<HeroSection />
|
||||
<CertificationsSection />
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<SectionErrorBoundary name="about">
|
||||
<AboutMediaOverlay
|
||||
tag="Our Story"
|
||||
title="Legacy of Craftsmanship"
|
||||
description="At Mukmhal, we believe in the harmony of tradition and innovation. Every bag is a testament to our commitment to quality, sourcing the finest materials to create accessories that stand the test of time."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/close-up-bootmaker-working-with-leather-textile_171337-12307.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<AboutSection />
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<SectionErrorBoundary name="products">
|
||||
<FeaturesImageBento
|
||||
tag="The Collection"
|
||||
title="Signature Pieces"
|
||||
description="Exquisitely designed bags that define your presence."
|
||||
items={[
|
||||
{
|
||||
title: "Classic Tote",
|
||||
description: "The ultimate everyday statement.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/fashion-portrait-two-stylish-caucasian-woman-blazers-french-cap-classic-white-hat-stand_343596-2175.jpg",
|
||||
},
|
||||
{
|
||||
title: "Crossbody Chic",
|
||||
description: "Hands-free luxury refined.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/women-s-day-still-life-with-makeup-jewelry_23-2149263158.jpg",
|
||||
},
|
||||
{
|
||||
title: "Evening Clutch",
|
||||
description: "Sophistication for every occasion.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-women-s-bag-with-mediterranean-tiles-aesthetics_23-2150916702.jpg",
|
||||
},
|
||||
{
|
||||
title: "Satchel Elegance",
|
||||
description: "Timeless structure and style.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-brown-bow-with-black-bow-dark-surface-darkness-pin-measure-photo-color_179666-24409.jpg",
|
||||
},
|
||||
{
|
||||
title: "Modern Bucket",
|
||||
description: "Contemporary design reinvented.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/small-purse-studio-still-life_23-2151046495.jpg",
|
||||
},
|
||||
{
|
||||
title: "Signature Hobo",
|
||||
description: "Relaxed and utterly refined.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-father-s-day-composition-father-s-day-top-view_185193-109772.jpg",
|
||||
},
|
||||
{
|
||||
title: "Deluxe Portfolio",
|
||||
description: "Function meets luxury design.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-black-fabric-texture-outdoor-setting-sunlight-background-blurred-product-shot_272375-26448.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<ProductsSection />
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<SectionErrorBoundary name="testimonials">
|
||||
<TestimonialMarqueeOverlayCards
|
||||
tag="Client Stories"
|
||||
title="Voices of Elegance"
|
||||
description="Discover why our clients choose Mukmhal for their accessory essentials."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Sophia Martinez",
|
||||
role: "Fashion Stylist",
|
||||
company: "Elite Fashion",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/selfconfident-curly-woman-silk-black-stylish-home-suit-sits-carpet-floor-leans-lea_197531-33664.jpg",
|
||||
},
|
||||
{
|
||||
name: "Liam Anderson",
|
||||
role: "Director",
|
||||
company: "Design Lab",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/positive-carefree-teenage-girl-with-bun-hairstyle-looks-happily-away-wears-stylish-green-costume-white-boots-blue-eyeliner-feels-good-poses-against-grey-concrete-wall-urban-lifestyle-concept_273609-57790.jpg",
|
||||
},
|
||||
{
|
||||
name: "Chloe Bennett",
|
||||
role: "Creative Lead",
|
||||
company: "Artisan Group",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-stylish-young-woman_158538-4138.jpg",
|
||||
},
|
||||
{
|
||||
name: "Jordan Smith",
|
||||
role: "Consultant",
|
||||
company: "Vogue Insights",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/attractive-young-woman-with-cutlery-restaurant_169016-21627.jpg",
|
||||
},
|
||||
{
|
||||
name: "Elena Rossi",
|
||||
role: "Curator",
|
||||
company: "Gallery Noir",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/girl-with-white-manicure-covers-her-mouth-with-her-hand-looks-camera-coquettishly-snapshot-brunette-red-knitted-jacket_197531-26531.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<TestimonialsSection />
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<SectionErrorBoundary name="faq">
|
||||
<FaqSimple
|
||||
tag="Support"
|
||||
title="Frequently Asked Questions"
|
||||
description="Everything you need to know about our luxury collection and ordering process."
|
||||
items={[
|
||||
{
|
||||
question: "What materials do you use?",
|
||||
answer: "We exclusively use ethically sourced, high-grade full-grain Italian leather.",
|
||||
},
|
||||
{
|
||||
question: "Do you offer international shipping?",
|
||||
answer: "Yes, we ship globally to ensure luxury reaches you wherever you are.",
|
||||
},
|
||||
{
|
||||
question: "How do I care for my bag?",
|
||||
answer: "Each purchase comes with a comprehensive care guide to maintain the leather's natural beauty.",
|
||||
},
|
||||
{
|
||||
question: "Is there a warranty?",
|
||||
answer: "All Mukmhal pieces are covered by a two-year artisan quality guarantee.",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<FaqSection />
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<SectionErrorBoundary name="contact">
|
||||
<ContactCta
|
||||
tag="Concierge"
|
||||
text="Ready to own your piece of timeless luxury? Contact our concierge team for custom inquiries or bespoke service."
|
||||
primaryButton={{
|
||||
text: "Contact Us",
|
||||
href: "mailto:concierge@mukmhal.com",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Follow on Instagram",
|
||||
href: "https://instagram.com/mukmhal_co",
|
||||
}}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<ContactSection />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
21
src/pages/HomePage/sections/About.tsx
Normal file
21
src/pages/HomePage/sections/About.tsx
Normal file
@@ -0,0 +1,21 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "about" section.
|
||||
|
||||
import React from 'react';
|
||||
import AboutMediaOverlay from '@/components/sections/about/AboutMediaOverlay';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function AboutSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="about" data-section="about">
|
||||
<SectionErrorBoundary name="about">
|
||||
<AboutMediaOverlay
|
||||
tag="Our Story"
|
||||
title="Legacy of Craftsmanship"
|
||||
description="At Mukmhal, we believe in the harmony of tradition and innovation. Every bag is a testament to our commitment to quality, sourcing the finest materials to create accessories that stand the test of time."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/close-up-bootmaker-working-with-leather-textile_171337-12307.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
43
src/pages/HomePage/sections/Certifications.tsx
Normal file
43
src/pages/HomePage/sections/Certifications.tsx
Normal file
@@ -0,0 +1,43 @@
|
||||
import { Leaf, Scissors, ShieldCheck } from "lucide-react";
|
||||
import ScrollReveal from "@/components/ui/ScrollReveal";
|
||||
|
||||
export default function Certifications() {
|
||||
const certs = [
|
||||
{
|
||||
icon: Leaf,
|
||||
title: "Ethically Sourced",
|
||||
description: "We partner with suppliers who share our commitment to sustainable and ethical practices."
|
||||
},
|
||||
{
|
||||
icon: Scissors,
|
||||
title: "Artisan Crafted",
|
||||
description: "Meticulously handcrafted by master artisans with decades of experience."
|
||||
},
|
||||
{
|
||||
icon: ShieldCheck,
|
||||
title: "Guaranteed Authenticity",
|
||||
description: "Each product comes with a certificate of authenticity and lifetime warranty."
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<section data-webild-section="certifications" id="certifications" className="relative w-full py-16 bg-background border-b border-white/5">
|
||||
<div className="w-content-width mx-auto">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12">
|
||||
{certs.map((cert, idx) => {
|
||||
const Icon = cert.icon;
|
||||
return (
|
||||
<ScrollReveal variant="fade" key={idx} delay={idx * 0.1} className="flex flex-col items-center text-center">
|
||||
<div className="mb-4 text-accent">
|
||||
<Icon className="w-8 h-8" strokeWidth={1.5} />
|
||||
</div>
|
||||
<h3 className="text-lg font-medium text-foreground mb-2 uppercase tracking-widest">{cert.title}</h3>
|
||||
<p className="text-sm text-accent leading-relaxed">{cert.description}</p>
|
||||
</ScrollReveal>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
27
src/pages/HomePage/sections/Contact.tsx
Normal file
27
src/pages/HomePage/sections/Contact.tsx
Normal file
@@ -0,0 +1,27 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "contact" section.
|
||||
|
||||
import React from 'react';
|
||||
import ContactCta from '@/components/sections/contact/ContactCta';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function ContactSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="contact" data-section="contact">
|
||||
<SectionErrorBoundary name="contact">
|
||||
<ContactCta
|
||||
tag="Concierge"
|
||||
text="Ready to own your piece of timeless luxury? Contact our concierge team for custom inquiries or bespoke service."
|
||||
primaryButton={{
|
||||
text: "Contact Us",
|
||||
href: "mailto:concierge@mukmhal.com",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Follow on Instagram",
|
||||
href: "https://instagram.com/mukmhal_co",
|
||||
}}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
38
src/pages/HomePage/sections/Faq.tsx
Normal file
38
src/pages/HomePage/sections/Faq.tsx
Normal file
@@ -0,0 +1,38 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "faq" section.
|
||||
|
||||
import React from 'react';
|
||||
import FaqSimple from '@/components/sections/faq/FaqSimple';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function FaqSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="faq" data-section="faq">
|
||||
<SectionErrorBoundary name="faq">
|
||||
<FaqSimple
|
||||
tag="Support"
|
||||
title="Frequently Asked Questions"
|
||||
description="Everything you need to know about our luxury collection and ordering process."
|
||||
items={[
|
||||
{
|
||||
question: "What materials do you use?",
|
||||
answer: "We exclusively use ethically sourced, high-grade full-grain Italian leather.",
|
||||
},
|
||||
{
|
||||
question: "Do you offer international shipping?",
|
||||
answer: "Yes, we ship globally to ensure luxury reaches you wherever you are.",
|
||||
},
|
||||
{
|
||||
question: "How do I care for my bag?",
|
||||
answer: "Each purchase comes with a comprehensive care guide to maintain the leather's natural beauty.",
|
||||
},
|
||||
{
|
||||
question: "Is there a warranty?",
|
||||
answer: "All Mukmhal pieces are covered by a two-year artisan quality guarantee.",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
29
src/pages/HomePage/sections/Hero.tsx
Normal file
29
src/pages/HomePage/sections/Hero.tsx
Normal file
@@ -0,0 +1,29 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "hero" section.
|
||||
|
||||
import React from 'react';
|
||||
import HeroSplit from '@/components/sections/hero/HeroSplit';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function HeroSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="hero" data-section="hero">
|
||||
<SectionErrorBoundary name="hero">
|
||||
<HeroSplit
|
||||
tag="Luxury Defined"
|
||||
title="Timeless Elegance in Every Stitch"
|
||||
description="Discover the art of refined luxury with our exclusive collection of premium leather bags, handcrafted for the modern connoisseur."
|
||||
primaryButton={{
|
||||
text: "Explore Collection",
|
||||
href: "#products",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Contact Us",
|
||||
href: "#contact",
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/top-view-desk-concept-with-copy-space_23-2148459663.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
57
src/pages/HomePage/sections/Products.tsx
Normal file
57
src/pages/HomePage/sections/Products.tsx
Normal file
@@ -0,0 +1,57 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "products" section.
|
||||
|
||||
import React from 'react';
|
||||
import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function ProductsSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="products" data-section="products">
|
||||
<SectionErrorBoundary name="products">
|
||||
<FeaturesImageBento
|
||||
tag="The Collection"
|
||||
title="Signature Pieces"
|
||||
description="Exquisitely designed bags that define your presence."
|
||||
items={[
|
||||
{
|
||||
title: "Classic Tote",
|
||||
description: "The ultimate everyday statement.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/fashion-portrait-two-stylish-caucasian-woman-blazers-french-cap-classic-white-hat-stand_343596-2175.jpg",
|
||||
},
|
||||
{
|
||||
title: "Crossbody Chic",
|
||||
description: "Hands-free luxury refined.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/women-s-day-still-life-with-makeup-jewelry_23-2149263158.jpg",
|
||||
},
|
||||
{
|
||||
title: "Evening Clutch",
|
||||
description: "Sophistication for every occasion.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-women-s-bag-with-mediterranean-tiles-aesthetics_23-2150916702.jpg",
|
||||
},
|
||||
{
|
||||
title: "Satchel Elegance",
|
||||
description: "Timeless structure and style.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-brown-bow-with-black-bow-dark-surface-darkness-pin-measure-photo-color_179666-24409.jpg",
|
||||
},
|
||||
{
|
||||
title: "Modern Bucket",
|
||||
description: "Contemporary design reinvented.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/small-purse-studio-still-life_23-2151046495.jpg",
|
||||
},
|
||||
{
|
||||
title: "Signature Hobo",
|
||||
description: "Relaxed and utterly refined.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-father-s-day-composition-father-s-day-top-view_185193-109772.jpg",
|
||||
},
|
||||
{
|
||||
title: "Deluxe Portfolio",
|
||||
description: "Function meets luxury design.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-black-fabric-texture-outdoor-setting-sunlight-background-blurred-product-shot_272375-26448.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
57
src/pages/HomePage/sections/Testimonials.tsx
Normal file
57
src/pages/HomePage/sections/Testimonials.tsx
Normal file
@@ -0,0 +1,57 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "testimonials" section.
|
||||
|
||||
import React from 'react';
|
||||
import TestimonialMarqueeOverlayCards from '@/components/sections/testimonial/TestimonialMarqueeOverlayCards';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function TestimonialsSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<SectionErrorBoundary name="testimonials">
|
||||
<TestimonialMarqueeOverlayCards
|
||||
tag="Client Stories"
|
||||
title="Voices of Elegance"
|
||||
description="Discover why our clients choose Mukmhal for their accessory essentials."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Sophia Martinez",
|
||||
role: "Fashion Stylist",
|
||||
company: "Elite Fashion",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/selfconfident-curly-woman-silk-black-stylish-home-suit-sits-carpet-floor-leans-lea_197531-33664.jpg",
|
||||
},
|
||||
{
|
||||
name: "Liam Anderson",
|
||||
role: "Director",
|
||||
company: "Design Lab",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/positive-carefree-teenage-girl-with-bun-hairstyle-looks-happily-away-wears-stylish-green-costume-white-boots-blue-eyeliner-feels-good-poses-against-grey-concrete-wall-urban-lifestyle-concept_273609-57790.jpg",
|
||||
},
|
||||
{
|
||||
name: "Chloe Bennett",
|
||||
role: "Creative Lead",
|
||||
company: "Artisan Group",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-stylish-young-woman_158538-4138.jpg",
|
||||
},
|
||||
{
|
||||
name: "Jordan Smith",
|
||||
role: "Consultant",
|
||||
company: "Vogue Insights",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/attractive-young-woman-with-cutlery-restaurant_169016-21627.jpg",
|
||||
},
|
||||
{
|
||||
name: "Elena Rossi",
|
||||
role: "Curator",
|
||||
company: "Gallery Noir",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/girl-with-white-manicure-covers-her-mouth-with-her-hand-looks-camera-coquettishly-snapshot-brunette-red-knitted-jacket_197531-26531.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user