FridayDock: รับทำเว็บไซต์ Dashboard และระบบหลังบ้านด้วย Nuxt

<script setup lang="ts"> const { data: roasts } = await useFetch('/api/roasts') const cart = useCartStore() const features = [ { icon: 'truck', title: 'ส่งฟรี', desc: 'ครบ ฿500' }, { icon: 'flame', title: 'คั่วทุกสัปดาห์', desc: 'สดใหม่เสมอ' }, { icon: 'repeat', title: 'สมัครรายเดือน', desc: 'ลด 15%' }, ] useSeoMeta({ title: 'Kaffa · กาแฟคั่วสด ส่งถึงบ้าน' }) </script> <template> <AppNav logo="Kaffa" :links="['เมนู', 'สาขา', 'ติดต่อ']"> <UButton to="/order">สั่งเลย</UButton> </AppNav> <section class="grid md:grid-cols-2 gap-6 rounded-2xl bg-primary-50 p-8"> <div class="flex flex-col justify-center gap-3"> <UBadge variant="soft">ใหม่</UBadge> <h1 class="text-4xl font-bold">กาแฟคั่วสด ส่งถึงบ้าน</h1> <p class="text-muted">เมล็ดคั่วใหม่ทุกสัปดาห์ ส่งใน 24 ชม.</p> <div class="flex gap-2"> <UButton size="lg" @click="cart.open()">สั่งเลย</UButton> <UButton variant="outline" to="/menu">ดูเมนู</UButton> </div> </div> <NuxtImg src="/beans.jpg" class="rounded-xl object-cover" /> </section> <section class="mt-10"> <h2 class="text-xl font-bold">เมล็ดของเรา</h2> <div class="grid grid-cols-1 sm:grid-cols-3 gap-3"> <RoastCard v-for="r in roasts" :key="r.id" :name="r.name" :note="r.note" :price="r.price" @add="cart.add(r)" /> </div> </section> <FeatureList :items="features" class="mt-8" /> <ReviewQuote author="คุณแพร">กาแฟหอมมาก ส่งไวทุกรอบ</ReviewQuote> <PromoBanner code="FIRST10" /> <AppFooter /> </template>