Feature | Perks program

.github/workflows/checks.yml

@@ -0,0 +1,19 @@
+name: Checks
+
+on:
+  pull_request:
+    branches: [master]
+
+jobs:
+  sanity:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Set up Ruby
+        uses: ruby/setup-ruby@v1
+        with:
+          bundler-cache: true
+
+      - name: Sanity checks
+        run: bin/rails sanity:check

app/components/site/footer_component.rb

@@ -14,6 +14,7 @@ class FooterComponent < ViewComponent::Base
         title: "Resources",
         links: [
           { label: "Sponsorship", href: "/sponsorship#" },
+          { label: "Perks Program", href: "/sponsorship#perks-program" },
           { label: "Executive Team", href: "/about#team" },
           { label: "Design System", href: "/design_system" }
         ]

app/components/site/navbar/component.rb

@@ -10,7 +10,8 @@ class Component < ViewComponent::Base
         { label: "Community", href: "/#community" },
         { label: "Sponsors", href: "/#sponsors", children: [
           { label: "Our Sponsors", href: "/#sponsors" },
-          { label: "Become a Sponsor", href: "/sponsorship#" }
+          { label: "Become a Sponsor", href: "/sponsorship#" },
+          { label: "Perks Program", href: "/sponsorship#perks-program" }
         ] }
       ].freeze
 

app/controllers/pages_controller.rb

@@ -1,6 +1,8 @@
 class PagesController < ApplicationController
   def home
-    @sponsors = YAML.load_file(Rails.root.join("config/sponsors.yml"))["sponsors"] || []
+    config = YAML.load_file(Rails.root.join("config/sponsors.yml"))
+    @sponsors = config["sponsors"] || []
+    @perks = config["perks"] || []
     render "pages/landing/home"
   end
 

app/javascript/controllers/perk_modal_controller.js

@@ -0,0 +1,42 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["backdrop", "panel", "icon", "name", "description", "link"]
+
+  connect() {
+    this._onKeydown = this._onKeydown.bind(this)
+  }
+
+  open(event) {
+    const card = event.currentTarget
+    const { perkName, perkIcon, perkDescription, perkWebsite } = card.dataset
+
+    this.iconTarget.src = perkIcon
+    this.iconTarget.alt = perkName
+    this.nameTarget.textContent = perkName
+    this.descriptionTarget.textContent = perkDescription
+    this.linkTarget.href = perkWebsite
+
+    this.backdropTarget.classList.remove("opacity-0", "pointer-events-none")
+    this.backdropTarget.classList.add("opacity-100", "pointer-events-auto")
+    this.panelTarget.classList.remove("scale-95", "opacity-0")
+    this.panelTarget.classList.add("scale-100", "opacity-100")
+    document.addEventListener("keydown", this._onKeydown)
+  }
+
+  close() {
+    this.backdropTarget.classList.add("opacity-0", "pointer-events-none")
+    this.backdropTarget.classList.remove("opacity-100", "pointer-events-auto")
+    this.panelTarget.classList.add("scale-95", "opacity-0")
+    this.panelTarget.classList.remove("scale-100", "opacity-100")
+    document.removeEventListener("keydown", this._onKeydown)
+  }
+
+  closeBackdrop(event) {
+    if (event.target === this.backdropTarget) this.close()
+  }
+
+  _onKeydown(event) {
+    if (event.key === "Escape") this.close()
+  }
+}

app/views/pages/landing/_sponsors.html.erb

@@ -5,7 +5,7 @@
   placeholder_count = total - 1 - sponsor_count
 %>
 
-<section id="sponsors" class="py-24 md:py-32 px-6 border-t-3 border-brand-black bg-brand-cream" data-controller="reveal">
+<section id="sponsors" class="py-24 md:py-32 px-6 border-t-3 border-brand-black bg-brand-cream" data-controller="reveal perk-modal">
   <div class="max-w-6xl mx-auto">
     <div class="mb-16 reveal-up" data-reveal-target="item">
       <%= ui_badge("OUR PARTNERS", class: "rotate-2 mb-4") %>
