bender/7f58a4ed-e44c-4bcc-beb5-72a2a79ec1de
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-10 16:13:34 +00:00
commit 14ea5a3cf6
628 changed files with 85222 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";

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

@@ -0,0 +1,45 @@
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 { Libre_Baskerville } from "next/font/google";
export const metadata: Metadata = {
title: 'Mulhaupt Comestibles | Produits Gastronomiques Premium Romanel',
description: 'Découvrez Mulhaupt Comestibles, maison locale spécialisée dans la sélection de produits alimentaires haut de gamme, fraîcheur irréprochable et conseil expert en boutique à Romanel-sur-Lausanne.',
};
const libreBaskerville = Libre_Baskerville({
variable: "--font-libre-baskerville", subsets: ["latin"],
weight: ["400", "700"],
});
const inter = Inter({
variable: "--font-inter", subsets: ["latin"],
});
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en" suppressHydrationWarning>
<ServiceWrapper>
<body className={`${libreBaskerville.variable} ${inter.variable} antialiased`}>
<Tag />
{children}
<script
dangerouslySetInnerHTML={{
__html: `${getVisualEditScript()}`
}}
/>
</body>
</ServiceWrapper>
</html>
);
}

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

@@ -0,0 +1,229 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { Award, CheckCircle, Heart, MapPin, Sparkles, Zap, Users } from "lucide-react";
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
defaultTextAnimation="reveal-blur"
borderRadius="soft"
contentWidth="medium"
sizing="mediumLargeSizeMediumTitles"
background="circleGradient"
cardStyle="solid"
primaryButtonStyle="flat"
secondaryButtonStyle="solid"
headingFontWeight="light"
>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{ name: "Accueil", id: "hero" },
{ name: "Qualité", id: "about" },
{ name: "Produits", id: "product" },
{ name: "Avis Clients", id: "testimonial" },
{ name: "Nous Contacter", id: "contact" }
]}
brandName="Mulhaupt Comestibles"
bottomLeftText="Route de la Charbonnière 1, 1032 Romanel-sur-Lausanne"
bottomRightText="+41 (0)21 731 0 740"
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitDoubleCarousel
title="La qualité au service du goût"
description="Une maison de confiance à Romanel-sur-Lausanne, reconnue pour la fraîcheur irréprochable de ses produits, la qualité de sa sélection rigoureuse et le conseil avisé en boutique. Depuis des années, Mulhaupt Comestibles cultive l'excellence à chaque étape."
tag="Maison de Confiance"
tagIcon={Sparkles}
tagAnimation="blur-reveal"
buttons={[
{ text: "Découvrir la sélection", href: "product" },
{ text: "Nous contacter", href: "contact" }
]}
buttonAnimation="blur-reveal"
background={{ variant: "circleGradient" }}
leftCarouselItems={[
{ imageSrc: "http://img.b2bpic.net/free-photo/close-up-japanese-street-food_23-2149287845.jpg", imageAlt: "Produits de la mer frais" },
{ imageSrc: "http://img.b2bpic.net/free-photo/front-view-chef-sprinkled-black-pepper-raw-fish-slices-cutting-board-vegetables-wood-serving-board-kitchen-table_179666-44326.jpg", imageAlt: "Viandes sélectionnées premium" },
{ imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-looking-labels_23-2149148516.jpg", imageAlt: "Épicerie fine et spécialités" },
{ imageSrc: "http://img.b2bpic.net/free-photo/midsection-man-carrying-crate-with-freshly-harvested-vegetables-garden_23-2147844272.jpg", imageAlt: "Sélection saisonnière fraîche" }
]}
rightCarouselItems={[
{ imageSrc: "http://img.b2bpic.net/free-photo/bottom-view-cheese-pieces-meat-grapes-pomegranate-oval-serving-board-glass-wine-dark-background_140725-108103.jpg", imageAlt: "Fromages et charcuterie fine" },
{ imageSrc: "http://img.b2bpic.net/free-photo/front-view-chef-sprinkled-black-pepper-raw-fish-slices-cutting-board-vegetables-wood-serving-board-kitchen-table_179666-44326.jpg", imageAlt: "Viandes premium boutique" },
{ imageSrc: "http://img.b2bpic.net/free-photo/close-up-japanese-street-food_23-2149287845.jpg", imageAlt: "Fruits de mer fraîcheur" },
{ imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-looking-labels_23-2149148516.jpg", imageAlt: "Spécialités gastronomiques" }
]}
carouselPosition="right"
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardThree
title="Nos forces"
description="Les piliers qui fondent notre réputation d'excellence et de confiance"
textboxLayout="default"
useInvertedBackground={false}
animationType="slide-up"
metrics={[
{ id: "1", icon: CheckCircle, title: "Qualité Sélectionnée", value: "100%" },
{ id: "2", icon: Zap, title: "Fraîcheur Irréprochable", value: "Quotidienne" },
{ id: "3", icon: Users, title: "Conseil Expert", value: "Boutique" },
{ id: "4", icon: Award, title: "Savoir-Faire", value: "Tradition" }
]}
/>
</div>
<div id="about" data-section="about">
<InlineImageSplitTextAbout
heading={[
{ type: "text", content: "Mulhaupt Comestibles," },
{ type: "text", content: "c'est l'engagement d'une maison locale sérieuse, humaine et passionnée envers l'excellence gastronomique." }
]}
useInvertedBackground={false}
buttons={[
{ text: "Visiter la boutique", href: "contact" }
]}
buttonAnimation="blur-reveal"
/>
</div>
<div id="feature" data-section="feature">
<FeatureCardTwentyOne
title="Pourquoi choisir Mulhaupt Comestibles ?"
description="Chaque détail compte. Nous sélectionnons, préparons et servons avec passion pour offrir l'expérience gastronomique que vous méritez."
tag="Excellence"
tagIcon={Heart}
tagAnimation="blur-reveal"
imageSrc="http://img.b2bpic.net/free-photo/two-hommemade-jars-with-jam-oily-basket-shelf-supermarket-grocery-store-made-with-love_627829-8304.jpg"
imageAlt="Intérieur élégant de la boutique Mulhaupt"
mediaAnimation="blur-reveal"
useInvertedBackground={false}
mediaPosition="left"
accordionItems={[
{ id: "1", title: "Sélection Rigoureuse", content: "Chaque produit est choisi avec exigence. Nous travaillons directement avec les meilleurs fournisseurs locaux et régionaux pour garantir qualité, fraîcheur et authenticité à chaque achat." },
{ id: "2", title: "Fraîcheur Garantie", content: "Livraisons quotidiennes, préparations minutieuses, conservation optimale. Nos produits arrivent en boutique frais et le restent. La fraîcheur n'est pas une promesse, c'est notre standard." },
{ id: "3", title: "Conseil en Boutique", content: "Nos experts sont là pour vous. Conseils de préparation, suggestions d'accompagnements, histoires des produits : nous partages nos connaissances pour sublimer votre table." },
{ id: "4", title: "Tradition & Savoir-Faire", content: "Des années d'expérience, une passion pour la gastronomie, un respect du terroir. Mulhaupt Comestibles incarne la tradition locale face à l'authenticité et l'excellence." }
]}
/>
</div>
<div id="product" data-section="product">
<ProductCardFour
title="Nos Univers"
description="Explorez nos domaines de prédilection, chacun sélectionné avec la même exigence de qualité et de fraîcheur."
textboxLayout="default"
useInvertedBackground={false}
gridVariant="three-columns-all-equal-width"
animationType="blur-reveal"
products={[
{ id: "1", name: "Produits de la Mer", price: "Fraîcheur Quotidienne", variant: "Poissons, Huîtres, Fruits de Mer", imageSrc: "http://img.b2bpic.net/free-photo/close-up-japanese-street-food_23-2149287845.jpg", imageAlt: "Sélection produits de la mer premium" },
{ id: "2", name: "Viandes & Spécialités", price: "Qualité Sélectionnée", variant: "Viandes, Charcuterie Fine", imageSrc: "http://img.b2bpic.net/free-photo/front-view-chef-sprinkled-black-pepper-raw-fish-slices-cutting-board-vegetables-wood-serving-board-kitchen-table_179666-44326.jpg", imageAlt: "Viandes premium et charcuterie sélectionnée" },
{ id: "3", name: "Épicerie Fine", price: "Terroir & Tradition", variant: "Fromages, Conserves, Vins", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-looking-labels_23-2149148516.jpg", imageAlt: "Épicerie fine et spécialités gastronomiques" },
{ id: "4", name: "Sélection de Saison", price: "Fraîcheur du Moment", variant: "Fruits, Légumes, Produits Fermiers", imageSrc: "http://img.b2bpic.net/free-photo/midsection-man-carrying-crate-with-freshly-harvested-vegetables-garden_23-2147844272.jpg", imageAlt: "Sélection saisonnière fraîche et biologique" },
{ id: "5", name: "Fromages & Charcuterie", price: "Excellence Garantie", variant: "Sélection Nationale & Internationale", imageSrc: "http://img.b2bpic.net/free-photo/bottom-view-cheese-pieces-meat-grapes-pomegranate-oval-serving-board-glass-wine-dark-background_140725-108103.jpg", imageAlt: "Fromages et charcuterie fine sélectionnés" },
{ id: "6", name: "Vins & Accompagnements", price: "Accords Subtils", variant: "Vins, Spiritueux, Condiments", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-looking-labels_23-2149148516.jpg", imageAlt: "Vins et accompagnements gastronomiques" }
]}
/>
</div>
<div id="socialProof" data-section="socialProof">
<SocialProofOne
title="Nos Partenaires de Confiance"
description="Mulhaupt Comestibles collabore avec les meilleurs producteurs et fournisseurs reconnus pour leur excellence et leur engagement qualité."
textboxLayout="default"
useInvertedBackground={false}
names={[
"Producteurs Régionaux Suisses", "Maisons Vinicoles Prestigieuses", "Fromageries Traditionnelles", "Pêcheries Artisanales Côtières", "Boulangers Artisans Locaux", "Apiculteurs Biologiques", "Producteurs Maraîchers", "Charcuteries Fines Européennes"
]}
speed={40}
showCard={true}
/>
</div>
<div id="testimonial" data-section="testimonial">
<TestimonialCardFifteen
testimonial="Mulhaupt Comestibles a transformé ma façon de cuisiner. La qualité des produits, la fraîcheur incomparable et les conseils avisés de l'équipe font toute la différence. C'est devenu ma destination incontournable pour les occasions spéciales et la cuisine quotidienne."
rating={5}
author="Sophie Mercier, Chef Restauratrice"
avatars={[
{ src: "http://img.b2bpic.net/free-photo/smiley-young-pregnant-woman-portrait_23-2148752234.jpg", alt: "Sophie Mercier" },
{ src: "http://img.b2bpic.net/free-photo/italian-chefcook-dressed-uniform-looking-happy-smiling-camera-colorful-background-man-chef-hat-posing-studio_574295-6058.jpg", alt: "Client satisfait" },
{ src: "http://img.b2bpic.net/free-photo/shop-assistant-taking-pastry_23-2147984961.jpg", alt: "Client heureux" },
{ src: "http://img.b2bpic.net/free-photo/confident-barista-standing-cafe_1170-579.jpg", alt: "Client régulier" },
{ src: "http://img.b2bpic.net/free-vector/pack-expressive-businesswoman-character-flat-design_23-2147606507.jpg", alt: "Client fidèle" },
{ src: "http://img.b2bpic.net/free-photo/confused-businessman-office_1098-3136.jpg", alt: "Client recommandant" }
]}
useInvertedBackground={false}
ratingAnimation="blur-reveal"
avatarsAnimation="blur-reveal"
/>
</div>
<div id="contact" data-section="contact">
<ContactFaq
faqs={[
{ id: "1", title: "Quels sont les horaires d'ouverture ?", content: "Consultez-nous directement au +41 (0)21 731 0 740 ou passez nous voir à la boutique. Nous vous accueillerons avec plaisir pour connaître nos disponibilités et prendre rendez-vous si nécessaire." },
{ id: "2", title: "Proposez-vous des services de préparation sur commande ?", content: "Oui, absolument. Notre équipe peut préparer des plateaux de dégustation, des sélections personnalisées ou des compositions spéciales selon vos souhaits. Contactez-nous pour discuter de vos besoins." },
{ id: "3", title: "Faites-vous des livraisons ?", content: "Pour les livraisons et services spéciaux, merci de nous contacter directement. Nous étudierons votre demande avec attention pour trouver la meilleure solution adaptée à votre situation." },
{ id: "4", title: "Comment accéder à votre boutique depuis Lausanne ?", content: "Notre boutique est sitée Route de la Charbonnière 1, 1032 Romanel-sur-Lausanne, facilement accessible par les transports en commun et le parking. N'hésitez pas à nous appeler pour les indications." },
{ id: "5", title: "Acceptez-vous les demandes de groupe ou les événements ?", content: "Nous serions ravis de collaborer avec vous pour des événements spéciaux, des dégustations ou des compositions personnalisées. Contactez-nous pour explorer les possibilités ensemble." }
]}
ctaTitle="Visitez-nous ou contactez-nous"
ctaDescription="Découvrez notre boutique et nos produits. Notre équipe passionnée est à votre écoute pour vous conseiller et satisfaire vos envies gastronomiques."
ctaButton={{ text: "Prendre rendez-vous", href: "tel:+41217310740" }}
ctaIcon={MapPin}
useInvertedBackground={false}
animationType="blur-reveal"
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="Mulhaupt Comestibles"
columns={[
{
title: "Entreprise", items: [
{ label: "Accueil", href: "#hero" },
{ label: "Qualité & Sélection", href: "#about" },
{ label: "Nos Univers", href: "#product" },
{ label: "Témoignages", href: "#testimonial" }
]
},
{
title: "Contact", items: [
{ label: "Route de la Charbonnière 1", href: "#" },
{ label: "1032 Romanel-sur-Lausanne", href: "#" },
{ label: "+41 (0)21 731 0 740", href: "tel:+41217310740" },
{ label: "Nous contacter", href: "#contact" }
]
},
{
title: "Services", items: [
{ label: "Préparations sur commande", href: "#contact" },
{ label: "Conseils gastronomiques", href: "#feature" },
{ label: "Sélections personnalisées", href: "#contact" },
{ label: "Visiter la boutique", href: "#contact" }
]
}
]}
copyrightText="© 2025 Mulhaupt Comestibles | Maison de confiance depuis des années | Route de la Charbonnière 1, 1032 Romanel-sur-Lausanne"
/>
</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: #fffefe;
--card: #f6f7f4;
--foreground: #080908;
--primary-cta: #0e3a29;
--primary-cta-text: #fffefe;
--secondary-cta: #e7eecd;
--secondary-cta-text: #080908;
--accent: #35c18b;
--background-accent: #ecebe4;
/* 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;
}
}