first commit

This commit is contained in:
Concept Agent
2026-05-19 20:57:09 +02:00
parent 8eb8ffaf1b
commit bc9c4e5dd2
60 changed files with 10269 additions and 0 deletions
+17
View File
@@ -0,0 +1,17 @@
---
deployment:
tasks:
- export DEPLOYPATH=/home/bigbreathco/public_html/
- /bin/cp -r src/assets "$DEPLOYPATH"
- /bin/cp -r src/about "$DEPLOYPATH"
- /bin/cp -r src/contact "$DEPLOYPATH"
- /bin/cp -r src/services "$DEPLOYPATH"
- /bin/cp -r src/privacy-policy "$DEPLOYPATH"
- /bin/cp -r src/terms-of-service "$DEPLOYPATH"
- /bin/cp -r src/api "$DEPLOYPATH"
- /bin/cp src/index.html "$DEPLOYPATH"
- /bin/cp src/404.html "$DEPLOYPATH"
- /bin/cp src/500.html "$DEPLOYPATH"
- /bin/cp src/robots.txt "$DEPLOYPATH"
- /bin/cp src/sitemap.xml "$DEPLOYPATH"
- /bin/cp src/llms.txt "$DEPLOYPATH"
+6
View File
@@ -0,0 +1,6 @@
.planning
.git
.gitignore
*.md
README*
node_modules
+19
View File
@@ -0,0 +1,19 @@
# Big Breath — environment variables
# Copy this file to .env and fill in real values.
# .env is excluded from Docker builds and git via .dockerignore / .gitignore.
# ── Contact form (Resend) ──────────────────────────────────────────────────
RESEND_API_KEY=re_xxxxxxxxxxxxxxxxxxxxxxxxxxxx
SEND_TO_EMAIL=hello@bigbreath.co
SEND_FROM_EMAIL=noreply@bigbreath.co
SEND_FROM_DOMAIN=bigbreath.co
# ── reCAPTCHA v3 ──────────────────────────────────────────────────────────
RECAPTCHA_SECRET_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxx
# ── Rate limiting ─────────────────────────────────────────────────────────
RATE_LIMIT_PER_IP_PER_10MIN=5
SCORE_PASS=0.7
SCORE_REVIEW=0.4
TIME_MIN_SECONDS=3
TRUST_PROXY=1
+75
View File
@@ -0,0 +1,75 @@
# Env
.env
*.env
# Node / build
node_modules/
dist/
build/
.next/
.nuxt/
.cache/
.parcel-cache/
.vite/
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# OS / editor
.DS_Store
Thumbs.db
.idea/
.vscode/
*.swp
*.swo
# Python
__pycache__/
*.pyc
.venv/
venv/
# Planning binary assets (kept locally, excluded from git)
.planning/Big Breath/
.planning/extracted-assets/
.planning/competitive/
.planning/presentation-deck/
.planning/visualconcepts/
.planning/concept-*.png
.planning/concept-*.jpg
.planning/zip-manifest-raw.txt
# Large binary file types anywhere
*.psd
*.ai
*.sketch
*.fig
*.indd
*.pptx
*.ppt
*.docx
*.doc
*.xlsx
*.xls
*.pdf
*.zip
*.tar
*.tar.gz
*.tgz
*.rar
*.7z
*.dmg
*.iso
# Video files (images are kept)
*.mp4
*.mov
*.avi
*.mkv
*.webm
*.wmv
*.flv
*.m4v
*.mpg
*.mpeg
+41
View File
@@ -0,0 +1,41 @@
# Big Breathe — Project Brief
**Domain:** bigbreathe.com
**Client:** Big Breathe Yoga Company
**Port (local dev):** 8010
**Brand color:** Green (#3A7D54 primary)
**Stack:** Static HTML + vanilla JS + PHP contact form — Arising Media standard stack
## Services (6)
1. Group Classes — /services/group-classes/
2. Private Sessions — /services/private-sessions/
3. Corporate Wellness — /services/corporate-wellness/
4. Prenatal Yoga — /services/prenatal-yoga/
5. Meditation & Breathwork — /services/meditation-breathwork/
6. Online / Virtual Yoga — /services/online-yoga/
## Pages complete (scaffold)
- index.html — home
- about/index.html
- services/index.html
- services/{6 services}/index.html
- contact/index.html
- privacy-policy/index.html
- terms-of-service/index.html
- 404.html / 500.html
## DRAFT NEEDED (everywhere marked <!-- DRAFT NEEDED -->)
All body copy, meta descriptions, OG descriptions, hero headlines, trust points,
why-cards, approach items, FAQ items, quote, instructor bio, credentials, taglines,
footer tagline, contact info. Do NOT fill in fabricated content — get copy from client.
## Structure mirrors
vibrantyoucounseling.com — same nginx/php-fpm/supervisord/Dockerfile pattern.
## Next steps
- [ ] Get copy from client for all DRAFT NEEDED slots
- [ ] Source instructor/studio photos → /assets/images/
- [ ] Create favicon SVG → /assets/svg/favicon.svg
- [ ] Set Coolify env vars: SEND_FROM_EMAIL, SEND_TO_EMAIL, RESEND_API_KEY
- [ ] DNS setup per SOP 09-domain-email-dns.md
- [ ] Playwright verification per SOP 10-testing-verification.md
+25
View File
@@ -0,0 +1,25 @@
# Design Tokens — Big Breathe
## Color Palette (Forest Green)
| Token | Value | Use |
|----------------|-----------|------------------------------|
| --forest | #3A7D54 | Primary brand green |
| --forest-deep | #275C3D | Hover states, accents |
| --forest-soft | #72AF87 | Muted / secondary green |
| --forest-pale | #B8D9C5 | Borders, decorative |
| --forest-mist | #E2F2E9 | Backgrounds, orbs |
| --ink | #1E2E28 | Primary text |
| --ink-soft | #4A5E56 | Body text |
| --ink-mute | #7A8880 | Captions, labels |
| --cream | #F9F7F4 | Hero / section backgrounds |
| --bone | #FBFAF7 | Page background |
| --footer-bg | #1E2E28 | Footer dark |
## Typography
- Display: Cormorant Garamond (Google Fonts)
- Body: Inter (Google Fonts)
- Scale: tokens.css --t-xs through --t-6xl
## CSS class prefix
bb- (vs. vy- in vibrantyoucounseling.com)
+201
View File
@@ -0,0 +1,201 @@
# Big Breath — Design System & Homepage Blueprint
Domain: bigbreathe.co
Client: Big Joe (Joseph Fauria)
Date: 2026-05-15
---
## Design Goal
This is not a website. It is a cinematic entry point into Big Joe's world. The visitor should feel something before they read anything. The experience mirrors what breathwork does: it slows you down, draws you inward, and delivers clarity. Every scroll reveals intention.
---
## Color System
### Base (Dark Foundation)
--bb-void: #060D1A /* near-black, deepest bg */
--bb-navy: #0B1428 /* primary background */
--bb-navy-mid: #0D1B3E /* cards, lifted surfaces */
--bb-navy-lift: #112244 /* hover states, borders */
### Energy (Electric Blue — the particle layer)
--bb-electric: #1B6FD8 /* primary accent, CTA bg */
--bb-bright: #4A9FE8 /* hover, active states */
--bb-ice: #6AB4F5 /* secondary text highlight */
--bb-mist: #A0C8FF /* soft glows, icon fills */
### Foreground
--bb-white: #FFFFFF /* primary text, wordmark */
--bb-white-70: rgba(255,255,255,0.70) /* body text on dark */
--bb-white-40: rgba(255,255,255,0.40) /* muted labels, captions */
--bb-white-10: rgba(255,255,255,0.08) /* subtle card borders */
### Utility
--bb-line: rgba(74,159,232,0.20) /* dividers, grid lines */
--bb-glow: rgba(27,111,216,0.35) /* particle/button glow */
---
## Typography
### Display (Cormorant Garamond — wispy, editorial, cursive feel)
- Hero heading: Cormorant Garamond, Italic, 700, clamp(3.5rem, 8vw, 7rem)
- Section heading: Cormorant Garamond, Italic, 600, clamp(2rem, 4vw, 3.5rem)
- Pull quote: Cormorant Garamond, Italic, 400, clamp(1.5rem, 3vw, 2.25rem)
### Body (Inter — clean contrast to the wispy display)
- Body: Inter, 400, 1rem, line-height 1.7
- Label/eyebrow: Inter, 500, 0.75rem, letter-spacing 0.15em, uppercase
- CTA/nav: Inter, 600, 0.875rem
### Pairing Rule
Every section: one Cormorant Garamond headline (italic, light) + Inter body. Never both at the same weight. The contrast is the design.
---
## Motion System
### Entry
- Page load: canvas particle system initializes at 0 opacity, fades in over 1.2s
- Hero wordmark: translates from Y+40px to Y:0, opacity 0→1, staggered per word, 800ms, ease-out-expo
- Hero subhead: 200ms delay after wordmark, same translate
- Particles respond to mouse position (subtle parallax, max 20px shift)
### Scroll Triggers (GSAP ScrollTrigger)
- Each section block fades in + rises 30px as it enters viewport
- Particle density decreases as user scrolls past hero (scrub: true)
- Stats counter: number increments when section enters view
- Logo bar: continuous horizontal scroll marquee, pauses on hover
### Performance Rules
- Particles: canvas-based (tsParticles or vanilla canvas), max 80 particles on mobile, 200 desktop
- All animations: respect prefers-reduced-motion (disable translate/particles, keep fades)
- No video autoplay — use poster frames + play-on-click
---
## Homepage User Flow
### 1. HERO — "Take a Big Breath"
Full viewport. Navy void background. Particle system active (blue bokeh matching logo).
Layout:
- Center-anchored wordmark rises on load: "Take a Big Breath" in Cormorant Garamond Italic
- Subhead: "Breathwork for those who demand more from life." (Inter, white-70)
- Two CTAs: [Book a Session] (electric blue filled) + [Watch the Story] (ghost/outline)
- Scroll indicator: animated breath-pulse dot at bottom center
Goal: Stop the scroll. Make them feel the room shift.
### 2. SOCIAL PROOF BAR — Partners
Full-width marquee. White logos at 60% opacity on dark navy strip.
NFL | NFLPA | Olympics | UCLA Bruins | Airbnb | Pepsi | Lincoln | GMC | Remedy Place | Kachava | Hoag
Eyebrow label: "TRUSTED BY" in Inter 500 uppercase tracking.
No heading. The logos speak.
### 3. WHAT IS BIG BREATH — The Philosophy
Two-column. Left: large Cormorant Garamond pull quote. Right: 3-paragraph body copy.
Pull quote (left): "Between work and life, most people's nervous systems are on the fritz. Breath is the fastest way back."
Right column body:
- What breathwork does scientifically (cortisol, focus, recovery)
- Why Big Breath is different: former NFL athlete, not a wellness influencer
- Who it's for: athletes, executives, teams, anyone seeking edge
Subtle animated line separator between columns (draws in on scroll).
### 4. MEET BIG JOE — The Human
Full-bleed section. Dark navy. Left: large portrait photo (one of the headshots from .planning). Right: his story.
Headline: "Big Joe" in Cormorant Garamond Italic, massive.
Eyebrow: "FOUNDER & GUIDE"
Copy beats:
1. NFL career → ankle injury → rock bottom
2. 2018: began breathwork daily. Changed everything.
3. 7 years, multiple certifications, 15,000+ people guided
4. 143K followers — built through results, not marketing
5. Countries: 15+ across every continent
Stat row (animated counters):
15,000+ People Guided | 15+ Countries | 7 Years of Practice | 143K Community
### 5. THE EXPERIENCE — Services
Three cards on dark navy, each with electric blue top accent line.
Card 1: Breathwork Sessions
"30, 60, or 120-minute immersive breath journeys. Group or curated."
→ [Explore Sessions]
Card 2: Corporate Wellness
"Built for teams. Backed by science. A win for your organization."
→ [Corporate Programs]
Card 3: Private 1-on-1
"Intentional, breath-led coaching for high performers."
→ [Book Private Session]
Below the cards: two more (Keynotes | Retreats & Live Experiences) as secondary text links.
### 6. GLOBAL REACH — Impact
Dark section. Particle background at low opacity.
Headline (Cormorant Garamond): "Every continent. Every level of performance."
World map graphic (SVG, dots on guided countries) or simple country name list.
Countries: USA, Mexico, Canada, Netherlands, France, Indonesia, Costa Rica, Saudi Arabia, UAE, Colombia, Greece, Japan, Sweden, Turkey, Saint Barthélemy
### 7. TESTIMONIALS
Three-column card grid. Cards: navy-lift bg, blue left-border accent.
Quote text in Cormorant Garamond Italic. Attribution in Inter.
"As soon as I walked into the room, I felt protected and safe." — Brian Godfrey, Los Angeles
"I didn't know the power of my breath. The experience was life-changing." — Maria Muleta, Colombia
"Big Breath transformed our team." — Mark Thompson
### 8. CTA CLOSE — Book the Experience
Full-bleed. Electric blue background (the only section not on navy).
Headline: "Ready to take a Big Breath?" — Cormorant Garamond, white.
Subhead: "Sessions available in-person and worldwide." — Inter.
Button: [Book a Session] white on blue | [Email Us] ghost
Contact: Hello@bigbreath.co
---
## Inner Page Pattern
All inner pages:
- Compact hero: navy bg, page title in Cormorant Garamond Italic, breadcrumb in Inter
- Content blocks: same token set, white-70 body on navy
- CTA strip at bottom of every page (book / contact)
---
## Service Page Structure (each)
1. Hero: service name + one-sentence promise
2. What it is: 2-3 paragraphs
3. Session formats (30/60/120 min where applicable)
4. Who it's for
5. What to expect
6. 1 testimonial
7. CTA
---
## Files to Build (in order)
1. tokens.css — color + type system (done)
2. index.html — homepage
3. about.html — Big Joe story (expanded)
4. services/index.html — services overview
5. services/breathwork-sessions/index.html
6. services/corporate-wellness/index.html
7. services/private-sessions/index.html
8. services/keynotes/index.html
9. services/retreats/index.html
10. contact/index.html
+77
View File
@@ -0,0 +1,77 @@
# Big Breath — Execution Phases
Last screenshot: concept-v3.png (black base, blue accent, Joe in correct position)
Status: Wireframe concept approved in direction, not yet production-ready.
---
## Phase 1 — Foundation & Structure (next session)
Goal: Homepage HTML complete, all sections present, correct order, no placeholders.
Tasks:
1. Extract partner logos from pitch deck PDF using pdfimages → save to src/assets/images/logos/
2. Convert HEIC headshots to JPG using heif-convert → src/assets/images/headshots/
3. Copy Big Joe JPGs to src/assets/images/joe/
4. Rebuild index.html from scratch using concept.html as reference — clean semantic HTML, no inline styles
5. Add the 4 missing sections:
- Section A: "The Science" (stress, cortisol, HRV — cite HBR per Jermaine's note)
- Section B: "In the Room" (group photo gallery — horizontal scroll)
- Section C: "Upcoming Sessions" (event cards)
- Section D: "The Practice, Anywhere" (app/digital membership)
6. Correct section order:
Hero → USP Bridge → Philosophy → The Science → Meet Big Joe → In the Room → Services → Logo Bar → Testimonials → Global Reach → Upcoming Sessions → CTA Close
Agent: AC-Build-AGENT (Sonnet)
Verify: Playwright full-page screenshot after each section added
---
## Phase 2 — Motion & Parallax (after Phase 1 approved)
Goal: The page moves. Visitor feels breath in the scroll.
Tasks:
1. Wire GSAP ScrollTrigger to all section reveals (already in concept, needs production port)
2. Ghost word parallax — "BREATH" at 0.1x scroll rate spanning hero → philosophy
3. Joe photo card rises at 1.15x scroll rate (comes toward viewer)
4. Particle system: grid-distributed, zoom/disperse on scroll (done in concept, port to production)
5. Background gradient shifts blue glow position as user scrolls (GSAP scrub on radial-gradient position via CSS custom property)
6. Stat counters animate on enter (15K+, 143K, 15+)
7. Logo marquee — Swiper.js autoplay infinite, pause on hover
8. Nav: transparent on hero, frosted glass (#080808 at 85% opacity + backdrop-filter) when scrolled
Agent: AC-Build-AGENT (Sonnet)
Verify: Manual scroll test + Playwright scroll-to screenshots at 25%, 50%, 75%, 100%
---
## Phase 3 — Assets, Polish & Pre-Launch (after Phase 2 approved)
Goal: Real photos, real logos, performance optimized, ready for Docker deploy.
Tasks:
1. Replace all placeholder copy with approved copy from pitch deck PDFs
2. Place real Joe headshots in Meet Big Joe section (clothed shots only — Jermaine's note)
3. Place real group session photos in "In the Room" gallery
4. Wire partner logos (PNG extracted from PDF) into logo marquee
5. Add contact form to /contact/ page (POST to src/api/contact.php)
6. SEO: meta descriptions, OG tags, canonical URLs all set to bigbreathe.co
7. Performance: compress all images (convert to WebP), defer non-critical JS
8. Deploy via Docker + nginx (Dockerfile already in place)
9. Run verify-protection.sh audit (per MEMORY: am-webdesign-sops/tools/verify-protection.sh)
10. Test on mobile (375px, 390px, 430px viewports)
Agent: AC-Build-AGENT (Sonnet) + AC-QC-AGENT (Haiku verify)
Verify: Lighthouse score >90 performance, all links resolve, mobile screenshots pass
---
## Agent Dispatch Plan (Phase 1)
Spawn in parallel after compact:
- Agent A: pdfimages extraction + heif-convert batch (Haiku)
- Agent B: index.html rebuild sections 1-4 (Sonnet)
- Agent C: index.html rebuild sections 5-8 (Sonnet)
Gate: Both B and C screenshot via Playwright before proceeding to Phase 2.
+74
View File
@@ -0,0 +1,74 @@
# Big Breath — Parallax Architecture Plan
## The Core Concept
As you scroll, you are moving THROUGH breath. Large typography persists across sections at a slower scroll rate than the content. Images overlap from below. The page breathes — it expands and contracts as you move through it.
---
## 5 Parallax Layers (z-axis stack, back to front)
### Layer 0 — Atmospheric (slowest, fixed-ish)
Large ghost word "BREATH" in Cormorant Garamond Italic, ~30vw tall, opacity 3-5%.
Scrolls at 0.1x rate using GSAP ScrollTrigger scrub.
Spans from hero through philosophy section — user sees it slowly moving behind everything.
```js
gsap.to('.ghost-word', { y: '-30%', ease: 'none', scrollTrigger: { scrub: 1, start: 'top top', end: 'bottom top' }});
```
### Layer 1 — Background gradient shift
Body background radial gradient center shifts horizontally as user scrolls.
Creates feeling of moving through space.
Electric blue glow tracks toward center as you reach the "Meet Big Joe" section.
### Layer 2 — Photo cards (scroll faster than content)
Big Joe headshot card scrolls at 1.15x speed — appears to "rise" as content catches up.
Implemented with GSAP `scrollTrigger: { scrub: true }` on `translateY(-80px)` to `translateY(0)`.
Creates the illusion the photo is coming toward you.
### Layer 3 — Content blocks (normal speed, 1x)
All section text, cards, and UI at normal scroll rate.
### Layer 4 — Foreground particles (fastest, 1.05x)
Particle canvas scrubs slightly faster — reinforces depth.
---
## 4 Missing Sections to Add
### Section A — "The Science" (after Philosophy)
Headline: "Why breath works — the research"
3 columns: Stress Reduction | Focus & Cognition | Recovery
Reference: Harvard Business Review citation (Jermaine's note)
Visual: animated line graph or pulse wave SVG
### Section B — "In the Room" (after Meet Big Joe)
Full-bleed group photo gallery — horizontal scroll or masonry
Shows real sessions: corporates, athletes, retreats
Caption: location + context per photo
Source: Group Photos + 2026 Additions from .planning
### Section C — "Upcoming Sessions & Events"
Dark card grid — event name, location, date, "Reserve Spot" CTA
If no live data: placeholder cards styled correctly
### Section D — "The Practice, Anywhere" (App / Digital)
App membership mention
Simple: headline + subhead + single CTA
Positions Big Breath beyond in-person
---
## Logo Block — Correct Position
Move to: AFTER testimonials, BEFORE final CTA close.
Framing: "Brands that trust the practice" — less corporate, more community signal.
Treatment: actual logos (extract from PDF with pdfimages), not text.
---
## Execution Order (after /compact)
1. Extract partner logos: pdfimages on pitch deck PDF
2. Convert HEIC headshots to JPG for group photo section
3. Add ghost-word parallax layer (Layer 0)
4. Add 4 missing sections (A, B, C, D)
5. Move logo block to post-testimonials
6. Wire GSAP scrub to photo cards
+28
View File
@@ -0,0 +1,28 @@
import asyncio
from playwright.async_api import async_playwright
sites = [
("othership", "https://www.theothership.com"),
("wim-hof", "https://www.wimhofmethod.com"),
("remedy-place", "https://remedyplace.com"),
]
async def capture():
async with async_playwright() as p:
browser = await p.firefox.launch()
for name, url in sites:
try:
page = await browser.new_page(viewport={"width": 1440, "height": 900})
await page.goto(url, timeout=20000)
await page.wait_for_timeout(3000)
await page.screenshot(
path=f"/home/sirdrez/arisingmedia-websites/bigbreathe.com/.planning/competitive/{name}.png",
full_page=False
)
print(f"Captured: {name}")
await page.close()
except Exception as e:
print(f"Failed {name}: {e}")
await browser.close()
asyncio.run(capture())
+143
View File
@@ -0,0 +1,143 @@
# Big Breath — Client Files Index
Source: 15 zip files (`Big Breath-20260515T184538Z-3-001` through `-018`, missing parts 002004)
Extracted to: `.planning/Big Breath/`
Indexed: 2026-05-15
Total files: 177 | Total compressed size: ~29.4 GB
---
## Logos (8 files)
Big_Breath_Logo_A.JPG
Big_Breath_Logo_AA.JPG
Big_Breath_Logo_B.JPG
Big_Breath_Logo_BB.JPG
Big_Breath_Logo_C.JPG
Big_Breath_Logo_CC.JPG
Big_Breath_Logo_D.JPG
Big_Breath_Logo_DD.JPG
Big_Breath_Logo_E.JPG
Big_Breath_Logo_EE.JPG
---
## Brand / Mockup Assets (9 files)
Lotus 3 Symbol inside circle.png
Lotus 2.png
Lotus 1.png
Yellow gold.png
Gold.png
Bracket photo.png
Big_Breath_Presntation-13.JPG
Big_Breath_Presntation-13(1).JPG
Big_Breath_Presntation-14.JPG
Big_Breath_Presntation-14(1).JPG
---
## Documents (6 files)
Links and Notes.docx
Big Breath Corporate Pitch Deck v4.pdf
big breath - Final.pdf
Big Breath_Presntation_Mockup_2.pdf
Big Breath_Presntation_Mockup_1.pdf
big breath - Draft with notes.pptx
---
## Photos — Headshots (45 files)
DSCF0876.jpg, DSCF0881.jpg, DSCF0892.jpg, DSCF0895.jpg, DSCF0898.jpg, DSCF0900.jpg
IMG_4853.heic, IMG_4854.heic, IMG_4859.heic, IMG_4862.heic, IMG_4862-2.heic
IMG_4863.heic, IMG_4865.heic, IMG_4869.heic, IMG_4878.heic, IMG_4883.heic
IMG_4888-2.heic, IMG_4896.heic, IMG_4897.heic, IMG_4898.heic, IMG_4908.heic, IMG_4910.heic
IMG_1352.JPG
CG112123-434.jpg, CG112123-442.jpg, CG112123-449.jpg, CG112123-453.jpg
CG112123-491.jpg, CG112123-494.jpg
DSC04034 kopie.jpg, DSC04047 kopie.jpg, DSC04072 kopie.jpg
---
## Photos — Group (20 files)
DSC08333.JPG, DSC08340.JPG, DSC08560.JPG, DSC08573.JPG, DSC08682.JPG
DSC09249.JPG, DSC09607.JPG
IMG_4461.JPG, IMG_4461(1).JPG, IMG_4462.JPG, IMG_4463.JPG, IMG_4466.JPG
IMG_4476.JPG, IMG_4877.JPG, IMG_4878.JPG, IMG_4882.JPG
dji_20240721100351_0001_d.HEIC
E36BBE49-07A8-4026-B05A-7B0FE5CE5264.JPG
New New 2026/DSC00012.JPG
New New 2026/IMG_6477.JPG
---
## Photos — Big Joe (47 files)
DSCF0705.jpg, DSCF0706.jpg, DSCF0718.jpg, DSCF0795.jpg (+ ~43 more DSCF series)
---
## Photos — One on One (3 files)
DSC08462.JPG
DSC08471.JPG
owncamerasday2-11.JPG
---
## Photos — 2026 Additions (63 files)
IMG_6748.JPG, IMG_3201.JPG, IMG_4878.JPG, DSC00151.JPG (+ ~59 more)
Includes: IMG_0454.JPG
---
## Videos — Drone Footage (9 files)
DJI_20240430191237_0053_D.MP4
DJI_20240430191629_0055_D.MP4
DJI_20240506234624_0089_D.MP4
DJI_20240602081138_0094_D.MP4
DJI_20240602081245_0095_D.MP4
DJI_20240828122837_0157_D.MP4
DJI_20250124175913_0284_D.MP4
DJI_20250124180125_0286_D.MP4
DJI_20250124180221_0287_D.MP4
---
## Videos — YouTube / Promo (2 files)
BigBreath_2.mp4
Why breathwork.mp4
---
## Videos — 2025 Pendry Hotel Event (2 files)
Big Joe x Soulstice Pendry 0625 iPhone.mp4
Big Joe x Soulstice Pendry 0625 V1.mp4
---
## Videos — Misc (2 files)
IMG_7313.MOV
IMG_7315.JPG
---
## Testimonials (23 files)
IMG_1122.MOV, IMG_1123.MOV, IMG_1183.MOV, IMG_2796.MOV (+ ~19 more .MOV files)
---
## Notes
- Duplicates detected: IMG_4878.JPG (3 zips), IMG_4877.JPG (3 zips), IMG_4882.JPG (2 zips), DSC00012.JPG (2 zips), IMG_4466.JPG (2 zips). The `-o` flag was used during extraction so last-write wins.
- HEIC files require conversion before web use.
- Parts 002, 003, 004 were not present in the delivery — confirm with client if missing.
File diff suppressed because it is too large Load Diff
File diff suppressed because it is too large Load Diff
File diff suppressed because it is too large Load Diff
+922
View File
@@ -0,0 +1,922 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Big Breath — Design Concept</title>
<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=Cormorant+Garamond:ital,wght@0,400;0,600;1,400;1,600;1,700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/lenis@1.1.14/dist/lenis.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
/* Black base — two dark tones */
--bb-void: #080808;
--bb-navy: #0E0E0E;
--bb-navy-mid: #161616;
--bb-navy-lift: #1E1E1E;
/* Stone — warm dark neutral (not blue) */
--bb-stone: #1A1714;
--bb-stone-lift: #252118;
/* Deep royal blue — ACCENT ONLY */
--bb-electric: #1236CC;
--bb-bright: #1E50E8;
--bb-ice: #2E6AFF;
--bb-mist: #5080FF;
--bb-white: #FFFFFF;
--bb-white-70: rgba(255,255,255,0.70);
--bb-white-40: rgba(255,255,255,0.40);
--bb-white-10: rgba(255,255,255,0.06);
--bb-line: rgba(255,255,255,0.08);
--bb-glow: rgba(18,54,204,0.40);
--font-display: 'Cormorant Garamond', Georgia, serif;
--font-body: 'Inter', -apple-system, sans-serif;
}
html { scroll-behavior: smooth; }
body { background: var(--bb-navy); color: var(--bb-white); font-family: var(--font-body); }
/* ─── NAV ─────────────────────────────────────────── */
.nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 clamp(24px, 5vw, 64px);
height: 72px;
background: rgba(6,13,26,0);
backdrop-filter: blur(0px);
border-bottom: 1px solid rgba(74,159,232,0);
transition: background 0.4s, backdrop-filter 0.4s, border-color 0.4s;
}
.nav.scrolled {
background: rgba(6,13,26,0.85);
backdrop-filter: blur(20px);
border-color: var(--bb-line);
}
.nav-logo {
font-family: var(--font-display);
font-style: italic;
font-weight: 700;
font-size: 1.5rem;
color: var(--bb-white);
text-decoration: none;
letter-spacing: -0.01em;
}
.nav-logo span { color: var(--bb-ice); }
.nav-links {
display: flex;
align-items: center;
gap: 36px;
list-style: none;
}
.nav-links a {
font-size: 0.8rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--bb-white-70);
text-decoration: none;
transition: color 0.2s;
}
.nav-links a:hover { color: var(--bb-white); }
.nav-cta {
font-family: var(--font-body);
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.06em;
padding: 10px 24px;
background: var(--bb-electric);
color: var(--bb-white);
border: none;
border-radius: 4px;
cursor: pointer;
transition: background 0.2s, box-shadow 0.2s;
}
.nav-cta:hover { background: var(--bb-bright); box-shadow: 0 0 24px var(--bb-glow); }
/* ─── CANVAS HERO ─────────────────────────────────── */
.hero {
position: relative;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
background:
radial-gradient(ellipse 50% 40% at 15% 60%, rgba(18,54,204,0.22) 0%, transparent 65%),
#080808;
overflow: hidden;
padding: 0 24px;
}
body {
background:
radial-gradient(ellipse 100% 50% at 50% 0%, rgba(27,111,216,0.07) 0%, transparent 60%),
#020508;
}
canvas#particles {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
/* large ghost word — bleeds behind content, overlapping z-index layer */
.hero-ghost {
position: absolute;
bottom: -2vw;
left: 50%;
transform: translateX(-50%);
font-family: var(--font-display);
font-style: italic;
font-weight: 700;
font-size: clamp(8rem, 22vw, 20rem);
color: rgba(27,111,216,0.04);
white-space: nowrap;
pointer-events: none;
z-index: 1;
letter-spacing: -0.03em;
line-height: 1;
}
/* overlap bridge — pulls next section over the hero */
.overlap-bridge {
position: relative;
z-index: 3;
margin-top: -80px;
background: linear-gradient(to bottom, transparent, var(--bb-navy) 80px);
padding-top: 80px;
}
.hero-inner { position: relative; z-index: 2; max-width: 900px; }
.hero-eyebrow {
font-family: var(--font-body);
font-size: 0.7rem;
font-weight: 400;
letter-spacing: 0.22em;
color: var(--bb-ice);
margin-bottom: 28px;
opacity: 0;
transform: translateY(16px);
animation: rise 1.2s cubic-bezier(0.16,1,0.3,1) 0.3s forwards;
}
.hero-heading {
font-family: var(--font-display);
font-style: italic;
font-weight: 300;
font-size: clamp(3.25rem, 8vw, 7rem);
line-height: 1.0;
color: var(--bb-white);
margin-bottom: 28px;
opacity: 0;
transform: translateY(40px);
animation: rise 1.6s cubic-bezier(0.16,1,0.3,1) 0.55s forwards;
}
.hero-sub {
font-family: var(--font-display);
font-style: italic;
font-size: clamp(1.1rem, 2vw, 1.35rem);
font-weight: 400;
color: var(--bb-white-70);
max-width: 560px;
margin: 0 auto 44px;
line-height: 1.8;
opacity: 0;
transform: translateY(20px);
animation: rise 1.4s cubic-bezier(0.16,1,0.3,1) 0.9s forwards;
}
.hero-ctas {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
opacity: 0;
transform: translateY(16px);
animation: rise 1.2s cubic-bezier(0.16,1,0.3,1) 1.2s forwards;
}
.btn-primary {
background: var(--bb-electric);
color: var(--bb-white);
font-family: var(--font-body);
font-size: 0.875rem;
font-weight: 600;
padding: 14px 32px;
border: none;
border-radius: 4px;
cursor: pointer;
letter-spacing: 0.04em;
transition: background 0.2s, box-shadow 0.2s;
}
.btn-primary:hover { background: var(--bb-bright); box-shadow: 0 0 32px var(--bb-glow); }
.btn-ghost {
background: transparent;
color: var(--bb-white-70);
font-family: var(--font-body);
font-size: 0.875rem;
font-weight: 500;
padding: 14px 32px;
border: 1px solid var(--bb-line);
border-radius: 4px;
cursor: pointer;
letter-spacing: 0.04em;
transition: border-color 0.2s, color 0.2s;
}
.btn-ghost:hover { border-color: var(--bb-ice); color: var(--bb-white); }
.scroll-pulse {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--bb-ice);
animation: pulse 2s ease-in-out infinite;
}
@keyframes rise {
to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
0%, 100% { opacity: 0.3; transform: translateX(-50%) scale(1); }
50% { opacity: 1; transform: translateX(-50%) scale(1.6); }
}
/* ─── LOGO BAR ────────────────────────────────────── */
.logo-bar {
background: var(--bb-void);
border-top: 1px solid var(--bb-line);
border-bottom: 1px solid var(--bb-line);
padding: 28px 0;
overflow: hidden;
}
.logo-bar-label {
text-align: center;
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.2em;
color: var(--bb-white-40);
text-transform: uppercase;
margin-bottom: 20px;
}
.logo-track {
display: flex;
gap: 60px;
animation: marquee 28s linear infinite;
width: max-content;
}
.logo-track:hover { animation-play-state: paused; }
.logo-item {
font-family: var(--font-body);
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--bb-white-40);
white-space: nowrap;
transition: color 0.2s;
}
.logo-item:hover { color: var(--bb-white-70); }
@keyframes marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* ─── SECTION BASE ────────────────────────────────── */
section {
padding: 120px clamp(24px, 8vw, 120px);
max-width: 1280px;
margin: 0 auto;
}
.section-full {
max-width: none;
margin: 0;
}
.eyebrow {
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--bb-ice);
margin-bottom: 20px;
display: block;
}
.section-heading {
font-family: var(--font-display);
font-style: italic;
font-weight: 600;
font-size: clamp(2rem, 4vw, 3.5rem);
line-height: 1.1;
color: var(--bb-white);
margin-bottom: 24px;
}
.section-body {
font-size: 1.05rem;
line-height: 1.8;
color: var(--bb-white-70);
max-width: 580px;
}
.divider {
width: 100%;
height: 1px;
background: var(--bb-line);
margin: 0;
}
/* ─── PHILOSOPHY ──────────────────────────────────── */
.philosophy { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.philosophy-quote {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: clamp(1.75rem, 3vw, 2.5rem);
line-height: 1.3;
color: var(--bb-white);
border-left: 2px solid var(--bb-electric);
padding-left: 32px;
}
.philosophy-body p { margin-bottom: 20px; font-size: 1rem; line-height: 1.8; color: var(--bb-white-70); }
/* ─── BIG JOE ─────────────────────────────────────── */
.joe-section {
background: var(--bb-void);
padding: 0;
max-width: none;
}
.joe-inner {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 700px;
border-radius: 32px;
overflow: hidden;
margin: 0 clamp(24px, 4vw, 60px);
box-shadow: 0 40px 120px rgba(0,0,0,0.7), 0 0 0 1px var(--bb-line);
}
.joe-photo {
background: linear-gradient(135deg, var(--bb-navy-lift) 0%, var(--bb-void) 100%);
display: flex;
align-items: center;
justify-content: center;
min-height: 600px;
position: relative;
overflow: hidden;
}
.joe-photo-placeholder {
font-family: var(--font-display);
font-style: italic;
font-size: 8rem;
color: var(--bb-navy-lift);
line-height: 1;
user-select: none;
}
.joe-photo::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to right, transparent 60%, var(--bb-void));
}
.joe-content {
padding: 80px 64px;
display: flex;
flex-direction: column;
justify-content: center;
}
.joe-name {
font-family: var(--font-display);
font-style: italic;
font-weight: 700;
font-size: clamp(4rem, 7vw, 6.5rem);
line-height: 0.9;
color: var(--bb-white);
margin-bottom: 8px;
}
.joe-title {
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--bb-ice);
margin-bottom: 32px;
}
.joe-story { color: var(--bb-white-70); line-height: 1.8; font-size: 1rem; margin-bottom: 40px; }
.joe-story p { margin-bottom: 16px; }
.stats-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
border-top: 1px solid var(--bb-line);
padding-top: 32px;
}
.stat-item {}
.stat-num {
font-family: var(--font-display);
font-style: italic;
font-size: 2rem;
font-weight: 700;
color: var(--bb-white);
display: block;
}
.stat-label {
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--bb-white-40);
margin-top: 4px;
display: block;
}
/* ─── SERVICES ────────────────────────────────────── */
.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 60px;
}
.service-card {
background: var(--bb-navy-mid);
padding: 48px 36px;
border-radius: 24px;
border: 1px solid var(--bb-line);
transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
cursor: pointer;
box-shadow: 0 8px 40px rgba(0,0,0,0.4);
}
.service-card:hover {
background: var(--bb-navy-lift);
transform: translateY(-4px);
box-shadow: 0 20px 60px rgba(27,111,216,0.15);
}
.service-card-accent {
width: 32px;
height: 2px;
background: var(--bb-electric);
margin-bottom: 28px;
transition: width 0.3s;
}
.service-card:hover .service-card-accent { width: 64px; }
.service-card-name {
font-family: var(--font-display);
font-style: italic;
font-size: 1.6rem;
font-weight: 600;
color: var(--bb-white);
margin-bottom: 12px;
line-height: 1.2;
}
.service-card-desc {
font-size: 0.9rem;
color: var(--bb-white-70);
line-height: 1.7;
margin-bottom: 28px;
}
.service-link {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--bb-ice);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
transition: gap 0.2s, color 0.2s;
}
.service-link:hover { color: var(--bb-bright); gap: 14px; }
.service-link::after { content: '→'; }
/* ─── TESTIMONIALS ────────────────────────────────── */
.testimonials-bg { background: var(--bb-void); }
.testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 60px;
}
.testimonial-card {
background: var(--bb-navy-mid);
border: 1px solid var(--bb-line);
border-left: 3px solid var(--bb-electric);
border-radius: 20px;
padding: 36px 32px;
box-shadow: 0 8px 32px rgba(0,0,0,0.5);
transition: transform 0.3s, box-shadow 0.3s;
}
.testimonial-card:hover {
transform: translateY(-3px);
box-shadow: 0 16px 48px rgba(27,111,216,0.12);
}
.testimonial-quote {
font-family: var(--font-display);
font-style: italic;
font-size: 1.2rem;
line-height: 1.6;
color: var(--bb-white);
margin-bottom: 24px;
}
.testimonial-attr {
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.08em;
color: var(--bb-white-40);
text-transform: uppercase;
}
/* ─── CTA CLOSE ───────────────────────────────────── */
.cta-close {
background: var(--bb-electric);
text-align: center;
padding: 120px clamp(24px, 8vw, 120px);
max-width: none;
}
.cta-close .section-heading { color: var(--bb-white); max-width: 600px; margin: 0 auto 16px; }
.cta-close .section-body { color: rgba(255,255,255,0.75); margin: 0 auto 40px; text-align: center; }
.cta-close .btn-primary {
background: var(--bb-white);
color: var(--bb-electric);
}
.cta-close .btn-primary:hover { background: var(--bb-mist); }
.cta-close .btn-ghost {
border-color: rgba(255,255,255,0.4);
color: var(--bb-white);
}
/* ─── Z-DEPTH FLOAT ──────────────────────────────── */
/* floating image card that overlaps between sections */
.float-card {
position: relative;
z-index: 10;
margin: -80px auto 0;
max-width: 520px;
border-radius: 28px;
overflow: hidden;
box-shadow: 0 60px 140px rgba(0,0,0,0.8), 0 0 0 1px var(--bb-line);
transform: perspective(1000px) rotateX(2deg);
transition: transform 0.6s cubic-bezier(0.16,1,0.3,1), box-shadow 0.6s;
}
.float-card:hover {
transform: perspective(1000px) rotateX(0deg) translateY(-8px);
box-shadow: 0 80px 160px rgba(27,111,216,0.25), 0 0 0 1px rgba(74,159,232,0.3);
}
.float-card img { width: 100%; display: block; }
.float-card-caption {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: 32px 28px 24px;
background: linear-gradient(to top, rgba(2,5,8,0.95), transparent);
font-family: var(--font-display);
font-style: italic;
font-size: 1.1rem;
color: var(--bb-white-70);
}
/* ─── RESPONSIVE ──────────────────────────────────── */
@media (max-width: 900px) {
.philosophy { grid-template-columns: 1fr; gap: 40px; }
.joe-inner { grid-template-columns: 1fr; }
.joe-photo { min-height: 320px; }
.joe-photo::after { background: linear-gradient(to top, var(--bb-void), transparent); }
.services-grid { grid-template-columns: 1fr; }
.testimonials-grid { grid-template-columns: 1fr; }
.stats-row { grid-template-columns: repeat(2, 1fr); }
}
</style>
</head>
<body>
<!-- NAV -->
<nav class="nav" id="nav">
<a href="#" class="nav-logo">Big<span>Breath</span></a>
<ul class="nav-links">
<li><a href="#">About</a></li>
<li><a href="#">Sessions</a></li>
<li><a href="#">Corporate</a></li>
<li><a href="#">Retreats</a></li>
<li><a href="#">Big Joe</a></li>
</ul>
<button class="nav-cta">Book a Session</button>
</nav>
<!-- HERO -->
<div class="hero">
<canvas id="particles"></canvas>
<div class="hero-inner">
<span class="hero-eyebrow">Breathwork · Wellness · Performance</span>
<h1 class="hero-heading">Take a Big Breath</h1>
<p class="hero-sub">Breathwork for those who demand more from life. Led by former NFL athlete Big Joe — in rooms, boardrooms, and arenas worldwide.</p>
<div class="hero-ctas">
<button class="btn-primary">Book a Session</button>
<button class="btn-ghost">Meet Big Joe</button>
</div>
</div>
<div class="hero-ghost">Breath</div>
<div class="scroll-pulse"></div>
</div>
<!-- USP BRIDGE — overlaps hero -->
<div class="overlap-bridge">
<div style="max-width:900px;margin:0 auto;padding:0 clamp(24px,5vw,80px) 80px;text-align:center;">
<p style="font-family:var(--font-display);font-style:italic;font-size:clamp(1.4rem,2.5vw,2rem);color:var(--bb-white-70);line-height:1.6;font-weight:300;">
The only breathwork guide who has performed under NFL pressure — and built a practice from what he found on the other side.
</p>
<div style="display:flex;justify-content:center;gap:48px;margin-top:40px;flex-wrap:wrap;">
<div style="text-align:center;">
<span style="font-family:var(--font-display);font-style:italic;font-size:2.5rem;font-weight:600;color:var(--bb-white);display:block;">15,000+</span>
<span style="font-size:0.7rem;letter-spacing:0.16em;color:var(--bb-white-40);">People Guided</span>
</div>
<div style="text-align:center;">
<span style="font-family:var(--font-display);font-style:italic;font-size:2.5rem;font-weight:600;color:var(--bb-white);display:block;">15+</span>
<span style="font-size:0.7rem;letter-spacing:0.16em;color:var(--bb-white-40);">Countries</span>
</div>
<div style="text-align:center;">
<span style="font-family:var(--font-display);font-style:italic;font-size:2.5rem;font-weight:600;color:var(--bb-white);display:block;">143K</span>
<span style="font-size:0.7rem;letter-spacing:0.16em;color:var(--bb-white-40);">Community</span>
</div>
</div>
</div>
</div>
<!-- PHILOSOPHY -->
<section>
<div class="philosophy">
<div class="philosophy-quote">
"Between work and life, most people's nervous systems are on the fritz. Breath is the fastest way back."
</div>
<div class="philosophy-body">
<span class="eyebrow">What is Big Breath</span>
<p>Most wellness programs treat the symptoms. Big Breath goes to the source — your nervous system. Through intentional breathing, cortisol drops, focus sharpens, and your body stops running on emergency mode.</p>
<p>This is not a yoga studio. This is not a meditation app. Big Breath is a live, guided experience led by someone who has performed at the highest level under pressure — and found breath on the other side of it.</p>
<p>Whether you're an athlete in recovery, an executive preparing to lead, or a team that needs to realign — the practice is the same. The breath is the tool.</p>
</div>
</div>
</section>
<div class="divider"></div>
<!-- MEET BIG JOE -->
<section class="joe-section section-full">
<div class="joe-inner">
<div class="joe-photo">
<img src="Big Breath/BB Photos-Videos/Big Joe/Big Joe-1.jpg"
alt="Big Joe"
style="width:100%;height:100%;object-fit:cover;display:block;"
onerror="this.style.display='none'">
</div>
<div class="joe-content">
<span class="joe-title">Founder &amp; Guide</span>
<h2 class="joe-name">Big Joe</h2>
<div class="joe-story">
<p>Joseph Fauria played four years in the NFL. Then an ankle injury ended it — and started everything else.</p>
<p>In 2018 he found breathwork. Not as a wellness trend, but as survival. What he discovered changed his life — and he has spent seven years making sure it changes yours.</p>
<p>Today Big Joe has guided over 15,000 people across 15 countries. Athletes, entrepreneurs, executives, and everyday people who needed a reset. The practice is ancient. His approach is completely his own.</p>
</div>
<div class="stats-row">
<div class="stat-item"><span class="stat-num">15K+</span><span class="stat-label">Guided</span></div>
<div class="stat-item"><span class="stat-num">15+</span><span class="stat-label">Countries</span></div>
<div class="stat-item"><span class="stat-num">7</span><span class="stat-label">Years</span></div>
<div class="stat-item"><span class="stat-num">143K</span><span class="stat-label">Community</span></div>
</div>
</div>
</div>
</section>
<div class="divider"></div>
<!-- SERVICES -->
<section>
<span class="eyebrow">The Experience</span>
<h2 class="section-heading">What Big Breath offers</h2>
<div class="services-grid">
<div class="service-card">
<div class="service-card-accent"></div>
<div class="service-card-name">Breathwork Sessions</div>
<p class="service-card-desc">30, 60, or 120-minute immersive breath journeys. Group or individually curated. Designed for reset and transformation.</p>
<a href="#" class="service-link">Explore Sessions</a>
</div>
<div class="service-card">
<div class="service-card-accent"></div>
<div class="service-card-name">Corporate Wellness</div>
<p class="service-card-desc">Built for teams. Backed by science. Reduce cortisol, sharpen focus, and build the kind of trust that closes deals.</p>
<a href="#" class="service-link">Corporate Programs</a>
</div>
<div class="service-card">
<div class="service-card-accent"></div>
<div class="service-card-name">Private 1-on-1</div>
<p class="service-card-desc">Intentional, breath-led coaching sessions for high performers. Tailored to your goals, your pace, your system.</p>
<a href="#" class="service-link">Book Private Session</a>
</div>
</div>
</section>
<div class="divider"></div>
<!-- PARTNER LOGOS — after services -->
<div class="logo-bar">
<div class="logo-bar-label">Brands that trust the practice</div>
<div class="logo-track">
<span class="logo-item">NFL</span><span class="logo-item">NFLPA</span><span class="logo-item">Olympics</span><span class="logo-item">UCLA Bruins</span><span class="logo-item">Airbnb</span><span class="logo-item">Pepsi</span><span class="logo-item">Lincoln</span><span class="logo-item">GMC</span><span class="logo-item">Remedy Place</span><span class="logo-item">Hoag</span><span class="logo-item">Kachava</span><span class="logo-item">LA Chargers</span><span class="logo-item">NFL</span><span class="logo-item">NFLPA</span><span class="logo-item">Olympics</span><span class="logo-item">UCLA Bruins</span><span class="logo-item">Airbnb</span><span class="logo-item">Pepsi</span><span class="logo-item">Lincoln</span><span class="logo-item">GMC</span><span class="logo-item">Remedy Place</span><span class="logo-item">Hoag</span>
</div>
</div>
<div class="divider"></div>
<!-- TESTIMONIALS -->
<section class="testimonials-bg section-full">
<section>
<span class="eyebrow">What people say</span>
<h2 class="section-heading">Rooms, boardrooms, and everything between</h2>
<div class="testimonials-grid">
<div class="testimonial-card">
<p class="testimonial-quote">"As soon as I walked into the room, I felt protected and safe. That authenticity is rare."</p>
<span class="testimonial-attr">Brian Godfrey — Los Angeles</span>
</div>
<div class="testimonial-card">
<p class="testimonial-quote">"I didn't know the power of my breath. The experience was life-changing."</p>
<span class="testimonial-attr">Maria Muleta — Colombia</span>
</div>
<div class="testimonial-card">
<p class="testimonial-quote">"Big Breath transformed our team. The focus shift was immediate and measurable."</p>
<span class="testimonial-attr">Mark Thompson — Corporate Client</span>
</div>
</div>
</section>
</section>
<!-- CTA CLOSE -->
<section class="cta-close section-full">
<h2 class="section-heading">Ready to take a Big Breath?</h2>
<p class="section-body">Sessions available in-person worldwide and for teams of any size.</p>
<div class="hero-ctas">
<button class="btn-primary">Book a Session</button>
<button class="btn-ghost">Hello@bigbreath.co</button>
</div>
</section>
<script>
// ── Lenis smooth scroll
const lenis = new Lenis({ lerp: 0.08, smoothWheel: true });
lenis.on('scroll', ScrollTrigger.update);
gsap.ticker.add(time => lenis.raf(time * 1000));
gsap.ticker.lagSmoothing(0);
// ── Nav scroll state
const nav = document.getElementById('nav');
ScrollTrigger.create({
start: 'top -80',
onUpdate: self => nav.classList.toggle('scrolled', self.progress > 0)
});
// ── GSAP scroll reveals
gsap.utils.toArray('section, .joe-section, .logo-bar').forEach(el => {
gsap.from(el.querySelectorAll('.section-heading, .section-body, .eyebrow, .service-card, .testimonial-card, .stat-item'), {
scrollTrigger: { trigger: el, start: 'top 80%' },
y: 40, opacity: 0, duration: 0.9,
ease: 'power3.out', stagger: 0.12
});
});
// ── Stat counters
document.querySelectorAll('.stat-num').forEach(el => {
const raw = el.textContent.replace(/[^0-9]/g, '');
if (!raw) return;
const suffix = el.textContent.replace(/[0-9]/g, '');
const target = +raw;
ScrollTrigger.create({
trigger: el, start: 'top 85%', once: true,
onEnter: () => {
gsap.fromTo({ v: 0 }, { v: target }, {
duration: 1.8, ease: 'power2.out',
onUpdate() { el.textContent = Math.round(this.targets()[0].v).toLocaleString() + suffix; }
});
}
});
});
// ── Particle system (canvas)
const canvas = document.getElementById('particles');
const ctx = canvas.getContext('2d');
let particles = [], W, H, mouse = { x: -999, y: -999 };
function resize() {
const hero = canvas.parentElement;
W = canvas.width = hero.offsetWidth;
H = canvas.height = hero.offsetHeight;
}
function rand(a, b) { return Math.random() * (b - a) + a; }
function mkP(i, total) {
// distribute evenly across grid, then add jitter
const cols = Math.ceil(Math.sqrt(total * (W/H)));
const rows = Math.ceil(total / cols);
const col = i % cols, row = Math.floor(i / cols);
return {
x: (col / cols) * W + rand(-W/cols/2, W/cols/2),
y: (row / rows) * H + rand(-H/rows/2, H/rows/2),
r: rand(0.5, 3),
vx: rand(-0.12, 0.12), vy: rand(-0.05, -0.2),
opacity: rand(0.08, 0.55),
color: Math.random() > 0.6 ? '18,54,204' : Math.random() > 0.5 ? '30,80,232' : '46,106,255'
};
}
function init() { resize(); const n = innerWidth<768?80:220; particles = Array.from({length:n},(_,i)=>mkP(i,n)); }
function draw() {
ctx.clearRect(0,0,W,H);
const dx = (mouse.x-W/2)*0.008, dy = (mouse.y-H/2)*0.004;
particles.forEach(p => {
p.x += p.vx + dx*0.02; p.y += p.vy + dy*0.02;
if (p.y<-10) { p.y=H+10; p.x=rand(0,W); }
if (p.x<-10) p.x=W+10; if (p.x>W+10) p.x=-10;
const g = ctx.createRadialGradient(p.x,p.y,0,p.x,p.y,p.r*3);
g.addColorStop(0,`rgba(${p.color},${p.opacity})`);
g.addColorStop(1,`rgba(${p.color},0)`);
ctx.beginPath(); ctx.arc(p.x,p.y,p.r*3,0,Math.PI*2);
ctx.fillStyle=g; ctx.fill();
});
requestAnimationFrame(draw);
}
let scrollRatio = 0;
window.addEventListener('scroll', () => {
scrollRatio = Math.min(window.scrollY / (window.innerHeight * 0.8), 1);
});
window.addEventListener('resize', resize);
window.addEventListener('mousemove', e => { mouse.x=e.clientX; mouse.y=e.clientY; });
// patch draw to apply scroll zoom
const _draw = draw;
function draw() {
ctx.clearRect(0,0,W,H);
const spread = 1 + scrollRatio * 3;
const dx = (mouse.x-W/2)*0.008, dy = (mouse.y-H/2)*0.004;
particles.forEach(p => {
p.x += (p.vx + dx*0.02) * spread;
p.y += (p.vy + dy*0.02) * spread;
if (p.y<-10) { p.y=H+10; p.x=rand(0,W); }
if (p.x<-10) p.x=W+10; if (p.x>W+10) p.x=-10;
const r = p.r * (1 + scrollRatio * 2);
const op = p.opacity * (1 - scrollRatio * 0.7);
const g = ctx.createRadialGradient(p.x,p.y,0,p.x,p.y,r*3);
g.addColorStop(0,`rgba(${p.color},${op})`);
g.addColorStop(1,`rgba(${p.color},0)`);
ctx.beginPath(); ctx.arc(p.x,p.y,r*3,0,Math.PI*2);
ctx.fillStyle=g; ctx.fill();
});
requestAnimationFrame(draw);
}
init(); draw();
</script>
</body>
</html>
+50
View File
@@ -0,0 +1,50 @@
# Big Breathe — single-container web image for Coolify.
# nginx 1.x (static HTML/CSS/JS)
# php-fpm 8.3 (contact form /api/contact.php)
# supervisord (PID-1 process manager)
FROM php:8.3-fpm-alpine
RUN apk add --no-cache nginx supervisor curl tini \
&& mkdir -p /run/nginx /var/log/supervisor
COPY infra/nginx.conf /etc/nginx/nginx.conf
COPY infra/supervisord.conf /etc/supervisord.conf
COPY infra/php-fpm-pool.conf /usr/local/etc/php-fpm.d/zzz-pool.conf
COPY src/index.html /var/www/html/index.html
COPY src/404.html /var/www/html/404.html
COPY src/500.html /var/www/html/500.html
COPY src/robots.txt /var/www/html/robots.txt
COPY src/sitemap.xml /var/www/html/sitemap.xml
COPY src/llms.txt /var/www/html/llms.txt
COPY src/about /var/www/html/about/
COPY src/contact /var/www/html/contact/
COPY src/services /var/www/html/services/
COPY src/privacy-policy /var/www/html/privacy-policy/
COPY src/terms-of-service /var/www/html/terms-of-service/
COPY src/assets /var/www/html/assets/
COPY src/api/contact.php /var/www/html/api/contact.php
RUN chown -R www-data:www-data /var/www/html
ENV SEND_FROM_EMAIL="" \
SEND_TO_EMAIL="" \
SEND_FROM_DOMAIN="" \
RESEND_API_KEY="" \
RECAPTCHA_SECRET_KEY="" \
RATE_LIMIT_PER_IP_PER_10MIN=5 \
SCORE_PASS=0.7 \
SCORE_REVIEW=0.4 \
TIME_MIN_SECONDS=3 \
TRUST_PROXY=1
EXPOSE 80
HEALTHCHECK --interval=30s --timeout=5s --start-period=10s --retries=3 \
CMD curl -fsS http://127.0.0.1/index.html > /dev/null || exit 1
ENTRYPOINT ["/sbin/tini", "--"]
CMD ["/usr/bin/supervisord", "-c", "/etc/supervisord.conf", "-n"]
+20
View File
@@ -0,0 +1,20 @@
services:
web:
image: bigbreathe
build:
context: .
dockerfile: Dockerfile
container_name: bigbreathe-web
ports:
- "8011:80"
environment:
SEND_FROM_EMAIL: ${SEND_FROM_EMAIL:-}
SEND_TO_EMAIL: ${SEND_TO_EMAIL:-}
SEND_FROM_DOMAIN: ${SEND_FROM_DOMAIN:-}
RESEND_API_KEY: ${RESEND_API_KEY:-}
RECAPTCHA_SECRET_KEY: ${RECAPTCHA_SECRET_KEY:-}
RATE_LIMIT_PER_IP_PER_10MIN: ${RATE_LIMIT_PER_IP_PER_10MIN:-5}
SCORE_PASS: ${SCORE_PASS:-0.7}
SCORE_REVIEW: ${SCORE_REVIEW:-0.4}
TIME_MIN_SECONDS: ${TIME_MIN_SECONDS:-3}
restart: unless-stopped
+99
View File
@@ -0,0 +1,99 @@
user www-data;
worker_processes auto;
pid /run/nginx.pid;
error_log /dev/stderr warn;
events {
worker_connections 1024;
}
http {
include /etc/nginx/mime.types;
default_type application/octet-stream;
access_log /dev/stdout;
sendfile on;
tcp_nopush on;
keepalive_timeout 65;
server_tokens off;
limit_req_zone $binary_remote_addr zone=contact_limit:10m rate=5r/m;
gzip on;
gzip_vary on;
gzip_min_length 1024;
gzip_proxied any;
gzip_types text/plain text/css text/javascript application/javascript
application/json image/svg+xml font/woff2;
server {
listen 80;
server_name _;
root /var/www/html;
index index.html index.php;
charset utf-8;
add_header X-Frame-Options "SAMEORIGIN" always;
add_header X-Content-Type-Options "nosniff" always;
add_header Referrer-Policy "strict-origin-when-cross-origin" always;
add_header Permissions-Policy "camera=(), microphone=(), geolocation=()" always;
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
add_header Cross-Origin-Opener-Policy "same-origin" always;
add_header Cross-Origin-Resource-Policy "same-origin" always;
add_header Content-Security-Policy "default-src 'self'; base-uri 'self'; form-action 'self'; frame-ancestors 'self'; object-src 'none'; img-src 'self' data:; font-src 'self' https://fonts.gstatic.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; script-src 'self' 'unsafe-inline' https://www.google.com/recaptcha/ https://www.gstatic.com/recaptcha/; frame-src https://www.google.com/recaptcha/; connect-src 'self' https://www.google.com/recaptcha/; upgrade-insecure-requests" always;
location ~ /\. { deny all; return 404; }
location ~* \.(env|conf|yml|yaml|md|sh|py|pyc|sql|bak|old|swp|log|dockerfile)$ {
deny all; return 404;
}
location = /Dockerfile { deny all; return 404; }
location = /robots.txt { try_files $uri =404; access_log off; }
location = /sitemap.xml { try_files $uri =404; access_log off; }
location = /llms.txt { try_files $uri =404; access_log off; }
location ~* \.(css|js|woff2|woff|ttf|otf)$ {
expires 1y;
add_header Cache-Control "public, immutable";
access_log off;
}
location ~* \.(jpg|jpeg|png|webp|gif|ico|svg|mp4|webm)$ {
expires 6M;
add_header Cache-Control "public";
access_log off;
}
location = /api/contact {
limit_req zone=contact_limit burst=3 nodelay;
limit_req_status 429;
rewrite ^ /api/contact.php last;
}
location = /api/contact/ {
limit_req zone=contact_limit burst=3 nodelay;
limit_req_status 429;
rewrite ^ /api/contact.php last;
}
location ~ \.php$ {
try_files $uri =404;
fastcgi_pass 127.0.0.1:9000;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
include fastcgi_params;
fastcgi_read_timeout 30s;
}
location ~ ^/(?!404\.html$|500\.html$)(.+)\.html$ {
return 301 /$1/;
}
location / {
try_files $uri $uri/index.html $uri/ =404;
}
error_page 404 /404.html;
error_page 500 502 503 504 /500.html;
location = /404.html { internal; }
location = /500.html { internal; }
}
}
+4
View File
@@ -0,0 +1,4 @@
[www]
clear_env = no
catch_workers_output = yes
decorate_workers_output = no
+28
View File
@@ -0,0 +1,28 @@
[supervisord]
nodaemon=true
user=root
logfile=/dev/stdout
logfile_maxbytes=0
pidfile=/run/supervisord.pid
[program:php-fpm]
command=/usr/local/sbin/php-fpm -F
autostart=true
autorestart=true
startretries=3
stdout_logfile=/dev/stdout
stdout_logfile_maxbytes=0
stderr_logfile=/dev/stderr
stderr_logfile_maxbytes=0
priority=10
[program:nginx]
command=/usr/sbin/nginx -g "daemon off;"
autostart=true
autorestart=true
startretries=3
stdout_logfile=/dev/stdout
stdout_logfile_maxbytes=0
stderr_logfile=/dev/stderr
stderr_logfile_maxbytes=0
priority=20
+27
View File
@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="noindex, nofollow">
<title>Page Not Found | Big Breathe Yoga &amp; 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>
<main id="main-content" style="min-height:100svh;display:flex;align-items:center;justify-content:center;background:var(--cream);text-align:center;padding:var(--s-12) var(--gutter);">
<div>
<p style="font-family:var(--font-display);font-size:clamp(5rem,15vw,10rem);font-weight:var(--w-medium);color:var(--forest-pale);line-height:1;margin-bottom:var(--s-6);">404</p>
<h1 style="font-family:var(--font-display);font-size:clamp(var(--t-2xl),4vw,var(--t-4xl));font-weight:var(--w-medium);color:var(--ink);margin-bottom:var(--s-4);">Page not found</h1>
<p style="font-size:var(--t-lg);color:var(--ink-soft);max-width:420px;margin-inline:auto;margin-bottom:var(--s-10);">The page you are looking for has moved or does not exist.</p>
<div style="display:flex;align-items:center;justify-content:center;gap:var(--s-4);flex-wrap:wrap;">
<a href="/" class="btn btn-primary">Back to Home</a>
<a href="/services/" class="btn btn-ghost">View Services</a>
</div>
</div>
</main>
</body>
</html>
+24
View File
@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="noindex, nofollow">
<title>Server Error | Big Breathe Yoga &amp; 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>
<main id="main-content" style="min-height:100svh;display:flex;align-items:center;justify-content:center;background:var(--cream);text-align:center;padding:var(--s-12) var(--gutter);">
<div>
<p style="font-family:var(--font-display);font-size:clamp(5rem,15vw,10rem);font-weight:var(--w-medium);color:var(--forest-pale);line-height:1;margin-bottom:var(--s-6);">500</p>
<h1 style="font-family:var(--font-display);font-size:clamp(var(--t-2xl),4vw,var(--t-4xl));font-weight:var(--w-medium);color:var(--ink);margin-bottom:var(--s-4);">Something went wrong</h1>
<p style="font-size:var(--t-lg);color:var(--ink-soft);max-width:420px;margin-inline:auto;margin-bottom:var(--s-10);">We are working on it. Please try again in a moment.</p>
<a href="/" class="btn btn-primary">Back to Home</a>
</div>
</main>
</body>
</html>
+199
View File
@@ -0,0 +1,199 @@
<!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: about page meta description -->">
<meta name="robots" content="index, follow">
<meta property="og:title" content="About | Big Breathe Yoga &amp; Wellness">
<meta property="og:description" content="<!-- DRAFT NEEDED -->">
<meta property="og:type" content="website">
<meta property="og:url" content="https://bigbreathe.com/about/">
<link rel="canonical" href="https://bigbreathe.com/about/">
<title>About | Big Breathe Yoga &amp; 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 Breathe Yoga, Home">
<span class="bb-logo-mark" aria-hidden="true">BB</span>
<span class="bb-logo-text">
<span class="bb-logo-name">Big Breathe</span>
<span class="bb-logo-tagline">Yoga &amp; Wellness</span>
</span>
</a>
<nav class="bb-nav" aria-label="Main navigation">
<a href="/about/" aria-current="page">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 &amp; Breathwork</a>
<a href="/services/online-yoga/" role="menuitem">Online / Virtual Yoga</a>
</div>
</div>
<a href="/contact/">Contact</a>
</nav>
<a href="/contact/" class="btn btn-primary header-cta">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 &amp; 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">
<!-- Page hero -->
<section class="bb-inner-hero">
<div class="container">
<p class="section-label" data-animate>Our Story</p>
<h1 class="inner-hero-h1" data-animate><!-- DRAFT NEEDED: about page headline --></h1>
<p class="inner-hero-sub" data-animate><!-- DRAFT NEEDED: about page subheading --></p>
</div>
</section>
<!-- Bio section -->
<section class="bb-sec-about" style="padding-top: var(--s-20);">
<div class="container">
<div class="about-grid">
<div class="about-image-wrap" data-animate="left">
<img class="about-img"
src="/assets/images/instructor-portrait.jpg"
alt="<!-- DRAFT NEEDED: instructor name and alt text -->"
width="600" height="750" loading="lazy">
</div>
<div class="about-content" data-animate="right">
<p class="section-label"><!-- DRAFT NEEDED: instructor name --></p>
<h2 class="about-h2"><!-- DRAFT NEEDED: bio headline with <em>italic accent</em> --></h2>
<p class="about-body"><!-- DRAFT NEEDED: instructor bio paragraph 1 --></p>
<p class="about-body"><!-- DRAFT NEEDED: instructor bio paragraph 2 --></p>
<div class="about-credentials">
<div class="about-credentials-row"><strong>Certifications</strong><!-- DRAFT NEEDED --></div>
<div class="about-credentials-row"><strong>Specialties</strong><!-- DRAFT NEEDED --></div>
<div class="about-credentials-row"><strong>Experience</strong><!-- DRAFT NEEDED --></div>
<div class="about-credentials-row"><strong>Location</strong><!-- DRAFT NEEDED --></div>
</div>
</div>
</div>
</div>
</section>
<!-- Philosophy -->
<section class="bb-sec-why" style="padding-top: var(--s-20);">
<div class="container">
<div class="why-header" data-animate>
<p class="section-label">Our Philosophy</p>
<h2 class="why-h2"><!-- DRAFT NEEDED: philosophy headline --></h2>
</div>
<div class="why-grid">
<div class="why-card" data-animate>
<span class="why-card-num" aria-hidden="true">01</span>
<h3 class="why-card-title"><!-- DRAFT NEEDED --></h3>
<p class="why-card-desc"><!-- DRAFT NEEDED --></p>
</div>
<div class="why-card" data-animate data-delay="100">
<span class="why-card-num" aria-hidden="true">02</span>
<h3 class="why-card-title"><!-- DRAFT NEEDED --></h3>
<p class="why-card-desc"><!-- DRAFT NEEDED --></p>
</div>
<div class="why-card" data-animate data-delay="200">
<span class="why-card-num" aria-hidden="true">03</span>
<h3 class="why-card-title"><!-- DRAFT NEEDED --></h3>
<p class="why-card-desc"><!-- DRAFT NEEDED --></p>
</div>
</div>
</div>
</section>
<!-- CTA -->
<section class="bb-sec-cta">
<div class="cta-orb cta-orb-1" aria-hidden="true"></div>
<div class="cta-orb cta-orb-2" aria-hidden="true"></div>
<div class="container">
<p class="section-label" data-animate>Begin Your Practice</p>
<h2 class="cta-h2" data-animate>Ready to take the <em>first breath</em>?</h2>
<p class="cta-sub" data-animate><!-- DRAFT NEEDED: CTA subtext --></p>
<div class="cta-actions" data-animate>
<a href="/contact/" class="btn btn-primary">Book a Class</a>
<a href="/services/" class="btn btn-ghost">View Services</a>
</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 Breathe</span>
<span class="bb-logo-tagline">Yoga &amp; Wellness</span>
</div>
<p class="footer-tagline"><!-- DRAFT NEEDED: footer tagline --></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 &amp; 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">&copy; 2025 Big Breathe. 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>
+165
View File
@@ -0,0 +1,165 @@
<?php
/**
* Big Breathe contact form handler.
* POST JSON to /api/contact rate-limited, honeypot-checked.
*/
declare(strict_types=1);
header('Content-Type: application/json; charset=utf-8');
header('X-Content-Type-Options: nosniff');
$SEND_FROM_EMAIL = getenv('SEND_FROM_EMAIL') ?: 'noreply@bigbreathe.com';
$SEND_TO_EMAIL = getenv('SEND_TO_EMAIL') ?: '';
$SEND_FROM_DOMAIN = getenv('SEND_FROM_DOMAIN') ?: 'bigbreathe.com';
$RESEND_API_KEY = getenv('RESEND_API_KEY') ?: '';
$RECAPTCHA_SECRET = getenv('RECAPTCHA_SECRET_KEY') ?: '';
$RATE_LIMIT = (int)(getenv('RATE_LIMIT_PER_IP_PER_10MIN') ?: 5);
$SCORE_PASS = (float)(getenv('SCORE_PASS') ?: 0.7);
$SCORE_REVIEW = (float)(getenv('SCORE_REVIEW') ?: 0.4);
$TIME_MIN_SECONDS = (int)(getenv('TIME_MIN_SECONDS') ?: 3);
$FROM_HEADER = sprintf('Big Breathe <%s>', $SEND_FROM_EMAIL);
function send_json(array $data, int $status = 200): void {
http_response_code($status);
echo json_encode($data, JSON_UNESCAPED_SLASHES);
exit;
}
function fail(string $msg, int $status = 200): void { send_json(['ok' => false, 'error' => $msg], $status); }
function client_ip(): string {
$trust = (getenv('TRUST_PROXY') === '1');
if ($trust) { $fwd = $_SERVER['HTTP_X_FORWARDED_FOR'] ?? ''; if ($fwd) return trim(explode(',', $fwd)[0]); }
return $_SERVER['REMOTE_ADDR'] ?? 'unknown';
}
function rate_limit_check(string $ip, int $max, int $window): bool {
$dir = sys_get_temp_dir() . '/bb-rl';
if (!is_dir($dir)) @mkdir($dir, 0700, true);
$file = $dir . '/' . preg_replace('/[^a-zA-Z0-9._:-]/', '_', $ip);
$now = time();
$events = [];
if (is_file($file)) {
$raw = @file_get_contents($file);
$events = $raw ? array_filter(array_map('intval', explode("\n", $raw))) : [];
$events = array_filter($events, fn($t) => $now - $t <= $window);
}
if (count($events) >= $max) return false;
$events[] = $now;
@file_put_contents($file, implode("\n", $events), LOCK_EX);
return true;
}
function http_post_json(string $url, array $headers, array $body, int $timeout = 15): array {
$ch = curl_init($url);
curl_setopt_array($ch, [
CURLOPT_RETURNTRANSFER => true, CURLOPT_POST => true,
CURLOPT_POSTFIELDS => json_encode($body, JSON_UNESCAPED_SLASHES),
CURLOPT_HTTPHEADER => array_merge(['Content-Type: application/json'], $headers),
CURLOPT_CONNECTTIMEOUT => 5, CURLOPT_TIMEOUT => $timeout,
]);
$resp = curl_exec($ch); $code = curl_getinfo($ch, CURLINFO_HTTP_CODE); curl_close($ch);
return ['status' => $code, 'body' => $resp];
}
function http_post_form(string $url, array $fields, int $timeout = 10): array {
$ch = curl_init($url);
curl_setopt_array($ch, [
CURLOPT_RETURNTRANSFER => true, CURLOPT_POST => true,
CURLOPT_POSTFIELDS => http_build_query($fields),
CURLOPT_CONNECTTIMEOUT => 5, CURLOPT_TIMEOUT => $timeout,
]);
$resp = curl_exec($ch); $code = curl_getinfo($ch, CURLINFO_HTTP_CODE); curl_close($ch);
return ['status' => $code, 'body' => $resp];
}
if (($_SERVER['REQUEST_METHOD'] ?? 'GET') !== 'POST') fail('Method Not Allowed', 405);
$raw = ''; $in = fopen('php://input', 'rb');
if ($in) { $raw = stream_get_contents($in, 32769); fclose($in); }
if (strlen($raw) > 32768) fail('Payload too large.', 413);
$body = json_decode($raw, true);
if (!is_array($body)) fail('Invalid request payload.');
$request_id = bin2hex(random_bytes(6));
$ip = client_ip();
if (!rate_limit_check($ip, $RATE_LIMIT, 600)) {
error_log("[bb.form] rate_limited request_id=$request_id ip=$ip");
fail('Too many requests. Please wait a few minutes.', 429);
}
$name = trim((string)($body['name'] ?? ''));
$email = trim((string)($body['email'] ?? ''));
$reason = trim((string)($body['reason'] ?? ''));
$message = trim((string)($body['message'] ?? ''));
$website = trim((string)($body['website'] ?? ''));
$form_loaded_at = trim((string)($body['form_loaded_at'] ?? ''));
$recaptcha_token = trim((string)($body['recaptcha_token'] ?? ''));
$errors = [];
if (mb_strlen($name) < 2 || mb_strlen($name) > 80) $errors[] = 'name';
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) $errors[] = 'email';
if (mb_strlen($reason) < 1) $errors[] = 'reason';
if (mb_strlen($message) > 1000) $errors[] = 'message';
if ($errors) fail('Please check the form fields and try again.');
if ($website !== '') {
error_log("[bb.form] honeypot_triggered request_id=$request_id ip=$ip");
send_json(['ok' => true, 'ref' => $request_id]);
}
$flagged_review = false;
if ($form_loaded_at !== '' && ctype_digit(ltrim($form_loaded_at, '-'))) {
$elapsed = (microtime(true) * 1000 - (int)$form_loaded_at) / 1000.0;
if ($elapsed < $TIME_MIN_SECONDS) $flagged_review = true;
}
$score = 1.0;
if ($recaptcha_token !== '' && $RECAPTCHA_SECRET !== '') {
$r = http_post_form('https://www.google.com/recaptcha/api/siteverify', ['secret' => $RECAPTCHA_SECRET, 'response' => $recaptcha_token]);
$rj = json_decode($r['body'] ?? '', true) ?: [];
if (empty($rj['success'])) fail('Could not verify the form. Please try again.');
$score = (float)($rj['score'] ?? 0);
if ($score < $SCORE_REVIEW) fail('Could not verify the form. Please try again.');
if ($score < $SCORE_PASS) $flagged_review = true;
} else {
$flagged_review = true;
}
$subject_name = preg_replace('/[\x00-\x1F\x7F]/u', ' ', $name);
$subject_prefix = $flagged_review ? '[REVIEW] ' : '';
$subject = "{$subject_prefix}New inquiry from {$subject_name}";
$text_body =
"New inquiry from bigbreathe.com\n\n" .
"Name: {$name}\nEmail: {$email}\nService: {$reason}\n\n" .
"Message:\n" . ($message ?: '(none)') . "\n\n" .
"reCAPTCHA score: {$score}\n" .
"Submitted: " . gmdate('Y-m-d\TH:i:s\Z') . "\n" .
"Request ID: {$request_id}\n";
$html_body = nl2br(htmlspecialchars($text_body, ENT_QUOTES, 'UTF-8'));
if ($RESEND_API_KEY !== '' && $SEND_TO_EMAIL !== '') {
$r = http_post_json(
'https://api.resend.com/emails',
["Authorization: Bearer {$RESEND_API_KEY}"],
['from' => $FROM_HEADER, 'to' => [$SEND_TO_EMAIL], 'reply_to' => $email, 'subject' => $subject, 'text' => $text_body, 'html' => $html_body]
);
if ($r['status'] >= 300) {
error_log("[bb.form] resend_failed request_id=$request_id status={$r['status']}");
fail('Could not send the message. Please email us directly.');
}
error_log("[bb.form] sent ok request_id=$request_id score=$score");
http_post_json(
'https://api.resend.com/emails',
["Authorization: Bearer {$RESEND_API_KEY}"],
['from' => $FROM_HEADER, 'to' => [$email], 'subject' => 'Your message reached Big Breathe',
'text' => "Thank you for reaching out. We will be in touch within one to two business days.\n\nBig Breathe Yoga & Wellness\nbigbreathe.com",
'html' => "<p>Thank you for reaching out. We will be in touch within one to two business days.</p><p>Big Breathe Yoga &amp; Wellness<br>bigbreathe.com</p>"]
);
} else {
error_log("[bb.form] no_key request_id=$request_id\nSubject: $subject\n$text_body");
}
send_json(['ok' => true, 'ref' => $request_id]);
File diff suppressed because it is too large Load Diff
+102
View File
@@ -0,0 +1,102 @@
:root {
/* Big Breath — Navy / Electric Blue palette (from logo, 2026-05-15) */
/* Base — dark foundation */
--bb-void: #060D1A;
--bb-navy: #0B1428;
--bb-navy-mid: #0D1B3E;
--bb-navy-lift: #112244;
/* Energy — electric blue (particle layer, accent) */
--bb-electric: #1B6FD8;
--bb-bright: #4A9FE8;
--bb-ice: #6AB4F5;
--bb-mist: #A0C8FF;
/* Foreground */
--bb-white: #FFFFFF;
--bb-white-70: rgba(255, 255, 255, 0.70);
--bb-white-40: rgba(255, 255, 255, 0.40);
--bb-white-10: rgba(255, 255, 255, 0.08);
/* Gold — brand accent from pitch deck */
--bb-gold: #D4A855;
--bb-gold-glow: rgba(212, 168, 85, 0.25);
/* Utility */
--bb-line: rgba(74, 159, 232, 0.20);
--bb-glow: rgba(27, 111, 216, 0.35);
/* Semantic aliases */
--color-bg: var(--bb-navy);
--color-bg-deep: var(--bb-void);
--color-bg-lift: var(--bb-navy-mid);
--color-accent: var(--bb-electric);
--color-accent-h: var(--bb-bright);
--color-text: var(--bb-white);
--color-text-soft:var(--bb-white-70);
--color-text-mute:var(--bb-white-40);
--color-border: var(--bb-line);
/* Type stack */
--font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--w-normal: 400;
--w-medium: 500;
--w-semi: 600;
--w-bold: 700;
/* Type scale */
--t-xs: 0.6875rem;
--t-sm: 0.8125rem;
--t-base: 1rem;
--t-lg: 1.125rem;
--t-xl: 1.375rem;
--t-2xl: 1.75rem;
--t-3xl: 2.25rem;
--t-4xl: 2.875rem;
--t-5xl: 3.75rem;
--t-6xl: 4.75rem;
--t-hero: clamp(3.5rem, 8vw, 7rem);
/* Spacing (8px grid) */
--s-1: 4px;
--s-2: 8px;
--s-3: 12px;
--s-4: 16px;
--s-5: 20px;
--s-6: 24px;
--s-8: 32px;
--s-10: 40px;
--s-12: 48px;
--s-16: 64px;
--s-20: 80px;
--s-25: 100px;
--s-30: 120px;
/* Layout */
--max-w: 1200px;
--gutter: clamp(24px, 5vw, 80px);
--col-gap: clamp(16px, 2.5vw, 40px);
/* Easing */
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
/* Duration */
--d-fast: 150ms;
--d-base: 300ms;
--d-slow: 600ms;
--d-slower: 900ms;
--d-cinematic: 1200ms;
/* Radius */
--r-sm: 6px;
--r-md: 12px;
--r-lg: 20px;
--r-pill: 999px;
}
Binary file not shown.

