bender/4b25fc2b-e3d4-445d-af6b-af3aba253c62
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-12 07:09:53 +00:00
commit c9c4f6283f
628 changed files with 85241 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";

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

@@ -0,0 +1,41 @@
import type { Metadata } from "next";
import { Halant } from "next/font/google";
import { Inter } from "next/font/google";
import "./globals.css";
import { ServiceWrapper } from "@/components/ServiceWrapper";
import Tag from "@/tag/Tag";
import { getVisualEditScript } from "@/utils/visual-edit-script";
import { Open_Sans } from "next/font/google";
export const metadata: Metadata = {
title: 'Premium Car Detailing | Astana Detailing - Expert Automotive Care',
description: 'Professional car detailing services for luxury vehicles. Ceramic coating, paint correction, interior & exterior detail by certified technicians.',
};
const openSans = Open_Sans({
variable: "--font-open-sans", subsets: ["latin"],
});
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en" suppressHydrationWarning>
<ServiceWrapper>
<body className={`${openSans.variable} antialiased`}>
<Tag />
{children}
<script
dangerouslySetInnerHTML={{
__html: `${getVisualEditScript()}`
}}
/>
</body>
</ServiceWrapper>
</html>
);
}

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

@@ -0,0 +1,283 @@
"use client"
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
import AboutMetric from '@/components/sections/about/AboutMetric';
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
import { Award, CheckCircle, Droplets, Gauge, Globe, Phone, Shield, Sofa, Sparkles, Sun, Trophy, Zap } from 'lucide-react';
export default function AstanaDetailingPage() {
return (
<ThemeProvider
defaultButtonVariant="elastic-effect"
defaultTextAnimation="reveal-blur"
borderRadius="rounded"
contentWidth="mediumLarge"
sizing="large"
background="noise"
cardStyle="subtle-shadow"
primaryButtonStyle="gradient"
secondaryButtonStyle="radial-glow"
headingFontWeight="medium"
>
<div id="nav" data-section="nav">
<NavbarStyleApple
brandName="Astana Detailing"
navItems={[
{ name: "Services", id: "services" },
{ name: "About", id: "about" },
{ name: "Testimonials", id: "testimonials" },
{ name: "Contact", id: "contact" }
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroLogoBillboard
logoText="Astana Detailing"
description="Premier automotive detailing service delivering showroom-quality finishes. Expert care for your vehicle's appearance, protection, and preservation."
buttons={[
{ text: "Book Service", href: "#contact" },
{ text: "View Gallery", href: "#services" }
]}
buttonAnimation="slide-up"
background={{ variant: "sparkles-gradient" }}
imageSrc="http://img.b2bpic.net/free-photo/car-wash-detailing-station_1303-22321.jpg"
imageAlt="Premium car detailing showcase"
mediaAnimation="blur-reveal"
frameStyle="card"
/>
</div>
<div id="about" data-section="about">
<AboutMetric
title="Delivering Excellence in Every Detail Since 2015. Astana Detailing Sets the Standard for Automotive Perfection."
metrics={[
{ icon: Sparkles, label: "Vehicles Detailed", value: "5,000+" },
{ icon: Award, label: "Customer Satisfaction", value: "98%" },
{ icon: Shield, label: "Years Experience", value: "9+" },
{ icon: CheckCircle, label: "Certified Technicians", value: "12+" }
]}
metricsAnimation="slide-up"
useInvertedBackground={false}
/>
</div>
<div id="services" data-section="services">
<FeatureHoverPattern
title="Our Services"
description="Comprehensive detailing solutions tailored to preserve and enhance your vehicle's beauty and value."
tag="Premium Services"
tagIcon={Zap}
tagAnimation="slide-up"
features={[
{
icon: Droplets,
title: "Exterior Detail", description: "Complete washing, clay treatment, wax application, and protective sealant for lasting shine and paint protection."
},
{
icon: Sofa,
title: "Interior Detailing", description: "Deep cleaning of upholstery, carpets, leather conditioning, and comprehensive cabin sanitization."
},
{
icon: Shield,
title: "Ceramic Coating", description: "Professional-grade ceramic coating providing superior paint protection and hydrophobic properties for months."
},
{
icon: Gauge,
title: "Wheel & Tire Care", description: "Expert wheel cleaning, tire dressing, and brake dust removal for that showroom finish on every detail."
},
{
icon: Sun,
title: "Paint Correction", description: "Advanced polishing techniques to remove swirls, scratches, and oxidation restoring factory depth and gloss."
},
{
icon: Sparkles,
title: "Premium Packages", description: "Customized packages combining multiple services for comprehensive vehicle transformation and maintenance."
}
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
buttons={[
{ text: "Explore Services", href: "#contact" }
]}
buttonAnimation="slide-up"
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardSeven
title="Why Choose Astana Detailing"
description="Industry-leading expertise and commitment to automotive excellence."
tag="Why Us"
tagIcon={Trophy}
tagAnimation="slide-up"
metrics={[
{
id: "1", value: "15+", title: "Professional Detailers", items: [
"Certified training and expertise", "Continuous skill development", "Passion for automotive perfection", "Customer-focused approach"
]
},
{
id: "2", value: "100%", title: "Quality Guarantee", items: [
"Premium products only", "Meticulous attention to detail", "State-of-the-art equipment", "Satisfaction or re-service promise"
]
},
{
id: "3", value: "$2M+", title: "Invested in Equipment", items: [
"Latest detailing technology", "Professional-grade tools", "Advanced cleaning systems", "Protective coating systems"
]
}
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
buttons={[
{ text: "Schedule Consultation", href: "#contact" }
]}
buttonAnimation="slide-up"
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardFive
title="Client Testimonials"
description="Hear from satisfied customers who trust Astana Detailing with their most valued vehicles."
tag="Reviews"
testimonials={[
{
id: "1", name: "Marcus Thompson, CEO of LuxeAuto Holdings", date: "Date: 15 November 2024", title: "Absolutely Transformed Our Fleet", quote: "Astana Detailing exceeded our expectations. The attention to detail on our executive vehicles is unmatched. Our clients consistently compliment the pristine condition of our fleet. Highly recommend!", tag: "Corporate Fleet", avatarSrc: "http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1649.jpg", avatarAlt: "professional business man portrait", imageSrc: "http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193621.jpg", imageAlt: "car exterior washing professional detail"
},
{
id: "2", name: "Elena Rossi, Owner of Premium Automotive Gallery", date: "Date: 22 October 2024", title: "My Go-To Detailer for Showroom Preparation", quote: "Working with Astana Detailing has been transformative for my business. Every vehicle they detail looks absolutely showroom-ready. Their professionalism and results are incomparable.", tag: "Automotive Dealer", avatarSrc: "http://img.b2bpic.net/free-photo/close-up-confident-adult-woman-posing_23-2148461438.jpg", avatarAlt: "professional woman business portrait", imageSrc: "http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193562.jpg", imageAlt: "ceramic coating application protection"
},
{
id: "3", name: "David Chen, Collector of Luxury Vehicles", date: "Date: 8 September 2024", title: "The Best in the Business for Collector Cars", quote: "As a serious collector, I trust only the best. Astana Detailing understands the value and care required for high-end vehicles. My collection has never looked better.", tag: "Collector", avatarSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-leaning-cafe-counter_1262-1969.jpg", avatarAlt: "professional man business portrait", imageSrc: "http://img.b2bpic.net/free-photo/closeup-photoshoot-process-tyre-balancing-dark-auto-service_613910-17076.jpg", imageAlt: "wheel rim cleaning detail polish"
},
{
id: "4", name: "Sophia Williams, Luxury Travel Concierge", date: "Date: 31 August 2024", title: "Premium Service Matching Premium Vehicles", quote: "We refer all our executive clients to Astana Detailing. The consistency, quality, and professionalism are outstanding. They treat every vehicle like it's their own.", tag: "Concierge Service", avatarSrc: "http://img.b2bpic.net/free-photo/business-woman-posing-street_23-2148213506.jpg", avatarAlt: "professional woman headshot corporate", imageSrc: "http://img.b2bpic.net/free-photo/man-doing-professional-home-cleaning-service_23-2150358965.jpg", imageAlt: "car interior detailing cleaning vacuum"
},
{
id: "5", name: "James Patterson, Race Team Manager", date: "Date: 18 July 2024", title: "Professional Grade Detailing for Competition", quote: "For race day preparation, we need perfection. Astana Detailing delivers. Their precision detailing ensures our vehicles look as good as they perform on track.", tag: "Motorsports", avatarSrc: "http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1649.jpg", avatarAlt: "professional business man portrait", imageSrc: "http://img.b2bpic.net/free-photo/car-wash-detailing-station_1303-22321.jpg", imageAlt: "luxury car detailing wash shine"
},
{
id: "6", name: "Nicole Anderson, Luxury Hotel Manager", date: "Date: 5 July 2024", title: "VIP Guest Transportation Excellence", quote: "Our VIP vehicle fleet is maintained exclusively by Astana Detailing. Guest feedback on vehicle condition is always exceptional. They're an extension of our premium brand.", tag: "Hospitality", avatarSrc: "http://img.b2bpic.net/free-photo/close-up-confident-adult-woman-posing_23-2148461438.jpg", avatarAlt: "professional woman business portrait", imageSrc: "http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193621.jpg", imageAlt: "car exterior washing professional detail"
}
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="socialProof" data-section="socialProof">
<SocialProofOne
title="Trusted by Luxury Automotive Brands"
description="Premium dealerships and collectors worldwide choose Astana Detailing for their most valuable vehicles."
tag="Global Partnerships"
tagIcon={Globe}
tagAnimation="slide-up"
names={["Audi", "Mercedes-Benz", "BMW", "Porsche", "Tesla", "Rolls-Royce", "Lamborghini", "Ferrari"]}
logos={[
"http://img.b2bpic.net/free-vector/car-logo-set-four_23-2147740219.jpg", "http://img.b2bpic.net/free-vector/logo-template-design_1289-105.jpg", "http://img.b2bpic.net/free-vector/engine-logos-pack_23-2147564454.jpg", "http://img.b2bpic.net/free-vector/set-four-car-logos-retro-style_23-2147610790.jpg", "http://img.b2bpic.net/free-vector/vintage-car-logo-collection_23-2147749958.jpg", "http://img.b2bpic.net/free-vector/vintage-car-logo-collection_23-2147730872.jpg", "http://img.b2bpic.net/free-vector/gradient-car-service-logo-design_23-2149697765.jpg", "http://img.b2bpic.net/free-psd/albania-badge-banner_187299-41465.jpg"
]}
textboxLayout="default"
useInvertedBackground={false}
speed={40}
showCard={true}
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitText
sideTitle="Frequently Asked Questions"
sideDescription="Everything you need to know about our detailing services and processes."
faqs={[
{
id: "1", title: "How often should I detail my vehicle?", content: "We recommend detailing every 3-6 months for daily drivers, and every 2-3 months for luxury or frequently-driven vehicles. The frequency depends on driving conditions, weather, and your desired level of protection."
},
{
id: "2", title: "What is ceramic coating and how long does it last?", content: "Ceramic coating is a professional-grade protective layer applied to your vehicle's paint. It provides exceptional protection against UV rays, contaminants, and water spots. Quality ceramic coatings last 2-5 years depending on maintenance and environmental factors."
},
{
id: "3", title: "Can you remove swirl marks and scratches?", content: "Yes! Our paint correction service uses advanced polishing techniques to remove light to moderate swirl marks, scratches, and oxidation. We assess your vehicle's paint depth and condition to determine the best approach for optimal results."
},
{
id: "4", title: "Is your detailing service available for all vehicle types?", content: "Absolutely. We service all vehicle types including sedans, SUVs, trucks, sports cars, exotic vehicles, and classic cars. Each vehicle receives customized attention based on its specific paint type and condition."
},
{
id: "5", title: "What products do you use?", content: "We exclusively use premium automotive-grade products from industry-leading manufacturers. All products are pH-balanced, safe for various paint types, and designed for professional results without damaging your vehicle's surfaces."
},
{
id: "6", title: "How long does a typical detailing appointment take?", content: "Timeframes vary based on service type: Exterior detail (2-4 hours), Interior detail (2-3 hours), Ceramic coating (4-6 hours), or Full detail packages (6-8 hours). Our team will provide an accurate estimate during consultation."
}
]}
faqsAnimation="slide-up"
textPosition="left"
useInvertedBackground={false}
animationType="smooth"
/>
</div>
<div id="contact" data-section="contact">
<ContactCTA
tag="Ready to Transform Your Vehicle?"
tagIcon={Phone}
tagAnimation="slide-up"
title="Schedule Your Premium Detailing Appointment Today"
description="Contact Astana Detailing to book your service. Our team is ready to discuss your vehicle's specific needs and create the perfect detailing plan."
buttons={[
{ text: "Book Appointment", href: "tel:+1-555-0123" },
{ text: "Get Quote", href: "mailto:info@astanadetailing.com" }
]}
buttonAnimation="slide-up"
background={{ variant: "radial-gradient" }}
useInvertedBackground={false}
/>
</div>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="http://img.b2bpic.net/free-photo/car-mechanic-choosing-color-car_1303-28142.jpg"
imageAlt="Astana Detailing Professional Workshop"
logoText="Astana Detailing"
copyrightText="© 2024 Astana Detailing. All rights reserved. Premium automotive detailing since 2015."
columns={[
{
title: "Services", items: [
{ label: "Exterior Detail", href: "#services" },
{ label: "Interior Detailing", href: "#services" },
{ label: "Ceramic Coating", href: "#services" },
{ label: "Paint Correction", href: "#services" }
]
},
{
title: "Company", items: [
{ label: "About Us", href: "#about" },
{ label: "Our Team", href: "#about" },
{ label: "Testimonials", href: "#testimonials" },
{ label: "Contact Us", href: "#contact" }
]
},
{
title: "Legal", items: [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms of Service", href: "#" },
{ label: "Warranty Information", href: "#" },
{ label: "FAQ", href: "#faq" }
]
}
]}
/>
</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-open-sans), sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
overscroll-behavior-y: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-open-sans), 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: #f7f6f7;
--card: #ffffff;
--foreground: #0c1325;
--primary-cta: #0798ff;
--primary-cta-text: #f7f6f7;
--secondary-cta: #ffffff;
--secondary-cta-text: #0c1325;
--accent: #93c7ff;
--background-accent: #a8cde8;
/* 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;
}
}