ebb-n-flow-website/contact.html

213 lines
9.5 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us - Ebb'nFlow Therapeutics</title>
<meta name="description" content="Get in touch with Ebb'nFlow Therapeutics. Visit us in downtown St. Catharines or book your appointment online.">
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<header id="navbar">
<div class="container">
<nav>
<a href="/" class="logo">
<img src="./public/images/logo.jpg" alt="Ebb'nFlow Therapeutics Logo">
<span class="logo-text">Ebb'nFlow <span class="highlight">Therapeutics</span></span>
</a>
<button class="mobile-menu-btn" onclick="toggleMobileMenu()">
<span></span>
<span></span>
<span></span>
</button>
<ul class="nav-links" id="navLinks">
<li><a href="index.html#services" onclick="closeMobileMenu()">Services</a></li>
<li><a href="index.html#prices" onclick="closeMobileMenu()">Prices</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li class="cta-nav">
<a href="https://ebbnflowmassage.clinicsense.com" target="_blank" class="btn btn-primary">
📅 Book Appointment
</a>
</li>
</ul>
</nav>
</div>
</header>
<!-- Hero Section -->
<section class="page-hero">
<div class="container">
<span class="badge">Get in Touch</span>
<h1>Contact Us</h1>
<p class="hero-subtitle">"A place to unwind, a place to heal, a place to grow"</p>
<p class="hero-description">Ready to experience boutique wellness? Let's chat about creating your personalized sanctuary for healing and self-care.</p>
</div>
</section>
<!-- Clinic Images -->
<section class="clinic-images">
<div class="container">
<div class="image-grid">
<div class="image-card">
<img src="./public/images/clinic-exterior.jpg" alt="Ebb'nFlow Therapeutics clinic exterior">
<div class="image-caption">Our Welcoming Exterior</div>
</div>
<div class="image-card">
<img src="./public/images/yellow-door.jpg" alt="Distinctive yellow entrance door">
<div class="image-caption">Find Our Yellow Door</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section class="contact-section">
<div class="container">
<div class="contact-grid-simple">
<!-- Email Us Card -->
<div class="email-card">
<div class="icon-header-large">
<span class="large-icon">✉️</span>
<h2>Email Us</h2>
</div>
<p class="email-description">Have questions or want to book an appointment? Send us an email and we'll get back to you within 24 hours.</p>
<a href="mailto:info@ebbnflowtherapeutics.com" class="email-link">
info@ebbnflowtherapeutics.com
</a>
</div>
<!-- Contact Info -->
<div class="contact-info-wrapper">
<div class="info-card">
<h3>Visit Our Clinic</h3>
<div class="contact-item">
<span class="icon">📍</span>
<div>
<p class="item-title">Address</p>
<p>59 Wellington Street<br>St. Catharines, ON L2R 5P9</p>
</div>
</div>
<div class="contact-item">
<span class="icon">📞</span>
<div>
<p class="item-title">Phone</p>
<p><a href="tel:2899693219" class="phone-link">(289) 969-3219</a></p>
</div>
</div>
<div class="contact-item">
<span class="icon">✉️</span>
<div>
<p class="item-title">Email</p>
<p><a href="mailto:info@ebbnflowtherapeutics.com" class="email-link-small">info@ebbnflowtherapeutics.com</a></p>
</div>
</div>
</div>
<div class="info-card">
<h3>Office Hours</h3>
<div class="hours-list">
<div class="hours-item">
<span>Monday - Thursday</span>
<span>9:00 AM - 7:00 PM</span>
</div>
<div class="hours-item">
<span>Friday</span>
<span>9:00 AM - 5:00 PM</span>
</div>
<div class="hours-item">
<span>Saturday</span>
<span>10:00 AM - 4:00 PM</span>
</div>
<div class="hours-item">
<span>Sunday</span>
<span>Closed</span>
</div>
</div>
</div>
<div class="info-card emergency">
<div class="contact-item">
<span class="icon"></span>
<div>
<p class="item-title">Emergency Contact</p>
<p class="small">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>
</div>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="cta">
<div class="container">
<h2>Ready for Your Personal Wellness Experience?</h2>
<p>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 class="cta-buttons">
<a href="https://ebbnflowmassage.clinicsense.com" target="_blank" class="btn btn-primary">Book Appointment</a>
<a href="tel:2899693219" class="btn btn-primary">Call for Personal Consultation</a>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<div class="container">
<div class="footer-grid">
<div class="footer-brand">
<img src="./public/images/logo.jpg" alt="Ebb'nFlow Therapeutics Logo">
<h3>Ebb'nFlow <span class="highlight">Therapeutics</span></h3>
<p>A boutique wellness sanctuary. One client, one space, one transformative experience at a time.</p>
</div>
<div class="footer-links">
<h4>Services</h4>
<ul>
<li><a href="index.html#services">Massage Therapy</a></li>
<li><a href="index.html#services">Laser Therapy</a></li>
<li><a href="index.html#services">Movement Therapy</a></li>
<li><a href="contact.html">Consultation</a></li>
</ul>
</div>
<div class="footer-links">
<h4>Quick Links</h4>
<ul>
<li><a href="about.html">About</a></li>
<li><a href="index.html#prices">Prices</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="what-to-expect.html">What to Expect</a></li>
<li><a href="movement.html">Movement Workshops</a></li>
</ul>
</div>
<div class="footer-contact">
<h4>Contact Info</h4>
<p>📍 59 Wellington Street<br>St. Catharines, ON L2R 5P9</p>
<p>📞 (289) 969-3219</p>
<p>✉️ info@ebbnflowtherapeutics.com</p>
</div>
</div>
<div class="footer-bottom">
<p>&copy; 2025 Ebb'nFlow Therapeutics. All rights reserved.</p>
<div class="footer-legal">
<a href="#">Privacy Policy</a>
<a href="#">Terms of Service</a>
</div>
</div>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>