215 lines
11 KiB
HTML
Executable File
215 lines
11 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="<!-- DRAFT NEEDED: contact page meta description -->">
|
|
<meta name="robots" content="index, follow">
|
|
<meta property="og:title" content="Contact | Big Breath Yoga & Wellness">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://bigbreath.co/contact/">
|
|
<link rel="canonical" href="https://bigbreath.co/contact/">
|
|
<title>Contact | Big Breath Yoga & Wellness</title>
|
|
<link rel="icon" type="image/svg+xml" href="/assets/svg/favicon.svg">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link rel="stylesheet" href="/assets/css/tokens.css">
|
|
<link rel="stylesheet" href="/assets/css/main.css">
|
|
</head>
|
|
<body>
|
|
<a href="#main-content" class="skip-link">Skip to main content</a>
|
|
|
|
<header class="bb-header" role="banner">
|
|
<div class="header-inner">
|
|
<a href="/" class="bb-logo" aria-label="Big Breath Yoga, Home">
|
|
<span class="bb-logo-mark" aria-hidden="true">BB</span>
|
|
<span class="bb-logo-text">
|
|
<span class="bb-logo-name">Big Breath</span>
|
|
<span class="bb-logo-tagline">Yoga & Wellness</span>
|
|
</span>
|
|
</a>
|
|
<nav class="bb-nav" aria-label="Main navigation">
|
|
<a href="/about/">About</a>
|
|
<div class="nav-has-dropdown" tabindex="0" role="button" aria-haspopup="true" aria-expanded="false">
|
|
<span>Services</span>
|
|
<svg class="nav-caret" viewBox="0 0 10 10" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M2 3.5l3 3 3-3"/></svg>
|
|
<div class="nav-dropdown" role="menu">
|
|
<a href="/services/group-classes/" role="menuitem">Group Classes</a>
|
|
<a href="/services/private-sessions/" role="menuitem">Private Sessions</a>
|
|
<a href="/services/corporate-wellness/" role="menuitem">Corporate Wellness</a>
|
|
<a href="/services/prenatal-yoga/" role="menuitem">Prenatal Yoga</a>
|
|
<a href="/services/meditation-breathwork/" role="menuitem">Meditation & Breathwork</a>
|
|
<a href="/services/online-yoga/" role="menuitem">Online / Virtual Yoga</a>
|
|
</div>
|
|
</div>
|
|
<a href="/contact/" aria-current="page">Contact</a>
|
|
</nav>
|
|
<a href="/contact/" class="btn btn-primary header-cta" aria-current="page">Book a Class</a>
|
|
<button class="bb-hamburger" aria-label="Open menu" aria-expanded="false">
|
|
<span></span><span></span><span></span>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<nav class="bb-mobile-nav" aria-label="Mobile navigation">
|
|
<a href="/">Home</a>
|
|
<a href="/about/">About</a>
|
|
<div class="mobile-service-links">
|
|
<a href="/services/">All Services</a>
|
|
<a href="/services/group-classes/">Group Classes</a>
|
|
<a href="/services/private-sessions/">Private Sessions</a>
|
|
<a href="/services/corporate-wellness/">Corporate Wellness</a>
|
|
<a href="/services/prenatal-yoga/">Prenatal Yoga</a>
|
|
<a href="/services/meditation-breathwork/">Meditation & Breathwork</a>
|
|
<a href="/services/online-yoga/">Online / Virtual Yoga</a>
|
|
</div>
|
|
<a href="/contact/" class="btn btn-primary">Book a Class</a>
|
|
</nav>
|
|
|
|
<main id="main-content">
|
|
|
|
<section class="bb-inner-hero">
|
|
<div class="container">
|
|
<p class="section-label" data-animate>Get in Touch</p>
|
|
<h1 class="inner-hero-h1" data-animate>Book a class or ask a question</h1>
|
|
<p class="inner-hero-sub" data-animate><!-- DRAFT NEEDED: contact intro paragraph --></p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="bb-content-sec">
|
|
<div class="container">
|
|
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 100px); align-items: start;">
|
|
|
|
<!-- Contact form -->
|
|
<div data-animate>
|
|
<form id="contact-form" action="/api/contact" method="POST" novalidate>
|
|
<input type="text" name="website" style="display:none" tabindex="-1" autocomplete="off" aria-hidden="true">
|
|
<input type="hidden" name="form_loaded_at" id="form_loaded_at">
|
|
|
|
<div style="display:flex;flex-direction:column;gap:var(--s-5);">
|
|
|
|
<div>
|
|
<label for="name" style="display:block;font-size:var(--t-sm);font-weight:var(--w-semi);color:var(--ink);margin-bottom:var(--s-2);">Name</label>
|
|
<input type="text" id="name" name="name" required autocomplete="name"
|
|
style="width:100%;padding:14px var(--s-4);border:1.5px solid var(--line);border-radius:var(--r-md);font-size:var(--t-base);color:var(--ink);background:var(--white);transition:border-color var(--d-base);">
|
|
</div>
|
|
|
|
<div>
|
|
<label for="email" style="display:block;font-size:var(--t-sm);font-weight:var(--w-semi);color:var(--ink);margin-bottom:var(--s-2);">Email</label>
|
|
<input type="email" id="email" name="email" required autocomplete="email"
|
|
style="width:100%;padding:14px var(--s-4);border:1.5px solid var(--line);border-radius:var(--r-md);font-size:var(--t-base);color:var(--ink);background:var(--white);transition:border-color var(--d-base);">
|
|
</div>
|
|
|
|
<div>
|
|
<label for="service" style="display:block;font-size:var(--t-sm);font-weight:var(--w-semi);color:var(--ink);margin-bottom:var(--s-2);">Interested In</label>
|
|
<select id="service" name="reason"
|
|
style="width:100%;padding:14px var(--s-4);border:1.5px solid var(--line);border-radius:var(--r-md);font-size:var(--t-base);color:var(--ink);background:var(--white);">
|
|
<option value="">Select a service...</option>
|
|
<option value="group-classes">Group Classes</option>
|
|
<option value="private-sessions">Private Sessions</option>
|
|
<option value="corporate-wellness">Corporate Wellness</option>
|
|
<option value="prenatal-yoga">Prenatal Yoga</option>
|
|
<option value="meditation-breathwork">Meditation & Breathwork</option>
|
|
<option value="online-yoga">Online / Virtual Yoga</option>
|
|
<option value="general">General Inquiry</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="message" style="display:block;font-size:var(--t-sm);font-weight:var(--w-semi);color:var(--ink);margin-bottom:var(--s-2);">Message (optional)</label>
|
|
<textarea id="message" name="message" rows="4"
|
|
style="width:100%;padding:14px var(--s-4);border:1.5px solid var(--line);border-radius:var(--r-md);font-size:var(--t-base);color:var(--ink);background:var(--white);resize:vertical;"></textarea>
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-primary" style="align-self:flex-start;">Send Message</button>
|
|
<p id="form-msg" style="display:none;font-size:var(--t-sm);color:var(--forest-deep);"></p>
|
|
</div>
|
|
</form>
|
|
<script>
|
|
document.getElementById('form_loaded_at').value = Date.now();
|
|
document.getElementById('contact-form').addEventListener('submit', async function(e) {
|
|
e.preventDefault();
|
|
const btn = this.querySelector('[type=submit]');
|
|
const msg = document.getElementById('form-msg');
|
|
btn.disabled = true;
|
|
btn.textContent = 'Sending...';
|
|
const data = Object.fromEntries(new FormData(this));
|
|
try {
|
|
const r = await fetch('/api/contact', { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(data) });
|
|
const j = await r.json();
|
|
msg.style.display = 'block';
|
|
if (j.ok) { msg.textContent = 'Message sent. We will be in touch soon.'; this.reset(); }
|
|
else { msg.textContent = j.error || 'Something went wrong. Please try again.'; msg.style.color = '#c0392b'; }
|
|
} catch { msg.style.display='block'; msg.textContent='Network error. Please try again.'; msg.style.color='#c0392b'; }
|
|
btn.disabled = false;
|
|
btn.textContent = 'Send Message';
|
|
});
|
|
</script>
|
|
</div>
|
|
|
|
<!-- Contact info -->
|
|
<div data-animate data-delay="100">
|
|
<div class="about-credentials">
|
|
<div class="about-credentials-row"><strong>Email</strong><!-- DRAFT NEEDED: hello@bigbreath.co --></div>
|
|
<div class="about-credentials-row"><strong>Phone</strong><!-- DRAFT NEEDED --></div>
|
|
<div class="about-credentials-row"><strong>Location</strong><!-- DRAFT NEEDED --></div>
|
|
<div class="about-credentials-row"><strong>Hours</strong><!-- DRAFT NEEDED --></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<footer class="bb-footer" role="contentinfo">
|
|
<div class="container">
|
|
<div class="footer-top">
|
|
<div class="footer-brand">
|
|
<div class="bb-logo-text">
|
|
<span class="bb-logo-name">Big Breath</span>
|
|
<span class="bb-logo-tagline">Yoga & Wellness</span>
|
|
</div>
|
|
<p class="footer-tagline"><!-- DRAFT NEEDED --></p>
|
|
</div>
|
|
<div>
|
|
<p class="footer-col-title">Services</p>
|
|
<ul class="footer-links">
|
|
<li><a href="/services/group-classes/">Group Classes</a></li>
|
|
<li><a href="/services/private-sessions/">Private Sessions</a></li>
|
|
<li><a href="/services/corporate-wellness/">Corporate Wellness</a></li>
|
|
<li><a href="/services/prenatal-yoga/">Prenatal Yoga</a></li>
|
|
<li><a href="/services/meditation-breathwork/">Meditation & Breathwork</a></li>
|
|
<li><a href="/services/online-yoga/">Online / Virtual Yoga</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<p class="footer-col-title">Studio</p>
|
|
<ul class="footer-links">
|
|
<li><a href="/about/">About</a></li>
|
|
<li><a href="/contact/">Contact</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<p class="footer-col-title">Legal</p>
|
|
<ul class="footer-links">
|
|
<li><a href="/privacy-policy/">Privacy Policy</a></li>
|
|
<li><a href="/terms-of-service/">Terms of Service</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="footer-bottom">
|
|
<p class="footer-copy">© 2025 Big Breath. All rights reserved.</p>
|
|
<nav class="footer-legal" aria-label="Legal links">
|
|
<a href="/privacy-policy/">Privacy</a>
|
|
<a href="/terms-of-service/">Terms</a>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="/assets/js/main.js" defer></script>
|
|
</body>
|
|
</html>
|