bender/08b94cea-17d7-4fca-84aa-2b04eee9d279
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-11 08:30:16 +00:00
commit 35b9e28072
628 changed files with 85181 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";

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

@@ -0,0 +1,42 @@
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 { Inter_Tight } from "next/font/google";
export const metadata: Metadata = {
title: 'The Epic Burger | Premium Gourmet Burgers in Kalyani Nagar, Pune',
description: 'Experience luxury gourmet burgers at The Epic Burger in Pune. Premium ingredients, perfect grilling, and unforgettable flavors. Order online or dine in today.',
};
const interTight = Inter_Tight({
variable: "--font-inter-tight", subsets: ["latin"],
weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
});
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en" suppressHydrationWarning>
<ServiceWrapper>
<body className={`${interTight.variable} antialiased`}>
<Tag />
{children}
<script
dangerouslySetInnerHTML={{
__html: `${getVisualEditScript()}`
}}
/>
</body>
</ServiceWrapper>
</html>
);
}

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

@@ -0,0 +1,222 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
import ProductCardFour from "@/components/sections/product/ProductCardFour";
import TestimonialCardThirteen from "@/components/sections/testimonial/TestimonialCardThirteen";
import MediaAbout from "@/components/sections/about/MediaAbout";
import FeatureCardSix from "@/components/sections/feature/FeatureCardSix";
import BlogCardOne from "@/components/sections/blog/BlogCardOne";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import { Flame, Star } from "lucide-react";
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="hover-bubble"
defaultTextAnimation="reveal-blur"
borderRadius="soft"
contentWidth="smallMedium"
sizing="large"
background="grid"
cardStyle="solid"
primaryButtonStyle="primary-glow"
secondaryButtonStyle="layered"
headingFontWeight="bold"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
brandName="The Epic Burger"
navItems={[
{ name: "Menu", id: "menu" },
{ name: "About", id: "about" },
{ name: "Location", id: "location" },
{ name: "Contact", id: "contact" }
]}
button={{ text: "Order Now", href: "#contact" }}
animateOnLoad={true}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitKpi
title="Pune's Most Epic Burgers 🍔"
description="Crafted with premium ingredients, perfectly grilled patties, and unforgettable flavors. Experience luxury street food at The Epic Burger."
background={{ variant: "glowing-orb" }}
kpis={[
{ value: "4.7★", label: "Rating from 500+ Customers" },
{ value: "Premium", label: "Michelin-Style Quality" },
{ value: "11 PM", label: "Late Night Delivery Available" }
]}
enableKpiAnimation={true}
tag="Kalyani Nagar, Pune"
tagAnimation="slide-up"
buttons={[
{ text: "🔥 Explore Menu", href: "#menu" },
{ text: "🛵 Order Online", href: "#contact" }
]}
buttonAnimation="blur-reveal"
imageSrc="http://img.b2bpic.net/free-photo/closeup-shot-tasty-looking-burger-isolated-black-surface_181624-39131.jpg"
imageAlt="Epic Burger Premium Cinematic Shot"
mediaAnimation="slide-up"
imagePosition="right"
/>
</div>
<div id="menu" data-section="menu" className="relative w-full py-20">
<ProductCardFour
title="Signature Burgers"
description="Our legendary burger collection crafted with premium ingredients and creative flavors. Each burger is a culinary masterpiece."
tag="Featured Menu"
tagIcon={Flame}
tagAnimation="slide-up"
products={[
{
id: "korean-fried", name: "Korean Fried Chicken Burger", price: "₹349", variant: "Crispy Korean Marinated", imageSrc: "http://img.b2bpic.net/free-photo/juicy-cheeseburger-with-pickles-onions_140725-9559.jpg", imageAlt: "Korean Fried Chicken Burger"
},
{
id: "bbq-double", name: "BBQ Double Trouble Burger", price: "₹449", variant: "Double Beef Patty with BBQ Sauce", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-close-up-burger-with-fries-wooden-board_23-2148238421.jpg", imageAlt: "BBQ Double Trouble Burger"
},
{
id: "chicken-carnival", name: "Chicken Cheese Carnival Burger", price: "₹349", variant: "Grilled Chicken with Melted Cheese", imageSrc: "http://img.b2bpic.net/free-photo/big-sandwich-hamburger-with-juicy-chicken-burger-cheese-tomato-red-onion-wooden-table_2829-19626.jpg", imageAlt: "Chicken Cheese Carnival Burger"
},
{
id: "grilled-chicken", name: "Grilled Chicken Burger", price: "₹299", variant: "Premium Grilled Chicken Breast", imageSrc: "http://img.b2bpic.net/free-photo/tofu-burger-with-vegetables-plate_1220-7121.jpg", imageAlt: "Grilled Chicken Burger"
}
]}
gridVariant="uniform-all-items-equal"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
buttons={[{ text: "View Full Menu", href: "#" }]}
/>
</div>
<div id="social-proof" data-section="social-proof" className="relative w-full py-20">
<TestimonialCardThirteen
title="What Our Customers Say"
description="Join thousands of satisfied burger lovers who have experienced The Epic Burger"
tag="Social Proof"
tagIcon={Star}
textboxLayout="default"
useInvertedBackground={false}
testimonials={[
{
id: "1", name: "Rajesh Kumar", handle: "@rajesh_pune", testimonial: "Best burgers of my life. The patties are juicy and the ingredients taste premium. Absolutely worth every rupee!", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-businessman-wearing-glasses_329181-677.jpg", imageAlt: "Rajesh Kumar"
},
{
id: "2", name: "Priya Sharma", handle: "@priya_foodie", testimonial: "Amazing ambience and incredible burgers. Definitely one of the best places in Pune. Can't wait to come back!", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/picture-beautiful-smiling-woman-against-blurry-background_181624-19438.jpg", imageAlt: "Priya Sharma"
},
{
id: "3", name: "Arjun Singh", handle: "@arjun_taste", testimonial: "Perfect crispy chicken burgers and great drinks. The Korean Fried Chicken burger is absolutely legendary.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/satisfied-self-assured-handsome-man-with-confident-expression-makes-okay-gesture-shows-his-agreement-with-something-dressed-elegant-white-shirt-poses-studio-body-language-concept_176532-8379.jpg", imageAlt: "Arjun Singh"
},
{
id: "4", name: "Sneha Desai", handle: "@sneha_epicburger", testimonial: "The quality is unmatchable. Every bite feels like a luxury experience. This is premium street food done right.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/mature-woman-with-grey-hair-posing-with-violet-jacket_343059-91.jpg", imageAlt: "Sneha Desai"
},
{
id: "5", name: "Vikram Patel", handle: "@vikram_grill", testimonial: "Impressed with the attention to detail. Fresh ingredients, perfect grilling, and an unforgettable experience every time.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-man-posing_23-2150171293.jpg", imageAlt: "Vikram Patel"
},
{
id: "6", name: "Anjali Gupta", handle: "@anjali_eats", testimonial: "The Epic Burger has set a new standard for burgers in Pune. Their delivery service is also incredibly fast.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/business-woman-posing-street_23-2148213468.jpg", imageAlt: "Anjali Gupta"
}
]}
showRating={true}
animationType="slide-up"
/>
</div>
<div id="about" data-section="about" className="relative w-full py-20">
<MediaAbout
title="The Epic Burger Story"
description="The Epic Burger in Kalyani Nagar has quickly become one of Pune's favorite burger destinations. Known for its premium ingredients, juicy patties, and creative flavors like the Korean Fried Chicken Burger, the restaurant offers an unforgettable dining experience for burger lovers. We believe in serving more than just food – we serve an experience."
tag="About Us"
tagAnimation="slide-up"
imageSrc="http://img.b2bpic.net/free-photo/young-woman-eating-burger-street-cafe-close-up_169016-43760.jpg"
imageAlt="The Epic Burger Restaurant Interior"
useInvertedBackground={false}
buttons={[{ text: "Reserve a Table", href: "#contact" }]}
/>
</div>
<div id="services" data-section="services" className="relative w-full py-20">
<FeatureCardSix
title="How We Serve You"
description="Multiple ways to experience The Epic Burger's premium offerings"
tag="Services"
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
features={[
{
id: 1,
title: "🍽 Dine-In Experience", description: "Enjoy our premium burgers in our modern, luxurious dining space with premium ambiance and exceptional service.", imageSrc: "http://img.b2bpic.net/free-photo/group-friends-eating-restaurant_23-2148006610.jpg", imageAlt: "Dine-In Experience"
},
{
id: 2,
title: "🚗 Kerbside Pickup", description: "Order online and pick up directly from your car. Fresh, hot burgers delivered to you without leaving your vehicle.", imageSrc: "http://img.b2bpic.net/free-photo/happy-barista-hanging-open-sign-front-door-bar_637285-3398.jpg", imageAlt: "Kerbside Pickup"
},
{
id: 3,
title: "📦 No-Contact Delivery", description: "Safe and hygienic delivery right to your doorstep. Your favorite burgers arrive fresh and hot within 30 minutes.", imageSrc: "http://img.b2bpic.net/free-photo/front-view-male-courier-yellow-uniform-holding-food-package-delivery-coffee-cups-pink-background_140725-27159.jpg", imageAlt: "No-Contact Delivery"
}
]}
/>
</div>
<div id="gallery" data-section="gallery" className="relative w-full py-20">
<BlogCardOne
title="Food Gallery"
description="Visual journey through our premium burger collection and restaurant ambiance"
tag="Gallery"
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
animationType="slide-up"
blogs={[
{
id: "1", category: "Burgers", title: "Gourmet Burger Close-Up", excerpt: "Premium beef patty with fresh toppings and artisanal bun", imageSrc: "http://img.b2bpic.net/free-photo/delicious-hamburger-with-blurred-ketchup-cup_23-2148374944.jpg", imageAlt: "Gourmet Burger Close-Up", authorName: "The Epic Burger", authorAvatar: "http://img.b2bpic.net/free-vector/burgers-sale-instagram-post-collection_23-2148882939.jpg", date: "Premium Collection"
},
{
id: "2", category: "Sides", title: "Crispy Fries Perfection", excerpt: "Golden, crispy fries with perfectly seasoned salt", imageSrc: "http://img.b2bpic.net/free-photo/arrangement-potato-fries-wooden-background_23-2148501556.jpg", imageAlt: "Crispy Fries Perfection", authorName: "The Epic Burger", authorAvatar: "http://img.b2bpic.net/free-vector/burgers-sale-instagram-post-collection_23-2148882939.jpg", date: "Signature Sides"
},
{
id: "3", category: "Drinks", title: "Craft Beverages", excerpt: "Premium drinks perfectly paired with our burgers", imageSrc: "http://img.b2bpic.net/free-photo/man-with-his-friend-drinking-beer-bar_171337-19347.jpg", imageAlt: "Craft Beverages", authorName: "The Epic Burger", authorAvatar: "http://img.b2bpic.net/free-vector/burgers-sale-instagram-post-collection_23-2148882939.jpg", date: "Beverage Selection"
},
{
id: "4", category: "Ambiance", title: "Restaurant Ambience", excerpt: "Modern luxury dining space with premium aesthetics", imageSrc: "http://img.b2bpic.net/free-photo/restaurant-hall-with-lots-table_140725-6309.jpg", imageAlt: "Restaurant Ambience", authorName: "The Epic Burger", authorAvatar: "http://img.b2bpic.net/free-vector/burgers-sale-instagram-post-collection_23-2148882939.jpg", date: "Dining Experience"
}
]}
/>
</div>
<div id="cta" data-section="cta" className="relative w-full py-20">
<ContactCenter
tag="Ready to Order?"
title="Craving Something Epic?"
description="Order your favorite burgers now and experience premium quality delivered to your doorstep or enjoy dining in our luxury space."
background={{ variant: "rotated-rays-animated" }}
useInvertedBackground={false}
inputPlaceholder="Enter your email for updates"
buttonText="Order Now"
termsText="By ordering, you agree to our terms and conditions. We ensure fresh ingredients and quick delivery."
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="The Epic Burger"
leftLink={{ text: "Privacy Policy", href: "#" }}
rightLink={{ text: "Terms & Conditions", href: "#" }}
/>
</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-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-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: #1f3251;
--primary-cta-text: #f5f5f5;
--secondary-cta: #ffffff;
--secondary-cta-text: #1c1c1c;
--accent: #15479c;
--background-accent: #FF6A00;
/* 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;
}
}