Initialized repository for project Ebb n Flow website
Co-authored-by: Jeff Emmett <46964190+Jeff-Emmett@users.noreply.github.com>
This commit is contained in:
v0
commit
b9b9416ad2
|
|
@ -0,0 +1,27 @@
|
|||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
|
||||
# next.js
|
||||
/.next/
|
||||
/out/
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# debug
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
.pnpm-debug.log*
|
||||
|
||||
# env files
|
||||
.env*
|
||||
|
||||
# vercel
|
||||
.vercel
|
||||
|
||||
# typescript
|
||||
*.tsbuildinfo
|
||||
next-env.d.ts
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
# Ebb n Flow website
|
||||
|
||||
*Automatically synced with your [v0.app](https://v0.app) deployments*
|
||||
|
||||
[](https://vercel.com/jeff-emmetts-projects/v0-ebb-n-flow-website)
|
||||
[](https://v0.app/chat/projects/9u6iKhKeMvy)
|
||||
|
||||
## Overview
|
||||
|
||||
This repository will stay in sync with your deployed chats on [v0.app](https://v0.app).
|
||||
Any changes you make to your deployed app will be automatically pushed to this repository from [v0.app](https://v0.app).
|
||||
|
||||
## Deployment
|
||||
|
||||
Your project is live at:
|
||||
|
||||
**[https://vercel.com/jeff-emmetts-projects/v0-ebb-n-flow-website](https://vercel.com/jeff-emmetts-projects/v0-ebb-n-flow-website)**
|
||||
|
||||
## Build your app
|
||||
|
||||
Continue building your app on:
|
||||
|
||||
**[https://v0.app/chat/projects/9u6iKhKeMvy](https://v0.app/chat/projects/9u6iKhKeMvy)**
|
||||
|
||||
## How It Works
|
||||
|
||||
1. Create and modify your project using [v0.app](https://v0.app)
|
||||
2. Deploy your chats from the v0 interface
|
||||
3. Changes are automatically pushed to this repository
|
||||
4. Vercel deploys the latest version from this repository
|
||||
|
|
@ -0,0 +1,178 @@
|
|||
import { Button } from "@/components/ui/button"
|
||||
import { Card, CardContent } from "@/components/ui/card"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import Image from "next/image"
|
||||
import Link from "next/link"
|
||||
import ClinicSenseButton from "@/components/clinicsense-button"
|
||||
|
||||
export default function AboutPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-stone-50">
|
||||
{/* Hero Section */}
|
||||
<section className="bg-gradient-to-br from-stone-100 to-stone-200 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">
|
||||
About Dahlia
|
||||
</Badge>
|
||||
<h1 className="text-4xl lg:text-5xl font-light text-stone-800">Dahlia B. Steinberg, RMT</h1>
|
||||
<div className="text-xl lg:text-2xl font-light text-stone-700 italic mb-4">
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Bio Section */}
|
||||
<section className="py-20 bg-white">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="grid lg:grid-cols-2 gap-12 items-start">
|
||||
<div className="space-y-6">
|
||||
<h2 className="text-3xl font-light text-stone-800">Professional Background</h2>
|
||||
<p className="text-lg text-stone-600 leading-relaxed">
|
||||
Dahlia's personal and professional experience with a wide range of bodywork practices including yoga,
|
||||
pilates, somatic movement and modern dance spans 30 years and informs her unique style and approach to
|
||||
her clinical practice of massage therapy.
|
||||
</p>
|
||||
<p className="text-stone-600 leading-relaxed">
|
||||
She is registered with the College of Massage Therapists of Ontario (CMTO), which is the provincial
|
||||
regulatory body that protects the public interest by monitoring the ongoing professional development and
|
||||
ethical standards of RMTs.
|
||||
</p>
|
||||
|
||||
<div className="bg-stone-100 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>
|
||||
<strong>2013:</strong> Started Ebb'nflow Massage, working with Dr. Enrico Schirru at Absolute
|
||||
Chiropractic
|
||||
</p>
|
||||
<p>
|
||||
<strong>2013-2017:</strong> Worked at Paisley Spa and John Chan Physiotherapy Clinic
|
||||
</p>
|
||||
<p>
|
||||
<strong>2015:</strong> Established first home-based clinic on Ontario Street
|
||||
</p>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<Image
|
||||
src="/images/dahlia-portrait.jpg"
|
||||
alt="Dahlia B. Steinberg, RMT - Founder of Ebb'nFlow Therapeutics"
|
||||
width={400}
|
||||
height={500}
|
||||
className="rounded-2xl shadow-lg object-cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Education & Training */}
|
||||
<section className="py-20 bg-stone-100">
|
||||
<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">
|
||||
<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>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
|
||||
</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)
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-stone-200">
|
||||
<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">
|
||||
<p>• Myofascial therapy/structural integration</p>
|
||||
<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">
|
||||
<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>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Current Role */}
|
||||
<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 font-light text-stone-800">Teaching & Mentorship</h2>
|
||||
<p className="text-lg text-stone-600 leading-relaxed">
|
||||
Dahlia now also works once a week as a supervisor and teacher in the student massage therapy clinic, which
|
||||
is open to the public at the Ontario College of Health and Technology in Stoney Creek. This role helps to
|
||||
keep her engaged and informed in her current practice while inspiring her to encourage and mentor the next
|
||||
generation of massage therapists.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="py-16 bg-stone-100">
|
||||
<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>
|
||||
<p className="text-lg text-stone-600 max-w-2xl mx-auto">
|
||||
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"
|
||||
>
|
||||
<Link href="/what-to-expect">What to Expect</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,301 @@
|
|||
"use client"
|
||||
|
||||
import type React from "react"
|
||||
import Image from "next/image"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Textarea } from "@/components/ui/textarea"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Clock, Mail, MapPin, Phone } from "lucide-react"
|
||||
import { useState } from "react"
|
||||
import ClinicSenseButton from "@/components/clinicsense-button"
|
||||
|
||||
export default function ContactPage() {
|
||||
const [formData, setFormData] = useState({
|
||||
name: "",
|
||||
email: "",
|
||||
phone: "",
|
||||
service: "",
|
||||
message: "",
|
||||
})
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
// Handle form submission here
|
||||
console.log("Form submitted:", formData)
|
||||
}
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
|
||||
setFormData({
|
||||
...formData,
|
||||
[e.target.name]: e.target.value,
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-stone-50">
|
||||
{/* Hero Section */}
|
||||
<section className="bg-gradient-to-br from-stone-100 to-stone-200 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">
|
||||
Get in Touch
|
||||
</Badge>
|
||||
<h1 className="text-4xl lg:text-5xl font-light text-stone-800">Contact Us</h1>
|
||||
<div className="text-xl font-light text-stone-700 italic mb-4">
|
||||
"A place to unwind, a place to heal, a place to grow"
|
||||
</div>
|
||||
<p className="text-xl text-stone-600 leading-relaxed">
|
||||
Ready to experience boutique wellness? Let's chat about creating your personalized sanctuary for healing
|
||||
and self-care.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Clinic Images Section */}
|
||||
<section className="py-12 bg-white">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
|
||||
<div className="relative">
|
||||
<Image
|
||||
src="/images/clinic-exterior.jpg"
|
||||
alt="Ebb'nFlow Therapeutics clinic exterior"
|
||||
width={400}
|
||||
height={300}
|
||||
className="rounded-lg shadow-md object-cover w-full h-64"
|
||||
/>
|
||||
<div className="absolute bottom-4 left-4 bg-white/90 px-3 py-1 rounded-md">
|
||||
<p className="text-sm font-medium text-stone-800">Our Welcoming Exterior</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<Image
|
||||
src="/images/yellow-door.jpg"
|
||||
alt="Distinctive yellow entrance door"
|
||||
width={400}
|
||||
height={300}
|
||||
className="rounded-lg shadow-md object-cover w-full h-64"
|
||||
/>
|
||||
<div className="absolute bottom-4 left-4 bg-white/90 px-3 py-1 rounded-md">
|
||||
<p className="text-sm font-medium text-stone-800">Find Our Yellow Door</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Contact Form & Info Section */}
|
||||
<section className="py-20 bg-white">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="grid lg:grid-cols-2 gap-12">
|
||||
{/* Contact Form */}
|
||||
<Card className="border-stone-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-2xl font-light text-stone-800">Send Us a Message</CardTitle>
|
||||
<CardDescription className="text-stone-600">
|
||||
Fill out the form below and we'll get back to you within 24 hours.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name" className="text-stone-700">
|
||||
Full Name
|
||||
</Label>
|
||||
<Input
|
||||
id="name"
|
||||
name="name"
|
||||
value={formData.name}
|
||||
onChange={handleChange}
|
||||
placeholder="Your full name"
|
||||
className="border-stone-300 focus:border-stone-500"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email" className="text-stone-700">
|
||||
Email
|
||||
</Label>
|
||||
<Input
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
value={formData.email}
|
||||
onChange={handleChange}
|
||||
placeholder="your@email.com"
|
||||
className="border-stone-300 focus:border-stone-500"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="phone" className="text-stone-700">
|
||||
Phone Number
|
||||
</Label>
|
||||
<Input
|
||||
id="phone"
|
||||
name="phone"
|
||||
type="tel"
|
||||
value={formData.phone}
|
||||
onChange={handleChange}
|
||||
placeholder="(289) 969-3219"
|
||||
className="border-stone-300 focus:border-stone-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="service" className="text-stone-700">
|
||||
Service of Interest
|
||||
</Label>
|
||||
<select
|
||||
id="service"
|
||||
name="service"
|
||||
value={formData.service}
|
||||
onChange={handleChange}
|
||||
className="w-full px-3 py-2 border border-stone-300 rounded-md focus:outline-none focus:border-stone-500"
|
||||
>
|
||||
<option value="">Select a service</option>
|
||||
<option value="massage">Massage Therapy</option>
|
||||
<option value="laser">Laser Therapy</option>
|
||||
<option value="movement">Movement Therapy</option>
|
||||
<option value="combination">Combination Treatment</option>
|
||||
<option value="consultation">Initial Consultation</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="message" className="text-stone-700">
|
||||
Message
|
||||
</Label>
|
||||
<Textarea
|
||||
id="message"
|
||||
name="message"
|
||||
value={formData.message}
|
||||
onChange={handleChange}
|
||||
placeholder="Tell us about your needs, concerns, or questions..."
|
||||
rows={5}
|
||||
className="border-stone-300 focus:border-stone-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button type="submit" className="w-full bg-stone-700 hover:bg-stone-800">
|
||||
Send Message
|
||||
</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Contact Information */}
|
||||
<div className="space-y-8">
|
||||
<Card className="border-stone-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl font-medium text-stone-800">Visit Our Clinic</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="flex items-start gap-3">
|
||||
<MapPin className="h-5 w-5 text-stone-600 mt-1" />
|
||||
<div>
|
||||
<p className="font-medium text-stone-800">Address</p>
|
||||
<p className="text-stone-600">
|
||||
123 Wellness Way
|
||||
<br />
|
||||
Suite 200
|
||||
<br />
|
||||
St. Catharines, ON L2R 7P9
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-3">
|
||||
<Phone className="h-5 w-5 text-stone-600 mt-1" />
|
||||
<div>
|
||||
<p className="font-medium text-stone-800">Phone</p>
|
||||
<p className="text-stone-600">(289) 969-3219</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-3">
|
||||
<Mail className="h-5 w-5 text-stone-600 mt-1" />
|
||||
<div>
|
||||
<p className="font-medium text-stone-800">Email</p>
|
||||
<p className="text-stone-600">info@ebbnflowtherapeutics.com</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-stone-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl font-medium text-stone-800">Office Hours</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-3">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-stone-700">Monday - Thursday</span>
|
||||
<span className="text-stone-600">9:00 AM - 7:00 PM</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-stone-700">Friday</span>
|
||||
<span className="text-stone-600">9:00 AM - 5:00 PM</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-stone-700">Saturday</span>
|
||||
<span className="text-stone-600">10:00 AM - 4:00 PM</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-stone-700">Sunday</span>
|
||||
<span className="text-stone-600">Closed</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-stone-200 bg-stone-100">
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-start gap-3">
|
||||
<Clock className="h-5 w-5 text-stone-600 mt-1" />
|
||||
<div>
|
||||
<p className="font-medium text-stone-800 mb-2">Emergency Contact</p>
|
||||
<p className="text-sm text-stone-600">
|
||||
For urgent matters outside of business hours, please call our emergency line at (289) 969-3220
|
||||
or visit your nearest emergency room.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Booking Section */}
|
||||
<section className="py-16 bg-stone-100">
|
||||
<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>
|
||||
<p className="text-lg text-stone-600 max-w-2xl mx-auto">
|
||||
Book your private session in our cozy, boutique space. Experience what it means to have dedicated time and
|
||||
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"
|
||||
>
|
||||
Call for Personal Consultation
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,186 @@
|
|||
@import "tailwindcss";
|
||||
@import "tw-animate-css";
|
||||
|
||||
:root {
|
||||
--background: oklch(1 0 0);
|
||||
--foreground: oklch(0.145 0 0);
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.145 0 0);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.145 0 0);
|
||||
--primary: oklch(0.45 0.15 130);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--secondary: oklch(0.97 0 0);
|
||||
--secondary-foreground: oklch(0.145 0 0);
|
||||
--muted: oklch(0.97 0 0);
|
||||
--muted-foreground: oklch(0.556 0 0);
|
||||
--accent: oklch(0.55 0.18 125);
|
||||
--accent-foreground: oklch(0.985 0 0);
|
||||
--destructive: oklch(0.577 0.245 27.325);
|
||||
--destructive-foreground: oklch(0.577 0.245 27.325);
|
||||
--border: oklch(0.922 0 0);
|
||||
--input: oklch(0.922 0 0);
|
||||
--ring: oklch(0.45 0.15 130);
|
||||
--chart-1: oklch(0.55 0.18 125);
|
||||
--chart-2: oklch(0.6 0.118 184.704);
|
||||
--chart-3: oklch(0.398 0.07 227.392);
|
||||
--chart-4: oklch(0.828 0.189 84.429);
|
||||
--chart-5: oklch(0.769 0.188 70.08);
|
||||
--radius: 0.625rem;
|
||||
--sidebar: oklch(0.985 0 0);
|
||||
--sidebar-foreground: oklch(0.145 0 0);
|
||||
--sidebar-primary: oklch(0.45 0.15 130);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.97 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.145 0 0);
|
||||
--sidebar-border: oklch(0.922 0 0);
|
||||
--sidebar-ring: oklch(0.45 0.15 130);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: oklch(0.145 0 0);
|
||||
--foreground: oklch(0.985 0 0);
|
||||
--card: oklch(0.145 0 0);
|
||||
--card-foreground: oklch(0.985 0 0);
|
||||
--popover: oklch(0.145 0 0);
|
||||
--popover-foreground: oklch(0.985 0 0);
|
||||
--primary: oklch(0.55 0.18 125);
|
||||
--primary-foreground: oklch(0.145 0 0);
|
||||
--secondary: oklch(0.269 0 0);
|
||||
--secondary-foreground: oklch(0.985 0 0);
|
||||
--muted: oklch(0.269 0 0);
|
||||
--muted-foreground: oklch(0.708 0 0);
|
||||
--accent: oklch(0.55 0.18 125);
|
||||
--accent-foreground: oklch(0.145 0 0);
|
||||
--destructive: oklch(0.396 0.141 25.723);
|
||||
--destructive-foreground: oklch(0.637 0.237 25.331);
|
||||
--border: oklch(0.269 0 0);
|
||||
--input: oklch(0.269 0 0);
|
||||
--ring: oklch(0.55 0.18 125);
|
||||
--chart-1: oklch(0.55 0.18 125);
|
||||
--chart-2: oklch(0.696 0.17 162.48);
|
||||
--chart-3: oklch(0.769 0.188 70.08);
|
||||
--chart-4: oklch(0.627 0.265 303.9);
|
||||
--chart-5: oklch(0.645 0.246 16.439);
|
||||
--sidebar: oklch(0.145 0 0);
|
||||
--sidebar-foreground: oklch(0.985 0 0);
|
||||
--sidebar-primary: oklch(0.55 0.18 125);
|
||||
--sidebar-primary-foreground: oklch(0.145 0 0);
|
||||
--sidebar-accent: oklch(0.269 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||
--sidebar-border: oklch(0.269 0 0);
|
||||
--sidebar-ring: oklch(0.55 0.18 125);
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-card: var(--card);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-popover: var(--popover);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-destructive-foreground: var(--destructive-foreground);
|
||||
--color-border: var(--border);
|
||||
--color-input: var(--input);
|
||||
--color-ring: var(--ring);
|
||||
--color-chart-1: var(--chart-1);
|
||||
--color-chart-2: var(--chart-2);
|
||||
--color-chart-3: var(--chart-3);
|
||||
--color-chart-4: var(--chart-4);
|
||||
--color-chart-5: var(--chart-5);
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
--color-sidebar: var(--sidebar);
|
||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||
--color-sidebar-primary: var(--sidebar-primary);
|
||||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||
--color-sidebar-accent: var(--sidebar-accent);
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border outline-ring/50;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in-up {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-fade-in {
|
||||
animation: fade-in 1s ease-in-out;
|
||||
}
|
||||
|
||||
.animate-fade-in-up {
|
||||
animation: fade-in-up 1s ease-in-out;
|
||||
}
|
||||
|
||||
/* Custom nature-inspired colors from logo */
|
||||
.bg-nature-green {
|
||||
background-color: #7cb342;
|
||||
}
|
||||
|
||||
.text-nature-green {
|
||||
color: #7cb342;
|
||||
}
|
||||
|
||||
.border-nature-green {
|
||||
border-color: #7cb342;
|
||||
}
|
||||
|
||||
.bg-nature-green-light {
|
||||
background-color: #aed581;
|
||||
}
|
||||
|
||||
.text-nature-green-light {
|
||||
color: #aed581;
|
||||
}
|
||||
|
||||
.bg-nature-green-dark {
|
||||
background-color: #558b2f;
|
||||
}
|
||||
|
||||
.text-nature-green-dark {
|
||||
color: #558b2f;
|
||||
}
|
||||
|
||||
.bg-sage-green {
|
||||
background-color: #8bc34a;
|
||||
}
|
||||
|
||||
.text-sage-green {
|
||||
color: #8bc34a;
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
import type React from "react"
|
||||
import type { Metadata } from "next"
|
||||
import { Inter } from "next/font/google"
|
||||
import "./globals.css"
|
||||
import Navbar from "@/components/navbar"
|
||||
import Footer from "@/components/footer"
|
||||
|
||||
const inter = Inter({ subsets: ["latin"] })
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Ebb n Flow Therapeutics - Massage, Laser & Movement Therapy",
|
||||
description:
|
||||
"Experience holistic healing through our integrated therapeutic services. Massage therapy, laser therapy, and movement therapy in a peaceful, professional setting.",
|
||||
keywords: "massage therapy, laser therapy, movement therapy, wellness, healing, therapeutic massage, pain relief",
|
||||
generator: 'v0.app'
|
||||
}
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body className={inter.className}>
|
||||
<Navbar />
|
||||
<main>{children}</main>
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,252 @@
|
|||
import { Button } from "@/components/ui/button"
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Heart, Star } from "lucide-react"
|
||||
import Image from "next/image"
|
||||
import Link from "next/link"
|
||||
import ClinicSenseButton from "@/components/clinicsense-button"
|
||||
|
||||
export default function MovementPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-stone-50">
|
||||
{/* Hero Section */}
|
||||
<section className="bg-gradient-to-br from-stone-100 to-stone-200 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">
|
||||
Movement Education
|
||||
</Badge>
|
||||
<h1 className="text-4xl lg:text-5xl font-light text-stone-800">Movement & Mobility</h1>
|
||||
<p className="text-xl text-stone-600 leading-relaxed">
|
||||
Free form/improvisational movement and mobility training as a form of personal and artistic expression and
|
||||
wellness is what ultimately drives Dahlia to continue to learn about our amazing bodies and how we can all
|
||||
move more gracefully as we age.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Movement Education Options */}
|
||||
<section className="py-20 bg-white">
|
||||
<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">Movement Education Options</h2>
|
||||
|
||||
<div className="space-y-8">
|
||||
<Card className="border-stone-200">
|
||||
<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
|
||||
mobility exercises that are aimed at furthering the benefits of massage therapy long term, which is
|
||||
an intrinsic component of a comprehensive treatment.
|
||||
</p>
|
||||
<p className="text-stone-600 leading-relaxed mb-6">
|
||||
Although this often comes highly recommended, not everyone is interested in learning a new exercise
|
||||
immediately after having a massage. This makes a lot of sense, and yet Dahlia will still do her best
|
||||
to encourage you, within reason.
|
||||
</p>
|
||||
<p className="text-stone-600 leading-relaxed">That said, clients have a few options:</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
<Card className="border-stone-200">
|
||||
<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>
|
||||
</div>
|
||||
<CardTitle className="text-lg font-medium text-stone-800">Personal Choice</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-stone-600">
|
||||
Clients may request or deny remedial exercise instruction as part of treatment, based on their
|
||||
personal goals.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-stone-200">
|
||||
<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>
|
||||
</div>
|
||||
<CardTitle className="text-lg font-medium text-stone-800">Extended Sessions</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-stone-600">
|
||||
Clients can request to allot up to 50% of their treatment time (15 to 45 minutes) for Rem-Ex
|
||||
instruction before or after their massage.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-stone-200">
|
||||
<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>
|
||||
</div>
|
||||
<CardTitle className="text-lg font-medium text-stone-800">Group Workshops</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-stone-600">
|
||||
Clients can also sign up for upcoming movement workshops for a more comprehensive group learning
|
||||
experience.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Origin Story */}
|
||||
<section className="py-20 bg-stone-100">
|
||||
<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">
|
||||
<CardContent className="p-8">
|
||||
<div className="space-y-6 text-stone-600 leading-relaxed">
|
||||
<p>
|
||||
The original concept of Ebb'nFlow Massage (now Ebb'nFlow Therapeutics) was born out of Dahlia's
|
||||
initial work as a yoga instructor, before she became a massage therapist. Dahlia taught private,
|
||||
one-on-one sessions as well as classes around the GTA from 2004-2009.
|
||||
</p>
|
||||
<p>
|
||||
She recognized the need to meet students where they were instead of insisting that they push through
|
||||
their pain and fatigue similarly to the approach of a personal trainer. Some days they would arrive
|
||||
in a lot of pain and would need a gentler approach such as more periods of rest or "ebb" between
|
||||
exercises or hands on work such as massage at the end of their sessions.
|
||||
</p>
|
||||
<p>
|
||||
Dahlia's natural talent for massage as a component of her sessions enabled students to show up more
|
||||
consistently for practice instead of skipping practice out of concern that they would not be able to
|
||||
make it through a session.
|
||||
</p>
|
||||
<p className="font-medium text-stone-800">
|
||||
Since consistency is key to success, a more fluid and compassionate approach to teaching one-on-one
|
||||
was born and clients were given permission to move as they needed through periods of "ebb" or "flow"
|
||||
with grace and freedom from the need to over achieve.
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Workshops */}
|
||||
<section className="py-20 bg-white">
|
||||
<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">Movement & Mobility Workshops</h2>
|
||||
|
||||
<div className="grid lg:grid-cols-2 gap-8 items-center">
|
||||
<div className="space-y-6">
|
||||
<Card className="border-stone-200">
|
||||
<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>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-stone-600 leading-relaxed">
|
||||
Dahlia's movement and mobility workshops are aimed towards adults and seniors and offer
|
||||
opportunities to gain greater strength, flexibility, mobility and balance as well as to embrace
|
||||
the discovery of one's own unique expression through movement and dance.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-stone-200 bg-stone-50">
|
||||
<CardContent className="p-6">
|
||||
<h3 className="font-medium text-stone-800 mb-3">Workshop Benefits</h3>
|
||||
<div className="space-y-2 text-stone-600">
|
||||
<div className="flex items-center gap-2">
|
||||
<Star className="h-4 w-4 text-stone-500" />
|
||||
<span>Greater strength and flexibility</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Star className="h-4 w-4 text-stone-500" />
|
||||
<span>Improved mobility and balance</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Star className="h-4 w-4 text-stone-500" />
|
||||
<span>Unique personal expression through movement</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Star className="h-4 w-4 text-stone-500" />
|
||||
<span>Discovery of dance and creative movement</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<Image
|
||||
src="/images/dahlia-portrait.jpg"
|
||||
alt="Dahlia Steinberg - Movement and wellness educator"
|
||||
width={400}
|
||||
height={500}
|
||||
className="rounded-2xl shadow-lg object-cover"
|
||||
/>
|
||||
<div className="absolute bottom-4 left-4 bg-white/90 px-3 py-2 rounded-md">
|
||||
<p className="text-sm font-medium text-stone-800">Dahlia - Your Movement Guide</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Personal Expression */}
|
||||
<section className="py-20 bg-stone-100">
|
||||
<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>
|
||||
<p className="text-lg text-stone-600 leading-relaxed">
|
||||
Free form/improvisational movement and mobility training as a form of personal and artistic expression and
|
||||
wellness is what ultimately drives Dahlia to continue to learn about our amazing bodies and how we can all
|
||||
move more gracefully as we age.
|
||||
</p>
|
||||
<p className="text-stone-600 leading-relaxed">
|
||||
She continues to dance for her own enjoyment and can be found performing or choreographing for community
|
||||
arts-based projects when opportunities arise.
|
||||
</p>
|
||||
<p className="text-stone-600 leading-relaxed">
|
||||
Dahlia is working towards offering more movement and mobility classes and workshops in the future so
|
||||
please stay tuned for updates by checking the Movement section of this website.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="py-16 bg-white">
|
||||
<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>
|
||||
<p className="text-lg text-stone-600 max-w-2xl mx-auto">
|
||||
If long lasting improvement is your goal than you may want to consider how Dahlia's skills as a teacher
|
||||
could benefit you through either one-on-one instruction sessions that can be combined with massage therapy
|
||||
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"
|
||||
>
|
||||
<Link href="/contact">Ask About Workshops</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,309 @@
|
|||
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"
|
||||
|
||||
export default function HomePage() {
|
||||
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" },
|
||||
]
|
||||
|
||||
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" },
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-green-50">
|
||||
{/* 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">
|
||||
<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" />
|
||||
<Button
|
||||
variant="outline"
|
||||
size="lg"
|
||||
className="border-nature-green text-nature-green hover:bg-green-100 bg-transparent"
|
||||
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" }}
|
||||
>
|
||||
<Image
|
||||
src="/images/reception-area.jpg"
|
||||
alt="Welcoming reception area at Ebb'nFlow Therapeutics"
|
||||
width={600}
|
||||
height={700}
|
||||
className="rounded-2xl shadow-2xl object-cover w-full h-[500px] lg:h-[600px]"
|
||||
priority
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent rounded-2xl"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* About Section */}
|
||||
<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">
|
||||
<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.
|
||||
</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.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Services Section */}
|
||||
<section className="py-20 bg-green-50">
|
||||
<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>
|
||||
</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">
|
||||
<CardHeader className="pb-4">
|
||||
<Image
|
||||
src="/images/treatment-room.jpg"
|
||||
alt="Professional massage therapy treatment room"
|
||||
width={400}
|
||||
height={250}
|
||||
className="rounded-lg object-cover w-full h-48"
|
||||
/>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<CardTitle className="text-xl font-medium text-gray-800">Massage Therapy Treatment</CardTitle>
|
||||
<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" />
|
||||
<div className="pt-2">
|
||||
<ClinicSenseButton className="w-full" size="small" color="green" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Laser Therapy */}
|
||||
<Card className="border-green-200 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"
|
||||
width={400}
|
||||
height={250}
|
||||
className="rounded-lg object-cover w-full h-48"
|
||||
/>
|
||||
</CardHeader>
|
||||
<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...
|
||||
</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" />
|
||||
<div className="pt-2">
|
||||
<ClinicSenseButton className="w-full" size="small" color="green" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Movement Education */}
|
||||
<Card className="border-green-200 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"
|
||||
width={400}
|
||||
height={250}
|
||||
className="rounded-lg object-cover w-full h-48"
|
||||
/>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<CardTitle className="text-xl font-medium text-gray-800">Movement Education</CardTitle>
|
||||
<CardDescription className="text-gray-600 leading-relaxed">
|
||||
Remedial exercise aka "Rem-Ex" instruction involves teaching targeted strength, stretch or mobility
|
||||
exercises that further the benefits of massage therapy long term.
|
||||
</CardDescription>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full border-nature-green text-nature-green hover:bg-green-100 bg-transparent mb-2"
|
||||
asChild
|
||||
>
|
||||
<Link href="/movement">See Movement Workshops</Link>
|
||||
</Button>
|
||||
<ClinicSenseButton className="w-full" size="small" color="green" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Pricing Section */}
|
||||
<section className="py-20 bg-white">
|
||||
<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">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl font-medium text-gray-800">Massage and/or Laser Therapy</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-3">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-gray-700">30 Minute</span>
|
||||
<span className="text-gray-800 font-medium">
|
||||
$53.50 <span className="text-sm text-gray-600">(+$6.95 HST)</span>
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-gray-700">45 Minute</span>
|
||||
<span className="text-gray-800 font-medium">
|
||||
$80.25 <span className="text-sm text-gray-600">(+$10.43 HST)</span>
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-gray-700">60 Minute</span>
|
||||
<span className="text-gray-800 font-medium">
|
||||
$107.00 <span className="text-sm text-gray-600">(+$13.91 HST)</span>
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-gray-700">75 Minute</span>
|
||||
<span className="text-gray-800 font-medium">
|
||||
$133.75 <span className="text-sm text-gray-600">(+$17.38 HST)</span>
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-gray-700">90 Minute</span>
|
||||
<span className="text-gray-800 font-medium">
|
||||
$160.50 <span className="text-sm text-gray-600">(+$20.86 HST)</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Add-on Services */}
|
||||
<Card className="border-green-200">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl font-medium text-gray-800">Add-on Laser Therapy</CardTitle>
|
||||
<CardDescription className="text-gray-600">
|
||||
If combined simultaneously with Massage Therapy for more than 15 minutes (Subject to therapist's
|
||||
discretion)
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="text-center">
|
||||
<span className="text-2xl font-medium text-nature-green">$1.00/minute</span>
|
||||
<span className="text-sm text-gray-600 block">(+ HST)</span>
|
||||
</div>
|
||||
<p className="text-sm text-gray-600 text-center">Available in 15, 30, 45 and 60 minute intervals</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Payment & Insurance Info */}
|
||||
<div className="mt-12 space-y-6">
|
||||
<Card className="border-green-200 bg-green-50">
|
||||
<CardContent className="p-6">
|
||||
<h3 className="font-medium text-gray-800 mb-4">Payment & Insurance</h3>
|
||||
<div className="space-y-3 text-gray-700">
|
||||
<p>
|
||||
<strong>Accepted:</strong> Cash, E-transfer, Debit, Credit Card (Visa, AmEx, Mastercard)
|
||||
</p>
|
||||
<p>
|
||||
RMTs are regulated health care professionals recognized by insurance companies across Ontario.
|
||||
</p>
|
||||
<p>
|
||||
It is recommended that clients check with their insurance provider about whether they are required
|
||||
to have a doctor's note in order to submit a claim.
|
||||
</p>
|
||||
<p>
|
||||
Your receipt will include the practitioner's registration number necessary for an insurance claim
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="py-16 bg-green-100">
|
||||
<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>
|
||||
<div className="flex flex-col sm:flex-row justify-center items-center gap-8 text-gray-600 mb-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<Phone className="h-5 w-5 text-nature-green" />
|
||||
<span>(289) 969-3219</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<MapPin className="h-5 w-5 text-nature-green" />
|
||||
<span>Downtown St. Catharines</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
|
||||
<ClinicSenseButton size="medium" color="green" />
|
||||
<Button
|
||||
variant="outline"
|
||||
size="lg"
|
||||
asChild
|
||||
className="border-nature-green text-nature-green hover:bg-green-100 bg-transparent"
|
||||
>
|
||||
<Link href="/contact">Contact Dahlia</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,238 @@
|
|||
import { Button } from "@/components/ui/button"
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { CheckCircle, Clock, FileText, Heart } from "lucide-react"
|
||||
import Link from "next/link"
|
||||
import ClinicSenseButton from "@/components/clinicsense-button"
|
||||
import Image from "next/image"
|
||||
|
||||
export default function WhatToExpectPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-stone-50">
|
||||
{/* Hero Section */}
|
||||
<section className="bg-gradient-to-br from-stone-100 to-stone-200 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">
|
||||
Your First Visit
|
||||
</Badge>
|
||||
<h1 className="text-4xl lg:text-5xl font-light text-stone-800">What to Expect</h1>
|
||||
<p className="text-xl text-stone-600 leading-relaxed">
|
||||
Once you have successfully booked your initial appointment, you will receive a confirmation email with a
|
||||
few forms to fill out ahead of time.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Initial Appointment Process */}
|
||||
<section className="py-20 bg-white">
|
||||
<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 Initial Appointment</h2>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-8 mb-12">
|
||||
<Card className="border-stone-200">
|
||||
<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>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<CheckCircle className="h-4 w-4 text-green-600" />
|
||||
<span className="text-stone-600">Contact Information</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<CheckCircle className="h-4 w-4 text-green-600" />
|
||||
<span className="text-stone-600">Reason for Visit</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<CheckCircle className="h-4 w-4 text-green-600" />
|
||||
<span className="text-stone-600">Health History</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<CheckCircle className="h-4 w-4 text-green-600" />
|
||||
<span className="text-stone-600">Consent to Policies, Assessment and Treatment</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-stone-200">
|
||||
<CardHeader>
|
||||
<Clock className="h-8 w-8 text-stone-600 mb-2" />
|
||||
<CardTitle className="text-xl font-medium text-stone-800">Assessment Process</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<p className="text-stone-600">
|
||||
Your initial appointment begins with an in-person review of forms and an assessment that can range
|
||||
from simple to more involved, depending on the complexity or severity of your condition.
|
||||
</p>
|
||||
<p className="text-stone-600">
|
||||
This allows your therapist to ascertain whether there are any contraindications or modifications
|
||||
that may need to be considered for safe and effective treatment.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Card className="border-stone-200 bg-stone-100">
|
||||
<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">
|
||||
<div className="space-y-2">
|
||||
<p className="text-stone-700">• Forms review</p>
|
||||
<p className="text-stone-700">• Intake discussion</p>
|
||||
<p className="text-stone-700">• Initial assessment</p>
|
||||
<p className="text-stone-700">• Treatment plan development</p>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<p className="text-stone-700">• Treatment of sensitive areas (if indicated)</p>
|
||||
<p className="text-stone-700">• Diagnostics and referrals</p>
|
||||
<p className="text-stone-700">• Ongoing assessment planning</p>
|
||||
<p className="text-stone-700">• Treatment plan maintenance</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Assessment Details */}
|
||||
<section className="py-20 bg-stone-100">
|
||||
<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">
|
||||
<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
|
||||
assessment that may include postural observations, range of motion testing, and/or neurological and
|
||||
special orthopaedic testing.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-stone-200">
|
||||
<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
|
||||
effective and regularly reassesses client responses to ensure that treatments continue to be
|
||||
beneficial.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Treatment Experience */}
|
||||
<section className="py-20 bg-white">
|
||||
<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">Your Treatment Experience</h2>
|
||||
|
||||
<div className="grid lg:grid-cols-2 gap-8">
|
||||
<div className="space-y-6">
|
||||
<Card className="border-stone-200">
|
||||
<CardHeader>
|
||||
<Heart className="h-8 w-8 text-stone-600 mb-2" />
|
||||
<CardTitle className="text-xl font-medium text-stone-800">Personalized Approach</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-stone-600 leading-relaxed">
|
||||
Dahlia meets clients where they are, and is able to offer either a quiet retreat or a fun,
|
||||
friendly conversational interaction during treatments. She prioritizes client's goals, with the
|
||||
utmost respect for their comfort, time and resources.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-stone-200">
|
||||
<CardContent className="p-6">
|
||||
<h3 className="font-medium text-stone-800 mb-3">Communication & Consent</h3>
|
||||
<p className="text-stone-600 leading-relaxed">
|
||||
She encourages an atmosphere of open, two-way communication that respects privacy, autonomy and
|
||||
preferences such as depth of pressure and special consent for the treatment of sensitive areas if
|
||||
indicated, guided strictly by the principles of ethical practice adhered to by all registrants of
|
||||
the CMTO.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="relative">
|
||||
<Image
|
||||
src="/images/treatment-room.jpg"
|
||||
alt="Professional treatment room setup"
|
||||
width={400}
|
||||
height={300}
|
||||
className="rounded-2xl shadow-lg object-cover w-full h-64"
|
||||
/>
|
||||
<div className="absolute bottom-4 left-4 bg-white/90 px-3 py-2 rounded-md">
|
||||
<p className="text-sm font-medium text-stone-800">Your Private Treatment Space</p>
|
||||
</div>
|
||||
</div>
|
||||
<Card className="border-stone-200 bg-stone-50">
|
||||
<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">
|
||||
A massage from Dahlia is an experience and often also an education. Her approach is intuitive,
|
||||
evidence-based and trauma-informed. Her own personal experiences with injury and chronic pain has
|
||||
instilled a high level of empathy for and understanding of clients' complaints as well as her
|
||||
insistence on professionalism and excellence of care.
|
||||
</p>
|
||||
<p className="text-stone-600 leading-relaxed">
|
||||
There's always a unique and inspiring playlist in the background. Clients can also request music
|
||||
that they enjoy, adding to an experience that is tailored just for them. Complimentary
|
||||
aromatherapy is also available by request.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-stone-200">
|
||||
<CardContent className="p-6">
|
||||
<h3 className="font-medium text-stone-800 mb-3">Education & Home Care</h3>
|
||||
<p className="text-stone-600 leading-relaxed">
|
||||
Dahlia is a teacher at heart, so you likely won't be able to walk away without being encouraged to
|
||||
learn a stretch or strengthening exercise or about how to incorporate a home care practice into
|
||||
your routine to enhance the long term effects of treatment between sessions.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="py-16 bg-stone-100">
|
||||
<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>
|
||||
<p className="text-lg text-stone-600 max-w-2xl mx-auto">
|
||||
You can expect to have your primary area of concern addressed directly, within a treatment that aims to
|
||||
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"
|
||||
>
|
||||
<Link href="/contact">Have Questions?</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema.json",
|
||||
"style": "new-york",
|
||||
"rsc": true,
|
||||
"tsx": true,
|
||||
"tailwind": {
|
||||
"config": "",
|
||||
"css": "app/globals.css",
|
||||
"baseColor": "neutral",
|
||||
"cssVariables": true,
|
||||
"prefix": ""
|
||||
},
|
||||
"aliases": {
|
||||
"components": "@/components",
|
||||
"utils": "@/lib/utils",
|
||||
"ui": "@/components/ui",
|
||||
"lib": "@/lib",
|
||||
"hooks": "@/hooks"
|
||||
},
|
||||
"iconLibrary": "lucide"
|
||||
}
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
"use client"
|
||||
|
||||
import { useEffect, useState } from "react"
|
||||
|
||||
export default function AnimatedHero() {
|
||||
const [currentStep, setCurrentStep] = useState(0)
|
||||
|
||||
useEffect(() => {
|
||||
const steps = [
|
||||
{ delay: 1000, step: 1 }, // "Welcome to Ebb'nFlow Therapeutics"
|
||||
{ delay: 2000, step: 2 }, // "Take a deep breath"
|
||||
{ delay: 1500, step: 3 }, // "Unwind"
|
||||
{ delay: 1500, step: 4 }, // "Heal"
|
||||
{ delay: 2000, step: 5 }, // "Leave feeling..."
|
||||
]
|
||||
|
||||
let totalDelay = 0
|
||||
steps.forEach(({ delay, step }) => {
|
||||
totalDelay += delay
|
||||
setTimeout(() => {
|
||||
setCurrentStep(step)
|
||||
}, totalDelay)
|
||||
})
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className="space-y-6 min-h-[400px] flex flex-col justify-center">
|
||||
{/* Welcome to Ebb'nFlow Therapeutics */}
|
||||
<div
|
||||
className={`transition-all duration-1000 ease-in-out ${
|
||||
currentStep >= 1 ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"
|
||||
}`}
|
||||
>
|
||||
<div className="space-y-2">
|
||||
<p className="text-lg text-gray-600 text-center lg:text-left">Welcome to</p>
|
||||
<h2 className="text-3xl lg:text-4xl font-light text-gray-800 text-center lg:text-left">
|
||||
Ebb'nFlow <span className="font-normal text-nature-green">Therapeutics</span>
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Take a deep breath */}
|
||||
<div
|
||||
className={`transition-all duration-1000 ease-in-out ${
|
||||
currentStep >= 2 ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"
|
||||
}`}
|
||||
>
|
||||
<p className="text-4xl lg:text-5xl font-light text-gray-700 text-center lg:text-left">Take a deep breath</p>
|
||||
</div>
|
||||
|
||||
{/* Unwind */}
|
||||
<div
|
||||
className={`transition-all duration-1000 ease-in-out ${
|
||||
currentStep >= 3 ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"
|
||||
}`}
|
||||
>
|
||||
<h1 className="text-4xl lg:text-5xl font-light text-gray-800 text-center lg:text-left">Unwind</h1>
|
||||
</div>
|
||||
|
||||
{/* Heal */}
|
||||
<div
|
||||
className={`transition-all duration-1000 ease-in-out ${
|
||||
currentStep >= 4 ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"
|
||||
}`}
|
||||
>
|
||||
<h1 className="text-4xl lg:text-5xl font-light text-nature-green text-center lg:text-left">Heal</h1>
|
||||
</div>
|
||||
|
||||
{/* Leave feeling... */}
|
||||
<div
|
||||
className={`transition-all duration-1000 ease-in-out ${
|
||||
currentStep >= 5 ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"
|
||||
}`}
|
||||
>
|
||||
<p className="text-xl lg:text-2xl font-light text-gray-700 leading-relaxed text-center lg:text-left max-w-lg">
|
||||
Leave feeling relaxed, renewed and able to move with more freedom and ease.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
"use client"
|
||||
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Calendar } from "lucide-react"
|
||||
|
||||
interface ClinicSenseButtonProps {
|
||||
className?: string
|
||||
size?: "small" | "medium" | "large"
|
||||
color?: "black" | "blue" | "green"
|
||||
}
|
||||
|
||||
export default function ClinicSenseButton({ className = "", size = "small", color = "green" }: ClinicSenseButtonProps) {
|
||||
const getSizeClasses = () => {
|
||||
switch (size) {
|
||||
case "small":
|
||||
return "h-9 px-3 text-sm"
|
||||
case "medium":
|
||||
return "h-10 px-4 text-sm"
|
||||
case "large":
|
||||
return "h-11 px-8 text-base"
|
||||
default:
|
||||
return "h-9 px-3 text-sm"
|
||||
}
|
||||
}
|
||||
|
||||
const getColorClasses = () => {
|
||||
switch (color) {
|
||||
case "blue":
|
||||
return "bg-blue-600 hover:bg-blue-700 text-white"
|
||||
case "black":
|
||||
return "bg-gray-900 hover:bg-black text-white"
|
||||
case "green":
|
||||
default:
|
||||
return "bg-nature-green hover:bg-nature-green-dark text-white"
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Button className={`${getSizeClasses()} ${getColorClasses()} ${className} inline-flex items-center gap-2`} asChild>
|
||||
<a href="https://ebbnflowmassage.clinicsense.com" target="_blank" rel="noopener noreferrer">
|
||||
<Calendar className="h-4 w-4" />
|
||||
Book Appointment
|
||||
</a>
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,126 @@
|
|||
import { Mail, MapPin, Phone } from "lucide-react"
|
||||
import Link from "next/link"
|
||||
import Image from "next/image"
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer className="bg-gray-900 text-gray-200">
|
||||
<div className="container mx-auto px-4 py-12">
|
||||
<div className="grid md:grid-cols-4 gap-8">
|
||||
{/* Brand */}
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Image
|
||||
src="/images/logo.jpg"
|
||||
alt="Ebb'nFlow Therapeutics Logo"
|
||||
width={32}
|
||||
height={32}
|
||||
className="object-contain"
|
||||
/>
|
||||
<h3 className="text-xl font-light text-white">
|
||||
Ebb'nFlow <span className="font-normal text-nature-green">Therapeutics</span>
|
||||
</h3>
|
||||
</div>
|
||||
<p className="text-sm text-gray-300 leading-relaxed">
|
||||
A boutique wellness sanctuary. One client, one space, one transformative experience at a time. A place to
|
||||
unwind, heal, and grow.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Services */}
|
||||
<div className="space-y-4">
|
||||
<h4 className="font-medium text-white">Services</h4>
|
||||
<ul className="space-y-2 text-sm">
|
||||
<li>
|
||||
<Link href="/#services" className="text-gray-300 hover:text-nature-green transition-colors">
|
||||
Massage Therapy
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/#services" className="text-gray-300 hover:text-nature-green transition-colors">
|
||||
Laser Therapy
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/#services" className="text-gray-300 hover:text-nature-green transition-colors">
|
||||
Movement Therapy
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/contact" className="text-gray-300 hover:text-nature-green transition-colors">
|
||||
Consultation
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Quick Links */}
|
||||
<div className="space-y-4">
|
||||
<h4 className="font-medium text-white">Quick Links</h4>
|
||||
<ul className="space-y-2 text-sm">
|
||||
<li>
|
||||
<Link href="/about" className="text-gray-300 hover:text-nature-green transition-colors">
|
||||
About Us
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/contact" className="text-gray-300 hover:text-nature-green transition-colors">
|
||||
Contact
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/what-to-expect" className="text-gray-300 hover:text-nature-green transition-colors">
|
||||
What to Expect
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="/movement" className="text-gray-300 hover:text-nature-green transition-colors">
|
||||
Movement Workshops
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Contact Info */}
|
||||
<div className="space-y-4">
|
||||
<h4 className="font-medium text-white">Contact Info</h4>
|
||||
<div className="space-y-3 text-sm">
|
||||
<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
|
||||
<br />
|
||||
Suite 200
|
||||
<br />
|
||||
St. Catharines, ON L2R 7P9
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Phone className="h-4 w-4 text-nature-green" />
|
||||
<span className="text-gray-300">(289) 969-3219</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Mail className="h-4 w-4 text-nature-green" />
|
||||
<span className="text-gray-300">info@ebbnflowtherapeutics.com</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-gray-700 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
|
||||
<p className="text-sm text-gray-400">
|
||||
© {new Date().getFullYear()} Ebb'nFlow Therapeutics. All rights reserved.
|
||||
</p>
|
||||
<div className="flex space-x-6 mt-4 md:mt-0">
|
||||
<Link href="#" className="text-sm text-gray-400 hover:text-nature-green transition-colors">
|
||||
Privacy Policy
|
||||
</Link>
|
||||
<Link href="#" className="text-sm text-gray-400 hover:text-nature-green transition-colors">
|
||||
Terms of Service
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
"use client"
|
||||
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
|
||||
import { Menu } from "lucide-react"
|
||||
import Link from "next/link"
|
||||
import { usePathname } from "next/navigation"
|
||||
import ClinicSenseButton from "@/components/clinicsense-button"
|
||||
import Image from "next/image"
|
||||
|
||||
export default function Navbar() {
|
||||
const pathname = usePathname()
|
||||
|
||||
const navItems = [
|
||||
{ href: "/", label: "Home" },
|
||||
{ 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">
|
||||
<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>
|
||||
|
||||
{/* 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>
|
||||
{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"
|
||||
}`}
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
))}
|
||||
<div className="pt-4">
|
||||
<ClinicSenseButton className="w-full" size="small" color="green" />
|
||||
</div>
|
||||
</div>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { ChevronDown, ChevronUp } from "lucide-react"
|
||||
import Link from "next/link"
|
||||
|
||||
interface DropdownItem {
|
||||
title: string
|
||||
href: string
|
||||
}
|
||||
|
||||
interface ServiceDropdownProps {
|
||||
items: DropdownItem[]
|
||||
title: string
|
||||
}
|
||||
|
||||
export default function ServiceDropdown({ items, title }: ServiceDropdownProps) {
|
||||
const [isOpen, setIsOpen] = useState(false)
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full border-nature-green text-nature-green hover:bg-green-100 justify-between bg-transparent"
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
>
|
||||
{title}
|
||||
{isOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
|
||||
</Button>
|
||||
|
||||
{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>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
'use client'
|
||||
|
||||
import * as React from 'react'
|
||||
import {
|
||||
ThemeProvider as NextThemesProvider,
|
||||
type ThemeProviderProps,
|
||||
} from 'next-themes'
|
||||
|
||||
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
|
||||
return <NextThemesProvider {...props}>{children}</NextThemesProvider>
|
||||
}
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
import * as React from 'react'
|
||||
import { Slot } from '@radix-ui/react-slot'
|
||||
import { cva, type VariantProps } from 'class-variance-authority'
|
||||
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const badgeVariants = cva(
|
||||
'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default:
|
||||
'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
|
||||
secondary:
|
||||
'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
|
||||
destructive:
|
||||
'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
|
||||
outline:
|
||||
'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: 'default',
|
||||
},
|
||||
},
|
||||
)
|
||||
|
||||
function Badge({
|
||||
className,
|
||||
variant,
|
||||
asChild = false,
|
||||
...props
|
||||
}: React.ComponentProps<'span'> &
|
||||
VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
|
||||
const Comp = asChild ? Slot : 'span'
|
||||
|
||||
return (
|
||||
<Comp
|
||||
data-slot="badge"
|
||||
className={cn(badgeVariants({ variant }), className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Badge, badgeVariants }
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
import * as React from 'react'
|
||||
import { Slot } from '@radix-ui/react-slot'
|
||||
import { cva, type VariantProps } from 'class-variance-authority'
|
||||
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const buttonVariants = cva(
|
||||
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default:
|
||||
'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
|
||||
destructive:
|
||||
'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
|
||||
outline:
|
||||
'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
|
||||
secondary:
|
||||
'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
|
||||
ghost:
|
||||
'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
|
||||
link: 'text-primary underline-offset-4 hover:underline',
|
||||
},
|
||||
size: {
|
||||
default: 'h-9 px-4 py-2 has-[>svg]:px-3',
|
||||
sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
|
||||
lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
|
||||
icon: 'size-9',
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: 'default',
|
||||
size: 'default',
|
||||
},
|
||||
},
|
||||
)
|
||||
|
||||
function Button({
|
||||
className,
|
||||
variant,
|
||||
size,
|
||||
asChild = false,
|
||||
...props
|
||||
}: React.ComponentProps<'button'> &
|
||||
VariantProps<typeof buttonVariants> & {
|
||||
asChild?: boolean
|
||||
}) {
|
||||
const Comp = asChild ? Slot : 'button'
|
||||
|
||||
return (
|
||||
<Comp
|
||||
data-slot="button"
|
||||
className={cn(buttonVariants({ variant, size, className }))}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Button, buttonVariants }
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
import * as React from 'react'
|
||||
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
function Card({ className, ...props }: React.ComponentProps<'div'>) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card"
|
||||
className={cn(
|
||||
'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-header"
|
||||
className={cn(
|
||||
'@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-title"
|
||||
className={cn('leading-none font-semibold', className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-description"
|
||||
className={cn('text-muted-foreground text-sm', className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-action"
|
||||
className={cn(
|
||||
'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-content"
|
||||
className={cn('px-6', className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-footer"
|
||||
className={cn('flex items-center px-6 [.border-t]:pt-6', className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Card,
|
||||
CardHeader,
|
||||
CardFooter,
|
||||
CardTitle,
|
||||
CardAction,
|
||||
CardDescription,
|
||||
CardContent,
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
import * as React from 'react'
|
||||
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
|
||||
return (
|
||||
<input
|
||||
type={type}
|
||||
data-slot="input"
|
||||
className={cn(
|
||||
'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
|
||||
'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
|
||||
'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Input }
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
'use client'
|
||||
|
||||
import * as React from 'react'
|
||||
import * as LabelPrimitive from '@radix-ui/react-label'
|
||||
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
function Label({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
|
||||
return (
|
||||
<LabelPrimitive.Root
|
||||
data-slot="label"
|
||||
className={cn(
|
||||
'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Label }
|
||||
|
|
@ -0,0 +1,139 @@
|
|||
'use client'
|
||||
|
||||
import * as React from 'react'
|
||||
import * as SheetPrimitive from '@radix-ui/react-dialog'
|
||||
import { XIcon } from 'lucide-react'
|
||||
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
|
||||
return <SheetPrimitive.Root data-slot="sheet" {...props} />
|
||||
}
|
||||
|
||||
function SheetTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
|
||||
return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
|
||||
}
|
||||
|
||||
function SheetClose({
|
||||
...props
|
||||
}: React.ComponentProps<typeof SheetPrimitive.Close>) {
|
||||
return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
|
||||
}
|
||||
|
||||
function SheetPortal({
|
||||
...props
|
||||
}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
|
||||
return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
|
||||
}
|
||||
|
||||
function SheetOverlay({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
|
||||
return (
|
||||
<SheetPrimitive.Overlay
|
||||
data-slot="sheet-overlay"
|
||||
className={cn(
|
||||
'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SheetContent({
|
||||
className,
|
||||
children,
|
||||
side = 'right',
|
||||
...props
|
||||
}: React.ComponentProps<typeof SheetPrimitive.Content> & {
|
||||
side?: 'top' | 'right' | 'bottom' | 'left'
|
||||
}) {
|
||||
return (
|
||||
<SheetPortal>
|
||||
<SheetOverlay />
|
||||
<SheetPrimitive.Content
|
||||
data-slot="sheet-content"
|
||||
className={cn(
|
||||
'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
|
||||
side === 'right' &&
|
||||
'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
|
||||
side === 'left' &&
|
||||
'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
|
||||
side === 'top' &&
|
||||
'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
|
||||
side === 'bottom' &&
|
||||
'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
|
||||
<XIcon className="size-4" />
|
||||
<span className="sr-only">Close</span>
|
||||
</SheetPrimitive.Close>
|
||||
</SheetPrimitive.Content>
|
||||
</SheetPortal>
|
||||
)
|
||||
}
|
||||
|
||||
function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {
|
||||
return (
|
||||
<div
|
||||
data-slot="sheet-header"
|
||||
className={cn('flex flex-col gap-1.5 p-4', className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {
|
||||
return (
|
||||
<div
|
||||
data-slot="sheet-footer"
|
||||
className={cn('mt-auto flex flex-col gap-2 p-4', className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SheetTitle({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SheetPrimitive.Title>) {
|
||||
return (
|
||||
<SheetPrimitive.Title
|
||||
data-slot="sheet-title"
|
||||
className={cn('text-foreground font-semibold', className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function SheetDescription({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SheetPrimitive.Description>) {
|
||||
return (
|
||||
<SheetPrimitive.Description
|
||||
data-slot="sheet-description"
|
||||
className={cn('text-muted-foreground text-sm', className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Sheet,
|
||||
SheetTrigger,
|
||||
SheetClose,
|
||||
SheetContent,
|
||||
SheetHeader,
|
||||
SheetFooter,
|
||||
SheetTitle,
|
||||
SheetDescription,
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
import * as React from 'react'
|
||||
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
|
||||
return (
|
||||
<textarea
|
||||
data-slot="textarea"
|
||||
className={cn(
|
||||
'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Textarea }
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import { clsx, type ClassValue } from 'clsx'
|
||||
import { twMerge } from 'tailwind-merge'
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs))
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {
|
||||
eslint: {
|
||||
ignoreDuringBuilds: true,
|
||||
},
|
||||
typescript: {
|
||||
ignoreBuildErrors: true,
|
||||
},
|
||||
images: {
|
||||
unoptimized: true,
|
||||
},
|
||||
}
|
||||
|
||||
export default nextConfig
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
{
|
||||
"name": "my-v0-project",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "next build",
|
||||
"dev": "next dev",
|
||||
"lint": "next lint",
|
||||
"start": "next start"
|
||||
},
|
||||
"dependencies": {
|
||||
"@hookform/resolvers": "^3.10.0",
|
||||
"@radix-ui/react-accordion": "1.2.2",
|
||||
"@radix-ui/react-alert-dialog": "1.1.4",
|
||||
"@radix-ui/react-aspect-ratio": "1.1.1",
|
||||
"@radix-ui/react-avatar": "1.1.2",
|
||||
"@radix-ui/react-checkbox": "1.1.3",
|
||||
"@radix-ui/react-collapsible": "1.1.2",
|
||||
"@radix-ui/react-context-menu": "2.2.4",
|
||||
"@radix-ui/react-dialog": "1.1.4",
|
||||
"@radix-ui/react-dropdown-menu": "2.1.4",
|
||||
"@radix-ui/react-hover-card": "1.1.4",
|
||||
"@radix-ui/react-label": "2.1.1",
|
||||
"@radix-ui/react-menubar": "1.1.4",
|
||||
"@radix-ui/react-navigation-menu": "1.2.3",
|
||||
"@radix-ui/react-popover": "1.1.4",
|
||||
"@radix-ui/react-progress": "1.1.1",
|
||||
"@radix-ui/react-radio-group": "1.2.2",
|
||||
"@radix-ui/react-scroll-area": "1.2.2",
|
||||
"@radix-ui/react-select": "2.1.4",
|
||||
"@radix-ui/react-separator": "1.1.1",
|
||||
"@radix-ui/react-slider": "1.2.2",
|
||||
"@radix-ui/react-slot": "1.1.1",
|
||||
"@radix-ui/react-switch": "1.1.2",
|
||||
"@radix-ui/react-tabs": "1.1.2",
|
||||
"@radix-ui/react-toast": "1.2.4",
|
||||
"@radix-ui/react-toggle": "1.1.1",
|
||||
"@radix-ui/react-toggle-group": "1.1.1",
|
||||
"@radix-ui/react-tooltip": "1.1.6",
|
||||
"@vercel/analytics": "1.3.1",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"cmdk": "1.0.4",
|
||||
"date-fns": "4.1.0",
|
||||
"embla-carousel-react": "8.5.1",
|
||||
"geist": "^1.3.1",
|
||||
"input-otp": "1.4.1",
|
||||
"lucide-react": "^0.454.0",
|
||||
"next": "15.2.4",
|
||||
"next-themes": "^0.4.6",
|
||||
"react": "^19",
|
||||
"react-day-picker": "9.8.0",
|
||||
"react-dom": "^19",
|
||||
"react-hook-form": "^7.60.0",
|
||||
"react-resizable-panels": "^2.1.7",
|
||||
"recharts": "2.15.4",
|
||||
"sonner": "^1.7.4",
|
||||
"tailwind-merge": "^2.5.5",
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
"vaul": "^0.9.9",
|
||||
"zod": "3.25.76"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/postcss": "^4.1.9",
|
||||
"@types/node": "^22",
|
||||
"@types/react": "^19",
|
||||
"@types/react-dom": "^19",
|
||||
"postcss": "^8.5",
|
||||
"tailwindcss": "^4.1.9",
|
||||
"tw-animate-css": "1.3.3",
|
||||
"typescript": "^5"
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,8 @@
|
|||
/** @type {import('postcss-load-config').Config} */
|
||||
const config = {
|
||||
plugins: {
|
||||
'@tailwindcss/postcss': {},
|
||||
},
|
||||
}
|
||||
|
||||
export default config
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 963 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 884 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 892 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 936 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 568 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="215" height="48" fill="none"><path fill="#000" d="M57.588 9.6h6L73.828 38h-5.2l-2.36-6.88h-11.36L52.548 38h-5.2l10.24-28.4Zm7.16 17.16-4.16-12.16-4.16 12.16h8.32Zm23.694-2.24c-.186-1.307-.706-2.32-1.56-3.04-.853-.72-1.866-1.08-3.04-1.08-1.68 0-2.986.613-3.92 1.84-.906 1.227-1.36 2.947-1.36 5.16s.454 3.933 1.36 5.16c.934 1.227 2.24 1.84 3.92 1.84 1.254 0 2.307-.373 3.16-1.12.854-.773 1.387-1.867 1.6-3.28l5.12.24c-.186 1.68-.733 3.147-1.64 4.4-.906 1.227-2.08 2.173-3.52 2.84-1.413.667-2.986 1-4.72 1-2.08 0-3.906-.453-5.48-1.36-1.546-.907-2.76-2.2-3.64-3.88-.853-1.68-1.28-3.627-1.28-5.84 0-2.24.427-4.187 1.28-5.84.88-1.68 2.094-2.973 3.64-3.88 1.574-.907 3.4-1.36 5.48-1.36 1.68 0 3.227.32 4.64.96 1.414.64 2.56 1.56 3.44 2.76.907 1.2 1.454 2.6 1.64 4.2l-5.12.28Zm11.486-7.72.12 3.4c.534-1.227 1.307-2.173 2.32-2.84 1.04-.693 2.267-1.04 3.68-1.04 1.494 0 2.76.387 3.8 1.16 1.067.747 1.827 1.813 2.28 3.2.507-1.44 1.294-2.52 2.36-3.24 1.094-.747 2.414-1.12 3.96-1.12 1.414 0 2.64.307 3.68.92s1.84 1.52 2.4 2.72c.56 1.2.84 2.667.84 4.4V38h-4.96V25.92c0-1.813-.293-3.187-.88-4.12-.56-.96-1.413-1.44-2.56-1.44-.906 0-1.68.213-2.32.64-.64.427-1.133 1.053-1.48 1.88-.32.827-.48 1.84-.48 3.04V38h-4.56V25.92c0-1.2-.133-2.213-.4-3.04-.24-.827-.626-1.453-1.16-1.88-.506-.427-1.133-.64-1.88-.64-.906 0-1.68.227-2.32.68-.64.427-1.133 1.053-1.48 1.88-.32.827-.48 1.827-.48 3V38h-4.96V16.8h4.48Zm26.723 10.6c0-2.24.427-4.187 1.28-5.84.854-1.68 2.067-2.973 3.64-3.88 1.574-.907 3.4-1.36 5.48-1.36 1.84 0 3.494.413 4.96 1.24 1.467.827 2.64 2.08 3.52 3.76.88 1.653 1.347 3.693 1.4 6.12v1.32h-15.08c.107 1.813.614 3.227 1.52 4.24.907.987 2.134 1.48 3.68 1.48.987 0 1.88-.253 2.68-.76a4.803 4.803 0 0 0 1.84-2.2l5.08.36c-.64 2.027-1.84 3.64-3.6 4.84-1.733 1.173-3.733 1.76-6 1.76-2.08 0-3.906-.453-5.48-1.36-1.573-.907-2.786-2.2-3.64-3.88-.853-1.68-1.28-3.627-1.28-5.84Zm15.16-2.04c-.213-1.733-.76-3.013-1.64-3.84-.853-.827-1.893-1.24-3.12-1.24-1.44 0-2.6.453-3.48 1.36-.88.88-1.44 2.12-1.68 3.72h9.92ZM163.139 9.6V38h-5.04V9.6h5.04Zm8.322 7.2.24 5.88-.64-.36c.32-2.053 1.094-3.56 2.32-4.52 1.254-.987 2.787-1.48 4.6-1.48 2.32 0 4.107.733 5.36 2.2 1.254 1.44 1.88 3.387 1.88 5.84V38h-4.96V25.92c0-1.253-.12-2.28-.36-3.08-.24-.8-.64-1.413-1.2-1.84-.533-.427-1.253-.64-2.16-.64-1.44 0-2.573.48-3.4 1.44-.8.933-1.2 2.307-1.2 4.12V38h-4.96V16.8h4.48Zm30.003 7.72c-.186-1.307-.706-2.32-1.56-3.04-.853-.72-1.866-1.08-3.04-1.08-1.68 0-2.986.613-3.92 1.84-.906 1.227-1.36 2.947-1.36 5.16s.454 3.933 1.36 5.16c.934 1.227 2.24 1.84 3.92 1.84 1.254 0 2.307-.373 3.16-1.12.854-.773 1.387-1.867 1.6-3.28l5.12.24c-.186 1.68-.733 3.147-1.64 4.4-.906 1.227-2.08 2.173-3.52 2.84-1.413.667-2.986 1-4.72 1-2.08 0-3.906-.453-5.48-1.36-1.546-.907-2.76-2.2-3.64-3.88-.853-1.68-1.28-3.627-1.28-5.84 0-2.24.427-4.187 1.28-5.84.88-1.68 2.094-2.973 3.64-3.88 1.574-.907 3.4-1.36 5.48-1.36 1.68 0 3.227.32 4.64.96 1.414.64 2.56 1.56 3.44 2.76.907 1.2 1.454 2.6 1.64 4.2l-5.12.28Zm11.443 8.16V38h-5.6v-5.32h5.6Z"/><path fill="#171717" fill-rule="evenodd" d="m7.839 40.783 16.03-28.054L20 6 0 40.783h7.839Zm8.214 0H40L27.99 19.894l-4.02 7.032 3.976 6.914H20.02l-3.967 6.943Z" clip-rule="evenodd"/></svg>
|
||||
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="1200" fill="none"><rect width="1200" height="1200" fill="#EAEAEA" rx="3"/><g opacity=".5"><g opacity=".5"><path fill="#FAFAFA" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/></g><path stroke="url(#a)" stroke-width="2.418" d="M0-1.209h553.581" transform="scale(1 -1) rotate(45 1163.11 91.165)"/><path stroke="url(#b)" stroke-width="2.418" d="M404.846 598.671h391.726"/><path stroke="url(#c)" stroke-width="2.418" d="M599.5 795.742V404.017"/><path stroke="url(#d)" stroke-width="2.418" d="m795.717 796.597-391.441-391.44"/><path fill="#fff" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/><g clip-path="url(#e)"><path fill="#666" fill-rule="evenodd" d="M616.426 586.58h-31.434v16.176l3.553-3.554.531-.531h9.068l.074-.074 8.463-8.463h2.565l7.18 7.181V586.58Zm-15.715 14.654 3.698 3.699 1.283 1.282-2.565 2.565-1.282-1.283-5.2-5.199h-6.066l-5.514 5.514-.073.073v2.876a2.418 2.418 0 0 0 2.418 2.418h26.598a2.418 2.418 0 0 0 2.418-2.418v-8.317l-8.463-8.463-7.181 7.181-.071.072Zm-19.347 5.442v4.085a6.045 6.045 0 0 0 6.046 6.045h26.598a6.044 6.044 0 0 0 6.045-6.045v-7.108l1.356-1.355-1.282-1.283-.074-.073v-17.989h-38.689v23.43l-.146.146.146.147Z" clip-rule="evenodd"/></g><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/></g><defs><linearGradient id="a" x1="554.061" x2="-.48" y1=".083" y2=".087" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="b" x1="796.912" x2="404.507" y1="599.963" y2="599.965" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="c" x1="600.792" x2="600.794" y1="403.677" y2="796.082" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="d" x1="404.85" x2="796.972" y1="403.903" y2="796.02" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><clipPath id="e"><path fill="#fff" d="M581.364 580.535h38.689v38.689h-38.689z"/></clipPath></defs></svg>
|
||||
|
After Width: | Height: | Size: 3.2 KiB |
|
|
@ -0,0 +1,125 @@
|
|||
@import 'tailwindcss';
|
||||
@import 'tw-animate-css';
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
:root {
|
||||
--background: oklch(1 0 0);
|
||||
--foreground: oklch(0.145 0 0);
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.145 0 0);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.145 0 0);
|
||||
--primary: oklch(0.205 0 0);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--secondary: oklch(0.97 0 0);
|
||||
--secondary-foreground: oklch(0.205 0 0);
|
||||
--muted: oklch(0.97 0 0);
|
||||
--muted-foreground: oklch(0.556 0 0);
|
||||
--accent: oklch(0.97 0 0);
|
||||
--accent-foreground: oklch(0.205 0 0);
|
||||
--destructive: oklch(0.577 0.245 27.325);
|
||||
--destructive-foreground: oklch(0.577 0.245 27.325);
|
||||
--border: oklch(0.922 0 0);
|
||||
--input: oklch(0.922 0 0);
|
||||
--ring: oklch(0.708 0 0);
|
||||
--chart-1: oklch(0.646 0.222 41.116);
|
||||
--chart-2: oklch(0.6 0.118 184.704);
|
||||
--chart-3: oklch(0.398 0.07 227.392);
|
||||
--chart-4: oklch(0.828 0.189 84.429);
|
||||
--chart-5: oklch(0.769 0.188 70.08);
|
||||
--radius: 0.625rem;
|
||||
--sidebar: oklch(0.985 0 0);
|
||||
--sidebar-foreground: oklch(0.145 0 0);
|
||||
--sidebar-primary: oklch(0.205 0 0);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.97 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.205 0 0);
|
||||
--sidebar-border: oklch(0.922 0 0);
|
||||
--sidebar-ring: oklch(0.708 0 0);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: oklch(0.145 0 0);
|
||||
--foreground: oklch(0.985 0 0);
|
||||
--card: oklch(0.145 0 0);
|
||||
--card-foreground: oklch(0.985 0 0);
|
||||
--popover: oklch(0.145 0 0);
|
||||
--popover-foreground: oklch(0.985 0 0);
|
||||
--primary: oklch(0.985 0 0);
|
||||
--primary-foreground: oklch(0.205 0 0);
|
||||
--secondary: oklch(0.269 0 0);
|
||||
--secondary-foreground: oklch(0.985 0 0);
|
||||
--muted: oklch(0.269 0 0);
|
||||
--muted-foreground: oklch(0.708 0 0);
|
||||
--accent: oklch(0.269 0 0);
|
||||
--accent-foreground: oklch(0.985 0 0);
|
||||
--destructive: oklch(0.396 0.141 25.723);
|
||||
--destructive-foreground: oklch(0.637 0.237 25.331);
|
||||
--border: oklch(0.269 0 0);
|
||||
--input: oklch(0.269 0 0);
|
||||
--ring: oklch(0.439 0 0);
|
||||
--chart-1: oklch(0.488 0.243 264.376);
|
||||
--chart-2: oklch(0.696 0.17 162.48);
|
||||
--chart-3: oklch(0.769 0.188 70.08);
|
||||
--chart-4: oklch(0.627 0.265 303.9);
|
||||
--chart-5: oklch(0.645 0.246 16.439);
|
||||
--sidebar: oklch(0.205 0 0);
|
||||
--sidebar-foreground: oklch(0.985 0 0);
|
||||
--sidebar-primary: oklch(0.488 0.243 264.376);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.269 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||
--sidebar-border: oklch(0.269 0 0);
|
||||
--sidebar-ring: oklch(0.439 0 0);
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--font-sans: var(--font-geist-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-card: var(--card);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-popover: var(--popover);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-destructive-foreground: var(--destructive-foreground);
|
||||
--color-border: var(--border);
|
||||
--color-input: var(--input);
|
||||
--color-ring: var(--ring);
|
||||
--color-chart-1: var(--chart-1);
|
||||
--color-chart-2: var(--chart-2);
|
||||
--color-chart-3: var(--chart-3);
|
||||
--color-chart-4: var(--chart-4);
|
||||
--color-chart-5: var(--chart-5);
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
--color-sidebar: var(--sidebar);
|
||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||
--color-sidebar-primary: var(--sidebar-primary);
|
||||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||
--color-sidebar-accent: var(--sidebar-accent);
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border outline-ring/50;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"target": "ES6",
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"noEmit": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "bundler",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve",
|
||||
"incremental": true,
|
||||
"plugins": [
|
||||
{
|
||||
"name": "next"
|
||||
}
|
||||
],
|
||||
"paths": {
|
||||
"@/*": ["./*"]
|
||||
}
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
Loading…
Reference in New Issue