From 2c739fe8e9c148a25fe778e99eebc9bfb4f7a65e Mon Sep 17 00:00:00 2001
From: Alan Daniel <stylesshjs@gmail.com>
Date: Mon, 30 Mar 2026 22:16:48 -0400
Subject: [PATCH] more updates

---
 .../edge-functions/_components/CTASection.tsx    |  6 +++---
 .../_components/GlobalPresenceSection.tsx        |  4 ++--
 .../edge-functions/_components/Highlights.tsx    |  2 +-
 .../_components/IntegratesSectionClient.tsx      | 16 +++++++++++-----
 4 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/apps/www/app/(products)/edge-functions/_components/CTASection.tsx b/apps/www/app/(products)/edge-functions/_components/CTASection.tsx
index d640e2ddbcb..177091b4c98 100644
--- a/apps/www/app/(products)/edge-functions/_components/CTASection.tsx
+++ b/apps/www/app/(products)/edge-functions/_components/CTASection.tsx
@@ -24,7 +24,7 @@ function TerminalAnimation() {
 
   useEffect(() => {
     if (!inView) return
-    const timeouts: ReturnType<typeof setTimeout>[] = []
+    const timeouts: ReturnType[] = []
     TERMINAL_LINES.forEach((line, i) => {
       timeouts.push(setTimeout(() => setVisibleCount(i + 1), line.delay * 1000))
     })
@@ -41,7 +41,7 @@ function TerminalAnimation() {
         <span className="ml-2 text-xs text-foreground-muted font-mono uppercase">Terminal</span>
       </div>
       {/* Lines */}
-      <div className="px-4 md:px-6 font-mono text-xs md:text-sm leading-relaxed h-[280px] flex flex-col justify-center">
+      <div className="px-4 md:px-6 font-mono text-xs md:text-sm leading-relaxed h-[280px] flex flex-col justify-start items-start text-left pt-4">
         <AnimatePresence>
           {TERMINAL_LINES.slice(0, visibleCount).map((line, i) => (
             <motion.div
@@ -50,7 +50,7 @@ function TerminalAnimation() {
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.2 }}
               className={
-                line.accent ? 'text-brand' : line.dim ? 'text-foreground-muted' : 'text-foreground'
+                line.accent ? 'text-brand' : line.dim ? 'text-foreground-light' : 'text-foreground'
               }
             >
               {line.text || '\u00A0'}
diff --git a/apps/www/app/(products)/edge-functions/_components/GlobalPresenceSection.tsx b/apps/www/app/(products)/edge-functions/_components/GlobalPresenceSection.tsx
index 7116ad15ee5..dd531435c87 100644
--- a/apps/www/app/(products)/edge-functions/_components/GlobalPresenceSection.tsx
+++ b/apps/www/app/(products)/edge-functions/_components/GlobalPresenceSection.tsx
@@ -29,13 +29,13 @@ export function GlobalPresenceSection() {
   return (
     <div className="mx-auto max-w-[75rem] px-6 py-16 md:py-32">
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 md:gap-16">
-        <p className="text-xl sm:text-2xl max-w-lg text-foreground-lighter">
+        <h3 className="text-2xl md:text-4xl text-foreground-lighter max-w-xl">
           Edge Functions run{' '}
           <span className="text-foreground">
             server-side logic geographically close to users
           </span>
           , offering low latency and great performance.
-        </p>
+        </h3>
         <div className="flex flex-col gap-6">
           {features.map((feature) => (
             <div
diff --git a/apps/www/app/(products)/edge-functions/_components/Highlights.tsx b/apps/www/app/(products)/edge-functions/_components/Highlights.tsx
index be6062bd633..3fc85c2919f 100644
--- a/apps/www/app/(products)/edge-functions/_components/Highlights.tsx
+++ b/apps/www/app/(products)/edge-functions/_components/Highlights.tsx
@@ -76,7 +76,7 @@ const highlights = [
   },
   {
     title: 'Node.js Support',
-    paragraph: 'Easily migrate existing workloads with support for more than 1 million NPM modules',
+    paragraph: 'Migrate existing workloads with support for 1M+ NPM modules',
     icon: (
       <svg
         className="w-5 h-5"
diff --git a/apps/www/app/(products)/edge-functions/_components/IntegratesSectionClient.tsx b/apps/www/app/(products)/edge-functions/_components/IntegratesSectionClient.tsx
index 467d7aada7e..c89c7e31234 100644
--- a/apps/www/app/(products)/edge-functions/_components/IntegratesSectionClient.tsx
+++ b/apps/www/app/(products)/edge-functions/_components/IntegratesSectionClient.tsx
@@ -75,9 +75,15 @@ export function IntegratesSectionClient({ useCases }: { useCases: UseCase[] }) {
     <div ref={inViewRef} className="py-24 flex flex-col gap-16">
       {/* Header */}
       <div className="mx-auto max-w-[var(--container-max-w,75rem)] px-6 w-full">
-        <h3 className="text-2xl md:text-4xl text-foreground-lighter max-w-xl">
-          Integrates with the <span className="text-foreground">Supabase ecosystem</span>
-        </h3>
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-16 items-end">
+          <h3 className="text-2xl md:text-4xl text-foreground-lighter max-w-xl">
+            Integrates with the <span className="text-foreground">Supabase ecosystem</span>
+          </h3>
+          <p className="text-foreground-lighter text-sm lg:text-base">
+            Access your database, auth, storage, and webhooks directly from Edge Functions with zero
+            configuration.
+          </p>
+        </div>
       </div>
 
       {/* Content */}
@@ -109,7 +115,7 @@ export function IntegratesSectionClient({ useCases }: { useCases: UseCase[] }) {
           {/* Right: code area */}
           <div className="flex flex-col border border-border rounded-md overflow-clip">
             <div className="relative h-[440px] shrink-0 overflow-auto">
-              <AnimatePresence mode="popLayout">
+              <AnimatePresence mode="wait">
                 <motion.div
                   key={active.label}
                   initial={{ opacity: 0 }}
@@ -132,7 +138,7 @@ export function IntegratesSectionClient({ useCases }: { useCases: UseCase[] }) {
 
             {/* Footer: active tab info */}
             <div className="border-t border-border px-6 py-4 flex items-center gap-8 justify-between bg-surface-75">
-              <AnimatePresence mode="popLayout">
+              <AnimatePresence mode="wait">
                 <motion.div
                   key={active.label}
                   initial={{ opacity: 0 }}