Add a featured section for the supasquad page (#38961)

* Add a featured section for the supasquad page

* Add priority badge

apps/www/components/Forms/ApplyToSupaSquadForm.tsx

@@ -75,6 +75,7 @@ const tracks: Track[] = [
 
 const productAreasOfInterest: string[] = [
   'Auth',
+  'AI Builders',
   'Branching',
   'Client libraries',
   'Database / Postgres',

apps/www/components/Supasquad/FeatureIcon.tsx

@@ -4,6 +4,7 @@ import { cn } from 'ui'
 import type { Feature } from '~/data/open-source/contributing/supasquad.utils'
 import {
   Award,
+  Bot,
   Zap,
   MessageSquare,
   DollarSign,
@@ -13,10 +14,12 @@ import {
   LifeBuoy,
   Wrench,
   Shield,
+  Lock,
 } from 'lucide-react'
 
 const ICONS = {
   award: Award,
+  bot: Bot,
   zap: Zap,
   'message-square': MessageSquare,
   'dollar-sign': DollarSign,
@@ -26,6 +29,7 @@ const ICONS = {
   'life-buoy': LifeBuoy,
   wrench: Wrench,
   shield: Shield,
+  lock: Lock,
 } as const
 
 type IconName = keyof typeof ICONS

apps/www/data/open-source/contributing/supasquad.tsx

@@ -1,4 +1,4 @@
-import { Image } from 'ui'
+import { Badge, Image } from 'ui'
 import { companyStats } from '~/data/company-stats'
 
 export const data = {
@@ -147,6 +147,43 @@ export const data = {
       },
     ],
   },
+  featured: {
+    id: 'featured',
+    label: '',
+    heading: (
+      <>
+        <p className="label">Featured</p>
+        <span className="text-foreground">We're especially looking for</span>
+      </>
+    ),
+    subheading:
+      "These are the areas where we need the most help right now. If you have expertise in any of these domains, we'd love to hear from you!",
+    features: [
+      {
+        id: 'ai-builders',
+        icon: 'bot',
+        heading: (
+          <div className="flex items-center gap-2">
+            AI Builders <Badge variant="success">High Priority</Badge>
+          </div>
+        ),
+        subheading:
+          "Help our users who are building with AI + Supabase. If you've vibed a bunch of projects but understand what's happening under the hood, we'd love to talke with you .",
+      },
+
+      {
+        id: 'realtime',
+        icon: 'zap',
+        heading: (
+          <div className="flex items-center gap-2">
+            Realtime <Badge variant="success">High Priority</Badge>
+          </div>
+        ),
+        subheading:
+          'Help the team by writing docs, creating examples, and making sure our guides are up to date. Experience with React and friends is an extra bonus.',
+      },
+    ],
+  },
   benefits: {
     id: 'benefits',
     heading: <span className="text-foreground">Benefits for our members</span>,

apps/www/pages/open-source/contributing/supasquad.tsx

@@ -6,9 +6,10 @@ import Layout from 'components/Layouts/Default'
 import ProductHeader from 'components/Sections/ProductHeader2'
 
 import { data as content } from 'data/open-source/contributing/supasquad'
+import { Separator } from 'ui'
 
-const Quotes = dynamic(() => import('components/Supasquad/Quotes'))
 const WhySupaSquad = dynamic(() => import('components/Supasquad/FeaturesSection'))
+const FeaturedSection = dynamic(() => import('components/Supasquad/FeaturesSection'))
 const PerfectTiming = dynamic(() => import('components/Supasquad/PerfectTiming'))
 const Benefits = dynamic(() => import('components/Supasquad/FeaturesSection'))
 const ApplicationFormSection = dynamic(() => import('components/Supasquad/ApplicationFormSection'))
@@ -32,7 +33,11 @@ const BeginnersPage: NextPage = () => {
           sectionContainerClassName="lg:gap-4"
         />
         {/* <Quotes {...content.quotes} /> */}
+        <Separator />
         <WhySupaSquad {...content.why} />
+        <Separator />
+        <FeaturedSection {...content.featured} />
+        <Separator />
         <PerfectTiming
           id={content.timing.id}
           heading={content.timing.heading}