Add src/app/services/page.tsx
This commit is contained in:
168
src/app/services/page.tsx
Normal file
168
src/app/services/page.tsx
Normal file
@@ -0,0 +1,168 @@
|
||||
"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, Massage, Leaf, Clock, MapPin, Users, BookOpen } 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", href: "/#work" },
|
||||
{ name: "Services", href: "/services" },
|
||||
{ name: "About", href: "/#about" },
|
||||
{ name: "Contact", href: "/#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", mediaComponent: Massage
|
||||
},
|
||||
{
|
||||
id: "spa-2", title: "Revitalizing Facials", subtitle: "Experience glowing skin with our personalized facial treatments.", category: "Spa", value: "Starting at $70", mediaComponent: Sparkles
|
||||
},
|
||||
{
|
||||
id: "spa-3", title: "Detoxifying Body Wraps", subtitle: "Cleanse and nourish your body with natural ingredients.", category: "Spa", value: "Starting at $95", mediaComponent: Leaf
|
||||
},
|
||||
{
|
||||
id: "spa-4", title: "Aromatherapy Sessions", subtitle: "Enhance your well-being with essential oil treatments.", category: "Spa", value: "Starting at $60", mediaComponent: Leaf
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</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", mediaComponent: Dumbbell
|
||||
},
|
||||
{
|
||||
id: "gym-2", title: "Group Fitness Classes", subtitle: "Join fun and energetic classes for all levels.", category: "Fitness", value: "Included in membership", mediaComponent: Users
|
||||
},
|
||||
{
|
||||
id: "gym-3", title: "Cardio & Strength Zones", subtitle: "Access to a wide range of modern equipment.", category: "Fitness", value: "Full access", mediaComponent: Bike
|
||||
},
|
||||
{
|
||||
id: "gym-4", title: "Nutrition Counseling", subtitle: "Personalized advice to fuel your body effectively.", category: "Wellness", value: "Starting at $50/session", mediaComponent: BookOpen
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user