feat: responsive navbar, hero và trang chi tiết phim

- Navbar: thêm hamburger menu + sidebar slide trên mobile
- Hero: responsive height, font-size, buttons, ẩn thumbnail carousel trên mobile
- Logo: nhỏ hơn trên mobile
- Trang chi tiết phim: layout mobile giống Ophim, nút xem đỏ, action buttons có label
- Movie card: điều chỉnh padding trên mobile
This commit is contained in:
ngthanhvu
2026-05-17 22:47:43 +07:00
parent 69f6c90eda
commit 95a150fb51
7 changed files with 379 additions and 349 deletions
+4 -4
View File
@@ -5,13 +5,13 @@ import { Play } from 'lucide-vue-next'
<template>
<NuxtLink
to="/"
class="group inline-flex h-10 min-w-[132px] shrink-0 flex-row flex-nowrap items-center gap-2.5 whitespace-nowrap"
class="group inline-flex h-8 min-w-[100px] shrink-0 flex-row flex-nowrap items-center gap-2 whitespace-nowrap sm:h-10 sm:min-w-[132px] sm:gap-2.5"
aria-label="KR PHIM"
>
<span class="grid size-9 shrink-0 place-items-center rounded-lg border border-sky-200/80 bg-black/30 text-white shadow-lg shadow-black/20 transition group-hover:border-sky-300 group-hover:text-sky-200">
<Play class="ml-0.5 size-5 fill-current" />
<span class="grid size-7 shrink-0 place-items-center rounded-lg border border-sky-200/80 bg-black/30 text-white shadow-lg shadow-black/20 transition group-hover:border-sky-300 group-hover:text-sky-200 sm:size-9">
<Play class="ml-0.5 size-4 fill-current sm:size-5" />
</span>
<span class="inline-flex items-baseline text-2xl font-black uppercase leading-none tracking-tight">
<span class="inline-flex items-baseline text-xl font-black uppercase leading-none tracking-tight sm:text-2xl">
<span class="text-sky-300">KR</span><span class="text-white">PHIM</span>
</span>
</NuxtLink>