feat: Update button components and styles for consistency across documentation pages

Author: denisdobra10

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

@@ -14,27 +14,27 @@
         Start your project today and become our next case study.
       </p>
       <div class="flex flex-col sm:flex-row gap-4 justify-center">
-        <NuxtLink
-          to="/docs"
-          class="inline-flex items-center justify-center px-8 py-4 bg-gradient-to-r from-red-500 to-red-600 text-white hover:from-red-600 hover:to-red-700 font-semibold rounded-xl transition-all duration-300 text-lg shadow-lg shadow-red-500/20 hover:shadow-red-500/30"
+        <HeroButton
+          type="primary"
+          href="/docs"
+          :icon="BookOpenIcon"
+          :is-nuxt-link="true"
         >
-          <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
-          </svg>
           Get Started with Restify
-        </NuxtLink>
-        <a
+        </HeroButton>
+        <HeroButton
+          type="secondary"
           href="https://www.binarcode.com/recent-work"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="inline-flex items-center justify-center px-8 py-4 bg-gray-100 dark:bg-gray-800/50 border border-gray-300 dark:border-gray-700/50 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700/50 hover:text-gray-900 dark:hover:text-white font-semibold rounded-xl transition-all duration-300 text-lg backdrop-blur-sm"
+          :icon="BriefcaseIcon"
         >
-          <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16l3-3 3 3 3-3 3 3V5a2 2 0 00-2-2z" />
-          </svg>
           Recent Projects
-        </a>
+        </HeroButton>
       </div>
     </div>
   </div>
 </template>
+
+<script setup lang="ts">
+import { BookOpenIcon, BriefcaseIcon } from '@heroicons/vue/24/outline'
+import HeroButton from '~/components/website/HeroButton.vue'
+</script>

docs-v3/components/case-studies/CaseStudiesCta.vue

@@ -20,7 +20,7 @@
           <div class="absolute right-0 top-0 z-10 w-16 h-full bg-gradient-to-l from-white/80 dark:from-gray-900/80 to-transparent pointer-events-none"></div>
 
           <div class="flex animate-scroll-left space-x-4">
-            <div class="flex space-x-4 shrink-0">
+            <div class="flex space-x-4 shrink-0 p-1">
               <ContributorAvatar
                 v-for="contributor in contributors"
                 :key="contributor.username"
@@ -29,7 +29,7 @@
                 :contributions="contributor.contributions"
               />
             </div>
-            <div class="flex space-x-4 shrink-0">
+            <div class="flex space-x-4 shrink-0 p-1">
               <ContributorAvatar
                 v-for="contributor in contributors"
                 :key="`dup-${contributor.username}`"
@@ -46,7 +46,7 @@
             href="https://github.com/BinarCode/laravel-restify/graphs/contributors"
             target="_blank"
             rel="noopener noreferrer"
-            class="inline-flex items-center text-red-500 dark:text-red-400 hover:text-red-600 dark:hover:text-red-300 font-medium transition-colors group"
+            class="inline-flex items-center text-primary-500 dark:text-primary-400 hover:text-primary-600 dark:hover:text-primary-300 font-medium transition-colors group"
           >
             View All Contributors
             <ArrowRightIcon class="ml-2 w-4 h-4 group-hover:translate-x-1 transition-transform" />

docs-v3/components/website/ContributorsSection.vue

@@ -114,7 +114,7 @@
             href="https://github.com/BinarCode/restify-demo"
             target="_blank"
             rel="noopener noreferrer"
-            class="inline-flex items-center text-red-500 dark:text-red-400 hover:text-red-600 dark:hover:text-red-300 font-medium transition-colors"
+            class="inline-flex items-center text-primary-500 dark:text-primary-400 hover:text-primary-600 dark:hover:text-primary-300 font-medium transition-colors"
           >
             View Demo Repository
             <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">

docs-v3/pages/community/index.vue

@@ -39,7 +39,7 @@
           <div class="flex space-x-2">
             <button
               @click="switchToHttp"
-              :class="activeTab === 'http' ? 'bg-red-500 text-white shadow-md' : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'"
+              :class="activeTab === 'http' ? 'bg-primary-500 text-white shadow-md' : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'"
               class="flex-1 px-6 py-4 rounded-lg font-medium transition-all duration-200"
             >
               <div class="flex items-center justify-center space-x-2">
@@ -52,7 +52,7 @@
             </button>
             <button
               @click="switchToMcp"
-              :class="activeTab === 'mcp' ? 'bg-red-500 text-white shadow-md' : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'"
+              :class="activeTab === 'mcp' ? 'bg-primary-500 text-white shadow-md' : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'"
               class="flex-1 px-6 py-4 rounded-lg font-medium transition-all duration-200"
             >
               <div class="flex items-center justify-center space-x-2">
@@ -194,7 +194,7 @@
             <button
               @click="sendRequest"
               :disabled="isLoading"
-              class="w-full bg-red-500 hover:bg-red-600 disabled:bg-red-500/50 disabled:cursor-not-allowed text-white font-medium py-4 px-6 rounded-lg transition-colors text-lg"
+              class="w-full bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500/50 disabled:cursor-not-allowed text-white font-medium py-4 px-6 rounded-lg transition-colors text-lg"
             >
               {{ isLoading ? 'Sending...' : 'Send Request' }}
             </button>