feat: enhance layout by updating styles and adding width property to images

Author: TechWatching

app/pages/index.vue

@@ -84,8 +84,8 @@ useSeoMeta({
       :reverse="section.reverse"
       :features="section.features"
       :ui="{
-        title: 'text-3xl sm:text-4xl',
-        description: 'text-lg text-gray-600 dark:text-gray-300'
+        title: 'text-3xl sm:text-4xl text-center lg:text-left',
+        description: 'text-lg text-gray-600 dark:text-gray-300 text-center lg:text-left'
       }"
     >
       <NuxtLink
@@ -97,7 +97,8 @@ useSeoMeta({
         <NuxtImg
           :src="section.image.src"
           :alt="section.image.alt"
-          class="mx-auto max-w-[320px] sm:max-w-[420px] md:max-w-[500px]"
+          :width="section.image.width ?? 600"
+          class="mx-auto"
           loading="lazy"
         />
       </NuxtLink>

content.config.ts

@@ -76,7 +76,8 @@ export const collections = {
             src: z.string().nonempty().editor({ input: 'media' }),
             alt: z.string().optional(),
             to: z.string().optional(),
-            target: z.string().optional()
+            target: z.string().optional(),
+            width: z.number().optional()
           }).optional(),
           features: z.array(
             z.object({

content/0.index.yml

@@ -61,6 +61,7 @@ sections:
       alt: Microsoft MVP badge.
       to: https://mvp.microsoft.com/en-US/mvp/profile/b6deecb6-7760-406e-84cb-8206f051f8e5
       target: _blank
+      width: 300
   - title: I'm a Puluminary.
     description: "Since 2022, I have been part of the Puluminaries community program that recognizes members of the Pulumi community. Pulumi is the technology that made me love Infrastructure as Code and I truly believe that IaC should be:"
     id: puluminary