Merge version_1 into main

Merge version_1 into main
This commit was merged in pull request #1.
This commit is contained in:
2026-05-09 15:51:52 +00:00

View File

@@ -16,361 +16,161 @@ import { Award, MapPin, Users } from "lucide-react";
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="expand-hover"
defaultTextAnimation="background-highlight"
borderRadius="pill"
contentWidth="mediumSmall"
sizing="largeSmall"
background="fluid"
cardStyle="inset"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="glass"
headingFontWeight="medium"
defaultButtonVariant="expand-hover"
defaultTextAnimation="background-highlight"
borderRadius="pill"
contentWidth="mediumSmall"
sizing="largeSmall"
background="fluid"
cardStyle="inset"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="glass"
headingFontWeight="medium"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{
name: "Home",
id: "hero",
},
{
name: "About",
id: "about",
},
{
name: "Offers",
id: "products",
},
{
name: "Contact",
id: "contact",
},
]}
brandName="Sa-Nkwan Locals"
/>
</div>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{ name: "Home", id: "hero" },
{ name: "About", id: "about" },
{ name: "Offers", id: "products" },
{ name: "Contact", id: "contact" },
]}
brandName="Sa-Nkwan Locals"
button={{ text: "Get Started", href: "#contact" }}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplit
background={{
variant: "gradient-bars",
}}
title="Welcome to Sa-Nkwan Locals"
description="Experience the heart of Ghana through our curated local tours, authentic crafts, and vibrant community stories. Discover the unseen beauty of our home."
buttons={[
{
text: "Explore Experiences",
href: "#products",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/happy-women-holding-hands-close-up_23-2148959239.jpg"
imageAlt="Ghanaian culture and community"
mediaAnimation="slide-up"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/front-view-friends-spending-time-outdoors_23-2148212343.jpg",
alt: "Front view friends spending time outdoors",
},
{
src: "http://img.b2bpic.net/free-photo/people-cheering-their-country-football-team_23-2149015529.jpg",
alt: "People cheering for their country football team",
},
{
src: "http://img.b2bpic.net/free-photo/teenage-friends-spending-time-together-outdoors_23-2149053415.jpg",
alt: "Teenage friends spending time together outdoors",
},
{
src: "http://img.b2bpic.net/free-photo/close-up-women-holding-each-other_23-2148959241.jpg",
alt: "Close up women holding each other",
},
{
src: "http://img.b2bpic.net/free-photo/medium-shot-nigerian-woman-dancing-outdoors_23-2149029481.jpg",
alt: "Medium shot nigerian woman dancing outdoors",
},
]}
avatarText="Join our community of explorers"
marqueeItems={[
{
type: "text",
text: "Sustainable Tourism",
},
{
type: "text",
text: "Cultural Exchange",
},
{
type: "text",
text: "Handcrafted Artisanship",
},
{
type: "text",
text: "Authentic Local Cuisine",
},
{
type: "text",
text: "Community Impact",
},
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplit
background={{ variant: "gradient-bars" }}
title="Welcome to Sa-Nkwan Locals"
description="Experience the heart of Ghana through our curated local tours, authentic crafts, and vibrant community stories. Discover the unseen beauty of our home."
buttons={[{ text: "Explore Experiences", href: "#products" }]}
imageSrc="http://img.b2bpic.net/free-photo/happy-women-holding-hands-close-up_23-2148959239.jpg"
imageAlt="Ghanaian culture and community"
mediaAnimation="slide-up"
avatars={[
{ src: "http://img.b2bpic.net/free-photo/front-view-friends-spending-time-outdoors_23-2148212343.jpg", alt: "Front view friends spending time outdoors" },
{ src: "http://img.b2bpic.net/free-photo/people-cheering-their-country-football-team_23-2149015529.jpg", alt: "People cheering for their country football team" },
{ src: "http://img.b2bpic.net/free-photo/teenage-friends-spending-time-together-outdoors_23-2149053415.jpg", alt: "Teenage friends spending time together outdoors" },
{ src: "http://img.b2bpic.net/free-photo/close-up-women-holding-each-other_23-2148959241.jpg", alt: "Close up women holding each other" },
{ src: "http://img.b2bpic.net/free-photo/medium-shot-nigerian-woman-dancing-outdoors_23-2149029481.jpg", alt: "Medium shot nigerian woman dancing outdoors" }
]}
avatarText="Join our community of explorers"
marqueeItems={[
{ type: "text", text: "Sustainable Tourism" },
{ type: "text", text: "Cultural Exchange" },
{ type: "text", text: "Handcrafted Artisanship" },
{ type: "text", text: "Authentic Local Cuisine" },
{ type: "text", text: "Community Impact" }
]}
/>
</div>
<div id="about" data-section="about">
<AboutMetric
useInvertedBackground={false}
title="Our Impact in Ghana"
metrics={[
{
icon: Users,
label: "Community Members",
value: "500+",
},
{
icon: Award,
label: "Local Partnerships",
value: "25+",
},
{
icon: MapPin,
label: "Unique Tours",
value: "15+",
},
]}
metricsAnimation="slide-up"
/>
</div>
<div id="about" data-section="about">
<AboutMetric
useInvertedBackground={false}
title="Our Impact in Ghana"
metrics={[
{ icon: Users, label: "Community Members", value: "500+" },
{ icon: Award, label: "Local Partnerships", value: "25+" },
{ icon: MapPin, label: "Unique Tours", value: "15+" }
]}
metricsAnimation="slide-up"
/>
</div>
<div id="features" data-section="features">
<FeatureCardSixteen
textboxLayout="default"
useInvertedBackground={true}
negativeCard={{
items: [
"No staged experiences",
"Avoiding tourist traps",
"No ecological harm",
"Zero exploitative practices",
"No mass-market diluted tours",
],
}}
positiveCard={{
items: [
"Genuine local connection",
"Sustainable tourism practices",
"Fair compensation for artisans",
"Community-led initiatives",
"Direct impact on livelihoods",
],
}}
title="Why Choose Sa-Nkwan?"
description="We bridge the gap between visitors and our community, ensuring every experience is authentic and sustainable."
/>
</div>
<div id="features" data-section="features">
<FeatureCardSixteen
textboxLayout="default"
useInvertedBackground={true}
animationType="slide-up"
negativeCard={{ items: ["No staged experiences", "Avoiding tourist traps", "No ecological harm", "Zero exploitative practices", "No mass-market diluted tours"] }}
positiveCard={{ items: ["Genuine local connection", "Sustainable tourism practices", "Fair compensation for artisans", "Community-led initiatives", "Direct impact on livelihoods"] }}
title="Why Choose Sa-Nkwan?"
description="We bridge the gap between visitors and our community, ensuring every experience is authentic and sustainable."
/>
</div>
<div id="products" data-section="products">
<ProductCardTwo
animationType="slide-up"
textboxLayout="default"
gridVariant="uniform-all-items-equal"
useInvertedBackground={false}
products={[
{
id: "1",
brand: "Artisan",
name: "Handwoven Kente Cloth",
price: "GHS 150",
rating: 5,
reviewCount: "24",
imageSrc: "http://img.b2bpic.net/free-photo/fabric-texture-background_1385-1258.jpg",
},
{
id: "2",
brand: "Cuisine",
name: "Traditional Cooking Class",
price: "GHS 200",
rating: 5,
reviewCount: "18",
imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-mexican-food_23-2148140195.jpg",
},
{
id: "3",
brand: "Tour",
name: "Community Market Walk",
price: "GHS 100",
rating: 4,
reviewCount: "42",
imageSrc: "http://img.b2bpic.net/free-photo/back-view-woman-taking-photo-friend_23-2147771232.jpg",
},
{
id: "4",
brand: "Jewelry",
name: "Custom Beaded Waistbands",
price: "GHS 50",
rating: 5,
reviewCount: "56",
imageSrc: "http://img.b2bpic.net/free-photo/woman-posing-arid-environment-while-wearing-native-african-clothing_23-2150609665.jpg",
},
{
id: "5",
brand: "Beauty",
name: "Raw Shea Butter Pack",
price: "GHS 75",
rating: 5,
reviewCount: "31",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-spa-concept-with-woman_23-2147816923.jpg",
},
{
id: "6",
brand: "Textile",
name: "Artisan Fabric Scarf",
price: "GHS 120",
rating: 4,
reviewCount: "12",
imageSrc: "http://img.b2bpic.net/free-photo/cover-empty-background-space-wear_1253-390.jpg",
},
]}
title="Curated Local Experiences"
description="From handcrafted treasures to immersive local tours, discover the best of Ghana."
/>
</div>
<div id="products" data-section="products">
<ProductCardTwo
animationType="slide-up"
textboxLayout="default"
gridVariant="uniform-all-items-equal"
useInvertedBackground={false}
products={[
{ id: "1", brand: "Artisan", name: "Handwoven Kente Cloth", price: "GHS 150", rating: 5, reviewCount: "24", imageSrc: "http://img.b2bpic.net/free-photo/fabric-texture-background_1385-1258.jpg" },
{ id: "2", brand: "Cuisine", name: "Traditional Cooking Class", price: "GHS 200", rating: 5, reviewCount: "18", imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-mexican-food_23-2148140195.jpg" },
{ id: "3", brand: "Tour", name: "Community Market Walk", price: "GHS 100", rating: 4, reviewCount: "42", imageSrc: "http://img.b2bpic.net/free-photo/back-view-woman-taking-photo-friend_23-2147771232.jpg" },
{ id: "4", brand: "Jewelry", name: "Custom Beaded Waistbands", price: "GHS 50", rating: 5, reviewCount: "56", imageSrc: "http://img.b2bpic.net/free-photo/woman-posing-arid-environment-while-wearing-native-african-clothing_23-2150609665.jpg" },
{ id: "5", brand: "Beauty", name: "Raw Shea Butter Pack", price: "GHS 75", rating: 5, reviewCount: "31", imageSrc: "http://img.b2bpic.net/free-photo/close-up-spa-concept-with-woman_23-2147816923.jpg" },
{ id: "6", brand: "Textile", name: "Artisan Fabric Scarf", price: "GHS 120", rating: 4, reviewCount: "12", imageSrc: "http://img.b2bpic.net/free-photo/cover-empty-background-space-wear_1253-390.jpg" }
]}
title="Curated Local Experiences"
description="From handcrafted treasures to immersive local tours, discover the best of Ghana."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardSixteen
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={true}
testimonials={[
{
id: "1",
name: "Sarah Miller",
role: "Visitor",
company: "USA",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/people-active-lifestyle-travel-adventure-tourism-concept-handsome-trendy-looking-african-american-tourist-with-backpack-spending-vacations-abroad_273609-1125.jpg",
},
{
id: "2",
name: "Kofi Mensah",
role: "Local Host",
company: "Accra",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/lovable-woman-looking-front_197531-19779.jpg",
},
{
id: "3",
name: "Emma Watson",
role: "Traveler",
company: "UK",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-boy-summer-hat-with-camera-happy-positive-showing-thumbs-up-with-both-hands-standing-pink-wall_141793-22839.jpg",
},
{
id: "4",
name: "David Mensah",
role: "Visitor",
company: "Canada",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/side-view-friends-making-barbecue-grill_23-2149745563.jpg",
},
{
id: "5",
name: "Anita Osei",
role: "Traveler",
company: "Nigeria",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/man-with-dreads-representing-rastafari-movement_23-2151532019.jpg",
},
]}
kpiItems={[
{
value: "98%",
label: "Satisfaction Rate",
},
{
value: "1.2k",
label: "Happy Visitors",
},
{
value: "10+",
label: "Years Active",
},
]}
title="Community Voices"
description="Hear what our visitors and community members have to say about their experiences."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardSixteen
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={true}
testimonials={[
{ id: "1", name: "Sarah Miller", role: "Visitor", company: "USA", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/people-active-lifestyle-travel-adventure-tourism-concept-handsome-trendy-looking-african-american-tourist-with-backpack-spending-vacations-abroad_273609-1125.jpg" },
{ id: "2", name: "Kofi Mensah", role: "Local Host", company: "Accra", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/lovable-woman-looking-front_197531-19779.jpg" },
{ id: "3", name: "Emma Watson", role: "Traveler", company: "UK", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-boy-summer-hat-with-camera-happy-positive-showing-thumbs-up-with-both-hands-standing-pink-wall_141793-22839.jpg" },
{ id: "4", name: "David Mensah", role: "Visitor", company: "Canada", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/side-view-friends-making-barbecue-grill_23-2149745563.jpg" },
{ id: "5", name: "Anita Osei", role: "Traveler", company: "Nigeria", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/man-with-dreads-representing-rastafari-movement_23-2151532019.jpg" }
]}
kpiItems={[
{ value: "98%", label: "Satisfaction Rate" },
{ value: "1.2k", label: "Happy Visitors" },
{ value: "10+", label: "Years Active" }
]}
title="Community Voices"
description="Hear what our visitors and community members have to say about their experiences."
/>
</div>
<div id="faq" data-section="faq">
<FaqDouble
textboxLayout="default"
useInvertedBackground={false}
faqs={[
{
id: "1",
title: "How do I book a tour?",
content: "You can contact us through the form on our website or visit our local community center.",
},
{
id: "2",
title: "Are these experiences sustainable?",
content: "Yes, we focus on eco-friendly and community-supporting activities.",
},
{
id: "3",
title: "Can I bring my family?",
content: "Absolutely, our tours are family-friendly and welcoming to all ages.",
},
]}
title="Common Questions"
description="Everything you need to know about booking and participating with Sa-Nkwan."
faqsAnimation="blur-reveal"
/>
</div>
<div id="faq" data-section="faq">
<FaqDouble
textboxLayout="default"
useInvertedBackground={false}
faqs={[
{ id: "1", title: "How do I book a tour?", content: "You can contact us through the form on our website or visit our local community center." },
{ id: "2", title: "Are these experiences sustainable?", content: "Yes, we focus on eco-friendly and community-supporting activities." },
{ id: "3", title: "Can I bring my family?", content: "Absolutely, our tours are family-friendly and welcoming to all ages." }
]}
title="Common Questions"
description="Everything you need to know about booking and participating with Sa-Nkwan."
faqsAnimation="blur-reveal"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
useInvertedBackground={true}
title="Get in Touch"
description="Ready to experience Sa-Nkwan? Send us a message and we'll help plan your visit."
inputs={[
{
name: "name",
type: "text",
placeholder: "Your Name",
required: true,
},
{
name: "email",
type: "email",
placeholder: "Email Address",
required: true,
},
]}
textarea={{
name: "message",
placeholder: "How can we help?",
rows: 4,
required: true,
}}
imageSrc="http://img.b2bpic.net/free-photo/medium-shot-happy-friends-outdoors_23-2148931130.jpg"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
useInvertedBackground={true}
title="Get in Touch"
description="Ready to experience Sa-Nkwan? Send us a message and we'll help plan your visit."
inputs={[
{ name: "name", type: "text", placeholder: "Your Name", required: true },
{ name: "email", type: "email", placeholder: "Email Address", required: true }
]}
textarea={{ name: "message", placeholder: "How can we help?", rows: 4, required: true }}
imageSrc="http://img.b2bpic.net/free-photo/medium-shot-happy-friends-outdoors_23-2148931130.jpg"
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="Sa-Nkwan Locals"
leftLink={{
text: "Terms & Conditions",
href: "#",
}}
rightLink={{
text: "Privacy Policy",
href: "#",
}}
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="Sa-Nkwan Locals"
leftLink={{ text: "Terms & Conditions", href: "#" }}
rightLink={{ text: "Privacy Policy", href: "#" }}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}
}