218 lines
9.4 KiB
TypeScript
218 lines
9.4 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
|
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
|
|
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
|
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
|
|
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import { CheckCircle, Globe, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-magnetic"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="pill"
|
|
contentWidth="mediumSmall"
|
|
sizing="mediumLargeSizeLargeTitles"
|
|
background="aurora"
|
|
cardStyle="layered-gradient"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="bold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
navItems={[
|
|
{
|
|
name: "Home", id: "hero"},
|
|
{
|
|
name: "Services", id: "services"},
|
|
{
|
|
name: "Process", id: "process"},
|
|
{
|
|
name: "Contact", id: "contact"},
|
|
]}
|
|
brandName="ARCVIZ"
|
|
button={{ text: "Start Now", href: "#contact" }}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroLogoBillboard
|
|
background={{
|
|
variant: "sparkles-gradient"}}
|
|
logoText="ARCVIZ STUDIOS"
|
|
description="A creative studio delivering exceptional design, architectural solutions, and digital experiences."
|
|
buttons={[
|
|
{
|
|
text: "Start a Project", href: "#contact"},
|
|
{
|
|
text: "View Portfolio", href: "#portfolio"},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/panoramic-views-dubai-city-illuminated-neon-spectrum_23-2151305368.jpg"
|
|
mediaAnimation="blur-reveal"
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardNine
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
features={[
|
|
{
|
|
title: "Digital Design", description: "3D renderings, architectural jury layouts, and visual presentations.", phoneOne: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CZqf4dj2i4cW5YGNwDr1n00fUI/uploaded-1776977480320-iypsmqkq.png" },
|
|
phoneTwo: { imageSrc: "http://img.b2bpic.net/free-vector/business-dashboard-user-panel_23-2148367849.jpg" },
|
|
},
|
|
{
|
|
title: "Architectural Design", description: "Concept development and precise working drawings.", phoneOne: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CZqf4dj2i4cW5YGNwDr1n00fUI/uploaded-1776977480320-d5x9gl0g.png" },
|
|
phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/architecture-plan-blueprint-layout-work-concept_53876-124263.jpg" },
|
|
},
|
|
{
|
|
title: "Tech & Product", description: "Full-stack development, UI/UX, and product experience design.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/still-life-tech-device_23-2150722711.jpg" },
|
|
phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/3d-geometric-abstract-background_1048-17507.jpg" },
|
|
},
|
|
]}
|
|
showStepNumbers={false}
|
|
title="Our Expertise"
|
|
description="Bridging the gap between physical architecture and digital experience."
|
|
/>
|
|
</div>
|
|
|
|
<div id="values" data-section="values">
|
|
<MetricCardOne
|
|
textboxLayout="split"
|
|
gridVariant="bento-grid"
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
metrics={[
|
|
{
|
|
id: "m1", value: "100%", title: "Custom Solutions", description: "Tailored to your needs.", icon: CheckCircle,
|
|
},
|
|
{
|
|
id: "m2", value: "Fast", title: "Turnaround", description: "Professional workflow efficiency.", icon: Zap,
|
|
},
|
|
{
|
|
id: "m3", value: "Global", title: "Presence", description: "Available for projects worldwide.", icon: Globe,
|
|
},
|
|
]}
|
|
title="Why Work With Us"
|
|
description="Precision and innovation at the core of everything."
|
|
/>
|
|
</div>
|
|
|
|
<div id="portfolio" data-section="portfolio">
|
|
<ProductCardFour
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
gridVariant="four-items-2x2-equal-grid"
|
|
useInvertedBackground={true}
|
|
products={[
|
|
{
|
|
id: "p1", name: "Modern Residential", price: "Architectural", variant: "Featured", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CZqf4dj2i4cW5YGNwDr1n00fUI/uploaded-1776977480320-iypsmqkq.png"},
|
|
{
|
|
id: "p2", name: "Urban Interface", price: "Web App", variant: "Featured", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CZqf4dj2i4cW5YGNwDr1n00fUI/uploaded-1776977480320-o75d8cjz.png"},
|
|
{
|
|
id: "p3", name: "Luxury Retail", price: "Interior", variant: "Featured", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CZqf4dj2i4cW5YGNwDr1n00fUI/uploaded-1776977480320-d5x9gl0g.png"},
|
|
{
|
|
id: "p4", name: "Tech Ecosystem", price: "UI/UX", variant: "Featured", imageSrc: "http://img.b2bpic.net/free-photo/person-controlling-house-light-using-smart-home-application-touching-screen-turn-it-by-mobile_482257-2842.jpg"},
|
|
]}
|
|
title="Selected Works"
|
|
description="Architectural renders and digital products built for scale."
|
|
/>
|
|
</div>
|
|
|
|
<div id="process" data-section="process">
|
|
<FeatureCardNine
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
features={[
|
|
{
|
|
title: "Discover", description: "We listen and understand your goals.", phoneOne: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CZqf4dj2i4cW5YGNwDr1n00fUI/uploaded-1776977480320-iypsmqkq.png" },
|
|
phoneTwo: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CZqf4dj2i4cW5YGNwDr1n00fUI/uploaded-1776977480320-o75d8cjz.png" },
|
|
},
|
|
{
|
|
title: "Design", description: "We craft tailored solutions that inspire.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/panoramic-views-dubai-city-illuminated-neon-spectrum_23-2151305368.jpg" },
|
|
phoneTwo: { imageSrc: "http://img.b2bpic.net/free-vector/business-dashboard-user-panel_23-2148367849.jpg" },
|
|
},
|
|
{
|
|
title: "Develop", description: "We build with precision.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/still-life-tech-device_23-2150722711.jpg" },
|
|
phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/3d-geometric-abstract-background_1048-17507.jpg" },
|
|
},
|
|
]}
|
|
showStepNumbers={true}
|
|
title="Our Process"
|
|
description="Discover, Design, Develop, Deliver."
|
|
/>
|
|
</div>
|
|
|
|
<div id="trust" data-section="trust">
|
|
<SocialProofOne
|
|
textboxLayout="split"
|
|
useInvertedBackground={true}
|
|
names={[
|
|
"Aera Bureau", "Koda", "Plank", "Yield", "Ether", "Kaze", "Obsidian"]}
|
|
title="Global Collaboration"
|
|
description="Remote & on-site collaboration available."
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
useInvertedBackground={false}
|
|
title="Let's Build Iconic"
|
|
description="Got a project in mind? Reach out today."
|
|
inputs={[
|
|
{
|
|
name: "name", type: "text", placeholder: "Your Name", required: true,
|
|
},
|
|
{
|
|
name: "email", type: "email", placeholder: "Your Email", required: true,
|
|
},
|
|
]}
|
|
textarea={{
|
|
name: "message", placeholder: "Tell us about your vision...", required: true,
|
|
}}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CZqf4dj2i4cW5YGNwDr1n00fUI/uploaded-1776977480320-iypsmqkq.png"
|
|
mediaPosition="right"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterMedia
|
|
imageSrc="http://img.b2bpic.net/free-photo/3d-geometric-abstract-background_1048-17507.jpg"
|
|
logoText="ARCVIZ"
|
|
columns={[
|
|
{
|
|
title: "Services", items: [
|
|
{
|
|
label: "Architecture", href: "#"},
|
|
{
|
|
label: "Design", href: "#"},
|
|
],
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{
|
|
label: "About", href: "#"},
|
|
{
|
|
label: "Portfolio", href: "#"},
|
|
],
|
|
},
|
|
]}
|
|
copyrightText="© 2025 ArcViz Studios | Your vision. Our obsession."
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|