bender/76bb3dee-7efe-4e33-8d59-736f09a1fa7e
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
dk
2026-03-08 16:34:54 +00:00
commit 7a146b0cb7
627 changed files with 85309 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";

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

File diff suppressed because it is too large Load Diff

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

@@ -0,0 +1,252 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import HeroBillboard from "@/components/sections/hero/HeroBillboard";
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
import MetricCardSeven from "@/components/sections/metrics/MetricCardSeven";
import TestimonialCardTen from "@/components/sections/testimonial/TestimonialCardTen";
import TeamCardFive from "@/components/sections/team/TeamCardFive";
import FaqBase from "@/components/sections/faq/FaqBase";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import { Heart, Stethoscope, Award, MessageCircle, Users, HelpCircle } from "lucide-react";
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="directional-hover"
defaultTextAnimation="entrance-slide"
borderRadius="pill"
contentWidth="small"
sizing="large"
background="fluid"
cardStyle="soft-shadow"
primaryButtonStyle="flat"
secondaryButtonStyle="glass"
headingFontWeight="semibold"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
brandName="San Bernardo"
navItems={[
{ name: "Inicio", id: "hero" },
{ name: "Servicios", id: "services" },
{ name: "Sobre Nosotros", id: "about" },
{ name: "FAQ", id: "faq" },
]}
button={{ text: "Pedir Cita", href: "#contact" }}
animateOnLoad={true}
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboard
title="Cuidamos de tu mascota como si fuera nuestra"
description="Atención veterinaria profesional en Sevilla con un trato cercano y especializado para perros, gatos y otras mascotas. Confía en nuestro equipo de veterinarios expertos."
background={{ variant: "fluid" }}
tag="Clínica Veterinaria"
tagIcon={Heart}
buttons={[
{ text: "Pedir Cita", href: "#contact" },
{ text: "Conoce Nuestros Servicios", href: "#services" },
]}
imageSrc="http://img.b2bpic.net/free-photo/medium-shot-happy-people-cute-dog_23-2149304341.jpg"
imageAlt="Clínica veterinaria profesional"
mediaAnimation="slide-up"
className="min-h-screen"
ariaLabel="Sección hero de Clínica Veterinaria San Bernardo"
/>
</div>
<div id="about" data-section="about">
<TextSplitAbout
title="Sobre Nosotros"
description={[
"En Clínica Veterinaria San Bernardo, creemos que cada mascota merece el mejor cuidado y atención. Con más de 300 reseñas de 4.7 estrellas en Google Maps, somos referentes en Sevilla.", "Nuestro equipo de veterinarios profesionales combina experiencia técnica con un genuino amor por los animales. Entendemos que tu mascota es parte de tu familia, por eso tratamos a cada paciente con la dedicación y cuidado que se merecen.", "Nos distinguimos por nuestra aproximación integral: diagnósticos precisos, tratamientos efectivos, explicaciones claras a los dueños, y instalaciones modernas totalmente equipadas. La confianza de cientos de familias sevillanas es nuestro mayor logro."]}
buttons={[{ text: "Contáctanos", href: "#contact" }]}
useInvertedBackground={false}
showBorder={true}
/>
</div>
<div id="services" data-section="services">
<FeatureCardOne
title="Nuestros Servicios"
description="Una amplia gama de servicios veterinarios diseñados para mantener a tu mascota saludable y feliz durante toda su vida."
tag="Servicios Veterinarios"
tagIcon={Stethoscope}
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
features={[
{
title: "Consultas Veterinarias", description: "Revisiones completas y diagnóstico de problemas de salud con atención especializada y trato amable hacia tu mascota.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-doctor-hugging-dog_23-2149304336.jpg", imageAlt: "Consulta veterinaria profesional"},
{
title: "Vacunación", description: "Programas de inmunización completos para perros y gatos, protegiendo a tu mascota contra enfermedades infecciosas.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-veterinarian-taking-care-dog_23-2149100220.jpg", imageAlt: "Vacunación segura de mascota"},
{
title: "Desparasitación", description: "Tratamientos preventivos e internos para proteger a tu mascota de parásitos internos y externos.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-veterinary-doctor-taking-care-pet_23-2149267852.jpg", imageAlt: "Prevención de parásitos"},
{
title: "Cirugía Veterinaria", description: "Procedimientos quirúrgicos realizados con tecnología moderna y protocolos de seguridad rigurosos en nuestro quirófano.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-veterinary-doctor-taking-care-pet_23-2149267859.jpg", imageAlt: "Quirófano veterinario moderno"},
{
title: "Diagnóstico y Control de Salud", description: "Pruebas diagnósticas avanzadas incluyendo radiografía, ecografía y análisis de laboratorio para diagnósticos precisos.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-veterinary-doctor-taking-care-pet_23-2149267852.jpg", imageAlt: "Diagnóstico veterinario avanzado"},
{
title: "Medicina Preventiva", description: "Planes de cuidado preventivo personalizados para detectar problemas antes de que se conviertan en enfermedades graves.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-veterinary-doctor-taking-care-pet_23-2149267852.jpg", imageAlt: "Medicina preventiva para mascotas"},
{
title: "Asesoramiento Nutricional", description: "Recomendaciones dietéticas personalizadas para optimizar la salud y bienestar de tu mascota según su edad y condición.", imageSrc: "http://img.b2bpic.net/free-photo/frozen-food-table-arrangement_23-2148969452.jpg", imageAlt: "Asesoramiento nutricional veterinario"},
]}
animationType="slide-up"
useInvertedBackground={true}
mediaAnimation="blur-reveal"
/>
</div>
<div id="why-us" data-section="why-us">
<MetricCardSeven
title="Por Qué Elegirnos"
description="Razones por las que somos la opción preferida de cientos de familias en Sevilla para el cuidado de sus mascotas."
tag="Nuestra Ventaja"
tagIcon={Award}
textboxLayout="default"
metrics={[
{
id: "1", value: "300+", title: "Reseñas con 4.7 estrellas", items: [
"Opiniones verificadas de clientes reales", "Atención personalizada valorada", "Trato amable garantizado"],
},
{
id: "2", value: "100%", title: "Profesionalidad Veterinaria", items: [
"Equipo de veterinarios titulados", "Formación continua en nuevas técnicas", "Protocolos de calidad actualizados"],
},
{
id: "3", value: "24/7", title: "Atención a Emergencias", items: [
"Servicio de urgencias disponible", "Respuesta rápida ante emergencias", "Clínica moderna y equipada"],
},
{
id: "4", value: "∞", title: "Amor por los Animales", items: [
"Trato cercano y empático", "Ambiente tranquilo y seguro", "Confort para mascotas nerviosas"],
},
]}
animationType="slide-up"
useInvertedBackground={false}
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTen
title="Opiniones de Nuestros Clientes"
description="Conoce qué dicen las familias de Sevilla sobre la atención que reciben sus mascotas en San Bernardo."
tag="Testimonios"
tagIcon={MessageCircle}
textboxLayout="default"
useInvertedBackground={false}
testimonials={[
{
id: "1", title: "Excelente Trato con Nuestra Mascota", quote: "La Clínica San Bernardo es mi referencia en Sevilla. El equipo tiene una paciencia increíble con Max, nuestro perro. Desde el primer día nos sentimos cómodos confiando en ellos.", name: "María García López", role: "Dueña de Max", imageSrc: "http://img.b2bpic.net/free-photo/happy-hipster-glasses-holding-cute-black-pug-smiling-dog-owner-staring-camera-with-amazed_1258-172990.jpg", imageAlt: "María García López"},
{
id: "2", title: "Profesionalidad al Más Alto Nivel", quote: "He llevado a mis gatos a varias clínicas, pero aquí los veterinarios explican todo con claridad. Entienden las dudas de los dueños y ofrecen soluciones reales, no solo medicinas.", name: "Carlos Rodríguez Martín", role: "Dueño de Tigre y Luna", imageSrc: "http://img.b2bpic.net/free-photo/sad-beagle-dog-looking-away-while-beautiful-girl-with-charming-smile-posing_197531-4807.jpg", imageAlt: "Carlos Rodríguez Martín"},
{
id: "3", title: "Recomendada por Todos en el Barrio", quote: "Todos mis vecinos hablan maravillas de San Bernardo. Cirugía, vacunas, check-ups... todo lo que necesita una mascota. Y el seguimiento después del tratamiento es increíble.", name: "Sofía Jiménez Castro", role: "Dueña de Lucía", imageSrc: "http://img.b2bpic.net/free-photo/love-domestic-animals-pets-cheerful-curly-haired-female-dog-owner-winks-eye-sticks-out-tongue-poses-with-favorite-pug-dog-plan-vacation-enjoy-good-day-isolated-brown-background_273609-61536.jpg", imageAlt: "Sofía Jiménez Castro"},
{
id: "4", title: "Confianza Total Para Mi Familia", quote: "Llevamos a nuestra cachorra desde pequeña aquí. El equipo es como parte de la familia. Nos tranquiliza mucho saber que Bella está en manos de verdaderos profesionales que la quieren.", name: "José Antonio López Ruiz", role: "Dueño de Bella", imageSrc: "http://img.b2bpic.net/free-photo/happy-couple-beach_1157-14754.jpg", imageAlt: "José Antonio López Ruiz"},
{
id: "5", title: "Clínica Moderna y Limpia", quote: "Las instalaciones son de primer nivel. Se nota que invierten en equipamiento moderno y en mantener todo impecable. Eso te da confianza en la calidad de la atención.", name: "Francisca González Sánchez", role: "Dueña de Chispas", imageSrc: "http://img.b2bpic.net/free-photo/happy-mature-businessman-glasses-shaking-hands-with-female-partner-meeting-co-working-space_74855-10006.jpg", imageAlt: "Francisca González Sánchez"},
{
id: "6", title: "Explicaciones Claras y Atención Cercana", quote: "Lo que más valoro es cómo explican qué tiene mi perro y por qué necesita cada tratamiento. No es una clínica fría, es un lugar donde realmente se preocupan.", name: "Laura Fernández Moreno", role: "Dueña de Rex", imageSrc: "http://img.b2bpic.net/free-photo/girl-cat-high-view_23-2148797408.jpg", imageAlt: "Laura Fernández Moreno"},
]}
/>
</div>
<div id="team" data-section="team">
<TeamCardFive
title="Nuestro Equipo"
description="Veterinarios y especialistas dedicados al cuidado integral de tu mascota. Experiencia, profesionalidad y amor por los animales."
tag="Profesionales"
tagIcon={Users}
textboxLayout="default"
useInvertedBackground={true}
animationType="slide-up"
team={[
{
id: "1", name: "Dr. Javier Sánchez", role: "Veterinario Principal", imageSrc: "http://img.b2bpic.net/free-photo/front-view-female-doctor-uniform-crossing-hands-standing_179666-31899.jpg", imageAlt: "Dr. Javier Sánchez"},
{
id: "2", name: "Dra. Isabel Morales", role: "Especialista en Cirugía", imageSrc: "http://img.b2bpic.net/free-photo/nurse-wearing-uniform-stethoscope-standing-with-arms-crossed-with-frowning-face-isolated-green_141793-19360.jpg", imageAlt: "Dra. Isabel Morales"},
{
id: "3", name: "Dr. Antonio Pérez", role: "Veterinario Clínico", imageSrc: "http://img.b2bpic.net/free-photo/front-view-female-doctor-medical-shirt-color-health-nurse-covid-19-emotion-hospital-virus_179666-23940.jpg", imageAlt: "Dr. Antonio Pérez"},
{
id: "4", name: "Rosa García", role: "Auxiliar Veterinaria", imageSrc: "http://img.b2bpic.net/free-photo/caring-owner-man-standing-near-tree-with-dog-hands_259150-57203.jpg", imageAlt: "Rosa García"},
]}
/>
</div>
<div id="faq" data-section="faq">
<FaqBase
title="Preguntas Frecuentes"
description="Encuentra respuestas a las preguntas más comunes sobre nuestros servicios y cuidado de mascotas."
tag="FAQ"
tagIcon={HelpCircle}
textboxLayout="default"
useInvertedBackground={false}
faqs={[
{
id: "1", title: "¿Cuál es tu horario de atención?", content: "Abierto de lunes a viernes de 09:00 a 14:00 y de 16:00 a 20:00 horas. Sábados de 10:00 a 14:00. Disponemos de servicio de urgencias 24/7. Te recomendamos llamar con anticipación para programar citas."},
{
id: "2", title: "¿Atienden mascotas de emergencia?", content: "Sí, contamos con servicio de urgencias veterinarias disponible las 24 horas del día, todos los días de la semana. Si tu mascota presenta síntomas graves, llama inmediatamente al +34 647 72 77 09."},
{
id: "3", title: "¿Cuál es el costo de una consulta veterinaria?", content: "El costo de una consulta inicial es accesible y depende del tipo de evaluación. Ofrecemos presupuestos transparentes antes de cualquier tratamiento. Contáctanos para conocer nuestros precios específicos."},
{
id: "4", title: "¿Necesito agendar cita o atiendes sin cita?", content: "Recomendamos agendar cita previa para garantizar atención personalizada y evitar tiempos de espera. Aunque atendemos consultas sin cita según disponibilidad, las citas programadas tienen prioridad."},
{
id: "5", title: "¿Tienen servicio de peluquería canina?", content: "Actualmente nos enfocamos en servicios veterinarios clínicos. Para peluquería canina, podemos recomendar profesionales de confianza en Sevilla."},
{
id: "6", title: "¿Qué métodos de pago aceptan?", content: "Aceptamos todas las formas de pago: efectivo, tarjeta de crédito, tarjeta de débito y transferencia bancaria. Consúltanos sobre planes de financiamiento para tratamientos mayores."},
{
id: "7", title: "¿Ofrecen planes de prevención?", content: "Sí, disponemos de planes de medicina preventiva personalizados según la edad, raza y estado de salud de tu mascota. Estos planes incluyen revisiones periódicas, vacunas y análisis preventivos."},
{
id: "8", title: "¿Cómo llego a la clínica desde el centro de Sevilla?", content: "Ubicados en Sevilla con fácil acceso. Consulta nuestro mapa de ubicación para instrucciones precisas. Disponemos de estacionamiento cercano para tu comodidad."},
]}
faqsAnimation="slide-up"
animationType="smooth"
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={[
{
title: "Clínica", items: [
{ label: "Sobre Nosotros", href: "#about" },
{ label: "Servicios", href: "#services" },
{ label: "Equipo", href: "#team" },
{ label: "Ubicación", href: "#contact" },
],
},
{
title: "Servicios", items: [
{ label: "Consultas Veterinarias", href: "#services" },
{ label: "Cirugía", href: "#services" },
{ label: "Vacunación", href: "#services" },
{ label: "Urgencias", href: "#contact" },
],
},
{
title: "Contacto", items: [
{ label: "Teléfono: +34 647 72 77 09", href: "tel:+34647727709" },
{ label: "Sevilla, España", href: "#" },
{ label: "Lunes - Viernes: 9:00 - 20:00", href: "#" },
{ label: "Sábado: 10:00 - 14:00", href: "#" },
],
},
{
title: "Legal", items: [
{ label: "Política de Privacidad", href: "#" },
{ label: "Términos de Servicio", href: "#" },
{ label: "Cookies", href: "#" },
],
},
]}
bottomLeftText="© 2025 Clínica Veterinaria San Bernardo. Todos los derechos reservados."
bottomRightText="Cuidamos de tu mascota con amor y profesionalidad"
/>
</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-manrope), sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
overscroll-behavior-y: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-manrope), sans-serif;
}

