// Mid-page sections: value props, trust counters, trips, how it works, why, included, gallery. // All photos are real Shubie River Wranglers — muddy-brown tidal bore action only. const PHOTOS = { // Big front-on splash shots splash: "assets/photos/action-splash.jpeg", action1: "assets/photos/action-boat.jpeg", action2: "assets/photos/action-splash.jpeg", action3: "assets/photos/action-wave.jpeg", // Calmer / cruising shots raft: "assets/photos/family-wave.webp", river: "assets/photos/red-boat.jpeg", team: "assets/photos/jumping-mud.jpeg", // Mud & after-shots coast: "assets/photos/mud-friends.webp", group: "assets/photos/mud-group.jpeg", mudSlide:"assets/photos/mud-slide.webp", rainy: "assets/photos/rainy-day.webp", }; /* ---------------------------------- VALUE STRIP (3 pillars w/ body copy) ---------------------------------- */ function ValueStrip() { const items = [ { title: "Professional Guides", copy: "Trained, Transport Canada-certified river masters who've ridden the Shubie for thousands of tides.", cta: "Meet the crew", href: "#about" }, { title: "Award-Winning", copy: "Tripadvisor Travellers' Choice Best of the Best — seven years running, 2020 to 2026.", cta: "See the reviews", href: "#reviews" }, { title: "No Paddling Required", copy: "Just hold on and enjoy the wave. We do the work — you get the bucket-list story.", cta: "See how it works", href: "#how" }, ]; return (
{/* Full-bleed photo background */}
); } /* ---------------------------------- EAGLE RESCUE (story · dark left-right) ---------------------------------- */ function WhyRaftWithUs() { const paragraphs = [ "The bald eagles on the Shubenacadie river are a huge part in helping us deliver such great tours every day, so it was nice to be able to help one out when it needed a hand. Our close encounter only added to the enormous amount of respect we already had for these incredible birds.", "What started as a normal day turned into a wild and unique Shubenacadie experience. We were out rafting when we came across an injured eagle on the sandbar. After seeing this eagle struggle to take off from the sandbar we knew something was wrong. After several failed attempts to fly off the sand bar, the eagle found himself caught in the incoming tide and quickly swept away by the tidal bore.", "We watched and tried to position ourselves down the river and close enough to the eagle to lend a hand however we could. Despite continuing to struggle and encountering some quite large waves, it was able to maintain its upright posture.", "Now, we had a strong sense that the eagle had sustained a severe injury that prevented him from taking flight. We managed to get him into the boat safely and we did our best to keep him at ease as we travelled back to our rafting location.", "Once we arrived back to our site @hopeforwildlife arrived to take the eagle and provide him with the care he required. The eagle recovered completely from its injuries and was eventually released to its natural environment.", ]; return (
{/* LEFT — text */}
A true story

Shubie River Wranglers
Eagle Rescue.

{paragraphs.map((p, i) => (

{p}

))}
In partnership with{" "} Hope for Wildlife
{/* RIGHT — media: all 4 in one row */}
{[ "assets/photos/eagle-closeup.webp", "assets/photos/eagle-smile.webp", "assets/photos/eagle-release.webp", ].map((src, i) => (
))}
); } /* ---------------------------------- TRUST / COUNTERS ---------------------------------- */ function Counter({ to, suffix = "", duration = 1600 }) { const [val, setVal] = React.useState(0); const [armed, setArmed] = React.useState(false); const ref = React.useRef(null); // Watch viewport intersection — flip `armed` once, then disconnect. // Separated from the animation so StrictMode double-effect can't strand us // mid-callback (the previous "started.current" guard could deadlock if the // first observer fired with isIntersecting:false during the dev double-mount). React.useEffect(() => { if (!ref.current) return; // Fallback: if IO is missing, animate immediately. if (typeof IntersectionObserver === "undefined") { setArmed(true); return; } const obs = new IntersectionObserver((entries) => { for (const e of entries) { if (e.isIntersecting || e.intersectionRatio > 0) { setArmed(true); obs.disconnect(); return; } } }, { threshold: 0, rootMargin: "0px 0px -10% 0px" }); obs.observe(ref.current); // Belt-and-braces: if the section is already near the fold on first paint, // kick off after a tick anyway. const fallback = setTimeout(() => { const r = ref.current?.getBoundingClientRect(); if (r && r.top < window.innerHeight + 200) setArmed(true); }, 250); return () => { obs.disconnect(); clearTimeout(fallback); }; }, []); React.useEffect(() => { if (!armed) return; const start = performance.now(); let raf; const tick = (now) => { const t = Math.min(1, (now - start) / duration); const eased = 1 - Math.pow(1 - t, 3); setVal(Math.floor(to * eased)); if (t < 1) raf = requestAnimationFrame(tick); else setVal(to); }; raf = requestAnimationFrame(tick); return () => { if (raf) cancelAnimationFrame(raf); }; }, [armed, to, duration]); return {val.toLocaleString()}{suffix}; } function TrustBar() { const awards = [2026, 2025, 2024, 2023, 2022, 2021, 2020]; return (
Trusted by adventurers

Best of the Best.
Seven years running.

Travellers' Choice
{/* Award badge wall */}
{awards.map((y) => ( {`Tripadvisor ))}
{/* Counters */}
{[ { n: 935, suf: "+", label: "5 Star Reviews", sub: "Tripadvisor + Google" }, { n: 10000, suf: "+", label: "Tours Completed", sub: "Since 2013" }, { n: 20000, suf: "+", label: "Happy Customers", sub: "From across Canada & beyond" }, { n: 12, suf: "+", label: "Years Operating", sub: "Family-run · Nova Scotian" }, ].map((c, i, arr) => (
{c.label}
{c.sub}
))}
{/* CTA */}
Join the crowd that already gave us 5 stars.
Read the reviews Book your trip
); } /* ---------------------------------- TRIPS ---------------------------------- */ const TRIPS = [ { tier: "01", name: "Regular Tide", intensity: 2, intensityLabel: "Splashy & fun", waveCopy: "2 – 4 ft waves", weight: "Weight requirement 50 lb", desc: "Small to medium waves with plenty of excitement! As a result, this tour is great for first-timers or for families with young kids. A gentle introduction to Tidal Bore Rafting.", includes: ["Mud Sliding"], img: "assets/photos/tier-1.jpeg", tagline: "Start here", }, { tier: "02", name: "High Tide", intensity: 4, intensityLabel: "Big rolling waves", waveCopy: "4 – 8 ft waves", weight: "Weight requirement 50 lb", desc: "Medium to Large waves! The full experience of active waves and playing within the rapids. Great for rafters of all levels!", includes: ["Mud Sliding"], img: "assets/photos/tier-2.jpeg", tagline: "Most popular", popular: true, }, { tier: "03", name: "Extreme Tide", intensity: 5, intensityLabel: "10-ft monsters", waveCopy: "8 – 12 ft waves", weight: "Weight requirement 50 lb", desc: "Often times the largest waves on the river! This suits adventure seekers who feel comfortable being tossed around. Prepare for everything that the Shubie can throw at you!", includes: ["Mud Sliding"], img: "assets/photos/tier-3.jpeg", tagline: "Bucket-list", }, ]; function IntensityMeter({ value = 3, label }) { return (
{[1,2,3,4,5].map(i => (
))}
{label}
); } function TripCard({ trip }) { return (
{/* Photo header */}
); } function Trips() { return (
Choose your tide

Which Rafting Trip
Is Right For Me?

A true Nova Scotia Tidal Bore Rafting adventure! Experience the largest waves the Shubenacadie River has to offer on our 8 person Zodiac boats. Join us for a Rafting Tour on the worlds highest tides, and experience what the Bay of Fundy has to offer!

{TRIPS.map((t, i) => )}
); } /* ---------------------------------- HOW IT WORKS ---------------------------------- */ function HowItWorks() { const steps = [ { n: "01", title: "Arrive & Gear Up", time: "30 min before tide", copy: "Meet us at our site in Green Oaks. We'll set you up with a wetsuit, booties, splash jacket, and helmet." }, { n: "02", title: "Meet Your Guide", time: "10 min", copy: "Your river master walks you through the day and what to expect. No experience needed." }, { n: "03", title: "Catch The Tidal Bore", time: "2 hrs on water", copy: "Ride the incoming Bay of Fundy tide as it surges up the Shubenacadie and builds wave after wave." }, { n: "04", title: "Mud Slide & Celebrate", time: "Wrap & celebrate", copy: "Finish with a mud slide on the river bank, then warm up and swap stories." }, ]; return (
How it works

Your Day On
The Shubenacadie.

Never rafted before? You're in good company — most of our guests haven't either. It's four simple steps and a few hours you'll never forget.

{/* Horizontal numbered timeline */}
{/* connecting rule */}
Book your day
); } /* ---------------------------------- WHY RAFT WITH US (merged credibility + welcome) ---------------------------------- */ function WhyUs() { const points = [ { icon: , t: "Safety-first crew", c: "Transport Canada-certified guides, OFA-3 first-aid, marine radios on every boat." }, { icon: , t: "Award-winning", c: "Tripadvisor Best of the Best seven years running — Travelers' Choice 2020 – 2026." }, { icon: , t: "Locally run", c: "Family-owned and operated. Same guides who grew up on this river still lead every trip." }, { icon: , t: "12+ years on the Shubie", c: "We've ridden the bore hundreds of times. Nobody knows this tide better." }, ]; return (
{/* Top: heading on left, story paragraphs on right */}
Why raft with us

Two brothers.
One stubborn wave.

We started in 2013 with one Zodiac and a hunch that the Shubenacadie tidal bore was the most underrated adventure in Canada. A decade later, our crew has guided hundreds of first-timers to the wave — and still gets fired up every single tide.

We're proudly Nova Scotian, family-run, and obsessed with making sure every guest leaves muddy, grinning, and already planning their next trip.

{/* Bottom: photo collage + CTA */}
Book your trip
South Maitland, NS · 45 min from Halifax
); } /* About section is intentionally merged into WhyUs above. Keep no-op exports so existing imports don't break. */ function About() { return null; } /* ---------------------------------- INCLUDED + PRACTICAL ---------------------------------- */ function Included() { const list = [ "Wetsuit, splash jacket, booties & helmet", "Coast Guard-approved life vest", "Professional river guide for every boat", "Tidal bore wave ride + mud slide session", "Hot showers + changing rooms", "Free parking at our base camp", ]; return (
What's included

Everything's included but
your sense of adventure.

    {list.map((x, i) => (
  • {x}
    • ))}
); } function Info({ icon, title, text }) { return (
{icon}
{title}
{text}
); } Object.assign(window, { PHOTOS, ValueStrip, WhyRaftWithUs, TrustBar, Trips, HowItWorks, WhyUs, About, Included, Counter, Gallery, RiverMap, }); /* ---------------------------------- GALLERY (slider) ---------------------------------- */ const GALLERY = [ { src: PHOTOS.splash, alt: "Big tidal bore splash" }, { src: PHOTOS.team, alt: "Group jumping in life vests on the mudflats" }, { src: PHOTOS.action1, alt: "Red Zodiac riding the leading wave" }, { src: PHOTOS.coast, alt: "Group covered in mud, peace signs all around" }, { src: PHOTOS.action3, alt: "Guests laughing as the wave hits the boat" }, { src: PHOTOS.river, alt: "Smiling guests on board" }, { src: PHOTOS.mudSlide, alt: "Mud sliding the chocolate-brown flats" }, { src: PHOTOS.rainy, alt: "Guests in rain gear on a moody afternoon tide" }, { src: PHOTOS.group, alt: "The full crew, muddy and grinning" }, { src: PHOTOS.raft, alt: "Family waving from the red Zodiac" }, ]; function Gallery() { const trackRef = React.useRef(null); const [i, setI] = React.useState(0); const total = GALLERY.length; // Scroll the track to a given index. When the jump crosses the loop boundary // (last→first), use instant-scroll so it doesn't rewind across the whole row; // otherwise smooth-scroll one slide at a time. const goTo = (nextIdx, opts = {}) => { const t = trackRef.current; if (!t) return; const child = t.children[nextIdx]; if (!child) return; const isWrap = opts.wrap === true || (i === total - 1 && nextIdx === 0) || (i === 0 && nextIdx === total - 1); t.scrollTo({ left: child.offsetLeft - t.offsetLeft, behavior: isWrap ? "auto" : "smooth", }); setI(nextIdx); }; const next = () => goTo((i + 1) % total); const prev = () => goTo((i - 1 + total) % total); // Sync state on manual scroll/swipe React.useEffect(() => { const track = trackRef.current; if (!track) return; let raf = null; const onScroll = () => { if (raf) return; raf = requestAnimationFrame(() => { raf = null; const x = track.scrollLeft; let nearest = 0, best = Infinity; Array.from(track.children).forEach((c, idx) => { const d = Math.abs(c.offsetLeft - track.offsetLeft - x); if (d < best) { best = d; nearest = idx; } }); setI(nearest); }); }; track.addEventListener("scroll", onScroll, { passive: true }); return () => track.removeEventListener("scroll", onScroll); }, []); // Autoplay — advances forward only. When wrapping back to first, jumps // without an animated rewind so the user never sees the slides scroll backwards. React.useEffect(() => { const id = setInterval(() => { goTo((i + 1) % total); }, 5500); return () => clearInterval(id); }, [i, total]); return (
The wave, the mud, the grin

The Shubie River
Wranglers Experience.

{String(i + 1).padStart(2, "0")} / {String(total).padStart(2, "0")}
{/* Track — horizontal scroll with snap */}
{GALLERY.map((g, idx) => (
))}
{/* Dots */}
{GALLERY.map((_, idx) => (
{/* CTA */}
); } /* ---------------------------------- RIVER MAP (full-width image) ---------------------------------- */ function RiverMap() { return (
Rafting with River Wranglers — illustrated map of the Shubenacadie River from Maitland to Urbania, marking mud sliding, swim spots, rapids and tidal-bore landmarks.
); }