From fad1947ad20ddbb0ea5b32c9cbbb738faf47e256 Mon Sep 17 00:00:00 2001
From: Saxon Fletcher <saxonafletcher@gmail.com>
Date: Thu, 16 Jan 2025 20:11:31 +1000
Subject: [PATCH] style updates

---
 apps/www/components/RecipeDialog.tsx |  17 +-
 apps/www/pages/cookbook/index.tsx    | 522 ++++++++++++++++++++++-----
 2 files changed, 450 insertions(+), 89 deletions(-)

diff --git a/apps/www/components/RecipeDialog.tsx b/apps/www/components/RecipeDialog.tsx
index ffa2871bee2..7da6352f6b2 100644
--- a/apps/www/components/RecipeDialog.tsx
+++ b/apps/www/components/RecipeDialog.tsx
@@ -1,3 +1,4 @@
+import { Plus } from 'lucide-react'
 import { Button } from 'ui'
 import {
   Dialog,
@@ -28,8 +29,11 @@ export default function RecipeDialog({ recipe, onClose }: RecipeDialogProps) {
 
   return (
     <Dialog open={!!recipe} onOpenChange={(open) => !open && onClose()}>
-      <DialogContent size="xlarge" className="grid grid-cols-2 items-stretch">
-        <div className="flex flex-col justify-center p-12 min-h-64">
+      <DialogContent
+        size="xlarge"
+        className="grid grid-cols-2 items-stretch w-full max-w-[75vw] overflow-hidden"
+      >
+        <div className="flex flex-col justify-center p-12 max-h-screen bg-surface-100">
           <div>
             <h2>{recipe.title}</h2>
             <p className="text-foreground-light">{recipe.description}</p>
@@ -41,17 +45,18 @@ export default function RecipeDialog({ recipe, onClose }: RecipeDialogProps) {
                 navigator.clipboard.writeText(recipe.code)
               }}
             >
-              Copy to clipboard
+              Remix with Assistant
             </Button>
-            <Button type="primary" onClick={onClose}>
+
+            <Button icon={<Plus size="14" />} type="primary" onClick={onClose}>
               Add to project
             </Button>
           </div>
         </div>
-        <div className="border-l bg-surface-100">
+        <div className="border-l bg">
           <CodeBlock
             lang={recipe.type === 'edge-function' ? 'ts' : 'sql'}
-            className="!rounded-none !bg-surface-100 h-full max-h-96"
+            className="!rounded-none !bg h-full max-h-96 !border-none"
             showLineNumbers
             size="small"
           >
diff --git a/apps/www/pages/cookbook/index.tsx b/apps/www/pages/cookbook/index.tsx
index df9e8bf062e..8f5b219e174 100644
--- a/apps/www/pages/cookbook/index.tsx
+++ b/apps/www/pages/cookbook/index.tsx
@@ -4,10 +4,9 @@ import { NextSeo } from 'next-seo'
 import { motion } from 'framer-motion'
 import { Search, Database, Code, X } from 'lucide-react'
 
-import { Button, Input } from 'ui'
+import { Button, Input, Card, CardContent } from 'ui'
 import DefaultLayout from '~/components/Layouts/Default'
 import SectionContainer from '~/components/Layouts/SectionContainer'
-import Panel from '~/components/Panel'
 import RecipeDialog from '~/components/RecipeDialog'
 import recipesData from '~/data/recipes.json'
 
@@ -139,49 +138,419 @@ function CookbookPage() {
         description="Quickly add functionality to your existing project or spin up new projects based on an existing recipe."
       />
       <DefaultLayout>
-        <SectionContainer className="!py-0 sm:!px-0">
-          <div className="border border-muted rounded-xl bg-alternative my-4 px-6 py-8 md:py-10 lg:px-16 lg:py-20 xl:px-20">
-            <motion.div
-              className="mx-auto sm:max-w-xl text-center flex flex-col items-center gap-3"
-              initial={{ opacity: 0, y: 10 }}
-              animate={{ opacity: 1, y: 0, transition: { duration: 0.5, easing: 'easeOut' } }}
+        <SectionContainer className="!pb-0 flex items-center">
+          <motion.div className="w-1/2">
+            <span className="text-brand-600 dark:text-brand font-mono uppercase block mb-4">
+              Supabase Cookbook
+            </span>
+            <h1 className="text-3xl md:text-5xl tracking-[-.5px] max-w-lg mb-4">
+              Add functionality to your project
+            </h1>
+            <p className="text-foreground-light block lg:text-lg mb-8">
+              Quickly add functionality to your existing project or spin up new projects based on an
+              existing recipe.
+            </p>
+            <Input
+              icon={<Search size="14" />}
+              size="large"
+              autoComplete="off"
+              type="search"
+              placeholder="Search recipes"
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              className="w-full"
+            />
+          </motion.div>
+          <svg
+            className="h-auto w-full max-w-[360px] md:max-w-[488px] mx-auto mb-16 -rotate-45 py-16 pt-32 translate-y-12"
+            viewBox="0 0 475 152"
+            fill="none"
+          >
+            <path
+              d="m391.957 146.204-35.176-65.911a8.743 8.743 0 0 1 0-8.281l35.176-65.911c1.663-3.116 5.051-5.083 8.756-5.083h28.012c3.705 0 7.092 1.967 8.756 5.083l35.176 65.911a8.743 8.743 0 0 1 0 8.28l-35.176 65.912c-1.663 3.116-5.051 5.083-8.756 5.083h-28.012c-3.705 0-7.092-1.967-8.756-5.083Z"
+              fill="#080808"
+              stroke="#333"
+              stroke-width="1.4"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            ></path>
+            <path
+              d="m395.445 149.833 39.724-73.683-39.724-73.683m77.347 73.68h-37.625"
+              stroke="#333"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-dasharray="3 4"
+            ></path>
+            <path
+              d="m316.99 146.204-35.176-65.911a8.743 8.743 0 0 1 0-8.281L316.99 6.101c1.663-3.116 5.051-5.083 8.756-5.083h28.013c3.704 0 7.092 1.967 8.755 5.083l35.176 65.911a8.738 8.738 0 0 1 0 8.28l-35.176 65.912c-1.663 3.116-5.051 5.083-8.755 5.083h-28.013c-3.705 0-7.092-1.967-8.756-5.083Z"
+              fill="#040404"
+              stroke="#333"
+              stroke-width="1.4"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            ></path>
+            <path
+              d="m320.473 149.833 39.724-73.683-39.724-73.683m77.346 73.68h-37.625"
+              stroke="#333"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-dasharray="3 4"
+            ></path>
+            <path
+              d="m187.149 146.187-35.176-65.912a8.738 8.738 0 0 1 0-8.28l35.176-65.912C188.811 2.967 192.2 1 195.904 1h82.052c3.705 0 7.092 1.967 8.755 5.083l35.176 65.911a8.738 8.738 0 0 1 0 8.281l-35.176 65.912c-1.662 3.116-5.05 5.083-8.755 5.083h-82.052c-3.704 0-7.092-1.967-8.755-5.083Z"
+              fill="#080808"
+              stroke="#333"
+              stroke-width="1.4"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            ></path>
+            <mask
+              id=":S1:"
+              style={{ maskType: 'alpha' }}
+              maskUnits="userSpaceOnUse"
+              x="191"
+              y="76"
+              width="133"
+              height="76"
             >
-              <h1 className="h1 text-foreground !m-0">The Supabase cookbook</h1>
-              <p className="text-foreground-light text-base">
-                Quickly add functionality to your existing project or spin up new projects based on
-                an existing recipe.
-              </p>
-            </motion.div>
-          </div>
+              <path
+                d="m230.357 76.14-38.243 70.927c-1.078 1.998.37 4.423 2.64 4.423h81.741a13 13 0 0 0 11.52-6.976l34.988-66.916a1 1 0 0 0-.886-1.463l-91.76.004Z"
+                fill="#333"
+              ></path>
+            </mask>
+            <g mask="url(#:S1:)" stroke="#111">
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -13.924 264.465)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -17.347 272.73)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -20.768 280.988)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -24.192 289.253)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -27.615 297.519)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -31.035 305.775)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -34.457 314.035)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -37.88 322.3)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -41.3 330.556)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -44.722 338.819)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -48.147 347.086)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -51.57 355.35)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -54.987 363.6)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -58.413 371.871)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -61.832 380.125)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -65.253 388.384)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -68.677 396.65)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -72.096 404.906)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -75.518 413.166)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -78.946 421.441)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -82.364 429.693)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -85.786 437.956)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -89.21 446.22)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -92.633 454.485)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -96.05 462.737)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -99.474 471.002)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -102.898 479.267)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -106.32 487.528)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -109.742 495.789)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -113.164 504.05)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -116.585 512.312)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -120.007 520.572)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -123.429 528.833)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -126.85 537.091)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -130.272 545.354)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -133.695 553.618)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -137.116 561.877)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -140.538 570.138)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -143.963 578.408)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -147.381 586.66)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -150.804 594.922)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -154.229 603.19)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -157.65 611.452)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -161.07 619.708)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -164.49 627.964)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -167.916 636.234)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -171.336 644.49)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -174.758 652.753)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -178.18 661.014)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -181.602 669.275)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -185.023 677.534)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -188.445 685.795)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -191.865 694.053)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -195.29 702.321)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -198.716 710.591)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -202.134 718.845)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -205.554 727.101)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -208.981 735.375)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -212.4 743.63)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -215.82 751.884)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -219.246 760.157)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -222.665 768.41)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -226.089 776.676)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -229.512 784.94)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -232.934 793.2)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -236.353 801.457)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -239.777 809.722)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -243.198 817.98)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -246.62 826.241)"
+                d="M0-.5h497.768"
+              ></path>
+              <path
+                transform="scale(-1.02975 -.96934) rotate(-45 -250.043 834.507)"
+                d="M0-.5h497.768"
+              ></path>
+            </g>
+            <path
+              d="m190.631 149.822 39.724-73.684-39.724-73.683M322.76 76.134h-92.408"
+              stroke="#333"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-dasharray="3 4"
+            ></path>
+            <path
+              d="m187.149 146.187-35.176-65.912a8.738 8.738 0 0 1 0-8.28l35.176-65.912C188.811 2.967 192.2 1 195.904 1h82.052c3.705 0 7.092 1.967 8.755 5.083l35.176 65.911a8.738 8.738 0 0 1 0 8.281l-35.176 65.912c-1.662 3.116-5.05 5.083-8.755 5.083h-82.052c-3.704 0-7.092-1.967-8.755-5.083Z"
+              stroke="#333"
+              stroke-width="1.4"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            ></path>
+            <path
+              d="M112.184 146.204 77.008 80.293a8.74 8.74 0 0 1 0-8.281l35.176-65.911c1.662-3.116 5.051-5.083 8.755-5.083h28.013c3.704 0 7.092 1.967 8.755 5.083l35.177 65.911a8.743 8.743 0 0 1 0 8.28l-35.177 65.912c-1.662 3.116-5.051 5.083-8.755 5.083h-28.013c-3.704 0-7.092-1.967-8.755-5.083Z"
+              fill="#040404"
+              stroke="#333"
+              stroke-width="1.4"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            ></path>
+            <path
+              d="M115.666 149.833 155.39 76.15 115.666 2.467m77.346 73.68h-37.625"
+              stroke="#333"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-dasharray="3 4"
+            ></path>
+            <path
+              d="M37.219 146.204 2.043 80.293a8.74 8.74 0 0 1 0-8.281L37.219 6.101c1.663-3.116 5.051-5.083 8.755-5.083h28.013c3.705 0 7.092 1.967 8.756 5.083l35.176 65.911a8.743 8.743 0 0 1 0 8.28l-35.176 65.912c-1.663 3.116-5.051 5.083-8.756 5.083H45.975c-3.705 0-7.093-1.967-8.756-5.083Z"
+              fill="#080808"
+              stroke="#333"
+              stroke-width="1.4"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            ></path>
+            <path
+              d="m40.707 149.829 39.724-73.683L40.707 2.463m77.346 73.68H80.428"
+              stroke="#333"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-dasharray="3 4"
+            ></path>
+          </svg>
         </SectionContainer>
 
         <SectionContainer>
