Fix list item styling (#3590)

The Card component was always wrapping content in an <a> tag even when
no href was provided. This created invalid nested anchors when Card was
used inside another link (e.g., in WorksWithSection integrations list),
causing unpredictable click behavior where clicking on one item could
navigate to a different href.

Now Card only renders the <a> wrapper when href is actually provided.

Co-authored-by: Claude <[email protected]>

Author: KyleAMathews

website/src/components/home/Card.vue

@@ -94,7 +94,7 @@ const { background, body, href, icon, image, title } = defineProps([
 </style>
 
 <template>
-  <a class="no-visual" :href="href">
+  <a v-if="href" class="no-visual" :href="href">
     <div
       class="card"
       :style="{
@@ -123,4 +123,32 @@ const { background, body, href, icon, image, title } = defineProps([
       </slot>
     </div>
   </a>
+  <div
+    v-else
+    class="card"
+    :style="{
+      backgroundColor: background ? background : 'var(--vp-c-bg-soft)',
+    }"
+  >
+    <slot name="override_contents">
+      <div v-if="image" class="image">
+        <img :src="image" />
+      </div>
+      <div v-if="icon" class="icon">
+        <img :src="icon" />
+      </div>
+      <div
+        class="body"
+        :style="{
+          backgroundColor: background ? background : 'var(--vp-c-bg-soft)',
+        }"
+      >
+        <h3 v-if="title">
+          {{ title }}
+        </h3>
+        <p v-if="body" v-html="body"></p>
+        <slot></slot>
+      </div>
+    </slot>
+  </div>
 </template>