176
src/app/styles/theme.css Normal file
View File

@@ -0,0 +1,176 @@
@theme inline {
--color-background: var(--background);
--color-card: var(--card);
--color-foreground: var(--foreground);
--color-primary-cta: var(--primary-cta);
--color-primary-cta-text: var(--primary-cta-text);
--color-secondary-cta: var(--secondary-cta);
--color-secondary-cta-text: var(--secondary-cta-text);
--color-accent: var(--accent);
--color-background-accent: var(--background-accent);
/* theme border radius */
--radius-theme: var(--theme-border-radius);
--radius-theme-capped: var(--theme-border-radius-capped);
/* text */
--text-2xs: var(--text-2xs);
--text-xs: var(--text-xs);
--text-sm: var(--text-sm);
--text-base: var(--text-base);
--text-lg: var(--text-lg);
--text-xl: var(--text-xl);
--text-2xl: var(--text-2xl);
--text-3xl: var(--text-3xl);
--text-4xl: var(--text-4xl);
--text-5xl: var(--text-5xl);
--text-6xl: var(--text-6xl);
--text-7xl: var(--text-7xl);
--text-8xl: var(--text-8xl);
--text-9xl: var(--text-9xl);
/* height */
--height-4: var(--height-4);
--height-5: var(--height-5);
--height-6: var(--height-6);
--height-7: var(--height-7);
--height-8: var(--height-8);
--height-9: var(--height-9);
--height-11: var(--height-11);
--height-12: var(--height-12);
--height-10: var(--height-10);
--height-30: var(--height-30);
--height-90: var(--height-90);
--height-100: var(--height-100);
--height-110: var(--height-110);
--height-120: var(--height-120);
--height-130: var(--height-130);
--height-140: var(--height-140);
--height-150: var(--height-150);
--height-page-padding: calc(2.25rem+var(--vw-1_5)+var(--vw-1_5));
/* width */
--width-5: var(--width-5);
--width-7_5: var(--width-7_5);
--width-10: var(--width-10);
--width-12_5: var(--width-12_5);
--width-15: var(--width-15);
--width-17: var(--width-17);
--width-17_5: var(--width-17_5);
--width-20: var(--width-20);
--width-21: var(--width-21);
--width-22_5: var(--width-22_5);
--width-25: var(--width-25);
--width-26: var(--width-26);
--width-27_5: var(--width-27_5);
--width-30: var(--width-30);
--width-32_5: var(--width-32_5);
--width-35: var(--width-35);
--width-37_5: var(--width-37_5);
--width-40: var(--width-40);
--width-42_5: var(--width-42_5);
--width-45: var(--width-45);
--width-47_5: var(--width-47_5);
--width-50: var(--width-50);
--width-52_5: var(--width-52_5);
--width-55: var(--width-55);
--width-57_5: var(--width-57_5);
--width-60: var(--width-60);
--width-62_5: var(--width-62_5);
--width-65: var(--width-65);
--width-67_5: var(--width-67_5);
--width-70: var(--width-70);
--width-72_5: var(--width-72_5);
--width-75: var(--width-75);
--width-77_5: var(--width-77_5);
--width-80: var(--width-80);
--width-82_5: var(--width-82_5);
--width-85: var(--width-85);
--width-87_5: var(--width-87_5);
--width-90: var(--width-90);
--width-92_5: var(--width-92_5);
--width-95: var(--width-95);
--width-97_5: var(--width-97_5);
--width-100: var(--width-100);
--width-content-width: var(--width-content-width);
--width-carousel-padding: var(--width-carousel-padding);
--width-carousel-padding-controls: var(--width-carousel-padding-controls);
--width-carousel-padding-expanded: var(--width-carousel-padding-expanded);
--width-carousel-padding-controls-expanded: var(--width-carousel-padding-controls-expanded);
--width-carousel-item-3: var(--width-carousel-item-3);
--width-carousel-item-4: var(--width-carousel-item-4);
--width-x-padding-mask-fade: var(--width-x-padding-mask-fade);
--width-content-width-expanded: var(--width-content-width-expanded);
/* gap */
--spacing-1: var(--vw-0_25);
--spacing-2: var(--vw-0_5);
--spacing-3: var(--vw-0_75);
--spacing-4: var(--vw-1);
--spacing-5: var(--vw-1_25);
--spacing-6: var(--vw-1_5);
--spacing-7: var(--vw-1_75);
--spacing-8: var(--vw-2);
--spacing-x-1: var(--vw-0_25);
--spacing-x-2: var(--vw-0_5);
--spacing-x-3: var(--vw-0_75);
--spacing-x-4: var(--vw-1);
--spacing-x-5: var(--vw-1_25);
--spacing-x-6: var(--vw-1_5);
/* border radius */
--radius-none: 0;
--radius-sm: var(--vw-0_5);
--radius: var(--vw-0_75);
--radius-md: var(--vw-1);
--radius-lg: var(--vw-1_25);
--radius-xl: var(--vw-1_75);
--radius-full: 999px;
/* padding */
--padding-1: var(--vw-0_25);
--padding-2: var(--vw-0_5);
--padding-2.5: var(--vw-0_625);
--padding-3: var(--vw-0_75);
--padding-4: var(--vw-1);
--padding-5: var(--vw-1_25);
--padding-6: var(--vw-1_5);
--padding-7: var(--vw-1_75);
--padding-8: var(--vw-2);
--padding-x-1: var(--vw-0_25);
--padding-x-2: var(--vw-0_5);
--padding-x-3: var(--vw-0_75);
--padding-x-4: var(--vw-1);
--padding-x-5: var(--vw-1_25);
--padding-x-6: var(--vw-1_5);
--padding-x-7: var(--vw-1_75);
--padding-x-8: var(--vw-2);
--padding-hero-page-padding-half: var(--padding-hero-page-padding-half);
--padding-hero-page-padding: var(--padding-hero-page-padding);
--padding-hero-page-padding-1_5: var(--padding-hero-page-padding-1_5);
--padding-hero-page-padding-double: var(--padding-hero-page-padding-double);
/* margin */
--margin-1: var(--vw-0_25);
--margin-2: var(--vw-0_5);
--margin-3: var(--vw-0_75);
--margin-4: var(--vw-1);
--margin-5: var(--vw-1_25);
--margin-6: var(--vw-1_5);
--margin-7: var(--vw-1_75);
--margin-8: var(--vw-2);
--margin-x-1: var(--vw-0_25);
--margin-x-2: var(--vw-0_5);
--margin-x-3: var(--vw-0_75);
--margin-x-4: var(--vw-1);
--margin-x-5: var(--vw-1_25);
--margin-x-6: var(--vw-1_5);
--margin-x-7: var(--vw-1_75);
--margin-x-8: var(--vw-2);
}

