From 1a0304f324cc6a979dec55cd16fa61ef782347ea Mon Sep 17 00:00:00 2001
From: Alan Daniel <stylesshjs@gmail.com>
Date: Mon, 23 Mar 2026 18:58:01 -0400
Subject: [PATCH] edge functions cards

---
 .../(home)/_components/OpenSourceSection.tsx  |   4 +-
 .../_components/ExamplesSection.tsx           | 124 ++++++++----------
 .../_components/LocalDXSection.tsx            |  43 +++---
 .../_components/ObservabilitySection.tsx      |  21 ++-
 .../Products/Functions/NpmEcosystem.tsx       |   2 +-
 5 files changed, 89 insertions(+), 105 deletions(-)

diff --git a/apps/www/app/(home)/_components/OpenSourceSection.tsx b/apps/www/app/(home)/_components/OpenSourceSection.tsx
index d2ac92e9187..0f7d781ff88 100644
--- a/apps/www/app/(home)/_components/OpenSourceSection.tsx
+++ b/apps/www/app/(home)/_components/OpenSourceSection.tsx
@@ -67,11 +67,11 @@ const LEVELS_BG = [
 ]
 
 const LEVELS_TEXT = [
-  'hsl(var(--brand-400))',
-  'hsl(var(--brand-500))',
   'hsl(var(--brand-600))',
   'hsl(var(--brand-default))',
   'hsl(var(--brand-default))',
+  'hsl(var(--brand-600))',
+  'hsl(var(--brand-500))',
 ]
 
 function makeGrid(): { level: number; isText: boolean }[][] {
diff --git a/apps/www/app/(products)/edge-functions/_components/ExamplesSection.tsx b/apps/www/app/(products)/edge-functions/_components/ExamplesSection.tsx
index 0d7f7a31a08..44e8b5bffe7 100644
--- a/apps/www/app/(products)/edge-functions/_components/ExamplesSection.tsx
+++ b/apps/www/app/(products)/edge-functions/_components/ExamplesSection.tsx
@@ -36,74 +36,64 @@ export function ExamplesSection() {
 
       {/* Cards */}
       <div className="mx-auto max-w-[var(--container-max-w,75rem)] px-6 w-full">
-        <div className="border border-border rounded-md overflow-clip">
-          {/* Featured row - 2 large cells */}
-          <div className="grid grid-cols-1 md:grid-cols-2 border-b border-border">
-            {featuredExamples.map((example, i) => {
-              const tag = example.tags?.[0]
-              const icon = tag ? EXAMPLE_ICON[tag] : undefined
-              return (
-                <Link
-                  key={example.title}
-                  href={example.repo_url ?? '#'}
-                  target="_blank"
-                  className={`group flex flex-col px-6 py-8 hover:bg-surface-75/50 transition-colors ${
-                    i < featuredExamples.length - 1
-                      ? 'border-b md:border-b-0 md:border-r border-border'
-                      : ''
-                  }`}
-                >
-                  <div className="flex items-center gap-2 mb-4">
-                    {icon && (
-                      <img
-                        src={icon.src}
-                        alt=""
-                        className={`${icon.className} object-contain${icon.invert ? ' dark:invert' : ''}`}
-                      />
-                    )}
-                  </div>
-                  <h4 className="text-foreground text-sm font-medium">{example.title}</h4>
-                  <p className="text-foreground-lighter text-sm mt-1 line-clamp-2">
-                    {example.description}
-                  </p>
-                </Link>
-              )
-            })}
-          </div>
+        {/* Featured row - 2 large cells */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+          {featuredExamples.map((example) => {
+            const tag = example.tags?.[0]
+            const icon = tag ? EXAMPLE_ICON[tag] : undefined
+            return (
+              <Link
+                key={example.title}
+                href={example.repo_url ?? '#'}
+                target="_blank"
+                className="group flex flex-col bg-surface-75 border border-border rounded-lg px-6 py-8 "
+              >
+                <div className="flex items-center gap-2 mb-4">
+                  {icon && (
+                    <img
+                      src={icon.src}
+                      alt=""
+                      className={`${icon.className} object-contain${icon.invert ? ' dark:invert' : ''}`}
+                    />
+                  )}
+                </div>
+                <h4 className="text-foreground text-sm font-medium">{example.title}</h4>
+                <p className="text-foreground-lighter text-sm mt-1 line-clamp-2">
+                  {example.description}
+                </p>
+              </Link>
+            )
+          })}
+        </div>
 
-          {/* Grid row - 4 smaller cells */}
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">
-            {gridExamples.map((example, i) => {
-              const tag = example.tags?.[0]
-              const icon = tag ? EXAMPLE_ICON[tag] : undefined
-              return (
-                <Link
-                  key={example.title}
-                  href={example.repo_url ?? '#'}
-                  target="_blank"
-                  className={`group flex flex-col px-6 py-8 hover:bg-surface-75/50 transition-colors ${
-                    i < gridExamples.length - 1
-                      ? 'border-b sm:border-b-0 sm:border-r border-border'
-                      : ''
-                  }`}
-                >
-                  <div className="flex items-center gap-2 mb-4">
-                    {icon && (
-                      <img
-                        src={icon.src}
-                        alt=""
-                        className={`${icon.className} object-contain${icon.invert ? ' dark:invert' : ''}`}
-                      />
-                    )}
-                  </div>
-                  <h4 className="text-foreground text-sm font-medium">{example.title}</h4>
-                  <p className="text-foreground-lighter text-sm mt-1 line-clamp-2">
-                    {example.description}
-                  </p>
-                </Link>
-              )
-            })}
-          </div>
+        {/* Grid row - 4 smaller cells */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 mt-3">
+          {gridExamples.map((example) => {
+            const tag = example.tags?.[0]
+            const icon = tag ? EXAMPLE_ICON[tag] : undefined
+            return (
+              <Link
+                key={example.title}
+                href={example.repo_url ?? '#'}
+                target="_blank"
+                className="group flex flex-col bg-surface-75 border border-border rounded-lg px-6 py-10 "
+              >
+                <div className="flex items-center gap-2 mb-4">
+                  {icon && (
+                    <img
+                      src={icon.src}
+                      alt=""
+                      className={`${icon.className} object-contain${icon.invert ? ' dark:invert' : ''}`}
+                    />
+                  )}
+                </div>
+                <h4 className="text-foreground text-sm font-medium">{example.title}</h4>
+                <p className="text-foreground-lighter text-sm mt-1 line-clamp-2">
+                  {example.description}
+                </p>
+              </Link>
+            )
+          })}
         </div>
       </div>
     </div>
diff --git a/apps/www/app/(products)/edge-functions/_components/LocalDXSection.tsx b/apps/www/app/(products)/edge-functions/_components/LocalDXSection.tsx
index e7a5604c7ce..6caf1491f4a 100644
--- a/apps/www/app/(products)/edge-functions/_components/LocalDXSection.tsx
+++ b/apps/www/app/(products)/edge-functions/_components/LocalDXSection.tsx
@@ -3,7 +3,6 @@
 import dynamic from 'next/dynamic'
 import Link from 'next/link'
 import { useState } from 'react'
-import { cn } from 'ui'
 
 const LocalDXImage = dynamic(() => import('~/components/Products/Functions/LocalDXImage'))
 const ParityImage = dynamic(() => import('~/components/Products/Functions/ParityImage'))
@@ -15,14 +14,14 @@ function EcosystemCard() {
 
   return (
     <div
-      className={cn('flex flex-col border-b border-border', 'col-span-1 md:row-span-2 !border-b-0')}
+      className="flex flex-col bg-surface-75 border border-border rounded-lg overflow-hidden  col-span-1 md:row-span-2"
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
     >
       <div className="flex-1 relative overflow-hidden min-h-[320px] md:min-h-0">
         <NpmEcosystem isHovered={isHovered} />
       </div>
-      <div className="flex flex-col gap-1 px-6 py-5 border-t border-border bg-surface-200">
+      <div className="flex flex-col gap-1 px-6 py-5">
         <h4 className="text-foreground text-sm font-medium">Use any NPM module</h4>
         <p className="text-foreground-lighter text-sm">
           Tap into the 2+ million modules in the Deno and NPM ecosystem
@@ -32,25 +31,19 @@ function EcosystemCard() {
   )
 }
 
-const GRID_CLASS: Record<string, string> = {
-  localDX: 'col-span-1 md:border-r',
-  parity: 'col-span-1 xl:border-r',
-  ci: 'col-span-1 md:col-span-2 xl:border-r !border-b-0',
-}
-
 function ParityCard() {
   const [isHovered, setIsHovered] = useState(false)
 
   return (
     <div
-      className={cn('flex flex-col border-b border-border', GRID_CLASS['parity'])}
+      className="flex flex-col bg-surface-75 border border-border rounded-lg overflow-hidden "
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
     >
       <div className="aspect-[3/2] w-full flex items-center justify-center overflow-hidden">
         <ParityImage isHovered={isHovered} />
       </div>
-      <div className="flex flex-col gap-1 px-6 py-5 border-t border-border bg-surface-200">
+      <div className="flex flex-col gap-1 px-6 py-5">
         <h4 className="text-foreground text-sm font-medium">Dev and Prod parity</h4>
         <p className="text-foreground-lighter text-sm">
           The open source{' '}
@@ -73,14 +66,20 @@ function CICard() {
 
   return (
     <div
-      className={cn('flex flex-col border-b border-border', GRID_CLASS['ci'])}
+      className="flex flex-col bg-surface-75 border border-border rounded-lg overflow-hidden  md:col-span-2"
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
     >
-      <div className="flex-1 flex items-center justify-center overflow-hidden pl-2 pt-8 md:pt-12">
+      <div
+        className="flex-1 flex items-center justify-center overflow-hidden pl-2 pt-8 md:pt-12"
+        style={{
+          maskImage: 'linear-gradient(to bottom, black 95%, transparent 100%)',
+          WebkitMaskImage: 'linear-gradient(to bottom, black 95%, transparent 100%)',
+        }}
+      >
         <CI isHovered={isHovered} />
       </div>
-      <div className="flex flex-col gap-1 px-6 py-5 border-t border-border bg-surface-200">
+      <div className="flex flex-col gap-1 px-6 py-5">
         <h4 className="text-foreground text-sm font-medium">Continuous Integration</h4>
         <p className="text-foreground-lighter text-sm">
           Use the{' '}
@@ -103,14 +102,14 @@ function LocalDXCard() {
 
   return (
     <div
-      className={cn('flex flex-col border-b border-border', GRID_CLASS['localDX'])}
+      className="flex flex-col bg-surface-75 border border-border rounded-lg overflow-hidden "
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
     >
       <div className="aspect-[3/2] w-full flex items-center justify-center overflow-hidden">
         <LocalDXImage isHovered={isHovered} />
       </div>
-      <div className="flex flex-col gap-1 px-6 py-5 border-t border-border bg-surface-200">
+      <div className="flex flex-col gap-1 px-6 py-5">
         <h4 className="text-foreground text-sm font-medium">First-class local dev experience</h4>
         <p className="text-foreground-lighter text-sm">
           Write code with hot code reloading, a fast Language server for autocompletion, type
@@ -148,13 +147,11 @@ export function LocalDXSection() {
 
       {/* Bento grid */}
       <div className="mx-auto max-w-[var(--container-max-w,75rem)] px-6 w-full">
-        <div className="border border-border rounded-md overflow-clip">
-          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 grid-flow-dense">
-            <LocalDXCard />
-            <ParityCard />
-            <CICard />
-            <EcosystemCard />
-          </div>
+        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 grid-flow-dense gap-3">
+          <LocalDXCard />
+          <ParityCard />
+          <CICard />
+          <EcosystemCard />
         </div>
       </div>
     </div>
diff --git a/apps/www/app/(products)/edge-functions/_components/ObservabilitySection.tsx b/apps/www/app/(products)/edge-functions/_components/ObservabilitySection.tsx
index 2877a82e0a6..e50fa552386 100644
--- a/apps/www/app/(products)/edge-functions/_components/ObservabilitySection.tsx
+++ b/apps/www/app/(products)/edge-functions/_components/ObservabilitySection.tsx
@@ -40,12 +40,12 @@ function ObservabilityCard({
 
   return (
     <div
-      className={cn('flex flex-col', className)}
+      className={cn('flex flex-col bg-surface-75 border border-border rounded-lg overflow-hidden ', className)}
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
     >
       <div className="relative flex-1 min-h-[285px] overflow-hidden">{card.render(isHovered)}</div>
-      <div className="flex flex-col gap-1 px-6 py-5 border-t border-border bg-surface-200">
+      <div className="flex flex-col gap-1 px-6 py-5">
         <h4 className="text-foreground text-sm font-medium">{card.label}</h4>
         <p className="text-foreground-lighter text-sm">{card.paragraph}</p>
       </div>
@@ -72,16 +72,13 @@ export function ObservabilitySection() {
 
       {/* 3-column grid */}
       <div className="mx-auto max-w-[var(--container-max-w,75rem)] px-6 w-full">
-        <div className="border border-border rounded-md overflow-clip">
-          <div className="grid grid-cols-1 md:grid-cols-3">
-            {cards.map((card, i) => (
-              <ObservabilityCard
-                key={card.id}
-                card={card}
-                className={cn(i < cards.length - 1 && 'md:border-r border-border')}
-              />
-            ))}
-          </div>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+          {cards.map((card) => (
+            <ObservabilityCard
+              key={card.id}
+              card={card}
+            />
+          ))}
         </div>
       </div>
     </div>
diff --git a/apps/www/components/Products/Functions/NpmEcosystem.tsx b/apps/www/components/Products/Functions/NpmEcosystem.tsx
index 43827cf1037..a27d1e72433 100644
--- a/apps/www/components/Products/Functions/NpmEcosystem.tsx
+++ b/apps/www/components/Products/Functions/NpmEcosystem.tsx
@@ -199,7 +199,7 @@ const NpmEcosystem = ({ isHovered = false }: { isHovered?: boolean }) => {
       <div
         className="absolute inset-0 z-10"
         style={{
-          background: `radial-gradient(70% 50% at 50% 50%, transparent, hsl(var(--background-default)))`,
+          background: `radial-gradient(70% 50% at 50% 50%, transparent, hsl(var(--background-surface-75)))`,
         }}
       />