|
|
|
|
@@ -3,6 +3,7 @@
|
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
|
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
|
|
|
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
|
|
|
|
|
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
|
|
|
|
|
import SplitAbout from '@/components/sections/about/SplitAbout';
|
|
|
|
|
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
|
|
|
|
|
import BlogCardThree from '@/components/sections/blog/BlogCardThree';
|
|
|
|
|
@@ -121,7 +122,7 @@ export default function LandingPage() {
|
|
|
|
|
tagIcon={Building2}
|
|
|
|
|
tagAnimation="slide-up"
|
|
|
|
|
buttons={[
|
|
|
|
|
{ text: "Claim Your Free 3D Design ", href: "#contact" },
|
|
|
|
|
{ text: "Get Your Free 3D Design", href: "#contact" },
|
|
|
|
|
{ text: "View Our Work", href: "#gallery" }
|
|
|
|
|
]}
|
|
|
|
|
buttonAnimation="slide-up"
|
|
|
|
|
@@ -146,57 +147,45 @@ export default function LandingPage() {
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="taishan-effect" data-section="taishan-effect">
|
|
|
|
|
<SplitAbout
|
|
|
|
|
<HeroSplitKpi
|
|
|
|
|
title="The Taishan Approach"
|
|
|
|
|
description="A refined methodology combining architectural precision, cutting-edge visualization, and curated material expertise to create outdoor spaces of enduring beauty."
|
|
|
|
|
tag="Design Excellence"
|
|
|
|
|
tagAnimation="slide-up"
|
|
|
|
|
textboxLayout="default"
|
|
|
|
|
useInvertedBackground={false}
|
|
|
|
|
imagePosition="right"
|
|
|
|
|
mediaAnimation="slide-up"
|
|
|
|
|
bulletPoints={[
|
|
|
|
|
{
|
|
|
|
|
title: "Strategic Planning & Conceptualization", description: "We begin with a comprehensive vision, understanding your lifestyle and aesthetic preferences to craft a thoughtful design narrative", icon: Eye
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "Photorealistic 3D Visualization", description: "Our advanced rendering technology transforms concepts into crystal-clear three-dimensional designs, revealing every material, finish, and spatial relationship before construction", icon: CheckCircle2
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "Curated Material Selection", description: "Access to premium architectural materials and finishes, expertly curated and displayed in our showroom for confident, informed decisions", icon: Palette
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "Masterful Execution", description: "Certified installation specialists with deep expertise in luxury hardscape construction and meticulous attention to architectural detail", icon: Users
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "Transparent Collaboration", description: "Clear communication throughout every phase, with professional project management ensuring your vision becomes reality on schedule", icon: MessageCircle
|
|
|
|
|
}
|
|
|
|
|
background={{ variant: "plain" }}
|
|
|
|
|
kpis={[
|
|
|
|
|
{ value: "3D", label: "Project Visualization " },
|
|
|
|
|
{ value: "Custom", label: "Designed Projects" },
|
|
|
|
|
{ value: "6 Year", label: "Warranty Coverage" }
|
|
|
|
|
]}
|
|
|
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749903650-czkpede9.jpg"
|
|
|
|
|
imageAlt="Material showroom display"
|
|
|
|
|
enableKpiAnimation={true}
|
|
|
|
|
tag="Our Process"
|
|
|
|
|
tagIcon={Eye}
|
|
|
|
|
tagAnimation="slide-up"
|
|
|
|
|
buttons={[{ text: "Explore Our Approach", href: "#contact" }]}
|
|
|
|
|
buttonAnimation="slide-up"
|
|
|
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749903650-czkpede9.jpg"
|
|
|
|
|
imageAlt="Material showroom display"
|
|
|
|
|
mediaAnimation="slide-up"
|
|
|
|
|
imagePosition="right"
|
|
|
|
|
titleClassName="text-5xl font-bold mb-4"
|
|
|
|
|
descriptionClassName="text-lg leading-relaxed mb-8"
|
|
|
|
|
bulletTitleClassName="text-xl font-semibold mb-2"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="3d-design" data-section="3d-design">
|
|
|
|
|
<FeatureHoverPattern
|
|
|
|
|
title="Step Into Your Future Backyard"
|
|
|
|
|
description="Experience the emotional transformation of your outdoor space before the first stone is laid. Our immersive 3D renderings reveal not just what your project will look like, but how it will feel—the ambiance, the flow, the experience of luxury design realized."
|
|
|
|
|
title="See Your Project Before a Single Brick Is Laid"
|
|
|
|
|
description=""
|
|
|
|
|
tag="Visualization Technology"
|
|
|
|
|
tagIcon={Sparkles}
|
|
|
|
|
tagAnimation="slide-up"
|
|
|
|
|
features={[
|
|
|
|
|
{
|
|
|
|
|
icon: Eye,
|
|
|
|
|
title: "Immersive Design Experience", description: "Step into your future. Our photorealistic renderings show lighting, materials, landscaping, and the emotional character of your completed transformation", button: { text: "Request Your Vision", href: "#contact" }
|
|
|
|
|
title: "Professional 3D Visualization", description: "We create realistic renderings that show layout, materials, elevation, and lighting so you can clearly see how your project will look before construction begins.", button: { text: "Request Your Vision", href: "#contact" }
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
icon: ArrowRightLeft,
|
|
|
|
|
title: "Concept to Reality Comparison", description: "Side-by-side visualizations of your current property and the finished design, revealing the transformative power of thoughtful architectural planning"
|
|
|
|
|
title: "Design vs Final Result", description: "Compare our 3D design with the completed project to see how accurate planning leads to beautiful finished results."
|
|
|
|
|
}
|
|
|
|
|
]}
|
|
|
|
|
animationType="slide-up"
|
|
|
|
|
@@ -213,19 +202,19 @@ export default function LandingPage() {
|
|
|
|
|
<div className="max-w-7xl mx-auto">
|
|
|
|
|
<div className="mb-12">
|
|
|
|
|
<p className="text-sm font-semibold uppercase tracking-wider text-primary-cta mb-2">Design + Craftsmanship</p>
|
|
|
|
|
<h2 className="text-4xl lg:text-5xl font-bold mb-4">Architectural Specialties</h2>
|
|
|
|
|
<p className="text-lg text-foreground/80">Premium outdoor design and construction across the Greater Toronto Area. Each commission represents a collaboration in creating spaces of lasting beauty and function.</p>
|
|
|
|
|
<h2 className="text-4xl lg:text-5xl font-bold mb-4">What We Build.</h2>
|
|
|
|
|
<p className="text-lg text-foreground/80">We specialize in premium outdoor construction — including driveways, patios, walkways, entrances, retaining walls, and landscape lighting — helping homeowners across the GTA transform their properties.</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
|
|
|
|
|
{[
|
|
|
|
|
{
|
|
|
|
|
id: "interlock", icon: Cog,
|
|
|
|
|
title: "Architectural Interlock Driveways", description: "Premium interlock paving systems designed with precision and executed with masterful craftsmanship"
|
|
|
|
|
title: "Interlock Driveways", description: "Premium interlock paving systems designed with precision and executed with masterful craftsmanship"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "patios", icon: Palette,
|
|
|
|
|
title: "Custom Outdoor Sanctuaries", description: "Thoughtfully designed patio spaces transforming properties into luxurious outdoor experiences"
|
|
|
|
|
title: "Outdoor Living Spaces", description: "Custom outdoor living areas designed for relaxing, entertaining, and extending the functionality of your backyard."
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "walkways", icon: Footprints,
|
|
|
|
|
@@ -268,8 +257,8 @@ export default function LandingPage() {
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className="bg-card rounded-lg p-8 border border-accent/20">
|
|
|
|
|
<h3 className="text-2xl font-bold mb-6">Design Excellence Gallery</h3>
|
|
|
|
|
<p className="text-foreground/80 mb-8">Hover to compare architectural renderings with realized projects:</p>
|
|
|
|
|
<h3 className="text-2xl font-bold mb-6">From Design to Reality.</h3>
|
|
|
|
|
<p className="text-foreground/80 mb-8">Compare our 3D designs with the finished construction:</p>
|
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
|
|
|
{beforeAfterPairs.map((pair, index) => (
|
|
|
|
|
<BeforeAfterCard
|
|
|
|
|
@@ -289,8 +278,8 @@ export default function LandingPage() {
|
|
|
|
|
<div className="max-w-7xl mx-auto">
|
|
|
|
|
<div className="mb-12">
|
|
|
|
|
<p className="text-sm font-semibold uppercase tracking-wider text-primary-cta mb-2">Project Portfolio</p>
|
|
|
|
|
<h2 className="text-4xl lg:text-5xl font-bold mb-4">Architectural Commissions</h2>
|
|
|
|
|
<p className="text-lg text-foreground/80">A curated selection of premium outdoor design projects across the Greater Toronto Area, each representing our commitment to transformative craftsmanship.</p>
|
|
|
|
|
<h2 className="text-4xl lg:text-5xl font-bold mb-4">Featured Projects</h2>
|
|
|
|
|
<p className="text-lg text-foreground/80">Explore some of our recent driveway, patio, and backyard transformation projects across Toronto and the GTA.</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
|
|
|
@@ -354,9 +343,10 @@ export default function LandingPage() {
|
|
|
|
|
|
|
|
|
|
<div id="showroom" data-section="showroom">
|
|
|
|
|
<SplitAbout
|
|
|
|
|
title="The Design Experience Showroom"
|
|
|
|
|
description="Step into our curated space to explore premium materials, finishes, and design possibilities. Our expert team guides you through every option to refine your architectural vision."
|
|
|
|
|
tag="Material Consultation"
|
|
|
|
|
title="Visit Our
|
|
|
|
|
10,000 SQFT Design Showroom"
|
|
|
|
|
description="Explore interlock, natural stone, lighting, and outdoor features in person. Our team helps you compare materials and make confident decisions before construction begins."
|
|
|
|
|
tag="10,000+ SQFT SHOWROOM "
|
|
|
|
|
tagAnimation="slide-up"
|
|
|
|
|
textboxLayout="default"
|
|
|
|
|
useInvertedBackground={false}
|
|
|
|
|
@@ -364,16 +354,17 @@ export default function LandingPage() {
|
|
|
|
|
mediaAnimation="slide-up"
|
|
|
|
|
bulletPoints={[
|
|
|
|
|
{
|
|
|
|
|
title: "Experience Materials In Their Element", description: "Touch, see, and envision authentic materials and finishes in carefully curated displays designed to inspire confident selections", icon: Eye
|
|
|
|
|
title: "Experience Materials In Person
|
|
|
|
|
", description: "See and feel real interlock, natural stone, lighting, and outdoor materials in our showroom so you can confidently choose what fits your home.", icon: Eye
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "Design Consultation With Experts", description: "Our specialists help refine your vision, balancing aesthetic aspirations with practical considerations and budget parameters", icon: Users
|
|
|
|
|
title: "Design Consultation With Experts", description: "Work with our team to plan layouts, materials, and features that balance design, durability, and budget.", icon: Users
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "Render-to-Reality Visualization", description: "Compare your 3D architectural renderings with actual samples to ensure perfect harmony between design vision and final execution", icon: Lightbulb
|
|
|
|
|
title: "Render-to-Reality Visualization", description: "View your project in 3D on a big screen and compare materials with real samples to ensure everything works together before construction begins.", icon: Lightbulb
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "Access to Exclusive Collections", description: "Discover premium architectural materials and professional-grade systems typically reserved for high-end design projects", icon: Crown
|
|
|
|
|
title: "Live Design Configuration", description: "Work 1:1 to adjust layouts, materials, and features in real time. We configure every detail together so your project is tailored exactly to your space.", icon: Crown
|
|
|
|
|
}
|
|
|
|
|
]}
|
|
|
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXh5KliD4l7rWjrQZkOq7ZuPnH/uploaded-1772749929936-heyeujvs.jpg?_wi=1"
|
|
|
|
|
@@ -514,4 +505,4 @@ export default function LandingPage() {
|
|
|
|
|
</div>
|
|
|
|
|
</ThemeProvider>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
