create-nala 3.0.0

package/template/src/views/auth/VerifyOtpView.vue

@@ -0,0 +1,261 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { ShieldCheck, CheckCircle2, ArrowRight, ArrowLeft, RotateCw, KeyRound, Smartphone } from '@lucide/vue'
+
+const router = useRouter()
+const isRecoveryMode = ref(false)
+const recoveryCode = ref('')
+const digits = ref<string[]>(['', '', '', '', '', ''])
+const inputRefs = ref<HTMLInputElement[]>([])
+const isVerifying = ref(false)
+const isVerified = ref(false)
+const errorMessage = ref('')
+const countdown = ref(60)
+const isResending = ref(false)
+let timer: ReturnType<typeof setInterval> | null = null
+
+const isCodeComplete = computed(() => {
+  if (isRecoveryMode.value) {
+    return recoveryCode.value.trim().length >= 8
+  }
+  return digits.value.every((d) => d.length === 1)
+})
+
+const startCountdown = () => {
+  countdown.value = 60
+  if (timer) clearInterval(timer)
+  timer = setInterval(() => {
+    if (countdown.value > 0) {
+      countdown.value--
+    } else {
+      if (timer) clearInterval(timer)
+    }
+  }, 1000)
+}
+
+onMounted(() => {
+  startCountdown()
+  setTimeout(() => {
+    inputRefs.value[0]?.focus()
+  }, 100)
+})
+
+onUnmounted(() => {
+  if (timer) clearInterval(timer)
+})
+
+const handleInput = (index: number, event: Event) => {
+  errorMessage.value = ''
+  const target = event.target as HTMLInputElement
+  const value = target.value.replace(/\D/g, '')
+
+  digits.value[index] = value ? value.slice(-1) : ''
+
+  if (value && index < 5) {
+    inputRefs.value[index + 1]?.focus()
+  }
+}
+
+const handleKeyDown = (index: number, event: KeyboardEvent) => {
+  if (event.key === 'Backspace' && !digits.value[index] && index > 0) {
+    inputRefs.value[index - 1]?.focus()
+  }
+}
+
+const handlePaste = (event: ClipboardEvent) => {
+  event.preventDefault()
+  const pastedData = event.clipboardData?.getData('text') || ''
+  const numbers = pastedData.replace(/\D/g, '').slice(0, 6)
+
+  if (numbers.length > 0) {
+    for (let i = 0; i < 6; i++) {
+      digits.value[i] = numbers[i] || ''
+    }
+    const nextIndex = Math.min(numbers.length, 5)
+    inputRefs.value[nextIndex]?.focus()
+  }
+}
+
+const handleVerify = () => {
+  if (!isCodeComplete.value) return
+  isVerifying.value = true
+  errorMessage.value = ''
+
+  setTimeout(() => {
+    isVerifying.value = false
+    const enteredCode = isRecoveryMode.value ? recoveryCode.value.trim() : digits.value.join('')
+
+    if (enteredCode === '000000') {
+      errorMessage.value = 'Invalid OTP code. Please check and try again.'
+    } else {
+      isVerified.value = true
+    }
+  }, 1000)
+}
+
+const handleResend = () => {
+  if (countdown.value > 0 || isResending.value) return
+  isResending.value = true
+  errorMessage.value = ''
+
+  setTimeout(() => {
+    isResending.value = false
+    digits.value = ['', '', '', '', '', '']
+    inputRefs.value[0]?.focus()
+    startCountdown()
+  }, 800)
+}
+
+const toggleRecoveryMode = () => {
+  isRecoveryMode.value = !isRecoveryMode.value
+  errorMessage.value = ''
+}
+
+const handleProceed = () => {
+  router.push('/')
+}
+</script>
+
+<template>
+  <Card flush class="w-full max-w-md shadow-xl border-border/80 bg-card">
+    <!-- Success State -->
+    <template v-if="isVerified">
+      <CardHeader class="pt-8 pb-6 px-6 sm:px-8 space-y-2 text-center">
+        <div class="mx-auto mb-2 flex h-12 w-12 items-center justify-center rounded-xl bg-emerald-500/10 text-emerald-600 dark:text-emerald-400">
+          <CheckCircle2 class="h-6 w-6" />
+        </div>
+        <CardTitle class="text-2xl font-bold tracking-tight">Authentication verified</CardTitle>
+        <CardDescription class="text-sm">
+          Two-factor authentication verified successfully. Redirecting you to your account...
+        </CardDescription>
+      </CardHeader>
+
+      <CardContent class="px-6 sm:px-8 pb-8">
+        <Button class="w-full font-medium cursor-pointer" @click="handleProceed">
+          <span class="flex items-center justify-center gap-2">
+            Continue to Dashboard
+            <ArrowRight class="h-4 w-4" />
+          </span>
+        </Button>
+      </CardContent>
+    </template>
+
+    <!-- OTP Form State -->
+    <template v-else>
+      <CardHeader class="pt-8 pb-6 px-6 sm:px-8 space-y-1.5 text-center">
+        <div class="mx-auto mb-2 flex h-12 w-12 items-center justify-center rounded-xl bg-primary/10 text-primary">
+          <component :is="isRecoveryMode ? KeyRound : ShieldCheck" class="h-6 w-6" />
+        </div>
+        <CardTitle class="text-2xl font-bold tracking-tight">
+          {{ isRecoveryMode ? 'Enter recovery code' : 'Two-Factor Authentication' }}
+        </CardTitle>
+        <CardDescription class="text-sm">
+          {{
+            isRecoveryMode
+              ? 'Enter one of your emergency recovery codes to access your account.'
+              : 'Enter the 6-digit verification code generated by your authenticator app or sent to your phone.'
+          }}
+        </CardDescription>
+      </CardHeader>
+
+      <CardContent class="px-6 sm:px-8 pb-6 space-y-5">
+        <!-- Recovery Code Input -->
+        <div v-if="isRecoveryMode" class="space-y-2">
+          <Label for="recoveryCode" class="text-xs font-semibold">Recovery Code</Label>
+          <InputGroup>
+            <InputIcon>
+              <KeyRound />
+            </InputIcon>
+            <Input
+              id="recoveryCode"
+              v-model="recoveryCode"
+              type="text"
+              placeholder="e.g. ABCD-1234-EFGH"
+              class="pl-9 font-mono uppercase"
+              autocomplete="off"
+            />
+          </InputGroup>
+        </div>
+
+        <!-- 6-Digit OTP Inputs -->
+        <div v-else class="flex items-center justify-center gap-2 sm:gap-3" @paste="handlePaste">
+          <input
+            v-for="(_, index) in digits"
+            :key="index"
+            ref="inputRefs"
+            type="text"
+            inputmode="numeric"
+            pattern="[0-9]*"
+            maxlength="1"
+            :value="digits[index]"
+            class="h-12 w-11 sm:h-13 sm:w-12 rounded-lg border border-input bg-background text-center text-lg font-semibold shadow-xs outline-none transition-all focus:border-primary focus:ring-2 focus:ring-primary/20 disabled:cursor-not-allowed disabled:opacity-50"
+            @input="handleInput(index, $event)"
+            @keydown="handleKeyDown(index, $event)"
+          />
+        </div>
+
+        <!-- Error Message -->
+        <p v-if="errorMessage" class="text-xs font-medium text-destructive text-center">
+          {{ errorMessage }}
+        </p>
+
+        <!-- Submit Button -->
+        <Button
+          type="button"
+          class="w-full font-medium cursor-pointer"
+          :disabled="!isCodeComplete || isVerifying"
+          @click="handleVerify"
+        >
+          <span v-if="isVerifying">Verifying...</span>
+          <span v-else class="flex items-center justify-center gap-2">
+            Verify Code
+            <ArrowRight class="h-4 w-4" />
+          </span>
+        </Button>
+
+        <!-- Method Alternatives & Resend Options -->
+        <div class="space-y-3 text-center text-xs text-muted-foreground">
+          <div v-if="!isRecoveryMode">
+            <span>Didn't get a code? </span>
+            <button
+              type="button"
+              class="font-medium text-primary hover:underline transition-colors cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:no-underline inline-flex items-center gap-1"
+              :disabled="countdown > 0 || isResending"
+              @click="handleResend"
+            >
+              <RotateCw v-if="isResending" class="h-3 w-3 animate-spin" />
+              <span v-if="countdown > 0">Resend code in {{ countdown }}s</span>
+              <span v-else>Resend code</span>
+            </button>
+          </div>
+
+          <div>
+            <button
+              type="button"
+              class="inline-flex items-center gap-1.5 font-medium text-muted-foreground hover:text-foreground transition-colors cursor-pointer"
+              @click="toggleRecoveryMode"
+            >
+              <component :is="isRecoveryMode ? Smartphone : KeyRound" class="h-3.5 w-3.5" />
+              {{ isRecoveryMode ? 'Use authenticator code instead' : 'Use a backup recovery code' }}
+            </button>
+          </div>
+        </div>
+      </CardContent>
+
+      <CardFooter class="border-t border-border/60 bg-muted/30 px-6 py-4 flex flex-col items-center justify-center text-center">
+        <router-link
+          to="/auth/login"
+          class="inline-flex items-center gap-1.5 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors"
+        >
+          <ArrowLeft class="h-3.5 w-3.5" />
+          Back to sign in
+        </router-link>
+      </CardFooter>
+    </template>
+  </Card>
+</template>

