Files
dc86ffa9-cd1f-41c0-b7e6-26d…/src/app/services/page.tsx

168 lines
8.6 KiB
TypeScript

"use client";
import ReactLenis from "lenis/react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import FeatureCardTwentyEight from "@/components/sections/feature/FeatureCardTwentyEight";
import PricingCardFive from "@/components/sections/pricing/PricingCardFive";
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterBase from "@/components/sections/footer/FooterBase";
import { Sparkles, Dumbbell, Leaf, Clock, MapPin, Users, BookOpen, HeartPulse } from "lucide-react";
export default function ServicesPage() {
return (
<ThemeProvider
defaultButtonVariant="text-stagger"
defaultTextAnimation="entrance-slide"
borderRadius="pill"
contentWidth="medium"
sizing="medium"
background="none"
cardStyle="glass-elevated"
primaryButtonStyle="metallic"
secondaryButtonStyle="glass"
headingFontWeight="medium"
>
<ReactLenis root>
<NavbarLayoutFloatingOverlay
brandName="Webild"
navItems={[
{ name: "Work", id: "/#work" },
{ name: "Services", id: "/services" },
{ name: "About", id: "/#about" },
{ name: "Contact", id: "/#contact" }
]}
button={{ text: "Get Started", href: "/#contact" }}
/>
<div id="spa-services" data-section="spa-services">
<FeatureCardTwentyEight
title="Invigorating Spa Services"
description="Rejuvenate your mind, body, and soul with our exclusive range of spa treatments designed for ultimate relaxation and wellness."
textboxLayout="default"
useInvertedBackground={false}
animationType="slide-up"
features={[
{
id: "spa-1", title: "Therapeutic Massages", subtitle: "Relax and unwind with our expert massage therapists.", category: "Spa", value: "Starting at $80"
},
{
id: "spa-2", title: "Revitalizing Facials", subtitle: "Experience glowing skin with our personalized facial treatments.", category: "Spa", value: "Starting at $70"
},
{
id: "spa-3", title: "Detoxifying Body Wraps", subtitle: "Cleanse and nourish your body with natural ingredients.", category: "Spa", value: "Starting at $95"
},
{
id: "spa-4", title: "Aromatherapy Sessions", subtitle: "Enhance your well-being with essential oil treatments.", category: "Spa", value: "Starting at $60"
}
]}
/>
</div>
<div id="gym-services" data-section="gym-services">
<FeatureCardTwentyEight
title="Dynamic Gym Services"
description="Achieve your fitness goals with our state-of-the-art gym, expert trainers, and diverse workout programs."
textboxLayout="default"
useInvertedBackground={true}
animationType="slide-up"
features={[
{
id: "gym-1", title: "Personal Training", subtitle: "One-on-one sessions with certified trainers.", category: "Fitness", value: "Starting at $60/hr"
},
{
id: "gym-2", title: "Group Fitness Classes", subtitle: "Join fun and energetic classes for all levels.", category: "Fitness", value: "Included in membership"
},
{
id: "gym-3", title: "Cardio & Strength Zones", subtitle: "Access to a wide range of modern equipment.", category: "Fitness", value: "Full access"
},
{
id: "gym-4", title: "Nutrition Counseling", subtitle: "Personalized advice to fuel your body effectively.", category: "Wellness", value: "Starting at $50/session"
}
]}
/>
</div>
<div id="pricing-info" data-section="pricing-info">
<PricingCardFive
title="Flexible Pricing Plans"
description="Choose the perfect plan that fits your lifestyle and fitness journey, from single sessions to all-inclusive memberships."
textboxLayout="default"
useInvertedBackground={false}
animationType="slide-up"
plans={[
{
id: "plan-1", tag: "Spa Starter", price: "$100", period: "/session", description: "One spa treatment of your choice, access to relaxation lounge.", button: { text: "Book Spa", href: "/#contact" },
featuresTitle: "Includes:", features: ["1 Selected Spa Treatment", "Relaxation Lounge Access", "Towel Service"]
},
{
id: "plan-2", tag: "Gym Basic", price: "$50", period: "/month", description: "Unlimited access to gym facilities and basic group classes.", button: { text: "Join Gym", href: "/#contact" },
featuresTitle: "Includes:", features: ["Unlimited Gym Access", "Basic Group Classes", "Locker Room Access"]
},
{
id: "plan-3", tag: "Premium All-Access", price: "$150", period: "/month", description: "Full access to spa, gym, and exclusive member benefits.", button: { text: "Get Premium", href: "/#contact" },
featuresTitle: "Includes:", features: ["All Spa Services (2/month)", "Unlimited Gym Access", "All Group Classes", "1 Personal Training Session", "Nutrition Advice"]
}
]}
/>
</div>
<div id="business-hours" data-section="business-hours">
<TextSplitAbout
title="Operating Hours & Location"
description={[
"Our facility is committed to providing convenient access for all our members, with extended hours to fit diverse schedules.", "Specifically, we are open until **6:00 AM every Wednesday** to accommodate early risers and night owls.", "You can find us at our prime location: **1150 Av. Caribe, Ponce, 00716, Puerto Rico**. We look forward to welcoming you!"
]}
useInvertedBackground={false}
showBorder={true}
/>
</div>
<ContactCTA
tag="Get in Touch"
title="Ready to Start Your Wellness Journey?"
description="Contact us today to learn more about our services or to book your first session."
background={{ variant: "rotated-rays-animated" }}
buttons={[
{ text: "Contact Us", href: "/#contact" },
{ text: "View Home Page", href: "/" }
]}
buttonAnimation="slide-up"
useInvertedBackground={false}
/>
<FooterBase
logoText="Webild"
copyrightText="© 2026 | Webild"
columns={[
{
title: "Company", items: [
{ label: "About", href: "/#about" },
{ label: "Services", href: "/services" },
{ label: "Work", href: "/#work" },
{ label: "Contact", href: "/#contact" }
]
},
{
title: "Services", items: [
{ label: "Spa Services", href: "/services#spa-services" },
{ label: "Gym Services", href: "/services#gym-services" },
{ label: "Pricing", href: "/services#pricing-info" },
{ label: "Business Hours", href: "/services#business-hours" }
]
},
{
title: "Connect", items: [
{ label: "Twitter", href: "#" },
{ label: "LinkedIn", href: "#" },
{ label: "Instagram", href: "#" },
{ label: "Dribbble", href: "#" }
]
}
]}
/>
</ReactLenis>
</ThemeProvider>
);
}