feat: styled link card

packages/tester/docs/test/extra.mdx

@@ -113,13 +113,11 @@ This loader uses `flow-remove-types` under the hood. You can learn more about it
   title="React Native"
   description="I'm using React Native, either bare (RN CLI) or with Expo and want to display a licenses screen in my app."
 />
-<br />
 <LinkCard
   href="/"
   title="Node.js CLI"
   description="I'm building a Node.js app or a non-React-Native project and want to generate license reports for my dependencies."
 />
-<br />
 <LinkCard
   href="/"
   title="Programmatic API"

packages/theme/src/theme/components/link-card/index.module.scss

@@ -1,11 +1,75 @@
+.linkCard {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  color: var(--rp-c-text-1);
+  border: 1px dashed var(--rp-c-divider);
+  border-radius: var(--rp-radius-small);
+  margin: 1rem 0;
+  padding: 32px;
+  transition: border-color 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);
+}
+
+.linkCard:hover {
+  color: var(--rp-c-brand) !important;
+  border-color: var(--ck-accent);
+}
+
+.linkCard::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-image: url('../../assets/gradient-light.avif');
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+  opacity: 0;
+  z-index: -1;
+  border-radius: inherit;
+  transition: opacity 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);
+}
+
 .link::before {
   content: '';
   position: absolute;
   inset: 0;
 }
 
-.linkCard {
-  &:hover {
-    background-color: var(--rp-c-bg-mute);
-  }
+:global(.dark) .linkCard::before {
+  background-image: url('../../assets/gradient-dark.avif');
+}
+
+.linkCard:hover::before {
+  opacity: 1;
+}
+
+:global(.dark) .linkCard:hover::before {
+  opacity: 0.5;
+}
+
+.linkCardContent {
+  display: flex;
+  flex-direction: column;
+}
+
+.linkCardTitle {
+  font-family: var(--ck-header-font-family);
+  font-size: 24px;
+  font-weight: 500;
+  line-height: 1.5;
+}
+
+.linkCardDescription {
+  font-family: var(--rp-font-family);
+  color: var(--rp-c-text-2);
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.5;
+  letter-spacing: -0.32px;
+  text-align: left;
+  margin-bottom: 0;
 }

packages/theme/src/theme/components/link-card/index.tsx

@@ -25,20 +25,16 @@ export function LinkCard(props: LinkCardProps) {
   const { href, title, description, style } = props;
 
   return (
-    <div
-      className={`rp-relative rp-border rp-border-gray-400 rp-rounded-lg rp-p-6 rp-flex rp-justify-between rp-items-start hover:rp-border-gray-500 rp-transition-all rp-duration-300 ${styles.linkCard}`}
-      style={style}
-    >
-      <div className="rp-flex rp-flex-col">
-        <a
-          href={href}
-          className={`rp-flex rp-items-center rp-gap-2 rp-mb-4 ${styles.link}`}
-        >
-          {title && <span className="rp-text-2xl rp-font-bold">{title}</span>}
+    <div className={styles.linkCard} style={style}>
+      <div className={styles.linkCardContent}>
+        <a href={href} className={styles.link}>
+          {title && <span className={styles.linkCardTitle}>{title}</span>}
         </a>
-        <span className="rp-text-base rp-overflow-auto">{description}</span>
+        <span className={styles.linkCardDescription}>{description}</span>
+      </div>
+      <div className={styles.linkCardArrow}>
+        <ArrowRight />
       </div>
-      <ArrowRight />
     </div>
   );
 }