docs - hero alt custom, feature section clickable

Author: EhfazAdnan

assets/css/custom.css

@@ -70,3 +70,7 @@
 .dark .feature-icon .dark-logo {
     display: block;
 }
+
+.custom-hero-alt-heading-1 {
+    color: #3451b2;
+}

components/content/Card.vue

@@ -36,8 +36,7 @@
       <SmartIcon v-if="to && showLinkIcon" name="lucide:arrow-up-right" class="absolute right-4 top-4" />
     </UiCard>
   </UseTemplate>
-
-   <div class="group-has-[div]:!mt-0 [&:not(:first-child)]:mt-5">
+  <div class="group-has-[div]:!mt-0 [&:not(:first-child)]:mt-5">
     <NuxtLinkLocale v-if="to" :to :target>
       <CardInner />
     </NuxtLinkLocale>

components/content/CardCustom.vue

@@ -0,0 +1,70 @@
+<template>
+  <UseTemplate>
+    <UiCard
+      class="relative h-full overflow-hidden transition-all"
+      :class="[
+        to && 'hover:bg-muted',
+        inStack && 'mb-0 rounded-none border-none shadow-none',
+      ]"
+    >
+      <NuxtImg
+        v-if="img"
+        :src="img"
+        class="w-full"
+      />
+      <UiCardHeader v-if="icon || title || $slots.title || description || $slots.description" :class="{ 'flex-row items-center gap-5': horizontal }">
+        <SmartIcon v-if="icon" :name="icon" :size="iconSize" :class="{ 'mb-2': !horizontal }" />
+        <div class="flex flex-col gap-1.5">
+          <UiCardTitle v-if="title || $slots.title">
+            <ContentSlot :use="$slots.title" unwrap="p" />
+            {{ title }}
+          </UiCardTitle>
+          <UiCardDescription v-if="description || $slots.description">
+            <ContentSlot :use="$slots.description" unwrap="p" />
+            {{ description }}
+          </UiCardDescription>
+        </div>
+      </UiCardHeader>
+      <UiCardContent v-if="content || $slots.content || $slots.default">
+        <ContentSlot :use="$slots.content" unwrap="p" />
+        <ContentSlot unwrap="p" />
+      </UiCardContent>
+      <UiCardFooter v-if="footer || $slots.footer">
+        <ContentSlot :use="$slots.footer" unwrap="p" />
+        {{ footer }}
+      </UiCardFooter>
+      <!-- <SmartIcon v-if="to && showLinkIcon" name="lucide:arrow-up-right" class="absolute right-4 top-4" /> -->
+    </UiCard>
+  </UseTemplate>
+  <div>
+    <NuxtLinkLocale v-if="to" :to :target>
+      <CardInner />
+    </NuxtLinkLocale>
+    <CardInner v-else />
+  </div>
+</template>
+
+<script setup lang="ts">
+const {
+  showLinkIcon = true,
+  horizontal = false,
+  iconSize = 24,
+} = defineProps<{
+  title?: string;
+  description?: string;
+  footer?: string;
+  content?: string;
+  to?: string;
+  target?: Target;
+  icon?: string;
+  iconSize?: number;
+  inStack?: boolean;
+  img?: string;
+  showLinkIcon?: boolean;
+  horizontal?: boolean;
+}>();
+
+defineSlots();
+
+const [UseTemplate, CardInner] = createReusableTemplate();
+</script>

components/content/FeaturesSection.vue

@@ -2,12 +2,13 @@
   <section class="w-full py-12 md:py-24 lg:py-8">
     <div class="container px-4 md:px-6">
       <div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-4">
-        <Card
+        <CardCustom
             v-for="(feature, index) in validFeatures"
             :key="index"
+            :to="feature?.link || '#'"
             class="classnotinuse group flex flex-col items-center text-center p-6 transition-all duration-300 hover:shadow-lg border-2 hover:border-primary/20"
         >
-          <CardContentCustom class="p-0 flex flex-col items-center">
+          <CardContentCustom class="flex flex-col items-center">
             <div class="mb-6 flex h-20 w-20 items-center justify-center rounded-2xl bg-primary/10 p-3 group-hover:bg-primary/20 transition-colors">
               <template v-if="feature?.icon">
                 <img
@@ -34,22 +35,23 @@
               {{ feature?.details || 'Feature description' }}
             </p>
 
-            <NuxtLink
+            <!-- <NuxtLink
                 :to="feature?.link || '#'"
                 class="inline-flex items-center text-sm font-medium text-primary hover:underline group/link"
             >
               Learn more
               <Icon name="lucide:arrow-right" class="ml-1 h-4 w-4 transition-transform group-hover/link:translate-x-1" />
-            </NuxtLink>
+            </NuxtLink> -->
           </CardContentCustom>
-        </Card>
+        </CardCustom>
       </div>
     </div>
   </section>
 </template>
 
 <script setup>
 import CardContentCustom from "~/components/ui/card/CardContentCustom.vue";
+import CardCustom from "~/components/content/CardCustom.vue";
 
 const props = defineProps({
   features: {

components/content/HeroAltCustom.vue

@@ -19,11 +19,13 @@
         <Icon name="lucide:arrow-right" class="ml-1 size-4" />
       </NuxtLinkLocale>
 
-      <h1 class="text-3xl font-bold leading-tight tracking-tighter md:text-4xl lg:leading-[1.1]">
+      <h1 class="text-5xl font-bold leading-tight tracking-tighter md:text-6xl lg:leading-[1.1] custom-hero-alt-heading-1">
         <ContentSlot :use="$slots.title" unwrap="p" />
       </h1>
-      <h2>Documentation for Comfort ERP plugins</h2>
-      <p class="text-foreground max-w-2xl text-lg font-light">
+      <h1 class="text-5xl font-bold leading-tight tracking-tighter md:text-6xl lg:leading-[1.1]">
+        <ContentSlot :use="$slots.description" unwrap="p" />
+      </h1>
+      <p class="text-foreground max-w-3xl text-xl font-light md:text-2xl">
         <ContentSlot :use="$slots.subtitle" unwrap="p" />
       </p>