nits

apps/www/app/(products)/edge-functions/_components/CTASection.tsx

@@ -37,14 +37,11 @@ function TerminalAnimation() {
       className="w-full max-w-xl mx-auto rounded-lg border border-border bg-surface-75 overflow-hidden"
     >
       {/* Title bar */}
-      <div className="flex items-center gap-1.5 px-4 py-3 border-b border-border bg-surface-200">
-        <div className="w-2.5 h-2.5 rounded-full bg-foreground/10" />
-        <div className="w-2.5 h-2.5 rounded-full bg-foreground/10" />
-        <div className="w-2.5 h-2.5 rounded-full bg-foreground/10" />
-        <span className="ml-2 text-xs text-foreground-muted font-mono">Terminal</span>
+      <div className="flex items-center gap-1.5 px-2 py-2 border-b border-border bg-surface-200">
+        <span className="ml-2 text-xs text-foreground-muted font-mono uppercase">Terminal</span>
       </div>
       {/* Lines */}
-      <div className="p-4 md:p-6 font-mono text-xs md:text-sm leading-relaxed min-h-[240px]">
+      <div className="px-4 py-8 md:px-6 md:py-10 font-mono text-xs md:text-sm leading-relaxed min-h-[240px]">
         <AnimatePresence>
           {TERMINAL_LINES.slice(0, visibleCount).map((line, i) => (
             <motion.div

apps/www/app/(products)/edge-functions/_components/IntegratesSection.tsx

@@ -44,15 +44,25 @@ const supabaseLight: ThemeRegistration = {
 
 const USE_CASES = [
   {
+    icon: 'Zap' as const,
     label: 'Zero configuration',
     paragraph: 'Pre-populated environment variables required to access your Supabase project',
     lang: 'javascript' as const,
-    code: `const supabase = createClient(
-  Deno.env.get('SUPABASE_URL'),
-  Deno.env.get('SUPABASE_ANON_KEY')
-)`,
+    code: `import { createClient } from 'jsr:@supabase/supabase-js@2'
+
+Deno.serve(async () => {
+  // These are automatically available — no setup needed
+  const supabase = createClient(
+    Deno.env.get('SUPABASE_URL')!,
+    Deno.env.get('SUPABASE_ANON_KEY')!
+  )
+
+  const { data } = await supabase.from('todos').select('*')
+  return new Response(JSON.stringify(data))
+})`,
   },
   {
+    icon: 'Database' as const,
     label: 'Connect to your database',
     paragraph: 'Connect to your Postgres database from an Edge Function using the supabase-js client',
     lang: 'javascript' as const,
@@ -73,6 +83,7 @@ const { data, error } = await supabase
   .select('*')`,
   },
   {
+    icon: 'Webhook' as const,
     label: 'Trigger via webhook',
     paragraph: 'Database Webhooks send real-time data from your database whenever a table event occurs',
     lang: 'sql' as const,
@@ -87,6 +98,7 @@ execute function "supabase_functions"."http_request"(
 );`,
   },
   {
+    icon: 'Shield' as const,
     label: 'Works with Supabase Auth',
     paragraph: (
       <>
@@ -120,6 +132,7 @@ Deno.serve(async (req: Request) => {
 })`,
   },
   {
+    icon: 'HardDrive' as const,
     label: 'Works with Supabase Storage',
     paragraph: (
       <>
@@ -161,6 +174,7 @@ export async function IntegratesSection() {
   })
 
   const useCases = USE_CASES.map((useCase) => ({
+    icon: useCase.icon,
     label: useCase.label,
     paragraph: useCase.paragraph,
     darkHtml: hl.codeToHtml(useCase.code, { lang: useCase.lang, theme: 'supabase-dark' }),

apps/www/app/(products)/edge-functions/_components/IntegratesSectionClient.tsx

@@ -1,12 +1,18 @@
 'use client'
 
 import { AnimatePresence, motion } from 'framer-motion'
+import { Database, HardDrive, Shield, Webhook, Zap } from 'lucide-react'
 import Link from 'next/link'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useInView } from 'react-intersection-observer'
 import { cn } from 'ui'
 
+const ICONS = { Zap, Database, Webhook, Shield, HardDrive } as const
+
+type IconName = keyof typeof ICONS
+
 type UseCase = {
+  icon: IconName
   label: string
   paragraph: React.ReactNode
   darkHtml: string
@@ -94,7 +100,13 @@ export function IntegratesSectionClient({ useCases }: { useCases: UseCase[] }) {
                       : 'text-foreground-muted hover:text-foreground-light hover:bg-surface-75/50'
                   )}
                 >
-                  <h4 className="text-sm font-medium">{useCase.label}</h4>
+                  <h4 className="text-sm font-medium flex items-center gap-2">
+                    {(() => {
+                      const Icon = ICONS[useCase.icon]
+                      return <Icon size={14} strokeWidth={2} />
+                    })()}
+                    {useCase.label}
+                  </h4>
                   <p
                     className={cn(
                       'text-sm transition-colors',