fix: ShowcaseCard design adjustments

packages/logos-docusaurus-theme/src/client/components/mdx/ShowcaseCard/ShowcaseCard.scss

@@ -6,20 +6,54 @@
 }
 
 .mdx-showcase-card__inner {
-  padding: 24px 8px;
+  padding-top: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
 }
 
 .mdx-showcase-card__logo {
+  width: 58px;
+  height: auto;
+}
+
+.mdx-showcase-card__index {
+  width: 30px;
+  height: 30px;
+  color: rgb(var(--lsd-text-secondary)) !important;
+  background-color: rgb(var(--lsd-surface-secondary));
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
 }
 
 .mdx-showcase-card__name {
-  margin-top: 1rem;
 }
 
 .mdx-showcase-card__description {
-  border-top: 1px solid rgb(var(--lsd-border-primary));
-  margin-top: 24px;
-  padding-top: 16px;
+  margin-top: -0.125rem;
+  padding-top: 0.5rem;
+}
+
+.mdx-showcase-card--large {
+  .mdx-showcase-card__logo {
+    width: 58px;
+  }
+}
+
+.mdx-showcase-card--small {
+  .mdx-showcase-card__logo {
+    width: 34px;
+  }
+}
+
+.mdx-showcase-card--border-solid {
+  .mdx-showcase-card__description {
+    border-top: 1px solid rgb(var(--lsd-border-primary));
+    padding-top: 1rem;
+  }
 }
 
 @include utils.responsive('lg', 'down') {

packages/logos-docusaurus-theme/src/client/components/mdx/ShowcaseCard/ShowcaseCard.tsx

@@ -8,24 +8,47 @@ export type ShowcaseCardProps = Omit<
   React.HTMLAttributes<HTMLDivElement>,
   'title'
 > & {
+  index?: React.ReactNode
   logoSrc?: string
   logoSrcDark?: string
   name: React.ReactNode
   description: React.ReactNode
+  size?: 'small' | 'large'
+  borderStyle?: 'none' | 'solid'
 }
 
 export const ShowcaseCard: React.FC<ShowcaseCardProps> = ({
+  index,
   name,
   logoSrc,
   logoSrcDark,
   description,
   className,
+  size = 'large',
+  borderStyle = 'solid',
   children,
   ...props
 }) => {
   return (
-    <div className={clsx(className, 'mdx-showcase-card')} {...props}>
+    <div
+      className={clsx(
+        className,
+        'mdx-showcase-card',
+        `mdx-showcase-card--${size}`,
+        `mdx-showcase-card--border-${borderStyle}`,
+      )}
+      {...props}
+    >
       <div className="mdx-showcase-card__inner">
+        {index && (
+          <Typography
+            className="mdx-showcase-card__index"
+            variant="subtitle2"
+            component="div"
+          >
+            {index}
+          </Typography>
+        )}
         {(logoSrc || logoSrcDark) && (
           <ThemedImage
             sources={{
@@ -36,20 +59,24 @@ export const ShowcaseCard: React.FC<ShowcaseCardProps> = ({
             className="mdx-showcase-card__logo"
           />
         )}
-        <Typography
-          variant="h2"
-          component="h2"
-          className="mdx-showcase-card__name"
-        >
-          {name}
-        </Typography>
-        <Typography
-          variant="body1"
-          component="p"
-          className="mdx-showcase-card__description"
-        >
-          {description}
-        </Typography>
+        {name && (
+          <Typography
+            variant="h2"
+            component="h2"
+            className="mdx-showcase-card__name"
+          >
+            {name}
+          </Typography>
+        )}
+        {description && (
+          <Typography
+            variant="body1"
+            component="p"
+            className="mdx-showcase-card__description"
+          >
+            {description}
+          </Typography>
+        )}
       </div>
     </div>
   )