development/cbbeabac-0376-4ee1-836c-6ebe811a4249
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-01-17 01:47:30 +02:00
commit 1b558b8716
259 changed files with 49877 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

526
src/app/globals.css Normal file
View File

@@ -0,0 +1,526 @@
@import "tailwindcss";
:root {
/* Base units */
/* --vw is set by ThemeProvider */
/* --background: #f5f5f5;;
--card: #ffffff;;
--foreground: #1c1c1c;;
--primary-cta: #159c49;;
--secondary-cta: #ffffff;;
--accent: #159c49;;
--background-accent: #a8e8ba;; */
--background: #f5f5f5;;
--card: #ffffff;;
--foreground: #1c1c1c;;
--primary-cta: #159c49;;
--secondary-cta: #ffffff;;
--accent: #159c49;;
--background-accent: #a8e8ba;;
/* 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-source-sans-3), sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
overscroll-behavior-y: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-source-sans-3), sans-serif;
}

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

File diff suppressed because it is too large Load Diff

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

@@ -0,0 +1,237 @@
"use client"
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import SplitAbout from '@/components/sections/about/SplitAbout';
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Waves, Anchor, Users, BookOpen, Calendar, Leaf, Zap, Heart, CheckCircle, Award, HelpCircle } from "lucide-react";
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="text-shift"
defaultTextAnimation="entrance-slide"
borderRadius="pill"
contentWidth="small"
sizing="mediumLargeSizeLargeTitles"
background="floatingGradient"
cardStyle="gradient-mesh"
primaryButtonStyle="inset-glow"
secondaryButtonStyle="glass"
headingFontWeight="normal"
>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
brandName="Haifa Surf Club"
navItems={[
{ name: "Home", id: "home" },
{ name: "About", id: "about" },
{ name: "Events", id: "events" },
{ name: "Membership", id: "pricing" },
{ name: "Contact", id: "contact" }
]}
bottomLeftText="Haifa, Israel"
bottomRightText="hello@haifasurfclub.com"
/>
</div>
<div id="hero" data-section="hero">
<HeroOverlay
title="Ride the Waves of Haifa's Surf Culture"
description="Join a vibrant community of surfers sharing passion, lessons, and local events"
tag="Welcome to Haifa Surf Club"
tagIcon={Waves}
imageSrc="https://img.b2bpic.net/free-photo/beautiful-girl-walks-with-surfboard-wild-beach-amazing-view-from-top_72229-1193.jpg"
imageAlt="Surfers riding waves in Haifa"
textPosition="bottom-left"
showBlur={true}
showDimOverlay={true}
buttons={[
{ text: "Join the Club Today", href: "contact" },
{ text: "Learn More", href: "about" }
]}
/>
</div>
<div id="about" data-section="about">
<SplitAbout
title="About Haifa Surf Club"
description="We're a passionate community dedicated to celebrating local surf culture, fostering skill development, and building lasting connections through our shared love of the ocean. Whether you're a seasoned pro or catching your first wave, there's a place for you here."
tag="Our Story"
tagIcon={Anchor}
imagePosition="right"
imageSrc="https://img.b2bpic.net/free-photo/friends-running-water_53876-31588.jpg"
imageAlt="Haifa Surf Club community members at the beach"
textboxLayout="default"
useInvertedBackground="invertDefault"
bulletPoints={[
{
title: "Community First", description: "We believe in fostering genuine connections among surfers of all levels, creating a welcoming and inclusive environment where everyone can thrive.", icon: Users
},
{
title: "Expert Instruction", description: "Our certified instructors bring years of experience to every lesson, ensuring safe, effective training whether you're a beginner or advancing your skills.", icon: BookOpen
},
{
title: "Local Events", description: "From friendly competitions to social gatherings, we organize regular events that celebrate the spirit of our coastal community and strengthen bonds.", icon: Calendar
},
{
title: "Ocean Respect", description: "We're committed to sustainable practices and environmental stewardship, protecting the waters we love for future generations of surfers.", icon: Leaf
}
]}
/>
</div>
<div id="features" data-section="features">
<FeatureCardSeven
title="What We Offer"
description="Our comprehensive programs and services are designed to help you get the most out of your surfing experience"
tag="Our Programs"
tagIcon={Zap}
textboxLayout="default"
useInvertedBackground="noInvert"
animationType="blur-reveal"
features={[
{
id: 1,
title: "Professional Surf Lessons", description: "Whether you're a beginner picking up a board for the first time or an intermediate surfer looking to refine your technique, our certified instructors provide personalized coaching tailored to your level.", imageSrc: "https://img.b2bpic.net/free-photo/kind-father-with-mechanical-leg-daughter-near-ocean-mid-adult-man-helping-little-dark-haired-girl-adjust-surfboard-family-leisure-active-lifestyle-concept_74855-22133.jpg", imageAlt: "Surf instructor teaching a student on the beach"
},
{
id: 2,
title: "Community Events", description: "Join us for monthly meetups, beach cleanups, friendly competitions, and social gatherings that celebrate our shared passion and build lasting friendships within the Haifa surf community.", imageSrc: "https://img.b2bpic.net/free-vector/sport-banners-template-with-photo_23-2148212138.jpg", imageAlt: "Group of surfers at a beach event"
},
{
id: 3,
title: "Local Surf Culture", description: "Immerse yourself in authentic coastal culture. Discover the best breaks, learn about ocean conditions, connect with fellow enthusiasts, and become part of a thriving, passionate community.", imageSrc: "https://img.b2bpic.net/free-photo/beautiful-girl-walks-with-surfboard-wild-beach-amazing-view-from-top_72229-1193.jpg", imageAlt: "Ocean waves and coastal landscape in Haifa"
}
]}
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardOne
title="What Our Community Says"
description="Real stories from surfers who have joined Haifa Surf Club and transformed their connection to the ocean and each other"
tag="Testimonials"
tagIcon={Heart}
textboxLayout="default"
useInvertedBackground="invertDefault"
gridVariant="uniform-all-items-equal"
carouselMode="buttons"
animationType="slide-up"
testimonials={[
{
id: "1", name: "David Koren", role: "Experienced Surfer", company: "Software Engineer", rating: 5,
imageSrc: "https://img.b2bpic.net/free-photo/shirtless-man-with-surfboard-looking-camera-beach-sunshine_107420-9960.jpg", imageAlt: "David Koren, experienced surfer"
},
{
id: "2", name: "Lior Natan", role: "Beginner", company: "Marketing Professional", rating: 5,
imageSrc: "https://img.b2bpic.net/free-photo/man-surfer-with-white-curly-hair-with-surfboard-is-going-surf_1321-3191.jpg", imageAlt: "Lior Natan, beginner surfer"
},
{
id: "3", name: "Maya Shani", role: "Intermediate Surfer", company: "Fitness Instructor", rating: 5,
imageSrc: "https://img.b2bpic.net/free-photo/young-man-holding-surfboard-head_23-2148022377.jpg", imageAlt: "Maya Shani, intermediate surfer"
},
{
id: "4", name: "Yosef Almagor", role: "Parent & Surfer", company: "Accountant", rating: 5,
imageSrc: "https://img.b2bpic.net/free-photo/portrait-handsome-surfer-standing-beach-with-surfboard-looking-away_74855-16423.jpg", imageAlt: "Yosef Almagor, parent and surfer"
}
]}
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardFive
title="Membership Plans"
description="Choose the membership level that best fits your surf lifestyle and commitment to our community"
tag="Join Us"
tagIcon={CheckCircle}
textboxLayout="default"
useInvertedBackground="noInvert"
animationType="slide-up"
plans={[
{
id: "casual", tag: "Casual Pass", price: "99", period: "/month", description: "Perfect for occasional visitors looking to catch waves and meet other surfers", button: { text: "Get Started", href: "contact" },
featuresTitle: "Included:", features: [
"Unlimited beach access", "Monthly community events", "Beginner lesson discount (20%)", "Online community forum access"
]
},
{
id: "regular", tag: "Regular Member", tagIcon: CheckCircle,
price: "199", period: "/month", description: "Our most popular option for dedicated local surfers seeking regular lessons and community", button: { text: "Join Now", href: "contact" },
featuresTitle: "Included:", features: [
"Unlimited beach access", "4 lessons per month", "Priority event registration", "Member-only socials", "Lesson package savings", "Gear rental discount (10%)"
]
},
{
id: "pro", tag: "Pro Surfer", tagIcon: Award,
price: "349", period: "/month", description: "For serious surfers and instructors seeking premium benefits, coaching, and priority access", button: { text: "Become a Pro Member", href: "contact" },
featuresTitle: "Included:", features: [
"Unlimited beach access", "Unlimited coaching sessions", "Private lesson availability", "Competition entry discounts", "Exclusive pro events & travel", "Gear rental included", "Priority event hosting"
]
}
]}
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitMedia
title="Frequently Asked Questions"
description="Find answers to common questions about membership, lessons, events, and everything else you need to know about joining Haifa Surf Club"
tag="FAQ"
tagIcon={HelpCircle}
textboxLayout="default"
useInvertedBackground="invertDefault"
imageSrc="https://img.b2bpic.net/free-photo/beautiful-girl-walks-with-surfboard-wild-beach-amazing-view-from-top_72229-1193.jpg"
imageAlt="Surfer in action on ocean waves"
mediaPosition="left"
animationType="smooth"
faqs={[
{
id: "1", title: "What's the minimum age to join Haifa Surf Club?", content: "We welcome surfers of all ages! Children as young as 5 can start with our beginner lessons under parental supervision. Teens and adults of any age are welcome. We recommend all participants take at least one safety lesson before heading out on their own."
},
{
id: "2", title: "Do I need my own surfboard to join?", content: "No, you don't need to own a board. We offer discounted board rental for all members, and our Casual Pass includes a 20% discount on rentals. Pro Members get unlimited free gear rental. Once you advance, we can help you find the perfect board for your style."
},
{
id: "3", title: "How often do lessons take place?", content: "Lessons are offered daily with multiple time slots to fit your schedule. Regular Members get 4 lessons per month, while Pro Members have unlimited access. We also offer group sessions and private coaching. You can book lessons through our online portal or contact us directly."
},
{
id: "4", title: "What happens if there are no waves?", content: "We monitor ocean conditions carefully. If conditions aren't safe for surfing, we may reschedule your lesson or offer an alternative indoor theory session. We prioritize your safety above all else. Bad conditions are rare in Haifa thanks to our consistent coastal swells!"
},
{
id: "5", title: "Are there safety guarantees for beginners?", content: "Absolutely. All our instructors are certified in water safety and first aid. Beginners work in small groups or private sessions with direct supervision. We use only approved safety equipment and maintain strict protocols. Every lesson starts with a safety briefing."
},
{
id: "6", title: "How do I cancel my membership?", content: "You can cancel anytime with 30 days notice. No long-term contracts required. We hope you'll love being part of our community, but we understand life circumstances change. Just reach out to our team and we'll process your cancellation."
}
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactCenter
tag="Ready to Surf?"
tagIcon={Zap}
title="Join Haifa Surf Club Today"
description="Sign up for our newsletter to get updates on new events, lesson schedules, special offers, and insider tips about the best breaks in Haifa. Be part of our thriving coastal community."
useInvertedBackground="noInvert"
inputPlaceholder="Enter your email"
buttonText="Join the Club"
termsText="We respect your privacy and only send occasional updates about events and special offers. Unsubscribe anytime."
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="Haifa Surf Club"
/>
</div>
</ThemeProvider>
);
}