Hero Section (Homepage Slider)

[Alexandrbig1]

Description:
Implement the Hero section on the homepage featuring a full-width image slider with auto-play, pagination dots, and CTA buttons.

Requirements:

• Slider Functionality:
  • Auto-slide through 4 images
  • Each image corresponds to a pagination dot (4 total)
  • User can manually navigate by clicking a dot
  • Active dot should have a stroke animation that acts like a timer (fills from 0 → 100%). When full, automatically advance to the next slide
  • Loop slides infinitely
• Content & CTA Buttons:
  • Each slide contains:
    • Background image
    • CTA button (different depending on slide)
      • “Shop Now” → navigates to /products
      • “Join Us” → navigates to /about-corex
  • Button text dynamically changes based on the current slide
• Styling/Design:
  • Responsive (desktop + mobile)
  • Smooth transitions (fade or slide effect)
  • Pagination dots positioned under hero image
  • Active dot → animated border stroke timer, others → filled style
• Libraries (optional):
  You may use either:
  • SwiperJS → (most popular React slider library, highly flexible, supports autoplay & pagination out of the box)
  • React Slick → (classic, well-known, needs slick-carousel CSS)
  • OR implement a lightweight custom slider with React state & setInterval.
• Use whichever approach feels best — contributor’s choice.

Assets:

Acceptance Criteria:

• Slider auto-plays every X seconds (configurable, e.g. 5s per slide)
• Pagination dots clickable and update current slide
• Active dot shows animated stroke timer effect
• “Shop Now” button redirects to /products
• “Join Us” button redirects to /about-corex
• Mobile responsive & smooth animations

---

⚠️ Note for contributors:

• This section is critical — please ensure high quality implementation.
• Please follow accessibility rules (semantic HTML, alt attributes, ARIA labels if needed).
• Use consistent file naming conventions (Hero.tsx, Hero.module.css, etc.).

[rmbarley]

I would like to work on this. I just requested access to the Figma project.

[Alexandrbig1]

@rmbarley, thanks for your interest! I've given you access to the Figma project! Looking forward to your PR's!

[AparAgarwal]

Hey @Alexandrbig1, if this is still open, would it be okay if I took this on?

[Alexandrbig1]

Hi @AparAgarwal, this task is currently assigned to another contributor who is working on it. Please check the open tasks in the "Todo" column, and let me know if any of them interest you. I’d be happy to assign one to you!