add new services cover image

app/assets/css/main.css

@@ -128,15 +128,15 @@ body {
     @apply my-16 md:my-0;
 }
 .page-section.page-section-alt > .container {
-    @apply my-0 flex flex-col md:flex-row justify-between items-center;
+    @apply my-0 flex flex-col md:flex-row items-center;
 }
 .page-section.page-section-alt > .container > .section {
     @apply md:mb-4;
 }
 .page-section.page-section-alt > .container > .section-img {
-    @apply w-full md:w-[45%];
+    @apply w-full md:w-[45%] md:mr-12;
     img {
-        @apply md:my-16;
+        @apply md:my-16 object-cover rounded-xl;
     }
 }
 .footer {

app/components/web-header.vue

@@ -29,6 +29,22 @@
                         </UFieldGroup>
                     </div>
                 </div>
+                <div class="flex sm:hidden w-fit items-center">
+                    <UDropdownMenu
+                        size="sm"
+                        :items="siteTitleItems"
+                        :content="{
+                            align: 'end',
+                            side: 'bottom',
+                            sideOffset: 8
+                        }"
+                        :ui="{
+                            content: 'w-36'
+                        }"
+                    >
+                        <UButton size="sm" label="บริการ" icon="i-lucide-map" color="neutral" variant="outline" />
+                    </UDropdownMenu>
+                </div>
             </div>
         </div>
         <nav class="site-navbar">
@@ -47,7 +63,7 @@
                     </ul>
                 </div>
                 <div class="flex sm:hidden w-fit float-right">
-                    <UButton @click="toggleMobileNavbar" size="sm" variant="subtle" color="neutral" icon="i-lucide-menu"/>
+                    <UButton @click="toggleMobileNavbar" size="sm" variant="subtle" color="neutral" :icon="mobileNavbar ? 'i-lucide-x' : 'i-lucide-menu'"/>
                 </div>
             </div>
         </nav>

app/pages/index.vue

@@ -11,7 +11,7 @@
             <section class="page-section page-section-alt">
               <div class="container">
                 <section class="section-img">
-                  <img class="aspect-[4/3]" src="/wiki-mac.png"></img>
+                  <img class="aspect-[4/3]" src="/wiki-cover.jpg"></img>
                 </section>
                 <section class="section">
                   <h2 id="wiki" class="title">สารคอมพิวเตอร์เสรี (วิกิ)</h2>
@@ -23,12 +23,12 @@
             <section class="page-section page-section-alt">
               <div class="container">
                 <section class="section-img">
-                  <img class="aspect-[4/3]" src="/forum-mac.png"></img>
+                  <img class="aspect-[4/3]" src="/forum-cover.jpg"></img>
                 </section>
                 <section class="section">
                   <h2 class="title">ลานประชาคม</h2>
                   <p>พื้นที่สอบถาม อภิปราย และคุยเล่น เกี่ยวกับซอฟต์แวร์และฮาร์ดแวร์ UNIX และ Unix-like</p>
-                  <UButton to="https://forum.unix.in.th" disabled variant="subtle" label="ไปที่ลานประชาคม"/>
+                  <UButton to="https://forum.unix.in.th" label="ไปที่ลานประชาคม"/>
                 </section>
               </div>
             </section>