bender/e01a5824-473d-4c4d-98d3-edd0dd69aed6
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
dk
2026-03-05 21:06:03 +00:00
commit d9ba63bb56
627 changed files with 85437 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/app/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

5
src/app/globals.css Normal file
View File

@@ -0,0 +1,5 @@
@import "tailwindcss";
@import "./styles/variables.css";
@import "./styles/theme.css";
@import "./styles/utilities.css";
@import "./styles/base.css";

1425
src/app/layout.tsx Normal file
View File

File diff suppressed because it is too large Load Diff

391
src/app/page.tsx Normal file
View File

@@ -0,0 +1,391 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
import SplitAbout from '@/components/sections/about/SplitAbout';
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
import BlogCardThree from '@/components/sections/blog/BlogCardThree';
import MetricCardTen from '@/components/sections/metrics/MetricCardTen';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { Building2, Eye, CheckCircle2, Palette, Users, MessageCircle, Sparkles, ArrowRightLeft, Cog, Footprints, Home, Zap, Shield, Hammer2, Trees, Droplet, Frame, Lightbulb, Crown, Phone } from 'lucide-react';
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="text-stagger"
defaultTextAnimation="reveal-blur"
borderRadius="pill"
contentWidth="small"
sizing="largeSmallSizeLargeTitles"
background="none"
cardStyle="outline"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="glass"
headingFontWeight="bold"
>
<div id="nav" data-section="nav">
<NavbarStyleApple
brandName="Taishan Construction"
navItems={[
{ name: "Services", id: "services" },
{ name: "Gallery", id: "gallery" },
{ name: "Showroom", id: "showroom" },
{ name: "Process", id: "process" },
{ name: "Contact", id: "contact" }
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitDualMedia
title="Toronto's Trusted Interlock & Construction Specialists"
description="Premium landscaping and construction services across the GTA. Designed with precision. Built to last."
tag="Luxury Construction"
tagIcon={Building2}
background={{ variant: "plain" }}
mediaItems={[
{
imageSrc: "http://img.b2bpic.net/free-photo/natural-grass-close-up_23-2148858213.jpg", imageAlt: "Luxury interlock driveway installation"
},
{
imageSrc: "http://img.b2bpic.net/free-photo/old-woman-doing-fitness-exercises_23-2149565528.jpg", imageAlt: "Premium patio transformation"
}
]}
rating={5}
ratingText="1000+ Projects Completed"
buttons={[
{ text: "Get Your Free 3D Design", href: "#contact" },
{ text: "Visit Our Showroom", href: "#showroom" }
]}
buttonAnimation="slide-up"
mediaAnimation="slide-up"
tagAnimation="slide-up"
textBoxClassName="max-w-2xl"
titleClassName="text-5xl lg:text-6xl font-bold leading-tight tracking-tight"
descriptionClassName="text-lg lg:text-xl leading-relaxed"
tagClassName="inline-flex items-center gap-2 font-semibold uppercase tracking-wider"
/>
</div>
<div id="taishan-effect" data-section="taishan-effect">
<SplitAbout
title="The Taishan Effect"
description="Why homeowners choose Taishan Construction for their premium hardscape and construction projects."
tag="Why Choose Taishan"
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
imagePosition="right"
bulletPoints={[
{
title: "Free 3D Project Visualization", description: "See your complete project before construction begins with our professional rendering service", icon: Eye
},
{
title: "Professional Project Planning", description: "Detailed timelines, material specifications, and structured installation processes", icon: CheckCircle2
},
{
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="http://img.b2bpic.net/free-photo/high-angle-clay-pieces-arrangement_23-2149480221.jpg"
imageAlt="Material showroom display"
buttons={[{ text: "Start Your Project Plan", href: "#contact" }]}
buttonAnimation="slide-up"
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="See Your Project Before We Build It"
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"
tagIcon={Sparkles}
tagAnimation="slide-up"
features={[
{
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" }
},
{
icon: ArrowRightLeft,
title: "Before & After Comparisons", description: "Side-by-side views showing current property and your completed dream project transformation"
}
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
buttonAnimation="slide-up"
buttons={[{ text: "Request Your Free 3D Design", href: "#contact" }]}
titleClassName="text-5xl font-bold mb-4"
descriptionClassName="text-lg leading-relaxed mb-8"
/>
</div>
<div id="services" data-section="services">
<FeatureHoverPattern
title="Our Services"
description="Premium construction and landscaping services for Toronto and the Greater Toronto Area. Each project is crafted with precision and built to last."
tag="Complete Solutions"
features={[
{
icon: Cog,
title: "Interlock Driveways", description: "Professional interlock paving with premium materials and expert installation"
},
{
icon: Palette,
title: "Backyard Patios", description: "Custom patio designs transforming outdoor living spaces into luxury retreats"
},
{
icon: Footprints,
title: "Walkways", description: "Decorative and functional pathways connecting your property with style"
},
{
icon: Building2,
title: "Retaining Walls", description: "Structural and aesthetic walls for landscaping and property management"
},
{
icon: Home,
title: "Natural Stone Porches", description: "Premium stone entry features creating impressive curb appeal"
},
{
icon: Zap,
title: "Landscape Lighting", description: "Professional outdoor lighting systems enhancing ambiance and security"
},
{
icon: Hammer2,
title: "Decks", description: "Custom wooden decks designed for durability and aesthetic appeal"
},
{
icon: Shield,
title: "Fences", description: "Privacy fences and decorative fencing solutions for residential properties"
},
{
icon: Trees,
title: "Rock Beds & Landscaping", description: "Landscape design elements that enhance property value and curb appeal"
},
{
icon: Droplet,
title: "Basement Waterproofing", description: "Professional waterproofing solutions protecting your foundation and home"
},
{
icon: Frame,
title: "Interior Renovations", description: "Premium interior construction and renovation services for Toronto homes"
}
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
tagAnimation="slide-up"
titleClassName="text-5xl font-bold mb-4"
descriptionClassName="text-lg leading-relaxed mb-8"
/>
</div>
<div id="gallery" data-section="gallery">
<BlogCardThree
title="Project Gallery"
description="Explore our portfolio of premium hardscape and construction projects across the GTA."
tag="Portfolio Showcase"
tagAnimation="slide-up"
blogs={[
{
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", 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"
},
{
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", 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: "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", 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: "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", 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: "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: "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"
}
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
titleClassName="text-5xl font-bold mb-4"
descriptionClassName="text-lg leading-relaxed mb-8"
/>
</div>
<div id="showroom" data-section="showroom">
<SplitAbout
title="Visit Our Outdoor Material Showroom"
description="Explore real materials and design options before construction begins. Compare interlock styles, natural stone, lighting systems, and layout options with our expert team."
tag="Showroom Experience"
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
imagePosition="left"
bulletPoints={[
{
title: "Compare Materials In Person", description: "Touch and see actual materials, finishes, and color options for your project", icon: Eye
},
{
title: "Plan With Experts", description: "Our design team helps you make confident selections based on your vision and budget", icon: Users
},
{
title: "Visualize Your Project", description: "Use our showroom samples alongside 3D renderings to finalize your design", icon: Lightbulb
},
{
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"
imageAlt="Material showroom samples and display"
buttons={[{ text: "Book a Showroom Visit", href: "#contact" }]}
buttonAnimation="slide-up"
titleClassName="text-5xl font-bold mb-4"
descriptionClassName="text-lg leading-relaxed mb-8"
/>
</div>
<div id="process" data-section="process">
<MetricCardTen
title="Our Proven Process"
description="A structured approach to delivering premium hardscape projects on time and on budget."
tag="Professional Installation"
tagAnimation="slide-up"
metrics={[
{
id: "1", title: "Consultation & Assessment", subtitle: "Understanding your vision, site conditions, and project requirements", category: "Step 1", value: "Free Quote"
},
{
id: "2", title: "3D Design & Planning", subtitle: "Professional renderings and detailed project specifications", category: "Step 2", value: "Included"
},
{
id: "3", title: "Professional Construction", subtitle: "Expert installation with certified teams and quality materials", category: "Step 3", value: "Fully Insured"
},
{
id: "4", title: "Final Walkthrough & Warranty", subtitle: "Inspection, final touches, and comprehensive project warranty", category: "Step 4", value: "Guaranteed"
}
]}
textboxLayout="default"
useInvertedBackground={false}
animationType="slide-up"
titleClassName="text-5xl font-bold mb-4"
descriptionClassName="text-lg leading-relaxed mb-8"
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTen
title="Trusted By Homeowners Across the GTA"
description="See what our satisfied clients have to say about their Taishan Construction projects."
tag="Client Testimonials"
tagAnimation="slide-up"
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", 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", 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", 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", 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", 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", imageAlt: "Robert Williams"
}
]}
textboxLayout="default"
useInvertedBackground={false}
titleClassName="text-5xl font-bold mb-4"
descriptionClassName="text-lg leading-relaxed mb-8"
/>
</div>
<div id="contact" data-section="contact">
<ContactFaq
ctaTitle="Ready to Transform Your Property?"
ctaDescription="Book a consultation and receive a free 3D preview of your project."
ctaButton={{
text: "Get Free 3D Design", href: "mailto:info@taishanconstruction.com?subject=Free%203D%20Design%20Consultation"
}}
ctaIcon={Sparkles}
useInvertedBackground={false}
animationType="slide-up"
faqs={[
{
id: "1", title: "What areas do you service?", content: "We service the entire Greater Toronto Area (GTA), including Toronto, Scarborough, Markham, North York, Richmond Hill, Vaughan, Pickering, Ajax, and surrounding communities. Contact us for your specific location."
},
{
id: "2", title: "Do you offer free consultations and quotes?", content: "Yes, we provide free on-site consultations and quotes for all projects. During your consultation, we'll assess your property, discuss your vision, and provide transparent pricing."
},
{
id: "3", title: "What is included in the 3D design service?", content: "Our free 3D design includes photorealistic renderings of your complete project, showing materials, lighting, landscaping, and final details. This allows you to visualize the finished result before construction begins."
},
{
id: "4", title: "How long does a typical project take?", content: "Project timelines vary depending on scope and complexity. A driveway typically takes 1-2 weeks, patios 2-3 weeks, and larger projects may take 4-6 weeks. We'll provide a detailed timeline during planning."
},
{
id: "5", title: "Do you offer warranties on your work?", content: "Yes, we stand behind our work with comprehensive warranties. All installations include workmanship guarantees, and material warranties vary by product. Details are provided with your project estimate."
},
{
id: "6", title: "Can I visit your material showroom?", content: "Absolutely! We encourage homeowners to visit our outdoor material showroom to explore interlock styles, natural stone options, and landscape lighting systems. Call us to schedule a convenient time."
}
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseReveal
columns={[
{
title: "Services", items: [
{ label: "Interlock Driveways", href: "#services" },
{ label: "Backyard Patios", href: "#services" },
{ label: "Walkways", href: "#services" },
{ label: "Retaining Walls", href: "#services" },
{ label: "Natural Stone Porches", href: "#services" }
]
},
{
title: "Company", items: [
{ label: "Our Process", href: "#process" },
{ label: "Gallery", href: "#gallery" },
{ label: "Showroom", href: "#showroom" },
{ label: "About", href: "#taishan-effect" },
{ label: "Contact", href: "#contact" }
]
},
{
title: "Contact", items: [
{ label: "Toronto, Canada", href: "#" },
{ label: "Phone: (416) XXX-XXXX", href: "tel:+14165551234" },
{ label: "Email: info@taishanconstruction.com", href: "mailto:info@taishanconstruction.com" },
{ label: "Service Areas", href: "#" }
]
}
]}
copyrightText="© 2024 Taishan Construction. All rights reserved. Premium hardscape and construction services for the GTA."
/>
</div>
</ThemeProvider>
);
}

28
src/app/styles/base.css Normal file
View File

@@ -0,0 +1,28 @@
* {
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 1) rgba(255, 255, 255, 0);
}
html {
overscroll-behavior: none;
overscroll-behavior-y: none;
}
body {
background-color: var(--background);
color: var(--foreground);
font-family: var(--font-montserrat), sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
overscroll-behavior-y: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-montserrat), sans-serif;
}

176
src/app/styles/theme.css Normal file
View File

@@ -0,0 +1,176 @@
@theme inline {
--color-background: var(--background);
--color-card: var(--card);
--color-foreground: var(--foreground);
--color-primary-cta: var(--primary-cta);
--color-primary-cta-text: var(--primary-cta-text);
--color-secondary-cta: var(--secondary-cta);
--color-secondary-cta-text: var(--secondary-cta-text);
--color-accent: var(--accent);
--color-background-accent: var(--background-accent);
/* theme border radius */
--radius-theme: var(--theme-border-radius);
--radius-theme-capped: var(--theme-border-radius-capped);
/* text */
--text-2xs: var(--text-2xs);
--text-xs: var(--text-xs);
--text-sm: var(--text-sm);
--text-base: var(--text-base);
--text-lg: var(--text-lg);
--text-xl: var(--text-xl);
--text-2xl: var(--text-2xl);
--text-3xl: var(--text-3xl);
--text-4xl: var(--text-4xl);
--text-5xl: var(--text-5xl);
--text-6xl: var(--text-6xl);
--text-7xl: var(--text-7xl);
--text-8xl: var(--text-8xl);
--text-9xl: var(--text-9xl);
/* height */
--height-4: var(--height-4);
--height-5: var(--height-5);
--height-6: var(--height-6);
--height-7: var(--height-7);
--height-8: var(--height-8);
--height-9: var(--height-9);
--height-11: var(--height-11);
--height-12: var(--height-12);
--height-10: var(--height-10);
--height-30: var(--height-30);
--height-90: var(--height-90);
--height-100: var(--height-100);
--height-110: var(--height-110);
--height-120: var(--height-120);
--height-130: var(--height-130);
--height-140: var(--height-140);
--height-150: var(--height-150);
--height-page-padding: calc(2.25rem+var(--vw-1_5)+var(--vw-1_5));
/* width */
--width-5: var(--width-5);
--width-7_5: var(--width-7_5);
--width-10: var(--width-10);
--width-12_5: var(--width-12_5);
--width-15: var(--width-15);
--width-17: var(--width-17);
--width-17_5: var(--width-17_5);
--width-20: var(--width-20);
--width-21: var(--width-21);
--width-22_5: var(--width-22_5);
--width-25: var(--width-25);
--width-26: var(--width-26);
--width-27_5: var(--width-27_5);
--width-30: var(--width-30);
--width-32_5: var(--width-32_5);
--width-35: var(--width-35);
--width-37_5: var(--width-37_5);
--width-40: var(--width-40);
--width-42_5: var(--width-42_5);
--width-45: var(--width-45);
--width-47_5: var(--width-47_5);
--width-50: var(--width-50);
--width-52_5: var(--width-52_5);
--width-55: var(--width-55);
--width-57_5: var(--width-57_5);
--width-60: var(--width-60);
--width-62_5: var(--width-62_5);
--width-65: var(--width-65);
--width-67_5: var(--width-67_5);
--width-70: var(--width-70);
--width-72_5: var(--width-72_5);
--width-75: var(--width-75);
--width-77_5: var(--width-77_5);
--width-80: var(--width-80);
--width-82_5: var(--width-82_5);
--width-85: var(--width-85);
--width-87_5: var(--width-87_5);
--width-90: var(--width-90);
--width-92_5: var(--width-92_5);
--width-95: var(--width-95);
--width-97_5: var(--width-97_5);
--width-100: var(--width-100);
--width-content-width: var(--width-content-width);
--width-carousel-padding: var(--width-carousel-padding);
--width-carousel-padding-controls: var(--width-carousel-padding-controls);
--width-carousel-padding-expanded: var(--width-carousel-padding-expanded);
--width-carousel-padding-controls-expanded: var(--width-carousel-padding-controls-expanded);
--width-carousel-item-3: var(--width-carousel-item-3);
--width-carousel-item-4: var(--width-carousel-item-4);
--width-x-padding-mask-fade: var(--width-x-padding-mask-fade);
--width-content-width-expanded: var(--width-content-width-expanded);
/* gap */
--spacing-1: var(--vw-0_25);
--spacing-2: var(--vw-0_5);
--spacing-3: var(--vw-0_75);
--spacing-4: var(--vw-1);
--spacing-5: var(--vw-1_25);
--spacing-6: var(--vw-1_5);
--spacing-7: var(--vw-1_75);
--spacing-8: var(--vw-2);
--spacing-x-1: var(--vw-0_25);
--spacing-x-2: var(--vw-0_5);
--spacing-x-3: var(--vw-0_75);
--spacing-x-4: var(--vw-1);
--spacing-x-5: var(--vw-1_25);
--spacing-x-6: var(--vw-1_5);
/* border radius */
--radius-none: 0;
--radius-sm: var(--vw-0_5);
--radius: var(--vw-0_75);
--radius-md: var(--vw-1);
--radius-lg: var(--vw-1_25);
--radius-xl: var(--vw-1_75);
--radius-full: 999px;
/* padding */
--padding-1: var(--vw-0_25);
--padding-2: var(--vw-0_5);
--padding-2.5: var(--vw-0_625);
--padding-3: var(--vw-0_75);
--padding-4: var(--vw-1);
--padding-5: var(--vw-1_25);
--padding-6: var(--vw-1_5);
--padding-7: var(--vw-1_75);
--padding-8: var(--vw-2);
--padding-x-1: var(--vw-0_25);
--padding-x-2: var(--vw-0_5);
--padding-x-3: var(--vw-0_75);
--padding-x-4: var(--vw-1);
--padding-x-5: var(--vw-1_25);
--padding-x-6: var(--vw-1_5);
--padding-x-7: var(--vw-1_75);
--padding-x-8: var(--vw-2);
--padding-hero-page-padding-half: var(--padding-hero-page-padding-half);
--padding-hero-page-padding: var(--padding-hero-page-padding);
--padding-hero-page-padding-1_5: var(--padding-hero-page-padding-1_5);
--padding-hero-page-padding-double: var(--padding-hero-page-padding-double);
/* margin */
--margin-1: var(--vw-0_25);
--margin-2: var(--vw-0_5);
--margin-3: var(--vw-0_75);
--margin-4: var(--vw-1);
--margin-5: var(--vw-1_25);
--margin-6: var(--vw-1_5);
--margin-7: var(--vw-1_75);
--margin-8: var(--vw-2);
--margin-x-1: var(--vw-0_25);
--margin-x-2: var(--vw-0_5);
--margin-x-3: var(--vw-0_75);
--margin-x-4: var(--vw-1);
--margin-x-5: var(--vw-1_25);
--margin-x-6: var(--vw-1_5);
--margin-x-7: var(--vw-1_75);
--margin-x-8: var(--vw-2);
}

228
src/app/styles/utilities.css Normal file
View File

@@ -0,0 +1,228 @@
@layer components {}
@layer utilities {
/* Card, primary-button, and secondary-button styles are now dynamically injected via ThemeProvider */
/* .card {
@apply backdrop-blur-sm bg-gradient-to-br from-card/80 to-card/40 shadow-sm border border-card;
}
.primary-button {
@apply bg-gradient-to-b from-primary-cta/83 to-primary-cta;
box-shadow:
color-mix(in srgb, var(--color-background) 25%, transparent) 0px 1px 1px 0px inset,
color-mix(in srgb, var(--color-primary-cta) 15%, transparent) 3px 3px 3px 0px;
}
.secondary-button {
@apply backdrop-blur-sm bg-gradient-to-br from-secondary-cta/80 to-secondary-cta shadow-sm border border-secondary-cta;
} */
.tag-card {
@apply backdrop-blur-sm bg-gradient-to-br from-card/80 to-card/40 shadow-sm border border-card;
}
.inset-glow-border {
@apply relative;
}
.inset-glow-border::before {
content: "";
@apply absolute pointer-events-none inset-0 p-[1px];
border-radius: inherit;
background: linear-gradient(
0deg,
color-mix(in srgb, var(--color-primary-cta) 20%, var(--color-background)) 0%,
color-mix(in srgb, var(--color-primary-cta) 40%, var(--color-background)) 27%,
color-mix(in srgb, var(--color-primary-cta) 60%, var(--color-foreground)) 62%,
color-mix(in srgb, var(--color-primary-cta) 80%, var(--color-foreground)) 100%
);
mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
mask-composite: exclude;
}
.mask-fade-x {
-webkit-mask-image: linear-gradient(to right, transparent 0%, transparent calc((100vw - var(--width-content-width)) / 4), black calc((100vw - var(--width-content-width)) / 2 + 5vw), black calc(100% - (100vw - var(--width-content-width)) / 2 - 5vw), transparent calc(100% - (100vw - var(--width-content-width)) / 4), transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, transparent calc((100vw - var(--width-content-width)) / 4), black calc((100vw - var(--width-content-width)) / 2 + 5vw), black calc(100% - (100vw - var(--width-content-width)) / 2 - 5vw), transparent calc(100% - (100vw - var(--width-content-width)) / 4), transparent 100%);
}
.mask-padding-x {
-webkit-mask-image: linear-gradient(to right, transparent 0%, black var(--width-x-padding-mask-fade), black calc(100% - var(--width-x-padding-mask-fade)), transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, black var(--width-x-padding-mask-fade), black calc(100% - var(--width-x-padding-mask-fade)), transparent 100%);
}
.mask-fade-bottom {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
}
.mask-fade-y {
mask-image: linear-gradient(to bottom,
transparent 0%,
black var(--vw-1_5),
black calc(100% - var(--vw-1_5)),
transparent 100%);
}
.mask-fade-y {
mask-image: linear-gradient(to bottom,
transparent 0%,
black var(--vw-1_5),
black calc(100% - var(--vw-1_5)),
transparent 100%);
}
.mask-fade-y-medium {
mask-image: linear-gradient(to bottom,
transparent 0%,
black 20%,
black 80%,
transparent 100%);
}
.mask-fade-bottom-large {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 75%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 75%, transparent 100%);
}
.mask-fade-bottom-long {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 5%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 5%, transparent 100%);
}
.mask-fade-top-long {
-webkit-mask-image: linear-gradient(to top, black 0%, black 5%, transparent 100%);
mask-image: linear-gradient(to top, black 0%, black 5%, transparent 100%);
}
.mask-fade-xy {
-webkit-mask-image:
linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%),
linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
mask-image:
linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%),
linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
/* ANIMATION */
.animation-container {
animation:
fadeInOpacity 0.8s ease-in-out forwards,
fadeInTranslate 0.6s forwards;
}
.animation-container-fade {
animation: fadeInOpacity 0.8s ease-in-out forwards;
}
@keyframes fadeInOpacity {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeInTranslate {
from {
transform: translateY(0.75vh);
}
to {
transform: translateY(0vh);
}
}
@keyframes aurora {
from {
background-position: 50% 50%, 50% 50%;
}
to {
background-position: 350% 50%, 350% 50%;
}
}
@keyframes spin-slow {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes spin-reverse {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}
.animate-spin-slow {
animation: spin-slow 15s linear infinite;
}
.animate-spin-reverse {
animation: spin-reverse 10s linear infinite;
}
@keyframes marquee-vertical {
from {
transform: translateY(0);
}
to {
transform: translateY(-50%);
}
}
.animate-marquee-vertical {
animation: marquee-vertical 40s linear infinite;
}
@keyframes marquee-vertical-reverse {
from {
transform: translateY(-50%);
}
to {
transform: translateY(0);
}
}
.animate-marquee-vertical-reverse {
animation: marquee-vertical-reverse 40s linear infinite;
}
@keyframes orbit {
from {
transform: rotate(var(--initial-position, 0deg)) translateX(var(--translate-position, 120px)) rotate(calc(-1 * var(--initial-position, 0deg)));
}
to {
transform: rotate(calc(var(--initial-position, 0deg) + 360deg)) translateX(var(--translate-position, 120px)) rotate(calc(-1 * (var(--initial-position, 0deg) + 360deg)));
}
}
@keyframes map-dot-pulse {
0%, 100% {
transform: scale(0.4);
opacity: 0.6;
}
50% {
transform: scale(1.4);
opacity: 1;
}
}
}

217
src/app/styles/variables.css Normal file
View File

@@ -0,0 +1,217 @@
:root {
/* Base units */
/* --vw is set by ThemeProvider */
/* --background: #f5f4ef;
--card: #dad6cd;
--foreground: #2a2928;
--primary-cta: #2a2928;
--secondary-cta: #ecebea;
--accent: #ffffff;
--background-accent: #ffffff; */
--background: #efebe5;
--card: #f7f2ea;
--foreground: #000000;
--primary-cta: #1a1a1a;
--primary-cta-text: #efebe5;
--secondary-cta: #ffffff;
--secondary-cta-text: #000000;
--accent: #d4a574;
--background-accent: #c9985f;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
--text-xs: clamp(0.54rem, 0.72vw, 0.72rem);
--text-sm: clamp(0.615rem, 0.82vw, 0.82rem);
--text-base: clamp(0.69rem, 0.92vw, 0.92rem);
--text-lg: clamp(0.75rem, 1vw, 1rem);
--text-xl: clamp(0.825rem, 1.1vw, 1.1rem);
--text-2xl: clamp(0.975rem, 1.3vw, 1.3rem);
--text-3xl: clamp(1.2rem, 1.6vw, 1.6rem);
--text-4xl: clamp(1.5rem, 2vw, 2rem);
--text-5xl: clamp(2.025rem, 2.75vw, 2.75rem);
--text-6xl: clamp(2.475rem, 3.3vw, 3.3rem);
--text-7xl: clamp(3rem, 4vw, 4rem);
--text-8xl: clamp(3.5rem, 4.5vw, 4.5rem);
--text-9xl: clamp(5.25rem, 7vw, 7rem); */
/* Base spacing units */
--vw-0_25: calc(var(--vw) * 0.25);
--vw-0_5: calc(var(--vw) * 0.5);
--vw-0_625: calc(var(--vw) * 0.625);
--vw-0_75: calc(var(--vw) * 0.75);
--vw-1: calc(var(--vw) * 1);
--vw-1_25: calc(var(--vw) * 1.25);
--vw-1_5: calc(var(--vw) * 1.5);
--vw-1_75: calc(var(--vw) * 1.75);
--vw-2: calc(var(--vw) * 2);
--vw-2_25: calc(var(--vw) * 2.25);
--vw-2_5: calc(var(--vw) * 2.5);
--vw-2_75: calc(var(--vw) * 2.75);
--vw-3: calc(var(--vw) * 3);
/* width */
--width-5: clamp(4rem, 5vw, 6rem);
--width-7_5: clamp(5.625rem, 7.5vw, 7.5rem);
--width-10: clamp(7.5rem, 10vw, 10rem);
--width-12_5: clamp(9.375rem, 12.5vw, 12.5rem);
--width-15: clamp(11.25rem, 15vw, 15rem);
--width-17: clamp(12.75rem, 17vw, 17rem);
--width-17_5: clamp(13.125rem, 17.5vw, 17.5rem);
--width-20: clamp(15rem, 20vw, 20rem);
--width-21: clamp(15.75rem, 21vw, 21rem);
--width-22_5: clamp(16.875rem, 22.5vw, 22.5rem);
--width-25: clamp(18.75rem, 25vw, 25rem);
--width-26: clamp(19.5rem, 26vw, 26rem);
--width-27_5: clamp(20.625rem, 27.5vw, 27.5rem);
--width-30: clamp(22.5rem, 30vw, 30rem);
--width-32_5: clamp(24.375rem, 32.5vw, 32.5rem);
--width-35: clamp(26.25rem, 35vw, 35rem);
--width-37_5: clamp(28.125rem, 37.5vw, 37.5rem);
--width-40: clamp(30rem, 40vw, 40rem);
--width-42_5: clamp(31.875rem, 42.5vw, 42.5rem);
--width-45: clamp(33.75rem, 45vw, 45rem);
--width-47_5: clamp(35.625rem, 47.5vw, 47.5rem);
--width-50: clamp(37.5rem, 50vw, 50rem);
--width-52_5: clamp(39.375rem, 52.5vw, 52.5rem);
--width-55: clamp(41.25rem, 55vw, 55rem);
--width-57_5: clamp(43.125rem, 57.5vw, 57.5rem);
--width-60: clamp(45rem, 60vw, 60rem);
--width-62_5: clamp(46.875rem, 62.5vw, 62.5rem);
--width-65: clamp(48.75rem, 65vw, 65rem);
--width-67_5: clamp(50.625rem, 67.5vw, 67.5rem);
--width-70: clamp(52.5rem, 70vw, 70rem);
--width-72_5: clamp(54.375rem, 72.5vw, 72.5rem);
--width-75: clamp(56.25rem, 75vw, 75rem);
--width-77_5: clamp(58.125rem, 77.5vw, 77.5rem);
--width-80: clamp(60rem, 80vw, 80rem);
--width-82_5: clamp(61.875rem, 82.5vw, 82.5rem);
--width-85: clamp(63.75rem, 85vw, 85rem);
--width-87_5: clamp(65.625rem, 87.5vw, 87.5rem);
--width-90: clamp(67.5rem, 90vw, 90rem);
--width-92_5: clamp(69.375rem, 92.5vw, 92.5rem);
--width-95: clamp(71.25rem, 95vw, 95rem);
--width-97_5: clamp(73.125rem, 97.5vw, 97.5rem);
--width-100: clamp(75rem, 100vw, 100rem);
/* --width-content-width and --width-content-width-expanded are set by ThemeProvider */
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-padding-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-3: calc(var(--width-content-width) / 3 - var(--vw-1_5) / 3 * 2);
--width-carousel-item-4: calc(var(--width-content-width) / 4 - var(--vw-1_5) / 4 * 3);
--width-x-padding-mask-fade: clamp(1.5rem, 4vw, 4rem);
--height-4: 1rem;
--height-5: 1.25rem;
--height-6: 1.5rem;
--height-7: 1.75rem;
--height-8: 2rem;
--height-9: 2.25rem;
--height-10: 2.5rem;
--height-11: 2.75rem;
--height-12: 3rem;
--height-30: 7.5rem;
--height-90: 22.5rem;
--height-100: 25rem;
--height-110: 27.5rem;
--height-120: 30rem;
--height-130: 32.5rem;
--height-140: 35rem;
--height-150: 37.5rem;
/* hero page padding */
--padding-hero-page-padding-half: calc((var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)) / 2);
--padding-hero-page-padding: calc(var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10));
--padding-hero-page-padding-1_5: calc(1.5 * (var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)));
--padding-hero-page-padding-double: calc(2 * (var(--height-10) + var(--vw-1_5) + var(--vw-1_5) + var(--height-10)));
}
@media (max-width: 767px) {
:root {
/* --vw and text sizing are set by ThemeProvider */
/* --vw: 3vw;
--text-2xs: 2.5vw;
--text-xs: 2.75vw;
--text-sm: 3vw;
--text-base: 3.25vw;
--text-lg: 3.5vw;
--text-xl: 4.25vw;
--text-2xl: 5vw;
--text-3xl: 6vw;
--text-4xl: 7vw;
--text-5xl: 7.5vw;
--text-6xl: 8.5vw;
--text-7xl: 10vw;
--text-8xl: 12vw;
--text-9xl: 14vw; */
--width-5: 5vw;
--width-7_5: 7.5vw;
--width-10: 10vw;
--width-12_5: 12.5vw;
--width-15: 15vw;
--width-17_5: 17.5vw;
--width-20: 20vw;
--width-22_5: 22.5vw;
--width-25: 25vw;
--width-27_5: 27.5vw;
--width-30: 30vw;
--width-32_5: 32.5vw;
--width-35: 35vw;
--width-37_5: 37.5vw;
--width-40: 40vw;
--width-42_5: 42.5vw;
--width-45: 45vw;
--width-47_5: 47.5vw;
--width-50: 50vw;
--width-52_5: 52.5vw;
--width-55: 55vw;
--width-57_5: 57.5vw;
--width-60: 60vw;
--width-62_5: 62.5vw;
--width-65: 65vw;
--width-67_5: 67.5vw;
--width-70: 70vw;
--width-72_5: 72.5vw;
--width-75: 75vw;
--width-77_5: 77.5vw;
--width-80: 80vw;
--width-82_5: 82.5vw;
--width-85: 85vw;
--width-87_5: 87.5vw;
--width-90: 90vw;
--width-92_5: 92.5vw;
--width-95: 95vw;
--width-97_5: 97.5vw;
--width-100: 100vw;
/* --width-content-width and --width-content-width-expanded are set by ThemeProvider */
--width-carousel-padding: calc((100vw - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls: calc((100vw - var(--width-content-width)) / 2 + 1px);
--width-carousel-padding-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px - var(--vw-1_5));
--width-carousel-padding-controls-expanded: calc((var(--width-content-width-expanded) - var(--width-content-width)) / 2 + 1px);
--width-carousel-item-3: var(--width-content-width);
--width-carousel-item-4: var(--width-content-width);
--width-x-padding-mask-fade: 10vw;
--height-4: 3.5vw;
--height-5: 4.5vw;
--height-6: 5.5vw;
--height-7: 6.5vw;
--height-8: 7.5vw;
--height-9: 8.5vw;
--height-10: 9vw;
--height-11: 10vw;
--height-12: 11vw;
--height-30: 25vw;
--height-90: 81vw;
--height-100: 90vw;
--height-110: 99vw;
--height-120: 108vw;
--height-130: 117vw;
--height-140: 126vw;
--height-150: 135vw;
}
}