Compare commits
3 Commits
version_1_
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| dcb8bb3526 | |||
|
|
347593be56 | ||
| bcaff409db |
@@ -5,15 +5,15 @@
|
||||
|
||||
:root {
|
||||
/* @colorThemes/lightTheme/grayNavyBlue */
|
||||
--background: #f6f0e9;
|
||||
--card: #efe7dd;
|
||||
--foreground: #2b180a;
|
||||
--primary-cta: #2b180a;
|
||||
--primary-cta-text: #f6f0e9;
|
||||
--secondary-cta: #efe7dd;
|
||||
--secondary-cta-text: #2b180a;
|
||||
--accent: #94877c;
|
||||
--background-accent: #afa094;
|
||||
--background: #ffffff;
|
||||
--card: #f8f8f8;
|
||||
--foreground: #1a1a1a;
|
||||
--primary-cta: #d32f2f;
|
||||
--primary-cta-text: #ffffff;
|
||||
--secondary-cta: #f8f8f8;
|
||||
--secondary-cta-text: #1a1a1a;
|
||||
--accent: #d4af37;
|
||||
--background-accent: #f0e6d2;
|
||||
|
||||
/* @layout/border-radius/rounded */
|
||||
--radius: 1rem;
|
||||
|
||||
@@ -1,186 +1,30 @@
|
||||
import AboutTextSplit from '@/components/sections/about/AboutTextSplit';
|
||||
import ContactCta from '@/components/sections/contact/ContactCta';
|
||||
import FaqSimple from '@/components/sections/faq/FaqSimple';
|
||||
import FeaturesRevealCardsBento from '@/components/sections/features/FeaturesRevealCardsBento';
|
||||
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
|
||||
import TestimonialRatingCards from '@/components/sections/testimonial/TestimonialRatingCards';
|
||||
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';
|
||||
|
||||
export default function HomePage(): React.JSX.Element {
|
||||
return (
|
||||
<>
|
||||
<div id="hero" data-section="hero">
|
||||
<SectionErrorBoundary name="hero">
|
||||
<HeroOverlay
|
||||
tag="Elevate Your Style"
|
||||
title="Timeless Elegance by Khaab Afifa"
|
||||
description="Discover our carefully curated collection of handcrafted apparel, where traditional craftsmanship meets modern sophistication."
|
||||
primaryButton={{
|
||||
text: "Explore Collection",
|
||||
href: "#products",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Learn More",
|
||||
href: "#about",
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/woman-working-with-dried-plants-front-view_23-2149513659.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<>
|
||||
<HeroSection />
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<SectionErrorBoundary name="about">
|
||||
<AboutTextSplit
|
||||
title="Our Craft"
|
||||
descriptions={[
|
||||
"At Khaab Afifa, we believe that fashion is a language of grace and identity. Our journey started with a vision to redefine modest fashion through high-quality textures and timeless silhouettes.",
|
||||
"Every piece we curate celebrates craftsmanship, precision, and the art of subtlety. By blending contemporary design with heritage aesthetics, we create garments that empower your unique expression.",
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<AboutSection />
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<SectionErrorBoundary name="products">
|
||||
<FeaturesRevealCardsBento
|
||||
tag="Our Collection"
|
||||
title="Curated Essentials"
|
||||
description="From daily modest wear to elegant statement pieces, explore our latest arrivals."
|
||||
items={[
|
||||
{
|
||||
title: "Signature Silk Series",
|
||||
description: "Luxe drapes with premium natural fibers for everyday grace.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-stylish-young-woman_158538-4261.jpg",
|
||||
},
|
||||
{
|
||||
title: "Artisanal Embroidery",
|
||||
description: "Intricate detailing reflecting centuries of craft mastery.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-making-jacket-close-up_23-2148898084.jpg",
|
||||
},
|
||||
{
|
||||
title: "Contemporary Modest",
|
||||
description: "Structured silhouettes built for modern urban life.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-sitting-indoors-reading_23-2148847287.jpg",
|
||||
},
|
||||
{
|
||||
title: "Linen Essentials",
|
||||
description: "Breathable, sustainable, and effortlessly sophisticated.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-winter-clothes_633478-132.jpg",
|
||||
},
|
||||
{
|
||||
title: "Evening Opulence",
|
||||
description: "Refined pieces designed for your special occasions.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-hands-painting-mask-top-view_23-2148754088.jpg",
|
||||
},
|
||||
{
|
||||
title: "Heritage Prints",
|
||||
description: "Classic patterns reimagined for the modern aesthetic.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-pregnant-woman-with-big-belly-studio_1157-26323.jpg",
|
||||
},
|
||||
{
|
||||
title: "Accessory Edit",
|
||||
description: "Small details that define the complete Khaab style.",
|
||||
href: "#",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/friends-shopping-second-hand-market_23-2149353708.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<ProductsSection />
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<SectionErrorBoundary name="testimonials">
|
||||
<TestimonialRatingCards
|
||||
tag="What They Say"
|
||||
title="Community Love"
|
||||
description="Authentic experiences from those who value refined craftsmanship."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Ayesha Khan",
|
||||
role: "Creative Director",
|
||||
quote: "The quality of the silk at Khaab Afifa is unmatched. Truly timeless.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-clothes-shop-customer-taking-hanger-with-dress-from-rack-trying-woman-choosing-clothes-fashion-store-consumerism-retail-concept_74855-11761.jpg",
|
||||
},
|
||||
{
|
||||
name: "Sarah Ahmed",
|
||||
role: "Marketing Executive",
|
||||
quote: "My go-to store for modest yet modern outfits. Always receives compliments.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-brunette-female-wearing-red-dress-sitting-sofa-home_613910-21092.jpg",
|
||||
},
|
||||
{
|
||||
name: "Fatima Rizvi",
|
||||
role: "Architect",
|
||||
quote: "Intricate detailing that feels personal and high-end. Love every piece.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/worker-closing-buttons-blazer-shop_482257-96910.jpg",
|
||||
},
|
||||
{
|
||||
name: "Zara Noor",
|
||||
role: "Fashion Consultant",
|
||||
quote: "Khaab Afifa perfectly balances traditional aesthetics with today’s cuts.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-woman-trying-out-new-clothes_23-2148660714.jpg",
|
||||
},
|
||||
{
|
||||
name: "Mariam Sohail",
|
||||
role: "Doctor",
|
||||
quote: "Comfort meets elegance like nowhere else. Highly recommended.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/girl-is-walking-around-city_1321-1323.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<TestimonialsSection />
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<SectionErrorBoundary name="faq">
|
||||
<FaqSimple
|
||||
tag="Help"
|
||||
title="Common Inquiries"
|
||||
description="Everything you need to know about your order and shopping experience."
|
||||
items={[
|
||||
{
|
||||
question: "What is your shipping policy?",
|
||||
answer: "We offer global shipping. Orders are processed within 2-3 business days and shipped via premium express couriers.",
|
||||
},
|
||||
{
|
||||
question: "Do you accept returns?",
|
||||
answer: "Returns are accepted within 14 days of delivery for items in original, unworn condition with tags attached.",
|
||||
},
|
||||
{
|
||||
question: "How do I find my size?",
|
||||
answer: "Each product page includes a comprehensive size guide to ensure the perfect fit for your style.",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<FaqSection />
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<SectionErrorBoundary name="contact">
|
||||
<ContactCta
|
||||
tag="Get in touch"
|
||||
text="Join our newsletter for exclusive early access to new collections and styling tips."
|
||||
primaryButton={{
|
||||
text: "Subscribe",
|
||||
href: "#",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Visit Instagram",
|
||||
href: "https://www.instagram.com/khaabbyafifa",
|
||||
}}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<ContactSection />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
22
src/pages/HomePage/sections/About.tsx
Normal file
22
src/pages/HomePage/sections/About.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
// 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 AboutTextSplit from '@/components/sections/about/AboutTextSplit';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function AboutSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="about" data-section="about">
|
||||
<SectionErrorBoundary name="about">
|
||||
<AboutTextSplit
|
||||
title="Our Craft"
|
||||
descriptions={[
|
||||
"At Khaab Afifa, we believe that fashion is a language of grace and identity. Our journey started with a vision to redefine modest fashion through high-quality textures and timeless silhouettes.",
|
||||
"Every piece we curate celebrates craftsmanship, precision, and the art of subtlety. By blending contemporary design with heritage aesthetics, we create garments that empower your unique expression.",
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
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="Get in touch"
|
||||
text="Join our newsletter for exclusive early access to new collections and styling tips."
|
||||
primaryButton={{
|
||||
text: "Subscribe",
|
||||
href: "#",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Visit Instagram",
|
||||
href: "https://www.instagram.com/khaabbyafifa",
|
||||
}}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
34
src/pages/HomePage/sections/Faq.tsx
Normal file
34
src/pages/HomePage/sections/Faq.tsx
Normal file
@@ -0,0 +1,34 @@
|
||||
// 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="Help"
|
||||
title="Common Inquiries"
|
||||
description="Everything you need to know about your order and shopping experience."
|
||||
items={[
|
||||
{
|
||||
question: "What is your shipping policy?",
|
||||
answer: "We offer global shipping. Orders are processed within 2-3 business days and shipped via premium express couriers.",
|
||||
},
|
||||
{
|
||||
question: "Do you accept returns?",
|
||||
answer: "Returns are accepted within 14 days of delivery for items in original, unworn condition with tags attached.",
|
||||
},
|
||||
{
|
||||
question: "How do I find my size?",
|
||||
answer: "Each product page includes a comprehensive size guide to ensure the perfect fit for your style.",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</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 HeroOverlay from '@/components/sections/hero/HeroOverlay';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function HeroSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="hero" data-section="hero">
|
||||
<SectionErrorBoundary name="hero">
|
||||
<HeroOverlay
|
||||
tag="Elevate Your Style"
|
||||
title="Timeless Elegance by Khaab Afifa"
|
||||
description="Discover our carefully curated collection of handcrafted apparel, where traditional craftsmanship meets modern sophistication."
|
||||
primaryButton={{
|
||||
text: "Explore Collection",
|
||||
href: "#products",
|
||||
}}
|
||||
secondaryButton={{
|
||||
text: "Learn More",
|
||||
href: "#about",
|
||||
}}
|
||||
imageSrc="https://images.unsplash.com/photo-1595777457583-95e059d581b8?q=80&w=2883&auto=format&fit=crop"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
21
src/pages/HomePage/sections/Products.tsx
Normal file
21
src/pages/HomePage/sections/Products.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 "products" section.
|
||||
|
||||
import React from 'react';
|
||||
import FeaturesRevealCardsBento from '@/components/sections/features/FeaturesRevealCardsBento';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function ProductsSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="products" data-section="products">
|
||||
<SectionErrorBoundary name="products">
|
||||
<FeaturesRevealCardsBento
|
||||
tag="Our Collection"
|
||||
title="Curated Essentials"
|
||||
description="From daily modest wear to elegant statement pieces, explore our latest arrivals."
|
||||
items={[{"href":"#","description":"Luxe drapes with premium natural fibers for everyday grace.","title":"Signature Silk Series","imageSrc":"https://images.unsplash.com/photo-1595777457583-95e059d581b8?q=80&w=2883&auto=format&fit=crop"},{"href":"#","description":"Intricate detailing reflecting centuries of craft mastery.","imageSrc":"https://images.unsplash.com/photo-1595777457583-95e059d581b8?q=80&w=2883&auto=format&fit=crop","title":"Artisanal Embroidery"},{"imageSrc":"https://images.unsplash.com/photo-1595777457583-95e059d581b8?q=80&w=2883&auto=format&fit=crop","title":"Contemporary Modest","href":"#","description":"Structured silhouettes built for modern urban life."},{"title":"Linen Essentials","imageSrc":"https://images.unsplash.com/photo-1595777457583-95e059d581b8?q=80&w=2883&auto=format&fit=crop","href":"#","description":"Breathable, sustainable, and effortlessly sophisticated."},{"href":"#","description":"Refined pieces designed for your special occasions.","title":"Evening Opulence","imageSrc":"https://images.unsplash.com/photo-1595777457583-95e059d581b8?q=80&w=2883&auto=format&fit=crop"},{"href":"#","description":"Classic patterns reimagined for the modern aesthetic.","imageSrc":"https://images.unsplash.com/photo-1595777457583-95e059d581b8?q=80&w=2883&auto=format&fit=crop","title":"Heritage Prints"},{"imageSrc":"https://images.unsplash.com/photo-1595777457583-95e059d581b8?q=80&w=2883&auto=format&fit=crop","title":"Accessory Edit","href":"#","description":"Small details that define the complete Khaab style."}]}
|
||||
/>
|
||||
</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 TestimonialRatingCards from '@/components/sections/testimonial/TestimonialRatingCards';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function TestimonialsSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<SectionErrorBoundary name="testimonials">
|
||||
<TestimonialRatingCards
|
||||
tag="What They Say"
|
||||
title="Community Love"
|
||||
description="Authentic experiences from those who value refined craftsmanship."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Ayesha Khan",
|
||||
role: "Creative Director",
|
||||
quote: "The quality of the silk at Khaab Afifa is unmatched. Truly timeless.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-clothes-shop-customer-taking-hanger-with-dress-from-rack-trying-woman-choosing-clothes-fashion-store-consumerism-retail-concept_74855-11761.jpg",
|
||||
},
|
||||
{
|
||||
name: "Sarah Ahmed",
|
||||
role: "Marketing Executive",
|
||||
quote: "My go-to store for modest yet modern outfits. Always receives compliments.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-brunette-female-wearing-red-dress-sitting-sofa-home_613910-21092.jpg",
|
||||
},
|
||||
{
|
||||
name: "Fatima Rizvi",
|
||||
role: "Architect",
|
||||
quote: "Intricate detailing that feels personal and high-end. Love every piece.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/worker-closing-buttons-blazer-shop_482257-96910.jpg",
|
||||
},
|
||||
{
|
||||
name: "Zara Noor",
|
||||
role: "Fashion Consultant",
|
||||
quote: "Khaab Afifa perfectly balances traditional aesthetics with today’s cuts.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-woman-trying-out-new-clothes_23-2148660714.jpg",
|
||||
},
|
||||
{
|
||||
name: "Mariam Sohail",
|
||||
role: "Doctor",
|
||||
quote: "Comfort meets elegance like nowhere else. Highly recommended.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/girl-is-walking-around-city_1321-1323.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user