Spaces:
Sleeping
Sleeping
| --- | |
| import Layout from '../layouts/Layout.astro'; | |
| import HeroBanner from '../components/HeroBanner.jsx'; | |
| import MovieSlider from '../components/MovieSlider.jsx'; | |
| import DeferredHero from '../components/DeferredHero.astro'; | |
| import DeferredTopTen from '../components/DeferredTopTen.astro'; | |
| import HomeSectionsLoader from '../components/HomeSectionsLoader.jsx'; | |
| import { getNewestMovies } from '../lib/api.js'; | |
| import { TOPICS } from '../lib/topics.js'; | |
| // We fetch newest movies for Hero/Slider to have some initial content. | |
| --- | |
| <Layout | |
| title="DPTXA - Động Phim TXA | Xem phim online miễn phí chất lượng cao Full HD Vietsub" | |
| description="DPTXA - Nền tảng xem phim trực tuyến miễn phí với kho phim khổng lồ, cập nhật liên tục mỗi ngày. Phim bộ, phim lẻ, hoạt hình Full HD Vietsub." | |
| slug="/tphim" | |
| > | |
| <div class="pb-24"> | |
| <DeferredHero server:defer> | |
| <div slot="fallback" class="h-[650px] w-full animate-pulse bg-white/5 rounded-b-[40px]" /> | |
| </DeferredHero> | |
| <div class="mx-auto max-w-7xl px-4 mt-12 mb-16"> | |
| <h2 class="text-2xl font-black text-white mb-8 tracking-tight">Bạn đang quan tâm gì?</h2> | |
| <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4"> | |
| {[ | |
| { name: 'Viễn Tưởng', color: 'from-red-600/80 to-red-900/90', slug: 'vien-tuong' }, | |
| { name: 'Thái Lan', color: 'from-blue-600/80 to-blue-900/90', slug: 'thai-lan' }, | |
| { name: 'Chiếu Rạp', color: 'from-purple-600/80 to-purple-900/90', slug: 'phim-chieu-rap' }, | |
| { name: 'Kinh Dị', color: 'from-orange-600/80 to-orange-900/90', slug: 'kinh-di' }, | |
| { name: 'Cổ Trang', color: 'from-rose-600/80 to-rose-900/90', slug: 'co-trang' }, | |
| { name: 'Hành Động', color: 'from-emerald-600/80 to-emerald-900/90', slug: 'hanh-dong' } | |
| ].map(cat => ( | |
| <a href={`/the-loai/${cat.slug}`} class={`group relative h-32 overflow-hidden rounded-2xl bg-gradient-to-br ${cat.color} p-5 transition-all hover:scale-105 active:scale-95 shadow-lg`}> | |
| <div class="relative z-10"> | |
| <h3 class="text-lg font-black text-white mb-1">{cat.name}</h3> | |
| <span class="text-[10px] font-bold text-white/60 group-hover:text-white transition-colors">Khám phá <i class="fas fa-chevron-right ml-1"></i></span> | |
| </div> | |
| <div class="absolute -right-4 -bottom-4 text-white/10 text-6xl font-black rotate-12 group-hover:rotate-0 transition-transform duration-500"> | |
| <i class="fas fa-film"></i> | |
| </div> | |
| </a> | |
| ))} | |
| </div> | |
| </div> | |
| <!-- Premium Topic Collections Section --> | |
| <div class="mx-auto max-w-7xl px-4 my-16"> | |
| <div class="flex items-center justify-between mb-8"> | |
| <div> | |
| <h2 class="text-2xl font-black text-white tracking-tight">Chủ đề nổi bật</h2> | |
| <p class="text-xs font-semibold text-gray-500 mt-1">Các tuyển tập phim đặc sắc được cập nhật tự động liên tục</p> | |
| </div> | |
| <a href="/chu-de" class="text-xs font-black uppercase tracking-widest text-primary hover:text-white transition-colors flex items-center gap-1.5"> | |
| Xem tất cả <i class="fas fa-arrow-right"></i> | |
| </a> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| {TOPICS.slice(0, 4).map(topic => ( | |
| <a | |
| href={`/chu-de/${topic.slug}`} | |
| class="group relative flex flex-col justify-between overflow-hidden rounded-3xl border border-white/5 bg-gradient-to-b from-white/[0.03] to-transparent p-6 transition-all duration-300 hover:-translate-y-1.5 hover:border-white/10 hover:shadow-xl" | |
| > | |
| <!-- Ambient Hover Glow --> | |
| <div class={`absolute -right-16 -top-16 h-32 w-32 rounded-full bg-gradient-to-br ${topic.color} opacity-0 blur-[50px] transition-opacity duration-500 group-hover:opacity-20`}></div> | |
| <div> | |
| <div class="flex items-center justify-between mb-4"> | |
| <span class={`text-[8px] font-black uppercase tracking-wider px-2 py-0.5 rounded bg-gradient-to-r ${topic.color} text-white`}> | |
| {topic.badge} | |
| </span> | |
| {topic.slug === 'the-gioi-netflix' ? ( | |
| <svg class="h-4 w-auto fill-[#e50914] group-hover:fill-white transition-colors" viewBox=".238 .034 919.406 248.488"><path d="m870.46 118.314 49.184 130.208c-14.495-2.07-28.982-4.663-43.733-6.999l-27.707-71.945-28.468 66.006c-13.973-2.336-27.698-3.114-41.672-4.928l49.955-113.89-45.309-116.732h41.937l25.362 65.22 27.185-65.22h42.442zm-120.864-118.28h-38.052v225.71c12.425.779 25.362 1.292 38.052 2.841zm-70.927 223.118c-34.68-2.328-69.37-4.39-104.829-5.177v-217.94h38.823v181.188c22.264.514 44.52 2.32 66.006 3.355zm-146.252-134.847v38.822h-53.06v88.263h-38.3v-215.356h108.713v38.822h-70.405v49.45h53.06zm-156.597-49.449v178.605c-12.946 0-26.14 0-38.83.514v-179.119h-40.122v-38.822h119.322v38.822zm-120.88 90.334c-17.08 0-37.274 0-51.769.787v57.715c22.778-1.557 45.556-3.363 68.59-4.141v37.273l-107.412 8.548v-229.338h107.405v38.822h-68.584v52.29c15.017 0 38.052-.778 51.768-.778v38.83zm-215.109-21.743v135.633c-13.965 1.557-26.398 3.371-39.593 5.442v-248.488h37.017l50.469 141.076v-141.076h38.83v232.436c-13.717 2.336-27.698 3.114-42.45 5.177z"/></svg> | |
| ) : ( | |
| <i class={`${topic.icon} text-gray-500 group-hover:text-white transition-colors text-base`}></i> | |
| )} | |
| </div> | |
| <h3 class="text-base font-black text-white group-hover:text-primary transition-colors">{topic.name}</h3> | |
| <p class="text-[10px] font-medium text-gray-400 mt-2 line-clamp-2 leading-relaxed">{topic.description}</p> | |
| </div> | |
| <div class="mt-6 flex items-center justify-between text-[9px] font-black uppercase tracking-widest text-gray-500 group-hover:text-white transition-colors"> | |
| <span>Khám phá</span> | |
| <i class="fas fa-chevron-right text-[8px] transition-transform group-hover:translate-x-0.5"></i> | |
| </div> | |
| </a> | |
| ))} | |
| </div> | |
| </div> | |
| <!-- Kho tàng Anime Mới Nhất Section WILL BE ADDED HERE --> | |
| <div id="newest-anime-section"></div> | |
| <div class="mt-12 space-y-4"> | |
| <DeferredTopTen server:defer> | |
| <div slot="fallback" class="mx-auto max-w-7xl px-4 py-16"> | |
| <div class="h-10 w-64 animate-pulse rounded-lg bg-white/5 mb-12" /> | |
| <div class="flex gap-8 overflow-hidden"> | |
| {[...Array(5)].map((_, i) => ( | |
| <div key={i} class="h-[400px] w-[260px] flex-shrink-0 animate-pulse rounded-[32px] bg-white/5" /> | |
| ))} | |
| </div> | |
| </div> | |
| </DeferredTopTen> | |
| {/* Dynamic, Infinite / Scroll Triggered Sections Loader */} | |
| <HomeSectionsLoader client:load /> | |
| </div> | |
| </div> | |
| </Layout> | |