Initial commit
This commit is contained in:
BIN
src/app/favicon.ico
Normal file
BIN
src/app/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
518
src/app/globals.css
Normal file
518
src/app/globals.css
Normal file
@@ -0,0 +1,518 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
/* Base units */
|
||||
/* --vw is set by ThemeProvider */
|
||||
|
||||
--background: #ffffff;;
|
||||
--card: #fcfcfc;;
|
||||
--foreground: #0f0600e6;;
|
||||
--primary-cta: #e8590c;;
|
||||
--secondary-cta: #f9f9f9;;
|
||||
--accent: #e2e2e2;;
|
||||
--background-accent: #c4c4c4;;
|
||||
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
|
||||
@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%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
* {
|
||||
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-outfit), sans-serif;
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
overscroll-behavior: none;
|
||||
overscroll-behavior-y: none;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: var(--font-outfit), sans-serif;
|
||||
}
|
||||
1265
src/app/layout.tsx
Normal file
1265
src/app/layout.tsx
Normal file
File diff suppressed because it is too large
Load Diff
283
src/app/page.tsx
Normal file
283
src/app/page.tsx
Normal file
@@ -0,0 +1,283 @@
|
||||
"use client"
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
|
||||
import TagAbout from '@/components/sections/about/TagAbout';
|
||||
import FeatureCardThirteen from '@/components/sections/feature/FeatureCardThirteen';
|
||||
import TeamCardTen from '@/components/sections/team/TeamCardTen';
|
||||
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
||||
import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
|
||||
import FaqBase from '@/components/sections/faq/FaqBase';
|
||||
import ContactFaq from '@/components/sections/contact/ContactFaq';
|
||||
import FooterBaseSocial from '@/components/sections/footer/FooterBaseSocial';
|
||||
import { Sparkles, Heart, Instagram, Facebook, Youtube, Mail } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="directional-hover"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="pill"
|
||||
contentWidth="smallMedium"
|
||||
sizing="largeSizeMediumTitles"
|
||||
background="noiseGradient"
|
||||
cardStyle="gradient-mesh"
|
||||
primaryButtonStyle="layered-depth"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
brandName="Efrat"
|
||||
navItems={[
|
||||
{"name": "About", "id": "about"},
|
||||
{"name": "Offerings", "id": "feature"},
|
||||
{"name": "Team", "id": "team"},
|
||||
{"name": "Testimonials", "id": "testimonial"},
|
||||
{"name": "Pricing", "id": "pricing"}
|
||||
]}
|
||||
button={{
|
||||
"text": "Book Retreat", "href": "contact"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardScroll
|
||||
tag="Transformative Wellness"
|
||||
title="Discover Your Inner Peace"
|
||||
description="Immerse yourself in a transformative yoga and wellness retreat designed to reconnect you with your body, mind, and spirit. Experience guided yoga classes, meditation sessions, and holistic wellness practices in a serene natural setting."
|
||||
imageSrc="https://img.b2bpic.net/free-photo/full-shot-women-meditating-outdoors_23-2149698181.jpg"
|
||||
imageAlt="Peaceful yoga retreat setting"
|
||||
buttons={[
|
||||
{"text": "Book Your Retreat", "href": "contact"},
|
||||
{"text": "Learn More", "href": "about"}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TagAbout
|
||||
tag="Our Philosophy"
|
||||
description="At Efrat Yoga Retreat, we believe that true transformation begins with stillness. Our holistic approach combines ancient yoga wisdom with modern wellness science to create an immersive experience that nurtures your whole being. Whether you're seeking stress relief, physical renewal, or spiritual growth, our expert-led retreats provide a sacred space for deep healing and personal discovery."
|
||||
useInvertedBackground="noInvert"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="feature" data-section="feature">
|
||||
<FeatureCardThirteen
|
||||
title="Retreat Offerings"
|
||||
description="Explore our carefully curated wellness programs designed to deepen your practice"
|
||||
tag="What We Offer"
|
||||
textboxLayout="default"
|
||||
features={[
|
||||
{
|
||||
"id": "01", "title": "Flow Yoga Classes", "description": "Dynamic vinyasa and hatha yoga sessions led by experienced instructors to build strength, flexibility, and mindfulness through conscious movement."
|
||||
},
|
||||
{
|
||||
"id": "02", "title": "Guided Meditation", "description": "Daily meditation practices ranging from breath work to guided visualization, designed to calm the mind and deepen your inner awareness."
|
||||
},
|
||||
{
|
||||
"id": "03", "title": "Wellness Workshops", "description": "Specialized sessions on nutrition, self-care, chakra balancing, and holistic health practices to support your overall wellbeing."
|
||||
},
|
||||
{
|
||||
"id": "04", "title": "Nature Immersion", "description": "Outdoor practices including forest bathing, nature walks, and grounding exercises to reconnect with the healing power of the natural world."
|
||||
}
|
||||
]}
|
||||
animationType="slide-up"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground="invertDefault"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardTen
|
||||
title="Meet Our Expert Instructors"
|
||||
tag="Experienced Teachers"
|
||||
members={[
|
||||
{
|
||||
"id": "1", "name": "Efrat", "imageSrc": "https://img.b2bpic.net/free-photo/portrait-business-woman_158595-975.jpg", "imageAlt": "Efrat, lead yoga instructor"
|
||||
},
|
||||
{
|
||||
"id": "2", "name": "Sarah Cohen", "imageSrc": "https://img.b2bpic.net/free-photo/close-up-portrait-woman-doing-yoga_23-2149222434.jpg", "imageAlt": "Sarah Cohen, meditation specialist"
|
||||
},
|
||||
{
|
||||
"id": "3", "name": "Maya Wellness", "imageSrc": "https://img.b2bpic.net/free-photo/medium-shot-smiley-woman-with-mat_23-2148877104.jpg", "imageAlt": "Maya Wellness, holistic health instructor"
|
||||
}
|
||||
]}
|
||||
memberVariant="default"
|
||||
useInvertedBackground="noInvert"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonial" data-section="testimonial">
|
||||
<TestimonialCardFive
|
||||
title="Transformative Experiences"
|
||||
description="Hear from participants who have experienced profound shifts through our retreats"
|
||||
tag="Client Testimonials"
|
||||
textboxLayout="default"
|
||||
testimonials={[
|
||||
{
|
||||
"id": "1", "name": "Jennifer Martinez, Wellness Coach", "date": "Date: December 2024", "tag": "Week-Long Retreat", "title": "A life-changing experience", "quote": "Efrat's retreat was exactly what I needed. The combination of yoga, meditation, and the serene environment allowed me to release years of tension. I left feeling renewed, grounded, and deeply connected to myself.", "avatarSrc": "https://img.b2bpic.net/free-photo/casual-smile-street-style-background-spring_1139-777.jpg", "avatarAlt": "Jennifer Martinez", "imageSrc": "https://img.b2bpic.net/free-photo/front-view-women-meditating-nature_23-2149698177.jpg", "imageAlt": "Yoga retreat participants"
|
||||
},
|
||||
{
|
||||
"id": "2", "name": "Rachel Green, Marketing Executive", "date": "Date: November 2024", "tag": "Weekend Intensive", "title": "Exactly what my soul needed", "quote": "I came to this retreat burned out and exhausted from work. Efrat and her team created such a safe, nurturing space for healing. The daily yoga and meditation practices gave me tools I continue to use at home.", "avatarSrc": "https://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg", "avatarAlt": "Rachel Green", "imageSrc": "https://img.b2bpic.net/free-photo/smiling-female-athlete-doing-stretching-exercise-cobra-pose-rocky-beach-sunset-copy-space_637285-5493.jpg", "imageAlt": "Meditation session"
|
||||
},
|
||||
{
|
||||
"id": "3", "name": "Amanda Stone, Yoga Teacher", "date": "Date: October 2024", "tag": "Intensive Training", "title": "Professional growth and personal transformation", "quote": "As an experienced yoga teacher, I was impressed by the depth and quality of instruction. Efrat's knowledge and compassion elevated my practice to new levels. Highly recommend for anyone serious about their yoga journey.", "avatarSrc": "https://img.b2bpic.net/free-photo/joyful-business-woman-with-coffee-cup_23-2148095746.jpg", "avatarAlt": "Amanda Stone", "imageSrc": "https://img.b2bpic.net/free-photo/full-shot-women-meditating-nature_23-2149698175.jpg", "imageAlt": "Yoga class in session"
|
||||
},
|
||||
{
|
||||
"id": "4", "name": "Lisa Chen, Health Professional", "date": "Date: September 2024", "tag": "Wellness Retreat", "title": "A sanctuary for healing", "quote": "The attention to detail in every aspect of the retreat is remarkable. From the nutritious meals to the expertly guided sessions, everything was designed with care. I felt deeply seen and supported throughout my stay.", "avatarSrc": "https://img.b2bpic.net/free-photo/portrait-beautiful-business-office-business-center_1303-20365.jpg", "avatarAlt": "Lisa Chen", "imageSrc": "https://img.b2bpic.net/free-photo/full-shot-women-meditating-together_23-2149698120.jpg", "imageAlt": "Healthy wellness food"
|
||||
},
|
||||
{
|
||||
"id": "5", "name": "Maria Rodriguez, Life Coach", "date": "Date: August 2024", "tag": "Transformation Retreat", "title": "Truly transformative", "quote": "I arrived with anxiety and left with clarity. Efrat's teaching style is unique—she combines traditional yoga wisdom with practical modern applications. The retreat setting made it easy to disconnect from daily stressors and reconnect with what truly matters.", "avatarSrc": "https://img.b2bpic.net/free-photo/happy-business-woman-white-shirt_23-2148095748.jpg", "avatarAlt": "Maria Rodriguez", "imageSrc": "https://img.b2bpic.net/free-photo/sporty-women-doing-yoga-exercises-nature_651396-3785.jpg", "imageAlt": "Nature immersion"
|
||||
},
|
||||
{
|
||||
"id": "6", "name": "Sophie Laurent, Artist", "date": "Date: July 2024", "tag": "Creative Wellness", "title": "Reignited my creative spirit", "quote": "As a creative professional, I struggled with burnout and lack of inspiration. This retreat was the reset I needed. The practices Efrat taught me have become part of my daily ritual, and I'm creating more authentically than ever.", "avatarSrc": "https://img.b2bpic.net/free-photo/indoor-shot-attractive-caucasian-teenage-woman-with-long-dark-hair-sitting-desk-with-lots-textbooks_273609-1136.jpg", "avatarAlt": "Sophie Laurent", "imageSrc": "https://img.b2bpic.net/free-photo/front-view-women-meditating-nature_23-2149698177.jpg", "imageAlt": "Peaceful retreat setting"
|
||||
}
|
||||
]}
|
||||
useInvertedBackground="invertDefault"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardTwo
|
||||
title="Retreat Packages"
|
||||
description="Choose the perfect package for your wellness journey"
|
||||
tag="Investment in Your Wellbeing"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
plans={[
|
||||
{
|
||||
"id": "1", "badge": "Weekend Reset", "badgeIcon": Sparkles,
|
||||
"price": "$495", "subtitle": "Perfect for first-time participants", "buttons": [
|
||||
{"text": "Book Now", "href": "contact"},
|
||||
{"text": "Learn More"}
|
||||
],
|
||||
"features": [
|
||||
"2-night accommodation", "5 yoga classes", "3 guided meditation sessions", "Organic meals and snacks", "Welcome ceremony", "Departure blessing"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "2", "badge": "Week Immersion", "badgeIcon": Sparkles,
|
||||
"price": "$1,295", "subtitle": "Deep transformation and renewal", "buttons": [
|
||||
{"text": "Book Now", "href": "contact"},
|
||||
{"text": "Learn More"}
|
||||
],
|
||||
"features": [
|
||||
"7-night luxury accommodation", "14 yoga classes", "10 meditation sessions", "Daily wellness workshops", "Nutrition guidance", "Spa treatments", "All organic meals"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "3", "badge": "Intensive Retreat", "badgeIcon": Sparkles,
|
||||
"price": "$2,495", "subtitle": "Complete immersion and mastery", "buttons": [
|
||||
{"text": "Book Now", "href": "contact"},
|
||||
{"text": "Learn More"}
|
||||
],
|
||||
"features": [
|
||||
"14-night retreat experience", "Daily yoga and meditation", "Advanced workshops", "One-on-one coaching", "Ayurvedic treatments", "Personal healing plan", "Lifetime community access"
|
||||
]
|
||||
}
|
||||
]}
|
||||
useInvertedBackground="noInvert"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
title="Frequently Asked Questions"
|
||||
description="Find answers to common questions about our retreats"
|
||||
tag="Help & Support"
|
||||
textboxLayout="default"
|
||||
animationType="smooth"
|
||||
useInvertedBackground="invertDefault"
|
||||
faqs={[
|
||||
{
|
||||
"id": "1", "title": "What experience level is required?", "content": "Our retreats welcome all levels, from complete beginners to advanced practitioners. Efrat and her team provide modifications for every pose and practice. The focus is on listening to your body and honoring your own pace."
|
||||
},
|
||||
{
|
||||
"id": "2", "title": "What is included in the retreat packages?", "content": "Each package includes accommodation, all yoga and meditation classes, organic meals, and workshop materials. The Intensive Retreat also includes spa treatments, one-on-one coaching sessions, and lifetime access to our online community for continued support."
|
||||
},
|
||||
{
|
||||
"id": "3", "title": "Do you offer dietary accommodations?", "content": "Yes, we accommodate all dietary preferences and restrictions including vegan, vegetarian, gluten-free, and other specific needs. Please inform us during booking so we can prepare appropriate meals for you."
|
||||
},
|
||||
{
|
||||
"id": "4", "title": "What should I bring to the retreat?", "content": "Please bring comfortable clothing for yoga, a water bottle, personal toiletries, any medications, and a journal. We provide yoga mats, props, and all bedding. Leave behind electronics, alcohol, and anything that might distract from your practice."
|
||||
},
|
||||
{
|
||||
"id": "5", "title": "Is there a refund policy?", "content": "We offer a full refund if you cancel more than 30 days before your retreat. Cancellations within 30 days may be rescheduled for another retreat date at no additional cost, or receive a 50% refund."
|
||||
},
|
||||
{
|
||||
"id": "6", "title": "How do I prepare for my first retreat?", "content": "Start practicing basic yoga postures a few weeks before arrival. Focus on listening to your body and setting an intention for your retreat. We'll send you a detailed preparation guide after booking to help you prepare physically and mentally."
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactFaq
|
||||
ctaTitle="Ready to Transform?"
|
||||
ctaDescription="Book your retreat today and begin your journey to inner peace and wellness."
|
||||
ctaButton={{
|
||||
"text": "Reserve Your Spot", "href": "contact"
|
||||
}}
|
||||
ctaIcon={Heart}
|
||||
useInvertedBackground="noInvert"
|
||||
animationType="slide-up"
|
||||
faqs={[
|
||||
{
|
||||
"id": "1", "title": "How do I book a retreat?", "content": "Click the 'Reserve Your Spot' button to access our booking form. Select your preferred package, dates, and provide any special requests. A member of our team will confirm your booking and send payment details."
|
||||
},
|
||||
{
|
||||
"id": "2", "title": "What is the cancellation policy?", "content": "Cancellations made 30+ days before the retreat receive a full refund. Cancellations within 30 days can be rescheduled at no cost or receive 50% refund. No refunds for cancellations made within 14 days."
|
||||
},
|
||||
{
|
||||
"id": "3", "title": "Can I bring a friend or family member?", "content": "Absolutely! Group bookings receive a 10% discount. We also offer couple's packages and family retreats. Contact us to discuss group rates and special arrangements."
|
||||
},
|
||||
{
|
||||
"id": "4", "title": "Is transportation provided?", "content": "We offer airport pickup and drop-off service for an additional fee. Parking is available at our retreat center if you prefer to drive yourself."
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseSocial
|
||||
logoText="Efrat Yoga"
|
||||
description="Transforming lives through the power of yoga, meditation, and holistic wellness. Join us for a retreat that nourishes your body, calms your mind, and awakens your spirit."
|
||||
columns={[
|
||||
{
|
||||
"title": "Retreats", "items": [
|
||||
{"label": "Weekend Reset", "href": "pricing"},
|
||||
{"label": "Week Immersion", "href": "pricing"},
|
||||
{"label": "Intensive Retreat", "href": "pricing"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "About", "items": [
|
||||
{"label": "Our Philosophy", "href": "about"},
|
||||
{"label": "Meet Our Team", "href": "team"},
|
||||
{"label": "Testimonials", "href": "testimonial"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Resources", "items": [
|
||||
{"label": "FAQ", "href": "faq"},
|
||||
{"label": "Blog", "href": "#blog"},
|
||||
{"label": "Contact Us", "href": "contact"}
|
||||
]
|
||||
}
|
||||
]}
|
||||
socialLinks={[
|
||||
{"icon": Instagram, "href": "https://instagram.com/efratyoga", "ariaLabel": "Instagram"},
|
||||
{"icon": Facebook, "href": "https://facebook.com/efratyoga", "ariaLabel": "Facebook"},
|
||||
{"icon": Youtube, "href": "https://youtube.com/@efratyoga", "ariaLabel": "YouTube"},
|
||||
{"icon": Mail, "href": "mailto:hello@efratyoga.com", "ariaLabel": "Email"}
|
||||
]}
|
||||
copyrightText="© 2025 Efrat Yoga Retreat | All rights reserved"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user