Merge version_1 into main #1
439
src/app/page.tsx
439
src/app/page.tsx
@@ -27,335 +27,130 @@ export default function LandingPage() {
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "PORTFOLIO",
|
||||
id: "#portfolio",
|
||||
},
|
||||
{
|
||||
name: "ARCHITECT",
|
||||
id: "#about",
|
||||
},
|
||||
{
|
||||
name: "METRICS",
|
||||
id: "#metrics",
|
||||
},
|
||||
{
|
||||
name: "CONNECT",
|
||||
id: "#contact",
|
||||
},
|
||||
]}
|
||||
brandName="ARCH-2026"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "PORTFOLIO", id: "#portfolio" },
|
||||
{ name: "ARCHITECT", id: "#about" },
|
||||
{ name: "METRICS", id: "#metrics" },
|
||||
{ name: "CONNECT", id: "#contact" },
|
||||
]}
|
||||
brandName="ARCH-2026"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCentered
|
||||
background="canvas-reveal"
|
||||
title="PORTFOLIO 2026"
|
||||
description="Technically advanced vision for the future of architectural parametric design."
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/smiling-mechanic-standing-repair-shop_1170-1349.jpg",
|
||||
alt: "Design Critic",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/satisfied-executive-with-tie_1098-2130.jpg",
|
||||
alt: "Urban Planner",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-handsome-bearded-man-with-ear-bandage-art-studio_23-2149705903.jpg",
|
||||
alt: "Design Director",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/female-electrician-helmet-watches-control-panel-close-up-safety-portrait_169016-71113.jpg",
|
||||
alt: "Structural Engineer",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/people-showing-support-respect-with-yellow-background-suicide-prevention-day_23-2151607962.jpg",
|
||||
alt: "Lead Consultant",
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "EXPLORE PROJECTS",
|
||||
href: "#portfolio",
|
||||
},
|
||||
]}
|
||||
buttonAnimation="blur-reveal"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "PARAMETRIC DESIGN",
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "STRUCTURAL INTEGRITY",
|
||||
icon: Shield,
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "DIGITAL ARCHITECTURE",
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "PRECISION MODELING",
|
||||
icon: Zap,
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "SUSTAINABLE FUTURES",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCentered
|
||||
background={{ variant: "canvas-reveal" }}
|
||||
title="PORTFOLIO 2026"
|
||||
description="Technically advanced vision for the future of architectural parametric design."
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/smiling-mechanic-standing-repair-shop_1170-1349.jpg", alt: "Design Critic" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/satisfied-executive-with-tie_1098-2130.jpg", alt: "Urban Planner" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/portrait-handsome-bearded-man-with-ear-bandage-art-studio_23-2149705903.jpg", alt: "Design Director" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/female-electrician-helmet-watches-control-panel-close-up-safety-portrait_169016-71113.jpg", alt: "Structural Engineer" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/people-showing-support-respect-with-yellow-background-suicide-prevention-day_23-2151607962.jpg", alt: "Lead Consultant" },
|
||||
]}
|
||||
buttons={[{ text: "EXPLORE PROJECTS", href: "#portfolio" }]}
|
||||
buttonAnimation="blur-reveal"
|
||||
marqueeItems={[
|
||||
{ type: "text", text: "PARAMETRIC DESIGN" },
|
||||
{ type: "text-icon", text: "STRUCTURAL INTEGRITY", icon: Shield },
|
||||
{ type: "text", text: "DIGITAL ARCHITECTURE" },
|
||||
{ type: "text-icon", text: "PRECISION MODELING", icon: Zap },
|
||||
{ type: "text", text: "SUSTAINABLE FUTURES" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<MetricSplitMediaAbout
|
||||
useInvertedBackground={false}
|
||||
title="The Digital Monolith"
|
||||
description="Fusion of parametric intelligence and high-tech minimalism, where every line is a calculation."
|
||||
metrics={[
|
||||
{
|
||||
value: "20+",
|
||||
title: "Projects Completed",
|
||||
},
|
||||
{
|
||||
value: "1.2k",
|
||||
title: "Calculated Points",
|
||||
},
|
||||
{
|
||||
value: "8+",
|
||||
title: "Global Awards",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/medium-shot-architect-posing-his-office_23-2148242945.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<MetricSplitMediaAbout
|
||||
useInvertedBackground={false}
|
||||
title="The Digital Monolith"
|
||||
description="Fusion of parametric intelligence and high-tech minimalism, where every line is a calculation."
|
||||
metrics={[
|
||||
{ value: "20+", title: "Projects Completed" },
|
||||
{ value: "1.2k", title: "Calculated Points" },
|
||||
{ value: "8+", title: "Global Awards" },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/medium-shot-architect-posing-his-office_23-2148242945.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="portfolio" data-section="portfolio">
|
||||
<ProductCardTwo
|
||||
textboxLayout="split"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
brand: "Parametric",
|
||||
name: "Lumina Facade",
|
||||
price: "Precision",
|
||||
rating: 5,
|
||||
reviewCount: "2026",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/futuristic-store-with-abstract-concept-architecture_23-2150862174.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
brand: "Structural",
|
||||
name: "Steel Canopy",
|
||||
price: "Analysis",
|
||||
rating: 5,
|
||||
reviewCount: "2026",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-building-with-exterior-frame_1127-2190.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
brand: "Internal",
|
||||
name: "Concrete Flow",
|
||||
price: "Minimal",
|
||||
rating: 5,
|
||||
reviewCount: "2026",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/trendy-coffee-shop-city_53876-14311.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
brand: "Urban",
|
||||
name: "Cloud Structure",
|
||||
price: "Futuristic",
|
||||
rating: 5,
|
||||
reviewCount: "2026",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/architectural-blueprints_1359-432.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
brand: "Technical",
|
||||
name: "Site Blueprint",
|
||||
price: "Topology",
|
||||
rating: 5,
|
||||
reviewCount: "2026",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cross-stitch-pattern_23-2148145905.jpg",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
brand: "Concept",
|
||||
name: "Parametric Shell",
|
||||
price: "Innovation",
|
||||
rating: 5,
|
||||
reviewCount: "2026",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/grayscale-photo-building_250224-215.jpg",
|
||||
},
|
||||
]}
|
||||
title="Featured Projects"
|
||||
description="A collection of parametric explorations and structural innovations."
|
||||
/>
|
||||
</div>
|
||||
<div id="portfolio" data-section="portfolio">
|
||||
<ProductCardTwo
|
||||
textboxLayout="split"
|
||||
gridVariant="bento-grid"
|
||||
animationType="blur-reveal"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{ id: "1", brand: "Parametric", name: "Lumina Facade", price: "Precision", rating: 5, reviewCount: "2026", imageSrc: "http://img.b2bpic.net/free-photo/futuristic-store-with-abstract-concept-architecture_23-2150862174.jpg" },
|
||||
{ id: "2", brand: "Structural", name: "Steel Canopy", price: "Analysis", rating: 5, reviewCount: "2026", imageSrc: "http://img.b2bpic.net/free-photo/abstract-building-with-exterior-frame_1127-2190.jpg" },
|
||||
{ id: "3", brand: "Internal", name: "Concrete Flow", price: "Minimal", rating: 5, reviewCount: "2026", imageSrc: "http://img.b2bpic.net/free-photo/trendy-coffee-shop-city_53876-14311.jpg" },
|
||||
]}
|
||||
title="Featured Projects"
|
||||
description="A collection of parametric explorations and structural innovations."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardOne
|
||||
animationType="depth-3d"
|
||||
textboxLayout="split"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "99.9%",
|
||||
title: "Structural Precision",
|
||||
description: "Calculated structural stability ratings.",
|
||||
icon: Shield,
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "450h",
|
||||
title: "Design Time",
|
||||
description: "Hours spent on parametric optimization.",
|
||||
icon: Zap,
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "0.5pt",
|
||||
title: "Line Thickness",
|
||||
description: "Precision line weights in blueprints.",
|
||||
icon: Sparkles,
|
||||
},
|
||||
]}
|
||||
title="Precision Metrics"
|
||||
description="Technical specifications and architectural standards upheld."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardOne
|
||||
animationType="depth-3d"
|
||||
textboxLayout="split"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", value: "99.9%", title: "Structural Precision", description: "Calculated structural stability ratings.", icon: Shield },
|
||||
{ id: "m2", value: "450h", title: "Design Time", description: "Hours spent on parametric optimization.", icon: Zap },
|
||||
{ id: "m3", value: "0.5pt", title: "Line Thickness", description: "Precision line weights in blueprints.", icon: Sparkles },
|
||||
]}
|
||||
title="Precision Metrics"
|
||||
description="Technical specifications and architectural standards upheld."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
animationType="depth-3d"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah Johnson",
|
||||
role: "Design Critic",
|
||||
testimonial: "Extreme precision and high-tech minimalist mastery.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-mechanic-standing-repair-shop_1170-1349.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Michael Chen",
|
||||
role: "Urban Planner",
|
||||
testimonial: "The architectural detail is simply visionary.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/satisfied-executive-with-tie_1098-2130.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Elena Rodriguez",
|
||||
role: "Growth Director",
|
||||
testimonial: "A digital monolith that redefines space.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-bearded-man-with-ear-bandage-art-studio_23-2149705903.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "David Kim",
|
||||
role: "Structural Lead",
|
||||
testimonial: "Parametric design at its most accurate form.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/female-electrician-helmet-watches-control-panel-close-up-safety-portrait_169016-71113.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Anna Smith",
|
||||
role: "Consultant",
|
||||
testimonial: "The future of architectural portfolios.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/people-showing-support-respect-with-yellow-background-suicide-prevention-day_23-2151607962.jpg",
|
||||
},
|
||||
]}
|
||||
title="Industry Resonance"
|
||||
description="Voices from the architects and visionaries shaping the industry."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
animationType="depth-3d"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Sarah Johnson", role: "Design Critic", testimonial: "Extreme precision and high-tech minimalist mastery.", imageSrc: "http://img.b2bpic.net/free-photo/smiling-mechanic-standing-repair-shop_1170-1349.jpg" },
|
||||
{ id: "2", name: "Michael Chen", role: "Urban Planner", testimonial: "The architectural detail is simply visionary.", imageSrc: "http://img.b2bpic.net/free-photo/satisfied-executive-with-tie_1098-2130.jpg" },
|
||||
{ id: "3", name: "Elena Rodriguez", role: "Growth Director", testimonial: "A digital monolith that redefines space.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-bearded-man-with-ear-bandage-art-studio_23-2149705903.jpg" },
|
||||
]}
|
||||
title="Industry Resonance"
|
||||
description="Voices from the architects and visionaries shaping the industry."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Initiate Protocol"
|
||||
description="Ready to discuss your next technical architectural vision?"
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Name",
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Email",
|
||||
},
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "Project Details / Vision",
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-vector/technology-futuristic-blue-design-with-earth_23-2148462412.jpg"
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Initiate Protocol"
|
||||
description="Ready to discuss your next technical architectural vision?"
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Name" },
|
||||
{ name: "email", type: "email", placeholder: "Email" },
|
||||
]}
|
||||
textarea={{ name: "message", placeholder: "Project Details / Vision" }}
|
||||
imageSrc="http://img.b2bpic.net/free-vector/technology-futuristic-blue-design-with-earth_23-2148462412.jpg"
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="ARCH-2026"
|
||||
columns={[
|
||||
{
|
||||
title: "Platform",
|
||||
items: [
|
||||
{
|
||||
label: "Portfolio",
|
||||
href: "#portfolio",
|
||||
},
|
||||
{
|
||||
label: "Method",
|
||||
href: "#about",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Global",
|
||||
items: [
|
||||
{
|
||||
label: "Twitter",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "LinkedIn",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="ARCH-2026"
|
||||
columns={[
|
||||
{ title: "Platform", items: [{ label: "Portfolio", href: "#portfolio" }, { label: "Method", href: "#about" }] },
|
||||
{ title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms", href: "#" }] },
|
||||
{ title: "Global", items: [{ label: "Twitter", href: "#" }, { label: "LinkedIn", href: "#" }] },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user