package/template/src/views/dashboard/IndexView.vue

@@ -0,0 +1,159 @@
+<script setup lang="ts">
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import PageHeader from '@/components/PageHeader.vue'
+import {
+  Users,
+  DollarSign,
+  UserPlus,
+  Activity,
+  ArrowUpRight,
+  Sparkles,
+  Layers,
+  Code2,
+} from '@lucide/vue'
+
+// ─── KPI Stats ────────────────────────────────────────────────────────────────
+const stats = [
+  {
+    title: 'Total Revenue',
+    value: '$48,295',
+    change: '+12.5%',
+    changeLabel: 'vs last month',
+    positive: true,
+    icon: DollarSign,
+    color: 'text-emerald-500',
+  },
+  {
+    title: 'Active Users',
+    value: '14,832',
+    change: '+8.2%',
+    changeLabel: 'vs last month',
+    positive: true,
+    icon: Users,
+    color: 'text-primary',
+  },
+  {
+    title: 'New Signups',
+    value: '2,741',
+    change: '+23.1%',
+    changeLabel: 'this week',
+    positive: true,
+    icon: UserPlus,
+    color: 'text-violet-500',
+  },
+  {
+    title: 'System Health',
+    value: '99.98%',
+    change: 'Operational',
+    changeLabel: 'all systems nominal',
+    positive: true,
+    icon: Activity,
+    color: 'text-emerald-500',
+  },
+]
+</script>
+
+<template>
+  <div class="space-y-6">
+    <!-- Page Header -->
+    <PageHeader
+      title="Dashboard"
+      description="Welcome back to your Nala application overview."
+    >
+      <template #actions>
+        <Button size="sm" class="gap-1.5 cursor-pointer">
+          <Sparkles class="h-4 w-4" />
+          <span>New Action</span>
+        </Button>
+      </template>
+    </PageHeader>
+
+    <!-- KPI Metric Cards Grid -->
+    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+      <Card
+        v-for="stat in stats"
+        :key="stat.title"
+        class="relative overflow-hidden transition-all duration-200 hover:shadow-md"
+      >
+        <CardHeader class="flex flex-row items-center justify-between pb-2 space-y-0">
+          <CardTitle class="text-xs font-medium tracking-wide uppercase text-muted-foreground">
+            {{ stat.title }}
+          </CardTitle>
+          <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-muted/60">
+            <component :is="stat.icon" class="h-4 w-4" :class="stat.color" />
+          </div>
+        </CardHeader>
+        <CardContent>
+          <div class="text-2xl font-bold tracking-tight text-foreground">
+            {{ stat.value }}
+          </div>
+          <div class="mt-1 flex items-center text-xs text-muted-foreground">
+            <span
+              class="inline-flex items-center font-medium mr-1"
+              :class="stat.positive ? 'text-emerald-500' : 'text-amber-500'"
+            >
+              <ArrowUpRight class="h-3 w-3 mr-0.5" />
+              {{ stat.change }}
+            </span>
+            <span>{{ stat.changeLabel }}</span>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+
+    <!-- Quick Starter Cards -->
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+      <Card>
+        <CardHeader>
+          <div class="flex items-center gap-2">
+            <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-primary/10 text-primary">
+              <Layers class="h-4 w-4" />
+            </div>
+            <div>
+              <CardTitle class="text-base">Ready-to-use UI Primitives</CardTitle>
+              <CardDescription>Over 34+ accessible components preconfigured.</CardDescription>
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent class="text-sm text-muted-foreground space-y-3">
+          <p>
+            Build your pages with standardized Reka UI primitives styled with Tailwind CSS v4 in
+            <code class="text-xs bg-muted px-1.5 py-0.5 rounded font-mono text-foreground">src/components/ui/</code>.
+          </p>
+          <div class="pt-2">
+            <router-link to="/_blank">
+              <Button variant="outline" size="sm" class="gap-1.5">
+                <Code2 class="h-4 w-4" />
+                <span>Open Blank Template</span>
+              </Button>
+            </router-link>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <div class="flex items-center gap-2">
+            <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-emerald-500/10 text-emerald-500">
+              <Sparkles class="h-4 w-4" />
+            </div>
+            <div>
+              <CardTitle class="text-base">Enterprise Service Layer</CardTitle>
+              <CardDescription>Axios client with typed request interceptors.</CardDescription>
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent class="text-sm text-muted-foreground space-y-3">
+          <p>
+            Easily connect your real REST or GraphQL APIs using the modular architecture in
+            <code class="text-xs bg-muted px-1.5 py-0.5 rounded font-mono text-foreground">src/services/</code>.
+          </p>
+          <p class="text-xs text-muted-foreground">
+            Includes automatic token injection, global error toast handling, and full TypeScript typing.
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  </div>
+</template>

