bender/a747e5d4-ea98-4152-9a85-f6232201a35e
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bob AI: Added an enquiry form section.

Browse Source
This commit is contained in:
kudinDmitriyUp
2026-06-17 11:54:56 +00:00
parent 0a19f03c87
commit 864f2aba8f
10 changed files with 270 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
src/pages/HomePage.tsx
View File

@@ -1,131 +1,40 @@
import { StyleProvider } from "@/components/ui/StyleProvider";
import HeroTiltedCards from "@/components/sections/hero/HeroTiltedCards";
import AboutMediaOverlay from "@/components/sections/about/AboutMediaOverlay";
import ProductVariantCards from "@/components/sections/product/ProductVariantCards";
import FeaturesRevealCards from "@/components/sections/features/FeaturesRevealCards";
import TeamOverlayCards from "@/components/sections/team/TeamOverlayCards";
import MetricsIconCards from "@/components/sections/metrics/MetricsIconCards";
import TestimonialSplitCards from "@/components/sections/testimonial/TestimonialSplitCards";
import ContactCta from "@/components/sections/contact/ContactCta";
// 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 { StyleProvider } from "@/components/ui/StyleProvider";
import React from 'react';
import HeroSection from './HomePage/sections/Hero';
import AboutSection from './HomePage/sections/About';
import PropertiesSection from './HomePage/sections/Properties';
import ServicesSection from './HomePage/sections/Services';
import TeamSection from './HomePage/sections/Team';
import MetricsSection from './HomePage/sections/Metrics';
import TestimonialsSection from './HomePage/sections/Testimonials';
import ContactSection from './HomePage/sections/Contact';
import EnquirySection from './HomePage/sections/Enquiry';export default function HomePage(): React.JSX.Element {
return (
<StyleProvider siteBackground="none" heroBackground="gradientBars" buttonVariant="magnetic">
<div id="hero" data-section="hero">
<HeroTiltedCards
tag="Zambia's Premier Agency"
title="Experience Excellence in Zambian Real Estate"
description="From prime building lots to luxury residential estates, Oak Tree Real Estate provides comprehensive property solutions across Lusaka and beyond."
primaryButton={{ text: "View Listings", href: "#properties" }}
secondaryButton={{ text: "Contact Us", href: "#contact" }}
items={[
{ imageSrc: "http://img.b2bpic.net/free-photo/shanghai-urban-architecture_649448-5337.jpg" },
{ imageSrc: "http://img.b2bpic.net/free-photo/aerial-drone-view-bend-wide-river-green-meadows_661209-343.jpg" },
{ imageSrc: "http://img.b2bpic.net/free-photo/low-angle-house-with-wooden-pieces_23-2148931503.jpg" },
{ imageSrc: "http://img.b2bpic.net/free-photo/aerial-view-historic-stone-buildings-modern-cliffside-architecture_1308-189524.jpg" },
{ imageSrc: "http://img.b2bpic.net/free-photo/happy-couple-making-deal-with-financial-advisor-meeting-home-focus-is-woman-shaking-hands-with-advisor_637285-3090.jpg" },
]}
/>
</div>
<HeroSection />
<div id="about" data-section="about">
<AboutMediaOverlay
tag="Our Legacy"
title="Your Trusted Partner in Lusaka"
description="Oak Tree Real Estate Zambia is a leading real estate firm specializing in property sales, management, valuation, and consultancy. With deep local expertise and a commitment to transparency, we bridge the gap between property owners and investors in the heart of Zambia."
primaryButton={{ text: "Our Services", href: "#services" }}
secondaryButton={{ text: "Get in Touch", href: "#contact" }}
imageSrc="http://img.b2bpic.net/free-photo/relax-area-hotel_1150-10812.jpg"
/>
</div>
<AboutSection />
<div id="properties" data-section="properties">
<ProductVariantCards
tag="Featured Portfolio"
title="Exceptional Properties"
description="Explore our curated selection of land, residential homes, and commercial spaces available in prime locations."
primaryButton={{ text: "View All Listings", href: "#properties" }}
products={[
{
name: "Prime Residential Lot", variant: "1000sqm | Lusaka Prime", price: "Price on Request", imageSrc: "http://img.b2bpic.net/free-photo/delimitation-land-with-trees_23-2149721837.jpg"},
{
name: "Luxury Family Home", variant: "4 Bed | Modern Finish", price: "Price on Request", imageSrc: "http://img.b2bpic.net/free-photo/luxury-water-swimming-resort-hotel_1203-4648.jpg"},
{
name: "Commercial Office Space", variant: "Central Lusaka | High Footfall", price: "Price on Request", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-architecture-office-business-building-with-glass-window-shape_74190-6437.jpg"},
]}
/>
</div>
<PropertiesSection />
<div id="services" data-section="services">
<FeaturesRevealCards
tag="Our Expertise"
title="Comprehensive Property Services"
description="We offer a full spectrum of real estate services managed by industry professionals."
items={[
{
title: "Property Sales & Buying", description: "Expert agent services for buying and selling residential and commercial properties.", imageSrc: "http://img.b2bpic.net/free-photo/dream-come-true-happy-couple-together-their-new-house-conception-moving_146671-16189.jpg"},
{
title: "Asset & Property Management", description: "Professional management to ensure your investments are well-maintained and profitable.", imageSrc: "http://img.b2bpic.net/free-photo/businessman-with-tablet_23-2147996523.jpg"},
{
title: "Conveyancing & Surveying", description: "Seamless legal support, documentation, and precise surveying services.", imageSrc: "http://img.b2bpic.net/free-photo/paper-holder-cup-coffee_23-2148225493.jpg"},
{
title: "Development & Design", description: "Expert house design and property development tailored to your vision.", imageSrc: "http://img.b2bpic.net/free-photo/image-engineering-objects-workplace-top-view-construction-concept-engineering-tools-vintage-tone-retro-filter-effect-soft-focus-selective-focus_1418-467.jpg"},
]}
/>
</div>
<ServicesSection />
<div id="team" data-section="team">
<TeamOverlayCards
tag="Leadership"
title="Meet Our Experts"
description="Our team is composed of dedicated professionals committed to excellence in the Zambian property market."
members={[
{ name: "Property Specialist", role: "Sales Team", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-working-as-real-estate-agent_23-2151064919.jpg" },
{ name: "Consultancy Lead", role: "Advisory", imageSrc: "http://img.b2bpic.net/free-photo/empowered-business-woman-working-city_23-2149322942.jpg" },
{ name: "Legal Specialist", role: "Conveyancing", imageSrc: "http://img.b2bpic.net/free-photo/low-angle-smiley-lawyer-with-crossed-arms_23-2148230781.jpg" },
]}
/>
</div>
<TeamSection />
<div id="metrics" data-section="metrics">
<MetricsIconCards
tag="Track Record"
title="Our Impact in Numbers"
description="Results-driven services that have helped thousands reach their property goals."
metrics={[
{ icon: "Home", title: "Properties Sold", value: "500+" },
{ icon: "Users", title: "Satisfied Clients", value: "1K+" },
{ icon: "MapPin", title: "Regions Served", value: "Nationwide" },
{ icon: "Award", title: "Years Experience", value: "10+" },
]}
/>
</div>
<MetricsSection />
<div id="testimonials" data-section="testimonials">
<TestimonialSplitCards
tag="Client Voices"
title="What Our Clients Say"
description="Hear from those who trusted us with their real estate journey in Zambia."
testimonials={[
{
tag: "Residential", title: "Professional and Efficient", quote: "Oak Tree helped me find my dream home in Lusaka without the usual stress. Their team is knowledgeable and very professional.", name: "Chanda M.", date: "October 2024", avatarImageSrc: "http://img.b2bpic.net/free-photo/closeup-attractive-africanamerican-woman-smiling-looking-happy-standing-yellow-backgroun_1258-137772.jpg", imageSrc: "http://img.b2bpic.net/free-photo/full-shot-cute-couple-holding-hands_23-2150322081.jpg"},
{
tag: "Investment", title: "Reliable Guidance", quote: "As an investor, I rely on their property management services. Always transparent and responsive.", name: "David K.", date: "September 2024", avatarImageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-smiling-model-sexy-stylish-man-dressed-brown-turtleneck-sweater-jeans-fashion-hipster-male-posing-studio_158538-25123.jpg", imageSrc: "http://img.b2bpic.net/free-photo/close-up-young-businessman-holding-disposable-coffee-cup-hand-standing-street_23-2148176165.jpg"},
{
tag: "Consultancy", title: "Exceptional Service", quote: "Their conveyancing services were handled perfectly, saving me time and avoiding common legal hurdles.", name: "Sarah B.", date: "August 2024", avatarImageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-young-businesswoman-talking-mobile-phone_1262-16443.jpg", imageSrc: "http://img.b2bpic.net/free-photo/side-view-female-realtor-shaking-hands-with-couple-new-house-deal_23-2148895464.jpg"},
]}
/>
</div>
<TestimonialsSection />
<EnquirySection />
<div id="contact" data-section="contact">
<ContactCta
tag="Get In Touch"
text="Ready to start your property journey?"
primaryButton={{ text: "Call Us: 095 3591531", href: "tel:+260953591531" }}
secondaryButton={{ text: "Visit Our Office", href: "https://maps.app.goo.gl/" }}
/>
</div>
<ContactSection />
</StyleProvider>
);
}
}

20
src/pages/HomePage/sections/About.tsx Normal file
View File

@@ -0,0 +1,20 @@
// 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";
export default function AboutSection(): React.JSX.Element {
return (
<div id="about" data-section="about">
<AboutMediaOverlay
tag="Our Legacy"
title="Your Trusted Partner in Lusaka"
description="Oak Tree Real Estate Zambia is a leading real estate firm specializing in property sales, management, valuation, and consultancy. With deep local expertise and a commitment to transparency, we bridge the gap between property owners and investors in the heart of Zambia."
primaryButton={{ text: "Our Services", href: "#services" }}
secondaryButton={{ text: "Get in Touch", href: "#contact" }}
imageSrc="http://img.b2bpic.net/free-photo/relax-area-hotel_1150-10812.jpg"
/>
</div>
);
}

18
src/pages/HomePage/sections/Contact.tsx Normal file
View File

@@ -0,0 +1,18 @@
// 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";
export default function ContactSection(): React.JSX.Element {
return (
<div id="contact" data-section="contact">
<ContactCta
tag="Get In Touch"
text="Ready to start your property journey?"
primaryButton={{ text: "Call Us: 095 3591531", href: "tel:+260953591531" }}
secondaryButton={{ text: "Visit Our Office", href: "https://maps.app.goo.gl/" }}
/>
</div>
);
}

56
src/pages/HomePage/sections/Enquiry.tsx Normal file
View File

@@ -0,0 +1,56 @@
import React from 'react';
import Button from '@/components/ui/Button';
import Input from '@/components/ui/Input';
import Textarea from '@/components/ui/Textarea';
import Label from '@/components/ui/Label';
import TextAnimation from '@/components/ui/TextAnimation';
import ScrollReveal from '@/components/ui/ScrollReveal';
import Tag from '@/components/ui/Tag';
export default function EnquirySection() {
return (
<div data-webild-section="enquiry" id="enquiry" className="relative w-full py-24 bg-background">
<div className="w-content-width mx-auto px-6">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
<ScrollReveal variant="slide-up">
<Tag text="Enquiry" className="mb-6" />
<TextAnimation
text="Make an Enquiry"
variant="slide-up"
tag="h2"
className="text-4xl md:text-5xl font-bold text-foreground mb-4"
gradientText={false}
/>
<p className="text-lg text-muted-foreground mb-8">
Fill out the form below and our team will get back to you shortly to discuss your real estate needs.
</p>
</ScrollReveal>
<ScrollReveal variant="fade-blur" delay={0.2}>
<div className="card p-8 rounded-theme bg-card shadow-sm border border-border">
<form className="space-y-6" onSubmit={(e) => e.preventDefault()}>
<div className="space-y-2">
<Label htmlFor="name">Your Name</Label>
<Input id="name" type="text" placeholder="John Doe" required />
</div>
<div className="space-y-2">
<Label htmlFor="email">Email Address</Label>
<Input id="email" type="email" placeholder="john@example.com" required />
</div>
<div className="space-y-2">
<Label htmlFor="phone">Phone Number</Label>
<Input id="phone" type="tel" placeholder="+260 95 3591531" />
</div>
<div className="space-y-2">
<Label htmlFor="message">Message</Label>
<Textarea id="message" placeholder="How can we help you?" rows={4} required />
</div>
<Button text="Send Enquiry" variant="primary" className="w-full" />
</form>
</div>
</ScrollReveal>
</div>
</div>
</div>
);
}

26
src/pages/HomePage/sections/Hero.tsx Normal file
View File

@@ -0,0 +1,26 @@
// 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 HeroTiltedCards from "@/components/sections/hero/HeroTiltedCards";
export default function HeroSection(): React.JSX.Element {
return (
<div id="hero" data-section="hero">
<HeroTiltedCards
tag="Zambia's Premier Agency"
title="Experience Excellence in Zambian Real Estate"
description="From prime building lots to luxury residential estates, Oak Tree Real Estate provides comprehensive property solutions across Lusaka and beyond."
primaryButton={{ text: "View Listings", href: "#properties" }}
secondaryButton={{ text: "Contact Us", href: "#contact" }}
items={[
{ imageSrc: "http://img.b2bpic.net/free-photo/shanghai-urban-architecture_649448-5337.jpg" },
{ imageSrc: "http://img.b2bpic.net/free-photo/aerial-drone-view-bend-wide-river-green-meadows_661209-343.jpg" },
{ imageSrc: "http://img.b2bpic.net/free-photo/low-angle-house-with-wooden-pieces_23-2148931503.jpg" },
{ imageSrc: "http://img.b2bpic.net/free-photo/aerial-view-historic-stone-buildings-modern-cliffside-architecture_1308-189524.jpg" },
{ imageSrc: "http://img.b2bpic.net/free-photo/happy-couple-making-deal-with-financial-advisor-meeting-home-focus-is-woman-shaking-hands-with-advisor_637285-3090.jpg" },
]}
/>
</div>
);
}

23
src/pages/HomePage/sections/Metrics.tsx Normal file
View File

@@ -0,0 +1,23 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "metrics" section.
import React from 'react';
import MetricsIconCards from "@/components/sections/metrics/MetricsIconCards";
export default function MetricsSection(): React.JSX.Element {
return (
<div id="metrics" data-section="metrics">
<MetricsIconCards
tag="Track Record"
title="Our Impact in Numbers"
description="Results-driven services that have helped thousands reach their property goals."
metrics={[
{ icon: "Home", title: "Properties Sold", value: "500+" },
{ icon: "Users", title: "Satisfied Clients", value: "1K+" },
{ icon: "MapPin", title: "Regions Served", value: "Nationwide" },
{ icon: "Award", title: "Years Experience", value: "10+" },
]}
/>
</div>
);
}

26
src/pages/HomePage/sections/Properties.tsx Normal file
View File

@@ -0,0 +1,26 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "properties" section.
import React from 'react';
import ProductVariantCards from "@/components/sections/product/ProductVariantCards";
export default function PropertiesSection(): React.JSX.Element {
return (
<div id="properties" data-section="properties">
<ProductVariantCards
tag="Featured Portfolio"
title="Exceptional Properties"
description="Explore our curated selection of land, residential homes, and commercial spaces available in prime locations."
primaryButton={{ text: "View All Listings", href: "#properties" }}
products={[
{
name: "Prime Residential Lot", variant: "1000sqm | Lusaka Prime", price: "Price on Request", imageSrc: "http://img.b2bpic.net/free-photo/delimitation-land-with-trees_23-2149721837.jpg"},
{
name: "Luxury Family Home", variant: "4 Bed | Modern Finish", price: "Price on Request", imageSrc: "http://img.b2bpic.net/free-photo/luxury-water-swimming-resort-hotel_1203-4648.jpg"},
{
name: "Commercial Office Space", variant: "Central Lusaka | High Footfall", price: "Price on Request", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-architecture-office-business-building-with-glass-window-shape_74190-6437.jpg"},
]}
/>
</div>
);
}

27
src/pages/HomePage/sections/Services.tsx Normal file
View File

@@ -0,0 +1,27 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "services" section.
import React from 'react';
import FeaturesRevealCards from "@/components/sections/features/FeaturesRevealCards";
export default function ServicesSection(): React.JSX.Element {
return (
<div id="services" data-section="services">
<FeaturesRevealCards
tag="Our Expertise"
title="Comprehensive Property Services"
description="We offer a full spectrum of real estate services managed by industry professionals."
items={[
{
title: "Property Sales & Buying", description: "Expert agent services for buying and selling residential and commercial properties.", imageSrc: "http://img.b2bpic.net/free-photo/dream-come-true-happy-couple-together-their-new-house-conception-moving_146671-16189.jpg"},
{
title: "Asset & Property Management", description: "Professional management to ensure your investments are well-maintained and profitable.", imageSrc: "http://img.b2bpic.net/free-photo/businessman-with-tablet_23-2147996523.jpg"},
{
title: "Conveyancing & Surveying", description: "Seamless legal support, documentation, and precise surveying services.", imageSrc: "http://img.b2bpic.net/free-photo/paper-holder-cup-coffee_23-2148225493.jpg"},
{
title: "Development & Design", description: "Expert house design and property development tailored to your vision.", imageSrc: "http://img.b2bpic.net/free-photo/image-engineering-objects-workplace-top-view-construction-concept-engineering-tools-vintage-tone-retro-filter-effect-soft-focus-selective-focus_1418-467.jpg"},
]}
/>
</div>
);
}

22
src/pages/HomePage/sections/Team.tsx Normal file
View File

@@ -0,0 +1,22 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "team" section.
import React from 'react';
import TeamOverlayCards from "@/components/sections/team/TeamOverlayCards";
export default function TeamSection(): React.JSX.Element {
return (
<div id="team" data-section="team">
<TeamOverlayCards
tag="Leadership"
title="Meet Our Experts"
description="Our team is composed of dedicated professionals committed to excellence in the Zambian property market."
members={[
{ name: "Property Specialist", role: "Sales Team", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-working-as-real-estate-agent_23-2151064919.jpg" },
{ name: "Consultancy Lead", role: "Advisory", imageSrc: "http://img.b2bpic.net/free-photo/empowered-business-woman-working-city_23-2149322942.jpg" },
{ name: "Legal Specialist", role: "Conveyancing", imageSrc: "http://img.b2bpic.net/free-photo/low-angle-smiley-lawyer-with-crossed-arms_23-2148230781.jpg" },
]}
/>
</div>
);
}

25
src/pages/HomePage/sections/Testimonials.tsx Normal file
View File

@@ -0,0 +1,25 @@
// 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 TestimonialSplitCards from "@/components/sections/testimonial/TestimonialSplitCards";
export default function TestimonialsSection(): React.JSX.Element {
return (
<div id="testimonials" data-section="testimonials">
<TestimonialSplitCards
tag="Client Voices"
title="What Our Clients Say"
description="Hear from those who trusted us with their real estate journey in Zambia."
testimonials={[
{
tag: "Residential", title: "Professional and Efficient", quote: "Oak Tree helped me find my dream home in Lusaka without the usual stress. Their team is knowledgeable and very professional.", name: "Chanda M.", date: "October 2024", avatarImageSrc: "http://img.b2bpic.net/free-photo/closeup-attractive-africanamerican-woman-smiling-looking-happy-standing-yellow-backgroun_1258-137772.jpg", imageSrc: "http://img.b2bpic.net/free-photo/full-shot-cute-couple-holding-hands_23-2150322081.jpg"},
{
tag: "Investment", title: "Reliable Guidance", quote: "As an investor, I rely on their property management services. Always transparent and responsive.", name: "David K.", date: "September 2024", avatarImageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-smiling-model-sexy-stylish-man-dressed-brown-turtleneck-sweater-jeans-fashion-hipster-male-posing-studio_158538-25123.jpg", imageSrc: "http://img.b2bpic.net/free-photo/close-up-young-businessman-holding-disposable-coffee-cup-hand-standing-street_23-2148176165.jpg"},
{
tag: "Consultancy", title: "Exceptional Service", quote: "Their conveyancing services were handled perfectly, saving me time and avoiding common legal hurdles.", name: "Sarah B.", date: "August 2024", avatarImageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-young-businesswoman-talking-mobile-phone_1262-16443.jpg", imageSrc: "http://img.b2bpic.net/free-photo/side-view-female-realtor-shaking-hands-with-couple-new-house-deal_23-2148895464.jpg"},
]}
/>
</div>
);
}