-          <div className="flex flex-col gap-8">
-            <div className="flex flex-col gap-4">
-              <div className="max-w-md mx-auto w-full">
-                <Input
-                  icon={<Search size="14" />}
-                  size="small"
-                  autoComplete="off"
-                  type="search"
-                  placeholder="Search recipes"
-                  value={searchTerm}
-                  onChange={(e) => setSearchTerm(e.target.value)}
-                  className="w-full [&_input]:text-base [&_input]:md:text-sm [&_input]:!leading-4"
-                />
-              </div>
-
-              <div className="flex flex-wrap gap-2 justify-center">
-                {selectedCategories.length > 0 && (
-                  <Button
-                    type="default"
-                    size="tiny"
-                    onClick={handleClearCategories}
-                    icon={<X size={12} />}
-                  >
-                    Clear filters
-                  </Button>
-                )}
+          <div>
+            {/* <div>
+              <div className="flex flex-wrap gap-2 justify-center my-8">
                 {recipes.map((category) => (
                   <Button
                     key={category.id}
@@ -193,50 +562,37 @@ function CookbookPage() {
                   </Button>
                 ))}
               </div>
-            </div>
+            </div> */}
 
-            <div className="grid gap-12">
-              {filteredRecipes.map((category) => (
-                <div key={category.id}>
-                  <div className="mb-6">
-                    <h2 className="text-xl text-foreground mb-1">{category.title}</h2>
-                    <p className="text-sm text-foreground-light">{category.description}</p>
-                  </div>
-                  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
-                    {category.items.map((recipe) => (
-                      <button
-                        key={recipe.id}
-                        onClick={() => handleRecipeSelect(recipe)}
-                        className="text-left w-full focus-visible:ring-2 focus-visible:ring-foreground-lighter outline-none"
-                      >
-                        <Panel>
-                          <div className="flex flex-col gap-3 p-5 h-full">
-                            <div className="flex items-center justify-between">
-                              <div className="p-2 bg-alternative rounded">
-                                {recipe.type === 'edge-function' ? (
-                                  <Code size={20} strokeWidth={1.5} />
-                                ) : (
-                                  <Database size={20} strokeWidth={1.5} />
-                                )}
-                              </div>
-                              <div className="text-xs uppercase text-foreground-lighter">
-                                {recipe.type === 'edge-function' ? 'Edge Function' : 'Query'}
-                              </div>
-                            </div>
-                            <div>
-                              <h3 className="text-base font-medium text-foreground mb-1">
-                                {recipe.title}
-                              </h3>
-                              <p className="text-sm text-foreground-light">{recipe.description}</p>
-                            </div>
-                          </div>
-                        </Panel>
-                      </button>
-                    ))}
-                  </div>
+            {filteredRecipes.map((category) => (
+              <div key={category.id} className="mb-12">
+                <div className="mb-6">
+                  <h2 className="text-xl text-foreground mb-1">{category.title}</h2>
+                  <p className="text-sm text-foreground-light">{category.description}</p>
                 </div>
-              ))}
-            </div>
+                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 items-stretch justify-items-stretch">
+                  {category.items.map((recipe) => (
+                    <div
+                      className="rounded border bg-surface-100/50 hover:bg-surface-100 cursor-pointer flex flex-col justify-between px-5 py-4"
+                      onClick={() => handleRecipeSelect(recipe)}
+                    >
+                      <div className="text-foreground-muted font-mono text-xs flex items-center gap-2 justify-end mb-4">
+                        {recipe.type === 'edge-function' ? (
+                          <Code size={16} strokeWidth={1.5} />
+                        ) : (
+                          <Database size={16} strokeWidth={1.5} />
+                        )}
+                        <span className="text-foreground-muted">{recipe.type}</span>
+                      </div>
+                      <div>
+                        <h3 className="text-sm font-medium text-foreground mb-1">{recipe.title}</h3>
+                        <p className="text-sm text-foreground-light">{recipe.description}</p>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ))}
           </div>
         </SectionContainer>