Compare commits
7 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 81078cabaa | |||
| d55a8c6f97 | |||
| ea28b0dfe0 | |||
| 5ee7ab7d35 | |||
| a6f5841fc7 | |||
| d11bd4b710 | |||
| ea0c437e95 |
@@ -1,526 +1,156 @@
|
||||
@import "tailwindcss";
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* FONT DEFINITIONS */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url('/fonts/inter/Inter.woff2') format('woff2');
|
||||
}
|
||||
|
||||
:root {
|
||||
/* Base units */
|
||||
/* --vw is set by ThemeProvider */
|
||||
--background: #0a0f08;
|
||||
--card: #1a2418;
|
||||
--foreground: #f5f5f1;
|
||||
--primary-cta: #8b9d6f;
|
||||
--secondary-cta: #ffffff;
|
||||
--accent: #d4af37;
|
||||
--background-accent: #2a3f2a;
|
||||
|
||||
/* --background: #f5ede5;;
|
||||
--card: #efe7dd;;
|
||||
--foreground: #4a3828;;
|
||||
--primary-cta: #8b6f47;;
|
||||
--secondary-cta: #ffffff;;
|
||||
--accent: #c4a882;;
|
||||
--background-accent: #d9c9b5;; */
|
||||
/* Core spacing and sizing */
|
||||
--radius: 0.5rem;
|
||||
--space-unit: 1rem;
|
||||
--content-max-width: 1200px;
|
||||
|
||||
--background: #f5ede5;;
|
||||
--card: #efe7dd;;
|
||||
--foreground: #4a3828;;
|
||||
--primary-cta: #8b6f47;;
|
||||
--secondary-cta: #ffffff;;
|
||||
--accent: #c4a882;;
|
||||
--background-accent: #d9c9b5;;
|
||||
|
||||
/* 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)));
|
||||
/* Theme-responsive colors */
|
||||
--text-primary: var(--foreground);
|
||||
--text-secondary: color-mix(in srgb, var(--foreground) 70%, transparent);
|
||||
--text-muted: color-mix(in srgb, var(--foreground) 50%, transparent);
|
||||
|
||||
/* Interactive states */
|
||||
--hover-overlay: color-mix(in srgb, var(--foreground) 5%, transparent);
|
||||
--focus-ring: var(--primary-cta);
|
||||
|
||||
/* Borders and dividers */
|
||||
--border-subtle: color-mix(in srgb, var(--foreground) 10%, transparent);
|
||||
--border-medium: color-mix(in srgb, var(--foreground) 20%, transparent);
|
||||
|
||||
/* Shadows and depth */
|
||||
--shadow-subtle: 0 1px 3px color-mix(in srgb, var(--background) 50%, transparent);
|
||||
--shadow-medium: 0 4px 12px color-mix(in srgb, var(--background) 30%, transparent);
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
/* Dark theme adjustments (if needed) */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
: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;
|
||||
/* Dark theme already applied in default values */
|
||||
}
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-card: var(--card);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-primary-cta: var(--primary-cta);
|
||||
--color-secondary-cta: var(--secondary-cta);
|
||||
--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);
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
|
||||
.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-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%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Base styles */
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(255, 255, 255, 1) rgba(255, 255, 255, 0);
|
||||
}
|
||||
|
||||
html {
|
||||
overscroll-behavior: none;
|
||||
overscroll-behavior-y: none;
|
||||
border-color: var(--border-subtle);
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: var(--font-sora), sans-serif;
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
overscroll-behavior: none;
|
||||
overscroll-behavior-y: none;
|
||||
color: var(--text-primary);
|
||||
background: var(--background);
|
||||
font-feature-settings: "rlig" 1, "calt" 1;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: var(--font-sora), sans-serif;
|
||||
}
|
||||
/* Utility classes for theme integration */
|
||||
.bg-theme-background {
|
||||
background-color: var(--background);
|
||||
}
|
||||
|
||||
.bg-theme-card {
|
||||
background-color: var(--card);
|
||||
}
|
||||
|
||||
.text-theme-primary {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.text-theme-secondary {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.text-theme-muted {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.border-theme {
|
||||
border-color: var(--border-subtle);
|
||||
}
|
||||
|
||||
.shadow-theme {
|
||||
box-shadow: var(--shadow-medium);
|
||||
}
|
||||
|
||||
/* Focus states */
|
||||
.focus-theme:focus {
|
||||
outline: 2px solid var(--focus-ring);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Animation and transition defaults */
|
||||
.transition-theme {
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* Responsive typography scale */
|
||||
.text-responsive-sm {
|
||||
font-size: clamp(0.875rem, 0.8rem + 0.4vw, 1rem);
|
||||
}
|
||||
|
||||
.text-responsive-base {
|
||||
font-size: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
|
||||
}
|
||||
|
||||
.text-responsive-lg {
|
||||
font-size: clamp(1.125rem, 1rem + 0.625vw, 1.375rem);
|
||||
}
|
||||
|
||||
.text-responsive-xl {
|
||||
font-size: clamp(1.25rem, 1.1rem + 0.75vw, 1.75rem);
|
||||
}
|
||||
|
||||
.text-responsive-2xl {
|
||||
font-size: clamp(1.5rem, 1.3rem + 1vw, 2.25rem);
|
||||
}
|
||||
|
||||
/* Content width utilities */
|
||||
.content-width-sm {
|
||||
max-width: 65ch;
|
||||
}
|
||||
|
||||
.content-width-md {
|
||||
max-width: 75ch;
|
||||
}
|
||||
|
||||
.content-width-lg {
|
||||
max-width: 85ch;
|
||||
}
|
||||
|
||||
/* Accessibility improvements */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* High contrast mode support */
|
||||
@media (prefers-contrast: high) {
|
||||
:root {
|
||||
--border-subtle: var(--foreground);
|
||||
--text-secondary: var(--foreground);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,27 +1,32 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Sora } from "next/font/google";
|
||||
import { Cormorant_Garamond, Inter } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import { ServiceWrapper } from "@/components/ServiceWrapper";
|
||||
import Tag from "@/tag/Tag";
|
||||
|
||||
const sora = Sora({
|
||||
variable: "--font-sora", subsets: ["latin"],
|
||||
const cormorantGaramond = Cormorant_Garamond({
|
||||
variable: "--font-cormorant-garamond", subsets: ["latin"],
|
||||
weight: ["300", "400", "500", "600", "700"],
|
||||
});
|
||||
|
||||
const inter = Inter({
|
||||
variable: "--font-inter", subsets: ["latin"],
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Wellness Lounge Day Spa | Luxury Spa in San Diego", description: "Experience serenity at Wellness Lounge Day Spa in Mission Bay. Luxury massages, facials, steam rooms, yoga, and wellness treatments for complete relaxation.", keywords: "day spa, massage therapy, facial treatments, wellness, relaxation, San Diego, yoga classes, steam room", metadataBase: new URL("https://www.wellnessloungedayspa.com"),
|
||||
title: "Luxury Jungle Escape & Modern Mansion Retreat", description: "Experience the epitome of luxury at our modern jungle escape and mansion retreat. World-class amenities, sophisticated design, and natural serenity combined.", keywords: "luxury mansion, jungle escape, resort, wellness, spa, premium accommodations, tropical paradise", metadataBase: new URL("https://www.luxuryjungleescape.com"),
|
||||
alternates: {
|
||||
canonical: "https://www.wellnessloungedayspa.com"
|
||||
canonical: "https://www.luxuryjungleescape.com"
|
||||
},
|
||||
openGraph: {
|
||||
title: "Wellness Lounge Day Spa | Your Calm Escape", description: "Find serenity at Wellness Lounge Day Spa. Luxury spa treatments, yoga, and relaxation in beautiful Mission Bay, San Diego.", url: "https://www.wellnessloungedayspa.com", siteName: "Wellness Lounge Day Spa", type: "website", images: [
|
||||
title: "Luxury Jungle Escape & Modern Mansion Retreat", description: "Discover ultimate luxury with natural beauty. An exclusive modern mansion nestled in lush jungle surroundings.", url: "https://www.luxuryjungleescape.com", siteName: "Luxury Jungle Escape", type: "website", images: [
|
||||
{
|
||||
url: "https://img.b2bpic.net/free-photo/amazing-view-waterfall_72229-1274.jpg", alt: "Wellness Lounge Day Spa waterfall and relaxation"
|
||||
url: "/placeholders/placeholder1.webp", alt: "Luxury modern mansion with jungle backdrop"
|
||||
}
|
||||
]
|
||||
},
|
||||
twitter: {
|
||||
card: "summary_large_image", title: "Wellness Lounge Day Spa | Luxury Spa in San Diego", description: "Experience serenity at Wellness Lounge Day Spa. Massages, facials, steam rooms, and yoga by the bay.", images: ["https://img.b2bpic.net/free-photo/serene-spa-room_23-2151934180.jpg"]
|
||||
card: "summary_large_image", title: "Luxury Jungle Escape & Modern Mansion Retreat", description: "Experience sophistication meets nature in our exclusive luxury retreat.", images: ["/placeholders/placeholder1.webp"]
|
||||
},
|
||||
robots: {
|
||||
index: true,
|
||||
@@ -38,7 +43,7 @@ export default function RootLayout({
|
||||
<html lang="en" suppressHydrationWarning>
|
||||
<ServiceWrapper>
|
||||
<body
|
||||
className={sora.variable}
|
||||
className={`${cormorantGaramond.variable} ${inter.variable}`}
|
||||
>
|
||||
<Tag />
|
||||
{children}
|
||||
@@ -1264,4 +1269,4 @@ export default function RootLayout({
|
||||
</ServiceWrapper>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
227
src/app/page.tsx
227
src/app/page.tsx
@@ -10,140 +10,139 @@ import TestimonialCardTwelve from '@/components/sections/testimonial/Testimonial
|
||||
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
||||
import { Sparkles, Waves, TrendingUp, Heart, HelpCircle } from 'lucide-react';
|
||||
import { Leaf, Crown, Sparkles, Waves, TrendingUp, Heart, HelpCircle } from 'lucide-react';
|
||||
|
||||
export default function WellnessLoungePage() {
|
||||
export default function LuxuryJungleEscapePage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="directional-hover"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="pill"
|
||||
contentWidth="smallMedium"
|
||||
sizing="largeSmallSizeMediumTitles"
|
||||
background="none"
|
||||
cardStyle="soft-shadow"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="semibold"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="largeSizeMediumTitles"
|
||||
background="floatingGradient"
|
||||
cardStyle="gradient-mesh"
|
||||
primaryButtonStyle="inset-glow"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
brandName="Wellness Lounge"
|
||||
brandName="Luxury Jungle Escape"
|
||||
navItems={[
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Experience", id: "experience" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "FAQ", id: "faq" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
{ name: "Experiences", id: "services" },
|
||||
{ name: "The Retreat", id: "about" },
|
||||
{ name: "Amenities", id: "experience" },
|
||||
{ name: "Guest Stories", id: "testimonials" },
|
||||
{ name: "Information", id: "faq" },
|
||||
{ name: "Reservations", id: "contact" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardRotatedCarousel
|
||||
title="Welcome to a Calm Escape"
|
||||
description="Find yourself in a state of serenity at Wellness Lounge Day Spa. Located on the beautiful grounds of the Hyatt Regency in Mission Bay, we offer luxury steam rooms, relaxation lounges, massages, facials, body treatments, and private yoga by the bay."
|
||||
tag="Luxury Spa Retreat"
|
||||
tagIcon={Sparkles}
|
||||
title="Welcome to Luxury Redefined"
|
||||
description="Escape into a world where modern sophistication meets untamed natural beauty. Our exclusive jungle mansion retreat offers unparalleled luxury, world-class amenities, and transformative experiences in a setting of extraordinary elegance and serenity."
|
||||
tag="Exclusive Luxury Retreat"
|
||||
tagIcon={Crown}
|
||||
buttons={[
|
||||
{ text: "Book Your Escape", href: "#contact" },
|
||||
{ text: "Explore Services", href: "#services" }
|
||||
{ text: "Reserve Your Escape", href: "#contact" },
|
||||
{ text: "Explore Experiences", href: "#services" }
|
||||
]}
|
||||
carouselItems={[
|
||||
{
|
||||
id: "1", imageSrc: "https://img.b2bpic.net/free-photo/amazing-view-waterfall_72229-1274.jpg", imageAlt: "Flowing waterfall with mist"
|
||||
id: "1", imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Modern luxury mansion overlooking jungle canopy"
|
||||
},
|
||||
{
|
||||
id: "2", imageSrc: "https://img.b2bpic.net/free-photo/serene-spa-room_23-2151934180.jpg", imageAlt: "Luxury spa interior with tropical plants"
|
||||
id: "2", imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Sophisticated interior with natural wood and stone"
|
||||
},
|
||||
{
|
||||
id: "3", imageSrc: "https://img.b2bpic.net/free-photo/spa-massage-concept-with-woman_23-2147817020.jpg", imageAlt: "Relaxing massage therapy session"
|
||||
id: "3", imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Infinity pool merging with jungle landscape"
|
||||
},
|
||||
{
|
||||
id: "4", imageSrc: "https://img.b2bpic.net/free-photo/woman-sauna-with-towels-her-hands-closeup_169016-22725.jpg", imageAlt: "Serene steam room facility"
|
||||
id: "4", imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Luxury spa sanctuary with waterfall features"
|
||||
},
|
||||
{
|
||||
id: "5", imageSrc: "https://img.b2bpic.net/free-photo/smiling-female-athlete-doing-stretching-exercise-cobra-pose-rocky-beach-sunset-copy-space_637285-5493.jpg", imageAlt: "Peaceful yoga session with bay view"
|
||||
id: "5", imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Private dining pavilion overlooking nature"
|
||||
},
|
||||
{
|
||||
id: "6", imageSrc: "https://img.b2bpic.net/free-photo/beautiful-scenery-powerful-waterfall-new-zealand-fjords_181624-18704.jpg", imageAlt: "Tropical jungle foliage"
|
||||
id: "6", imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Evening ambiance with elegant lighting and tropical setting"
|
||||
}
|
||||
]}
|
||||
autoPlay={true}
|
||||
autoPlayInterval={4000}
|
||||
containerClassName="w-full"
|
||||
titleClassName="text-8xl md:text-9xl font-bold"
|
||||
ariaLabel="Wellness Lounge hero section with spa imagery carousel"
|
||||
autoPlayInterval={5000}
|
||||
ariaLabel="Luxury Jungle Escape hero section with mansion imagery carousel"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
heading={[
|
||||
{ type: "text", content: "Serenity and Relaxation" },
|
||||
{ type: "image", src: "https://img.b2bpic.net/free-photo/beautiful-scenery-powerful-waterfall-new-zealand-fjords_181624-18704.jpg", alt: "Tropical leaves" },
|
||||
{ type: "text", content: "on the Bay" }
|
||||
{ type: "text", content: "A Sanctuary of" },
|
||||
{ type: "image", src: "/placeholders/placeholder1.webp", alt: "Elegant leaf motif" },
|
||||
{ type: "text", content: "Modern Elegance" }
|
||||
]}
|
||||
useInvertedBackground="invertDefault"
|
||||
useInvertedBackground="noInvert"
|
||||
buttons={[
|
||||
{ text: "Discover Our Facilities", href: "#services" },
|
||||
{ text: "Book Online", href: "#contact" }
|
||||
{ text: "Discover the Retreat", href: "#services" },
|
||||
{ text: "Plan Your Visit", href: "#contact" }
|
||||
]}
|
||||
ariaLabel="About Wellness Lounge Day Spa"
|
||||
ariaLabel="About our luxury jungle escape mansion retreat"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardTwentyOne
|
||||
title="Our Luxurious Services"
|
||||
description="Experience a comprehensive range of wellness treatments designed to rejuvenate your mind, body, and spirit in our serene sanctuary."
|
||||
tag="Spa Services"
|
||||
tagIcon={Waves}
|
||||
imageSrc="https://img.b2bpic.net/free-photo/serene-spa-room_23-2151934180.jpg"
|
||||
imageAlt="Luxury spa with plants and natural elements"
|
||||
mediaPosition="left"
|
||||
useInvertedBackground="noInvert"
|
||||
title="Curated Experiences"
|
||||
description="Immerse yourself in bespoke luxury experiences designed for the most discerning travelers. From rejuvenating wellness rituals to gourmet culinary journeys, each moment is crafted to exceed expectations."
|
||||
tag="Premium Amenities"
|
||||
tagIcon={Sparkles}
|
||||
imageSrc="/placeholders/placeholder1.webp"
|
||||
imageAlt="Luxury wellness spa with natural materials and ambient lighting"
|
||||
mediaPosition="right"
|
||||
useInvertedBackground="invertDefault"
|
||||
accordionItems={[
|
||||
{
|
||||
id: "1", title: "Massage Therapy", content: "Indulge in our signature massage treatments designed to release tension and promote deep relaxation. From Swedish massage to hot stone therapy, our expert therapists use natural techniques to melt away stress."
|
||||
id: "1", title: "Private Spa & Wellness", content: "Experience world-class spa treatments in our open-air sanctuary. Ancient healing traditions meet modern luxury with organic products, expert therapists, and a setting that soothes the soul."
|
||||
},
|
||||
{
|
||||
id: "2", title: "Facials & Skincare", content: "Rejuvenate your skin with our luxurious facial treatments. Using natural and organic products, we customize each facial to your skin's unique needs, leaving you with a radiant, glowing complexion."
|
||||
id: "2", title: "Gourmet Culinary Arts", content: "Our Michelin-trained chefs craft personalized menus using finest ingredients and locally-sourced jungle botanicals. Dine in intimate settings with natural vistas or private pavilions overlooking the landscape."
|
||||
},
|
||||
{
|
||||
id: "3", title: "Body Scrubs & Wraps", content: "Exfoliate and nourish your skin with our mineral-rich body scrubs and purifying body wraps. These treatments use natural ingredients to leave your skin soft, smooth, and refreshed."
|
||||
id: "3", title: "Infinity Pools & Water Gardens", content: "Dive into luxury at our private infinity pools that seem to merge with the jungle. Natural thermal springs and cascading waterfall features create an immersive aquatic paradise."
|
||||
},
|
||||
{
|
||||
id: "4", title: "Steam Room & Lounge", content: "Relax in our luxury steam rooms and private relaxation lounges. Enjoy the therapeutic benefits of steam therapy in a peaceful, tranquil environment overlooking Mission Bay."
|
||||
id: "4", title: "Guided Nature Journeys", content: "Expert naturalists lead exclusive excursions through pristine jungle trails, wildlife viewing, botanical explorations, and transformative forest bathing sessions in complete harmony with nature."
|
||||
},
|
||||
{
|
||||
id: "5", title: "Yoga & Wellness", content: "Join our group yoga classes or book a private session by the bay. Our certified instructors guide you through rejuvenating practices that align mind, body, and spirit in our peaceful setting."
|
||||
id: "5", title: "Luxury Accommodations", content: "Each suite is a masterpiece of modern architecture seamlessly integrated into the landscape. Private pools, premium bedding, smart home technology, and panoramic views define our world-class rooms."
|
||||
}
|
||||
]}
|
||||
buttons={[
|
||||
{ text: "Book Your Treatment", href: "#contact" }
|
||||
{ text: "Book Your Experience", href: "#contact" }
|
||||
]}
|
||||
ariaLabel="Wellness services and treatments"
|
||||
ariaLabel="Premium luxury experiences and amenities"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="experience" data-section="experience">
|
||||
<MetricCardTwo
|
||||
title="Our Impact"
|
||||
description="Join thousands of guests who have experienced transformation and peace at Wellness Lounge Day Spa."
|
||||
title="The Luxury Difference"
|
||||
description="Our commitment to excellence is reflected in every aspect of your stay, from personalized service to architectural innovation and environmental stewardship."
|
||||
tag="By The Numbers"
|
||||
tagIcon={TrendingUp}
|
||||
metrics={[
|
||||
{ id: "1", value: "10K+", description: "Satisfied Guests" },
|
||||
{ id: "2", value: "15+", description: "Years of Excellence" },
|
||||
{ id: "3", value: "98%", description: "Guest Satisfaction" },
|
||||
{ id: "4", value: "50+", description: "Wellness Treatments" }
|
||||
{ id: "1", value: "5000+", description: "Hours of Design Craftsmanship" },
|
||||
{ id: "2", value: "98%", description: "Guest Return Rate" },
|
||||
{ id: "3", value: "24/7", description: "Concierge Excellence" },
|
||||
{ id: "4", value: "20+", description: "Bespoke Services" }
|
||||
]}
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
animationType="scale-rotate"
|
||||
animationType="blur-reveal"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground="invertDefault"
|
||||
ariaLabel="Wellness Lounge impact metrics"
|
||||
useInvertedBackground="noInvert"
|
||||
ariaLabel="Luxury retreat excellence metrics"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -151,122 +150,122 @@ export default function WellnessLoungePage() {
|
||||
<TestimonialCardTwelve
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: "Sarah Johnson", imageSrc: "https://img.b2bpic.net/free-photo/woman-posing-with-bathrobe-spa_23-2148206146.jpg", imageAlt: "Sarah Johnson"
|
||||
id: "1", name: "Alexandra Sterling", imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Alexandra Sterling"
|
||||
},
|
||||
{
|
||||
id: "2", name: "Michelle Chen", imageSrc: "https://img.b2bpic.net/free-photo/woman-posing-with-bathrobe-spa_23-2148206225.jpg", imageAlt: "Michelle Chen"
|
||||
id: "2", name: "Victoria Beaumont", imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Victoria Beaumont"
|
||||
},
|
||||
{
|
||||
id: "3", name: "Jessica Martinez", imageSrc: "https://img.b2bpic.net/free-photo/attractive-woman-just-has-taken-shower_329181-7867.jpg", imageAlt: "Jessica Martinez"
|
||||
id: "3", name: "Natasha Mendez", imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Natasha Mendez"
|
||||
},
|
||||
{
|
||||
id: "4", name: "Amanda Williams", imageSrc: "https://img.b2bpic.net/free-photo/portrait-dentist-standing-with-arms-crossed_107420-73977.jpg", imageAlt: "Amanda Williams"
|
||||
id: "4", name: "Catherine Laurent", imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Catherine Laurent"
|
||||
}
|
||||
]}
|
||||
cardTitle="Over 10,000 guests trust us to deliver exceptional spa experiences and complete wellness rejuvenation"
|
||||
cardTag="See what they say"
|
||||
cardTitle="Discover why the world's most discerning travelers choose our exclusive jungle escape for transformative luxury experiences."
|
||||
cardTag="Guest Testimonials"
|
||||
cardTagIcon={Heart}
|
||||
useInvertedBackground="noInvert"
|
||||
ariaLabel="Guest testimonials and reviews"
|
||||
useInvertedBackground="invertDefault"
|
||||
ariaLabel="Luxury guest testimonials and experiences"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
title="Frequently Asked Questions"
|
||||
description="Find answers to common questions about our spa services, hours, and wellness experiences."
|
||||
tag="Help & Support"
|
||||
title="Planning Your Escape"
|
||||
description="Find comprehensive information about reservations, accommodations, services, and what to expect during your luxury jungle retreat experience."
|
||||
tag="Frequently Asked"
|
||||
tagIcon={HelpCircle}
|
||||
imageSrc="https://img.b2bpic.net/free-photo/young-woman-relaxing-spa-hotel-outdoors_23-2149037120.jpg"
|
||||
imageAlt="Peaceful spa relaxation environment"
|
||||
mediaPosition="right"
|
||||
imageSrc="/placeholders/placeholder1.webp"
|
||||
imageAlt="Tranquil jungle pool with ambient evening lighting"
|
||||
mediaPosition="left"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground="invertDefault"
|
||||
useInvertedBackground="noInvert"
|
||||
animationType="smooth"
|
||||
faqs={[
|
||||
{
|
||||
id: "1", title: "What are your spa hours?", content: "<strong>Monday-Wednesday:</strong> Closed / By Appointment Only 12-6pm<br><strong>Thursday-Friday:</strong> 12-6pm<br><strong>Saturday:</strong> 10am-6pm<br><strong>Sunday:</strong> 10am-4pm<br><br>Facilities open 7am-10pm for members."
|
||||
id: "1", title: "What is the best time to visit?", content: "Our retreat operates year-round with each season offering unique experiences. Dry season (November-April) provides clear skies and optimal wildlife viewing. Wet season (May-October) showcases dramatic jungle verdancy and offers exclusive rates for adventurous travelers."
|
||||
},
|
||||
{
|
||||
id: "2", title: "How do I book a treatment?", content: "You can book online through our website, call us at 858-342-9444, or email us at wellnessloungedayspa@gmail.com. We recommend booking in advance, especially for weekend appointments."
|
||||
id: "2", title: "How do I make a reservation?", content: "Reservations can be made through our website, by calling our concierge team at +1-800-LUXURY-1, or via email at reservations@luxuryjungleescape.com. We recommend booking 3-6 months in advance for peak seasons. Our team handles all arrangements including flights."
|
||||
},
|
||||
{
|
||||
id: "3", title: "What should I bring to my appointment?", content: "Please arrive 10-15 minutes early. Bring your ID and any relevant medical information. We provide robes, towels, and slippers. Feel free to bring personal items, but we recommend leaving valuables at home."
|
||||
id: "3", title: "What are your accommodation options?", content: "We offer five exquisite suite categories: Forest View Suites, Jungle Premier Suites with private infinity pools, The Mansion Master Suite, and exclusive private villas. Each features cutting-edge amenities, bespoke décor, and unparalleled natural vistas."
|
||||
},
|
||||
{
|
||||
id: "4", title: "Do you offer gift cards?", content: "Yes! Our gift cards are the perfect present for anyone seeking wellness and relaxation. Available in various denominations, they can be purchased online or by calling us directly."
|
||||
id: "4", title: "Are meals included in my stay?", content: "Gourmet breakfast and afternoon tea are complimentary. Lunch and dinner can be customized through our à la carte menu or arranged as multi-course tasting menus. Dietary preferences and restrictions are accommodated with advance notice."
|
||||
},
|
||||
{
|
||||
id: "5", title: "Can we book group spa parties?", content: "Absolutely! We offer spa party packages for groups. Contact us to customize your experience with friends, family, or colleagues. Minimum group sizes and advance booking required."
|
||||
id: "5", title: "What activities and excursions are available?", content: "Activities include guided jungle treks, wildlife photography safaris, spa treatments, yoga sessions, culinary classes, private pool time, wellness consultations, and bespoke adventure planning. All activities are customized to your preferences and fitness level."
|
||||
},
|
||||
{
|
||||
id: "6", title: "Do you offer corporate wellness programs?", content: "Yes, we provide corporate wellness packages including yoga classes, team spa treatments, and relaxation lounge access. Contact us to discuss customized options for your organization."
|
||||
id: "6", title: "Is transportation provided?", content: "Yes. Complimentary transportation from the nearest international airport is included. We arrange helicopter transfers, private car services, and guided journey options to make your arrival seamless and memorable."
|
||||
}
|
||||
]}
|
||||
ariaLabel="FAQ about Wellness Lounge services and policies"
|
||||
ariaLabel="FAQ about luxury retreat reservations and services"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
title="Begin Your Journey"
|
||||
description="Ready to escape into serenity? Contact us to book your wellness experience or inquire about our services. We're here to help you find your calm."
|
||||
title="Begin Your Transformation"
|
||||
description="Ready to escape into unparalleled luxury? Contact our concierge team to reserve your exclusive jungle mansion experience. We'll curate every detail of your unforgettable retreat."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Your Name", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Your Email", required: true },
|
||||
{ name: "phone", type: "tel", placeholder: "Phone Number", required: false },
|
||||
{ name: "service", type: "text", placeholder: "Service of Interest", required: false }
|
||||
{ name: "dates", type: "text", placeholder: "Preferred Dates", required: false },
|
||||
{ name: "interests", type: "text", placeholder: "Interests & Preferences", required: false }
|
||||
]}
|
||||
textarea={{ name: "message", placeholder: "Tell us about your wellness goals or questions...", rows: 5, required: true }}
|
||||
useInvertedBackground="noInvert"
|
||||
imageSrc="https://img.b2bpic.net/free-photo/long-exposure-waterfall-colorful-forest_181624-14193.jpg"
|
||||
imageAlt="Natural stone spa texture"
|
||||
textarea={{ name: "message", placeholder: "Tell us about your vision for the perfect luxury escape...", rows: 5, required: true }}
|
||||
useInvertedBackground="invertDefault"
|
||||
imageSrc="/placeholders/placeholder1.webp"
|
||||
imageAlt="Moonlit mansion courtyard with sophisticated ambient lighting"
|
||||
mediaPosition="right"
|
||||
buttonText="Begin Your Escape"
|
||||
ariaLabel="Contact form to book spa treatments"
|
||||
buttonText="Reserve Your Escape"
|
||||
ariaLabel="Contact form to reserve luxury jungle escape experience"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
logoText="Wellness Lounge"
|
||||
logoText="Luxury Jungle Escape"
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{ label: "Services", href: "services" },
|
||||
{ label: "Facilities", href: "experience" },
|
||||
{ label: "Gift Cards", href: "services" },
|
||||
{ label: "Book Online", href: "contact" }
|
||||
{ label: "Experiences", href: "services" },
|
||||
{ label: "Accommodations", href: "about" },
|
||||
{ label: "Amenities", href: "experience" },
|
||||
{ label: "Reservations", href: "contact" }
|
||||
]
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Spa Parties", href: "services" },
|
||||
{ label: "Yoga Classes", href: "services" },
|
||||
{ label: "Corporate Wellness", href: "services" },
|
||||
{ label: "Group Rates", href: "contact" }
|
||||
{ label: "Wellness & Spa", href: "services" },
|
||||
{ label: "Culinary Excellence", href: "services" },
|
||||
{ label: "Nature Journeys", href: "services" },
|
||||
{ label: "Concierge Services", href: "contact" }
|
||||
]
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "1441 Quivira Rd", href: "#" },
|
||||
{ label: "San Diego, CA 92109", href: "#" },
|
||||
{ label: "858-342-9444", href: "tel:858-342-9444" },
|
||||
{ label: "wellnessloungedayspa@gmail.com", href: "mailto:wellnessloungedayspa@gmail.com" }
|
||||
{ label: "Jungle Sanctuary Location" },
|
||||
{ label: "Costa Rica" },
|
||||
{ label: "+1-800-LUXURY-1", href: "tel:+1-800-LUXURY-1" },
|
||||
{ label: "reservations@luxuryjungleescape.com", href: "mailto:reservations@luxuryjungleescape.com" }
|
||||
]
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Instagram", href: "https://instagram.com/wellnesslounge_dayspa" },
|
||||
{ label: "Spa Policies", href: "services" },
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Contact", href: "contact" }
|
||||
{ label: "Instagram", href: "https://instagram.com/luxuryjungleescape" },
|
||||
{ label: "Policies" },
|
||||
{ label: "Privacy" },
|
||||
{ label: "Sustainability" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
ariaLabel="Wellness Lounge footer navigation"
|
||||
ariaLabel="Luxury Jungle Escape footer navigation"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user