SIGs Page

[ArJSarmiento]

The SIGs page should serve as an informative and visually engaging section that showcases DurianPy's Special Interest Groups, encouraging members to join and start new SIGs. The page should align with DurianPy's branding, be fully responsive, and provide clear calls to action.

---

Requirements

1. Layout & Content

✅ Section 1: Hero Section

• Title: "SPECIAL INTEREST GROUP"
  • "SPECIAL" in yellow/gold and "INTEREST GROUP" in bold white.
• Description:
  • A short, engaging paragraph explaining what SIGs are and their purpose in the DurianPy community.
• CTA Button: "Join a SIG today"
  • Instead of "Join a SIG today" change to "Form a SIG today"
  • Yellow button that scales slightly on hover.
  • https://forms.gle/XxDJZebqbJB6tJo27

✅ Section 2: Current SIGs

• Title: "CURRENT SIGs"
  • "CURRENT" in yellow/gold and "SIGs" in bold white.
• Grid Layout for SIGs:
  • Each SIG should be displayed in a card format with:
    • Icon representing the SIG category (e.g., Backend, Data).
    • Title (e.g., "Backend" or "Data").
    • Description: Brief info about what the SIG focuses on.
    • "Read More" Button: Opens more details (if available).
  • On mobile view, cards should stack vertically.

✅ Section 3: Start a SIG Call to Action

• Title: "Want to Start a SIG?"
• Description:
  • Instructions for users who want to propose a new SIG.
  • Change copy to "If you’re passionate about a particular Python topic and want to start a SIG, for inquiries reach out to us at durianpy.davao@gmail.com. Our organizers will review and respond within 48 hours."
  • Email contact: durianpy.davao@gmail.com.

---

2. Functionality & Interactivity

✅ CTA Button Behavior

• "Join a SIG today" should direct to a sign-up form or /404 page for now.
• "Read More" should link to SIG-specific pages (or /404 if not available yet).

✅ Hover & Animation Effects

• SIG cards should slightly scale up on hover.
• Buttons should have a smooth hover transition.

✅ Responsiveness

• Desktop View:
  • SIG cards in a grid layout.
• Mobile View:
  • Cards stack vertically for better readability.
• Tablet View:
  • Cards should be centered and spaced evenly.

---

3. Implementation Details

✅ Stack: Next.js + Tailwind CSS
✅ Use Figma as a reference for design elements.
✅ Confirm color choices with Richelle.
✅ Ensure mobile-friendly layout with proper scaling.

---

Acceptance Criteria

• Hero section content is correct and visually aligned.
• CTA buttons work as intended and scale on hover.
• SIG cards display correctly in a grid (desktop) and stack vertically (mobile).
• "Start a SIG" section includes the correct email contact.
• Hover effects and animations are smooth and subtle.
• The page is fully responsive across all screen sizes.

---

References & Design Mockups:

SIG Form:
https://forms.gle/XxDJZebqbJB6tJo27

https://www.figma.com/design/dYORpXyS7n3Cf0rHsqT0iz/Final-design-Website?node-id=2582-780&p=f&t=CMOvNoSQsgwL92PG-0