bender/da988bf4-2cc4-4d66-9dfb-e41e9933611e
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
dk
2026-03-08 15:39:14 +00:00
commit ae5e98ca93
631 changed files with 86269 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

210
src/app/coaching/page.tsx Normal file
View File

@@ -0,0 +1,210 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import SplitAbout from "@/components/sections/about/SplitAbout";
import FeatureCardNineteen from "@/components/sections/feature/FeatureCardNineteen";
import ContactFaq from "@/components/sections/contact/ContactFaq";
import FooterCard from "@/components/sections/footer/FooterCard";
import Link from "next/link";
import { Dumbbell, Instagram, Facebook, MessageCircle, Users, Award, Zap } from "lucide-react";
export default function CoachingPage() {
return (
<ThemeProvider
defaultButtonVariant="bounce-effect"
defaultTextAnimation="entrance-slide"
borderRadius="soft"
contentWidth="mediumLarge"
sizing="mediumLarge"
background="noise"
cardStyle="gradient-bordered"
primaryButtonStyle="shadow"
secondaryButtonStyle="radial-glow"
headingFontWeight="light"
>
{/* Navbar */}
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
brandName="Rabat Barbell Club"
navItems={[
{ name: "Home", id: "/" },
{ name: "Memberships", id: "/memberships" },
{ name: "Gallery", id: "/gallery" },
{ name: "Contact", id: "/contact" },
]}
button={{
text: "Join Now",
href: "#membership-inquiry",
}}
animateOnLoad={true}
/>
</div>
{/* Professional Coaching Section */}
<div id="coaching-intro" data-section="coaching-intro">
<SplitAbout
title="Professional Coaching Services"
tag="Elite Training"
description="Transform your training with expert guidance from our certified coaches. Whether you're a beginner learning proper form or an elite athlete preparing for competition, our multilingual coaching team will help you reach your peak performance."
textboxLayout="default"
useInvertedBackground={false}
bulletPoints={[
{
title: "Personalized Training Programs",
description: "Custom programs tailored to your specific goals, experience level, and training style",
icon: Award,
},
{
title: "Form Correction & Technique",
description: "Expert coaching on proper barbell mechanics and movement patterns",
icon: Zap,
},
{
title: "Multilingual Coaches",
description: "French, English, and Arabic-speaking coaches for seamless communication",
icon: Users,
},
{
title: "Competition Preparation",
description: "Specialized programs for powerlifting and weightlifting competitions",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/full-shot-people-training-together-gym_23-2150290027.jpg"
imageAlt="Professional coaching staff at Rabat Barbell Club"
mediaAnimation="slide-up"
imagePosition="right"
buttons={[
{
text: "Book a Session",
href: "#coaching-inquiry",
},
]}
buttonAnimation="slide-up"
/>
</div>
{/* Coaching Programs */}
<div id="coaching-programs" data-section="coaching-programs">
<FeatureCardNineteen
title="Our Coaching Programs"
description="Specialized coaching tracks for every athlete and goal"
textboxLayout="default"
useInvertedBackground={true}
tag="Training Excellence"
features={[
{
id: 1,
tag: "STRENGTH",
title: "Powerlifting Coaching",
subtitle: "Master the Big Three lifts with expert instruction",
description: "Comprehensive powerlifting coaching covering squat, bench press, and deadlift techniques. Learn competition rules, meet preparation, and peak performance strategies. Sessions available for individual athletes or small groups.",
imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-lifting-up-weights_23-2148284963.jpg",
imageAlt: "Powerlifting coaching session",
buttons: [
{
text: "Learn More",
href: "#contact",
},
],
},
{
id: 2,
tag: "OLYMPIC",
title: "Olympic Weightlifting",
subtitle: "Perfect your clean, jerk, and snatch technique",
description: "Professional Olympic lifting coaching from certified instructors. Master the technical movements required for competitive weightlifting. Includes mobility work, accessory training, and programming for strength development.",
imageSrc: "http://img.b2bpic.net/free-photo/fitness-concept-with-hands-woman-gym_23-2147675223.jpg",
imageAlt: "Olympic weightlifting training",
buttons: [
{
text: "Get Started",
href: "#contact",
},
],
},
{
id: 3,
tag: "DEVELOPMENT",
title: "General Strength Training",
subtitle: "Build strength, muscle, and athletic performance",
description: "Personalized strength and conditioning programs designed for your specific goals. Whether focusing on muscle hypertrophy, functional strength, or athletic performance, our coaches create programming that works.",
imageSrc: "http://img.b2bpic.net/free-photo/gym-interior-with-equipment_93675-128388.jpg",
imageAlt: "General strength training facility",
buttons: [
{
text: "Schedule Consultation",
href: "#contact",
},
],
},
]}
mediaAnimation="blur-reveal"
buttonAnimation="slide-up"
/>
</div>
{/* Coaching FAQ & CTA */}
<div id="coaching-faq" data-section="coaching-faq">
<ContactFaq
ctaTitle="Ready to Work With a Coach?"
ctaDescription="Book your first coaching session today and experience personalized guidance tailored to your training goals and experience level."
ctaButton={{
text: "Schedule First Session",
href: "#coaching-inquiry",
}}
ctaIcon={Dumbbell}
useInvertedBackground={true}
animationType="slide-up"
faqs={[
{
id: "1",
title: "How do I book a coaching session?",
content: "Click 'Schedule First Session' or contact us directly. We'll assess your current level, discuss your goals, and create a personalized coaching plan. Sessions can be one-on-one or small groups.",
},
{
id: "2",
title: "What experience levels do you coach?",
content: "Our coaches work with everyone from complete beginners to elite competitive athletes. We scale difficulty and intensity based on your current fitness level and experience.",
},
{
id: "3",
title: "What's included in a coaching package?",
content: "Packages include personalized programming, form correction, technique refinement, and progress tracking. Our coaches use video analysis to identify and correct movement issues for optimal performance.",
},
{
id: "4",
title: "Do you offer online coaching?",
content: "Yes, we offer remote coaching services for video form analysis and program design. In-person coaching is available at our Rabat facility with dedicated coaching sessions.",
},
]}
/>
</div>
{/* Footer */}
<div id="footer" data-section="footer">
<FooterCard
logoText="RABAT BARBELL CLUB"
copyrightText="© 2025 Rabat Barbell Club. All rights reserved."
socialLinks={[
{
icon: Instagram,
href: "https://instagram.com/rabatbarbellclub",
ariaLabel: "Instagram",
},
{
icon: Facebook,
href: "https://facebook.com/rabatbarbellclub",
ariaLabel: "Facebook",
},
{
icon: MessageCircle,
href: "https://wa.me/212XXXXXXXXX",
ariaLabel: "WhatsApp",
},
]}
/>
</div>
</ThemeProvider>
);
}

106
src/app/contact/page.tsx Normal file
View File

@@ -0,0 +1,106 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import ContactFaq from "@/components/sections/contact/ContactFaq";
import FooterCard from "@/components/sections/footer/FooterCard";
import Link from "next/link";
import { Dumbbell, Instagram, Facebook, MessageCircle } from "lucide-react";
export default function ContactPage() {
return (
<ThemeProvider
defaultButtonVariant="bounce-effect"
defaultTextAnimation="entrance-slide"
borderRadius="soft"
contentWidth="mediumLarge"
sizing="mediumLarge"
background="noise"
cardStyle="gradient-bordered"
primaryButtonStyle="shadow"
secondaryButtonStyle="radial-glow"
headingFontWeight="light"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
brandName="Rabat Barbell Club"
navItems={[
{ name: "Home", id: "/" },
{ name: "Memberships", id: "memberships" },
{ name: "Gallery", id: "gallery" },
{ name: "Contact", id: "contact" },
]}
button={{
text: "Join Now",
href: "#membership-inquiry",
}}
animateOnLoad={true}
/>
</div>
<div id="cta-section" data-section="cta-section">
<ContactFaq
faqs={[
{
id: "1",
title: "How do I book a trial session?",
content:
"Click the 'Book Free Trial' button or call us at +212 5XX XXXXXX. We'll schedule your session at a time that works best for you. Bring comfortable workout clothes and arrive 15 minutes early for orientation.",
},
{
id: "2",
title: "What's included in my membership?",
content:
"All memberships include unlimited access to our full facility, professional equipment, locker rooms with showers, WiFi, and access to our community events. Premium tiers include personal lockers, reserved platform time, and guest privileges.",
},
{
id: "3",
title: "Do you offer coaching services?",
content:
"Yes! We offer personal training, powerlifting coaching, Olympic weightlifting coaching, and group strength classes. Our multilingual coaches work with all experience levels. Contact us for pricing and availability.",
},
{
id: "4",
title: "Is there parking available?",
content:
"Yes, we have dedicated parking for members. Monthly and annual members receive priority parking. Day pass users have access to shared parking area adjacent to the facility.",
},
]}
ctaTitle="Ready to Train With Champions?"
ctaDescription="Book your free trial session today and experience the Rabat Barbell Club difference. Join our elite community of serious athletes."
ctaButton={{
text: "Book Free Trial",
href: "#trial-booking",
}}
ctaIcon={Dumbbell}
useInvertedBackground={true}
animationType="slide-up"
/>
</div>
<div id="footer" data-section="footer">
<FooterCard
logoText="RABAT BARBELL CLUB"
copyrightText="© 2025 Rabat Barbell Club. All rights reserved."
socialLinks={[
{
icon: Instagram,
href: "https://instagram.com/rabatbarbellclub",
ariaLabel: "Instagram",
},
{
icon: Facebook,
href: "https://facebook.com/rabatbarbellclub",
ariaLabel: "Facebook",
},
{
icon: MessageCircle,
href: "https://wa.me/212XXXXXXXXX",
ariaLabel: "WhatsApp",
},
]}
/>
</div>
</ThemeProvider>
);
}

BIN
src/app/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

223
src/app/gallery/page.tsx Normal file
View File

@@ -0,0 +1,223 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import MetricCardSeven from "@/components/sections/metrics/MetricCardSeven";
import TestimonialCardTwo from "@/components/sections/testimonial/TestimonialCardTwo";
import ContactFaq from "@/components/sections/contact/ContactFaq";
import FooterCard from "@/components/sections/footer/FooterCard";
import Link from "next/link";
import { Instagram, Facebook, MessageCircle, Dumbbell } from "lucide-react";
export default function GalleryPage() {
return (
<ThemeProvider
defaultButtonVariant="bounce-effect"
defaultTextAnimation="entrance-slide"
borderRadius="soft"
contentWidth="mediumLarge"
sizing="mediumLarge"
background="noise"
cardStyle="gradient-bordered"
primaryButtonStyle="shadow"
secondaryButtonStyle="radial-glow"
headingFontWeight="light"
>
{/* Navbar */}
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
brandName="Rabat Barbell Club"
navItems={[
{ name: "Home", id: "/" },
{ name: "Memberships", id: "/memberships" },
{ name: "Gallery", id: "/gallery" },
{ name: "Contact", id: "/contact" },
]}
button={{
text: "Join Now",
href: "#membership-inquiry",
}}
animateOnLoad={true}
/>
</div>
{/* Gallery Stats */}
<div id="gallery-stats" data-section="gallery-stats">
<MetricCardSeven
title="Rabat Barbell Club Gallery"
description="Explore our world-class facility through the lens of our members and community"
textboxLayout="default"
useInvertedBackground={false}
metrics={[
{
id: "1",
value: "500+",
title: "Active Community Members",
items: [
"Diverse athletic backgrounds",
"Local and international athletes",
"Supportive training community",
],
},
{
id: "2",
value: "24/7",
title: "Facility Access Hours",
items: [
"Open daily for training",
"Early morning sessions available",
"Late night training options",
],
},
{
id: "3",
value: "3",
title: "Professional Platforms",
items: [
"Competition-grade equipment",
"Dedicated training zones",
"Optimal training space",
],
},
{
id: "4",
value: "4.7★",
title: "Member Satisfaction Rating",
items: [
"100+ verified reviews",
"Consistent positive feedback",
"Industry-leading standards",
],
},
]}
animationType="slide-up"
/>
</div>
{/* Member Gallery & Testimonials */}
<div id="member-gallery" data-section="member-gallery">
<TestimonialCardTwo
title="Members & Stories"
description="Real athletes training at Rabat Barbell Club - see why we're Morocco's premier strength training destination"
tag="Community"
textboxLayout="default"
useInvertedBackground={true}
testimonials={[
{
id: "1",
name: "Karim El-Mansouri",
role: "Powerlifter",
testimonial: "Best gym in Morocco. The equipment quality is exceptional, and the coaches understand serious strength training. The community pushes you to be better every session.",
imageSrc: "http://img.b2bpic.net/free-photo/handsome-tattooed-bearded-man-gym-with-hammer_343596-1305.jpg",
imageAlt: "Karim El-Mansouri",
},
{
id: "2",
name: "Sophie Laurent",
role: "Fitness Enthusiast",
testimonial: "I've trained at multiple gyms across Europe. Rabat Barbell Club matches or exceeds them in every way. Professional, clean, and genuinely supportive staff.",
imageSrc: "http://img.b2bpic.net/free-photo/brunette-woman-wearing-sport-clothes_329181-13215.jpg",
imageAlt: "Sophie Laurent",
},
{
id: "3",
name: "Ahmed Hassan",
role: "Weightlifting Coach",
testimonial: "The facilities here are world-class. Perfect for training serious athletes. Finally have a proper facility in Rabat for Olympic lifting and strength sports.",
imageSrc: "http://img.b2bpic.net/free-photo/strong-enough-carry-such-heavy-weights_329181-14118.jpg",
imageAlt: "Ahmed Hassan",
},
{
id: "4",
name: "Natasha Volkov",
role: "Expat, Athlete",
testimonial: "As someone who moved from Russia to Rabat, finding quality training was my biggest concern. This club exceeded expectations. Highly recommended for serious athletes.",
imageSrc: "http://img.b2bpic.net/free-photo/young-hispanic-man-having-rest-after-exercising-horizontal-bars_181624-40278.jpg",
imageAlt: "Natasha Volkov",
},
{
id: "5",
name: "Mohammed Bennani",
role: "Strength Coach",
testimonial: "Running my coaching business here has been incredible. Access to top equipment and a motivated membership base. Best partnership I could ask for.",
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-wearing-fashionable-sport-clothes_329181-3802.jpg",
imageAlt: "Mohammed Bennani",
},
{
id: "6",
name: "Isabella Martinez",
role: "Tourist / Visitor",
testimonial: "Visited Rabat for two weeks and trained here every day. Incredible atmosphere, friendly members, and professional coaches. Worth the membership just for the experience.",
imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-sportive-girl-posing-dark-wall_176420-626.jpg",
imageAlt: "Isabella Martinez",
},
]}
animationType="slide-up"
carouselMode="auto"
/>
</div>
{/* Gallery CTA & FAQ */}
<div id="gallery-cta" data-section="gallery-cta">
<ContactFaq
ctaTitle="Experience Our Facility"
ctaDescription="Ready to see why athletes choose Rabat Barbell Club? Book a tour or free trial session and discover the difference a world-class facility makes."
ctaButton={{
text: "Book a Tour & Trial",
href: "#gallery-inquiry",
}}
ctaIcon={Dumbbell}
useInvertedBackground={false}
animationType="slide-up"
faqs={[
{
id: "1",
title: "Can I take photos/videos at the gym?",
content: "Yes, members are welcome to document their training for personal use and social media. We love seeing your progress! Just be respectful of other members' privacy. Photography of other members requires their consent.",
},
{
id: "2",
title: "Do you offer facility tours?",
content: "Absolutely! Schedule a tour to see all our equipment, training zones, and amenities. Tours are typically 30 minutes and give you a complete overview of what Rabat Barbell Club offers.",
},
{
id: "3",
title: "Can I film content here?",
content: "Yes, members can film training content. For commercial or professional productions, please contact us to discuss terms and scheduling to ensure minimal disruption to other members.",
},
{
id: "4",
title: "What's the facility amenity situation?",
content: "We offer locker rooms with showers, changing facilities, premium WiFi throughout, water stations, and comfortable rest areas. All facilities are modern and well-maintained.",
},
]}
/>
</div>
{/* Footer */}
<div id="footer" data-section="footer">
<FooterCard
logoText="RABAT BARBELL CLUB"
copyrightText="© 2025 Rabat Barbell Club. All rights reserved."
socialLinks={[
{
icon: Instagram,
href: "https://instagram.com/rabatbarbellclub",
ariaLabel: "Instagram",
},
{
icon: Facebook,
href: "https://facebook.com/rabatbarbellclub",
ariaLabel: "Facebook",
},
{
icon: MessageCircle,
href: "https://wa.me/212XXXXXXXXX",
ariaLabel: "WhatsApp",
},
]}
/>
</div>
</ThemeProvider>
);
}

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

@@ -0,0 +1,5 @@
@import "tailwindcss";
@import "./styles/variables.css";
@import "./styles/theme.css";
@import "./styles/utilities.css";
@import "./styles/base.css";

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

File diff suppressed because it is too large Load Diff

248
src/app/memberships/page.tsx Normal file
View File

@@ -0,0 +1,248 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import PricingCardThree from "@/components/sections/pricing/PricingCardThree";
import SplitAbout from "@/components/sections/about/SplitAbout";
import ContactFaq from "@/components/sections/contact/ContactFaq";
import FooterCard from "@/components/sections/footer/FooterCard";
import Link from "next/link";
import { Sparkles, Dumbbell, Instagram, Facebook, MessageCircle } from "lucide-react";
export default function MembershipsPage() {
return (
<ThemeProvider
defaultButtonVariant="bounce-effect"
defaultTextAnimation="entrance-slide"
borderRadius="soft"
contentWidth="mediumLarge"
sizing="mediumLarge"
background="noise"
cardStyle="gradient-bordered"
primaryButtonStyle="shadow"
secondaryButtonStyle="radial-glow"
headingFontWeight="light"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
brandName="Rabat Barbell Club"
navItems={[
{ name: "Home", id: "/" },
{ name: "Memberships", id: "/memberships" },
{ name: "Gallery", id: "gallery" },
{ name: "Contact", id: "contact" },
]}
button={{
text: "Join Now",
href: "#membership-inquiry",
}}
animateOnLoad={true}
/>
</div>
<div id="membership" data-section="membership">
<PricingCardThree
title="Membership Plans"
description="Choose the perfect plan for your training goals"
tag="Flexible Pricing"
textboxLayout="default"
useInvertedBackground={true}
plans={[
{
id: "day-pass",
price: "100 MAD",
name: "Day Pass",
buttons={[
{
text: "Get Day Pass",
href: "#contact",
},
{
text: "Learn More",
href: "#",
},
]}
features={[
"24-hour facility access",
"All equipment included",
"Locker room & showers",
"Water and towels",
]}
},
{
id: "monthly",
badge: "Most Popular",
badgeIcon: Sparkles,
price: "800 MAD",
name: "Monthly Membership",
buttons={[
{
text: "Join Now",
href: "#membership-inquiry",
},
{
text: "Schedule Trial",
href: "#trial-booking",
},
]}
features={[
"Unlimited facility access",
"All professional equipment",
"Locker room & showers",
"Premium WiFi access",
"Guest privileges (2/month)",
"Community events",
]}
},
{
id: "quarterly",
price: "2,100 MAD",
name: "3-Month Plan",
buttons={[
{
text: "Save & Join",
href: "#membership-inquiry",
},
{
text: "Schedule Trial",
href: "#trial-booking",
},
]}
features={[
"Unlimited facility access",
"Priority booking for platforms",
"All professional equipment",
"Personal locker",
"Premium WiFi & parking",
"Guest privileges (4/month)",
"Priority member events",
"Fitness assessment",
]}
},
{
id: "annual",
price: "7,200 MAD",
name: "Annual Membership",
buttons={[
{
text: "Commit & Save",
href: "#membership-inquiry",
},
{
text: "Schedule Trial",
href: "#trial-booking",
},
]}
features={[
"Unlimited facility access year-round",
"Reserved platform slots",
"Dedicated locker",
"Priority support & parking",
"Personal locker + storage",
"Unlimited guest privileges",
"Exclusive member events",
"Quarterly fitness assessment",
"Merchandise discount",
]}
},
]}
animationType="slide-up"
carouselMode="auto"
/>
</div>
<div id="trust" data-section="trust">
<SplitAbout
title="Why Our Members Stay"
tag="Membership Value"
description="More than just a gym. We're building a community of serious athletes committed to performance and growth."
textboxLayout="default"
useInvertedBackground={false}
bulletPoints={[
{
title: "Elite Coaching Support",
description: "Certified coaches available for guidance, technique refinement, and program design across all training disciplines",
},
{
title: "Community Events",
description: "Monthly competitions, workshops, and social events connecting our diverse international membership",
},
{
title: "Progress Tracking",
description: "Quarterly fitness assessments and personalized progress tracking help you achieve your goals systematically",
},
{
title: "World-Class Facilities",
description: "Constantly updated equipment, pristine facilities, and prime platform booking ensure optimal training conditions",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/full-shot-people-training-together-gym_23-2150290027.jpg"
imageAlt="Members training together at Rabat Barbell Club"
mediaAnimation="slide-up"
imagePosition="right"
buttonAnimation="slide-up"
/>
</div>
<div id="cta-membership" data-section="cta-membership">
<ContactFaq
ctaTitle="Ready to Join?"
ctaDescription="Select your plan above or book a free trial to experience the Rabat Barbell Club difference firsthand."
ctaButton={{
text: "Book Free Trial",
href: "#trial-booking",
}}
ctaIcon={Dumbbell}
useInvertedBackground={true}
animationType="slide-up"
faqs={[
{
id: "1",
title: "Can I upgrade or downgrade my membership?",
content: "Absolutely! You can change your membership tier at any time. We'll prorate charges so you only pay for what you use. Contact our team to make changes or discuss your options.",
},
{
id: "2",
title: "Is there a contract or cancellation policy?",
content: "Monthly memberships are month-to-month with 30 days notice to cancel. Longer-term plans (quarterly/annual) offer significant savings but require full commitment. All plans include 7-day trial access to ensure fit.",
},
{
id: "3",
title: "What if I travel frequently?",
content: "We offer pause options for members traveling or with temporary schedule conflicts. Day passes are available for occasional visits. Contact us to discuss the best solution for your situation.",
},
{
id: "4",
title: "Do you offer corporate or group rates?",
content: "Yes! We offer special pricing for groups of 5+. Whether you're a company team or training group, we can work out a custom arrangement. Reach out to discuss your needs.",
},
]}
/>
</div>
<footer id="footer" data-section="footer">
<FooterCard
logoText="RABAT BARBELL CLUB"
copyrightText="© 2025 Rabat Barbell Club. All rights reserved."
socialLinks={[
{
icon: Instagram,
href: "https://instagram.com/rabatbarbellclub",
ariaLabel: "Instagram",
},
{
icon: Facebook,
href: "https://facebook.com/rabatbarbellclub",
ariaLabel: "Facebook",
},
{
icon: MessageCircle,
href: "https://wa.me/212XXXXXXXXX",
ariaLabel: "WhatsApp",
},
]}
/>
</footer>
</ThemeProvider>
);
}

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

@@ -0,0 +1,408 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import HeroLogoBillboard from "@/components/sections/hero/HeroLogoBillboard";
import SplitAbout from "@/components/sections/about/SplitAbout";
import FeatureCardNineteen from "@/components/sections/feature/FeatureCardNineteen";
import TestimonialCardTwo from "@/components/sections/testimonial/TestimonialCardTwo";
import PricingCardThree from "@/components/sections/pricing/PricingCardThree";
import MetricCardSeven from "@/components/sections/metrics/MetricCardSeven";
import FooterCard from "@/components/sections/footer/FooterCard";
import { Dumbbell, Sparkles, Instagram, Facebook, MessageCircle } from "lucide-react";
export default function HomePage() {
return (
<ThemeProvider
defaultButtonVariant="bounce-effect"
defaultTextAnimation="entrance-slide"
borderRadius="soft"
contentWidth="mediumLarge"
sizing="mediumLarge"
background="noise"
cardStyle="gradient-bordered"
primaryButtonStyle="shadow"
secondaryButtonStyle="radial-glow"
headingFontWeight="light"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
brandName="Rabat Barbell Club"
navItems={[
{ name: "Home", id: "/" },
{ name: "Memberships", id: "memberships" },
{ name: "Gallery", id: "gallery" },
{ name: "Contact", id: "contact" },
]}
button={{
text: "Join Now",
href: "#membership-inquiry",
}}
animateOnLoad={true}
/>
</div>
<div id="hero" data-section="hero">
<HeroLogoBillboard
logoText="RABAT BARBELL CLUB"
description="Professional equipment, elite training environment, and a community built for serious athletes. Morocco's premier strength training destination."
buttons={[
{
text: "Join the Club",
href: "#membership-inquiry",
},
{
text: "Book a Trial",
href: "#trial-booking",
},
]}
background={{ variant: "noise" }}
imageSrc="http://img.b2bpic.net/free-photo/fitness-equipment_53876-63194.jpg"
imageAlt="Professional barbell training setup at Rabat Barbell Club"
mediaAnimation="slide-up"
frameStyle="card"
/>
</div>
<div id="trust" data-section="trust">
<SplitAbout
title="Why Choose Rabat Barbell Club"
tag="Our Reputation"
description="Trusted by over 500 serious athletes and fitness enthusiasts. Rated 4.7 stars with 100+ verified reviews."
textboxLayout="default"
useInvertedBackground={false}
bulletPoints={[
{
title: "Professional Rogue Equipment",
description:
"Industry-leading barbells, racks, and platforms for serious strength training",
icon: Dumbbell,
},
{
title: "Friendly Coaching Staff",
description: "Expert multilingual coaches fluent in French, English, and Arabic",
},
{
title: "Serious Training Environment",
description: "Athlete-focused community focused on performance and progression",
},
{
title: "International Community",
description: "Train alongside powerlifters, weightlifters, and elite athletes from around the world",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/full-shot-people-training-together-gym_23-2150290027.jpg"
imageAlt="Professional coaching staff at Rabat Barbell Club"
mediaAnimation="slide-up"
imagePosition="right"
buttons={[
{
text: "Learn More",
href: "#features",
},
]}
buttonAnimation="slide-up"
/>
</div>
<div id="experience" data-section="experience">
<FeatureCardNineteen
title="The Rabat Barbell Experience"
description="World-class training environment with everything you need to reach peak performance"
textboxLayout="default"
useInvertedBackground={true}
tag="What We Offer"
features={[
{
id: 1,
tag: "STRENGTH",
title: "Powerlifting Platforms",
subtitle: "Competition-grade equipment for serious lifters",
description:
"Three dedicated powerlifting platforms with competition bars, plates, and racks. Perfect for squats, bench press, and deadlifts. Suitable for beginners learning proper form through advanced athletes training for competitions.",
imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-lifting-up-weights_23-2148284963.jpg",
imageAlt: "Powerlifting platforms with professional equipment",
},
{
id: 2,
tag: "TECHNIQUE",
title: "Olympic Lifting Zone",
subtitle: "Specialized equipment for Olympic weightlifting",
description:
"Dedicated space with bumper plates, lifting platforms, mirrors, and chalk. Learn clean and jerk, snatch, and accessory lifts from our certified coaches in an inspiring environment.",
imageSrc: "http://img.b2bpic.net/free-photo/fitness-concept-with-hands-woman-gym_23-2147675223.jpg",
imageAlt: "Olympic lifting zone with bumper plates and platforms",
},
{
id: 3,
tag: "PERFORMANCE",
title: "Strength Training Hub",
subtitle: "Complete facility for all strength goals",
description:
"Comprehensive selection of dumbbells, kettlebells, resistance machines, and cardio equipment. Ample free space for functional training, mobility work, and conditioning. Whether you're building muscle, increasing strength, or improving fitness, we have everything you need.",
imageSrc: "http://img.b2bpic.net/free-photo/gym-interior-with-equipment_93675-128388.jpg",
imageAlt: "Modern strength training equipment and facility",
},
]}
mediaAnimation="blur-reveal"
buttonAnimation="slide-up"
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTwo
title="What Our Members Say"
description="Real reviews from serious athletes training at Rabat Barbell Club"
tag="Member Reviews"
textboxLayout="default"
useInvertedBackground={false}
testimonials={[
{
id: "1",
name: "Karim El-Mansouri",
role: "Powerlifter",
testimonial:
"Best gym in Morocco. The equipment quality is exceptional, and the coaches understand serious strength training. The community pushes you to be better every session.",
imageSrc: "http://img.b2bpic.net/free-photo/handsome-tattooed-bearded-man-gym-with-hammer_343596-1305.jpg",
imageAlt: "Karim El-Mansouri",
},
{
id: "2",
name: "Sophie Laurent",
role: "Fitness Enthusiast",
testimonial:
"I've trained at multiple gyms across Europe. Rabat Barbell Club matches or exceeds them in every way. Professional, clean, and genuinely supportive staff.",
imageSrc: "http://img.b2bpic.net/free-photo/brunette-woman-wearing-sport-clothes_329181-13215.jpg",
imageAlt: "Sophie Laurent",
},
{
id: "3",
name: "Ahmed Hassan",
role: "Weightlifting Coach",
testimonial:
"The facilities here are world-class. Perfect for training serious athletes. Finally have a proper facility in Rabat for Olympic lifting and strength sports.",
imageSrc: "http://img.b2bpic.net/free-photo/strong-enough-carry-such-heavy-weights_329181-14118.jpg",
imageAlt: "Ahmed Hassan",
},
{
id: "4",
name: "Natasha Volkov",
role: "Expat, Athlete",
testimonial:
"As someone who moved from Russia to Rabat, finding quality training was my biggest concern. This club exceeded expectations. Highly recommended for serious athletes.",
imageSrc: "http://img.b2bpic.net/free-photo/young-hispanic-man-having-rest-after-exercising-horizontal-bars_181624-40278.jpg",
imageAlt: "Natasha Volkov",
},
{
id: "5",
name: "Mohammed Bennani",
role: "Strength Coach",
testimonial:
"Running my coaching business here has been incredible. Access to top equipment and a motivated membership base. Best partnership I could ask for.",
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-wearing-fashionable-sport-clothes_329181-3802.jpg",
imageAlt: "Mohammed Bennani",
},
{
id: "6",
name: "Isabella Martinez",
role: "Tourist / Visitor",
testimonial:
"Visited Rabat for two weeks and trained here every day. Incredible atmosphere, friendly members, and professional coaches. Worth the membership just for the experience.",
imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-sportive-girl-posing-dark-wall_176420-626.jpg",
imageAlt: "Isabella Martinez",
},
]}
animationType="slide-up"
carouselMode="auto"
/>
</div>
<div id="membership" data-section="membership">
<PricingCardThree
title="Membership Plans"
description="Choose the perfect plan for your training goals"
tag="Flexible Pricing"
textboxLayout="default"
useInvertedBackground={true}
plans={[
{
id: "day-pass",
price: "100 MAD",
name: "Day Pass",
buttons={[
{
text: "Get Day Pass",
href: "#contact",
},
{
text: "Learn More",
href: "#",
},
]}
features={[
"24-hour facility access",
"All equipment included",
"Locker room & showers",
"Water and towels",
]}
},
{
id: "monthly",
badge: "Most Popular",
badgeIcon: Sparkles,
price: "800 MAD",
name: "Monthly Membership",
buttons={[
{
text: "Join Now",
href: "#membership-inquiry",
},
{
text: "Schedule Trial",
href: "#trial-booking",
},
]}
features={[
"Unlimited facility access",
"All professional equipment",
"Locker room & showers",
"Premium WiFi access",
"Guest privileges (2/month)",
"Community events",
]}
},
{
id: "quarterly",
price: "2,100 MAD",
name: "3-Month Plan",
buttons={[
{
text: "Save & Join",
href: "#membership-inquiry",
},
{
text: "Schedule Trial",
href: "#trial-booking",
},
]}
features={[
"Unlimited facility access",
"Priority booking for platforms",
"All professional equipment",
"Personal locker",
"Premium WiFi & parking",
"Guest privileges (4/month)",
"Priority member events",
"Fitness assessment",
]}
},
{
id: "annual",
price: "7,200 MAD",
name: "Annual Membership",
buttons={[
{
text: "Commit & Save",
href: "#membership-inquiry",
},
{
text: "Schedule Trial",
href: "#trial-booking",
},
]}
features={[
"Unlimited facility access year-round",
"Reserved platform slots",
"Dedicated locker",
"Priority support & parking",
"Personal locker + storage",
"Unlimited guest privileges",
"Exclusive member events",
"Quarterly fitness assessment",
"Merchandise discount",
]}
},
]}
animationType="slide-up"
carouselMode="auto"
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardSeven
title="By The Numbers"
description="Rabat Barbell Club in numbers"
textboxLayout="default"
useInvertedBackground={false}
metrics={[
{
id: "1",
value: "4.7★",
title: "Member Satisfaction Rating",
items: [
"100+ verified reviews",
"Trusted by serious athletes",
"Consistent 5-star feedback",
],
},
{
id: "2",
value: "500+",
title: "Active Members",
items: [
"Diverse training community",
"Local and international athletes",
"Dedicated coaching staff",
],
},
{
id: "3",
value: "3",
title: "Professional Platforms",
items: [
"Competition-grade equipment",
"Rogue barbells & racks",
"Perfect for all strength levels",
],
},
{
id: "4",
value: "24/7",
title: "Facility Hours",
items: [
"Open daily until 22:00",
"Early morning sessions available",
"Late night training access",
],
},
]}
animationType="slide-up"
/>
</div>
<div id="footer" data-section="footer">
<FooterCard
logoText="RABAT BARBELL CLUB"
copyrightText="© 2025 Rabat Barbell Club. All rights reserved."
socialLinks={[
{
icon: Instagram,
href: "https://instagram.com/rabatbarbellclub",
ariaLabel: "Instagram",
},
{
icon: Facebook,
href: "https://facebook.com/rabatbarbellclub",
ariaLabel: "Facebook",
},
{
icon: MessageCircle,
href: "https://wa.me/212XXXXXXXXX",
ariaLabel: "WhatsApp",
},
]}
/>
</div>
</ThemeProvider>
);
}

28
src/app/styles/base.css Normal file
View File

@@ -0,0 +1,28 @@
* {
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 1) rgba(255, 255, 255, 0);
}
html {
overscroll-behavior: none;
overscroll-behavior-y: none;
}
body {
background-color: var(--background);
color: var(--foreground);
font-family: var(--font-montserrat), sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
overscroll-behavior-y: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-montserrat), sans-serif;
}

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

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

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

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

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

@@ -0,0 +1,217 @@
:root {
/* Base units */
/* --vw is set by ThemeProvider */
/* --background: #f5f4ef;
--card: #dad6cd;
--foreground: #2a2928;
--primary-cta: #2a2928;
--secondary-cta: #ecebea;
--accent: #ffffff;
--background-accent: #ffffff; */
--background: #f5f4f0;
--card: #ffffff;
--foreground: #1a1a1a;
--primary-cta: #2c2c2c;
--primary-cta-text: #f5f4f0;
--secondary-cta: #f5f4f0;
--secondary-cta-text: #1a1a1a;
--accent: #8a8a8a;
--background-accent: #e8e6e1;
/* 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;
}
}