update product images

apps/www/app/(products)/database/_components/ApiSectionClient.tsx

@@ -72,7 +72,7 @@ export function ApiSectionClient({ examples }: { examples: ApiExample[] }) {
   }
 
   return (
-    <div ref={inViewRef} className="py-24 flex flex-col gap-16">
+    <div ref={inViewRef} className="py-24 flex flex-col gap-24">
       {/* Header */}
       <div className="mx-auto max-w-[var(--container-max-w,75rem)] px-6 w-full">
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-16 items-end">

apps/www/app/(products)/database/_components/FeaturesSection.tsx

@@ -553,7 +553,7 @@ function RealtimeSkeleton() {
 
 export function FeaturesSection() {
   return (
-    <div className="py-24 flex flex-col gap-16">
+    <div className="py-24 flex flex-col gap-24">
       {/* Header */}
       <div className="mx-auto max-w-[var(--container-max-w,75rem)] px-6 w-full">
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-16 items-end">

apps/www/app/(products)/database/_components/HighlightsSection.tsx

@@ -38,7 +38,7 @@ const HIGHLIGHTS = [
 
 export function HighlightsSection() {
   return (
-    <div className="py-24 flex flex-col gap-16">
+    <div className="py-24 flex flex-col gap-24">
       {/* 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">
@@ -50,51 +50,51 @@ export function HighlightsSection() {
 
       <div className="mx-auto max-w-[var(--container-max-w,75rem)] px-6 w-full">
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
-            {HIGHLIGHTS.map((highlight) => (
-              <div
-                key={highlight.title}
-                className="relative flex flex-col overflow-hidden min-h-[400px] bg-surface-75 border border-border rounded-lg"
-              >
-                <div className="relative z-10 flex flex-col justify-between h-full p-6 md:p-8 pr-0 md:pr-0">
-                  <div className="flex flex-col gap-4">
-                    <div className="flex items-center gap-2">
-                      <h4 className="text-foreground text-lg font-medium">{highlight.title}</h4>
-                      {highlight.badge && <Badge variant="success">{highlight.badge}</Badge>}
-                    </div>
-                    <ul className="flex flex-col text-foreground-lighter text-sm gap-1.5">
-                      {highlight.features.map((feature) => (
-                        <li key={feature} className="flex items-start gap-2">
-                          <Check className="w-3.5 h-3.5 mt-0.5 shrink-0 stroke-2 text-brand" />
-                          <span>{feature}</span>
-                        </li>
-                      ))}
-                    </ul>
-                  </div>
-                  <div className="mt-6">
-                    <Button type="default" size="small" asChild>
-                      <Link href={highlight.cta.href}>{highlight.cta.label}</Link>
-                    </Button>
+          {HIGHLIGHTS.map((highlight) => (
+            <div
+              key={highlight.title}
+              className="relative flex flex-col overflow-hidden min-h-[400px] bg-surface-75 border border-border rounded-lg"
+            >
+              <div className="relative z-10 flex flex-col justify-between h-full p-6 md:p-8 pr-0 md:pr-0">
+                <div className="flex flex-col gap-4">
+                  <div className="flex items-center gap-2">
+                    <h4 className="text-foreground text-lg font-medium">{highlight.title}</h4>
+                    {highlight.badge && <Badge variant="success">{highlight.badge}</Badge>}
                   </div>
+                  <ul className="flex flex-col text-foreground-lighter text-sm gap-1.5">
+                    {highlight.features.map((feature) => (
+                      <li key={feature} className="flex items-start gap-2">
+                        <Check className="w-3.5 h-3.5 mt-0.5 shrink-0 stroke-2 text-brand" />
+                        <span>{feature}</span>
+                      </li>
+                    ))}
+                  </ul>
                 </div>
-                {/* Decorative image */}
-                <div className="hidden sm:flex lg:hidden xl:flex absolute top-0 right-0 bottom-0 items-end h-full opacity-50 dark:opacity-20 select-none">
-                  <Image
-                    src={highlight.image.dark}
-                    alt={highlight.title}
-                    width={296}
-                    height={275}
-                    className="hidden dark:block"
-                  />
-                  <Image
-                    src={highlight.image.light}
-                    alt={highlight.title}
-                    width={296}
-                    height={275}
-                    className="dark:hidden"
-                  />
+                <div className="mt-6">
+                  <Button type="default" size="small" asChild>
+                    <Link href={highlight.cta.href}>{highlight.cta.label}</Link>
+                  </Button>
                 </div>
               </div>
-            ))}
+              {/* Decorative image */}
+              <div className="hidden sm:flex lg:hidden xl:flex absolute top-0 right-0 bottom-0 items-end h-full opacity-50 dark:opacity-20 select-none">
+                <Image
+                  src={highlight.image.dark}
+                  alt={highlight.title}
+                  width={296}
+                  height={275}
+                  className="hidden dark:block"
+                />
+                <Image
+                  src={highlight.image.light}
+                  alt={highlight.title}
+                  width={296}
+                  height={275}
+                  className="dark:hidden"
+                />
+              </div>
+            </div>
+          ))}
         </div>
       </div>
     </div>

apps/www/app/(products)/database/_components/SqlEditorSection.tsx

@@ -15,15 +15,14 @@ const TABS = [
   {
     icon: 'Code' as IconName,
     label: 'Full SQL',
-    description:
-      'Create tables, functions, join tables — a full SQL editor built into the dashboard.',
+    description: 'A full SQL editor built right into the dashboard.',
     image: '/images/product/database/sql-view/sql-editor.png',
   },
   {
     icon: 'MousePointerClick' as IconName,
     label: 'Monaco editor',
     description: 'Built-in Monaco editor, with rich validation and autocomplete.',
-    image: '/images/product/database/sql-view/manaco-editor.png',
+    image: '/images/product/database/sql-view/monaco-editor.png',
   },
   {
     icon: 'Heart' as IconName,
@@ -90,7 +89,7 @@ export function SqlEditorSection() {
   }
 
   return (
-    <div ref={inViewRef} className="py-24 flex flex-col gap-16">
+    <div ref={inViewRef} className="py-24 flex flex-col gap-24">
       {/* Header */}
       <div className="mx-auto max-w-[var(--container-max-w,75rem)] px-6 w-full">
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-16 items-end">
@@ -133,8 +132,8 @@ export function SqlEditorSection() {
           </div>
 
           {/* Right: image + footer */}
-          <div className="flex flex-col border border-border rounded-md overflow-clip">
-            <div className="relative h-[400px] shrink-0 overflow-hidden flex items-end justify-center">
+          <div className="flex flex-col border border-border rounded-md overflow-clip bg-surface-75">
+            <div className="relative aspect-[16/7.5] shrink-0 overflow-hidden flex items-end justify-center relative">
               <AnimatePresence mode="wait">
                 <motion.div
                   key={active.label}
@@ -143,12 +142,11 @@ export function SqlEditorSection() {
                   exit={{ opacity: 0, transition: { duration: 0.1 } }}
                   className="absolute inset-0 flex items-end justify-center px-6"
                 >
-                  <Image
+                  <img
                     src={active.image}
                     alt={active.label}
-                    width={600}
-                    height={400}
-                    className="rounded-lg object-contain -mb-4"
+                    // fill
+                    className="absolute inset-0 rounded-lg object-cover pointer-events-none"
                   />
                 </motion.div>
               </AnimatePresence>

apps/www/app/(products)/database/_components/TableEditorSection.tsx

@@ -25,14 +25,13 @@ const TABS: Tab[] = [
     icon: 'TableProperties',
     label: 'Spreadsheet editing',
     description: 'Add, edit, and update your data with the simplicity of a no-code tool.',
-    image: <SpreadsheetIllustration />,
+    image: '/images/product/database/table-view/spreadsheet.png',
   },
   {
     icon: 'Table',
     label: 'Create tables',
-    description:
-      'Add tables, columns and rows right in the dashboard. Without a single line of SQL.',
-    image: '/images/product/database/table-view/create-table.png',
+    description: 'Add tables, columns and rows without writing SQL.',
+    image: '/images/product/database/table-view/create-tables.png',
   },
   {
     icon: 'Link2',
@@ -44,7 +43,7 @@ const TABS: Tab[] = [
     icon: 'FileDown',
     label: 'Export to CSV',
     description: 'Pick the rows you want and export them into a CSV.',
-    image: '/images/product/database/table-view/export.png',
+    image: '/images/product/database/table-view/export-csv.png',
   },
 ]
 
@@ -99,7 +98,7 @@ export function TableEditorSection() {
   }
 
   return (
-    <div ref={inViewRef} className="py-24 flex flex-col gap-16">
+    <div ref={inViewRef} className="py-24 flex flex-col gap-24">
       {/* Header */}
       <div className="mx-auto max-w-[var(--container-max-w,75rem)] px-6 w-full">
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-16 items-end">
@@ -143,7 +142,7 @@ export function TableEditorSection() {
 
           {/* Right: image + footer */}
           <div className="flex flex-col border border-border rounded-md overflow-clip bg-surface-75">
-            <div className="relative h-[400px] shrink-0 overflow-hidden flex items-end justify-center">
+            <div className="relative aspect-[16/7.5] shrink-0 overflow-hidden flex items-end justify-center relative">
               <AnimatePresence mode="wait">
                 <motion.div
                   key={active.label}
@@ -156,19 +155,11 @@ export function TableEditorSection() {
                       : 'flex items-end justify-end'
                   }`}
                 >
-                  {typeof active.image === 'string' ? (
-                    <Image
-                      src={active.image}
-                      alt={active.label}
-                      width={600}
-                      height={400}
-                      className="rounded-lg object-contain -mb-4"
-                    />
-                  ) : (
-                    <div className="w-[115%] translate-x-[8%] translate-y-[12%]">
-                      {active.image}
-                    </div>
-                  )}
+                  <img
+                    src={active.image}
+                    alt={active.label}
+                    className="absolute inset-0 rounded-lg object-cover pointer-events-none"
+                  />
                 </motion.div>
               </AnimatePresence>
             </div>