feat: implement core Nuxt application with film browsing, search, and detail page functionality using OPhim and NguonC APIs.

2026-08-10 14:27:47 +00:00 · 2026-05-17 20:30:19 +07:00
parent 90791df93d
commit 34d25df560
18 changed files with 2907 additions and 145 deletions
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { CirclePlay, Globe2, MessageCircle, Music2, Send } from 'lucide-vue-next'
+
+const currentYear = new Date().getFullYear()
+
+const socialLinks = [
+  { label: 'Telegram', icon: Send },
+  { label: 'Chat', icon: MessageCircle },
+  { label: 'Website', icon: Globe2 },
+  { label: 'Cộng đồng', icon: MessageCircle },
+  { label: 'TikTok', icon: Music2 },
+  { label: 'Video', icon: CirclePlay },
+]
+
+const linkGroups = [
+  ['Domain dự phòng', 'Điều khoản sử dụng'],
+  ['Hỏi-Đáp', 'Giới thiệu'],
+  ['Chính sách bảo mật', 'Liên hệ'],
+]
+</script>
+
+<template>
+  <footer class="border-t border-white/10 bg-[#07090f] text-white">
+    <div class="mx-auto max-w-[1560px] px-4 py-10 sm:px-6 lg:px-8 xl:px-10">
+      <div class="flex flex-col gap-8 lg:flex-row lg:items-center">
+        <div class="flex shrink-0 items-center gap-7">
+          <AppLogo />
+          <span class="hidden h-14 w-px bg-white/10 sm:block" />
+        </div>
+
+        <div class="flex flex-wrap gap-3">
+          <button
+            v-for="item in socialLinks"
+            :key="item.label"
+            type="button"
+            class="grid size-12 place-items-center rounded-full bg-sky-400 text-slate-950 shadow-lg shadow-sky-950/30 transition hover:-translate-y-0.5 hover:bg-white"
+            :aria-label="item.label"
+          >
+            <component :is="item.icon" class="size-5" />
+          </button>
+        </div>
+      </div>
+
+      <div class="mt-10 grid gap-8 text-sm font-bold sm:grid-cols-3 lg:max-w-3xl">
+        <div v-for="(group, index) in linkGroups" :key="index" class="space-y-5">
+          <NuxtLink
+            v-for="link in group"
+            :key="link"
+            to="/phim"
+            class="block text-slate-100 transition hover:text-sky-200"
+          >
+            {{ link }}
+          </NuxtLink>
+        </div>
+      </div>
+
+      <p class="mt-10 max-w-4xl text-sm leading-7 text-slate-300">
+        KRPHIM - Trang xem phim Hàn Quốc online chất lượng cao miễn phí Vietsub, thuyết minh, lồng tiếng full HD. Kho phim mới cập nhật liên tục từ OPhim và NguồnC với giao diện xanh da trời hiện đại.
+      </p>
+
+      <p class="mt-7 text-sm text-slate-400">
+        © {{ currentYear }} KRPHIM
+      </p>
+    </div>
+  </footer>
+</template>