feat: add scroll to top on movement page load
Ensure /movement page starts at top on navigation. #VERCEL_SKIP Co-authored-by: Jeff Emmett <46964190+Jeff-Emmett@users.noreply.github.com>
This commit is contained in:
v0
parent
6f608e5a7b
commit
1af5d7c2cc
|
|
@ -7,9 +7,9 @@ import ClinicSenseButton from "@/components/clinicsense-button"
|
|||
|
||||
export default function AboutPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-stone-50">
|
||||
<div className="min-h-screen bg-beige-lightest">
|
||||
{/* Hero Section */}
|
||||
<section className="bg-gradient-to-br from-stone-100 to-stone-200 py-20">
|
||||
<section className="bg-gradient-to-br from-beige-light to-beige py-20">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto text-center space-y-8">
|
||||
<Badge variant="outline" className="text-stone-600 border-stone-300">
|
||||
|
|
@ -20,8 +20,8 @@ export default function AboutPage() {
|
|||
Founder and Owner of Ebb'nFlow Therapeutics
|
||||
</div>
|
||||
<p className="text-xl text-stone-600 leading-relaxed">
|
||||
A lifelong interest in movement and the healing arts is the foundation of her practice as a Massage
|
||||
Therapist and Movement Educator.
|
||||
A lifelong interest in movement and the healing arts is the foundation of her practice as a massage
|
||||
therapist, laser therapist, and movement educator.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -44,7 +44,7 @@ export default function AboutPage() {
|
|||
ethical standards of RMTs.
|
||||
</p>
|
||||
|
||||
<div className="bg-stone-100 p-6 rounded-lg">
|
||||
<div className="bg-beige-light p-6 rounded-lg">
|
||||
<h3 className="font-medium text-stone-800 mb-3">Practice Evolution</h3>
|
||||
<div className="space-y-3 text-stone-600 text-sm">
|
||||
<p>
|
||||
|
|
@ -60,6 +60,7 @@ export default function AboutPage() {
|
|||
<p>
|
||||
<strong>2017:</strong> Moved to home location on Woodbine Ave., working solely for herself
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<strong>2025:</strong> Relocated to downtown St. Catharines, rebranded to Ebb'nFlow Therapeutics
|
||||
</p>
|
||||
|
|
@ -80,34 +81,37 @@ export default function AboutPage() {
|
|||
</section>
|
||||
|
||||
{/* Education & Training */}
|
||||
<section className="py-20 bg-stone-100">
|
||||
<section className="py-20 bg-beige-lightest">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="text-3xl font-light text-stone-800 text-center mb-12">Education & Training</h2>
|
||||
|
||||
<div className="space-y-8">
|
||||
<Card className="border-stone-200">
|
||||
<Card className="border-beige">
|
||||
<CardContent className="p-6">
|
||||
<h3 className="text-xl font-medium text-stone-800 mb-4">Formal Education</h3>
|
||||
<div className="space-y-3 text-stone-600">
|
||||
<p>
|
||||
<strong>2021:</strong> Meditech International Inc. Bioflex Laser Therapy Certification
|
||||
</p>
|
||||
<p>
|
||||
<strong>2012:</strong> Graduate, Massage Therapy Program, Ontario College of Health and Technology
|
||||
</p>
|
||||
<p>
|
||||
<strong>1998:</strong> School of Toronto Dance Theatre's Professional Training Program
|
||||
<strong>2009:</strong> Pilates Teacher Training, STOTT Toronto (Beginner to Advanced Matwork)
|
||||
</p>
|
||||
<p>
|
||||
<strong>2003-05:</strong> Yoga Teacher Training, Yogaspace Toronto (200 hr diploma + Advanced
|
||||
Teacher Training)
|
||||
</p>
|
||||
<p>
|
||||
<strong>2009:</strong> Pilates Teacher Training, STOTT Toronto (Beginner to Advanced Matwork)
|
||||
<strong>1998:</strong> School of Toronto Dance Theatre's Professional Training Program
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-stone-200">
|
||||
<Card className="border-beige">
|
||||
<CardContent className="p-6">
|
||||
<h3 className="text-xl font-medium text-stone-800 mb-4">Continuing Education</h3>
|
||||
<div className="space-y-2 text-stone-600">
|
||||
|
|
@ -115,19 +119,21 @@ export default function AboutPage() {
|
|||
<p>• Biodynamic craniosacral therapy</p>
|
||||
<p>• Osteopathic techniques for RMTs</p>
|
||||
<p>• Advanced sacro-lumbar and thoracic spine assessments and joint mobilization</p>
|
||||
<p>• Certification in laser therapy with Bioflex Laser Therapy system integration (2021)</p>
|
||||
<p>• Axis Syllabus - evolving theory and practice of dynamic human movement</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-stone-200 bg-stone-50">
|
||||
<Card className="border-beige bg-beige-light">
|
||||
<CardContent className="p-6">
|
||||
<h3 className="text-xl font-medium text-stone-800 mb-4">Recognition & Support</h3>
|
||||
<div className="space-y-2 text-stone-600">
|
||||
<p>Massage Therapy is Dahlia's second career, supported by:</p>
|
||||
<p>• Training and subsistence grant from the Dancer's Transition and Resource Centre (2010)</p>
|
||||
<p>• Special second year award for academic excellence (Heritage Canada, 2011)</p>
|
||||
<p>
|
||||
• Special second year award for academic excellence (Dancer’s Transition and Resource Centre,
|
||||
2011)
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
|
@ -151,8 +157,49 @@ export default function AboutPage() {
|
|||
</div>
|
||||
</section>
|
||||
|
||||
{/* Meet Olivia Section */}
|
||||
<section className="py-20 bg-beige-lightest">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="text-3xl font-light text-stone-800 text-center mb-12">Meet Olivia</h2>
|
||||
|
||||
<div className="grid lg:grid-cols-2 gap-8 items-center">
|
||||
<div className="relative">
|
||||
<Image
|
||||
src="/images/olivia-cat.png"
|
||||
alt="Olivia, the friendly clinic cat at Ebb'nFlow Therapeutics"
|
||||
width={400}
|
||||
height={400}
|
||||
className="rounded-2xl shadow-lg object-cover w-full"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<Card className="border-beige bg-white">
|
||||
<CardContent className="p-6">
|
||||
<p className="text-stone-600 leading-relaxed mb-4">
|
||||
No visit to Ebb'nFlow Therapeutics would be complete without meeting Olivia, our gentle and
|
||||
affectionate clinic companion. This sweet tabby girl has a calming presence that perfectly
|
||||
complements the therapeutic atmosphere of our space.
|
||||
</p>
|
||||
<p className="text-stone-600 leading-relaxed mb-4">
|
||||
Olivia enjoys greeting clients with soft purrs and will often curl up nearby during sessions,
|
||||
adding an extra layer of comfort and relaxation to your experience. Her friendly demeanor and
|
||||
peaceful energy make her a beloved part of the Ebb'nFlow family.
|
||||
</p>
|
||||
<p className="text-stone-600 leading-relaxed italic">
|
||||
Please let us know if you have any allergies or prefer a cat-free session—we're happy to
|
||||
accommodate all our clients' needs!
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="py-16 bg-stone-100">
|
||||
<section className="py-16 bg-beige-light">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="text-center space-y-8">
|
||||
<h2 className="text-2xl font-light text-stone-800">Experience Dahlia's Unique Approach</h2>
|
||||
|
|
@ -160,16 +207,20 @@ export default function AboutPage() {
|
|||
Combining 30 years of movement expertise with clinical massage therapy excellence.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
|
||||
<ClinicSenseButton size="medium" color="black" />
|
||||
<Button
|
||||
variant="outline"
|
||||
size="lg"
|
||||
asChild
|
||||
className="border-stone-300 text-stone-700 hover:bg-stone-200 bg-transparent"
|
||||
>
|
||||
<ClinicSenseButton size="medium" color="green" />
|
||||
<Button size="lg" asChild className="bg-nature-green hover:bg-nature-green-dark text-white">
|
||||
<Link href="/what-to-expect">What to Expect</Link>
|
||||
</Button>
|
||||
</div>
|
||||
<div className="pt-4">
|
||||
<Image
|
||||
src="/images/rmt-certification.png"
|
||||
alt="Registered Massage Therapist - Professional Hands You Can Trust"
|
||||
width={200}
|
||||
height={90}
|
||||
className="mx-auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -35,9 +35,9 @@ export default function ContactPage() {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-stone-50">
|
||||
<div className="min-h-screen bg-beige-lightest">
|
||||
{/* Hero Section */}
|
||||
<section className="bg-gradient-to-br from-stone-100 to-stone-200 py-20">
|
||||
<section className="bg-gradient-to-br from-beige-light to-beige py-20">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto text-center space-y-8">
|
||||
<Badge variant="outline" className="text-stone-600 border-stone-300">
|
||||
|
|
@ -88,11 +88,11 @@ export default function ContactPage() {
|
|||
</section>
|
||||
|
||||
{/* Contact Form & Info Section */}
|
||||
<section className="py-20 bg-white">
|
||||
<section className="py-20 bg-beige-lightest">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="grid lg:grid-cols-2 gap-12">
|
||||
{/* Contact Form */}
|
||||
<Card className="border-stone-200">
|
||||
<Card className="border-beige">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-2xl font-light text-stone-800">Send Us a Message</CardTitle>
|
||||
<CardDescription className="text-stone-600">
|
||||
|
|
@ -192,7 +192,7 @@ export default function ContactPage() {
|
|||
|
||||
{/* Contact Information */}
|
||||
<div className="space-y-8">
|
||||
<Card className="border-stone-200">
|
||||
<Card className="border-beige">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl font-medium text-stone-800">Visit Our Clinic</CardTitle>
|
||||
</CardHeader>
|
||||
|
|
@ -202,11 +202,9 @@ export default function ContactPage() {
|
|||
<div>
|
||||
<p className="font-medium text-stone-800">Address</p>
|
||||
<p className="text-stone-600">
|
||||
123 Wellness Way
|
||||
59 Wellington Street
|
||||
<br />
|
||||
Suite 200
|
||||
<br />
|
||||
St. Catharines, ON L2R 7P9
|
||||
St. Catharines, ON L2R 5P9
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -229,7 +227,7 @@ export default function ContactPage() {
|
|||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-stone-200">
|
||||
<Card className="border-beige">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl font-medium text-stone-800">Office Hours</CardTitle>
|
||||
</CardHeader>
|
||||
|
|
@ -255,7 +253,7 @@ export default function ContactPage() {
|
|||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-stone-200 bg-stone-100">
|
||||
<Card className="border-beige bg-beige-light">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-start gap-3">
|
||||
<Clock className="h-5 w-5 text-stone-600 mt-1" />
|
||||
|
|
@ -275,7 +273,7 @@ export default function ContactPage() {
|
|||
</section>
|
||||
|
||||
{/* Booking Section */}
|
||||
<section className="py-16 bg-stone-100">
|
||||
<section className="py-16 bg-beige-light">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="text-center space-y-8">
|
||||
<h2 className="text-2xl font-light text-stone-800">Ready for Your Personal Wellness Experience?</h2>
|
||||
|
|
@ -284,15 +282,12 @@ export default function ContactPage() {
|
|||
space just for your wellness journey.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<ClinicSenseButton size="large" color="black" />
|
||||
<Button
|
||||
variant="outline"
|
||||
size="lg"
|
||||
className="border-stone-300 text-stone-700 hover:bg-stone-200 bg-transparent"
|
||||
>
|
||||
<ClinicSenseButton size="large" color="green" />
|
||||
<Button size="lg" className="bg-nature-green hover:bg-nature-green-dark text-white">
|
||||
Call for Personal Consultation
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -118,6 +118,11 @@
|
|||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
|
||||
/* Smooth scrolling for anchor links */
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
|
|
@ -184,3 +189,24 @@
|
|||
.text-sage-green {
|
||||
color: #8bc34a;
|
||||
}
|
||||
|
||||
/* Beige color palette */
|
||||
.bg-beige-lightest {
|
||||
background-color: #f7f3ef;
|
||||
}
|
||||
|
||||
.bg-beige-light {
|
||||
background-color: #f0e9e0;
|
||||
}
|
||||
|
||||
.bg-beige {
|
||||
background-color: #e8dfd3;
|
||||
}
|
||||
|
||||
.bg-beige-medium {
|
||||
background-color: #d9cdbf;
|
||||
}
|
||||
|
||||
.bg-beige-dark {
|
||||
background-color: #c4b5a3;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
"use client"
|
||||
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
|
|
@ -5,12 +7,17 @@ import { Heart, Star } from "lucide-react"
|
|||
import Image from "next/image"
|
||||
import Link from "next/link"
|
||||
import ClinicSenseButton from "@/components/clinicsense-button"
|
||||
import { useEffect } from "react"
|
||||
|
||||
export default function MovementPage() {
|
||||
useEffect(() => {
|
||||
window.scrollTo(0, 0)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-stone-50">
|
||||
<div className="min-h-screen bg-beige-lightest">
|
||||
{/* Hero Section */}
|
||||
<section className="bg-gradient-to-br from-stone-100 to-stone-200 py-20">
|
||||
<section className="bg-gradient-to-br from-beige-light to-beige py-20">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto text-center space-y-8">
|
||||
<Badge variant="outline" className="text-stone-600 border-stone-300">
|
||||
|
|
@ -33,7 +40,7 @@ export default function MovementPage() {
|
|||
<h2 className="text-3xl font-light text-stone-800 text-center mb-12">Movement Education Options</h2>
|
||||
|
||||
<div className="space-y-8">
|
||||
<Card className="border-stone-200">
|
||||
<Card className="border-beige">
|
||||
<CardContent className="p-8">
|
||||
<p className="text-stone-600 leading-relaxed mb-6">
|
||||
Remedial exercise aka "Rem-Ex" instruction involves teaching a few targeted strength, stretch or
|
||||
|
|
@ -50,7 +57,7 @@ export default function MovementPage() {
|
|||
</Card>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
<Card className="border-stone-200">
|
||||
<Card className="border-beige">
|
||||
<CardHeader>
|
||||
<div className="w-12 h-12 bg-stone-700 rounded-full flex items-center justify-center mb-4">
|
||||
<span className="text-white font-bold">1</span>
|
||||
|
|
@ -65,7 +72,7 @@ export default function MovementPage() {
|
|||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-stone-200">
|
||||
<Card className="border-beige">
|
||||
<CardHeader>
|
||||
<div className="w-12 h-12 bg-stone-700 rounded-full flex items-center justify-center mb-4">
|
||||
<span className="text-white font-bold">2</span>
|
||||
|
|
@ -80,7 +87,7 @@ export default function MovementPage() {
|
|||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-stone-200">
|
||||
<Card className="border-beige">
|
||||
<CardHeader>
|
||||
<div className="w-12 h-12 bg-stone-700 rounded-full flex items-center justify-center mb-4">
|
||||
<span className="text-white font-bold">3</span>
|
||||
|
|
@ -101,12 +108,12 @@ export default function MovementPage() {
|
|||
</section>
|
||||
|
||||
{/* Origin Story */}
|
||||
<section className="py-20 bg-stone-100">
|
||||
<section className="py-20 bg-beige-lightest">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="text-3xl font-light text-stone-800 text-center mb-12">The Ebb'nFlow Origin Story</h2>
|
||||
|
||||
<Card className="border-stone-200 bg-white">
|
||||
<Card className="border-beige bg-white">
|
||||
<CardContent className="p-8">
|
||||
<div className="space-y-6 text-stone-600 leading-relaxed">
|
||||
<p>
|
||||
|
|
@ -145,7 +152,7 @@ export default function MovementPage() {
|
|||
|
||||
<div className="grid lg:grid-cols-2 gap-8 items-center">
|
||||
<div className="space-y-6">
|
||||
<Card className="border-stone-200">
|
||||
<Card className="border-beige">
|
||||
<CardHeader>
|
||||
<Heart className="h-8 w-8 text-stone-600 mb-2" />
|
||||
<CardTitle className="text-xl font-medium text-stone-800">Fun, Liberating & Educational</CardTitle>
|
||||
|
|
@ -159,7 +166,7 @@ export default function MovementPage() {
|
|||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-stone-200 bg-stone-50">
|
||||
<Card className="border-beige bg-beige-lightest">
|
||||
<CardContent className="p-6">
|
||||
<h3 className="font-medium text-stone-800 mb-3">Workshop Benefits</h3>
|
||||
<div className="space-y-2 text-stone-600">
|
||||
|
|
@ -202,7 +209,7 @@ export default function MovementPage() {
|
|||
</section>
|
||||
|
||||
{/* Personal Expression */}
|
||||
<section className="py-20 bg-stone-100">
|
||||
<section className="py-20 bg-beige-lightest">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto text-center space-y-8">
|
||||
<h2 className="text-3xl font-light text-stone-800">Continuing the Dance</h2>
|
||||
|
|
@ -224,7 +231,7 @@ export default function MovementPage() {
|
|||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="py-16 bg-white">
|
||||
<section className="py-16 bg-beige-light">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="text-center space-y-8">
|
||||
<h2 className="text-2xl font-light text-stone-800">Ready to Move with More Freedom?</h2>
|
||||
|
|
@ -234,13 +241,8 @@ export default function MovementPage() {
|
|||
or group workshops.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
|
||||
<ClinicSenseButton size="medium" color="black" />
|
||||
<Button
|
||||
variant="outline"
|
||||
size="lg"
|
||||
asChild
|
||||
className="border-stone-300 text-stone-700 hover:bg-stone-200 bg-transparent"
|
||||
>
|
||||
<ClinicSenseButton size="medium" color="green" />
|
||||
<Button size="lg" asChild className="bg-nature-green hover:bg-nature-green-dark text-white">
|
||||
<Link href="/contact">Ask About Workshops</Link>
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
221
app/page.tsx
221
app/page.tsx
|
|
@ -1,54 +1,128 @@
|
|||
"use client"
|
||||
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { MapPin, Phone } from "lucide-react"
|
||||
import Image from "next/image"
|
||||
import Link from "next/link"
|
||||
import AnimatedHero from "@/components/animated-hero"
|
||||
import ServiceDropdown from "@/components/service-dropdown"
|
||||
import ClinicSenseButton from "@/components/clinicsense-button"
|
||||
import InfoModal from "@/components/info-modal"
|
||||
import { useState } from "react"
|
||||
|
||||
export default function HomePage() {
|
||||
const [modalContent, setModalContent] = useState<string>("")
|
||||
const [modalTitle, setModalTitle] = useState<string>("")
|
||||
const [isModalOpen, setIsModalOpen] = useState(false)
|
||||
|
||||
const scopeOfPracticeText = `Registered Massage Therapists in Ontario constitute a regulated health profession in much the same way that physicians, nurses, physiotherapists and chiropractors are regulated. The profession is governed by a Scope of Practice, which is defined as follows:
|
||||
|
||||
"The practice of massage therapy is the assessment of the soft tissue and joints of the body, and the treatment and prevention of physical dysfunction and pain of the soft tissues and joints by manipulation to develop, maintain, rehabilitate or augment physical function, or relieve pain." (Massage Therapy Act, 1991)
|
||||
|
||||
Within their practice, massage therapists will use a variety of procedures and modalities to provide services within the scope of practice. "Massage" is a general term describing one or several methods of treatment and is often mistakenly used and confused with the practice of massage therapy.`
|
||||
|
||||
const benefitsText = `Massage therapy treatments provided by a Registered Massage Therapist can offer significant benefits for a variety of conditions and for diverse patient populations. Whether you need to have a moment of relaxation, reduce muscle tension or attain relief from chronic pain, massage therapy can enhance your overall well-being. Massage therapy can help alleviate musculoskeletal disorders associated with everyday stress, muscular overuse, physical manifestation of mental distress and many persistent pain syndromes.
|
||||
|
||||
Massage therapy can be an important part of your health maintenance plan by:
|
||||
• Reducing or eliminating pain
|
||||
• Improving joint mobility
|
||||
• Improving lymphatic drainage
|
||||
• Reducing muscular tension
|
||||
|
||||
Massage therapy can treat both acute and chronic conditions. RMTs work with a wide variety of patients in the treatment of illness, injury, rehabilitation and disability.`
|
||||
|
||||
const conditionsTreatedText = `Massage therapy can prove beneficial to many conditions, including but not limited to the following:
|
||||
|
||||
• Anxiety and Depression
|
||||
• Arthritis
|
||||
• Asthma and Emphysema
|
||||
• Cancer
|
||||
• Carpal Tunnel Syndrome
|
||||
• Chronic Fatigue Syndrome
|
||||
• Dislocations
|
||||
• Edema
|
||||
• Fibromyalgia
|
||||
• Headaches
|
||||
• Inflammatory Conditions
|
||||
• Insomnia
|
||||
• Lymphoedema
|
||||
• Multiple Sclerosis
|
||||
• Muscle Tension and Spasm
|
||||
• Parkinson's Disease
|
||||
• Plantar Fasciitis
|
||||
• Post-Surgical Rehabilitation
|
||||
• Post-Traumatic Stress Disorder (PTSD)
|
||||
• Pregnancy and Labor Support
|
||||
• Sciatica
|
||||
• Scoliosis
|
||||
• Sports Injuries
|
||||
• Strains and Sprains
|
||||
• Stress and Stress-Related Conditions
|
||||
• Stroke
|
||||
• Tendinitis
|
||||
• Whiplash
|
||||
|
||||
Massage therapy can also be used as part of a preventative care program. This includes sports training, injury prevention, ongoing stress management and more!
|
||||
|
||||
Your massage therapist will require an overall picture of your current health and a detailed health history in order to design a treatment plan that's right for you. If a massage therapist determines that your condition would be better treated by another healthcare professional, they will make the appropriate referral.`
|
||||
|
||||
const techniquesText = `Treatments are based on General Swedish Massage techniques and may be combined with Deep Tissue Massage, Myofascial Release, Trigger Point Therapy, Manual Lymphatic Drainage and Joint Mobilization Techniques. Ongoing assessment, remedial exercise and/or home care instruction is also part of this comprehensive treatment session based on the client's goals and comfort.
|
||||
|
||||
Please note: In cases where there is more than one area of complaint, longer treatment times (75 or 90 minute) are recommended.`
|
||||
|
||||
const laserScienceText = `Ebb'nFlow Therapeutics uses the BIOFLEX® system of Class 3b lasers together with large surface arrays of bicolour LEDs that affect a large volume of circulating blood as well as underlying tissues resulting in both a powerful systemic and direct photobiomodulation effect.
|
||||
|
||||
Please visit BioflexLaser.com for more info.`
|
||||
|
||||
const massageDropdownItems = [
|
||||
{ title: "Scope of Practice", href: "/massage/scope" },
|
||||
{ title: "Benefits of Massage Therapy", href: "/massage/benefits" },
|
||||
{ title: "Conditions Treated", href: "/massage/conditions" },
|
||||
{ title: "Techniques", href: "/massage/techniques" },
|
||||
{ title: "Scope of Practice", modal: scopeOfPracticeText },
|
||||
{ title: "Benefits of Massage Therapy", modal: benefitsText },
|
||||
{ title: "Conditions Treated", modal: conditionsTreatedText },
|
||||
{ title: "Techniques", modal: techniquesText },
|
||||
]
|
||||
|
||||
const laserDropdownItems = [
|
||||
{ title: "A note about Scope of Practice", href: "/laser/scope" },
|
||||
{ title: "Benefits of Laser Therapy", href: "/laser/benefits" },
|
||||
{ title: "Conditions Treated", href: "/laser/conditions" },
|
||||
{ title: "The Science", href: "/laser/science" },
|
||||
]
|
||||
const laserDropdownItems = [{ title: "The Science", modal: laserScienceText }]
|
||||
|
||||
const handleModalOpen = (content: string, title: string) => {
|
||||
setModalContent(content)
|
||||
setModalTitle(title)
|
||||
setIsModalOpen(true)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-green-50">
|
||||
<div className="min-h-screen bg-beige-lightest">
|
||||
<InfoModal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} content={modalContent} title={modalTitle} />
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="relative bg-gradient-to-br from-green-100 to-green-200 py-20 lg:py-32 min-h-screen flex items-center">
|
||||
<section className="relative bg-gradient-to-br from-beige-light to-beige py-20 lg:py-32 min-h-screen flex items-center">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="grid lg:grid-cols-2 gap-12 items-center">
|
||||
<div className="space-y-8">
|
||||
<AnimatedHero />
|
||||
<div
|
||||
className="flex flex-col sm:flex-row gap-4 opacity-0 animate-fade-in-up"
|
||||
style={{ animationDelay: "8s", animationFillMode: "forwards" }}
|
||||
>
|
||||
<ClinicSenseButton className="inline-block" size="medium" color="green" />
|
||||
<div className="space-y-8 flex flex-col items-center lg:items-start">
|
||||
<div className="space-y-6 text-center lg:text-left">
|
||||
<h1 className="text-4xl lg:text-5xl font-light text-gray-800">
|
||||
Ebb'nFlow <span className="font-normal text-nature-green">Therapeutics</span>
|
||||
</h1>
|
||||
<p className="text-2xl lg:text-3xl font-light text-gray-700 italic">
|
||||
Excellence in Massage Therapy Since 2013
|
||||
</p>
|
||||
<p className="text-xl text-gray-600 leading-relaxed">
|
||||
A serene, home-based practice in the heart of downtown St Catharines
|
||||
</p>
|
||||
<p className="text-lg text-nature-green font-medium">Owned and operated by Dahlia B. Steinberg RMT.</p>
|
||||
</div>
|
||||
<div className="flex flex-col sm:flex-row gap-4 w-full justify-center lg:justify-start">
|
||||
<ClinicSenseButton className="w-full sm:w-auto" size="medium" color="green" />
|
||||
<Button
|
||||
variant="outline"
|
||||
size="lg"
|
||||
className="border-nature-green text-nature-green hover:bg-green-100 bg-transparent"
|
||||
className="border-nature-green text-nature-green hover:bg-beige-light bg-transparent w-full sm:w-auto"
|
||||
asChild
|
||||
>
|
||||
<Link href="/about">Learn More</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="relative opacity-0 animate-fade-in lg:order-first"
|
||||
style={{ animationDelay: "0.5s", animationFillMode: "forwards" }}
|
||||
>
|
||||
<div className="relative lg:order-first">
|
||||
<Image
|
||||
src="/images/reception-area.jpg"
|
||||
alt="Welcoming reception area at Ebb'nFlow Therapeutics"
|
||||
|
|
@ -67,21 +141,16 @@ export default function HomePage() {
|
|||
<section className="py-20 bg-white">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto text-center space-y-8">
|
||||
<h2 className="text-3xl lg:text-4xl font-light text-gray-800">A comfortable, home-based practice</h2>
|
||||
<p className="text-xl text-gray-600">in the heart of downtown St Catharines</p>
|
||||
<p className="text-lg text-nature-green font-medium">Owned and operated by Dahlia B. Steinberg RMT.</p>
|
||||
|
||||
<div className="bg-green-100 p-8 rounded-2xl text-left max-w-3xl mx-auto border border-green-200">
|
||||
<div className="bg-beige-light p-8 rounded-2xl text-left max-w-3xl mx-auto border border-beige">
|
||||
<p className="text-gray-700 leading-relaxed mb-4">
|
||||
A wholistic and comprehensive approach to wellness through a clinical practice in massage therapy that
|
||||
includes care for acute pain or injury and movement education that gets to the heart of the most common
|
||||
dysfunctions responsible for chronic pain.
|
||||
Ebb'nFlow Therapeutics provides Massage Therapy that is attentive to your unique needs and goals.
|
||||
Whether you are looking for recovery from the stress and strains of work, to manage pain, prevent injury
|
||||
or improve your physical performance, we're here to meet you where you are.
|
||||
</p>
|
||||
<p className="text-gray-700 leading-relaxed">
|
||||
Whether you are looking for stress reduction, maintenance, injury prevention, assessment or treatment,
|
||||
pain reduction, accelerated healing, improved performance or greater awareness and enjoyment of
|
||||
movement, Ebb'nFlow Therapeutics can meet you wherever you are and help you to achieve your wellness
|
||||
goals.
|
||||
Unlike any other massage therapy practice, Ebb'nFlow Therapeutics also offers a distinctly unique
|
||||
service that combines the cutting edge technology of Laser Therapy (Photobiomodulation) in combination
|
||||
with massage therapy for accelerated healing of acute pain conditions and injury.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -89,15 +158,19 @@ export default function HomePage() {
|
|||
</section>
|
||||
|
||||
{/* Services Section */}
|
||||
<section className="py-20 bg-green-50">
|
||||
<section id="services" className="py-20 bg-beige-lightest scroll-mt-16">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl lg:text-4xl font-light text-gray-800 mb-4">Services</h2>
|
||||
<p className="text-lg text-gray-600 max-w-3xl mx-auto">
|
||||
Please click on the links below to learn more about the unique services offered, based on a comprehensive,
|
||||
clinical practice of Massage Therapy.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
|
||||
{/* Massage Therapy */}
|
||||
<Card className="border-green-200 hover:shadow-lg transition-shadow duration-300 bg-white">
|
||||
<Card className="border-beige hover:shadow-lg transition-shadow duration-300 bg-white">
|
||||
<CardHeader className="pb-4">
|
||||
<Image
|
||||
src="/images/treatment-room.jpg"
|
||||
|
|
@ -112,8 +185,12 @@ export default function HomePage() {
|
|||
<CardDescription className="text-gray-600 leading-relaxed">
|
||||
General Swedish Massage combined with specialized techniques tailored to your specific needs.
|
||||
</CardDescription>
|
||||
<p className="text-sm text-gray-600 italic">(Click on the links below for more detailed info)</p>
|
||||
<ServiceDropdown items={massageDropdownItems} title="Learn More About Massage Therapy" />
|
||||
|
||||
<ServiceDropdown
|
||||
items={massageDropdownItems}
|
||||
title="Learn More About Massage Therapy"
|
||||
onModalOpen={handleModalOpen}
|
||||
/>
|
||||
<div className="pt-2">
|
||||
<ClinicSenseButton className="w-full" size="small" color="green" />
|
||||
</div>
|
||||
|
|
@ -121,11 +198,11 @@ export default function HomePage() {
|
|||
</Card>
|
||||
|
||||
{/* Laser Therapy */}
|
||||
<Card className="border-green-200 hover:shadow-lg transition-shadow duration-300 bg-white">
|
||||
<Card className="border-beige hover:shadow-lg transition-shadow duration-300 bg-white">
|
||||
<CardHeader className="pb-4">
|
||||
<Image
|
||||
src="/images/clinic-entrance.jpg"
|
||||
alt="Ebb'nFlow Therapeutics clinic entrance"
|
||||
src="/images/bioflex-laser.png"
|
||||
alt="BioFlex Laser Therapy - The safe and effective way to eliminate pain"
|
||||
width={400}
|
||||
height={250}
|
||||
className="rounded-lg object-cover w-full h-48"
|
||||
|
|
@ -134,11 +211,16 @@ export default function HomePage() {
|
|||
<CardContent className="space-y-4">
|
||||
<CardTitle className="text-xl font-medium text-gray-800">Laser Therapy Treatment</CardTitle>
|
||||
<CardDescription className="text-gray-600 leading-relaxed">
|
||||
Stand alone or combined with Massage Therapy. Laser Therapy utilizes the power of red and infrared
|
||||
light...
|
||||
Stand alone or combined with Massage Therapy (recommended). Laser therapy is the use of red and
|
||||
infrared light that provides accelerated healing for the treatment of musculoskeletal injury, wounds,
|
||||
arthritis, and nerve injury.
|
||||
</CardDescription>
|
||||
<p className="text-sm text-gray-600 italic">(Click on the links below for more detailed info)</p>
|
||||
<ServiceDropdown items={laserDropdownItems} title="Learn More About Laser Therapy" />
|
||||
|
||||
<ServiceDropdown
|
||||
items={laserDropdownItems}
|
||||
title="Learn More About Laser Therapy"
|
||||
onModalOpen={handleModalOpen}
|
||||
/>
|
||||
<div className="pt-2">
|
||||
<ClinicSenseButton className="w-full" size="small" color="green" />
|
||||
</div>
|
||||
|
|
@ -146,11 +228,11 @@ export default function HomePage() {
|
|||
</Card>
|
||||
|
||||
{/* Movement Education */}
|
||||
<Card className="border-green-200 hover:shadow-lg transition-shadow duration-300 bg-white">
|
||||
<Card className="border-beige hover:shadow-lg transition-shadow duration-300 bg-white">
|
||||
<CardHeader className="pb-4">
|
||||
<Image
|
||||
src="/images/reception-area.jpg"
|
||||
alt="Comfortable space for movement education"
|
||||
src="/images/movement-class.png"
|
||||
alt="Movement education class with participants in a studio"
|
||||
width={400}
|
||||
height={250}
|
||||
className="rounded-lg object-cover w-full h-48"
|
||||
|
|
@ -164,7 +246,7 @@ export default function HomePage() {
|
|||
</CardDescription>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full border-nature-green text-nature-green hover:bg-green-100 bg-transparent mb-2"
|
||||
className="w-full border-nature-green text-nature-green hover:bg-beige-light bg-transparent mb-2"
|
||||
asChild
|
||||
>
|
||||
<Link href="/movement">See Movement Workshops</Link>
|
||||
|
|
@ -177,14 +259,14 @@ export default function HomePage() {
|
|||
</section>
|
||||
|
||||
{/* Pricing Section */}
|
||||
<section className="py-20 bg-white">
|
||||
<section id="prices" className="py-20 bg-white scroll-mt-16">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="text-3xl lg:text-4xl font-light text-gray-800 text-center mb-12">Prices</h2>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
{/* Main Services */}
|
||||
<Card className="border-green-200">
|
||||
<Card className="border-beige">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl font-medium text-gray-800">Massage and/or Laser Therapy</CardTitle>
|
||||
</CardHeader>
|
||||
|
|
@ -225,7 +307,7 @@ export default function HomePage() {
|
|||
</Card>
|
||||
|
||||
{/* Add-on Services */}
|
||||
<Card className="border-green-200">
|
||||
<Card className="border-beige">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl font-medium text-gray-800">Add-on Laser Therapy</CardTitle>
|
||||
<CardDescription className="text-gray-600">
|
||||
|
|
@ -245,12 +327,16 @@ export default function HomePage() {
|
|||
|
||||
{/* Payment & Insurance Info */}
|
||||
<div className="mt-12 space-y-6">
|
||||
<Card className="border-green-200 bg-green-50">
|
||||
<Card className="border-beige bg-beige-lightest">
|
||||
<CardContent className="p-6">
|
||||
<h3 className="font-medium text-gray-800 mb-4">Payment & Insurance</h3>
|
||||
<div className="mb-6">
|
||||
<h3 className="text-2xl font-semibold text-gray-800 mb-3">Payment & Insurance</h3>
|
||||
<p className="text-lg font-bold text-nature-green">Direct billing is now available</p>
|
||||
</div>
|
||||
<div className="space-y-3 text-gray-700">
|
||||
<p>
|
||||
<strong>Accepted:</strong> Cash, E-transfer, Debit, Credit Card (Visa, AmEx, Mastercard)
|
||||
<strong>Accepted:</strong> Cash, Direct Billing, E-transfer, Debit, Credit Card (Visa, AmEx,
|
||||
Mastercard)
|
||||
</p>
|
||||
<p>
|
||||
RMTs are regulated health care professionals recognized by insurance companies across Ontario.
|
||||
|
|
@ -264,9 +350,6 @@ export default function HomePage() {
|
|||
submission. This number verifies that your therapist is registered with the College of Massage
|
||||
Therapists of Ontario (CMTO).
|
||||
</p>
|
||||
<p className="text-gray-600 italic">
|
||||
Direct billing is currently not available but coming soon. Stay tuned.
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
|
@ -276,7 +359,7 @@ export default function HomePage() {
|
|||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="py-16 bg-green-100">
|
||||
<section className="py-16 bg-beige-light">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="text-center space-y-8">
|
||||
<h2 className="text-2xl font-light text-gray-800">Ready to Begin Your Wellness Journey?</h2>
|
||||
|
|
@ -291,16 +374,24 @@ export default function HomePage() {
|
|||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
|
||||
<ClinicSenseButton size="medium" color="green" />
|
||||
<ClinicSenseButton className="w-full sm:w-auto" size="medium" color="green" />
|
||||
<Button
|
||||
variant="outline"
|
||||
size="lg"
|
||||
asChild
|
||||
className="border-nature-green text-nature-green hover:bg-green-100 bg-transparent"
|
||||
className="bg-nature-green hover:bg-nature-green-dark text-white w-full sm:w-auto"
|
||||
>
|
||||
<Link href="/contact">Contact Dahlia</Link>
|
||||
</Button>
|
||||
</div>
|
||||
<div className="pt-4">
|
||||
<Image
|
||||
src="/images/rmt-certification.png"
|
||||
alt="Registered Massage Therapist - Professional Hands You Can Trust"
|
||||
width={200}
|
||||
height={90}
|
||||
className="mx-auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -8,9 +8,9 @@ import Image from "next/image"
|
|||
|
||||
export default function WhatToExpectPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-stone-50">
|
||||
<div className="min-h-screen bg-beige-lightest">
|
||||
{/* Hero Section */}
|
||||
<section className="bg-gradient-to-br from-stone-100 to-stone-200 py-20">
|
||||
<section className="bg-gradient-to-br from-beige-light to-beige py-20">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto text-center space-y-8">
|
||||
<Badge variant="outline" className="text-stone-600 border-stone-300">
|
||||
|
|
@ -32,7 +32,7 @@ export default function WhatToExpectPage() {
|
|||
<h2 className="text-3xl font-light text-stone-800 text-center mb-12">The Initial Appointment</h2>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-8 mb-12">
|
||||
<Card className="border-stone-200">
|
||||
<Card className="border-beige">
|
||||
<CardHeader>
|
||||
<FileText className="h-8 w-8 text-stone-600 mb-2" />
|
||||
<CardTitle className="text-xl font-medium text-stone-800">Pre-Appointment Forms</CardTitle>
|
||||
|
|
@ -57,7 +57,7 @@ export default function WhatToExpectPage() {
|
|||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-stone-200">
|
||||
<Card className="border-beige">
|
||||
<CardHeader>
|
||||
<Clock className="h-8 w-8 text-stone-600 mb-2" />
|
||||
<CardTitle className="text-xl font-medium text-stone-800">Assessment Process</CardTitle>
|
||||
|
|
@ -75,7 +75,7 @@ export default function WhatToExpectPage() {
|
|||
</Card>
|
||||
</div>
|
||||
|
||||
<Card className="border-stone-200 bg-stone-100">
|
||||
<Card className="border-beige bg-beige-light">
|
||||
<CardContent className="p-8">
|
||||
<h3 className="text-xl font-medium text-stone-800 mb-4">First Session Components</h3>
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
|
|
@ -99,13 +99,13 @@ export default function WhatToExpectPage() {
|
|||
</section>
|
||||
|
||||
{/* Assessment Details */}
|
||||
<section className="py-20 bg-stone-100">
|
||||
<section className="py-20 bg-beige-lightest">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="text-3xl font-light text-stone-800 text-center mb-12">Comprehensive Assessment</h2>
|
||||
|
||||
<div className="space-y-6">
|
||||
<Card className="border-stone-200">
|
||||
<Card className="border-beige">
|
||||
<CardContent className="p-6">
|
||||
<p className="text-stone-600 leading-relaxed">
|
||||
The first treatment session requires additional time to go over the forms and perform an initial
|
||||
|
|
@ -115,7 +115,7 @@ export default function WhatToExpectPage() {
|
|||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-stone-200">
|
||||
<Card className="border-beige">
|
||||
<CardContent className="p-6">
|
||||
<p className="text-stone-600 leading-relaxed">
|
||||
With numerous tools available to her, Dahlia continuously discerns which techniques may be most
|
||||
|
|
@ -137,7 +137,7 @@ export default function WhatToExpectPage() {
|
|||
|
||||
<div className="grid lg:grid-cols-2 gap-8">
|
||||
<div className="space-y-6">
|
||||
<Card className="border-stone-200">
|
||||
<Card className="border-beige">
|
||||
<CardHeader>
|
||||
<Heart className="h-8 w-8 text-stone-600 mb-2" />
|
||||
<CardTitle className="text-xl font-medium text-stone-800">Personalized Approach</CardTitle>
|
||||
|
|
@ -151,7 +151,7 @@ export default function WhatToExpectPage() {
|
|||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-stone-200">
|
||||
<Card className="border-beige">
|
||||
<CardContent className="p-6">
|
||||
<h3 className="font-medium text-stone-800 mb-3">Communication & Consent</h3>
|
||||
<p className="text-stone-600 leading-relaxed">
|
||||
|
|
@ -177,7 +177,7 @@ export default function WhatToExpectPage() {
|
|||
<p className="text-sm font-medium text-stone-800">Your Private Treatment Space</p>
|
||||
</div>
|
||||
</div>
|
||||
<Card className="border-stone-200 bg-stone-50">
|
||||
<Card className="border-beige bg-beige-lightest">
|
||||
<CardContent className="p-6">
|
||||
<h3 className="font-medium text-stone-800 mb-3">A Science and an Art Form</h3>
|
||||
<p className="text-stone-600 leading-relaxed mb-4">
|
||||
|
|
@ -194,7 +194,7 @@ export default function WhatToExpectPage() {
|
|||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-stone-200">
|
||||
<Card className="border-beige">
|
||||
<CardContent className="p-6">
|
||||
<h3 className="font-medium text-stone-800 mb-3">Education & Home Care</h3>
|
||||
<p className="text-stone-600 leading-relaxed">
|
||||
|
|
@ -211,7 +211,7 @@ export default function WhatToExpectPage() {
|
|||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="py-16 bg-stone-100">
|
||||
<section className="py-16 bg-beige-light">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="text-center space-y-8">
|
||||
<h2 className="text-2xl font-light text-stone-800">Ready to Experience Holistic Care?</h2>
|
||||
|
|
@ -220,13 +220,8 @@ export default function WhatToExpectPage() {
|
|||
treat the body holistically as an interconnected system.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
|
||||
<ClinicSenseButton size="medium" color="black" />
|
||||
<Button
|
||||
variant="outline"
|
||||
size="lg"
|
||||
asChild
|
||||
className="border-stone-300 text-stone-700 hover:bg-stone-200 bg-transparent"
|
||||
>
|
||||
<ClinicSenseButton size="medium" color="green" />
|
||||
<Button size="lg" asChild className="bg-nature-green hover:bg-nature-green-dark text-white">
|
||||
<Link href="/contact">Have Questions?</Link>
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ export default function AnimatedHero() {
|
|||
}, [])
|
||||
|
||||
return (
|
||||
<div className="space-y-6 min-h-[400px] flex flex-col justify-center">
|
||||
<div className="space-y-6 min-h-[400px] flex flex-col justify-center items-center lg:items-start">
|
||||
{/* Welcome to Ebb'nFlow Therapeutics */}
|
||||
<div
|
||||
className={`transition-all duration-1000 ease-in-out ${
|
||||
|
|
|
|||
|
|
@ -60,7 +60,12 @@ export default function Footer() {
|
|||
<ul className="space-y-2 text-sm">
|
||||
<li>
|
||||
<Link href="/about" className="text-gray-300 hover:text-nature-green transition-colors">
|
||||
About Us
|
||||
About
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/#prices" className="text-gray-300 hover:text-nature-green transition-colors">
|
||||
Prices
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
|
|
@ -88,11 +93,9 @@ export default function Footer() {
|
|||
<div className="flex items-start gap-2">
|
||||
<MapPin className="h-4 w-4 text-nature-green mt-0.5" />
|
||||
<span className="text-gray-300">
|
||||
123 Wellness Way
|
||||
59 Wellington Street
|
||||
<br />
|
||||
Suite 200
|
||||
<br />
|
||||
St. Catharines, ON L2R 7P9
|
||||
St. Catharines, ON L2R 5P9
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,39 @@
|
|||
"use client"
|
||||
|
||||
import { X } from "lucide-react"
|
||||
|
||||
interface InfoModalProps {
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
content: string
|
||||
title: string
|
||||
}
|
||||
|
||||
export default function InfoModal({ isOpen, onClose, content, title }: InfoModalProps) {
|
||||
if (!isOpen) return null
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50" onClick={onClose}>
|
||||
<div
|
||||
className="bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-[80vh] overflow-y-auto"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className="sticky top-0 bg-white border-b border-gray-200 p-4 flex items-center justify-between">
|
||||
<h3 className="text-xl font-medium text-gray-800">{title}</h3>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="text-gray-500 hover:text-gray-700 transition-colors"
|
||||
aria-label="Close modal"
|
||||
>
|
||||
<X className="h-6 w-6" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="p-6">
|
||||
<div className="prose prose-gray max-w-none">
|
||||
<p className="text-gray-700 leading-relaxed whitespace-pre-line">{content}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,5 +1,7 @@
|
|||
"use client"
|
||||
|
||||
import type React from "react"
|
||||
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
|
||||
import { Menu } from "lucide-react"
|
||||
|
|
@ -11,80 +13,106 @@ import Image from "next/image"
|
|||
export default function Navbar() {
|
||||
const pathname = usePathname()
|
||||
|
||||
const handleSmoothScroll = (e: React.MouseEvent<HTMLAnchorElement>, href: string) => {
|
||||
// Only handle smooth scroll if we're on the homepage
|
||||
if (pathname === "/" && href.startsWith("/#")) {
|
||||
e.preventDefault()
|
||||
const targetId = href.substring(2) // Remove "/#" to get the ID
|
||||
const element = document.getElementById(targetId)
|
||||
if (element) {
|
||||
const headerOffset = 80 // Height of sticky header
|
||||
const elementPosition = element.getBoundingClientRect().top
|
||||
const offsetPosition = elementPosition + window.pageYOffset - headerOffset
|
||||
|
||||
window.scrollTo({
|
||||
top: offsetPosition,
|
||||
behavior: "smooth",
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const navItems = [
|
||||
{ href: "/", label: "Home" },
|
||||
{ href: "/#services", label: "Services" },
|
||||
{ href: "/#prices", label: "Prices" },
|
||||
{ href: "/about", label: "About" },
|
||||
{ href: "/contact", label: "Contact" },
|
||||
]
|
||||
|
||||
return (
|
||||
<header className="sticky top-0 z-50 w-full border-b border-green-200 bg-white/95 backdrop-blur supports-[backdrop-filter]:bg-white/60">
|
||||
<header className="sticky top-0 z-50 w-full border-b border-beige bg-white/95 backdrop-blur supports-[backdrop-filter]:bg-white/60">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="flex h-16 items-center justify-between">
|
||||
{/* Logo */}
|
||||
<Link href="/" className="flex items-center space-x-3">
|
||||
<Image
|
||||
src="/images/logo.jpg"
|
||||
alt="Ebb'nFlow Therapeutics Logo"
|
||||
width={40}
|
||||
height={40}
|
||||
className="object-contain"
|
||||
/>
|
||||
<div className="text-xl font-light text-gray-800">
|
||||
Ebb'nFlow <span className="font-normal text-nature-green">Therapeutics</span>
|
||||
</div>
|
||||
</Link>
|
||||
<div className="flex h-16 items-center">
|
||||
<div className="grid grid-cols-[1fr_auto_1fr] items-center w-full gap-4">
|
||||
{/* Logo - Left aligned */}
|
||||
<Link href="/" className="flex items-center space-x-3 justify-self-start">
|
||||
<Image
|
||||
src="/images/logo.jpg"
|
||||
alt="Ebb'nFlow Therapeutics Logo"
|
||||
width={40}
|
||||
height={40}
|
||||
className="object-contain"
|
||||
/>
|
||||
<div className="text-xl font-light text-gray-800 hidden lg:block">
|
||||
Ebb'nFlow <span className="font-normal text-nature-green">Therapeutics</span>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
{/* Desktop Navigation */}
|
||||
<nav className="hidden md:flex items-center space-x-8">
|
||||
{navItems.map((item) => (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className={`text-sm font-medium transition-colors hover:text-nature-green ${
|
||||
pathname === item.href ? "text-nature-green border-b-2 border-nature-green pb-1" : "text-gray-600"
|
||||
}`}
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
{/* Desktop CTA */}
|
||||
<div className="hidden md:flex">
|
||||
<ClinicSenseButton size="small" color="green" />
|
||||
</div>
|
||||
|
||||
{/* Mobile Navigation */}
|
||||
<Sheet>
|
||||
<SheetTrigger asChild>
|
||||
<Button variant="ghost" size="icon" className="md:hidden">
|
||||
<Menu className="h-5 w-5" />
|
||||
<span className="sr-only">Toggle menu</span>
|
||||
</Button>
|
||||
</SheetTrigger>
|
||||
<SheetContent side="right" className="w-[300px] sm:w-[400px]">
|
||||
<div className="flex flex-col space-y-4 mt-8">
|
||||
<Link href="/" className="text-lg font-light text-gray-800 mb-4">
|
||||
Ebb'nFlow <span className="font-normal text-nature-green">Therapeutics</span>
|
||||
</Link>
|
||||
{/* Desktop Navigation - Centered */}
|
||||
<nav className="hidden md:flex items-center justify-center">
|
||||
<div className="flex items-center space-x-6 lg:space-x-8">
|
||||
{navItems.map((item) => (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className={`text-lg font-medium transition-colors hover:text-nature-green ${
|
||||
pathname === item.href ? "text-nature-green" : "text-gray-600"
|
||||
onClick={(e) => handleSmoothScroll(e, item.href)}
|
||||
className={`text-sm font-medium transition-colors hover:text-nature-green whitespace-nowrap ${
|
||||
pathname === item.href ? "text-nature-green border-b-2 border-nature-green pb-1" : "text-gray-600"
|
||||
}`}
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
))}
|
||||
<div className="pt-4">
|
||||
<ClinicSenseButton className="w-full" size="small" color="green" />
|
||||
</div>
|
||||
</div>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
</nav>
|
||||
|
||||
{/* Desktop CTA - Right aligned */}
|
||||
<div className="hidden md:flex justify-self-end">
|
||||
<ClinicSenseButton size="small" color="green" />
|
||||
</div>
|
||||
|
||||
{/* Mobile Navigation Button */}
|
||||
<Sheet>
|
||||
<SheetTrigger asChild>
|
||||
<Button variant="ghost" size="icon" className="md:hidden ml-auto">
|
||||
<Menu className="h-5 w-5" />
|
||||
<span className="sr-only">Toggle menu</span>
|
||||
</Button>
|
||||
</SheetTrigger>
|
||||
<SheetContent side="right" className="w-[300px] sm:w-[400px]">
|
||||
<div className="flex flex-col space-y-4 mt-8">
|
||||
<Link href="/" className="text-lg font-light text-gray-800 mb-4">
|
||||
Ebb'nFlow <span className="font-normal text-nature-green">Therapeutics</span>
|
||||
</Link>
|
||||
{navItems.map((item) => (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
onClick={(e) => handleSmoothScroll(e, item.href)}
|
||||
className={`text-lg font-medium transition-colors hover:text-nature-green ${
|
||||
pathname === item.href ? "text-nature-green" : "text-gray-600"
|
||||
}`}
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
))}
|
||||
<div className="pt-4">
|
||||
<ClinicSenseButton className="w-full" size="small" color="green" />
|
||||
</div>
|
||||
</div>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -7,17 +7,26 @@ import Link from "next/link"
|
|||
|
||||
interface DropdownItem {
|
||||
title: string
|
||||
href: string
|
||||
href?: string
|
||||
modal?: string
|
||||
}
|
||||
|
||||
interface ServiceDropdownProps {
|
||||
items: DropdownItem[]
|
||||
title: string
|
||||
onModalOpen?: (content: string, title: string) => void
|
||||
}
|
||||
|
||||
export default function ServiceDropdown({ items, title }: ServiceDropdownProps) {
|
||||
export default function ServiceDropdown({ items, title, onModalOpen }: ServiceDropdownProps) {
|
||||
const [isOpen, setIsOpen] = useState(false)
|
||||
|
||||
const handleItemClick = (item: DropdownItem) => {
|
||||
if (item.modal && onModalOpen) {
|
||||
onModalOpen(item.modal, item.title)
|
||||
}
|
||||
setIsOpen(false)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
<Button
|
||||
|
|
@ -31,16 +40,26 @@ export default function ServiceDropdown({ items, title }: ServiceDropdownProps)
|
|||
|
||||
{isOpen && (
|
||||
<div className="absolute top-full left-0 right-0 mt-1 bg-white border border-green-200 rounded-md shadow-lg z-10">
|
||||
{items.map((item, index) => (
|
||||
<Link
|
||||
key={index}
|
||||
href={item.href}
|
||||
className="block px-4 py-3 text-sm text-gray-700 hover:bg-green-50 border-b border-green-100 last:border-b-0"
|
||||
onClick={() => setIsOpen(false)}
|
||||
>
|
||||
{item.title}
|
||||
</Link>
|
||||
))}
|
||||
{items.map((item, index) =>
|
||||
item.href ? (
|
||||
<Link
|
||||
key={index}
|
||||
href={item.href}
|
||||
className="block px-4 py-3 text-sm text-gray-700 hover:bg-green-50 border-b border-green-100 last:border-b-0"
|
||||
onClick={() => setIsOpen(false)}
|
||||
>
|
||||
{item.title}
|
||||
</Link>
|
||||
) : (
|
||||
<button
|
||||
key={index}
|
||||
onClick={() => handleItemClick(item)}
|
||||
className="w-full text-left px-4 py-3 text-sm text-gray-700 hover:bg-green-50 border-b border-green-100 last:border-b-0"
|
||||
>
|
||||
{item.title}
|
||||
</button>
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
Loading…
Reference in New Issue