Merge version_1 into main #1
364
src/app/page.tsx
364
src/app/page.tsx
@@ -17,265 +17,129 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="bounce-effect"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "About",
|
||||
id: "#about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "#services",
|
||||
},
|
||||
{
|
||||
name: "Testimonials",
|
||||
id: "#testimonials",
|
||||
},
|
||||
{
|
||||
name: "FAQ",
|
||||
id: "#faq",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "#contact",
|
||||
},
|
||||
]}
|
||||
brandName="Future City"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "About", id: "#about" },
|
||||
{ name: "Services", id: "#services" },
|
||||
{ name: "Testimonials", id: "#testimonials" },
|
||||
{ name: "FAQ", id: "#faq" },
|
||||
{ name: "Contact", id: "#contact" },
|
||||
]}
|
||||
brandName="Future City"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitKpi
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Building the Future of City Living."
|
||||
description="Future City delivers world-class architectural design and construction services tailored to your specific community and vision."
|
||||
kpis={[
|
||||
{
|
||||
value: "15+",
|
||||
label: "Years Experience",
|
||||
},
|
||||
{
|
||||
value: "500+",
|
||||
label: "Projects Completed",
|
||||
},
|
||||
{
|
||||
value: "98%",
|
||||
label: "Client Satisfaction",
|
||||
},
|
||||
]}
|
||||
enableKpiAnimation={true}
|
||||
buttons={[
|
||||
{
|
||||
text: "Start Project",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
imageSrc="https://pixabay.com/get/g8841ec0db8b0e3ea8b6b3d7df9d8c27aa0f300256f5ff32578d9875c6fd25c577678c6f69807a64b61c8f6edcd8e29f97fd0db2ab4c7c0ba7e7b6c3d5e49564e_1280.jpg"
|
||||
mediaAnimation="blur-reveal"
|
||||
avatars={[
|
||||
{
|
||||
src: "https://pixabay.com/get/g04923bf952de1ee351733ba5a9f7728fcf0bc8964615d36ce63c8864bc61272255ebab82a991e52c1c220b0d6531b7e986a2a8006a8d48754c4d0025ba4d87c2_1280.jpg",
|
||||
alt: "Client 1",
|
||||
},
|
||||
{
|
||||
src: "https://pixabay.com/get/gc44cd726284da651e093f30e2f463e25e2073d529860e4ee7a000678622f02797187f57bd7611950c08c04a8b580369a334d5169073c306de4b506b02d93df14_1280.jpg",
|
||||
alt: "Client 2",
|
||||
},
|
||||
{
|
||||
src: "https://pixabay.com/get/gedd0efc5a877e3183d360fce1e88ab60ee22bf134934b338ecc855dc5ffdfedc1961a8e66d9a178148dd0b30cc1014b706bec1dfebd6e2c5d5758172c4e36966_1280.jpg",
|
||||
alt: "Client 3",
|
||||
},
|
||||
{
|
||||
src: "https://pixabay.com/get/g0e86240881f675fa45e578b3d2e72ac2936dfa583374ab8a0894ca91baa9a64e3451f2c2104ec4891b080ec58b9575788fa0c1b00a2a757db296e460ec82f570_1280.jpg",
|
||||
alt: "Client 4",
|
||||
},
|
||||
{
|
||||
src: "https://pixabay.com/get/g3fd310345dd80c78aea199fb72b1704d3cd3462ce787800f716263e5803713598f57e65f3a04f96115fcb0dd267edbb4ff7655304befa7c73b5c3224090aae54_1280.jpg",
|
||||
alt: "Client 5",
|
||||
},
|
||||
]}
|
||||
avatarText="Trusted by 500+ satisfied homeowners and business partners"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Sustainable Building",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Architectural Integrity",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Modern Infrastructure",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Urban Renewal",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Reliable Construction",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitKpi
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Building the Future of City Living."
|
||||
description="Future City delivers world-class architectural design and construction services tailored to your specific community and vision."
|
||||
kpis={[
|
||||
{ value: "15+", label: "Years Experience" },
|
||||
{ value: "500+", label: "Projects Completed" },
|
||||
{ value: "98%", label: "Client Satisfaction" },
|
||||
]}
|
||||
enableKpiAnimation={true}
|
||||
buttons={[{ text: "Start Project", href: "#contact" }]}
|
||||
imageSrc="https://pixabay.com/get/g8841ec0db8b0e3ea8b6b3d7df9d8c27aa0f300256f5ff32578d9875c6fd25c577678c6f69807a64b61c8f6edcd8e29f97fd0db2ab4c7c0ba7e7b6c3d5e49564e_1280.jpg"
|
||||
mediaAnimation="blur-reveal"
|
||||
avatars={[
|
||||
{ src: "https://pixabay.com/get/g04923bf952de1ee351733ba5a9f7728fcf0bc8964615d36ce63c8864bc61272255ebab82a991e52c1c220b0d6531b7e986a2a8006a8d48754c4d0025ba4d87c2_1280.jpg", alt: "Client 1" },
|
||||
{ src: "https://pixabay.com/get/gc44cd726284da651e093f30e2f463e25e2073d529860e4ee7a000678622f02797187f57bd7611950c08c04a8b580369a334d5169073c306de4b506b02d93df14_1280.jpg", alt: "Client 2" },
|
||||
{ src: "https://pixabay.com/get/gedd0efc5a877e3183d360fce1e88ab60ee22bf134934b338ecc855dc5ffdfedc1961a8e66d9a178148dd0b30cc1014b706bec1dfebd6e2c5d5758172c4e36966_1280.jpg", alt: "Client 3" },
|
||||
{ src: "https://pixabay.com/get/g0e86240881f675fa45e578b3d2e72ac2936dfa583374ab8a0894ca91baa9a64e3451f2c2104ec4891b080ec58b9575788fa0c1b00a2a757db296e460ec82f570_1280.jpg", alt: "Client 4" },
|
||||
{ src: "https://pixabay.com/get/g3fd310345dd80c78aea199fb72b1704d3cd3462ce787800f716263e5803713598f57e65f3a04f96115fcb0dd267edbb4ff7655304befa7c73b5c3224090aae54_1280.jpg", alt: "Client 5" },
|
||||
]}
|
||||
avatarText="Trusted by 500+ satisfied homeowners and business partners"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextAbout
|
||||
useInvertedBackground={true}
|
||||
title="Excellence in Every Brick."
|
||||
buttons={[
|
||||
{
|
||||
text: "Our Approach",
|
||||
href: "#services",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TextAbout
|
||||
useInvertedBackground={true}
|
||||
title="Excellence in Every Brick."
|
||||
buttons={[{ text: "Our Approach", href: "#services" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Residential Development",
|
||||
description: "Creating custom living spaces that define style and comfort.",
|
||||
imageSrc: "https://pixabay.com/get/gc7f1e0aa731da28e190529f5e9d349745816572771bcead1b028f0230d29bfc7dcaae5a44a5334c0e3b998c964f60201940458f00a7ceab84411620bcac270b0_1280.jpg",
|
||||
},
|
||||
{
|
||||
title: "Commercial Infrastructure",
|
||||
description: "Constructing durable business hubs designed for modern workflows.",
|
||||
imageSrc: "https://pixabay.com/get/g8e29d5f54d18372914dbbb070aa0c61a60790e5af1ff52ce0d693ed72e14fcdc54be626eb7efbe51a765e81ac426f88e58761e0604835c84f25d6cc8167e3893_1280.jpg",
|
||||
},
|
||||
{
|
||||
title: "Renovation and Design",
|
||||
description: "Revitalizing aging spaces with sustainable modern standards.",
|
||||
imageSrc: "https://pixabay.com/get/g556e632cac4527406a7cdf0d24d99c1cd9342b14ad47881ee00d53d54a72c50727a9b8e4e3e97b633d1be29a4cc15b8a80fd7cdae934f92185e9c5026a7fa5f3_1280.jpg",
|
||||
},
|
||||
]}
|
||||
title="Our Specialized Building Services"
|
||||
description="From foundation to final finishes, we provide a full suite of construction and development solutions."
|
||||
/>
|
||||
</div>
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ title: "Residential Development", description: "Creating custom living spaces that define style and comfort.", imageSrc: "https://pixabay.com/get/gc7f1e0aa731da28e190529f5e9d349745816572771bcead1b028f0230d29bfc7dcaae5a44a5334c0e3b998c964f60201940458f00a7ceab84411620bcac270b0_1280.jpg" },
|
||||
{ title: "Commercial Infrastructure", description: "Constructing durable business hubs designed for modern workflows.", imageSrc: "https://pixabay.com/get/g8e29d5f54d18372914dbbb070aa0c61a60790e5af1ff52ce0d693ed72e14fcdc54be626eb7efbe51a765e81ac426f88e58761e0604835c84f25d6cc8167e3893_1280.jpg" },
|
||||
{ title: "Renovation and Design", description: "Revitalizing aging spaces with sustainable modern standards.", imageSrc: "https://pixabay.com/get/g556e632cac4527406a7cdf0d24d99c1cd9342b14ad47881ee00d53d54a72c50727a9b8e4e3e97b633d1be29a4cc15b8a80fd7cdae934f92185e9c5026a7fa5f3_1280.jpg" },
|
||||
]}
|
||||
title="Our Specialized Building Services"
|
||||
description="From foundation to final finishes, we provide a full suite of construction and development solutions."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSix
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah Miller",
|
||||
handle: "@smiller",
|
||||
testimonial: "Future City turned my vision into a beautiful reality on schedule.",
|
||||
imageSrc: "https://pixabay.com/get/g04923bf952de1ee351733ba5a9f7728fcf0bc8964615d36ce63c8864bc61272255ebab82a991e52c1c220b0d6531b7e986a2a8006a8d48754c4d0025ba4d87c2_1280.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "James Chen",
|
||||
handle: "@jchen",
|
||||
testimonial: "Exceptional communication and attention to architectural detail.",
|
||||
imageSrc: "https://pixabay.com/get/gc44cd726284da651e093f30e2f463e25e2073d529860e4ee7a000678622f02797187f57bd7611950c08c04a8b580369a334d5169073c306de4b506b02d93df14_1280.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Anna Kowalski",
|
||||
handle: "@akowalski",
|
||||
testimonial: "The renovation project was handled with utmost professionalism.",
|
||||
imageSrc: "https://pixabay.com/get/gedd0efc5a877e3183d360fce1e88ab60ee22bf134934b338ecc855dc5ffdfedc1961a8e66d9a178148dd0b30cc1014b706bec1dfebd6e2c5d5758172c4e36966_1280.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "David Smith",
|
||||
handle: "@dsmith",
|
||||
testimonial: "Reliable construction firm with a great eye for modern design.",
|
||||
imageSrc: "https://pixabay.com/get/g0e86240881f675fa45e578b3d2e72ac2936dfa583374ab8a0894ca91baa9a64e3451f2c2104ec4891b080ec58b9575788fa0c1b00a2a757db296e460ec82f570_1280.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Elena Rodriguez",
|
||||
handle: "@erodriguez",
|
||||
testimonial: "They built our office space perfectly. Highly recommended.",
|
||||
imageSrc: "https://pixabay.com/get/g3fd310345dd80c78aea199fb72b1704d3cd3462ce787800f716263e5803713598f57e65f3a04f96115fcb0dd267edbb4ff7655304befa7c73b5c3224090aae54_1280.jpg",
|
||||
},
|
||||
]}
|
||||
title="What Our Clients Say"
|
||||
description="Trusted by home owners and business leaders alike."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSix
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Sarah Miller", handle: "@smiller", testimonial: "Future City turned my vision into a beautiful reality on schedule.", imageSrc: "https://pixabay.com/get/g04923bf952de1ee351733ba5a9f7728fcf0bc8964615d36ce63c8864bc61272255ebab82a991e52c1c220b0d6531b7e986a2a8006a8d48754c4d0025ba4d87c2_1280.jpg" },
|
||||
{ id: "2", name: "James Chen", handle: "@jchen", testimonial: "Exceptional communication and attention to architectural detail.", imageSrc: "https://pixabay.com/get/gc44cd726284da651e093f30e2f463e25e2073d529860e4ee7a000678622f02797187f57bd7611950c08c04a8b580369a334d5169073c306de4b506b02d93df14_1280.jpg" },
|
||||
{ id: "3", name: "Anna Kowalski", handle: "@akowalski", testimonial: "The renovation project was handled with utmost professionalism.", imageSrc: "https://pixabay.com/get/gedd0efc5a877e3183d360fce1e88ab60ee22bf134934b338ecc855dc5ffdfedc1961a8e66d9a178148dd0b30cc1014b706bec1dfebd6e2c5d5758172c4e36966_1280.jpg" },
|
||||
{ id: "4", name: "David Smith", handle: "@dsmith", testimonial: "Reliable construction firm with a great eye for modern design.", imageSrc: "https://pixabay.com/get/g0e86240881f675fa45e578b3d2e72ac2936dfa583374ab8a0894ca91baa9a64e3451f2c2104ec4891b080ec58b9575788fa0c1b00a2a757db296e460ec82f570_1280.jpg" },
|
||||
{ id: "5", name: "Elena Rodriguez", handle: "@erodriguez", testimonial: "They built our office space perfectly. Highly recommended.", imageSrc: "https://pixabay.com/get/g3fd310345dd80c78aea199fb72b1704d3cd3462ce787800f716263e5803713598f57e65f3a04f96115fcb0dd267edbb4ff7655304befa7c73b5c3224090aae54_1280.jpg" },
|
||||
]}
|
||||
title="What Our Clients Say"
|
||||
description="Trusted by home owners and business leaders alike."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "How long does a project take?",
|
||||
content: "Timelines depend on complexity but we provide clear milestones.",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Do you handle permits?",
|
||||
content: "Yes, we handle all necessary building permits and inspections.",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Are your materials sustainable?",
|
||||
content: "We prioritize high-quality, long-lasting, sustainable materials.",
|
||||
},
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Find answers to the most common queries about our process."
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "1", title: "How long does a project take?", content: "Timelines depend on complexity but we provide clear milestones." },
|
||||
{ id: "2", title: "Do you handle permits?", content: "Yes, we handle all necessary building permits and inspections." },
|
||||
{ id: "3", title: "Are your materials sustainable?", content: "We prioritize high-quality, long-lasting, sustainable materials." },
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Find answers to the most common queries about our process."
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={true}
|
||||
title="Start Your Project"
|
||||
description="Ready to build with Future City? Contact us today for a consultation."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Your Name",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Email Address",
|
||||
required: true,
|
||||
},
|
||||
]}
|
||||
imageSrc="https://pixabay.com/get/gf583c710a934a4be4bab70d51d81222c6c3bf9dc103d9291c5c3aaec31b315a70a0b7b9036fb4968a8cebb1a39f44ac6a02319a2dd2eca3d52080cdac703558d_1280.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={true}
|
||||
title="Start Your Project"
|
||||
description="Ready to build with Future City? Contact us today for a consultation."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Your Name", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Email Address", required: true },
|
||||
]}
|
||||
imageSrc="https://pixabay.com/get/gf583c710a934a4be4bab70d51d81222c6c3bf9dc103d9291c5c3aaec31b315a70a0b7b9036fb4968a8cebb1a39f44ac6a02319a2dd2eca3d52080cdac703558d_1280.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="Future City"
|
||||
leftLink={{
|
||||
text: "Privacy Policy",
|
||||
href: "#",
|
||||
}}
|
||||
rightLink={{
|
||||
text: "Terms of Service",
|
||||
href: "#",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="Future City"
|
||||
leftLink={{ text: "Privacy Policy", href: "#" }}
|
||||
rightLink={{ text: "Terms of Service", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user