|
|
|
@@ -2,15 +2,17 @@
|
|
|
|
|
|
|
|
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
|
|
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
|
|
|
|
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
|
|
|
|
import SplitAbout from '@/components/sections/about/SplitAbout';
|
|
|
|
import SplitAbout from '@/components/sections/about/SplitAbout';
|
|
|
|
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
|
|
|
|
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
|
|
|
|
|
|
|
|
import BlogCardThree from '@/components/sections/blog/BlogCardThree';
|
|
|
|
import MetricCardTen from '@/components/sections/metrics/MetricCardTen';
|
|
|
|
import MetricCardTen from '@/components/sections/metrics/MetricCardTen';
|
|
|
|
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
|
|
|
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
|
|
|
import ContactFaq from '@/components/sections/contact/ContactFaq';
|
|
|
|
import ContactFaq from '@/components/sections/contact/ContactFaq';
|
|
|
|
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
|
|
|
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
|
|
|
import { Building2, Eye, CheckCircle2, Palette, Users, MessageCircle, Sparkles, ArrowRightLeft, Cog, Footprints, Home, Zap, Shield, Hammer, Trees, Droplet, Frame, Lightbulb, Crown, Phone, Calendar } from 'lucide-react';
|
|
|
|
import { Building2, Eye, CheckCircle2, Palette, Users, MessageCircle, Sparkles, ArrowRightLeft, Cog, Footprints, Home, Zap, Shield, Hammer, Trees, Droplet, Frame, Lightbulb, Crown, Phone } from 'lucide-react';
|
|
|
|
import React, { useState } from 'react';
|
|
|
|
import React, { useState } from 'react';
|
|
|
|
|
|
|
|
import Link from 'next/link';
|
|
|
|
|
|
|
|
|
|
|
|
interface BeforeAfterImagePair {
|
|
|
|
interface BeforeAfterImagePair {
|
|
|
|
beforeSrc: string;
|
|
|
|
beforeSrc: string;
|
|
|
|
@@ -98,7 +100,7 @@ export default function LandingPage() {
|
|
|
|
secondaryButtonStyle="glass"
|
|
|
|
secondaryButtonStyle="glass"
|
|
|
|
headingFontWeight="bold"
|
|
|
|
headingFontWeight="bold"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<div id="nav" data-section="nav" className="fixed top-0 left-0 right-0 z-50">
|
|
|
|
<div id="nav" data-section="nav">
|
|
|
|
<NavbarStyleApple
|
|
|
|
<NavbarStyleApple
|
|
|
|
brandName="Taishan"
|
|
|
|
brandName="Taishan"
|
|
|
|
navItems={[
|
|
|
|
navItems={[
|
|
|
|
@@ -108,14 +110,11 @@ export default function LandingPage() {
|
|
|
|
{ name: "Process", id: "process" },
|
|
|
|
{ name: "Process", id: "process" },
|
|
|
|
{ name: "Contact", id: "contact" }
|
|
|
|
{ name: "Contact", id: "contact" }
|
|
|
|
]}
|
|
|
|
]}
|
|
|
|
button={{
|
|
|
|
|
|
|
|
text: "Book Appointment Now", href: "#contact"
|
|
|
|
|
|
|
|
}}
|
|
|
|
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div id="hero" data-section="hero" className="pt-20">
|
|
|
|
<div id="hero" data-section="hero">
|
|
|
|
<HeroBillboardCarousel
|
|
|
|
<HeroSplitDualMedia
|
|
|
|
title="Toronto's Trusted Interlock & Construction Specialists"
|
|
|
|
title="Toronto's Trusted Interlock & Construction Specialists"
|
|
|
|
description="Premium landscaping and construction services across the GTA. Designed with precision. Built to last."
|
|
|
|
description="Premium landscaping and construction services across the GTA. Designed with precision. Built to last."
|
|
|
|
tag="Luxury Construction"
|
|
|
|
tag="Luxury Construction"
|
|
|
|
@@ -127,24 +126,18 @@ export default function LandingPage() {
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-uklcyhsf.jpg?_wi=1", imageAlt: "Luxury construction detail"
|
|
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-uklcyhsf.jpg?_wi=1", imageAlt: "Luxury construction detail"
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-ok3joqnq.jpg?_wi=1", imageAlt: "Construction detail"
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-heyeujvs.jpg?_wi=1", imageAlt: "Project showcase"
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772751184333-vby3bqvq.png", imageAlt: "Taishan Gallery"
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
]}
|
|
|
|
]}
|
|
|
|
|
|
|
|
rating={5}
|
|
|
|
|
|
|
|
ratingText="1000+ Projects Completed"
|
|
|
|
buttons={[
|
|
|
|
buttons={[
|
|
|
|
{ text: "Get Your Free 3D Design", href: "#contact" },
|
|
|
|
{ text: "Get Your Free 3D Design", href: "#contact" },
|
|
|
|
{ text: "Visit Our Showroom", href: "#showroom" }
|
|
|
|
{ text: "Visit Our Showroom", href: "#showroom" }
|
|
|
|
]}
|
|
|
|
]}
|
|
|
|
buttonAnimation="slide-up"
|
|
|
|
buttonAnimation="slide-up"
|
|
|
|
|
|
|
|
mediaAnimation="slide-up"
|
|
|
|
tagAnimation="slide-up"
|
|
|
|
tagAnimation="slide-up"
|
|
|
|
containerClassName="max-w-full"
|
|
|
|
textBoxClassName="max-w-2xl"
|
|
|
|
titleClassName="text-5xl lg:text-6xl font-bold leading-tight tracking-tight"
|
|
|
|
titleClassName="text-5xl lg:text-6xl font-bold leading-tight tracking-tight"
|
|
|
|
descriptionClassName="text-lg lg:text-xl leading-relaxed"
|
|
|
|
descriptionClassName="text-lg lg:text-xl leading-relaxed"
|
|
|
|
tagClassName="inline-flex items-center gap-2 font-semibold uppercase tracking-wider"
|
|
|
|
tagClassName="inline-flex items-center gap-2 font-semibold uppercase tracking-wider"
|
|
|
|
@@ -153,9 +146,9 @@ export default function LandingPage() {
|
|
|
|
|
|
|
|
|
|
|
|
<div id="taishan-effect" data-section="taishan-effect">
|
|
|
|
<div id="taishan-effect" data-section="taishan-effect">
|
|
|
|
<SplitAbout
|
|
|
|
<SplitAbout
|
|
|
|
title="Why Choose Taishan"
|
|
|
|
title="The Taishan Effect"
|
|
|
|
description="Premium quality, professional service, and guaranteed satisfaction for every project."
|
|
|
|
description="Why homeowners choose Taishan Construction for their premium hardscape and construction projects."
|
|
|
|
tag="The Taishan Advantage"
|
|
|
|
tag="Why Choose Taishan"
|
|
|
|
tagAnimation="slide-up"
|
|
|
|
tagAnimation="slide-up"
|
|
|
|
textboxLayout="default"
|
|
|
|
textboxLayout="default"
|
|
|
|
useInvertedBackground={false}
|
|
|
|
useInvertedBackground={false}
|
|
|
|
@@ -163,13 +156,19 @@ export default function LandingPage() {
|
|
|
|
mediaAnimation="slide-up"
|
|
|
|
mediaAnimation="slide-up"
|
|
|
|
bulletPoints={[
|
|
|
|
bulletPoints={[
|
|
|
|
{
|
|
|
|
{
|
|
|
|
title: "6-Year Warranty", description: "Complete coverage and peace of mind on all materials and workmanship", icon: Shield
|
|
|
|
title: "Free 3D Project Visualization", description: "See your complete project before construction begins with our professional rendering service", icon: Eye
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
title: "10,000 sq ft Showroom", description: "Explore real samples and design options in person to make confident selections", icon: Building2
|
|
|
|
title: "Professional Project Planning", description: "Detailed timelines, material specifications, and structured installation processes", icon: CheckCircle2
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
title: "Free 3D Design Technology", description: "See your complete project before construction begins with professional renderings", icon: Eye
|
|
|
|
title: "Outdoor Material Showroom", description: "Explore real samples and design options in person to make confident material selections", icon: Palette
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
title: "Experienced Installation Teams", description: "Certified professionals with years of expertise in premium hardscape installation", icon: Users
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
title: "Clear Communication & Timelines", description: "Transparent updates throughout your project with professional project management", icon: MessageCircle
|
|
|
|
}
|
|
|
|
}
|
|
|
|
]}
|
|
|
|
]}
|
|
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-ok3joqnq.jpg?_wi=1"
|
|
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-ok3joqnq.jpg?_wi=1"
|
|
|
|
@@ -184,8 +183,8 @@ export default function LandingPage() {
|
|
|
|
|
|
|
|
|
|
|
|
<div id="3d-design" data-section="3d-design">
|
|
|
|
<div id="3d-design" data-section="3d-design">
|
|
|
|
<FeatureHoverPattern
|
|
|
|
<FeatureHoverPattern
|
|
|
|
title="Experience Breathtaking 3D Design Technology"
|
|
|
|
title="See Your Project Before We Build It"
|
|
|
|
description="Taishan Construction offers complimentary 3D project renderings with a custom client portal where you can view your design, track progress, and access project documents anytime, anywhere. Visualize your driveway, backyard, or porch before construction begins with crystal-clear photorealistic renderings."
|
|
|
|
description="Taishan Construction offers complimentary 3D project renderings so you can visualize your driveway, backyard, or porch before construction begins. This allows homeowners to make confident decisions before investing in their project."
|
|
|
|
tag="3D Design Technology"
|
|
|
|
tag="3D Design Technology"
|
|
|
|
tagIcon={Sparkles}
|
|
|
|
tagIcon={Sparkles}
|
|
|
|
tagAnimation="slide-up"
|
|
|
|
tagAnimation="slide-up"
|
|
|
|
@@ -194,10 +193,6 @@ export default function LandingPage() {
|
|
|
|
icon: Eye,
|
|
|
|
icon: Eye,
|
|
|
|
title: "Photorealistic Renderings", description: "Crystal-clear 3D visualizations showing materials, lighting, landscaping, and final details", button: { text: "Get Free 3D Design", href: "#contact" }
|
|
|
|
title: "Photorealistic Renderings", description: "Crystal-clear 3D visualizations showing materials, lighting, landscaping, and final details", button: { text: "Get Free 3D Design", href: "#contact" }
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
|
|
|
|
icon: Calendar,
|
|
|
|
|
|
|
|
title: "Custom Client Portal", description: "Access your project anytime with dedicated portal for designs, progress updates, and documentation"
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
{
|
|
|
|
icon: ArrowRightLeft,
|
|
|
|
icon: ArrowRightLeft,
|
|
|
|
title: "Before & After Comparisons", description: "Side-by-side views showing current property and your completed dream project transformation"
|
|
|
|
title: "Before & After Comparisons", description: "Side-by-side views showing current property and your completed dream project transformation"
|
|
|
|
@@ -213,79 +208,42 @@ export default function LandingPage() {
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div id="services" data-section="services">
|
|
|
|
<div id="services" data-section="services">
|
|
|
|
<div className="px-6 lg:px-12 py-16 lg:py-24">
|
|
|
|
<FeatureHoverPattern
|
|
|
|
<div className="max-w-7xl mx-auto">
|
|
|
|
title="Our Services"
|
|
|
|
<div className="mb-12">
|
|
|
|
description="Premium construction and landscaping services for Toronto and the Greater Toronto Area. Each project is crafted with precision and built to last."
|
|
|
|
<p className="text-sm font-semibold uppercase tracking-wider text-primary-cta mb-2">Complete Solutions</p>
|
|
|
|
tag="Complete Solutions"
|
|
|
|
<h2 className="text-4xl lg:text-5xl font-bold mb-4">Our Services</h2>
|
|
|
|
tagAnimation="slide-up"
|
|
|
|
<p className="text-lg text-foreground/80">Premium construction and landscaping services for Toronto and the Greater Toronto Area. Each project is crafted with precision and built to last.</p>
|
|
|
|
features={[
|
|
|
|
</div>
|
|
|
|
{
|
|
|
|
|
|
|
|
icon: Cog,
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
|
|
|
|
title: "Interlock Driveways", description: "Professional interlock paving with premium materials and expert installation"
|
|
|
|
{[
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "interlock", icon: Cog,
|
|
|
|
icon: Palette,
|
|
|
|
title: "Interlock Driveways", description: "Professional interlock paving with premium materials and expert installation"
|
|
|
|
title: "Backyard Patios", description: "Custom patio designs transforming outdoor living spaces into luxury retreats"
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "patios", icon: Palette,
|
|
|
|
icon: Footprints,
|
|
|
|
title: "Backyard Patios", description: "Custom patio designs transforming outdoor living spaces into luxury retreats"
|
|
|
|
title: "Walkways", description: "Decorative and functional pathways connecting your property with style"
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "walkways", icon: Footprints,
|
|
|
|
icon: Building2,
|
|
|
|
title: "Walkways", description: "Decorative and functional pathways connecting your property with style"
|
|
|
|
title: "Retaining Walls", description: "Structural and aesthetic walls for landscaping and property management"
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "retaining", icon: Building2,
|
|
|
|
icon: Home,
|
|
|
|
title: "Retaining Walls", description: "Structural and aesthetic walls for landscaping and property management"
|
|
|
|
title: "Natural Stone Porches", description: "Premium stone entry features creating impressive curb appeal"
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "porches", icon: Home,
|
|
|
|
icon: Zap,
|
|
|
|
title: "Natural Stone Porches", description: "Premium stone entry features creating impressive curb appeal"
|
|
|
|
title: "Landscape Lighting", description: "Professional outdoor lighting systems enhancing ambiance and security"
|
|
|
|
},
|
|
|
|
}
|
|
|
|
{
|
|
|
|
]}
|
|
|
|
id: "lighting", icon: Zap,
|
|
|
|
animationType="slide-up"
|
|
|
|
title: "Landscape Lighting", description: "Professional outdoor lighting systems enhancing ambiance and security"
|
|
|
|
textboxLayout="default"
|
|
|
|
}
|
|
|
|
useInvertedBackground={false}
|
|
|
|
].map((service) => (
|
|
|
|
buttonAnimation="slide-up"
|
|
|
|
<div
|
|
|
|
/>
|
|
|
|
key={service.id}
|
|
|
|
|
|
|
|
className="relative group"
|
|
|
|
|
|
|
|
onMouseEnter={() => setServicesHoveredCard(service.id)}
|
|
|
|
|
|
|
|
onMouseLeave={() => setServicesHoveredCard(null)}
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<div className="p-6 rounded-lg border border-accent/20 bg-card hover:border-primary-cta/40 transition-all duration-300">
|
|
|
|
|
|
|
|
<service.icon className="w-8 h-8 text-primary-cta mb-4" />
|
|
|
|
|
|
|
|
<h3 className="text-xl font-semibold mb-2">{service.title}</h3>
|
|
|
|
|
|
|
|
<p className="text-foreground/70 text-sm">{service.description}</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
{servicesHoveredCard === service.id && (
|
|
|
|
|
|
|
|
<div className="absolute inset-0 rounded-lg bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none">
|
|
|
|
|
|
|
|
<div className="text-center text-white p-4">
|
|
|
|
|
|
|
|
<p className="font-semibold">See examples of this service</p>
|
|
|
|
|
|
|
|
<p className="text-sm text-white/80">in our project gallery</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
)}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
))}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div className="bg-card rounded-lg p-8 border border-accent/20">
|
|
|
|
|
|
|
|
<h3 className="text-2xl font-bold mb-6">Interlock Driveway Showcase</h3>
|
|
|
|
|
|
|
|
<p className="text-foreground/80 mb-8">Hover over the slider to see our photorealistic 3D renderings compared to actual completed projects:</p>
|
|
|
|
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
|
|
|
|
|
|
{beforeAfterPairs.map((pair, index) => (
|
|
|
|
|
|
|
|
<BeforeAfterCard
|
|
|
|
|
|
|
|
key={index}
|
|
|
|
|
|
|
|
pair={pair}
|
|
|
|
|
|
|
|
isHovered={galleryHoveredCard === `service-${index}`}
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
))}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div id="gallery" data-section="gallery">
|
|
|
|
<div id="gallery" data-section="gallery">
|
|
|
|
@@ -453,7 +411,7 @@ export default function LandingPage() {
|
|
|
|
<div id="contact" data-section="contact">
|
|
|
|
<div id="contact" data-section="contact">
|
|
|
|
<ContactFaq
|
|
|
|
<ContactFaq
|
|
|
|
ctaTitle="Ready to Transform Your Property?"
|
|
|
|
ctaTitle="Ready to Transform Your Property?"
|
|
|
|
ctaDescription="Book a consultation and receive a free 3D preview of your project."
|
|
|
|
ctaDescription="Start your project with a free consultation and photorealistic 3D rendering."
|
|
|
|
ctaButton={{
|
|
|
|
ctaButton={{
|
|
|
|
text: "Get Free 3D Design", href: "mailto:info@taishanconstruction.com?subject=Free%203D%20Design%20Consultation"
|
|
|
|
text: "Get Free 3D Design", href: "mailto:info@taishanconstruction.com?subject=Free%203D%20Design%20Consultation"
|
|
|
|
}}
|
|
|
|
}}
|
|
|
|
|
