Merge version_1 into main #2

Merged
bender merged 2 commits from version_1 into main 2026-05-15 05:58:53 +00:00
2 changed files with 171 additions and 376 deletions

View File

@@ -11,8 +11,8 @@ import { Montserrat } from "next/font/google";
export const metadata: Metadata = {
title: 'Tatu City | Africa\'s Premier Urban Hub',
description: 'Explore Tatu City - a revolutionary mixed-use development blending commercial, residential, and industrial excellence. Invest in your future today.',
title: 'Tatu City | Africa\'s First Mixed-Use Master-Planned City',
description: 'Discover Tatu City, a premier mixed-use hub in Africa offering residential, commercial, and industrial opportunities for a sustainable future.',
openGraph: {
"title": "Tatu City Development",
"description": "Join the most ambitious urban community in Africa.",

View File

@@ -16,391 +16,186 @@ import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCa
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="icon-arrow"
defaultTextAnimation="reveal-blur"
borderRadius="soft"
contentWidth="mediumSmall"
sizing="mediumLargeSizeLargeTitles"
background="noiseDiagonalGradient"
cardStyle="gradient-radial"
primaryButtonStyle="shadow"
secondaryButtonStyle="layered"
headingFontWeight="light"
defaultButtonVariant="icon-arrow"
defaultTextAnimation="reveal-blur"
borderRadius="soft"
contentWidth="mediumSmall"
sizing="mediumLargeSizeLargeTitles"
background="noiseDiagonalGradient"
cardStyle="gradient-radial"
primaryButtonStyle="shadow"
secondaryButtonStyle="layered"
headingFontWeight="light"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
navItems={[
{
name: "Home",
id: "hero",
},
{
name: "About",
id: "about",
},
{
name: "Features",
id: "features",
},
{
name: "Contact",
id: "contact",
},
]}
brandName="Tatu City"
/>
</div>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
navItems={[
{ name: "Home", id: "hero" },
{ name: "About", id: "about" },
{ name: "Features", id: "features" },
{ name: "Contact", id: "contact" },
]}
brandName="Tatu City"
/>
</div>
<div id="hero" data-section="hero">
<HeroCentered
background={{
variant: "gradient-bars",
}}
title="Welcome to Tatu City"
description="Africa's first mixed-use master-planned city, where business, residential, and industrial opportunities intersect for a brighter future."
avatars={[
{
src: "http://img.b2bpic.net/free-photo/portrait-beautiful-happy-corporate-woman-suit-stands-street-smiles-poses-near-office_1258-193986.jpg",
alt: "Happy Business Professional",
},
{
src: "http://img.b2bpic.net/free-photo/front-view-man-with-blueprint_23-2148269815.jpg",
alt: "Lead Architect Reviewing Plans",
},
{
src: "http://img.b2bpic.net/free-photo/young-adult-traveling-using-sustainable-mobility_23-2149292685.jpg",
alt: "Happy Family Portrait",
},
{
src: "http://img.b2bpic.net/free-photo/looking-through-papers_1098-13913.jpg",
alt: "Focused Investment Manager",
},
{
src: "http://img.b2bpic.net/free-photo/portrait-young-pretty-woman-having-idea-sitting-table-trench-coat-working-laptop_285396-2368.jpg",
alt: "Young Professional Laughing",
},
]}
avatarText="Join 5,000+ residents and businesses"
buttons={[
{
text: "Explore Opportunities",
href: "#contact",
},
]}
marqueeItems={[
{
type: "text",
text: "Smart City Tech",
},
{
type: "text",
text: "Green Landscapes",
},
{
type: "text",
text: "Modern Infrastructure",
},
{
type: "text",
text: "Sustainable Future",
},
{
type: "text",
text: "Global Business Hub",
},
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroCentered
background={{ variant: "gradient-bars" }}
title="Welcome to Tatu City"
description="Africa's first mixed-use master-planned city, where business, residential, and industrial opportunities intersect for a brighter future."
avatars={[
{ src: "http://img.b2bpic.net/free-photo/portrait-beautiful-happy-corporate-woman-suit-stands-street-smiles-poses-near-office_1258-193986.jpg", alt: "Happy Business Professional" },
{ src: "http://img.b2bpic.net/free-photo/front-view-man-with-blueprint_23-2148269815.jpg", alt: "Lead Architect Reviewing Plans" },
{ src: "http://img.b2bpic.net/free-photo/young-adult-traveling-using-sustainable-mobility_23-2149292685.jpg", alt: "Happy Family Portrait" },
{ src: "http://img.b2bpic.net/free-photo/looking-through-papers_1098-13913.jpg", alt: "Focused Investment Manager" },
{ src: "http://img.b2bpic.net/free-photo/portrait-young-pretty-woman-having-idea-sitting-table-trench-coat-working-laptop_285396-2368.jpg", alt: "Young Professional Laughing" },
]}
avatarText="Join 5,000+ residents and businesses"
buttons={[{ text: "Explore Opportunities", href: "#contact" }]}
marqueeItems={[
{ type: "text", text: "Smart City Tech" },
{ type: "text", text: "Green Landscapes" },
{ type: "text", text: "Modern Infrastructure" },
{ type: "text", text: "Sustainable Future" },
{ type: "text", text: "Global Business Hub" },
]}
/>
</div>
<div id="about" data-section="about">
<InlineImageSplitTextAbout
useInvertedBackground={false}
heading={[
{
type: "text",
content: "A New Vision for",
},
{
type: "image",
src: "http://img.b2bpic.net/free-photo/silhouette-young-business-woman-beige-suit-walking-city-center-posing-near-office-buildings_1258-194035.jpg",
alt: "Modern business district architecture",
},
{
type: "text",
content: "Urban Living",
},
]}
/>
</div>
<div id="about" data-section="about">
<InlineImageSplitTextAbout
useInvertedBackground={false}
heading={[
{ type: "text", content: "A New Vision for" },
{ type: "image", src: "http://img.b2bpic.net/free-photo/silhouette-young-business-woman-beige-suit-walking-city-center-posing-near-office-buildings_1258-194035.jpg", alt: "Modern business district architecture" },
{ type: "text", content: "Urban Living" },
]}
/>
</div>
<div id="features" data-section="features">
<FeatureBento
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={true}
features={[
{
title: "Sustainable Living",
description: "Eco-friendly developments designed for future growth.",
bentoComponent: "media-stack",
items: [
{
imageSrc: "http://img.b2bpic.net/free-photo/bridge-night_1137-165.jpg?_wi=1",
imageAlt: "Smart city tech",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/bird-s-eye-view-shanghai_1127-4005.jpg?_wi=1",
imageAlt: "Residential area",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/empty-boardroom-space-within-enterprise-designed-productivity_482257-114714.jpg?_wi=1",
imageAlt: "Professional workspace",
},
],
imageSrc: "http://img.b2bpic.net/free-photo/view-futuristic-city-with-lots-vegetation-greenery_23-2150842776.jpg?_wi=1",
imageAlt: "smart city technology integration",
},
]}
title="World-Class Infrastructure"
description="Experience superior amenities, state-of-the-art power, and clean, green living environments."
/>
</div>
<div id="features" data-section="features">
<FeatureBento
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={true}
features={[
{
title: "Sustainable Living", description: "Eco-friendly developments designed for future growth.", bentoComponent: "media-stack", items: [
{ imageSrc: "http://img.b2bpic.net/free-photo/bridge-night_1137-165.jpg", imageAlt: "Smart city tech" },
{ imageSrc: "http://img.b2bpic.net/free-photo/bird-s-eye-view-shanghai_1127-4005.jpg", imageAlt: "Residential area" },
{ imageSrc: "http://img.b2bpic.net/free-photo/empty-boardroom-space-within-enterprise-designed-productivity_482257-114714.jpg", imageAlt: "Professional workspace" },
]
},
]}
title="World-Class Infrastructure"
description="Experience superior amenities, state-of-the-art power, and clean, green living environments."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardTwo
animationType="depth-3d"
textboxLayout="default"
gridVariant="bento-grid"
useInvertedBackground={false}
metrics={[
{
id: "m1",
value: "5,000+",
description: "Happy Residents",
},
{
id: "m2",
value: "2,500+",
description: "Business Jobs",
},
{
id: "m3",
value: "60+",
description: "Global Companies",
},
]}
title="Tatu City by the Numbers"
description="Key growth indicators for Africa's most ambitious urban hub."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardTwo
animationType="depth-3d"
textboxLayout="default"
gridVariant="bento-grid"
useInvertedBackground={false}
metrics={[
{ id: "m1", value: "5,000+", description: "Happy Residents" },
{ id: "m2", value: "2,500+", description: "Business Jobs" },
{ id: "m3", value: "60+", description: "Global Companies" },
]}
title="Tatu City by the Numbers"
description="Key growth indicators for Africa's most ambitious urban hub."
/>
</div>
<div id="product" data-section="product">
<ProductCardOne
textboxLayout="split"
gridVariant="uniform-all-items-equal"
useInvertedBackground={true}
products={[
{
id: "p1",
name: "Commercial Plot",
price: "Custom Pricing",
imageSrc: "http://img.b2bpic.net/free-photo/grassy-field-with-house-trees-dutch-polder_181624-8791.jpg",
},
{
id: "p2",
name: "Residential Home",
price: "$150,000+",
imageSrc: "http://img.b2bpic.net/free-photo/shot-apartment-building-with-glass-balconies-gershwinlaan-zuidas-amsterdam_181624-4887.jpg",
},
{
id: "p3",
name: "Industrial Facility",
price: "Inquire",
imageSrc: "http://img.b2bpic.net/free-photo/industrial-park-factory-building-warehouse_1417-1917.jpg",
},
{
id: "p4",
name: "Green Space Access",
price: "Included",
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-city_1127-3332.jpg",
},
{
id: "p5",
name: "Business Office",
price: "Custom Pricing",
imageSrc: "http://img.b2bpic.net/free-photo/parasol-located-old-quarter-seville_268835-15507.jpg",
},
{
id: "p6",
name: "Growth Report",
price: "Free Access",
imageSrc: "http://img.b2bpic.net/free-photo/motion-blur-skytrain-speeding-through-modern-business-district_53876-16146.jpg",
},
]}
title="Invest in Tatu City"
description="From commercial land to luxury residences, discover your next asset."
/>
</div>
<div id="product" data-section="product">
<ProductCardOne
textboxLayout="split"
gridVariant="uniform-all-items-equal"
animationType="slide-up"
useInvertedBackground={true}
products={[
{ id: "p1", name: "Commercial Plot", price: "Custom Pricing", imageSrc: "http://img.b2bpic.net/free-photo/grassy-field-with-house-trees-dutch-polder_181624-8791.jpg" },
{ id: "p2", name: "Residential Home", price: "$150,000+", imageSrc: "http://img.b2bpic.net/free-photo/shot-apartment-building-with-glass-balconies-gershwinlaan-zuidas-amsterdam_181624-4887.jpg" },
{ id: "p3", name: "Industrial Facility", price: "Inquire", imageSrc: "http://img.b2bpic.net/free-photo/industrial-park-factory-building-warehouse_1417-1917.jpg" },
{ id: "p4", name: "Green Space Access", price: "Included", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-city_1127-3332.jpg" },
{ id: "p5", name: "Business Office", price: "Custom Pricing", imageSrc: "http://img.b2bpic.net/free-photo/parasol-located-old-quarter-seville_268835-15507.jpg" },
{ id: "p6", name: "Growth Report", price: "Free Access", imageSrc: "http://img.b2bpic.net/free-photo/motion-blur-skytrain-speeding-through-modern-business-district_53876-16146.jpg" },
]}
title="Invest in Tatu City"
description="From commercial land to luxury residences, discover your next asset."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardFive
textboxLayout="default"
useInvertedBackground={false}
testimonials={[
{
id: "t1",
name: "John Doe",
date: "2023-10-01",
title: "Business Owner",
quote: "Tatu City changed the way I conduct business.",
tag: "Corporate",
avatarSrc: "http://img.b2bpic.net/free-photo/crazy-businessman-worried-expression_1194-3826.jpg",
imageSrc: "http://img.b2bpic.net/free-photo/view-futuristic-city-with-lots-vegetation-greenery_23-2150842776.jpg?_wi=2",
imageAlt: "successful business professional portrait",
},
{
id: "t2",
name: "Jane Smith",
date: "2023-11-15",
title: "Lead Architect",
quote: "An incredible feat of urban planning and design.",
tag: "Professional",
avatarSrc: "http://img.b2bpic.net/free-photo/system-administrator-debugging-company-servers-preventing-failures_482257-124403.jpg",
imageSrc: "http://img.b2bpic.net/free-photo/silhouette-young-business-woman-beige-suit-walking-city-center-posing-near-office-buildings_1258-194035.jpg",
imageAlt: "successful business professional portrait",
},
{
id: "t3",
name: "Mark Wilson",
date: "2023-12-05",
title: "Resident",
quote: "The best place to raise my family, hands down.",
tag: "Residential",
avatarSrc: "http://img.b2bpic.net/free-photo/front-view-adults-girl-posing-together_23-2148600881.jpg",
imageSrc: "http://img.b2bpic.net/free-photo/bridge-night_1137-165.jpg?_wi=2",
imageAlt: "successful business professional portrait",
},
{
id: "t4",
name: "Lucy Brown",
date: "2024-01-10",
title: "Investor",
quote: "Reliable returns and a great growing community.",
tag: "Investment",
avatarSrc: "http://img.b2bpic.net/free-photo/close-up-businessman-standing-front-table-writing-diary-with-pen_23-2148087135.jpg",
imageSrc: "http://img.b2bpic.net/free-photo/bird-s-eye-view-shanghai_1127-4005.jpg?_wi=2",
imageAlt: "successful business professional portrait",
},
{
id: "t5",
name: "Samuel K.",
date: "2024-02-20",
title: "Creative Director",
quote: "Living here is a constant stream of inspiration.",
tag: "Creative",
avatarSrc: "http://img.b2bpic.net/free-photo/portrait-young-pretty-woman-having-idea-sitting-table-trench-coat-working-laptop_285396-2368.jpg",
imageSrc: "http://img.b2bpic.net/free-photo/empty-boardroom-space-within-enterprise-designed-productivity_482257-114714.jpg?_wi=2",
imageAlt: "successful business professional portrait",
},
]}
title="Voices from Tatu City"
description="Hear what our community says about their experience."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardFive
textboxLayout="default"
useInvertedBackground={false}
testimonials={[
{ id: "t1", name: "John Doe", date: "2023-10-01", title: "Business Owner", quote: "Tatu City changed the way I conduct business.", tag: "Corporate", avatarSrc: "http://img.b2bpic.net/free-photo/crazy-businessman-worried-expression_1194-3826.jpg", imageSrc: "http://img.b2bpic.net/free-photo/view-futuristic-city-with-lots-vegetation-greenery_23-2150842776.jpg", imageAlt: "successful business professional portrait" },
{ id: "t2", name: "Jane Smith", date: "2023-11-15", title: "Lead Architect", quote: "An incredible feat of urban planning and design.", tag: "Professional", avatarSrc: "http://img.b2bpic.net/free-photo/system-administrator-debugging-company-servers-preventing-failures_482257-124403.jpg", imageSrc: "http://img.b2bpic.net/free-photo/silhouette-young-business-woman-beige-suit-walking-city-center-posing-near-office-buildings_1258-194035.jpg", imageAlt: "successful business professional portrait" },
{ id: "t3", name: "Mark Wilson", date: "2023-12-05", title: "Resident", quote: "The best place to raise my family, hands down.", tag: "Residential", avatarSrc: "http://img.b2bpic.net/free-photo/front-view-adults-girl-posing-together_23-2148600881.jpg", imageSrc: "http://img.b2bpic.net/free-photo/bridge-night_1137-165.jpg", imageAlt: "successful business professional portrait" },
{ id: "t4", name: "Lucy Brown", date: "2024-01-10", title: "Investor", quote: "Reliable returns and a great growing community.", tag: "Investment", avatarSrc: "http://img.b2bpic.net/free-photo/close-up-businessman-standing-front-table-writing-diary-with-pen_23-2148087135.jpg", imageSrc: "http://img.b2bpic.net/free-photo/bird-s-eye-view-shanghai_1127-4005.jpg", imageAlt: "successful business professional portrait" },
{ id: "t5", name: "Samuel K.", date: "2024-02-20", title: "Creative Director", quote: "Living here is a constant stream of inspiration.", tag: "Creative", avatarSrc: "http://img.b2bpic.net/free-photo/portrait-young-pretty-woman-having-idea-sitting-table-trench-coat-working-laptop_285396-2368.jpg", imageSrc: "http://img.b2bpic.net/free-photo/empty-boardroom-space-within-enterprise-designed-productivity_482257-114714.jpg", imageAlt: "successful business professional portrait" },
]}
title="Voices from Tatu City"
description="Hear what our community says about their experience."
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitMedia
textboxLayout="split"
useInvertedBackground={true}
faqs={[
{
id: "f1",
title: "How do I invest?",
content: "Contact our sales team to discuss land and property opportunities.",
},
{
id: "f2",
title: "Is security guaranteed?",
content: "Yes, we operate 24/7 security with advanced surveillance.",
},
{
id: "f3",
title: "What infrastructure is included?",
content: "Roads, power, water, and fiber-optic internet.",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/vertical-shot-young-businesswoman-beige-suit-holding-documents-hands-looking-confident_1258-194071.jpg"
title="Common Questions"
description="Answers to everything you need to know about Tatu City."
faqsAnimation="slide-up"
mediaAnimation="slide-up"
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitMedia
textboxLayout="split"
useInvertedBackground={true}
faqs={[
{ id: "f1", title: "How do I invest?", content: "Contact our sales team to discuss land and property opportunities." },
{ id: "f2", title: "Is security guaranteed?", content: "Yes, we operate 24/7 security with advanced surveillance." },
{ id: "f3", title: "What infrastructure is included?", content: "Roads, power, water, and fiber-optic internet." },
]}
imageSrc="http://img.b2bpic.net/free-photo/vertical-shot-young-businesswoman-beige-suit-holding-documents-hands-looking-confident_1258-194071.jpg"
title="Common Questions"
description="Answers to everything you need to know about Tatu City."
faqsAnimation="slide-up"
mediaAnimation="slide-up"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
useInvertedBackground={false}
title="Start Your Journey"
description="Ready to move to Tatu City? Reach out today."
inputs={[
{
name: "name",
type: "text",
placeholder: "Full Name",
required: true,
},
{
name: "email",
type: "email",
placeholder: "Email Address",
required: true,
},
]}
textarea={{
name: "message",
placeholder: "Tell us how we can help",
rows: 4,
required: true,
}}
imageSrc="http://img.b2bpic.net/free-photo/blurred-hotel-reception_1203-1410.jpg"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
useInvertedBackground={false}
title="Start Your Journey"
description="Ready to move to Tatu City? Reach out today."
inputs={[
{ name: "name", type: "text", placeholder: "Full Name", required: true },
{ name: "email", type: "email", placeholder: "Email Address", required: true },
]}
textarea={{ name: "message", placeholder: "Tell us how we can help", rows: 4, required: true }}
imageSrc="http://img.b2bpic.net/free-photo/blurred-hotel-reception_1203-1410.jpg"
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={[
{
title: "Company",
items: [
{
label: "About Us",
href: "#about",
},
{
label: "Careers",
href: "#",
},
],
},
{
title: "Legal",
items: [
{
label: "Privacy Policy",
href: "#",
},
{
label: "Terms of Use",
href: "#",
},
],
},
]}
bottomLeftText="© 2024 Tatu City. All Rights Reserved."
bottomRightText="Built with precision."
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={[
{
title: "Company", items: [
{ label: "About Us", href: "#about" },
{ label: "Careers", href: "#" },
],
},
{
title: "Legal", items: [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms of Use", href: "#" },
],
},
]}
bottomLeftText="© 2024 Tatu City. All Rights Reserved."
bottomRightText="Built with precision."
/>
</div>
</ReactLenis>
</ThemeProvider>
);