|
|
|
@@ -11,8 +11,82 @@ import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCar
|
|
|
|
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 } 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 Link from 'next/link';
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
interface BeforeAfterImagePair {
|
|
|
|
|
|
|
|
beforeSrc: string;
|
|
|
|
|
|
|
|
afterSrc: string;
|
|
|
|
|
|
|
|
title: string;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const BeforeAfterCard: React.FC<{
|
|
|
|
|
|
|
|
pair: BeforeAfterImagePair;
|
|
|
|
|
|
|
|
isHovered: boolean;
|
|
|
|
|
|
|
|
}> = ({ pair, isHovered }) => {
|
|
|
|
|
|
|
|
const [sliderPosition, setSliderPosition] = useState(50);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
|
|
|
|
|
|
|
|
const rect = e.currentTarget.getBoundingClientRect();
|
|
|
|
|
|
|
|
const newPosition = ((e.clientX - rect.left) / rect.width) * 100;
|
|
|
|
|
|
|
|
setSliderPosition(Math.max(0, Math.min(100, newPosition)));
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
|
|
|
<div
|
|
|
|
|
|
|
|
className="relative w-full h-64 rounded-lg overflow-hidden cursor-col-resize bg-gray-900"
|
|
|
|
|
|
|
|
onMouseMove={handleMouseMove}
|
|
|
|
|
|
|
|
onMouseLeave={() => setSliderPosition(50)}
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<div className="absolute inset-0">
|
|
|
|
|
|
|
|
<img
|
|
|
|
|
|
|
|
src={pair.afterSrc}
|
|
|
|
|
|
|
|
alt="After"
|
|
|
|
|
|
|
|
className="w-full h-full object-cover"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div
|
|
|
|
|
|
|
|
className="absolute inset-0 overflow-hidden"
|
|
|
|
|
|
|
|
style={{ width: `${sliderPosition}%` }}
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<img
|
|
|
|
|
|
|
|
src={pair.beforeSrc}
|
|
|
|
|
|
|
|
alt="Before"
|
|
|
|
|
|
|
|
className="w-full h-full object-cover"
|
|
|
|
|
|
|
|
style={{ width: `${(100 / sliderPosition) * 100}%` }}
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div
|
|
|
|
|
|
|
|
className="absolute top-0 bottom-0 w-1 bg-white shadow-lg transition-colors"
|
|
|
|
|
|
|
|
style={{ left: `${sliderPosition}%`, transform: 'translateX(-50%)' }}
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white rounded-full p-2 shadow-lg">
|
|
|
|
|
|
|
|
<ArrowRightLeft size={16} className="text-gray-900" />
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-3">
|
|
|
|
|
|
|
|
<p className="text-white text-sm font-semibold">{pair.title}</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
export default function LandingPage() {
|
|
|
|
export default function LandingPage() {
|
|
|
|
|
|
|
|
const [servicesHoveredCard, setServicesHoveredCard] = useState<string | null>(null);
|
|
|
|
|
|
|
|
const [galleryHoveredCard, setGalleryHoveredCard] = useState<string | null>(null);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const beforeAfterPairs: BeforeAfterImagePair[] = [
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
beforeSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-lbulq2e9.jpg?_wi=1", afterSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-uklcyhsf.jpg?_wi=1", title: "Rendering vs. Completed Project"
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
beforeSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-ok3joqnq.jpg?_wi=1", afterSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-heyeujvs.jpg?_wi=1", title: "3D Design to Reality"
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
beforeSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-uklcyhsf.jpg?_wi=2", afterSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-lbulq2e9.jpg?_wi=2", title: "Luxury Interlock Installation"
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<ThemeProvider
|
|
|
|
<ThemeProvider
|
|
|
|
defaultButtonVariant="text-stagger"
|
|
|
|
defaultButtonVariant="text-stagger"
|
|
|
|
@@ -28,7 +102,7 @@ export default function LandingPage() {
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<div id="nav" data-section="nav">
|
|
|
|
<div id="nav" data-section="nav">
|
|
|
|
<NavbarStyleApple
|
|
|
|
<NavbarStyleApple
|
|
|
|
brandName="Taishan Construction"
|
|
|
|
brandName="Taishan"
|
|
|
|
navItems={[
|
|
|
|
navItems={[
|
|
|
|
{ name: "Services", id: "services" },
|
|
|
|
{ name: "Services", id: "services" },
|
|
|
|
{ name: "Gallery", id: "gallery" },
|
|
|
|
{ name: "Gallery", id: "gallery" },
|
|
|
|
@@ -48,10 +122,10 @@ export default function LandingPage() {
|
|
|
|
background={{ variant: "plain" }}
|
|
|
|
background={{ variant: "plain" }}
|
|
|
|
mediaItems={[
|
|
|
|
mediaItems={[
|
|
|
|
{
|
|
|
|
{
|
|
|
|
imageSrc: "http://img.b2bpic.net/free-photo/natural-grass-close-up_23-2148858213.jpg?_wi=1", imageAlt: "Luxury interlock driveway installation"
|
|
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-lbulq2e9.jpg?_wi=1", imageAlt: "Premium project showcase"
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
imageSrc: "http://img.b2bpic.net/free-photo/old-woman-doing-fitness-exercises_23-2149565528.jpg", imageAlt: "Premium patio transformation"
|
|
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-uklcyhsf.jpg?_wi=1", imageAlt: "Luxury construction detail"
|
|
|
|
}
|
|
|
|
}
|
|
|
|
]}
|
|
|
|
]}
|
|
|
|
rating={5}
|
|
|
|
rating={5}
|
|
|
|
@@ -97,7 +171,7 @@ export default function LandingPage() {
|
|
|
|
title: "Clear Communication & Timelines", description: "Transparent updates throughout your project with professional project management", icon: MessageCircle
|
|
|
|
title: "Clear Communication & Timelines", description: "Transparent updates throughout your project with professional project management", icon: MessageCircle
|
|
|
|
}
|
|
|
|
}
|
|
|
|
]}
|
|
|
|
]}
|
|
|
|
imageSrc="http://img.b2bpic.net/free-photo/high-angle-clay-pieces-arrangement_23-2149480221.jpg?_wi=1"
|
|
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-ok3joqnq.jpg?_wi=1"
|
|
|
|
imageAlt="Material showroom display"
|
|
|
|
imageAlt="Material showroom display"
|
|
|
|
buttons={[{ text: "Start Your Project Plan", href: "#contact" }]}
|
|
|
|
buttons={[{ text: "Start Your Project Plan", href: "#contact" }]}
|
|
|
|
buttonAnimation="slide-up"
|
|
|
|
buttonAnimation="slide-up"
|
|
|
|
@@ -134,95 +208,147 @@ export default function LandingPage() {
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div id="services" data-section="services">
|
|
|
|
<div id="services" data-section="services">
|
|
|
|
<FeatureHoverPattern
|
|
|
|
<div className="px-6 lg:px-12 py-16 lg:py-24">
|
|
|
|
title="Our Services"
|
|
|
|
<div className="max-w-7xl mx-auto">
|
|
|
|
description="Premium construction and landscaping services for Toronto and the Greater Toronto Area. Each project is crafted with precision and built to last."
|
|
|
|
<div className="mb-12">
|
|
|
|
tag="Complete Solutions"
|
|
|
|
<p className="text-sm font-semibold uppercase tracking-wider text-primary-cta mb-2">Complete Solutions</p>
|
|
|
|
features={[
|
|
|
|
<h2 className="text-4xl lg:text-5xl font-bold mb-4">Our Services</h2>
|
|
|
|
{
|
|
|
|
<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>
|
|
|
|
icon: Cog,
|
|
|
|
</div>
|
|
|
|
title: "Interlock Driveways", description: "Professional interlock paving with premium materials and expert installation"
|
|
|
|
|
|
|
|
},
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
|
|
|
|
{
|
|
|
|
{[
|
|
|
|
icon: Palette,
|
|
|
|
{
|
|
|
|
title: "Backyard Patios", description: "Custom patio designs transforming outdoor living spaces into luxury retreats"
|
|
|
|
id: "interlock", icon: Cog,
|
|
|
|
},
|
|
|
|
title: "Interlock Driveways", description: "Professional interlock paving with premium materials and expert installation"
|
|
|
|
{
|
|
|
|
},
|
|
|
|
icon: Footprints,
|
|
|
|
{
|
|
|
|
title: "Walkways", description: "Decorative and functional pathways connecting your property with style"
|
|
|
|
id: "patios", icon: Palette,
|
|
|
|
},
|
|
|
|
title: "Backyard Patios", description: "Custom patio designs transforming outdoor living spaces into luxury retreats"
|
|
|
|
{
|
|
|
|
},
|
|
|
|
icon: Building2,
|
|
|
|
{
|
|
|
|
title: "Retaining Walls", description: "Structural and aesthetic walls for landscaping and property management"
|
|
|
|
id: "walkways", icon: Footprints,
|
|
|
|
},
|
|
|
|
title: "Walkways", description: "Decorative and functional pathways connecting your property with style"
|
|
|
|
{
|
|
|
|
},
|
|
|
|
icon: Home,
|
|
|
|
{
|
|
|
|
title: "Natural Stone Porches", description: "Premium stone entry features creating impressive curb appeal"
|
|
|
|
id: "retaining", icon: Building2,
|
|
|
|
},
|
|
|
|
title: "Retaining Walls", description: "Structural and aesthetic walls for landscaping and property management"
|
|
|
|
{
|
|
|
|
},
|
|
|
|
icon: Zap,
|
|
|
|
{
|
|
|
|
title: "Landscape Lighting", description: "Professional outdoor lighting systems enhancing ambiance and security"
|
|
|
|
id: "porches", icon: Home,
|
|
|
|
},
|
|
|
|
title: "Natural Stone Porches", description: "Premium stone entry features creating impressive curb appeal"
|
|
|
|
{
|
|
|
|
},
|
|
|
|
icon: Hammer,
|
|
|
|
{
|
|
|
|
title: "Decks", description: "Custom wooden decks designed for durability and aesthetic appeal"
|
|
|
|
id: "lighting", icon: Zap,
|
|
|
|
},
|
|
|
|
title: "Landscape Lighting", description: "Professional outdoor lighting systems enhancing ambiance and security"
|
|
|
|
{
|
|
|
|
}
|
|
|
|
icon: Shield,
|
|
|
|
].map((service) => (
|
|
|
|
title: "Fences", description: "Privacy fences and decorative fencing solutions for residential properties"
|
|
|
|
<div
|
|
|
|
},
|
|
|
|
key={service.id}
|
|
|
|
{
|
|
|
|
className="relative group"
|
|
|
|
icon: Trees,
|
|
|
|
onMouseEnter={() => setServicesHoveredCard(service.id)}
|
|
|
|
title: "Rock Beds & Landscaping", description: "Landscape design elements that enhance property value and curb appeal"
|
|
|
|
onMouseLeave={() => setServicesHoveredCard(null)}
|
|
|
|
},
|
|
|
|
>
|
|
|
|
{
|
|
|
|
<div className="p-6 rounded-lg border border-accent/20 bg-card hover:border-primary-cta/40 transition-all duration-300">
|
|
|
|
icon: Droplet,
|
|
|
|
<service.icon className="w-8 h-8 text-primary-cta mb-4" />
|
|
|
|
title: "Basement Waterproofing", description: "Professional waterproofing solutions protecting your foundation and home"
|
|
|
|
<h3 className="text-xl font-semibold mb-2">{service.title}</h3>
|
|
|
|
},
|
|
|
|
<p className="text-foreground/70 text-sm">{service.description}</p>
|
|
|
|
{
|
|
|
|
</div>
|
|
|
|
icon: Frame,
|
|
|
|
{servicesHoveredCard === service.id && (
|
|
|
|
title: "Interior Renovations", description: "Premium interior construction and renovation services for Toronto homes"
|
|
|
|
<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>
|
|
|
|
animationType="slide-up"
|
|
|
|
<p className="text-sm text-white/80">in our project gallery</p>
|
|
|
|
textboxLayout="default"
|
|
|
|
</div>
|
|
|
|
useInvertedBackground={false}
|
|
|
|
</div>
|
|
|
|
tagAnimation="slide-up"
|
|
|
|
)}
|
|
|
|
cardTitleClassName="text-5xl font-bold mb-4"
|
|
|
|
</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">
|
|
|
|
<BlogCardThree
|
|
|
|
<div className="px-6 lg:px-12 py-16 lg:py-24">
|
|
|
|
title="Project Gallery"
|
|
|
|
<div className="max-w-7xl mx-auto">
|
|
|
|
description="Explore our portfolio of premium hardscape and construction projects across the GTA."
|
|
|
|
<div className="mb-12">
|
|
|
|
tag="Portfolio Showcase"
|
|
|
|
<p className="text-sm font-semibold uppercase tracking-wider text-primary-cta mb-2">Portfolio Showcase</p>
|
|
|
|
tagAnimation="slide-up"
|
|
|
|
<h2 className="text-4xl lg:text-5xl font-bold mb-4">Project Gallery</h2>
|
|
|
|
blogs={[
|
|
|
|
<p className="text-lg text-foreground/80">Explore our portfolio of premium hardscape and construction projects across the GTA.</p>
|
|
|
|
{
|
|
|
|
</div>
|
|
|
|
id: "driveway-1", category: "Driveways", title: "Modern Interlock Driveway Transformation", excerpt: "Premium herringbone pattern interlock installation with integrated lighting", imageSrc: "http://img.b2bpic.net/free-photo/natural-grass-close-up_23-2148858213.jpg?_wi=2", imageAlt: "Modern interlock driveway", authorName: "Taishan Team", authorAvatar: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", date: "2024"
|
|
|
|
|
|
|
|
},
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
|
|
{
|
|
|
|
{[
|
|
|
|
id: "driveway-2", category: "Driveways", title: "Contemporary Driveway Design", excerpt: "Large format pavers with sophisticated layout and professional finishing", imageSrc: "http://img.b2bpic.net/free-photo/natural-grass-close-up_23-2148858213.jpg?_wi=3", imageAlt: "Contemporary driveway design", authorName: "Taishan Team", authorAvatar: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", date: "2024"
|
|
|
|
{
|
|
|
|
},
|
|
|
|
id: "project-1", title: "Luxury Residential Development", category: "Premium Projects", beforeSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-ok3joqnq.jpg?_wi=2", afterSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-lbulq2e9.jpg?_wi=2", description: "High-end construction showcasing precision craftsmanship and attention to detail"
|
|
|
|
{
|
|
|
|
},
|
|
|
|
id: "backyard-1", category: "Backyards", title: "Luxury Backyard Living Space", excerpt: "Complete outdoor renovation with patio, lighting, and landscaping", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-luxury-swimming-pool-with-palm-trees-thai-style-decoration_1258-111445.jpg?_wi=1", imageAlt: "Luxury backyard patio", authorName: "Taishan Team", authorAvatar: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", date: "2024"
|
|
|
|
{
|
|
|
|
},
|
|
|
|
id: "project-2", title: "Contemporary Hardscape Design", category: "Premium Projects", beforeSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-heyeujvs.jpg?_wi=2", afterSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-uklcyhsf.jpg?_wi=2", description: "Large format pavers with sophisticated layout and professional finishing"
|
|
|
|
{
|
|
|
|
},
|
|
|
|
id: "backyard-2", category: "Backyards", title: "Premium Patio Entertainment Area", excerpt: "Multi-level patio with integrated seating and ambient lighting design", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-luxury-swimming-pool-with-palm-trees-thai-style-decoration_1258-111445.jpg?_wi=2", imageAlt: "Premium patio area", authorName: "Taishan Team", authorAvatar: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", date: "2024"
|
|
|
|
{
|
|
|
|
},
|
|
|
|
id: "project-3", title: "Luxury Outdoor Living Space", category: "Premium Projects", beforeSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-lbulq2e9.jpg?_wi=3", afterSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-ok3joqnq.jpg?_wi=3", description: "Complete outdoor transformation with premium materials and expert installation"
|
|
|
|
{
|
|
|
|
},
|
|
|
|
id: "porch-1", category: "Porches", title: "Natural Stone Entry Porch", excerpt: "Custom stone work creating impressive curb appeal and property value", imageSrc: "http://img.b2bpic.net/free-photo/vintage-background-steps-turquoise-doors-ancient-architecture_169016-20034.jpg", imageAlt: "Natural stone porch entry", authorName: "Taishan Team", authorAvatar: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", date: "2024"
|
|
|
|
{
|
|
|
|
},
|
|
|
|
id: "project-4", title: "Premium Patio Entertainment Area", category: "Premium Projects", beforeSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-uklcyhsf.jpg?_wi=3", afterSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-heyeujvs.jpg?_wi=3", description: "Multi-level design with integrated features and ambient lighting"
|
|
|
|
{
|
|
|
|
},
|
|
|
|
id: "walkway-1", category: "Walkways", title: "Decorative Stone Walkway", excerpt: "Professional pathway installation enhancing property flow and design", imageSrc: "http://img.b2bpic.net/free-photo/stone-path-with-grass-growing-up_1137-86.jpg", imageAlt: "Stone walkway design", authorName: "Taishan Team", authorAvatar: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", date: "2024"
|
|
|
|
{
|
|
|
|
}
|
|
|
|
id: "project-5", title: "Natural Stone Entry Design", category: "Premium Projects", beforeSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-ok3joqnq.jpg?_wi=4", afterSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-uklcyhsf.jpg?_wi=4", description: "Custom stone work creating impressive curb appeal and property value"
|
|
|
|
]}
|
|
|
|
},
|
|
|
|
animationType="slide-up"
|
|
|
|
{
|
|
|
|
textboxLayout="default"
|
|
|
|
id: "project-6", title: "Professional Landscape Installation", category: "Premium Projects", beforeSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-lbulq2e9.jpg?_wi=4", afterSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-ok3joqnq.jpg?_wi=4", description: "Complete landscape design and installation enhancing property flow"
|
|
|
|
useInvertedBackground={false}
|
|
|
|
}
|
|
|
|
cardTitleClassName="text-5xl font-bold mb-4"
|
|
|
|
].map((project) => (
|
|
|
|
/>
|
|
|
|
<div
|
|
|
|
|
|
|
|
key={project.id}
|
|
|
|
|
|
|
|
className="group"
|
|
|
|
|
|
|
|
onMouseEnter={() => setGalleryHoveredCard(project.id)}
|
|
|
|
|
|
|
|
onMouseLeave={() => setGalleryHoveredCard(null)}
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<div className="rounded-lg overflow-hidden border border-accent/20">
|
|
|
|
|
|
|
|
{galleryHoveredCard === project.id ? (
|
|
|
|
|
|
|
|
<BeforeAfterCard
|
|
|
|
|
|
|
|
pair={{
|
|
|
|
|
|
|
|
beforeSrc: project.beforeSrc,
|
|
|
|
|
|
|
|
afterSrc: project.afterSrc,
|
|
|
|
|
|
|
|
title: project.title
|
|
|
|
|
|
|
|
}}
|
|
|
|
|
|
|
|
isHovered={true}
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
) : (
|
|
|
|
|
|
|
|
<div className="h-64 relative overflow-hidden">
|
|
|
|
|
|
|
|
<img
|
|
|
|
|
|
|
|
src={project.afterSrc}
|
|
|
|
|
|
|
|
alt={project.title}
|
|
|
|
|
|
|
|
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
<div className="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent p-4 flex flex-col justify-end">
|
|
|
|
|
|
|
|
<p className="text-xs text-white/70 mb-2">{project.category}</p>
|
|
|
|
|
|
|
|
<h3 className="text-lg font-semibold text-white">{project.title}</h3>
|
|
|
|
|
|
|
|
<p className="text-sm text-white/80 mt-2">{project.description}</p>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
)}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
))}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div id="showroom" data-section="showroom">
|
|
|
|
<div id="showroom" data-section="showroom">
|
|
|
|
@@ -249,7 +375,7 @@ export default function LandingPage() {
|
|
|
|
title: "Premium Product Selection", description: "Access to exclusive high-end materials and professional-grade landscape lighting", icon: Crown
|
|
|
|
title: "Premium Product Selection", description: "Access to exclusive high-end materials and professional-grade landscape lighting", icon: Crown
|
|
|
|
}
|
|
|
|
}
|
|
|
|
]}
|
|
|
|
]}
|
|
|
|
imageSrc="http://img.b2bpic.net/free-photo/high-angle-clay-pieces-arrangement_23-2149480221.jpg?_wi=2"
|
|
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-heyeujvs.jpg?_wi=1"
|
|
|
|
imageAlt="Material showroom samples and display"
|
|
|
|
imageAlt="Material showroom samples and display"
|
|
|
|
buttons={[{ text: "Book a Showroom Visit", href: "#contact" }]}
|
|
|
|
buttons={[{ text: "Book a Showroom Visit", href: "#contact" }]}
|
|
|
|
buttonAnimation="slide-up"
|
|
|
|
buttonAnimation="slide-up"
|
|
|
|
@@ -294,22 +420,22 @@ export default function LandingPage() {
|
|
|
|
tagAnimation="slide-up"
|
|
|
|
tagAnimation="slide-up"
|
|
|
|
testimonials={[
|
|
|
|
testimonials={[
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "1", title: "Complete Driveway Transformation", quote: "Taishan's team transformed our driveway into something spectacular. The 3D design preview was incredibly helpful, and the installation was professional from start to finish. Highly recommended for anyone in Toronto looking for premium hardscape work.", name: "Jennifer Chen", role: "Toronto Homeowner", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=1", imageAlt: "Jennifer Chen"
|
|
|
|
id: "1", title: "Complete Driveway Transformation", quote: "Taishan's team transformed our driveway into something spectacular. The 3D design preview was incredibly helpful, and the installation was professional from start to finish. Highly recommended for anyone in Toronto looking for premium hardscape work.", name: "Jennifer Chen", role: "Toronto Homeowner", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-heyeujvs.jpg?_wi=2", imageAlt: "Jennifer Chen"
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "2", title: "Outstanding Patio Project", quote: "We couldn't be happier with our new backyard patio. The team listened to our vision, created perfect 3D renderings, and delivered exactly what we envisioned. The attention to detail and timeline management were exceptional.", name: "Michael Rodriguez", role: "Vaughan Homeowner", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=2", imageAlt: "Michael Rodriguez"
|
|
|
|
id: "2", title: "Outstanding Patio Project", quote: "We couldn't be happier with our new backyard patio. The team listened to our vision, created perfect 3D renderings, and delivered exactly what we envisioned. The attention to detail and timeline management were exceptional.", name: "Michael Rodriguez", role: "Vaughan Homeowner", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-heyeujvs.jpg?_wi=3", imageAlt: "Michael Rodriguez"
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "3", title: "Professional & Reliable", quote: "From the initial consultation through completion, Taishan showed true professionalism. Their material showroom helped us choose the perfect stone for our porch. The finished result exceeded our expectations.", name: "Sarah Thompson", role: "North York Resident", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=3", imageAlt: "Sarah Thompson"
|
|
|
|
id: "3", title: "Professional & Reliable", quote: "From the initial consultation through completion, Taishan showed true professionalism. Their material showroom helped us choose the perfect stone for our porch. The finished result exceeded our expectations.", name: "Sarah Thompson", role: "North York Resident", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-heyeujvs.jpg?_wi=4", imageAlt: "Sarah Thompson"
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "4", title: "Worth Every Investment", quote: "This is clearly a luxury construction company, not just a contractor. The entire process felt premium, from the design consultation to the final walkthrough. Our property value and curb appeal have both dramatically improved.", name: "David Park", role: "Markham Homeowner", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=4", imageAlt: "David Park"
|
|
|
|
id: "4", title: "Worth Every Investment", quote: "This is clearly a luxury construction company, not just a contractor. The entire process felt premium, from the design consultation to the final walkthrough. Our property value and curb appeal have both dramatically improved.", name: "David Park", role: "Markham Homeowner", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-heyeujvs.jpg?_wi=5", imageAlt: "David Park"
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "5", title: "Exceptional Waterproofing Work", quote: "We had basement waterproofing done by Taishan and couldn't be happier. Their expertise was evident, and our foundation is now completely protected. Highly professional team.", name: "Lisa Martinez", role: "Richmond Hill Homeowner", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=5", imageAlt: "Lisa Martinez"
|
|
|
|
id: "5", title: "Exceptional Waterproofing Work", quote: "We had basement waterproofing done by Taishan and couldn't be happier. Their expertise was evident, and our foundation is now completely protected. Highly professional team.", name: "Lisa Martinez", role: "Richmond Hill Homeowner", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-heyeujvs.jpg?_wi=6", imageAlt: "Lisa Martinez"
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
id: "6", title: "Complete Backyard Overhaul", quote: "Taishan handled our entire backyard renovation including patio, landscape lighting, and landscaping. The coordination was seamless, and the final result is absolutely stunning. We now have the backyard of our dreams.", name: "Robert Williams", role: "Scarborough Homeowner", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=6", imageAlt: "Robert Williams"
|
|
|
|
id: "6", title: "Complete Backyard Overhaul", quote: "Taishan handled our entire backyard renovation including patio, landscape lighting, and landscaping. The coordination was seamless, and the final result is absolutely stunning. We now have the backyard of our dreams.", name: "Robert Williams", role: "Scarborough Homeowner", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-heyeujvs.jpg?_wi=7", imageAlt: "Robert Williams"
|
|
|
|
}
|
|
|
|
}
|
|
|
|
]}
|
|
|
|
]}
|
|
|
|
textboxLayout="default"
|
|
|
|
textboxLayout="default"
|
|
|
|
@@ -322,7 +448,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"
|
|
|
|
}}
|
|
|
|
}}
|
|
|
|
|