@@ -33,5 +33,52 @@
         <p class="text-white font-bold">Sponsor Us &rarr;</p>
       <% end %>
     </div>
+
+    <% if @perks.any? %>
+      <%
+        perk_count = @perks.size
+        perk_total = [((perk_count / 6.0).ceil * 6), 6].max
+        perk_placeholder_count = perk_total - perk_count
+      %>
+      <div class="mt-16 reveal-up" data-reveal-target="item" style="transition-delay: 200ms;">
+        <p class="text-brand-gray text-base mb-6">Our <a href="/sponsorship#perks-program" class="text-brand-red font-bold hover:underline">perks program</a> partners with companies to bring exclusive deals to our members.</p>
+        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 lg:grid-cols-6 gap-4">
+          <% @perks.each do |perk| %>
+            <button type="button"
+                    class="group flex items-center justify-center relative border-3 border-brand-black bg-white !p-3 h-20 overflow-visible cursor-pointer transition-all duration-200 hover:-translate-y-1 hover:shadow-[5px_5px_0px_var(--color-brand-red)] active:translate-y-0 active:shadow-none"
+                    data-action="perk-modal#open"
+                    data-perk-name="<%= perk["name"] %>"
+                    data-perk-icon="<%= perk["icon"] %>"
+                    data-perk-description="<%= perk["description"] %>"
+                    data-perk-website="<%= perk["website"] %>">
+              <%= image_tag perk["logo"], alt: perk["name"], class: "max-h-10 max-w-full object-contain" %>
+              <%= ui_badge(perk["name"].upcase, size: :sm, variant: :dark, class: "absolute -bottom-4 left-1/2 -translate-x-1/2 whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity") %>
+            </button>
+          <% end %>
+
+          <% perk_placeholder_count.times do |i| %>
+            <% last = i == perk_placeholder_count - 1 %>
+            <div class="flex items-center justify-center h-20 bg-white border-3 border-dashed border-brand-black/30 text-brand-gray/40 text-sm font-bold<%= ' md:hidden lg:flex' if last %>">Your logo here</div>
+          <% end %>
+        </div>
+
+      </div>
+    <% end %>
+  </div>
+
+  <%# Perk detail modal (at section level to avoid transformed ancestor clipping fixed positioning) %>
+  <div data-perk-modal-target="backdrop" data-action="click->perk-modal#closeBackdrop"
+       class="fixed inset-0 z-50 bg-brand-black/50 flex items-center justify-center px-6 opacity-0 pointer-events-none transition-opacity duration-300">
+    <div data-perk-modal-target="panel"
+         class="bg-brand-bg border-3 border-brand-black shadow-[6px_6px_0px_var(--color-brand-black)] w-full max-w-md p-8 scale-95 opacity-0 transition-all duration-300">
+      <img data-perk-modal-target="icon" src="" alt="" class="max-h-16 object-contain mb-4">
+      <h2 data-perk-modal-target="name" class="text-2xl font-bold text-brand-black mb-3" style="font-family: 'Unbounded', sans-serif;"></h2>
+      <p data-perk-modal-target="description" class="text-brand-gray leading-relaxed mb-6"></p>
+      <a data-perk-modal-target="link" href="#" target="_blank" rel="noopener"
+         class="inline-flex items-center justify-center text-center font-bold border-3 border-brand-black bg-brand-red text-white px-8 py-4 text-base cursor-pointer transition-all duration-200 hover:-translate-y-1 hover:shadow-[5px_5px_0px_var(--color-brand-black)] active:translate-y-0 active:shadow-none"
+         style="font-family: 'Unbounded', sans-serif; font-weight: 600;">
+        Check it out
+      </a>
+    </div>
   </div>
 </section>

