HB

HB Beauty

Before & After Gallery

Witness the transformative power of professional hair care. Drag the slider to see the stunning results.

Real Results, Real Transformations

Each transformation tells a story of confidence, beauty, and expert craftsmanship. Drag the slider to reveal the before and after.

After
Before
Before
After
← Drag to compare →

Balayage Transformation

Hand-painted highlights for a natural, sun-kissed look

After
Before
Before
After
← Drag to compare →

Color Correction

From brassy to beautiful blonde perfection

After
Before
Before
After
← Drag to compare →

Keratin Treatment

Smooth, frizz-free, and manageable hair

After
Before
Before
After
← Drag to compare →

Wedding Hair Styling

Elegant updo for your special day

Ready for Your Transformation?

Book your appointment today and experience the HB Beauty difference. Professional styling in Kitchener-Waterloo or at your location.

Book Appointment 📞 Call (226) 210-4099

How to Use This Component

Basic Usage in Astro:

---
import BeforeAfterSlider from '@/components/BeforeAfterSlider';
---

<BeforeAfterSlider
  client:load
  beforeImage="/path/to/before.jpg"
  afterImage="/path/to/after.jpg"
  beforeLabel="Before"
  afterLabel="After"
/>

Props:

  • beforeImage (required): URL or path to the before image
  • afterImage (required): URL or path to the after image
  • beforeLabel (optional): Label for before state (default: "Before")
  • afterLabel (optional): Label for after state (default: "After")
  • className (optional): Additional CSS classes
  • initialPosition (optional): Starting slider position 0-100 (default: 50)

Features:

  • Smooth drag interaction with mouse and touch support
  • Click anywhere to jump to that position
  • Responsive design that works on all screen sizes
  • Elegant wine/rose color scheme matching your brand
  • Accessible with proper labels and visual feedback