feat: add CtaSection, FeaturesSection, HeroSection, and HeroStat components with interactive features and styling

- Implemented CtaSection for call-to-action with installation options and links.
- Created FeaturesSection showcasing key features with visual elements and code examples.
- Developed HeroSection with engaging background effects, title, subtitle, and action buttons.
- Added HeroStat component for displaying statistics with icons and labels.
- Introduced useAppToast composable for managing toast notifications.
- Configured content management with Nuxt Content and Vercel deployment settings.
- Updated package-lock.json for dependency management.

Author: denisdobra10

UPGRADING.md

@@ -99,3 +99,5 @@ Thumbs.db
 # Temporary files
 *.tmp
 *.temp
+
+.vercel

docs-v3/.data/content/contents.sqlite

@@ -1,7 +1,17 @@
 <template>
-  <div>
+  <UApp>
     <NuxtPage />
-  </div>
+    <ClientOnly>
+      <LazyUContentSearch
+        v-model:search-term="searchTerm"
+        shortcut="meta_k"
+        :files="files"
+        :navigation="navigation"
+        :fuse="{ resultLimit: 42 }"
+        placeholder="Search documentation..."
+      />
+    </ClientOnly>
+  </UApp>
 </template>
 
 <script setup lang="ts">
@@ -12,6 +22,9 @@ useHead({
   }
 })
 
-// Enable dark mode
-const colorMode = useColorMode()
+// Fetch navigation and search data using the correct Nuxt Content composables
+const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('content'))
+const { data: files } = await useAsyncData('search', () => queryCollectionSearchSections('content'))
+
+const searchTerm = ref('')
 </script>

docs-v3/.gitignore

@@ -1,130 +1,30 @@
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
-
 /* Custom fonts */
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');
 
-/* Base styles */
-html {
-  scroll-behavior: smooth;
-}
-
-body {
-  @apply font-sans antialiased;
-}
-
-/* Scrollbar styling */
-::-webkit-scrollbar {
-  @apply w-2;
-}
-
-::-webkit-scrollbar-track {
-  @apply bg-gray-100 dark:bg-gray-800;
-}
-
-::-webkit-scrollbar-thumb {
-  @apply bg-gray-300 dark:bg-gray-600 rounded-full;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  @apply bg-gray-400 dark:bg-gray-500;
-}
-
-/* Code block styling */
-pre {
-  @apply overflow-x-auto p-4 rounded-lg;
-}
-
-/* Shiki code blocks - light theme improvements */
-.shiki {
-  @apply bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg;
-}
-
-.shiki pre {
-  @apply bg-transparent m-0 p-4;
-}
-
-/* Override the dark background in light mode */
-.shiki.shiki-themes.github-light.github-dark {
-  @apply bg-gray-50 dark:bg-gray-900;
-}
+@import "tailwindcss";
+@import "@nuxt/ui";
 
-.shiki code {
-  @apply bg-transparent text-sm leading-relaxed;
+/* Tailwind v4 theme customization */
+@theme {
+  --font-sans: 'Inter', system-ui, sans-serif;
+  --font-mono: 'JetBrains Mono', Monaco, Consolas, monospace;
 }
 
-/* Fix unstyled content in HTTP and other code blocks */
-.shiki code span:not([style]),
-.shiki code span[style=""],
-.shiki code span:empty,
-.shiki code span {
-  @apply text-gray-800 dark:text-gray-200;
-}
-
-/* Specific styling for HTTP code blocks */
-.language-http .shiki,
-.language-http.shiki {
-  @apply bg-blue-50 dark:bg-gray-900;
-}
-
-.language-http code,
-.language-http .shiki code,
-.language-http span {
-  @apply text-blue-900 dark:text-blue-200 font-semibold;
-}
-
-/* Override for all code block content to ensure visibility */
-.prose .shiki code,
-.prose .language-http code,
-.prose pre code {
-  @apply text-gray-900 dark:text-gray-100;
-}
-
-/* Force visibility for any unstyled spans in code */
-.prose .shiki code span,
-.prose .language-http code span,
-.prose pre code span {
-  @apply text-gray-900 dark:text-gray-100;
-}
-
-/* Special handling for HTTP method blocks */
-.language-http.shiki code span {
-  @apply text-blue-900 dark:text-blue-200 font-semibold !important;
-}
-
-/* Custom components */
-.prose-docs {
-  @apply prose prose-gray max-w-none dark:prose-dark;
-}
-
-/* Code blocks with blue gradient in light theme */
-.prose-docs pre {
-  @apply bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-800 dark:to-gray-900 border border-blue-200 dark:border-gray-700 relative;
-}
-
-.prose-docs pre code {
-  @apply text-gray-900 dark:text-gray-100;
-}
-
-/* Code block copy button styling */
-.prose-docs .group:hover .copy-button {
-  @apply opacity-100;
-}
-
-.prose-docs code {
-  @apply text-sm font-mono bg-blue-200 dark:bg-gray-700 text-blue-900 dark:text-blue-300 px-2 py-1 rounded;
+/* Base styles */
+html {
+  scroll-behavior: smooth;
 }
 
-/* Inline code styling */
-.prose-docs :not(pre) > code {
-  @apply bg-blue-200 dark:bg-gray-700 text-blue-900 dark:text-blue-300 px-2 py-1 rounded font-medium;
+/* Basic component styles */
+.nav-link-active {
+  color: rgb(37 99 235);
+  background-color: rgb(239 246 255);
 }
 
-/* Navigation active states */
-.nav-link-active {
-  @apply text-primary-600 dark:text-primary-400 bg-primary-50 dark:bg-primary-900/20;
+.dark .nav-link-active {
+  color: rgb(96 165 250);
+  background-color: rgba(59 130 246 / 0.2);
 }
 
 /* Content transitions */
@@ -138,11 +38,6 @@ pre {
   opacity: 0;
 }
 
-/* Focus styles */
-.focus-ring {
-  @apply focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800;
-}
-
 /* Mobile menu animation */
 .mobile-menu-enter-active,
 .mobile-menu-leave-active {
@@ -168,19 +63,7 @@ pre {
   transform: scale(1.05);
 }
 
-/* Search highlight styles */
-mark {
-  @apply bg-yellow-200 dark:bg-yellow-800 px-1 rounded text-gray-900 dark:text-white;
-}
-
-/* Search modal animation */
-.search-modal-enter-active,
-.search-modal-leave-active {
-  transition: all 0.2s ease;
-}
-
-.search-modal-enter-from,
-.search-modal-leave-to {
-  opacity: 0;
-  transform: scale(0.95);
+/* Focus ring utility */
+.focus-ring {
+  @apply focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800;
 }

docs-v3/app.vue

@@ -61,14 +61,14 @@ const handleCopy = async () => {
     
   } catch (error) {
     console.error('❌ All copy methods failed:', error)
-    const { error: showError } = useToast()
+    const { error: showError } = useAppToast()
     showError('Copy failed - please manually select and copy the text')
   }
 }
 
 const showSuccess = () => {
   iscopied.value = true
-  const { success } = useToast()
+  const { success } = useAppToast()
   success('Copied to clipboard!')
   
   setTimeout(() => {
@@ -78,6 +78,8 @@ const showSuccess = () => {
 </script>
 
 <style scoped>
+@reference "tailwindcss";
+
 .copy-btn {
   @apply absolute top-3 right-3 opacity-0 group-hover:opacity-100 transition-all duration-200 p-2 bg-white/90 dark:bg-gray-800/90 hover:bg-white dark:hover:bg-gray-800 rounded-md border border-gray-200 dark:border-gray-600 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 active:scale-95;
 }