After

Width:  |  Height:  |  Size: 615 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 602 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 540 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 170 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 581 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 583 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 130 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 332 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 77 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 173 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 113 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 119 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 344 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 145 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 220 KiB

+366
View File
@@ -0,0 +1,366 @@
'use strict';
document.documentElement.classList.add('js');
/* ─── Particle system ─────────────────────────────────────── */
(function initParticles() {
const canvas = document.getElementById('bb-particles');
if (!canvas) return;
const ctx = canvas.getContext('2d');
const isMobile = window.matchMedia('(max-width: 768px)').matches;
const COUNT = isMobile ? 60 : 150;
let W, H, particles, mouse = { x: -9999, y: -9999 }, raf;
let canvasOpacity = 1;
function resize() {
W = canvas.width = window.innerWidth;
H = canvas.height = window.innerHeight;
}
function rand(min, max) { return min + Math.random() * (max - min); }
function createParticles() {
particles = [];
for (let i = 0; i < COUNT; i++) {
particles.push({
x: rand(0, W),
y: rand(0, H),
r: rand(1, 3),
opacity: rand(0.15, 0.45),
vx: rand(-0.15, 0.15),
vy: rand(-0.2, -0.05),
baseX: 0,
baseY: 0,
});
particles[i].baseX = particles[i].x;
particles[i].baseY = particles[i].y;
}
}
function draw() {
ctx.clearRect(0, 0, W, H);
ctx.save();
ctx.globalAlpha = canvasOpacity;
for (const p of particles) {
// Mouse parallax — shift up to 15px toward cursor
const dx = mouse.x - p.x;
const dy = mouse.y - p.y;
const dist = Math.sqrt(dx * dx + dy * dy);
const maxDist = 300;
if (dist < maxDist) {
const factor = (1 - dist / maxDist) * 15;
p.x += dx / dist * factor * 0.015;
p.y += dy / dist * factor * 0.015;
}
// Drift
p.x += p.vx;
p.y += p.vy;
// Wrap
if (p.x < -5) p.x = W + 5;
if (p.x > W + 5) p.x = -5;
if (p.y < -5) p.y = H + 5;
if (p.y > H + 5) p.y = -5;
ctx.beginPath();
ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
// Electric blue color: #1B6FD8 or #4A9FE8
const shade = p.r > 2 ? '74,159,232' : '27,111,216';
ctx.fillStyle = `rgba(${shade},${p.opacity})`;
ctx.fill();
}
ctx.restore();
raf = requestAnimationFrame(draw);
}
// Fade canvas as user scrolls past hero section
window.addEventListener('scroll', () => {
const hero = document.querySelector('.bb-sec-hero');
const heroHeight = hero ? hero.offsetHeight : window.innerHeight;
const scrollPct = Math.min(window.scrollY / heroHeight, 1);
canvasOpacity = Math.max(0.15, 1 - scrollPct * 0.7);
}, { passive: true });
window.addEventListener('mousemove', e => {
mouse.x = e.clientX;
mouse.y = e.clientY;
}, { passive: true });
// Respect reduced-motion
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
canvas.style.display = 'none';
return;
}
resize();
createParticles();
draw();
window.addEventListener('resize', () => { resize(); createParticles(); }, { passive: true });
})();
/* ─── Ghost word parallax ─────────────────────────────────── */
(function initGhostParallax() {
const ghost = document.querySelector('.ghost-word');
if (!ghost) return;
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
let ticking = false;
let currentY = window.scrollY;
window.addEventListener('scroll', () => {
currentY = window.scrollY;
if (!ticking) {
requestAnimationFrame(() => {
// Move down slower than content — atmospheric layer
ghost.style.transform = `translateY(calc(-50% + ${currentY * 0.15}px))`;
ticking = false;
});
ticking = true;
}
}, { passive: true });
})();
/* ─── Scroll-triggered reveal ─────────────────────────────── */
(function initReveal() {
const revealObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const el = entry.target;
const delay = parseInt(el.dataset.delay || '0', 10);
setTimeout(() => el.classList.add('in-view'), delay);
revealObserver.unobserve(el);
}
});
}, { threshold: 0.10, rootMargin: '0px 0px -40px 0px' });
document.querySelectorAll('[data-animate]').forEach(el => revealObserver.observe(el));
// Philosophy divider line (separate observer — uses scaleY)
const divider = document.querySelector('.philosophy-divider');
if (divider) {
const divObs = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
divider.classList.add('in-view');
divObs.unobserve(divider);
}
});
}, { threshold: 0.2 });
divObs.observe(divider);
}
// Fallback: reveal everything after 1.2s in case observer never fires
setTimeout(() => {
document.querySelectorAll('[data-animate]:not(.in-view)').forEach(el => {
el.classList.add('in-view');
});
if (divider) divider.classList.add('in-view');
}, 1200);
})();
/* ─── Stat counters ───────────────────────────────────────── */
(function initStatCounters() {
const section = document.querySelector('.bb-sec-bigjoe');
if (!section) return;
let triggered = false;
function easeOutExpo(t) {
return t === 1 ? 1 : 1 - Math.pow(2, -10 * t);
}
function animateCounter(el, target, duration) {
// target is already the display value (143 for 143K, 15000 for 15,000+, etc.)
const start = performance.now();
function tick(now) {
const elapsed = now - start;
const progress = Math.min(elapsed / duration, 1);
const value = Math.round(easeOutExpo(progress) * target);
el.textContent = value.toLocaleString();
if (progress < 1) requestAnimationFrame(tick);
else el.textContent = target.toLocaleString();
}
requestAnimationFrame(tick);
}
const obs = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting && !triggered) {
triggered = true;
const nums = section.querySelectorAll('.stat-num');
nums.forEach(num => {
const target = parseInt(num.dataset.target || '0', 10);
animateCounter(num, target, 2000);
});
obs.disconnect();
}
});
}, { threshold: 0.3 });
obs.observe(section);
})();
/* ─── Sticky header ───────────────────────────────────────── */
(function initHeader() {
const header = document.querySelector('.bb-header');
if (!header) return;
let lastY = 0;
window.addEventListener('scroll', () => {
const y = window.scrollY;
if (y > 60) header.classList.add('scrolled');
else header.classList.remove('scrolled');
if (y > lastY && y > 240) header.classList.add('hidden');
else header.classList.remove('hidden');
lastY = y;
}, { passive: true });
})();
/* ─── Mobile nav ──────────────────────────────────────────── */
(function initMobileNav() {
const hamburger = document.querySelector('.bb-hamburger');
const mobileNav = document.querySelector('.bb-mobile-nav');
if (!hamburger || !mobileNav) return;
hamburger.addEventListener('click', () => {
const open = hamburger.classList.toggle('open');
mobileNav.classList.toggle('open');
document.body.classList.toggle('nav-open');
hamburger.setAttribute('aria-expanded', open);
});
mobileNav.querySelectorAll('a').forEach(a => {
a.addEventListener('click', () => {
hamburger.classList.remove('open');
mobileNav.classList.remove('open');
document.body.classList.remove('nav-open');
hamburger.setAttribute('aria-expanded', 'false');
});
});
})();
/* ─── Services dropdown ───────────────────────────────────── */
(function initDropdown() {
const trigger = document.querySelector('.nav-has-dropdown');
if (!trigger) return;
const menu = trigger.querySelector('.nav-dropdown');
if (!menu) return;
let hideTimer = null;
const show = () => { clearTimeout(hideTimer); menu.classList.add('visible'); };
const scheduleHide = () => {
hideTimer = setTimeout(() => menu.classList.remove('visible'), 180);
};
trigger.addEventListener('mouseenter', show);
trigger.addEventListener('mouseleave', scheduleHide);
menu.addEventListener('mouseenter', show);
menu.addEventListener('mouseleave', scheduleHide);
trigger.addEventListener('focusin', show);
trigger.addEventListener('focusout', scheduleHide);
// Click outside
document.addEventListener('click', e => {
if (!trigger.contains(e.target)) menu.classList.remove('visible');
});
})();
/* ─── Hero H1 word reveal + subhead fade ─────────────────── */
(function initHeroReveal() {
const heroH1 = document.querySelector('.hero-h1');
const heroSub = document.querySelector('.hero-sub');
if (!heroH1) return;
let wordIndex = 0;
const walker = document.createTreeWalker(heroH1, NodeFilter.SHOW_TEXT);
const textNodes = [];
while (walker.nextNode()) textNodes.push(walker.currentNode);
textNodes.forEach(node => {
const frag = document.createDocumentFragment();
node.textContent.split(/(\s+)/).forEach(chunk => {
if (/^\s+$/.test(chunk)) {
frag.appendChild(document.createTextNode(chunk));
} else if (chunk) {
const span = document.createElement('span');
span.className = 'word';
// 200ms page load delay + 120ms stagger per word
span.style.transitionDelay = (200 + wordIndex * 120) + 'ms';
span.textContent = chunk;
frag.appendChild(span);
wordIndex++;
}
});
node.parentNode.replaceChild(frag, node);
});
// Trigger on next paint
requestAnimationFrame(() => {
setTimeout(() => {
heroH1.classList.add('revealed');
// Hero subhead: fade in after all words have staggered
if (heroSub) {
const subDelay = 200 + wordIndex * 120 + 400;
setTimeout(() => heroSub.classList.add('revealed'), subDelay);
}
}, 0);
});
})();
/* ─── FAQ accordion ───────────────────────────────────────── */
(function initFAQ() {
document.querySelectorAll('.faq-item').forEach(item => {
const btn = item.querySelector('.faq-q');
const body = item.querySelector('.faq-a');
if (!btn || !body) return;
btn.addEventListener('click', () => {
const open = item.classList.toggle('open');
btn.setAttribute('aria-expanded', open);
body.style.maxHeight = open ? body.scrollHeight + 'px' : '0';
});
});
})();
/* ─── Gallery drag-scroll ─────────────────────────────────── */
(function initGallery() {
const wrap = document.querySelector('.gallery-track-wrap');
if (!wrap) return;
let isDown = false, startX = 0, scrollLeft = 0;
wrap.addEventListener('mousedown', e => {
isDown = true;
wrap.classList.add('dragging');
startX = e.pageX - wrap.offsetLeft;
scrollLeft = wrap.scrollLeft;
});
['mouseleave', 'mouseup'].forEach(ev => {
wrap.addEventListener(ev, () => { isDown = false; wrap.classList.remove('dragging'); });
});
wrap.addEventListener('mousemove', e => {
if (!isDown) return;
e.preventDefault();
const x = e.pageX - wrap.offsetLeft;
wrap.scrollLeft = scrollLeft - (x - startX) * 1.5;
});
})();
/* ─── Smooth scroll ───────────────────────────────────────── */
document.querySelectorAll('a[href^="#"]').forEach(a => {
a.addEventListener('click', e => {
const id = a.getAttribute('href');
if (!id || id === '#' || id.length < 2) return;
const target = document.querySelector(id);
if (target) {
e.preventDefault();
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
});
});
+8
View File
@@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<rect width="32" height="32" rx="6" fill="#060D1A"/>
<circle cx="16" cy="16" r="10" fill="none" stroke="#1B6FD8" stroke-width="1.5"/>
<ellipse cx="16" cy="16" rx="4" ry="9" fill="none" stroke="#D4A855" stroke-width="1.2" transform="rotate(0 16 16)"/>
<ellipse cx="16" cy="16" rx="4" ry="9" fill="none" stroke="#D4A855" stroke-width="1.2" transform="rotate(60 16 16)"/>
<ellipse cx="16" cy="16" rx="4" ry="9" fill="none" stroke="#D4A855" stroke-width="1.2" transform="rotate(120 16 16)"/>
<circle cx="16" cy="16" r="2" fill="#D4A855"/>
</svg>

After

Width:  |  Height:  |  Size: 615 B

+214
View File
@@ -0,0 +1,214 @@
<!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 Breathe Yoga &amp; Wellness">
<meta property="og:type" content="website">
<meta property="og:url" content="https://bigbreathe.com/contact/">
<link rel="canonical" href="https://bigbreathe.com/contact/">
<title>Contact | Big Breathe Yoga &amp; 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 Breathe Yoga, Home">
<span class="bb-logo-mark" aria-hidden="true">BB</span>
<span class="bb-logo-text">
<span class="bb-logo-name">Big Breathe</span>
<span class="bb-logo-tagline">Yoga &amp; 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 &amp; 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 &amp; 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 &amp; 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@bigbreathe.com --></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 Breathe</span>
<span class="bb-logo-tagline">Yoga &amp; 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 &amp; 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">&copy; 2025 Big Breathe. 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>
+412
View File
@@ -0,0 +1,412 @@
<!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="Big Breath — breathwork coaching by Big Joe, former NFL athlete. Group sessions, corporate wellness, and private 1-on-1 programs worldwide.">
<meta name="robots" content="index, follow">
<meta property="og:title" content="Big Breath | Breathwork for High Performers">
<meta property="og:description" content="Big Breath — breathwork coaching by Big Joe, former NFL athlete. Group sessions, corporate wellness, and private 1-on-1 programs worldwide.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://bigbreath.co/">
<link rel="canonical" href="https://bigbreath.co/">
<title>Big Breath | Breathwork for High Performers</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>
<!-- Canvas particle layer -->
<canvas id="bb-particles" aria-hidden="true"></canvas>
<!-- Header -->
<header class="bb-header" role="banner">
<div class="header-inner">
<a href="/" class="bb-logo" aria-label="Big Breath, Home">
<img src="/assets/images/logo-mark.webp" class="nav-logo-mark" alt="" aria-hidden="true" width="36" height="36">
<span class="bb-logo-text">
<span class="bb-logo-name">Big Breath</span>
<span class="bb-logo-eyebrow">BREATHWORK</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/breathwork-sessions/" role="menuitem">Breathwork Sessions</a>
<a href="/services/corporate-wellness/" role="menuitem">Corporate Wellness</a>
<a href="/services/private-sessions/" role="menuitem">Private 1-on-1</a>
<a href="/services/keynotes/" role="menuitem">Keynotes</a>
<a href="/services/retreats/" role="menuitem">Retreats &amp; Live Experiences</a>
<a href="/services/online/" role="menuitem">Online</a>
</div>
</div>
<a href="/contact/">Contact</a>
</nav>
<a href="/contact/" class="btn btn-primary header-cta">Book a Session</a>
<button class="bb-hamburger" aria-label="Open menu" aria-expanded="false">
<span></span><span></span><span></span>
</button>
</div>
</header>
<!-- Mobile nav overlay -->
<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/breathwork-sessions/">Breathwork Sessions</a>
<a href="/services/corporate-wellness/">Corporate Wellness</a>
<a href="/services/private-sessions/">Private 1-on-1</a>
<a href="/services/keynotes/">Keynotes</a>
<a href="/services/retreats/">Retreats &amp; Live Experiences</a>
<a href="/services/online/">Online</a>
</div>
<a href="/contact/" class="btn btn-primary">Book a Session</a>
</nav>
<main id="main-content">
<!-- Hero -->
<section class="bb-sec-hero">
<span class="ghost-word" aria-hidden="true">BREATH</span>
<span class="hero-deco-num" aria-hidden="true">143K</span>
<div class="container">
<div class="hero-inner">
<div class="hero-content">
<p class="hero-eyebrow">FORMER NFL ATHLETE &middot; 15,000+ PEOPLE GUIDED &middot; 15 COUNTRIES</p>
<h1 class="hero-h1">Take a big breath<br><em style="opacity:0.65">&amp; have the best day ever.</em></h1>
<p class="hero-sub">Breathwork for those who demand more from life. Led by former NFL athlete Big Joe — in rooms, boardrooms, and arenas worldwide.</p>
<div class="hero-ctas">
<a href="/contact/" class="btn btn-primary btn-arrow">Book a Session</a>
<a href="/about/" class="btn btn-ghost-outline">Watch the Story</a>
</div>
<div class="hero-pulse-wrap" aria-hidden="true">
<span class="hero-pulse-dot"></span>
</div>
</div>
</div>
</div>
</section>
<!-- Social proof marquee -->
<section class="bb-sec-marquee" aria-label="Trusted by">
<div class="marquee-eyebrow">TRUSTED BY</div>
<div class="marquee-track-wrap">
<div class="marquee-track">
<span>NFL</span>
<span class="marquee-dot" aria-hidden="true">&middot;</span>
<span>NFLPA</span>
<span class="marquee-dot" aria-hidden="true">&middot;</span>
<span>Olympics</span>
<span class="marquee-dot" aria-hidden="true">&middot;</span>
<span>UCLA Bruins</span>
<span class="marquee-dot" aria-hidden="true">&middot;</span>
<span>LA Chargers</span>
<span class="marquee-dot" aria-hidden="true">&middot;</span>
<span>Airbnb</span>
<span class="marquee-dot" aria-hidden="true">&middot;</span>
<span>Pepsi</span>
<span class="marquee-dot" aria-hidden="true">&middot;</span>
<span>Lincoln</span>
<span class="marquee-dot" aria-hidden="true">&middot;</span>
<span>GMC</span>
<span class="marquee-dot" aria-hidden="true">&middot;</span>
<span>Remedy Place</span>
<span class="marquee-dot" aria-hidden="true">&middot;</span>
<span>Kachava</span>
<span class="marquee-dot" aria-hidden="true">&middot;</span>
<span>Hoag Sports Medicine</span>
<span class="marquee-dot" aria-hidden="true">&middot;</span>
<span>Dove Men+Care</span>
<span class="marquee-dot" aria-hidden="true">&middot;</span>
<!-- Duplicate for seamless loop -->
<span>NFL</span>
<span class="marquee-dot" aria-hidden="true">&middot;</span>
<span>NFLPA</span>
<span class="marquee-dot" aria-hidden="true">&middot;</span>
<span>Olympics</span>
<span class="marquee-dot" aria-hidden="true">&middot;</span>
<span>UCLA Bruins</span>
<span class="marquee-dot" aria-hidden="true">&middot;</span>
<span>LA Chargers</span>
<span class="marquee-dot" aria-hidden="true">&middot;</span>
<span>Airbnb</span>
<span class="marquee-dot" aria-hidden="true">&middot;</span>
<span>Pepsi</span>
<span class="marquee-dot" aria-hidden="true">&middot;</span>
<span>Lincoln</span>
<span class="marquee-dot" aria-hidden="true">&middot;</span>
<span>GMC</span>
<span class="marquee-dot" aria-hidden="true">&middot;</span>
<span>Remedy Place</span>
<span class="marquee-dot" aria-hidden="true">&middot;</span>
<span>Kachava</span>
<span class="marquee-dot" aria-hidden="true">&middot;</span>
<span>Hoag Sports Medicine</span>
<span class="marquee-dot" aria-hidden="true">&middot;</span>
<span>Dove Men+Care</span>
<span class="marquee-dot" aria-hidden="true">&middot;</span>
</div>
</div>
</section>
<!-- Philosophy -->
<section class="bb-sec-philosophy">
<div class="container">
<p class="section-label" data-animate>THE PHILOSOPHY</p>
<div class="philosophy-grid">
<div class="philosophy-left" data-animate="left">
<blockquote class="philosophy-pullquote">
Between work and life, most people's nervous systems are on the fritz. Breath is the fastest way back.
</blockquote>
</div>
<div class="philosophy-divider" aria-hidden="true"></div>
<div class="philosophy-right" data-animate="right">
<p>Controlled breathing increases oxygen flow to the brain, enhancing focus, lowering cortisol, and improving recovery. Numerous studies confirm: specific breathing techniques boost endurance, circulation, and neuroplasticity.</p>
<p>Big Breath is not a wellness brand. It is a live, guided practice built by a former NFL athlete who used breathwork to rebuild after a career-ending injury — then spent seven years taking it to boardrooms, stadiums, and retreat centers worldwide.</p>
<p>Whether you are an athlete in recovery, an executive preparing to lead, or a team that needs to realign — the breath is the tool. The practice is ancient. The approach is completely his own.</p>
</div>
</div>
</div>
</section>
<!-- In the Room -->
<section class="bb-sec-gallery">
<div class="container">
<p class="section-label" data-animate>IN THE ROOM</p>
<h2 class="gallery-h2" data-animate>The practice, live.</h2>
</div>
<div class="gallery-track-wrap" id="gallery-track-wrap" aria-label="Session photos, drag to scroll">
<div class="gallery-track">
<div class="gallery-item"><img src="/assets/images/sessions/session-1.webp" alt="Big Joe leading a breathwork session" loading="lazy"></div>
<div class="gallery-item"><img src="/assets/images/bigjoe-1.webp" alt="Group breathwork session in nature" loading="lazy"></div>
<div class="gallery-item"><img src="/assets/images/sessions/session-4.webp" alt="Retreat group at waterfall" loading="lazy"></div>
<div class="gallery-item"><img src="/assets/images/bigjoe-3.webp" alt="Outdoor breathwork circle" loading="lazy"></div>
<div class="gallery-item"><img src="/assets/images/sessions/session-2.webp" alt="Big Breath group breathwork session" loading="lazy"></div>
<div class="gallery-item"><img src="/assets/images/bigjoe-5.webp" alt="Group breathwork session outdoors" loading="lazy"></div>
<div class="gallery-item"><img src="/assets/images/sessions/session-5.webp" alt="Big Breath group breathwork session" loading="lazy"></div>
<div class="gallery-item"><img src="/assets/images/bigjoe-2.webp" alt="Group breathwork in bamboo forest" loading="lazy"></div>
</div>
</div>
</section>
<!-- The Science -->
<section class="bb-sec-science">
<div class="container">
<p class="section-label" data-animate>THE SCIENCE</p>
<h2 class="science-h2" data-animate>Why the breath works.</h2>
<div class="science-grid">
<div class="science-card" data-animate>
<span class="sci-num">01</span>
<h3 class="sci-title">Stress Reduction</h3>
<p class="sci-body">Controlled breathing increases oxygen flow to the brain, enhancing cognitive functions such as focus and memory while lowering cortisol levels.</p>
</div>
<div class="science-card" data-animate data-delay="100">
<span class="sci-num">02</span>
<h3 class="sci-title">Enhanced Recovery</h3>
<p class="sci-body">By improving oxygen delivery to tissues and promoting relaxation, breathwork aids in muscle recovery and reduces fatigue after physical and mental output.</p>
</div>
<div class="science-card" data-animate data-delay="200">
<span class="sci-num">03</span>
<h3 class="sci-title">Improved Focus</h3>
<p class="sci-body">Specific breathing techniques enhance endurance, improve circulation, and boost neuroplasticity and cognitive performance under pressure.</p>
</div>
<div class="science-card" data-animate data-delay="300">
<span class="sci-num">04</span>
<h3 class="sci-title">Emotional Regulation</h3>
<p class="sci-body">Breathwork reduces symptoms of anxiety and depression. Regular practice promotes relaxation and emotional balance that persists beyond the session.</p>
</div>
</div>
</div>
</section>
<!-- Meet Big Joe -->
<section class="bb-sec-bigjoe">
<div class="container">
<div class="bigjoe-grid">
<div class="bigjoe-portrait" data-animate="left">
<img src="/assets/images/bigjoe-action-1.webp" class="bigjoe-portrait-img" alt="Joseph Fauria — Big Joe, founder of Big Breath" loading="lazy">
</div>
<div class="bigjoe-content" data-animate="right">
<p class="section-label">FOUNDER &amp; GUIDE</p>
<h2 class="bigjoe-h2"><em>Big Joe</em></h2>
<div class="bigjoe-story">
<p>Joseph Fauria played four years in the NFL. Then a career-altering ankle injury ended it — and started everything else.</p>
<p>In 2018 he found breathwork. Not as a wellness trend, but as survival. What he discovered changed his life — and he has spent seven years making sure it changes yours.</p>
<p>Today Big Joe has guided over 15,000 people across 15 countries. Athletes, entrepreneurs, executives, and everyday people who needed a reset. The practice is ancient. His approach is completely his own.</p>
</div>
<div class="bigjoe-stats">
<div class="bigjoe-stat">
<span class="stat-num" data-target="15000">0</span><span class="stat-suffix">+</span>
<span class="stat-label">People Guided</span>
</div>
<div class="bigjoe-stat">
<span class="stat-num" data-target="143">0</span><span class="stat-suffix">K</span>
<span class="stat-label">Community</span>
</div>
<div class="bigjoe-stat">
<span class="stat-num" data-target="15">0</span><span class="stat-suffix">+</span>
<span class="stat-label">Countries</span>
</div>
<div class="bigjoe-stat">
<span class="stat-num" data-target="7">0</span>
<span class="stat-label">Years of Practice</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Services -->
<section class="bb-sec-services">
<div class="container">
<p class="section-label" data-animate>THE EXPERIENCE</p>
<h2 class="services-h2" data-animate>Find your practice</h2>
<div class="services-grid">
<div class="service-card" data-animate>
<h3 class="service-card-title">Breathwork Sessions</h3>
<p class="service-card-desc">30, 60, or 120-minute immersive breath journeys rooted in ancient practices — designed to enhance mental and physical well-being. Group or individually curated.</p>
<a href="/services/breathwork-sessions/" class="service-card-cta">Explore Sessions</a>
</div>
<div class="service-card" data-animate data-delay="100">
<h3 class="service-card-title">Corporate Wellness</h3>
<p class="service-card-desc">Build team unity. Enhance creativity and efficiency. Reduce cortisol, sharpen focus — and watch how that positively impacts your business goals.</p>
<a href="/services/corporate-wellness/" class="service-card-cta">Corporate Programs</a>
</div>
<div class="service-card" data-animate data-delay="200">
<h3 class="service-card-title">Private 1-on-1</h3>
<p class="service-card-desc">Intentional, breath-led coaching sessions for high performers. Tailored to your goals, your pace, your nervous system.</p>
<a href="/services/private-sessions/" class="service-card-cta">Book Private Session</a>
</div>
</div>
<div class="services-secondary-links" data-animate>
<a href="/services/keynotes/">Keynotes</a>
<a href="/services/retreats/">Retreats &amp; Live Experiences</a>
</div>
</div>
</section>
<!-- Global Reach -->
<section class="bb-sec-global">
<div class="container">
<p class="section-label" data-animate>GLOBAL REACH</p>
<h2 class="global-h2" data-animate>Every continent. Every level of performance.</h2>
<p class="global-countries" data-animate>
USA &middot; Mexico &middot; Canada &middot; Netherlands &middot; France &middot; Indonesia &middot; Costa Rica &middot; Saudi Arabia &middot; UAE &middot; Colombia &middot; Greece &middot; Japan &middot; Sweden &middot; Turkey &middot; Saint Barth&eacute;l&eacute;my
</p>
<div class="global-cta" data-animate>
<a href="/contact/" class="btn btn-primary">Book a Session</a>
</div>
</div>
</section>
<!-- Testimonials -->
<section class="bb-sec-testimonials">
<div class="container">
<p class="section-label" data-animate>WHAT THEY SAY</p>
<div class="testimonials-grid">
<div class="testimonial-card" data-animate>
<blockquote class="testimonial-quote">As soon as I walked into the room, I felt protected and safe. That authenticity is rare.</blockquote>
<p class="testimonial-attr">Brian Godfrey &mdash; Los Angeles</p>
</div>
<div class="testimonial-card" data-animate data-delay="100">
<blockquote class="testimonial-quote">I didn't know the power of my breath. The experience was life-changing.</blockquote>
<p class="testimonial-attr">Maria Muleta &mdash; Colombia</p>
</div>
<div class="testimonial-card" data-animate data-delay="200">
<blockquote class="testimonial-quote">Big Breath transformed our team. The focus shift was immediate and measurable.</blockquote>
<p class="testimonial-attr">Mark Thompson &mdash; Corporate Client</p>
</div>
</div>
</div>
</section>
<!-- CTA Close -->
<section class="bb-sec-cta">
<div class="container">
<p class="section-label" data-animate>START YOUR PRACTICE</p>
<h2 class="cta-h2" data-animate>Take a big breath.</h2>
<div class="cta-paths" data-animate>
<div class="cta-path">
<p class="cta-path-label">For Individuals</p>
<h3 class="cta-path-title">Personal sessions, retreats &amp; private coaching</h3>
<div>
<a href="/contact/" class="btn btn-cta-solid">Book a Session</a>
</div>
</div>
<div class="cta-path-divider" aria-hidden="true"></div>
<div class="cta-path">
<p class="cta-path-label">For Organizations</p>
<h3 class="cta-path-title">Corporate wellness, team events &amp; keynotes</h3>
<div>
<a href="/contact/" class="btn btn-cta-ghost">Get a Proposal</a>
</div>
</div>
</div>
<p class="cta-contact" data-animate>hello@bigbreath.co</p>
</div>
</section>
</main>
<footer class="bb-footer" role="contentinfo">
<div class="container">
<div class="footer-top">
<div class="footer-brand">
<div class="footer-logo-wrap">
<img src="/assets/images/logo-mark.webp" class="footer-logo-mark" alt="" aria-hidden="true" width="30" height="30">
<div class="bb-logo-text footer-logo-text">
<span class="bb-logo-name">Big Breath</span>
<span class="bb-logo-eyebrow">BREATHWORK</span>
</div>
</div>
<p class="footer-email">hello@bigbreath.co</p>
</div>
<div>
<p class="footer-col-title">Services</p>
<ul class="footer-links">
<li><a href="/services/breathwork-sessions/">Breathwork Sessions</a></li>
<li><a href="/services/corporate-wellness/">Corporate Wellness</a></li>
<li><a href="/services/private-sessions/">Private 1-on-1</a></li>
<li><a href="/services/keynotes/">Keynotes</a></li>
<li><a href="/services/retreats/">Retreats</a></li>
<li><a href="/services/online/">Online</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">&copy; 2026 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>
+15
View File
@@ -0,0 +1,15 @@
# Big Breathe Yoga & Wellness
> <!-- DRAFT NEEDED: one-sentence site description -->
## Services
- [Group Classes](/services/group-classes/)
- [Private Sessions](/services/private-sessions/)
- [Corporate Wellness](/services/corporate-wellness/)
- [Prenatal Yoga](/services/prenatal-yoga/)
- [Meditation & Breathwork](/services/meditation-breathwork/)
- [Online / Virtual Yoga](/services/online-yoga/)
## Studio
- [About](/about/)
- [Contact](/contact/)
+55
View File
@@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="noindex, follow">
<link rel="canonical" href="https://bigbreathe.com/privacy-policy/">
<title>Privacy Policy | Big Breathe Yoga &amp; 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>
<header class="bb-header" role="banner">
<div class="header-inner">
<a href="/" class="bb-logo" aria-label="Big Breathe Yoga, Home">
<span class="bb-logo-mark" aria-hidden="true">BB</span>
<span class="bb-logo-text">
<span class="bb-logo-name">Big Breathe</span>
<span class="bb-logo-tagline">Yoga &amp; Wellness</span>
</span>
</a>
</div>
</header>
<main id="main-content">
<section class="bb-inner-hero">
<div class="container">
<h1 class="inner-hero-h1">Privacy Policy</h1>
<p class="inner-hero-sub">Last updated: <!-- DRAFT NEEDED: date --></p>
</div>
</section>
<section class="bb-content-sec">
<div class="container">
<div class="prose">
<p><!-- DRAFT NEEDED: privacy policy content --></p>
</div>
</div>
</section>
</main>
<footer class="bb-footer" role="contentinfo">
<div class="container">
<div class="footer-bottom" style="padding-top:0;border-top:none;">
<p class="footer-copy">&copy; 2025 Big Breathe. 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>
+4
View File
@@ -0,0 +1,4 @@
User-agent: *
Allow: /
Sitemap: https://bigbreathe.co/sitemap.xml
+166
View File
@@ -0,0 +1,166 @@
<!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: corporate wellness meta description -->">
<meta name="robots" content="index, follow">
<meta property="og:title" content="Corporate Wellness | Big Breathe Yoga &amp; Wellness">
<meta property="og:type" content="website">
<meta property="og:url" content="https://bigbreathe.com/services/corporate-wellness/">
<link rel="canonical" href="https://bigbreathe.com/services/corporate-wellness/">
<title>Corporate Wellness | Big Breathe Yoga &amp; 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 Breathe Yoga, Home">
<span class="bb-logo-mark" aria-hidden="true">BB</span>
<span class="bb-logo-text">
<span class="bb-logo-name">Big Breathe</span>
<span class="bb-logo-tagline">Yoga &amp; 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" aria-current="page">Corporate Wellness</a>
<a href="/services/prenatal-yoga/" role="menuitem">Prenatal Yoga</a>
<a href="/services/meditation-breathwork/" role="menuitem">Meditation &amp; Breathwork</a>
<a href="/services/online-yoga/" role="menuitem">Online / Virtual Yoga</a>
</div>
</div>
<a href="/contact/">Contact</a>
</nav>
<a href="/contact/" class="btn btn-primary header-cta">Get a Quote</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 &amp; Breathwork</a>
<a href="/services/online-yoga/">Online / Virtual Yoga</a>
</div>
<a href="/contact/" class="btn btn-primary">Get a Quote</a>
</nav>
<main id="main-content">
<section class="bb-inner-hero">
<div class="container">
<p class="section-label" data-animate><a href="/services/">Services</a></p>
<h1 class="inner-hero-h1" data-animate>Corporate Wellness</h1>
<p class="inner-hero-sub" data-animate><!-- DRAFT NEEDED: corporate wellness intro paragraph --></p>
<div style="margin-top: var(--s-8);" data-animate>
<a href="/contact/" class="btn btn-primary">Get a Quote</a>
</div>
</div>
</section>
<section class="bb-content-sec">
<div class="container">
<div class="prose" data-animate>
<h2>Wellness at Work</h2>
<p><!-- DRAFT NEEDED: description of corporate wellness offering --></p>
<h2>What&rsquo;s Included</h2>
<p><!-- DRAFT NEEDED --></p>
<ul>
<li><!-- DRAFT NEEDED --></li>
<li><!-- DRAFT NEEDED --></li>
<li><!-- DRAFT NEEDED --></li>
<li><!-- DRAFT NEEDED --></li>
</ul>
<h2>Formats &amp; Scheduling</h2>
<p><!-- DRAFT NEEDED: in-person / virtual options, session lengths, minimum booking --></p>
</div>
</div>
</section>
<section class="bb-sec-cta">
<div class="cta-orb cta-orb-1" aria-hidden="true"></div>
<div class="cta-orb cta-orb-2" aria-hidden="true"></div>
<div class="container">
<p class="section-label" data-animate>Bring wellness to your team</p>
<h2 class="cta-h2" data-animate>Request a <em>corporate quote</em></h2>
<div class="cta-actions" data-animate>
<a href="/contact/" class="btn btn-primary">Get in Touch</a>
<a href="/services/" class="btn btn-ghost">All Services</a>
</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 Breathe</span>
<span class="bb-logo-tagline">Yoga &amp; 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 &amp; 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">&copy; 2025 Big Breathe. 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>
+165
View File
@@ -0,0 +1,165 @@
<!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: group classes meta description -->">
<meta name="robots" content="index, follow">
<meta property="og:title" content="Group Classes | Big Breathe Yoga &amp; Wellness">
<meta property="og:type" content="website">
<meta property="og:url" content="https://bigbreathe.com/services/group-classes/">
<link rel="canonical" href="https://bigbreathe.com/services/group-classes/">
<title>Group Classes | Big Breathe Yoga &amp; 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 Breathe Yoga, Home">
<span class="bb-logo-mark" aria-hidden="true">BB</span>
<span class="bb-logo-text">
<span class="bb-logo-name">Big Breathe</span>
<span class="bb-logo-tagline">Yoga &amp; 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" aria-current="page">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 &amp; Breathwork</a>
<a href="/services/online-yoga/" role="menuitem">Online / Virtual Yoga</a>
</div>
</div>
<a href="/contact/">Contact</a>
</nav>
<a href="/contact/" class="btn btn-primary header-cta">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 &amp; 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><a href="/services/">Services</a></p>
<h1 class="inner-hero-h1" data-animate>Group Classes</h1>
<p class="inner-hero-sub" data-animate><!-- DRAFT NEEDED: group classes intro paragraph --></p>
<div style="margin-top: var(--s-8);" data-animate>
<a href="/contact/" class="btn btn-primary">Book a Spot</a>
</div>
</div>
</section>
<section class="bb-content-sec">
<div class="container">
<div class="prose" data-animate>
<h2>What to Expect</h2>
<p><!-- DRAFT NEEDED: what to expect paragraph --></p>
<h2>Class Formats</h2>
<p><!-- DRAFT NEEDED: class format description --></p>
<ul>
<li><!-- DRAFT NEEDED: format 1 --></li>
<li><!-- DRAFT NEEDED: format 2 --></li>
<li><!-- DRAFT NEEDED: format 3 --></li>
</ul>
<h2>Schedule &amp; Pricing</h2>
<p><!-- DRAFT NEEDED: schedule / pricing info --></p>
</div>
</div>
</section>
<section class="bb-sec-cta">
<div class="cta-orb cta-orb-1" aria-hidden="true"></div>
<div class="cta-orb cta-orb-2" aria-hidden="true"></div>
<div class="container">
<p class="section-label" data-animate>Ready to join?</p>
<h2 class="cta-h2" data-animate>Reserve your spot in a <em>group class</em></h2>
<div class="cta-actions" data-animate>
<a href="/contact/" class="btn btn-primary">Book a Class</a>
<a href="/services/" class="btn btn-ghost">All Services</a>
</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 Breathe</span>
<span class="bb-logo-tagline">Yoga &amp; 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 &amp; 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">&copy; 2025 Big Breathe. 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>
+204
View File
@@ -0,0 +1,204 @@
<!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: services page meta description -->">
<meta name="robots" content="index, follow">
<meta property="og:title" content="Services | Big Breathe Yoga &amp; Wellness">
<meta property="og:type" content="website">
<meta property="og:url" content="https://bigbreathe.com/services/">
<link rel="canonical" href="https://bigbreathe.com/services/">
<title>Services | Big Breathe Yoga &amp; 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 Breathe Yoga, Home">
<span class="bb-logo-mark" aria-hidden="true">BB</span>
<span class="bb-logo-text">
<span class="bb-logo-name">Big Breathe</span>
<span class="bb-logo-tagline">Yoga &amp; 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 &amp; Breathwork</a>
<a href="/services/online-yoga/" role="menuitem">Online / Virtual Yoga</a>
</div>
</div>
<a href="/contact/">Contact</a>
</nav>
<a href="/contact/" class="btn btn-primary header-cta">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 &amp; 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>What We Offer</p>
<h1 class="inner-hero-h1" data-animate>Yoga &amp; wellness for every body</h1>
<p class="inner-hero-sub" data-animate><!-- DRAFT NEEDED: services overview intro --></p>
</div>
</section>
<section class="bb-sec-services" style="padding-top: var(--s-20);">
<div class="container">
<div class="services-grid">
<a href="/services/group-classes/" class="service-card" data-animate>
<div class="service-card-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M17 20h5v-2a4 4 0 0 0-4-4M9 20H4v-2a4 4 0 0 1 4-4m4-4a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm6 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"/></svg>
</div>
<h2 class="service-card-title">Group Classes</h2>
<p class="service-card-desc"><!-- DRAFT NEEDED --></p>
<span class="service-card-link">Learn more &rarr;</span>
</a>
<a href="/services/private-sessions/" class="service-card" data-animate data-delay="80">
<div class="service-card-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 3.6-7 8-7s8 3 8 7"/></svg>
</div>
<h2 class="service-card-title">Private Sessions</h2>
<p class="service-card-desc"><!-- DRAFT NEEDED --></p>
<span class="service-card-link">Learn more &rarr;</span>
</a>
<a href="/services/corporate-wellness/" class="service-card" data-animate data-delay="160">
<div class="service-card-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M3 21h18M9 21V9l6-6 6 6v12M9 21V9M15 21V9"/></svg>
</div>
<h2 class="service-card-title">Corporate Wellness</h2>
<p class="service-card-desc"><!-- DRAFT NEEDED --></p>
<span class="service-card-link">Learn more &rarr;</span>
</a>
<a href="/services/prenatal-yoga/" class="service-card" data-animate data-delay="240">
<div class="service-card-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M12 22c-4 0-7-3-7-7 0-2.5 1.5-5 4-6.5V5a3 3 0 0 1 6 0v3.5c2.5 1.5 4 4 4 6.5 0 4-3 7-7 7Z"/></svg>
</div>
<h2 class="service-card-title">Prenatal Yoga</h2>
<p class="service-card-desc"><!-- DRAFT NEEDED --></p>
<span class="service-card-link">Learn more &rarr;</span>
</a>
<a href="/services/meditation-breathwork/" class="service-card" data-animate data-delay="320">
<div class="service-card-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="12" cy="12" r="3"/><path d="M12 2v3m0 14v3M2 12h3m14 0h3M5.6 5.6l2.1 2.1m8.6 8.6 2.1 2.1M18.4 5.6l-2.1 2.1M7.7 16.3l-2.1 2.1"/></svg>
</div>
<h2 class="service-card-title">Meditation &amp; Breathwork</h2>
<p class="service-card-desc"><!-- DRAFT NEEDED --></p>
<span class="service-card-link">Learn more &rarr;</span>
</a>
<a href="/services/online-yoga/" class="service-card" data-animate data-delay="400">
<div class="service-card-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8m-4-4v4"/></svg>
</div>
<h2 class="service-card-title">Online / Virtual Yoga</h2>
<p class="service-card-desc"><!-- DRAFT NEEDED --></p>
<span class="service-card-link">Learn more &rarr;</span>
</a>
</div>
</div>
</section>
<section class="bb-sec-cta">
<div class="cta-orb cta-orb-1" aria-hidden="true"></div>
<div class="cta-orb cta-orb-2" aria-hidden="true"></div>
<div class="container">
<p class="section-label" data-animate>Not sure where to start?</p>
<h2 class="cta-h2" data-animate>We&rsquo;ll help you find the <em>right fit</em></h2>
<p class="cta-sub" data-animate><!-- DRAFT NEEDED --></p>
<div class="cta-actions" data-animate>
<a href="/contact/" class="btn btn-primary">Get in Touch</a>
</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 Breathe</span>
<span class="bb-logo-tagline">Yoga &amp; 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 &amp; 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">&copy; 2025 Big Breathe. 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>
+177
View File
@@ -0,0 +1,177 @@
<!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="Big Joe delivers keynote experiences that transform how your audience performs, recovers, and leads. Breathwork-powered talks for conferences, corporate events, and leadership summits.">
<meta name="robots" content="index, follow">
<meta property="og:title" content="Keynotes | Big Breath — Joseph Fauria">
<meta property="og:type" content="website">
<meta property="og:url" content="https://bigbreath.co/services/keynotes/">
<link rel="canonical" href="https://bigbreath.co/services/keynotes/">
<title>Keynotes | Big Breath — Joseph Fauria</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, Home">
<img src="/assets/images/logo-mark.webp" class="nav-logo-mark" alt="" aria-hidden="true" width="36" height="36">
<span class="bb-logo-text">
<span class="bb-logo-name">Big Breath</span>
<span class="bb-logo-tagline">with Joseph Fauria</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/breathwork-sessions/" role="menuitem">Breathwork Sessions</a>
<a href="/services/corporate-wellness/" role="menuitem">Corporate Wellness</a>
<a href="/services/private-sessions/" role="menuitem">Private 1-on-1</a>
<a href="/services/keynotes/" role="menuitem" aria-current="page">Keynotes</a>
<a href="/services/retreats/" role="menuitem">Retreats &amp; Live Experiences</a>
<a href="/services/online/" role="menuitem">Online</a>
</div>
</div>
<a href="/contact/">Contact</a>
</nav>
<a href="/contact/" class="btn btn-primary header-cta">Book a Session</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/breathwork-sessions/">Breathwork Sessions</a>
<a href="/services/corporate-wellness/">Corporate Wellness</a>
<a href="/services/private-sessions/">Private 1-on-1</a>
<a href="/services/keynotes/">Keynotes</a>
<a href="/services/retreats/">Retreats &amp; Live Experiences</a>
<a href="/services/online/">Online</a>
</div>
<a href="/contact/" class="btn btn-primary">Book a Session</a>
</nav>
<main id="main-content">
<section class="bb-inner-hero">
<div class="container">
<p class="section-label" data-animate><a href="/services/">Services</a></p>
<h1 class="inner-hero-h1" data-animate>Keynotes</h1>
<p class="inner-hero-sub" data-animate>A keynote with Big Joe is not a talk. It is a live breathwork experience — your audience leaves breathing differently, thinking more clearly, and ready to perform.</p>
<div style="margin-top: var(--s-8);" data-animate>
<a href="/contact/" class="btn btn-primary">Request Big Joe</a>
</div>
</div>
</section>
<section class="bb-content-sec">
<div class="container">
<div class="prose" data-animate>
<h2>Not a Lecture. A Shift.</h2>
<p>Big Joe has stood on stages across the country — from NFL locker rooms to Fortune 500 leadership summits — and the result is always the same: the room changes. He does not read slides. He guides the room through a live breathing sequence, then connects the science to your industry, your team, and the specific pressures they face every day.</p>
<h2>What a Keynote Includes</h2>
<ul>
<li>45- to 90-minute live format — customizable to your event</li>
<li>Full-room breathwork session guided by Big Joe in real time</li>
<li>The science of HRV, nervous system regulation, and recovery — in plain language</li>
<li>NFL and elite performance case studies tailored to your audience</li>
<li>Q&amp;A and direct engagement with attendees</li>
<li>Post-event tools your team can use immediately</li>
</ul>
<h2>Ideal For</h2>
<ul>
<li>Corporate leadership conferences and all-hands events</li>
<li>Human performance and wellness summits</li>
<li>Sports organizations and athletic programs</li>
<li>Executive off-sites and strategy retreats</li>
<li>Healthcare, finance, and high-demand industry teams</li>
</ul>
<h2>Booking &amp; Logistics</h2>
<p>Big Joe is based in Los Angeles and available for domestic and international engagements. He works directly with event planners on run-of-show integration, A/V needs, and audience preparation. No special equipment is required — just a room and a group ready to breathe.</p>
<p>To check availability and receive a proposal, use the contact form below.</p>
</div>
</div>
</section>
<section class="bb-sec-cta">
<div class="cta-orb cta-orb-1" aria-hidden="true"></div>
<div class="cta-orb cta-orb-2" aria-hidden="true"></div>
<div class="container">
<p class="section-label" data-animate>Book Big Joe for your event</p>
<h2 class="cta-h2" data-animate>Bring the breath to <em>your stage</em></h2>
<div class="cta-actions" data-animate>
<a href="/contact/" class="btn btn-primary">Request a Proposal</a>
<a href="/services/" class="btn btn-ghost">All Services</a>
</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">with Joseph Fauria</span>
</div>
<p class="footer-tagline">Breathwork for athletes, executives, and teams who demand more.</p>
</div>
<div>
<p class="footer-col-title">Services</p>
<ul class="footer-links">
<li><a href="/services/breathwork-sessions/">Breathwork Sessions</a></li>
<li><a href="/services/corporate-wellness/">Corporate Wellness</a></li>
<li><a href="/services/private-sessions/">Private 1-on-1</a></li>
<li><a href="/services/keynotes/">Keynotes</a></li>
<li><a href="/services/retreats/">Retreats &amp; Live Experiences</a></li>
<li><a href="/services/online/">Online</a></li>
</ul>
</div>
<div>
<p class="footer-col-title">Company</p>
<ul class="footer-links">
<li><a href="/about/">About Big Joe</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">&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>
@@ -0,0 +1,164 @@
<!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: meditation &amp; breathwork meta description -->">
<meta name="robots" content="index, follow">
<meta property="og:title" content="Meditation &amp; Breathwork | Big Breathe Yoga &amp; Wellness">
<meta property="og:type" content="website">
<meta property="og:url" content="https://bigbreathe.com/services/meditation-breathwork/">
<link rel="canonical" href="https://bigbreathe.com/services/meditation-breathwork/">
<title>Meditation &amp; Breathwork | Big Breathe Yoga &amp; 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 Breathe Yoga, Home">
<span class="bb-logo-mark" aria-hidden="true">BB</span>
<span class="bb-logo-text">
<span class="bb-logo-name">Big Breathe</span>
<span class="bb-logo-tagline">Yoga &amp; 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" aria-current="page">Meditation &amp; Breathwork</a>
<a href="/services/online-yoga/" role="menuitem">Online / Virtual Yoga</a>
</div>
</div>
<a href="/contact/">Contact</a>
</nav>
<a href="/contact/" class="btn btn-primary header-cta">Book a Session</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 &amp; Breathwork</a>
<a href="/services/online-yoga/">Online / Virtual Yoga</a>
</div>
<a href="/contact/" class="btn btn-primary">Book a Session</a>
</nav>
<main id="main-content">
<section class="bb-inner-hero">
<div class="container">
<p class="section-label" data-animate><a href="/services/">Services</a></p>
<h1 class="inner-hero-h1" data-animate>Meditation &amp; Breathwork</h1>
<p class="inner-hero-sub" data-animate><!-- DRAFT NEEDED: meditation &amp; breathwork intro paragraph --></p>
<div style="margin-top: var(--s-8);" data-animate>
<a href="/contact/" class="btn btn-primary">Book a Session</a>
</div>
</div>
</section>
<section class="bb-content-sec">
<div class="container">
<div class="prose" data-animate>
<h2>The Power of the Breath</h2>
<p><!-- DRAFT NEEDED: overview of breathwork &amp; meditation philosophy --></p>
<h2>Techniques We Teach</h2>
<ul>
<li><!-- DRAFT NEEDED: technique 1 --></li>
<li><!-- DRAFT NEEDED: technique 2 --></li>
<li><!-- DRAFT NEEDED: technique 3 --></li>
</ul>
<h2>Who Benefits</h2>
<p><!-- DRAFT NEEDED: ideal participants / use cases --></p>
</div>
</div>
</section>
<section class="bb-sec-cta">
<div class="cta-orb cta-orb-1" aria-hidden="true"></div>
<div class="cta-orb cta-orb-2" aria-hidden="true"></div>
<div class="container">
<p class="section-label" data-animate>Find your stillness</p>
<h2 class="cta-h2" data-animate>Book a <em>meditation session</em></h2>
<div class="cta-actions" data-animate>
<a href="/contact/" class="btn btn-primary">Book a Session</a>
<a href="/services/" class="btn btn-ghost">All Services</a>
</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 Breathe</span>
<span class="bb-logo-tagline">Yoga &amp; 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 &amp; 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">&copy; 2025 Big Breathe. 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>
+168
View File
@@ -0,0 +1,168 @@
<!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="Big Breath online — live virtual sessions and on-demand breathwork with Big Joe. Practice on your schedule, from anywhere in the world.">
<meta name="robots" content="index, follow">
<meta property="og:title" content="Online | Big Breath — Joseph Fauria">
<meta property="og:type" content="website">
<meta property="og:url" content="https://bigbreath.co/services/online/">
<link rel="canonical" href="https://bigbreath.co/services/online/">
<title>Online | Big Breath — Joseph Fauria</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, Home">
<img src="/assets/images/logo-mark.webp" class="nav-logo-mark" alt="" aria-hidden="true" width="36" height="36">
<span class="bb-logo-text">
<span class="bb-logo-name">Big Breath</span>
<span class="bb-logo-tagline">with Joseph Fauria</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/breathwork-sessions/" role="menuitem">Breathwork Sessions</a>
<a href="/services/corporate-wellness/" role="menuitem">Corporate Wellness</a>
<a href="/services/private-sessions/" role="menuitem">Private 1-on-1</a>
<a href="/services/keynotes/" role="menuitem">Keynotes</a>
<a href="/services/retreats/" role="menuitem">Retreats &amp; Live Experiences</a>
<a href="/services/online/" role="menuitem" aria-current="page">Online</a>
</div>
</div>
<a href="/contact/">Contact</a>
</nav>
<a href="/contact/" class="btn btn-primary header-cta">Book a Session</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/breathwork-sessions/">Breathwork Sessions</a>
<a href="/services/corporate-wellness/">Corporate Wellness</a>
<a href="/services/private-sessions/">Private 1-on-1</a>
<a href="/services/keynotes/">Keynotes</a>
<a href="/services/retreats/">Retreats &amp; Live Experiences</a>
<a href="/services/online/">Online</a>
</div>
<a href="/contact/" class="btn btn-primary">Book a Session</a>
</nav>
<main id="main-content">
<section class="bb-inner-hero">
<div class="container">
<p class="section-label" data-animate><a href="/services/">Services</a></p>
<h1 class="inner-hero-h1" data-animate>Online</h1>
<p class="inner-hero-sub" data-animate>Big Breath on your schedule. Live virtual sessions and on-demand content — the same breath, wherever you are in the world.</p>
<div style="margin-top: var(--s-8);" data-animate>
<a href="/contact/" class="btn btn-primary">Start Online</a>
</div>
</div>
</section>
<section class="bb-content-sec">
<div class="container">
<div class="prose" data-animate>
<h2>Practice Without Borders</h2>
<p>Big Joe has guided sessions across 15 countries. Distance is not a barrier — breathwork translates completely over video. Many of his most consistent clients are executives and athletes who do not live in Los Angeles. They show up virtually, week after week, because the work moves.</p>
<h2>What Online Includes</h2>
<ul>
<li><strong>Live 1-on-1 virtual sessions</strong> — private sessions with Big Joe via video call. Same protocol, same attention, fully personalized.</li>
<li><strong>Live group sessions</strong> — join a scheduled virtual group class. Typically 45 to 60 minutes. Dates announced to the mailing list.</li>
<li><strong>On-demand library</strong> — recorded sessions you can return to: morning activation, stress reset, pre-performance, deep sleep preparation. Available to active clients.</li>
<li><strong>Virtual corporate programs</strong> — team sessions delivered live over video for distributed organizations. Minimum 5 participants.</li>
</ul>
<h2>How to Get Started</h2>
<p>Use the contact form to tell us what you are working toward — performance, recovery, stress, sleep, or something else. Big Joe or his team will reach back within 24 hours to match you with the right format and schedule an intake call.</p>
<h2>Technology</h2>
<p>Sessions run over Zoom or Google Meet. No special software or equipment is required beyond a stable internet connection and a quiet space where you can lie flat.</p>
</div>
</div>
</section>
<section class="bb-sec-cta">
<div class="cta-orb cta-orb-1" aria-hidden="true"></div>
<div class="cta-orb cta-orb-2" aria-hidden="true"></div>
<div class="container">
<p class="section-label" data-animate>Anywhere. Any time zone.</p>
<h2 class="cta-h2" data-animate>Start your online <em>practice</em></h2>
<div class="cta-actions" data-animate>
<a href="/contact/" class="btn btn-primary">Book a Virtual Session</a>
<a href="/services/" class="btn btn-ghost">All Services</a>
</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">with Joseph Fauria</span>
</div>
<p class="footer-tagline">Breathwork for athletes, executives, and teams who demand more.</p>
</div>
<div>
<p class="footer-col-title">Services</p>
<ul class="footer-links">
<li><a href="/services/breathwork-sessions/">Breathwork Sessions</a></li>
<li><a href="/services/corporate-wellness/">Corporate Wellness</a></li>
<li><a href="/services/private-sessions/">Private 1-on-1</a></li>
<li><a href="/services/keynotes/">Keynotes</a></li>
<li><a href="/services/retreats/">Retreats &amp; Live Experiences</a></li>
<li><a href="/services/online/">Online</a></li>
</ul>
</div>
<div>
<p class="footer-col-title">Company</p>
<ul class="footer-links">
<li><a href="/about/">About Big Joe</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">&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>
+165
View File
@@ -0,0 +1,165 @@
<!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: private sessions meta description -->">
<meta name="robots" content="index, follow">
<meta property="og:title" content="Private Sessions | Big Breathe Yoga &amp; Wellness">
<meta property="og:type" content="website">
<meta property="og:url" content="https://bigbreathe.com/services/private-sessions/">
<link rel="canonical" href="https://bigbreathe.com/services/private-sessions/">
<title>Private Sessions | Big Breathe Yoga &amp; 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 Breathe Yoga, Home">
<span class="bb-logo-mark" aria-hidden="true">BB</span>
<span class="bb-logo-text">
<span class="bb-logo-name">Big Breathe</span>
<span class="bb-logo-tagline">Yoga &amp; 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" aria-current="page">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 &amp; Breathwork</a>
<a href="/services/online-yoga/" role="menuitem">Online / Virtual Yoga</a>
</div>
</div>
<a href="/contact/">Contact</a>
</nav>
<a href="/contact/" class="btn btn-primary header-cta">Book a Session</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 &amp; Breathwork</a>
<a href="/services/online-yoga/">Online / Virtual Yoga</a>
</div>
<a href="/contact/" class="btn btn-primary">Book a Session</a>
</nav>
<main id="main-content">
<section class="bb-inner-hero">
<div class="container">
<p class="section-label" data-animate><a href="/services/">Services</a></p>
<h1 class="inner-hero-h1" data-animate>Private Sessions</h1>
<p class="inner-hero-sub" data-animate><!-- DRAFT NEEDED: private sessions intro paragraph --></p>
<div style="margin-top: var(--s-8);" data-animate>
<a href="/contact/" class="btn btn-primary">Book a Session</a>
</div>
</div>
</section>
<section class="bb-content-sec">
<div class="container">
<div class="prose" data-animate>
<h2>One-on-One Instruction</h2>
<p><!-- DRAFT NEEDED: one-on-one description --></p>
<h2>Who This Is For</h2>
<p><!-- DRAFT NEEDED: ideal client description --></p>
<ul>
<li><!-- DRAFT NEEDED --></li>
<li><!-- DRAFT NEEDED --></li>
<li><!-- DRAFT NEEDED --></li>
</ul>
<h2>Session Details &amp; Pricing</h2>
<p><!-- DRAFT NEEDED: duration, pricing, how to book --></p>
</div>
</div>
</section>
<section class="bb-sec-cta">
<div class="cta-orb cta-orb-1" aria-hidden="true"></div>
<div class="cta-orb cta-orb-2" aria-hidden="true"></div>
<div class="container">
<p class="section-label" data-animate>Personalized practice</p>
<h2 class="cta-h2" data-animate>Book your <em>private session</em> today</h2>
<div class="cta-actions" data-animate>
<a href="/contact/" class="btn btn-primary">Book a Session</a>
<a href="/services/" class="btn btn-ghost">All Services</a>
</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 Breathe</span>
<span class="bb-logo-tagline">Yoga &amp; 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 &amp; 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">&copy; 2025 Big Breathe. 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>
+174
View File
@@ -0,0 +1,174 @@
<!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="Multi-day breathwork retreats and live experiences with Big Joe. Immersive sessions for individuals and organizations in intimate settings around the world.">
<meta name="robots" content="index, follow">
<meta property="og:title" content="Retreats &amp; Live Experiences | Big Breath — Joseph Fauria">
<meta property="og:type" content="website">
<meta property="og:url" content="https://bigbreath.co/services/retreats/">
<link rel="canonical" href="https://bigbreath.co/services/retreats/">
<title>Retreats &amp; Live Experiences | Big Breath — Joseph Fauria</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, Home">
<img src="/assets/images/logo-mark.webp" class="nav-logo-mark" alt="" aria-hidden="true" width="36" height="36">
<span class="bb-logo-text">
<span class="bb-logo-name">Big Breath</span>
<span class="bb-logo-tagline">with Joseph Fauria</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/breathwork-sessions/" role="menuitem">Breathwork Sessions</a>
<a href="/services/corporate-wellness/" role="menuitem">Corporate Wellness</a>
<a href="/services/private-sessions/" role="menuitem">Private 1-on-1</a>
<a href="/services/keynotes/" role="menuitem">Keynotes</a>
<a href="/services/retreats/" role="menuitem" aria-current="page">Retreats &amp; Live Experiences</a>
<a href="/services/online/" role="menuitem">Online</a>
</div>
</div>
<a href="/contact/">Contact</a>
</nav>
<a href="/contact/" class="btn btn-primary header-cta">Book a Session</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/breathwork-sessions/">Breathwork Sessions</a>
<a href="/services/corporate-wellness/">Corporate Wellness</a>
<a href="/services/private-sessions/">Private 1-on-1</a>
<a href="/services/keynotes/">Keynotes</a>
<a href="/services/retreats/">Retreats &amp; Live Experiences</a>
<a href="/services/online/">Online</a>
</div>
<a href="/contact/" class="btn btn-primary">Book a Session</a>
</nav>
<main id="main-content">
<section class="bb-inner-hero">
<div class="container">
<p class="section-label" data-animate><a href="/services/">Services</a></p>
<h1 class="inner-hero-h1" data-animate>Retreats &amp; Live Experiences</h1>
<p class="inner-hero-sub" data-animate>Multi-day immersive experiences with Big Joe. Small groups. Deep work. The kind of shift that stays with you long after you go home.</p>
<div style="margin-top: var(--s-8);" data-animate>
<a href="/contact/" class="btn btn-primary">Inquire About Retreats</a>
</div>
</div>
</section>
<section class="bb-content-sec">
<div class="container">
<div class="prose" data-animate>
<h2>Immersion Over Instruction</h2>
<p>A single session can open a door. A retreat walks you through it. Big Joe leads intimate multi-day experiences — two to five days — where breathwork is woven into every morning, every meal break, every evening wind-down. The result is a nervous system reset that one-hour sessions cannot replicate.</p>
<h2>What Retreats Cover</h2>
<ul>
<li>Daily guided breathwork: morning activation, midday recalibration, evening recovery</li>
<li>HRV tracking and biofeedback to show each participant real-time results</li>
<li>Cold exposure and movement integration (where facilities allow)</li>
<li>One-on-one time with Big Joe for personal protocol design</li>
<li>Group processing sessions — what is coming up, what is shifting</li>
<li>A custom home practice plan for every participant</li>
</ul>
<h2>Retreat Formats</h2>
<ul>
<li><strong>Individual retreats</strong> — open enrollment, small group (816 participants), held in curated locations across the U.S. and internationally</li>
<li><strong>Private group retreats</strong> — custom designed for executive teams, athletic programs, or private organizations. Minimum 6 participants. Location is your choice.</li>
<li><strong>Corporate immersions</strong> — 2-day off-site experiences built around leadership performance, burnout recovery, or team cohesion</li>
</ul>
<h2>Upcoming Dates</h2>
<p>Retreat dates and locations are announced to the mailing list first. Join the list or contact us directly to learn what is next on the calendar.</p>
</div>
</div>
</section>
<section class="bb-sec-cta">
<div class="cta-orb cta-orb-1" aria-hidden="true"></div>
<div class="cta-orb cta-orb-2" aria-hidden="true"></div>
<div class="container">
<p class="section-label" data-animate>Go deeper</p>
<h2 class="cta-h2" data-animate>Join the next <em>retreat</em></h2>
<div class="cta-actions" data-animate>
<a href="/contact/" class="btn btn-primary">Inquire Now</a>
<a href="/services/" class="btn btn-ghost">All Services</a>
</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">with Joseph Fauria</span>
</div>
<p class="footer-tagline">Breathwork for athletes, executives, and teams who demand more.</p>
</div>
<div>
<p class="footer-col-title">Services</p>
<ul class="footer-links">
<li><a href="/services/breathwork-sessions/">Breathwork Sessions</a></li>
<li><a href="/services/corporate-wellness/">Corporate Wellness</a></li>
<li><a href="/services/private-sessions/">Private 1-on-1</a></li>
<li><a href="/services/keynotes/">Keynotes</a></li>
<li><a href="/services/retreats/">Retreats &amp; Live Experiences</a></li>
<li><a href="/services/online/">Online</a></li>
</ul>
</div>
<div>
<p class="footer-col-title">Company</p>
<ul class="footer-links">
<li><a href="/about/">About Big Joe</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">&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>
+14
View File
@@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url><loc>https://bigbreathe.co/</loc><changefreq>weekly</changefreq><priority>1.0</priority></url>
<url><loc>https://bigbreathe.co/about/</loc><changefreq>monthly</changefreq><priority>0.8</priority></url>
<url><loc>https://bigbreathe.co/services/</loc><changefreq>monthly</changefreq><priority>0.9</priority></url>
<url><loc>https://bigbreathe.co/services/breathwork-sessions/</loc><changefreq>monthly</changefreq><priority>0.8</priority></url>
<url><loc>https://bigbreathe.co/services/corporate-wellness/</loc><changefreq>monthly</changefreq><priority>0.8</priority></url>
<url><loc>https://bigbreathe.co/services/private-sessions/</loc><changefreq>monthly</changefreq><priority>0.8</priority></url>
<url><loc>https://bigbreathe.co/services/keynotes/</loc><changefreq>monthly</changefreq><priority>0.8</priority></url>
<url><loc>https://bigbreathe.co/services/retreats/</loc><changefreq>monthly</changefreq><priority>0.8</priority></url>
<url><loc>https://bigbreathe.co/contact/</loc><changefreq>monthly</changefreq><priority>0.7</priority></url>
<url><loc>https://bigbreathe.co/privacy-policy/</loc><changefreq>yearly</changefreq><priority>0.3</priority></url>
<url><loc>https://bigbreathe.co/terms-of-service/</loc><changefreq>yearly</changefreq><priority>0.3</priority></url>
</urlset>
+55
View File
@@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="noindex, follow">
<link rel="canonical" href="https://bigbreathe.com/terms-of-service/">
<title>Terms of Service | Big Breathe Yoga &amp; 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>
<header class="bb-header" role="banner">
<div class="header-inner">
<a href="/" class="bb-logo" aria-label="Big Breathe Yoga, Home">
<span class="bb-logo-mark" aria-hidden="true">BB</span>
<span class="bb-logo-text">
<span class="bb-logo-name">Big Breathe</span>
<span class="bb-logo-tagline">Yoga &amp; Wellness</span>
</span>
</a>
</div>
</header>
<main id="main-content">
<section class="bb-inner-hero">
<div class="container">
<h1 class="inner-hero-h1">Terms of Service</h1>
<p class="inner-hero-sub">Last updated: <!-- DRAFT NEEDED: date --></p>
</div>
</section>
<section class="bb-content-sec">
<div class="container">
<div class="prose">
<p><!-- DRAFT NEEDED: terms of service content --></p>
</div>
</div>
</section>
</main>
<footer class="bb-footer" role="contentinfo">
<div class="container">
<div class="footer-bottom" style="padding-top:0;border-top:none;">
<p class="footer-copy">&copy; 2025 Big Breathe. 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>