bender/febc8fd0-e4ec-44f4-98f0-2c6acc0fed1b
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-08 18:15:25 +00:00
commit d423e87e6f
627 changed files with 85301 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";

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

File diff suppressed because it is too large Load Diff

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

@@ -0,0 +1,252 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { Sparkles, Gem, Award, Shield, Heart, Mail, TrendingUp } from 'lucide-react';
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="background-highlight"
borderRadius="pill"
contentWidth="mediumLarge"
sizing="largeSmallSizeLargeTitles"
background="grid"
cardStyle="glass-elevated"
primaryButtonStyle="gradient"
secondaryButtonStyle="radial-glow"
headingFontWeight="normal"
>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
brandName="Premium Stones"
navItems={[
{ name: "Collections", id: "product" },
{ name: "Materials", id: "feature" },
{ name: "Quality", id: "about" },
{ name: "Testimonials", id: "testimonial" },
{ name: "Contact", id: "contact" }
]}
bottomLeftText="Premium Kitchen Stones"
bottomRightText="hello@premiumstones.com"
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitDualMedia
tag="Premium Kitchen Stones"
tagIcon={Sparkles}
tagAnimation="slide-up"
title="Premium Kitchen Stones: Timeless Elegance, Lifetime Durability"
description="Handpicked natural and engineered stones that transform kitchens into showpieces. Explore our collection and connect with design experts today."
background={{ variant: "plain" }}
mediaItems={[
{
imageSrc: "http://img.b2bpic.net/free-photo/small-cake-surrounded-with-marmelades-platter-marble-surface_114579-75262.jpg", imageAlt: "Luxury white marble kitchen countertop with elegant design"
},
{
imageSrc: "http://img.b2bpic.net/free-photo/small-cake-surrounded-with-marmelades-platter-marble-surface_114579-75262.jpg", imageAlt: "Premium dark granite kitchen surface with modern aesthetic"
}
]}
mediaAnimation="slide-up"
rating={5}
ratingText="Trusted by Homeowners & Designers"
buttons={[
{ text: "View Our Collections", href: "#product" },
{ text: "Schedule Consultation", href: "#contact" }
]}
buttonAnimation="slide-up"
/>
</div>
<div id="product" data-section="product">
<ProductCardTwo
title="Our Premium Collections"
description="Discover our curated selection of natural and engineered stone materials, each chosen for exceptional durability, beauty, and craftsmanship."
tag="Collections"
tagIcon={Gem}
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
products={[
{
id: "1", brand: "Premium Stones", name: "Italian Marble", price: "From $85/sq ft", rating: 5,
reviewCount: "2.3k", imageSrc: "http://img.b2bpic.net/free-photo/bass-fish-dish-assortment_23-2148950213.jpg", imageAlt: "Elegant white Italian marble with natural veining"
},
{
id: "2", brand: "Premium Stones", name: "Engineered Quartz", price: "From $65/sq ft", rating: 5,
reviewCount: "1.8k", imageSrc: "http://img.b2bpic.net/free-photo/turkish-dessert-kadayif-bowl-marble_114579-70998.jpg", imageAlt: "Modern engineered quartz in sophisticated neutral tones"
},
{
id: "3", brand: "Premium Stones", name: "Natural Granite", price: "From $55/sq ft", rating: 5,
reviewCount: "3.1k", imageSrc: "http://img.b2bpic.net/free-photo/whole-fresh-orange-fruits-with-leaves-placed-white-bowl_114579-46635.jpg", imageAlt: "Premium natural granite with rich color variations"
}
]}
/>
</div>
<div id="feature" data-section="feature">
<FeatureCardTwentyFour
title="Why Choose Our Stone Materials"
description="Each material is selected for superior performance, aesthetic appeal, and long-term value in your kitchen."
tag="Material Features"
tagIcon={Award}
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={true}
animationType="slide-up"
features={[
{
id: "1", title: "Unmatched Durability", author: "Stone Experts", description: "Our materials withstand daily kitchen demands with scratch, stain, and heat resistance. Engineered to last a lifetime with proper care.", tags: ["Heat Resistant", "Scratch Proof", "Stain Resistant"],
imageSrc: "http://img.b2bpic.net/free-photo/closeup-piece-dough-female-hands-working-with-dough_169016-19695.jpg", imageAlt: "Stone durability testing and quality assurance process"
},
{
id: "2", title: "Timeless Aesthetic Beauty", author: "Design Team", description: "From classic marble elegance to contemporary engineered designs, each stone enhances your kitchen's visual appeal and adds lasting value.", tags: ["Natural Patterns", "Designer Approved", "Luxury Appeal"],
imageSrc: "http://img.b2bpic.net/free-photo/ripe-sliced-banana-bowl-porridge-marble-surface_114579-61246.jpg", imageAlt: "Beautiful kitchen design showcasing premium stone countertops"
}
]}
/>
</div>
<div id="about" data-section="about">
<MetricSplitMediaAbout
tag="Our Commitment"
tagIcon={Shield}
tagAnimation="slide-up"
title="Craftsmanship Meets Quality"
description="For over 25 years, we've been sourcing and providing premium kitchen stone materials to homeowners, designers, and contractors across the region. Our commitment to quality, transparent pricing, and expert guidance has made us the trusted choice for discerning customers."
metrics={[
{ value: "25+", title: "Years of Excellence" },
{ value: "10K+", title: "Satisfied Customers" }
]}
imageSrc="http://img.b2bpic.net/free-photo/man-works-machine-with-wooden-product-manufacturing_169016-4746.jpg"
imageAlt="Master stonecutters demonstrating premium craftsmanship"
useInvertedBackground={false}
mediaAnimation="slide-up"
/>
</div>
<div id="testimonial" data-section="testimonial">
<TestimonialCardFive
title="What Our Clients Say"
description="Real stories from homeowners, interior designers, and contractors who trusted us for their kitchen transformations."
tag="Client Reviews"
tagIcon={Heart}
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={true}
testimonials={[
{
id: "1", name: "Sarah Mitchell, Homeowner", date: "Date: 15 March 2025", title: "The Perfect Kitchen Transformation", quote: "We were overwhelmed by choices until the team helped us select the perfect marble. Five months into ownership, our kitchen is still the jewel of our home. The quality and durability exceed expectations.", tag: "Residential", avatarSrc: "http://img.b2bpic.net/free-photo/couple-working-together-from-home-kitchen_23-2149208538.jpg", avatarAlt: "Sarah Mitchell", imageSrc: "http://img.b2bpic.net/free-photo/couple-working-together-from-home-kitchen_23-2149208538.jpg", imageAlt: "Satisfied homeowner with new kitchen countertop"
},
{
id: "2", name: "James Chen, Interior Designer", date: "Date: 22 February 2025", title: "Reliable Partner for Design Excellence", quote: "I recommend Premium Stones to all my clients. Their material selection is impeccable, pricing is transparent, and they always deliver on time. They understand design vision.", tag: "Professional", avatarSrc: "http://img.b2bpic.net/free-photo/tiler-working-renovation-apartment_23-2149278646.jpg", avatarAlt: "James Chen", imageSrc: "http://img.b2bpic.net/free-photo/tiler-working-renovation-apartment_23-2149278646.jpg", imageAlt: "Professional designer reviewing stone samples"
},
{
id: "3", name: "Marcus Rodriguez, Contractor", date: "Date: 10 February 2025", title: "Quality Materials Make Our Job Easier", quote: "Installing Premium Stones materials is a pleasure. The consistency and quality mean fewer callbacks and happier clients. We've been using them for three years now.", tag: "Trade Partner", avatarSrc: "http://img.b2bpic.net/free-photo/he-is-satisfied-from-his-life_329181-2789.jpg", avatarAlt: "Marcus Rodriguez", imageSrc: "http://img.b2bpic.net/free-photo/he-is-satisfied-from-his-life_329181-2789.jpg", imageAlt: "Contractor installing premium stone countertop"
},
{
id: "4", name: "David & Lisa Wong, Homeowners", date: "Date: 28 January 2025", title: "Worth Every Dollar", quote: "We chose quartz for longevity and we're thrilled. No regrets. The installation team was professional, and the final result is stunning. Best investment in our home.", tag: "Residential", avatarSrc: "http://img.b2bpic.net/free-photo/portrait-modern-couple-home_23-2148115579.jpg", avatarAlt: "David and Lisa Wong", imageSrc: "http://img.b2bpic.net/free-photo/portrait-modern-couple-home_23-2148115579.jpg", imageAlt: "Happy couple in their new kitchen"
},
{
id: "5", name: "Amanda Foster, Design Professional", date: "Date: 15 January 2025", title: "Exceptional Product and Service", quote: "The granite selection they offered for my project was perfect. Their team answered all my technical questions, and the material arrived exactly as specified. Highly professional.", tag: "Professional", avatarSrc: "http://img.b2bpic.net/free-photo/portrait-happy-cute-woman-home-writing-notebook-makes-notes-her-diary-has-planner_1258-201646.jpg", avatarAlt: "Amanda Foster", imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-cute-woman-home-writing-notebook-makes-notes-her-diary-has-planner_1258-201646.jpg", imageAlt: "Professional designer with stone samples"
},
{
id: "6", name: "Robert Thompson, Homeowner", date: "Date: 2 January 2025", title: "Premium Quality, Lasting Beauty", quote: "Our limestone counters are as beautiful today as they were two years ago. Premium Stones provided expert care instructions and continues to support us post-installation.", tag: "Residential", avatarSrc: "http://img.b2bpic.net/free-photo/portrait-modern-woman-home_23-2148115520.jpg", avatarAlt: "Robert Thompson", imageSrc: "http://img.b2bpic.net/free-photo/portrait-modern-woman-home_23-2148115520.jpg", imageAlt: "Homeowner enjoying premium kitchen"
}
]}
/>
</div>
<div id="metric" data-section="metric">
<MetricCardEleven
title="Proven Excellence"
description="Our track record speaks to quality, reliability, and customer satisfaction across thousands of successful installations."
tag="Performance"
tagIcon={TrendingUp}
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
animationType="slide-up"
metrics={[
{
id: "1", value: "98%", title: "Customer Satisfaction", description: "Homeowners and professionals rate us highly for quality and service", imageSrc: "http://img.b2bpic.net/free-photo/couple-having-fun-fight-kitchen_23-2148018361.jpg", imageAlt: "Professional installation team at work"
},
{
id: "2", value: "25+ yrs", title: "Industry Experience", description: "Two decades of expertise sourcing and delivering premium materials", imageSrc: "http://img.b2bpic.net/free-photo/couple-having-fun-fight-kitchen_23-2148018361.jpg", imageAlt: "Experienced installation team"
}
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactCTA
tag="Get in Touch"
tagIcon={Mail}
tagAnimation="slide-up"
title="Ready to Transform Your Kitchen?"
description="Connect with our design experts to explore material options, discuss your vision, and receive a transparent quote. Whether you're a homeowner, designer, or contractor, we're here to help."
buttons={[
{ text: "Schedule Consultation", href: "mailto:hello@premiumstones.com" },
{ text: "View Gallery", href: "#product" }
]}
buttonAnimation="slide-up"
background={{ variant: "plain" }}
useInvertedBackground={true}
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="Premium Stones"
columns={[
{
title: "Collections", items: [
{ label: "Natural Marble", href: "#product" },
{ label: "Engineered Quartz", href: "#product" },
{ label: "Granite & Slate", href: "#product" },
{ label: "Limestone", href: "#product" }
]
},
{
title: "Company", items: [
{ label: "About Us", href: "#about" },
{ label: "Our Team", href: "#about" },
{ label: "Testimonials", href: "#testimonial" },
{ label: "Blog", href: "#" }
]
},
{
title: "Support", items: [
{ label: "Contact Us", href: "#contact" },
{ label: "Care Guide", href: "#" },
{ label: "FAQ", href: "#" },
{ label: "Installation", href: "#" }
]
},
{
title: "Legal", items: [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms of Service", href: "#" },
{ label: "Warranty", href: "#" },
{ label: "Sitemap", href: "#" }
]
}
]}
copyrightText="© 2025 Premium Stones. All rights reserved."
/>
</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-inter), sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
overscroll-behavior-y: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-libre-baskerville), 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: #ffffff;
--card: #f9f9f9;
--foreground: #000f06e6;
--primary-cta: #0a7039;
--primary-cta-text: #ffffff;
--secondary-cta: #f9f9f9;
--secondary-cta-text: #000f06e6;
--accent: #e2e2e2;
--background-accent: #c4c4c4;
/* 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;
}
}