DurianPy Sponsor Section

[ArJSarmiento]

The DurianPy website requires a Sponsors section to acknowledge and showcase companies that support the community. This section should be visually engaging, interactive, and responsive, featuring sponsor logos, testimonials, and a call-to-action button for potential sponsors.

---

Requirements:

1. Layout & Design

✅ Section Heading & Call-to-Action

• Title: "Our Sponsors"
  • "Our" in white, "Sponsors" in DurianPy’s yellow/gold branding.
• Short Description:
  • "A big thank you to our generous sponsors whose support makes our work possible and helps us create lasting impact."
• "Be Our Sponsor" Button:
  • Yellow rounded button that links to /404 for now.

✅ Sponsor Showcase & Testimonials

• Featured Sponsor (Large Card)
  • Displays:
    • Sponsor logo (e.g., Mugna, CoDev, etc.)
    • Testimonial from sponsor (company name, statement, and quote styling)
    • Subtle shadow effect and rounded corners for design consistency

✅ Other Sponsor Logos (Grid Format)

• A grid layout of smaller sponsor logos below the featured sponsor.
• Each logo should have a hover effect (slight scale-up or glow).

✅ Mobile View Adjustments

• Convert the grid into a vertical stacked format.
• Each sponsor should be presented one at a time in a slider/carousel.
• Include a "Show All" button to expand and reveal more sponsors.

---

2. Functionality & Technical Details

✅ Sponsor Logo & Testimonial Rotation

• Auto-rotates every 5 seconds but allows manual navigation using arrows or dots.
• The rotation should follow a sequential and ordered manner right to left or clockwise
• Farthest sponsor at the left will be the next featured, and the current featured should be place the farthest at the right (infinite loop)
• Clicking on a sponsor logo should switch the featured sponsor details dynamically.
• After 5 seconds of clicking a sponsor it should go back to the original order clicking a sponsor must not change the order

✅ Responsiveness & Adaptability

• Desktop View:
  • Sponsors should be displayed in a grid format, with one featured sponsor at the top.
• Mobile View:
  • Display one sponsor at a time in a vertical list.
  • The "Show All" button should expand the section to reveal more sponsors.

✅ Performance Optimization

• Lazy load sponsor logos to improve speed.
• Use optimized Next.js image handling (next/image) for logos.
• Implement Tailwind CSS flex/grid utilities for efficient responsiveness.

---

Implementation Details

• Framework: Next.js
• Styling: Tailwind CSS
• State Management: useState, useEffect for sponsor rotation
• Dynamic Components:
  • <SponsorCard /> (Reusable sponsor display component)
  • <SponsorSection /> (Manages sponsor rotation and testimonials)

---

Acceptance Criteria:

• The title, description, and CTA button are well-structured.
• Featured sponsor rotates dynamically every 5 seconds.
• Sponsor logos are displayed in a grid format (desktop) or carousel (mobile).
• Hover effects and animations are smooth for interactivity.
• "Be Our Sponsor" button functions and links to /404 for now.
• Performance is optimized with lazy loading and efficient layout handling.

---

References & Design Mockups:

https://www.figma.com/design/fWTw453j5xKUk0Nf6nnQYb/DurianPy?node-id=402-696&m=dev