app/views/pages/sponsorship/_perks.html.erb

@@ -0,0 +1,16 @@
+<section id="perks-program" class="py-16 md:py-20 px-6 border-t-3 border-brand-black" data-controller="reveal">
+  <div class="max-w-6xl mx-auto reveal-up" data-reveal-target="item">
+    <div class="border-3 border-brand-black bg-brand-red p-10 md:p-14 shadow-[6px_6px_0px_var(--color-brand-black)] relative overflow-hidden">
+      <div class="absolute top-0 right-0 w-48 h-48 bg-white/5 -translate-y-1/2 translate-x-1/2 rotate-12"></div>
+      <%= ui_badge("PERKS PROGRAM", variant: :dark, class: "-rotate-1 mb-4") %>
+      <h2 class="text-2xl md:text-3xl font-extrabold text-white mb-4" style="font-family: 'Unbounded', sans-serif;">
+        Got something to offer our members?
+      </h2>
+      <p class="text-white/80 text-lg max-w-2xl leading-relaxed mb-8">
+        If your company offers a product or service that benefits students, we'd love to feature you in our perks program.
+        Members get access to exclusive deals, and your brand gets in front of <%= Rails.application.config.meta[:member_count] %> engaged tech students.
+      </p>
+      <%= ui_button("Get in touch", href: "mailto:#{Rails.application.config.socials[:email]}", variant: :secondary) %>
+    </div>
+  </div>
+</section>

app/views/pages/sponsorship/sponsorship.html.erb

@@ -2,3 +2,4 @@
 <%= render "pages/sponsorship/tiers" %>
 <%= render "pages/sponsorship/why" %>
 <%= render "pages/sponsorship/cta" %>
+<%= render "pages/sponsorship/perks" %>

config/ci.rb

@@ -6,6 +6,8 @@
   step "Tests: Rails", "bin/rails test"
   step "Tests: Seeds", "env RAILS_ENV=test bin/rails db:seed:replant"
 
+  step "Sanity checks", "bin/rails sanity:check"
+
   # Optional: Run system tests
   # step "Tests: System", "bin/rails test:system"
 

config/sponsors.yml

@@ -4,3 +4,15 @@ sponsors: []
   #   tier: Amber
   #   logo: /sponsors/acme.png
   #   website: https://acme.com
+
+perks:
+  - name: DataCamp
+    logo: /sponsors/datacamp.png
+    icon: /sponsors/datacamp-icon.png
+    website: https://www.datacamp.com/
+    description: "Members get free access to DataCamp's full learning platform, covering Python, R, SQL, and more through hands-on courses and real-world projects."
+  - name: Red Bull
+    logo: /sponsors/redbull.png
+    icon: /sponsors/redbull-icon.png
+    website: https://www.redbull.com/au-en
+    description: "Red Bull keeps our members fuelled with free drinks at club events, hackathons, and more."

lib/tasks/sanity.rake

@@ -0,0 +1,22 @@
+namespace :sanity do
+  desc "Run content and config sanity checks"
+  task check: :environment do
+    checks_passed = true
+
+    # Perk count must not be a multiple of 6.
+    # The perks grid uses 2/3/5/6 column breakpoints. A multiple of 6 fills the
+    # 6-col row but leaves an uneven last row at md:grid-cols-5. When this fires,
+    # revisit the grid layout in the perks partial.
+    perks = YAML.load_file(Rails.root.join("config/sponsors.yml")).fetch("perks", [])
+    perk_count = perks.size
+
+    if perk_count > 0 && (perk_count % 6).zero?
+      puts "FAIL: Perk count is #{perk_count} (multiple of 6). Revisit the perks grid layout."
+      checks_passed = false
+    else
+      puts "PASS: Perk count is #{perk_count} (not a multiple of 6)."
+    end
+
+    abort "Sanity checks failed." unless checks_passed
+  end
+end