update blog section

Author: ikushum

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

@@ -3,51 +3,49 @@
     <HomeBgGradient />
 
     <v-container class="pt-0">
-      <div class="mb-10">
-        <p class="text-primary font-weight-bold mb-0">
+      <div class="mb-16 text-center">
+        <p class="text-primary font-weight-bold mb-2">
           Latest news and updates
         </p>
 
-        <h4 class="text-h4 font-weight-bold my-3">
+        <h4 class="text-h4 font-weight-bold mb-2">
           Vuetify Blog
         </h4>
 
-        <v-responsive class="mx-auto mb-5" max-width="700">
-          <h6 class="text-h6 font-weight-regular text-medium-emphasis">
-            Stay up to date with the latest news and updates from the Vuetify team.
-          </h6>
-        </v-responsive>
+        <h6 class="text-h6 font-weight-regular text-medium-emphasis">
+          Stay up to date with the latest news and updates from the Vuetify team.
+        </h6>
       </div>
 
-      <v-row align="center" class="text-left mb-10" justify="space-between">
+      <v-row align="center" class="text-left" justify="space-between">
         <v-col v-if="latestBlog" cols="12" md="7">
           <v-card
+            class="pr-10"
             color="transparent"
             rounded="xl"
             flat
           >
-            <v-card-subtitle class="pt-5 text-subtitle-2">
+            <v-card-subtitle class="pt-5 text-subtitle-2 pl-0">
               {{ latestBlog.date }}
             </v-card-subtitle>
 
-            <v-card-title class="text-pre-wrap mb-2">
+            <v-card-title class="text-pre-wrap mb-2 pl-0">
               {{ latestBlog.title }}
             </v-card-title>
 
-            <div class="text-medium-emphasis text-subtitle-1 px-4">
+            <div class="text-medium-emphasis text-subtitle-1 pl-0">
               {{ latestBlog.shortDescription }}
             </div>
 
-            <v-card-text>
+            <v-card-text class="pl-0">
               <div class="d-flex align-center ga-2 text-subtitle-2 text-medium-emphasis">
                 <v-icon size="small">mdi-circle-edit-outline</v-icon>
                 {{ latestBlog.personName }}
 
                 <v-btn
-                  append-icon="mdi-arrow-right"
                   class="text-none px-0 ml-5"
                   color="primary"
-                  text="Continue reading"
+                  text="Read more"
                   variant="text"
                 />
               </div>
@@ -75,10 +73,22 @@
               {{ item.title }}
             </v-card-title>
 
-            <v-card-text class="text-body-2 text-medium-emphasis">
+            <v-card-text class="text-medium-emphasis text-subtitle-1 text-truncate py-0">
+              {{ item.shortDescription }}
+            </v-card-text>
+
+            <v-card-text class="text-body-2 text-medium-emphasis pt-2">
               <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>
 
@@ -91,22 +101,23 @@
         :to="rpath('/blog/')"
         append-icon="mdi-open-in-new"
         aria-label="See More Templates"
-        class="text-none"
+        class="text-none mt-10"
         color="primary"
         rel="noopener noreferrer"
         rounded="lg"
         size="large"
         target="_blank"
         variant="flat"
       >
-        View More
+        All Blogs
       </v-btn>
+
     </v-container>
   </v-responsive>
 </template>
 
 <script setup lang="ts">
-  const { mobile } = useDisplay()
+  const { smAndDown } = useDisplay()
 
   const items = [
     {
@@ -127,14 +138,8 @@
       date: 'Feb 20, 2022',
       personName: 'John Leider',
     },
-    {
-      title: 'Building a Basic Nuxt Application with Vuetify',
-      shortDescription: 'Qui voluptatum molestiae sint et atque facere. Distinctio ipsum voluptatum asperiores fuga consequatur aliquam.',
-      date: 'Feb 20, 2022',
-      personName: 'John Leider',
-    },
   ]
 
-  const latestBlog = computed(() => mobile.value ? null : items[0])
-  const remainingBlogs = computed(() => mobile.value ? items : items.slice(1))
+  const latestBlog = computed(() => smAndDown.value ? null : items[0])
+  const remainingBlogs = computed(() => smAndDown.value ? items : items.slice(1))
 </script>

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

@@ -21,7 +21,6 @@
           </p>
 
           <v-btn
-            :color="theme.current.value.dark ? 'primary' : 'background'"
             append-icon="mdi-open-in-new"
             class="mr-4 text-none"
             rounded="lg"

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

@@ -3,7 +3,7 @@
     <HomeBgGradient />
 
     <v-container class="text-center text-md-left py-16">
-      <v-row align="center">
+      <v-row align="end">
         <v-col class="pr-md-15" cols="12" md="6">
           <p class="font-weight-medium text-primary mb-4">
             Vuetify Support Services