bender/db408b3b-7d01-4afa-98d0-b85e033a26ed
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-09 16:28:00 +00:00
commit 9ab43573fe
627 changed files with 85312 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";

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

File diff suppressed because it is too large Load Diff

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

@@ -0,0 +1,258 @@
"use client"
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { Flame, Star, Utensils, MapPin, UtensilsCrossed, Heart, Gift, Briefcase, BookOpen, Users } from 'lucide-react';
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="text-stagger"
defaultTextAnimation="entrance-slide"
borderRadius="soft"
contentWidth="medium"
sizing="mediumLargeSizeMediumTitles"
background="none"
cardStyle="inset"
primaryButtonStyle="flat"
secondaryButtonStyle="glass"
headingFontWeight="bold"
>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{ name: "Menu", id: "menu" },
{ name: "Story", id: "story" },
{ name: "Find Us", id: "location" },
{ name: "Catering", id: "catering" },
{ name: "Order", id: "order" }
]}
brandName="Lalo's Tacos"
bottomLeftText="Phoenix, AZ"
bottomRightText="info@lalos-tacos.com"
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardScroll
title="The Tacos Phoenix Waits For"
description="Authentic street tacos. Legendary flavor. Worth the line."
tag="Street Luxury"
tagIcon={Flame}
tagAnimation="slide-up"
background={{ variant: "plain" }}
videoSrc="http://img.b2bpic.net/free-photo/fashion-girl-vintage-cafe-style-pin-up_1321-1401.jpg"
videoAriaLabel="Grill flames and sizzling tacos preparation"
buttons={[
{ text: "View Menu", href: "#menu" },
{ text: "Find the Truck", href: "#location" }
]}
buttonAnimation="slide-up"
/>
</div>
<div id="social-proof" data-section="social-proof">
<TestimonialCardFive
title="Phoenix Can't Get Enough"
description="Real customers sharing why Lalo's Tacos is worth the wait."
tag="Reviews"
tagIcon={Star}
textboxLayout="default"
useInvertedBackground={false}
testimonials={[
{
id: "1", name: "Maria Rodriguez, Local Phoenix Resident", date: "Date: 15 March 2025", title: "The BEST tacos in the west valley", quote: "I drive across the valley just for Lalo's tacos. The flavor, the quality, the vibe—everything is perfect. Worth every minute of the wait.", tag: "5-Star Review", avatarSrc: "http://img.b2bpic.net/free-photo/young-person-enjoying-meal_23-2151525802.jpg", avatarAlt: "smiling customer eating tacos outdoor", imageSrc: "http://img.b2bpic.net/free-photo/young-person-enjoying-meal_23-2151525802.jpg", imageAlt: "smiling customer eating tacos outdoor"
},
{
id: "2", name: "James Chen, Food Blogger", date: "Date: 8 March 2025", title: "Flavor is insane. Worth the wait every time.", quote: "As someone who reviews food constantly, Lalo's stands out. The birria is next level—juicy, perfectly seasoned, and that consommé is addictive. This is authentic street food done right.", tag: "Featured Review", avatarSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-cute-winking-girl-showing-yellow-pepper-standing-kitchen-making-vegetarian_1258-193369.jpg", avatarAlt: "smiling woman enjoying tacos casual portrait", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-cute-winking-girl-showing-yellow-pepper-standing-kitchen-making-vegetarian_1258-193369.jpg", imageAlt: "smiling woman enjoying tacos casual portrait"
},
{
id: "3", name: "Sophia Martinez, Corporate Events Manager", date: "Date: 22 February 2025", title: "Birria tacos are next level", quote: "Hired Lalo's for our company event and everyone raved about the tacos. The catering service is professional, the food is incredible, and the team is genuinely friendly. Highly recommend.", tag: "Business Review", avatarSrc: "http://img.b2bpic.net/free-photo/asian-woman-being-happy-after-buying-street-food_23-2148952832.jpg", avatarAlt: "smiling man with tacos outdoor casual", imageSrc: "http://img.b2bpic.net/free-photo/asian-woman-being-happy-after-buying-street-food_23-2148952832.jpg", imageAlt: "smiling man with tacos outdoor casual"
},
{
id: "4", name: "David Park, Weekend Regular", date: "Date: 28 January 2025", title: "My family's new favorite tradition", quote: "Every Thursday night, we make the trip. The tacos are amazing, but it's also the energy and people. Lalo's has become part of our family routine.", tag: "Regular Customer", avatarSrc: "http://img.b2bpic.net/free-photo/young-woman-having-fun-while-sitting-with-her-friends-dining-table-eating-dessert_637285-3239.jpg", avatarAlt: "smiling young adult eating street food", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-having-fun-while-sitting-with-her-friends-dining-table-eating-dessert_637285-3239.jpg", imageAlt: "smiling young adult eating street food"
},
{
id: "5", name: "Jessica Wong, Restaurant Owner", date: "Date: 15 January 2025", title: "Authenticity you can taste", quote: "As someone in the food industry, I know quality. Lalo's executes with precision and passion. Fresh ingredients, proper technique, and real flavor. This is what street food should be.", tag: "Industry Pro", avatarSrc: "http://img.b2bpic.net/free-photo/medium-shot-friends-eating-seaweed-snacks_23-2150670852.jpg", avatarAlt: "smiling customer taco meal outdoor happy", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-friends-eating-seaweed-snacks_23-2150670852.jpg", imageAlt: "smiling customer taco meal outdoor happy"
},
{
id: "6", name: "Miguel Santos, Longtime Friend", date: "Date: 3 January 2025", title: "Supporting a legend in the making", quote: "Lalo's vision came to life exactly as he imagined. Every taco represents the passion and tradition he brought to this business. Proud to see it thriving.", tag: "Friend & Supporter", avatarSrc: "http://img.b2bpic.net/free-photo/young-woman-eating-sushi-park-picnic-nature_169016-22794.jpg", avatarAlt: "smiling woman eating tacos satisfied", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-eating-sushi-park-picnic-nature_169016-22794.jpg", imageAlt: "smiling woman eating tacos satisfied"
}
]}
/>
</div>
<div id="menu" data-section="menu">
<ProductCardTwo
title="Signature Tacos"
description="The tacos everyone lines up for. Each one crafted with fire, flavor, and family tradition."
tag="Menu"
tagIcon={Utensils}
textboxLayout="default"
animationType="slide-up"
useInvertedBackground={false}
gridVariant="uniform-all-items-equal"
carouselMode="buttons"
products={[
{
id: "1", brand: "Signature", name: "Birria Tacos", price: "$6.50", rating: 5,
reviewCount: "2.3k", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-tacos-lime-plate_23-2148629354.jpg", imageAlt: "Birria tacos with crispy tortilla and dipping consommé"
},
{
id: "2", brand: "Signature", name: "Carne Asada", price: "$5.50", rating: 5,
reviewCount: "1.8k", imageSrc: "http://img.b2bpic.net/free-photo/delicious-tacos-with-sauce-arrangement_23-2148629320.jpg", imageAlt: "Char-grilled steak tacos with onions and cilantro"
},
{
id: "3", brand: "Signature", name: "Al Pastor", price: "$5.00", rating: 5,
reviewCount: "1.5k", imageSrc: "http://img.b2bpic.net/free-photo/burritos_23-2148024799.jpg", imageAlt: "Marinated pork tacos with pineapple and salsa"
},
{
id: "4", brand: "Premium", name: "Quesabirria", price: "$7.00", rating: 5,
reviewCount: "1.9k", imageSrc: "http://img.b2bpic.net/free-photo/top-view-delicious-tomato-soup-cooked-from-fresh-red-tomatoes-dark-background-tomato-soup-dish-sauce-meal_140725-96777.jpg", imageAlt: "Cheese-crusted taco served with rich dipping broth"
}
]}
buttons={[{ text: "See Full Menu", href: "#" }]}
/>
</div>
<div id="story" data-section="story">
<TextSplitAbout
title="The Lalo's Story"
description={[
"What started as a small taco truck quickly became one of the most talked-about taco spots in the West Valley. Family-run, flavor-obsessed, and serving tacos that people drive across the city for.", "Every tortilla is warmed on the grill. Every salsa is made fresh. Every taco is packed with flavor. Lalo's Tacos started with one mission: make tacos the way they're supposed to taste.", "When locals say it's worth the wait, they mean it. Limited hours create authentic scarcity. High demand proves exceptional quality. This is street food elevated to luxury."
]}
useInvertedBackground={false}
showBorder={true}
buttons={[{ text: "Order Pickup", href: "#" }]}
/>
</div>
<div id="location" data-section="location">
<ContactFaq
ctaTitle="Find the Truck"
ctaDescription="We're open Thursday–Saturday, 6pm–11pm in Glendale, AZ. Follow us on Instagram for location updates."
ctaIcon={MapPin}
ctaButton={{ text: "Get Directions", href: "#" }}
useInvertedBackground={false}
animationType="slide-up"
faqs={[
{
id: "1", title: "What are your hours?", content: "We're open Thursday, Friday, and Saturday from 6pm to 11pm. Limited hours keep our operation authentic and our food fresh."
},
{
id: "2", title: "Where are you located?", content: "Glendale, Arizona. Follow our Instagram for exact location updates each week. We move strategically to reach our community."
},
{
id: "3", title: "Do you offer catering?", content: "Yes! We handle weddings, birthdays, corporate events, and school gatherings. Contact us to book your event."
},
{
id: "4", title: "Can I order online?", content: "We accept walk-up orders and phone orders for catering. Check our Instagram for ordering details and special promotions."
}
]}
/>
</div>
<div id="catering" data-section="catering">
<FeatureBorderGlow
title="Bring Lalo's Tacos to Your Event"
description="Catering that elevates any celebration. From intimate gatherings to large corporate events, we handle everything."
tag="Catering Services"
tagIcon={UtensilsCrossed}
textboxLayout="default"
animationType="slide-up"
useInvertedBackground={false}
features={[
{
icon: Heart,
title: "Weddings", description: "Make your special day unforgettable with authentic street tacos that guests will rave about for years."
},
{
icon: Gift,
title: "Birthday Parties", description: "Celebrate with food everyone loves. We bring the energy and incredible flavors to your party."
},
{
icon: Briefcase,
title: "Corporate Events", description: "Impress clients and team members with premium catering that combines quality, authenticity, and professionalism."
},
{
icon: BookOpen,
title: "School Events", description: "Support your school community with crowd-pleasing tacos that are always a hit with students and parents."
},
{
icon: Users,
title: "Community Gatherings", description: "Bring people together around exceptional food. Perfect for fundraisers, reunions, and neighborhood events."
},
{
icon: Star,
title: "Custom Orders", description: "Looking for something special? We work with you to create the perfect taco experience for your event."
}
]}
buttons={[{ text: "Book Catering", href: "#" }]}
/>
</div>
<div id="final-cta" data-section="final-cta">
<MetricCardSeven
title="Worth the Wait"
description="Join hundreds of satisfied customers who've made Lalo's Tacos part of their tradition."
tag="Call to Action"
textboxLayout="default"
animationType="slide-up"
useInvertedBackground={false}
metrics={[
{
id: "1", value: "Open 3 Nights", title: "Limited Availability Creates Authentic Demand", items: ["Thursday–Saturday exclusivity", "Fresh ingredients every night", "Consistently exceptional quality"]
},
{
id: "2", value: "5-Star Rated", title: "Customer Satisfaction Speaks for Itself", items: ["Hundreds of five-star reviews", "Community-driven loyalty", "Worth the line every time"]
},
{
id: "3", value: "Family First", title: "Tradition Meets Innovation", items: ["Authentic recipes passed down", "Modern premium presentation", "Street food elevated to luxury"]
}
]}
buttons={[
{ text: "Find the Truck", href: "#location" },
{ text: "Book Catering", href: "#catering" }
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseReveal
columns={[
{
title: "Explore", items: [
{ label: "Menu", href: "#menu" },
{ label: "Our Story", href: "#story" },
{ label: "Catering", href: "#catering" }
]
},
{
title: "Connect", items: [
{ label: "Instagram", href: "https://instagram.com" },
{ label: "Email", href: "mailto:info@lalos-tacos.com" },
{ label: "Find Us", href: "#location" }
]
},
{
title: "Legal", items: [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms of Service", href: "#" },
{ label: "Contact", href: "#" }
]
}
]}
copyrightText="© 2025 Lalo's Tacos | Phoenix, Arizona"
/>
</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-font-inter-tight), sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
overscroll-behavior-y: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-font-inter-tight), 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: #f5f5f5;
--card: #ffffff;
--foreground: #1c1c1c;
--primary-cta: #341f51;
--primary-cta-text: #f5f5f5;
--secondary-cta: #ffffff;
--secondary-cta-text: #1c1c1c;
--accent: #6139e6;
--background-accent: #b3a8e8;
/* 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;
}
}