seperate out special sponsor section

Author: ikushum

packages/docs/src/components/home/BgGradient.vue

@@ -3,7 +3,7 @@
     <div
       :class="{
         [`bg-${props.color || defaultColor}`]: true,
-        'opacity-20': !props.removeOpacity,
+        [props.opacityClass]: true,
       }"
       aria-hidden="true"
       class="overflow-hidden w-100 h-100"
@@ -18,9 +18,9 @@
     color: {
       type: String,
     },
-    removeOpacity: {
-      type: Boolean,
-      default: false,
+    opacityClass: {
+      type: String,
+      default: 'opacity-20',
     },
   })
 

packages/docs/src/components/home/Blogs.vue

@@ -81,14 +81,6 @@
               <div class="d-flex align-center ga-2 text-body-2 text-medium-emphasis">
                 <v-icon size="small">mdi-circle-edit-outline</v-icon>
                 {{ item.personName }}
-
-                <v-btn
-                  class="text-none px-0 ml-5"
-                  color="primary"
-                  size="small"
-                  text="Read more"
-                  variant="text"
-                />
               </div>
             </v-card-text>
 

packages/docs/src/components/home/Ecosystem.vue

@@ -1,8 +1,6 @@
 <template>
   <v-responsive class="py-15">
     <v-container>
-      <HomeBgGradient />
-
       <div class="mb-10">
         <p class="text-primary font-weight-bold mb-3">
           A complete Vue ecosystem

packages/docs/src/components/home/Entry.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-responsive>
+  <v-responsive class="pb-5">
     <v-container class="text-left position-relative">
       <v-row
         align="center"
@@ -125,8 +125,6 @@
           </v-sheet>
         </v-col>
       </v-row>
-
-      <HomeSpecialSponsor />
     </v-container>
 
     <HomeBgGradient color="primary" />

packages/docs/src/components/home/SpecialSponsor.vue

@@ -1,5 +1,12 @@
 <template>
-  <div v-if="specialSponsor">
+  <v-responsive v-if="specialSponsor">
+    <v-divider :opacity="isDark ? 0.2 : 0.1" color="primary" />
+
+    <HomeBgGradient
+      :opacity-class="isDark ? 'opacity-40' : 'opacity-20'"
+      color="primary"
+    />
+
     <div class="d-flex align-center justify-center my-1 px-4">
       <small class="font-weight-bold text-no-wrap">Special Sponsor</small>
 
@@ -9,11 +16,15 @@
         width="200"
       />
     </div>
-  </div>
+
+    <v-divider :opacity="isDark ? 0.2 : 0.1" color="primary" />
+  </v-responsive>
 </template>
 
 <script setup>
+  const theme = useTheme()
   const store = useSponsorsStore()
 
+  const isDark = computed(() => theme.current.value.dark)
   const specialSponsor = computed(() => store.byTier[-2]?.[0])
 </script>

packages/docs/src/pages/en/index.md

@@ -8,7 +8,7 @@ meta:
 
 <HomeEntry />
 
-<v-divider  />
+<HomeSpecialSponsor />
 
 <HomeEcosystem />