From 7afe4583929bcda4f387506036f386b47201c209 Mon Sep 17 00:00:00 2001
From: Jordan <gilliamja.te@gmail.com>
Date: Thu, 20 Jun 2024 17:57:31 -0400
Subject: [PATCH] feat: fix image cards

---
 apps/www/components/landing/plug-grid.tsx     | 24 +++++++++----------
 .../registry/styles/default/minimal-card.json |  2 +-
 apps/www/registry/default/ui/minimal-card.tsx |  2 +-
 3 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/apps/www/components/landing/plug-grid.tsx b/apps/www/components/landing/plug-grid.tsx
index ddda850..79b52a9 100644
--- a/apps/www/components/landing/plug-grid.tsx
+++ b/apps/www/components/landing/plug-grid.tsx
@@ -12,25 +12,25 @@ import { Badge } from "../ui/badge"
 export function PlugCardGrid() {
   const cards = [
     {
-      title: "Full Stack Shadcn Templates",
+      title: "Free SEO Improvement Tool",
       description:
-        "Comprehensive Next.js + Supabase templates built with Tailwind CSS, Cult components, and shadcn.",
-      href: "https://www.newcult.co/templates/cult-offline-travel-stash",
-      img: "/newcult-landing.png",
+        "Quickly evaluate your website's SEO performance for free. AI improvements + Open graph preview.",
+      href: "https://cleanmyseo.com",
+      img: "https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExd2FoNGR5OXpvMnZ2a3NpNWpqYnlnOG82aWYzMnJhY256ajVuOWhpMSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/w1LYqDDIpDaLKj6N5t/giphy.gif",
     },
     {
-      title: "Free SEO Improvement Tool",
+      title: "Full Stack Shadcn Templates",
       description:
-        "Quickly evaluate your website's SEO performance for free. AI improvements + Open graph preview.",
-      href: "https://www.newcult.co/templates/cult-seo",
-      img: "/seo.webp",
+        "Comprehensive Next.js + Supabase templates built with Tailwind CSS, Cult components, and shadcn.",
+      href: "https://www.newcult.co",
+      img: "https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExc3p0Nm1xcnE2eDNkOTJ6NndxaTJlejFodGozZ3RpcXc4MW80OHkwYSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/AdRaGoL5xT1SdI6J5v/giphy.gif",
     },
     {
-      title: "Design Engineering Directory",
+      title: "Open Source Directory Template",
       description:
         "Curated bookmarks for design engineers: design tools, JavaScript resources, React.js libraries, and more.",
-      href: "https://www.newcult.co/templates/cult-directory-template",
-      img: "/dir.png",
+      href: "https://github.com/nolly-studio/cult-directory-template",
+      img: "https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExMXFpaG1vaG83YTgxdTdxc2ZreHNtaGphYjF4aXd6c3JvbXNodW9ubSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/7bzrBMHEsgPb20T3C5/giphy.gif",
     },
   ]
 
@@ -41,7 +41,7 @@ export function PlugCardGrid() {
         className="absolute left-4 top-4 rounded-[14px] border border-black/10 text-base md:left-6"
       >
         <StickerIcon className="mr-1  fill-[#D2F583] stroke-1 text-neutral-800" />{" "}
-        Additional tools
+        Additional goods
       </Badge>
       <div className="   flex flex-col justify-center  space-y-4 rounded-[34px]   p-3 pt-12">
         <div className="relative grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 ">
diff --git a/apps/www/public/registry/styles/default/minimal-card.json b/apps/www/public/registry/styles/default/minimal-card.json
index b6331f6..af47276 100644
--- a/apps/www/public/registry/styles/default/minimal-card.json
+++ b/apps/www/public/registry/styles/default/minimal-card.json
@@ -6,7 +6,7 @@
   "files": [
     {
       "name": "minimal-card.tsx",
-      "content": "import * as React from \"react\"\nimport Image from \"next/image\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst MinimalCard = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & { children?: React.ReactNode }\n>(({ className, children, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      \"rounded-[24px] dark:bg-neutral-800 bg-neutral-50 p-2 no-underline shadow-sm transition-colors hover:bg-neutral-100 dark:hover:bg-neutral-800/80 \",\n      \"shadow-[0px_1px_1px_0px_rgba(0,0,0,0.05),0px_1px_1px_0px_rgba(255,252,240,0.5)_inset,0px_0px_0px_1px_hsla(0,0%,100%,0.1)_inset,0px_0px_1px_0px_rgba(28,27,26,0.5)]\",\n      \"shadow-[rgba(17,24,28,0.08)_0_0_0_1px,rgba(17,24,28,0.08)_0_1px_2px_-1px,rgba(17,24,28,0.04)_0_2px_4px]\",\n      \"dark:shadow-[0_1px_0_0_rgba(255,255,255,0.03)_inset,0_0_0_1px_rgba(255,255,255,0.03)_inset,0_0_0_1px_rgba(0,0,0,0.1),0_2px_2px_0_rgba(0,0,0,0.1),0_4px_4px_0_rgba(0,0,0,0.1),0_8px_8px_0_rgba(0,0,0,0.1)]\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n  </div>\n))\nMinimalCard.displayName = \"MinimalCard\"\n\nconst MinimalCardImage = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & { src: string; alt: string }\n>(({ className, alt, src, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      \"relative h-[190px] w-full rounded-[20px] mb-6\",\n      \"shadow-[0px_1px_1px_0px_rgba(0,0,0,0.05),0px_1px_1px_0px_rgba(255,252,240,0.5)_inset,0px_0px_0px_1px_hsla(0,0%,100%,0.1)_inset,0px_0px_1px_0px_rgba(28,27,26,0.5)]\",\n      \"dark:shadow-[0_1px_0_0_rgba(255,255,255,0.03)_inset,0_0_0_1px_rgba(255,255,255,0.03)_inset,0_0_0_1px_rgba(0,0,0,0.1),0_2px_2px_0_rgba(0,0,0,0.1),0_4px_4px_0_rgba(0,0,0,0.1),0_8px_8px_0_rgba(0,0,0,0.1)]\",\n      className\n    )}\n    {...props}\n  >\n    <Image\n      src={src}\n      alt={alt}\n      width={200}\n      height={200}\n      className=\"rounded-[16px] object-cover absolute h-full w-full inset-0 \"\n    />\n    <div className=\"absolute inset-0 rounded-[16px]\">\n      <div\n        className={cn(\n          \"absolute inset-0 rounded-[16px]\",\n          \"shadow-[0px_0px_0px_1px_rgba(0,0,0,.07),0px_0px_0px_3px_#fff,0px_0px_0px_4px_rgba(0,0,0,.08)]\",\n          \"dark:shadow-[0px_0px_0px_1px_rgba(0,0,0,.07),0px_0px_0px_3px_rgba(100,100,100,0.3),0px_0px_0px_4px_rgba(0,0,0,.08)]\"\n        )}\n      />\n      <div\n        className={cn(\n          \"absolute inset-0 rounded-[16px]\",\n          \"dark:shadow-[0px_1px_1px_0px_rgba(0,0,0,0.15),0px_1px_1px_0px_rgba(0,0,0,0.15)_inset,0px_0px_0px_1px_rgba(0,0,0,0.15)_inset,0px_0px_1px_0px_rgba(0,0,0,0.15)]\"\n        )}\n      />\n    </div>\n  </div>\n))\nMinimalCardImage.displayName = \"MinimalCardImage\"\n\nconst MinimalCardTitle = React.forwardRef<\n  HTMLHeadingElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h3\n    ref={ref}\n    className={cn(\"text-lg mt-2 font-semibold leading-tight px-1\", className)}\n    {...props}\n  />\n))\nMinimalCardTitle.displayName = \"MinimalCardTitle\"\n\nconst MinimalCardDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn(\"text-sm text-neutral-500 pb-2 px-1\", className)}\n    {...props}\n  />\n))\nMinimalCardDescription.displayName = \"MinimalCardDescription\"\n\nconst MinimalCardContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn(\"p-6 pt-0\", className)} {...props} />\n))\nMinimalCardContent.displayName = \"MinimalCardContent\"\n\nconst MinimalCardFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex items-center p-6 pt-0\", className)}\n    {...props}\n  />\n))\nMinimalCardFooter.displayName = \"MinimalCardFooter\"\n\nexport {\n  MinimalCard,\n  MinimalCardImage,\n  MinimalCardTitle,\n  MinimalCardDescription,\n  MinimalCardContent,\n  MinimalCardFooter,\n}\n\nexport default MinimalCard\n"
+      "content": "import * as React from \"react\"\nimport Image from \"next/image\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst MinimalCard = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & { children?: React.ReactNode }\n>(({ className, children, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      \"rounded-[24px] dark:bg-neutral-800 bg-neutral-50 p-2 no-underline shadow-sm transition-colors hover:bg-neutral-100 dark:hover:bg-neutral-800/80 \",\n      \"shadow-[0px_1px_1px_0px_rgba(0,0,0,0.05),0px_1px_1px_0px_rgba(255,252,240,0.5)_inset,0px_0px_0px_1px_hsla(0,0%,100%,0.1)_inset,0px_0px_1px_0px_rgba(28,27,26,0.5)]\",\n      \"shadow-[rgba(17,24,28,0.08)_0_0_0_1px,rgba(17,24,28,0.08)_0_1px_2px_-1px,rgba(17,24,28,0.04)_0_2px_4px]\",\n      \"dark:shadow-[0_1px_0_0_rgba(255,255,255,0.03)_inset,0_0_0_1px_rgba(255,255,255,0.03)_inset,0_0_0_1px_rgba(0,0,0,0.1),0_2px_2px_0_rgba(0,0,0,0.1),0_4px_4px_0_rgba(0,0,0,0.1),0_8px_8px_0_rgba(0,0,0,0.1)]\",\n      className\n    )}\n    {...props}\n  >\n    {children}\n  </div>\n))\nMinimalCard.displayName = \"MinimalCard\"\n\nconst MinimalCardImage = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & { src: string; alt: string }\n>(({ className, alt, src, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      \"relative h-[190px] w-full rounded-[20px] mb-6\",\n      \"shadow-[0px_1px_1px_0px_rgba(0,0,0,0.05),0px_1px_1px_0px_rgba(255,252,240,0.5)_inset,0px_0px_0px_1px_hsla(0,0%,100%,0.1)_inset,0px_0px_1px_0px_rgba(28,27,26,0.5)]\",\n      \"dark:shadow-[0_1px_0_0_rgba(255,255,255,0.03)_inset,0_0_0_1px_rgba(255,255,255,0.03)_inset,0_0_0_1px_rgba(0,0,0,0.1),0_2px_2px_0_rgba(0,0,0,0.1),0_4px_4px_0_rgba(0,0,0,0.1),0_8px_8px_0_rgba(0,0,0,0.1)]\",\n      className\n    )}\n    {...props}\n  >\n    <img\n      src={src}\n      alt={alt}\n      width={200}\n      height={200}\n      className=\"rounded-[16px] object-cover absolute h-full w-full inset-0 \"\n    />\n    <div className=\"absolute inset-0 rounded-[16px]\">\n      <div\n        className={cn(\n          \"absolute inset-0 rounded-[16px]\",\n          \"shadow-[0px_0px_0px_1px_rgba(0,0,0,.07),0px_0px_0px_3px_#fff,0px_0px_0px_4px_rgba(0,0,0,.08)]\",\n          \"dark:shadow-[0px_0px_0px_1px_rgba(0,0,0,.07),0px_0px_0px_3px_rgba(100,100,100,0.3),0px_0px_0px_4px_rgba(0,0,0,.08)]\"\n        )}\n      />\n      <div\n        className={cn(\n          \"absolute inset-0 rounded-[16px]\",\n          \"dark:shadow-[0px_1px_1px_0px_rgba(0,0,0,0.15),0px_1px_1px_0px_rgba(0,0,0,0.15)_inset,0px_0px_0px_1px_rgba(0,0,0,0.15)_inset,0px_0px_1px_0px_rgba(0,0,0,0.15)]\"\n        )}\n      />\n    </div>\n  </div>\n))\nMinimalCardImage.displayName = \"MinimalCardImage\"\n\nconst MinimalCardTitle = React.forwardRef<\n  HTMLHeadingElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h3\n    ref={ref}\n    className={cn(\"text-lg mt-2 font-semibold leading-tight px-1\", className)}\n    {...props}\n  />\n))\nMinimalCardTitle.displayName = \"MinimalCardTitle\"\n\nconst MinimalCardDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn(\"text-sm text-neutral-500 pb-2 px-1\", className)}\n    {...props}\n  />\n))\nMinimalCardDescription.displayName = \"MinimalCardDescription\"\n\nconst MinimalCardContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn(\"p-6 pt-0\", className)} {...props} />\n))\nMinimalCardContent.displayName = \"MinimalCardContent\"\n\nconst MinimalCardFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex items-center p-6 pt-0\", className)}\n    {...props}\n  />\n))\nMinimalCardFooter.displayName = \"MinimalCardFooter\"\n\nexport {\n  MinimalCard,\n  MinimalCardImage,\n  MinimalCardTitle,\n  MinimalCardDescription,\n  MinimalCardContent,\n  MinimalCardFooter,\n}\n\nexport default MinimalCard\n"
     }
   ],
   "type": "components:ui"
diff --git a/apps/www/registry/default/ui/minimal-card.tsx b/apps/www/registry/default/ui/minimal-card.tsx
index 0257b6d..3a42c79 100644
--- a/apps/www/registry/default/ui/minimal-card.tsx
+++ b/apps/www/registry/default/ui/minimal-card.tsx
@@ -37,7 +37,7 @@ const MinimalCardImage = React.forwardRef<
     )}
     {...props}
   >
-    <Image
+    <img
       src={src}
       alt={alt}
       width={200}