399 lines
13 KiB
TypeScript
399 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
|
import FaqBase from '@/components/sections/faq/FaqBase';
|
|
import FeatureBento from '@/components/sections/feature/FeatureBento';
|
|
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
|
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
|
|
import MediaAbout from '@/components/sections/about/MediaAbout';
|
|
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
|
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
|
import { Building, DollarSign, Eye, Sparkles, ThumbsUp, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-bubble"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="pill"
|
|
contentWidth="smallMedium"
|
|
sizing="largeSmall"
|
|
background="noise"
|
|
cardStyle="layered-gradient"
|
|
primaryButtonStyle="flat"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
navItems={[
|
|
{
|
|
name: "Home",
|
|
id: "hero",
|
|
},
|
|
{
|
|
name: "Features",
|
|
id: "features",
|
|
},
|
|
{
|
|
name: "Designs",
|
|
id: "products",
|
|
},
|
|
{
|
|
name: "Contact",
|
|
id: "contact",
|
|
},
|
|
]}
|
|
brandName="ArchitectAI"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboard
|
|
background={{
|
|
variant: "sparkles-gradient",
|
|
}}
|
|
title="Build Your Dream Sanctuary With AI"
|
|
description="Transform your ideas into 3D architectural masterpieces in seconds. Simply describe your vision and watch our AI bring your villa or chalet to life."
|
|
buttons={[
|
|
{
|
|
text: "Start Designing",
|
|
href: "#",
|
|
},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/luxurious-villa-mountain-landscape-tranquil-poolside-relaxation-generated-by-ai_188544-30912.jpg?_wi=1"
|
|
imageAlt="3D render of a luxury villa"
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/closeup-smiling-beautiful-adult-businesswoman_1262-1760.jpg",
|
|
alt: "Executive woman",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/confident-middle-aged-businesswoman-looking-camera_74855-4120.jpg",
|
|
alt: "Business woman",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/handsome-businesman-summer-city_1157-18994.jpg",
|
|
alt: "Businessman",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/senior-woman-with-plans-helmet_1149-1127.jpg",
|
|
alt: "Senior woman",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/bearded-young-man-casual-shirt-standing-with-laptop-hands_93675-134479.jpg",
|
|
alt: "Young man",
|
|
},
|
|
]}
|
|
avatarText="Join 15,000+ happy designers"
|
|
marqueeItems={[
|
|
{
|
|
type: "text",
|
|
text: "Instant 3D Rendering",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "Architectural Precision",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "Budget Optimization",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "Material Analysis",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "Sustainable Design",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureBento
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
title: "Text-to-Architecture",
|
|
description: "Describe any space in natural language and get instant 3D plans.",
|
|
bentoComponent: "reveal-icon",
|
|
icon: Sparkles,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/umbrella-chair-around-outdoor-swimming-pool-resort-hotel-vacation-leisure_74190-14764.jpg",
|
|
imageAlt: "Umbrella and chair around outdoor swimming pool in resort hotel for vacation leisure",
|
|
},
|
|
{
|
|
title: "Real-time 3D View",
|
|
description: "Experience your design with 360-degree walk-through capabilities.",
|
|
bentoComponent: "reveal-icon",
|
|
icon: Eye,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/luxurious-villa-mountain-landscape-tranquil-poolside-relaxation-generated-by-ai_188544-30912.jpg?_wi=2",
|
|
imageAlt: "Umbrella and chair around outdoor swimming pool in resort hotel for vacation leisure",
|
|
},
|
|
{
|
|
title: "Cost Calculator",
|
|
description: "Estimate your construction budget based on materials and dimensions.",
|
|
bentoComponent: "reveal-icon",
|
|
icon: DollarSign,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/digital-tablet-online-learning_53876-97299.jpg?_wi=1",
|
|
imageAlt: "Umbrella and chair around outdoor swimming pool in resort hotel for vacation leisure",
|
|
},
|
|
]}
|
|
title="Intelligent Design Features"
|
|
description="Powerful AI tools designed for creators, property owners, and architects to build faster than ever."
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MediaAbout
|
|
useInvertedBackground={false}
|
|
title="Designing the Future of Real Estate"
|
|
description="ArchitectAI combines deep architectural intelligence with user-friendly interfaces to make professional design accessible to everyone, regardless of engineering experience."
|
|
imageSrc="http://img.b2bpic.net/free-photo/digital-tablet-online-learning_53876-97299.jpg?_wi=2"
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardFour
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="four-items-2x2-equal-grid"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "1",
|
|
name: "Modern Villa",
|
|
price: "AI-Custom",
|
|
variant: "Modern",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-house-model_23-2150799685.jpg",
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "Desert Oasis Chalet",
|
|
price: "AI-Custom",
|
|
variant: "Minimalist",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-house-desert_23-2150921017.jpg",
|
|
},
|
|
{
|
|
id: "3",
|
|
name: "Luxury Beach Hut",
|
|
price: "AI-Custom",
|
|
variant: "Luxury",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/chairs-white-garden-resort-chair_1203-4439.jpg",
|
|
},
|
|
{
|
|
id: "4",
|
|
name: "Mountain Retreat",
|
|
price: "AI-Custom",
|
|
variant: "Rustic",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-shot-lodge-house-with-deer-antlers-hanging-window-snow-back_181624-61513.jpg",
|
|
},
|
|
{
|
|
id: "5",
|
|
name: "Urban Courtyard House",
|
|
price: "AI-Custom",
|
|
variant: "Compact",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/blending-futuristic-building-seamlessly-into-desert-landscape_23-2151248332.jpg",
|
|
},
|
|
{
|
|
id: "6",
|
|
name: "Glass Infinity Estate",
|
|
price: "AI-Custom",
|
|
variant: "Avant-garde",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/blending-futuristic-building-seamlessly-into-desert-landscape_23-2151248338.jpg",
|
|
},
|
|
]}
|
|
title="Explore Our Design Templates"
|
|
description="Browse our curated collection of modern villas and serene chalets ready for customization."
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardOne
|
|
animationType="depth-3d"
|
|
textboxLayout="default"
|
|
gridVariant="bento-grid"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{
|
|
id: "m1",
|
|
value: "15K+",
|
|
title: "Designs Created",
|
|
description: "Successful projects",
|
|
icon: Building,
|
|
},
|
|
{
|
|
id: "m2",
|
|
value: "95%",
|
|
title: "User Satisfaction",
|
|
description: "Highly rated",
|
|
icon: ThumbsUp,
|
|
},
|
|
{
|
|
id: "m3",
|
|
value: "20x",
|
|
title: "Faster Workflow",
|
|
description: "Compared to CAD",
|
|
icon: Zap,
|
|
},
|
|
]}
|
|
title="Design Performance Metrics"
|
|
description="See the impact of our AI-driven design engine."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "t1",
|
|
name: "Sarah Ahmed",
|
|
role: "Property Investor",
|
|
company: "Global Homes",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-middle-aged-businesswoman_23-2148204386.jpg",
|
|
},
|
|
{
|
|
id: "t2",
|
|
name: "Khalid Al-Mulla",
|
|
role: "Villa Owner",
|
|
company: "Self-Built",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-handsome-man-spectacles_1303-14468.jpg",
|
|
},
|
|
{
|
|
id: "t3",
|
|
name: "Laila Noor",
|
|
role: "Architecture Student",
|
|
company: "Design Academy",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/smile-woman-talking-phone-looking-camera_23-2148317284.jpg",
|
|
},
|
|
{
|
|
id: "t4",
|
|
name: "Omar Saeed",
|
|
role: "Developer",
|
|
company: "Saeed Realty",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-business-man-posing-with-crossed-arms_23-2149206526.jpg",
|
|
},
|
|
{
|
|
id: "t5",
|
|
name: "Mariam Ali",
|
|
role: "Interior Designer",
|
|
company: "Studio M",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-working-business-with-computer_482257-20185.jpg",
|
|
},
|
|
]}
|
|
title="Loved by Homeowners"
|
|
description="Join thousands who successfully built their dream spaces."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqBase
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "q1",
|
|
title: "Is the design truly realistic?",
|
|
content: "Yes, our engine uses advanced ray tracing for accurate lighting and dimensions.",
|
|
},
|
|
{
|
|
id: "q2",
|
|
title: "Can I export my designs?",
|
|
content: "Absolutely, all designs can be exported as printable architectural blueprints.",
|
|
},
|
|
{
|
|
id: "q3",
|
|
title: "Do I need engineering skills?",
|
|
content: "Not at all, the platform is designed to be used by everyone.",
|
|
},
|
|
]}
|
|
title="Common Questions"
|
|
description="Everything you need to know about ArchitectAI."
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
useInvertedBackground={false}
|
|
title="Start Your Design Journey"
|
|
description="Have questions? Our support team is ready to help you."
|
|
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 about your project vision...",
|
|
rows: 4,
|
|
}}
|
|
imageSrc="http://img.b2bpic.net/free-photo/blue-neon-lines-like-digital-waves-neon-geometry_169016-71495.jpg"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterMedia
|
|
imageSrc="http://img.b2bpic.net/free-photo/hallway-building_23-2149397562.jpg"
|
|
logoText="ArchitectAI"
|
|
columns={[
|
|
{
|
|
title: "Product",
|
|
items: [
|
|
{
|
|
label: "Designs",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "Features",
|
|
href: "#",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Support",
|
|
items: [
|
|
{
|
|
label: "FAQ",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "Contact",
|
|
href: "#",
|
|
},
|
|
],
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|