package/template/src/views/errors/ComingSoonView.vue

@@ -0,0 +1,241 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue'
+import { useRouter } from 'vue-router'
+import {
+  Rocket,
+  Sparkles,
+  Bot,
+  ShieldCheck,
+  Zap,
+  CheckCircle2,
+  Home,
+  ArrowRight,
+  Users,
+} from '@lucide/vue'
+import { Card, CardContent } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import AppLogo from '@/components/AppLogo.vue'
+import { toast } from '@/components/ui/sonner'
+
+const router = useRouter()
+
+// Countdown state (Target: 14 days, 8 hours, 32 mins, 45 secs)
+const days = ref(14)
+const hours = ref(8)
+const minutes = ref(32)
+const seconds = ref(45)
+let timer: ReturnType<typeof setInterval> | null = null
+
+// Waitlist State
+const email = ref('')
+const isSubmitted = ref(false)
+const isSubmitting = ref(false)
+
+const upcomingFeatures = [
+  {
+    icon: Bot,
+    title: 'Autonomous AI Orchestration',
+    desc: 'Self-healing workflow pipelines with multi-agent collaborative tools.',
+  },
+  {
+    icon: Zap,
+    title: 'Sub-Millisecond Edge Sync',
+    desc: 'Distributed global replication powered by modern event streaming.',
+  },
+  {
+    icon: ShieldCheck,
+    title: 'Zero-Trust Audit Framework',
+    desc: 'Cryptographically immutable compliance logs and role policies.',
+  },
+]
+
+onMounted(() => {
+  timer = setInterval(() => {
+    if (seconds.value > 0) {
+      seconds.value--
+    } else {
+      seconds.value = 59
+      if (minutes.value > 0) {
+        minutes.value--
+      } else {
+        minutes.value = 59
+        if (hours.value > 0) {
+          hours.value--
+        } else {
+          hours.value = 23
+          if (days.value > 0) {
+            days.value--
+          }
+        }
+      }
+    }
+  }, 1000)
+})
+
+onUnmounted(() => {
+  if (timer) clearInterval(timer)
+})
+
+async function handleJoinWaitlist() {
+  if (!email.value || !email.value.includes('@')) {
+    toast.error('Please enter a valid work email.')
+    return
+  }
+
+  isSubmitting.value = true
+  setTimeout(() => {
+    isSubmitting.value = false
+    isSubmitted.value = true
+    toast.success("You're on the early access waitlist! Check your inbox shortly.")
+  }, 600)
+}
+</script>
+
+<template>
+  <div class="flex min-h-[calc(100vh-6rem)] flex-col items-center justify-center p-4 sm:p-8">
+    <div class="w-full max-w-3xl space-y-10 text-center">
+      <!-- Brand Logo Header -->
+      <div class="flex justify-center pb-2">
+        <router-link to="/" class="inline-flex items-center gap-2.5 hover:opacity-90 transition-opacity">
+          <AppLogo class="h-10 w-10" withBackground withText textClass="text-2xl font-bold tracking-tight" />
+        </router-link>
+      </div>
+
+      <!-- Hero Teaser Header -->
+      <div class="space-y-4">
+        <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 border border-primary/20 text-primary text-xs font-semibold shadow-xs">
+          <Sparkles class="h-3.5 w-3.5" />
+          <span>Next-Gen Enterprise Engine • v2.0 Release</span>
+        </div>
+
+        <h1 class="text-3xl sm:text-5xl font-black tracking-tight text-foreground max-w-2xl mx-auto leading-tight">
+          Something Extraordinary is in the Works
+        </h1>
+
+        <p class="text-sm sm:text-base text-muted-foreground leading-relaxed max-w-xl mx-auto">
+          We are architecting the ultimate workspace intelligence suite — combining real-time edge streaming, AI orchestration, and enterprise compliance.
+        </p>
+      </div>
+
+      <!-- Countdown Clock Cards -->
+      <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 sm:gap-4 max-w-lg mx-auto">
+        <!-- Days -->
+        <Card class="border-border/80 bg-card/80 backdrop-blur-xs shadow-xs">
+          <CardContent class="p-4 flex flex-col items-center justify-center">
+            <span class="text-3xl sm:text-4xl font-mono font-black text-foreground">
+              {{ String(days).padStart(2, '0') }}
+            </span>
+            <span class="text-[11px] font-semibold text-muted-foreground uppercase mt-1">Days</span>
+          </CardContent>
+        </Card>
+
+        <!-- Hours -->
+        <Card class="border-border/80 bg-card/80 backdrop-blur-xs shadow-xs">
+          <CardContent class="p-4 flex flex-col items-center justify-center">
+            <span class="text-3xl sm:text-4xl font-mono font-black text-foreground">
+              {{ String(hours).padStart(2, '0') }}
+            </span>
+            <span class="text-[11px] font-semibold text-muted-foreground uppercase mt-1">Hours</span>
+          </CardContent>
+        </Card>
+
+        <!-- Minutes -->
+        <Card class="border-border/80 bg-card/80 backdrop-blur-xs shadow-xs">
+          <CardContent class="p-4 flex flex-col items-center justify-center">
+            <span class="text-3xl sm:text-4xl font-mono font-black text-foreground">
+              {{ String(minutes).padStart(2, '0') }}
+            </span>
+            <span class="text-[11px] font-semibold text-muted-foreground uppercase mt-1">Minutes</span>
+          </CardContent>
+        </Card>
+
+        <!-- Seconds -->
+        <Card class="border-border/80 bg-card/80 backdrop-blur-xs shadow-xs">
+          <CardContent class="p-4 flex flex-col items-center justify-center">
+            <span class="text-3xl sm:text-4xl font-mono font-black text-primary">
+              {{ String(seconds).padStart(2, '0') }}
+            </span>
+            <span class="text-[11px] font-semibold text-muted-foreground uppercase mt-1">Seconds</span>
+          </CardContent>
+        </Card>
+      </div>
+
+      <!-- Early Access VIP Waitlist Form -->
+      <Card class="border-border/80 bg-card/60 backdrop-blur-xs shadow-md max-w-md mx-auto overflow-hidden">
+        <CardContent class="p-6 space-y-4">
+          <div v-if="!isSubmitted" class="space-y-3">
+            <div class="text-left space-y-1">
+              <h2 class="text-sm font-bold text-foreground">Request Early Access</h2>
+              <p class="text-xs text-muted-foreground">
+                Join our private beta pool and receive priority onboarding invitations.
+              </p>
+            </div>
+
+            <form @submit.prevent="handleJoinWaitlist" class="flex flex-col sm:flex-row gap-2">
+              <Input
+                v-model="email"
+                type="email"
+                placeholder="name@company.com"
+                class="h-10 text-xs bg-background"
+                required
+              />
+              <Button type="submit" class="h-10 text-xs font-semibold gap-1.5 shrink-0" :disabled="isSubmitting">
+                <Rocket class="h-3.5 w-3.5" />
+                <span>{{ isSubmitting ? 'Joining...' : 'Join Waitlist' }}</span>
+              </Button>
+            </form>
+          </div>
+
+          <!-- Success Confirmation -->
+          <div v-else class="py-2 text-center space-y-2">
+            <div class="inline-flex items-center justify-center h-10 w-10 rounded-full bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 mb-1">
+              <CheckCircle2 class="h-5 w-5" />
+            </div>
+            <p class="text-sm font-bold text-foreground">You're on the VIP Waitlist!</p>
+            <p class="text-xs text-muted-foreground">
+              We've reserved spot <strong class="text-primary font-mono">#1,428</strong> for <span class="text-foreground font-medium">{{ email }}</span>.
+            </p>
+          </div>
+
+          <div class="pt-2 flex items-center justify-center gap-4 text-[11px] text-muted-foreground border-t border-border/40">
+            <span class="flex items-center gap-1">
+              <Users class="h-3 w-3 text-primary" />
+              <span>1,427 devs waiting</span>
+            </span>
+            <span>•</span>
+            <span>No spam, unsubscribe anytime</span>
+          </div>
+        </CardContent>
+      </Card>
+
+      <!-- Teaser Features Grid -->
+      <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 pt-4 text-left">
+        <div
+          v-for="feat in upcomingFeatures"
+          :key="feat.title"
+          class="p-4 rounded-xl border border-border/60 bg-card/40 hover:border-primary/40 hover:bg-card/70 transition-all space-y-2 shadow-2xs"
+        >
+          <div class="inline-flex items-center justify-center p-2 rounded-lg bg-primary/10 text-primary">
+            <component :is="feat.icon" class="h-4 w-4" />
+          </div>
+          <h3 class="text-xs font-bold text-foreground">{{ feat.title }}</h3>
+          <p class="text-[11px] text-muted-foreground leading-relaxed">{{ feat.desc }}</p>
+        </div>
+      </div>
+
+      <!-- Action Navigation -->
+      <div class="pt-4 flex items-center justify-center gap-3">
+        <Button variant="outline" size="sm" class="gap-1.5 text-xs h-9" @click="router.push('/')">
+          <Home class="h-3.5 w-3.5" />
+          <span>Back to Dashboard</span>
+        </Button>
+
+        <Button variant="ghost" size="sm" class="gap-1.5 text-xs h-9 text-muted-foreground hover:text-foreground" @click="router.push('/components/buttons')">
+          <span>Explore UI Components</span>
+          <ArrowRight class="h-3.5 w-3.5" />
+        </Button>
+      </div>
+    </div>
+  </div>
+</template>