228
src/app/styles/utilities.css Normal file
View File

@@ -0,0 +1,228 @@
@layer components {}
@layer utilities {
/* Card, primary-button, and secondary-button styles are now dynamically injected via ThemeProvider */
/* .card {
@apply backdrop-blur-sm bg-gradient-to-br from-card/80 to-card/40 shadow-sm border border-card;
}
.primary-button {
@apply bg-gradient-to-b from-primary-cta/83 to-primary-cta;
box-shadow:
color-mix(in srgb, var(--color-background) 25%, transparent) 0px 1px 1px 0px inset,
color-mix(in srgb, var(--color-primary-cta) 15%, transparent) 3px 3px 3px 0px;
}
.secondary-button {
@apply backdrop-blur-sm bg-gradient-to-br from-secondary-cta/80 to-secondary-cta shadow-sm border border-secondary-cta;
} */
.tag-card {
@apply backdrop-blur-sm bg-gradient-to-br from-card/80 to-card/40 shadow-sm border border-card;
}
.inset-glow-border {
@apply relative;
}
.inset-glow-border::before {
content: "";
@apply absolute pointer-events-none inset-0 p-[1px];
border-radius: inherit;
background: linear-gradient(
0deg,
color-mix(in srgb, var(--color-primary-cta) 20%, var(--color-background)) 0%,
color-mix(in srgb, var(--color-primary-cta) 40%, var(--color-background)) 27%,
color-mix(in srgb, var(--color-primary-cta) 60%, var(--color-foreground)) 62%,
color-mix(in srgb, var(--color-primary-cta) 80%, var(--color-foreground)) 100%
);
mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
mask-composite: exclude;
}
.mask-fade-x {
-webkit-mask-image: linear-gradient(to right, transparent 0%, transparent calc((100vw - var(--width-content-width)) / 4), black calc((100vw - var(--width-content-width)) / 2 + 5vw), black calc(100% - (100vw - var(--width-content-width)) / 2 - 5vw), transparent calc(100% - (100vw - var(--width-content-width)) / 4), transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, transparent calc((100vw - var(--width-content-width)) / 4), black calc((100vw - var(--width-content-width)) / 2 + 5vw), black calc(100% - (100vw - var(--width-content-width)) / 2 - 5vw), transparent calc(100% - (100vw - var(--width-content-width)) / 4), transparent 100%);
}
.mask-padding-x {
-webkit-mask-image: linear-gradient(to right, transparent 0%, black var(--width-x-padding-mask-fade), black calc(100% - var(--width-x-padding-mask-fade)), transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, black var(--width-x-padding-mask-fade), black calc(100% - var(--width-x-padding-mask-fade)), transparent 100%);
}
.mask-fade-bottom {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
}
.mask-fade-y {
mask-image: linear-gradient(to bottom,
transparent 0%,
black var(--vw-1_5),
black calc(100% - var(--vw-1_5)),
transparent 100%);
}
.mask-fade-y {
mask-image: linear-gradient(to bottom,
transparent 0%,
black var(--vw-1_5),
black calc(100% - var(--vw-1_5)),
transparent 100%);
}
.mask-fade-y-medium {
mask-image: linear-gradient(to bottom,
transparent 0%,
black 20%,
black 80%,
transparent 100%);
}
.mask-fade-bottom-large {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 75%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 75%, transparent 100%);
}
.mask-fade-bottom-long {
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 5%, transparent 100%);
mask-image: linear-gradient(to bottom, black 0%, black 5%, transparent 100%);
}
.mask-fade-top-long {
-webkit-mask-image: linear-gradient(to top, black 0%, black 5%, transparent 100%);
mask-image: linear-gradient(to top, black 0%, black 5%, transparent 100%);
}
.mask-fade-xy {
-webkit-mask-image:
linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%),
linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
mask-image:
linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%),
linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
/* ANIMATION */
.animation-container {
animation:
fadeInOpacity 0.8s ease-in-out forwards,
fadeInTranslate 0.6s forwards;
}
.animation-container-fade {
animation: fadeInOpacity 0.8s ease-in-out forwards;
}
@keyframes fadeInOpacity {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeInTranslate {
from {
transform: translateY(0.75vh);
}
to {
transform: translateY(0vh);
}
}
@keyframes aurora {
from {
background-position: 50% 50%, 50% 50%;
}
to {
background-position: 350% 50%, 350% 50%;
}
}
@keyframes spin-slow {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes spin-reverse {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}
.animate-spin-slow {
animation: spin-slow 15s linear infinite;
}
.animate-spin-reverse {
animation: spin-reverse 10s linear infinite;
}
@keyframes marquee-vertical {
from {
transform: translateY(0);
}
to {
transform: translateY(-50%);
}
}
.animate-marquee-vertical {
animation: marquee-vertical 40s linear infinite;
}
@keyframes marquee-vertical-reverse {
from {
transform: translateY(-50%);
}
to {
transform: translateY(0);
}
}
.animate-marquee-vertical-reverse {
animation: marquee-vertical-reverse 40s linear infinite;
}
@keyframes orbit {
from {
transform: rotate(var(--initial-position, 0deg)) translateX(var(--translate-position, 120px)) rotate(calc(-1 * var(--initial-position, 0deg)));
}
to {
transform: rotate(calc(var(--initial-position, 0deg) + 360deg)) translateX(var(--translate-position, 120px)) rotate(calc(-1 * (var(--initial-position, 0deg) + 360deg)));
}
}
@keyframes map-dot-pulse {
0%, 100% {
transform: scale(0.4);
opacity: 0.6;
}
50% {
transform: scale(1.4);
opacity: 1;
}
}
}

217
src/app/styles/variables.css Normal file
View File

@@ -0,0 +1,217 @@
:root {
/* Base units */
/* --vw is set by ThemeProvider */
/* --background: #f5f4ef;
--card: #dad6cd;
--foreground: #2a2928;
--primary-cta: #2a2928;
--secondary-cta: #ecebea;
--accent: #ffffff;
--background-accent: #ffffff; */
--background: #f7f6f7;
--card: #ffffff;
--foreground: #250c0d;
--primary-cta: #b82b40;
--primary-cta-text: #f7f6f7;
--secondary-cta: #ffffff;
--secondary-cta-text: #250c0d;
--accent: #b90941;
--background-accent: #e8a8b6;
/* 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;
}
}