feat: sponsor section

apps/web/app/_components/footer.tsx

@@ -3,36 +3,29 @@
 import GlassCard from "@/components/glassCard"
 import IconCircle from "@/components/iconCircle"
 import { siteConfig } from "@/config/site"
+import { SponsorList, SponsorTiers } from "@/config/sponsors"
 import Link from "next/link"
 
-interface Sponsor {
-  name: string
-  image_path: string
-}
-
 function Sponsor() {
-  const SPONSOR_LIST: Sponsor[] = [
-    /* TBA */
-  ]
-  if (SPONSOR_LIST.length < 1) return <></>
+  if (SponsorList.length < 1) return <></>
   return (
     <div className="flex flex-[1_0_0] flex-col items-start gap-7 self-stretch max-lg:items-center">
       <div className="text-body-1 text-[var(--color-gray-50)] max-2xl:text-[20px] max-lg:text-[18px]">
         สนับสนุนโดย
       </div>
       <div className="flex flex-wrap items-center gap-6 self-stretch max-lg:justify-center">
-        {SPONSOR_LIST.map((s) => (
+        {SponsorList.map((s) => (
           <GlassCard
             key={s.name}
-            className="min-w-15 min-h-15 px-2 py-1 2xl:min-h-20 2xl:min-w-20"
+            className="min-w-15 min-h-15 px-4 py-4 2xl:min-h-20 2xl:min-w-20"
             style={{ borderRadius: 24, border: "1.5px solid rgba(255, 255, 255, 0.10)" }}>
-            <img src={s.image_path} />
+            <img src={s.image_path} className="h-[60px] w-auto" />
           </GlassCard>
         ))}
       </div>
       <div className="hidden flex-col items-start gap-3 self-stretch 2xl:flex">
         <div className="text-body-3 text-[var(--color-gray-50)]">
-          เราขอขอบคุณ <span>{SPONSOR_LIST.map((s) => s.name).join(", ")}</span>
+          เราขอขอบคุณ <span>{SponsorList.map((s) => s.name).join(", ")}</span>
         </div>
       </div>
     </div>

apps/web/app/_components/sponsors/index.tsx

@@ -0,0 +1,26 @@
+import { Heading } from "@/components/heading"
+import { SponsorList, SponsorTiers } from "@/config/sponsors"
+
+import SponsorSubgrid from "./subgrid"
+
+export default function Sponsors() {
+  return (
+    <section className="mx-auto flex min-h-screen w-full flex-col items-center justify-center gap-y-[21px] px-6 lg:px-20 lg:py-[40px] 2xl:px-40">
+      <Heading text="Organized By" />
+      <div className="mx-auto mb-[7rem] mt-8 flex h-[10rem]">
+        <img
+          height={160}
+          src="/static/logo/kmutt65-cpe-white-160px.webp"
+          alt="kmutt cpe logo"
+          loading="lazy"
+        />
+      </div>
+      <Heading text="Sponsored By" />
+      <div className="grid w-full place-content-center content-center gap-y-4">
+        <SponsorSubgrid data={SponsorList} tier={SponsorTiers.diamond} />
+        <SponsorSubgrid data={SponsorList} tier={SponsorTiers.platinum} />
+        <SponsorSubgrid data={SponsorList} tier={SponsorTiers.gold} />
+      </div>
+    </section>
+  )
+}

apps/web/app/_components/sponsors/logo-renderer.tsx

@@ -0,0 +1,31 @@
+import GlassCard from "@/components/glassCard"
+import { Sponsor } from "@/config/sponsors"
+import { SponsorTiers } from "@/config/sponsors"
+
+interface SponsorLogoRendererProps {
+  data: Sponsor
+}
+
+const SponsorLogoRenderer = ({ data: s }: SponsorLogoRendererProps) => {
+  let h = 60
+
+  if (s.tier === SponsorTiers.diamond) {
+    h = 160
+  } else if (s.tier === SponsorTiers.platinum) {
+    h = 100
+  }
+
+  return (
+    <div className={`flex w-full min-w-[${h * 2}] justify-center rounded-3xl px-10 py-4 align-middle`}>
+      {/* eslint-disable-next-line @next/next/no-img-element */}
+      <img
+        style={{ width: "auto", height: `${h}px` }}
+        src={s.image_path}
+        alt={`${s.name} logo`}
+        loading="lazy"
+      />
+    </div>
+  )
+}
+
+export default SponsorLogoRenderer

apps/web/app/_components/sponsors/subgrid.tsx

@@ -0,0 +1,35 @@
+import { Sponsor } from "@/config/sponsors"
+import { SponsorTiers } from "@/config/sponsors"
+
+import SponsorLogoRenderer from "./logo-renderer"
+
+interface SponsorSubgridProps {
+  data: Sponsor[]
+  tier: SponsorTiers
+}
+
+function getTierName(t: SponsorTiers): string {
+  return t === SponsorTiers.diamond ? "Diamond" : t === SponsorTiers.platinum ? "Platinum" : "Gold"
+}
+
+export default function SponsorSubgrid({ data, tier }: SponsorSubgridProps) {
+  const amt = data.filter((sp) => sp.tier === tier).length
+  const gridClass = amt === 1 ? "md:grid-cols-1" : amt === 2 ? "md:grid-cols-2" : "md:grid-cols-3"
+
+  if (amt === 0) return <></>
+
+  return (
+    <div className="flex w-full flex-col gap-y-4">
+      <span className="text-body-1 text-center text-gray-100">
+        {getTierName(tier)} Sponsor{amt > 1 ? "s" : ""}
+      </span>
+      <div className={`grid grid-cols-1 ${gridClass} gap-x-4 gap-y-4`}>
+        {data
+          .filter((sp) => sp.tier === tier)
+          .map((sp) => (
+            <SponsorLogoRenderer data={sp} key={sp.name} />
+          ))}
+      </div>
+    </div>
+  )
+}

apps/web/app/page.tsx

@@ -8,6 +8,7 @@ import Footer from "@/app/_components/footer"
 import LandingSection from "@/app/_components/landing"
 import { Navbar } from "@/app/_components/navbar"
 import QualificationSector from "@/app/_components/qualification"
+import Sponsors from "@/app/_components/sponsors"
 import Scope from "@/app/_components/scope"
 import Story from "@/app/_components/story"
 import Head from "next/head"
@@ -118,6 +119,9 @@ export default function Page() {
         <div id="story" className="flex min-h-screen items-center justify-center">
           <Story />
         </div>
+        <div className="flex items-center justify-center">
+          <Sponsors />
+        </div>
         <div className="flex items-center justify-center">
           <Footer />
         </div>

apps/web/config/sponsors.ts

@@ -0,0 +1,21 @@
+export enum SponsorTiers {
+  "diamond" = 3,
+  "platinum" = 2,
+  "gold" = 1,
+}
+
+export interface Sponsor {
+  name: string
+  tier: SponsorTiers
+  image_path: string
+  link?: string
+}
+
+export const SponsorList: Sponsor[] = [
+  {
+    name: "IRE Learning",
+    tier: SponsorTiers.gold,
+    image_path: "/static/sponsors/ire-white.webp",
+    link: "https://www.facebook.com/iretutor/",
+  },
+]

packages/ui/package.json

@@ -13,6 +13,7 @@
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.7",
     "@radix-ui/react-slot": "^1.2.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

packages/ui/src/components/separator.tsx

@@ -0,0 +1,27 @@
+"use client"
+
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+import { cn } from "@workspace/ui/lib/utils"
+import * as React from "react"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-neutral-200 data-[orientation=horizontal]:h-px data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px dark:bg-neutral-800",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }