Spaces:
Sleeping
Sleeping
File size: 11,180 Bytes
4bea261 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 | import { Film, Heart } from 'lucide-react';
export default function Footer({ settings = {} }) {
const currentYear = new Date().getFullYear();
const copyrightYear = currentYear > 2026 ? `2026 - ${currentYear}` : '2026';
const socials = [
{
key: 'social_fb',
label: 'Theo dõi DPTXA trên Facebook',
hoverColor: '#1877F2',
trackingName: 'facebook',
svg: (
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c4.56-.93 8-4.96 8-9.75z"/>
</svg>
)
},
{
key: 'social_fb_group',
label: 'Tham gia Cộng đồng Facebook',
hoverColor: '#1877F2',
trackingName: 'facebook_group',
svg: (
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/>
</svg>
)
},
{
key: 'social_zalo_group',
label: 'Tham gia Nhóm Zalo hỗ trợ',
hoverColor: '#0068FF',
trackingName: 'zalo',
svg: (
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2C6.48 2 2 5.58 2 10c0 1.95.86 3.73 2.3 5.09L3.5 19.5c-.13.34.19.68.52.54l4.58-1.99c1.17.34 2.27.45 3.4.45 5.52 0 10-3.58 10-8s-4.48-8-10-8zm2.5 11h-4.24l2.94-3.53H10.5V8.5h4.24L11.8 12.03h2.7v1.47z"/>
</svg>
)
},
{
key: 'social_telegram',
label: 'Kênh Telegram DPTXA',
hoverColor: '#24A1DE',
trackingName: 'telegram',
svg: (
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-1-.65-.35-1 .22-1.58.15-.15 2.72-2.5 2.77-2.71.01-.03.01-.13-.05-.18-.06-.05-.14-.03-.21-.02-.09.02-1.49.95-4.22 2.79-.4.27-.76.41-1.08.4-.36-.01-1.04-.2-1.55-.37-.63-.2-1.12-.31-1.08-.66.02-.18.27-.36.74-.55 2.92-1.27 4.86-2.11 5.83-2.51 2.78-1.16 3.35-1.36 3.73-1.36.08 0 .27.02.39.12.1.08.13.19.14.27-.01.06.01.24 0 .24z"/>
</svg>
)
},
{
key: 'social_tiktok',
label: 'Theo dõi DPTXA trên TikTok',
hoverColor: '#FE2C55',
trackingName: 'tiktok',
svg: (
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.17-2.86-.74-3.95-1.72-.1-.09-.17-.13-.27-.24v6.07c.07 2.13-.53 4.36-2.02 5.92-1.49 1.62-3.8 2.47-5.97 2.4-2.18-.04-4.42-.9-5.74-2.65-1.43-1.84-1.75-4.52-1.01-6.73.68-2.11 2.58-3.79 4.77-4.19 1.12-.22 2.3-.1 3.38.31.02-2.31.01-4.63.01-6.95.03-.45.02-.91.03-1.36-.08-2.34-.05-4.69-.07-7.04z" />
</svg>
)
},
{
key: 'social_instagram',
label: 'Kênh Instagram DPTXA',
hoverColor: '#E1306C',
trackingName: 'instagram',
svg: (
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.051.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/>
</svg>
)
}
];
return (
<footer className="relative z-10 border-t border-white/10 bg-[#0f0f0f] mt-auto">
{/* Dynamic Stagger Fade-Up styles for Premium Aesthetics & Accessibility */}
<style dangerouslySetInnerHTML={{__html: `
@keyframes footerSocialFadeUp {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.social-link-item {
opacity: 0;
animation: footerSocialFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@media (prefers-reduced-motion: reduce) {
.social-link-item {
animation: none !important;
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
`}} />
<div className="mx-auto max-w-7xl px-4 py-10">
<div className="grid gap-8 md:grid-cols-4">
<div>
<div className="mb-4">
<a href="/" className="flex items-center shrink-0 transition-transform hover:scale-[1.02] active:scale-95 group">
<svg className="h-8 w-8" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="44" stroke="url(#footer-purple-grad)" strokeWidth="5" fill="black" fillOpacity="0.3"/>
<circle cx="50" cy="50" r="36" stroke="url(#footer-purple-grad)" strokeWidth="1.5" strokeDasharray="3 3" opacity="0.8"/>
<path d="M44 32.5L68 50L44 67.5V32.5Z" fill="url(#footer-purple-grad)" stroke="url(#footer-purple-grad)" strokeWidth="1" strokeLinejoin="round"/>
<defs>
<linearGradient id="footer-purple-grad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stopColor="#a78bfa"/>
<stop offset="50%" stopColor="#7c3aed"/>
<stop offset="100%" stopColor="#4c1d95"/>
</linearGradient>
</defs>
</svg>
<div className="flex flex-col ml-2 justify-center leading-none">
<span className="text-lg font-black tracking-tight text-white flex items-center leading-none">
D<span className="text-primary">P</span>TXA
</span>
<span className="text-[8px] font-bold text-gray-400 mt-1 tracking-wider whitespace-nowrap leading-none">Động Phim Đỉnh Cao</span>
</div>
</a>
</div>
<p className="text-[10px] font-black uppercase tracking-[0.4em] text-primary mb-3">Động Phim Đỉnh Cao</p>
<p className="text-sm leading-relaxed text-gray-400">
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. Trải nghiệm đường truyền siêu tốc, chất lượng Full HD.
</p>
</div>
<div>
<h3 className="mb-4 text-xs font-black uppercase tracking-widest text-white">Thể loại</h3>
<ul className="space-y-3 text-sm text-gray-400">
<li><a href="/danh-sach/phim-le" className="hover:text-primary transition-colors">Phim lẻ</a></li>
<li><a href="/danh-sach/phim-bo" className="hover:text-primary transition-colors">Phim bộ</a></li>
<li><a href="/danh-sach/hoat-hinh" className="hover:text-primary transition-colors">Hoạt hình</a></li>
</ul>
</div>
<div>
<h3 className="mb-4 text-xs font-black uppercase tracking-widest text-white">Chính sách</h3>
<ul className="space-y-3 text-sm text-gray-400">
<li><a href="/dieu-khoan" className="hover:text-primary transition-colors">Điều khoản sử dụng</a></li>
<li><a href="/chinh-sach" className="hover:text-primary transition-colors">Chính sách bảo mật</a></li>
<li><a href="#" className="hover:text-primary transition-colors">DMCA</a></li>
</ul>
</div>
<div>
<h3 className="mb-4 text-xs font-black uppercase tracking-widest text-white">Liên hệ</h3>
<p className="mb-2 text-sm text-gray-400 font-medium">Email: contact@tphimx.com</p>
<div className="flex flex-wrap gap-4 mt-4">
{socials
.filter(social => settings[`${social.key}_enable`] && settings[`${social.key}_url`])
.map((social, index) => {
const url = settings[`${social.key}_url`];
return (
<a
key={social.key}
href={url}
target="_blank"
rel="noopener noreferrer"
className="social-link-item text-gray-400 transition-all duration-300 hover:scale-115 active:scale-90 flex items-center justify-center p-2 rounded-xl bg-white/[0.02] border border-white/5"
style={{
'--hover-color': social.hoverColor,
animationDelay: `${index * 80}ms`
}}
onMouseEnter={(e) => {
e.currentTarget.style.color = social.hoverColor;
e.currentTarget.style.borderColor = `${social.hoverColor}33`;
e.currentTarget.style.backgroundColor = `${social.hoverColor}10`;
e.currentTarget.style.boxShadow = `0 0 15px ${social.hoverColor}22`;
}}
onMouseLeave={(e) => {
e.currentTarget.style.color = '';
e.currentTarget.style.borderColor = '';
e.currentTarget.style.backgroundColor = '';
e.currentTarget.style.boxShadow = '';
}}
data-txatooltip={social.label}
data-social={social.trackingName}
>
{social.svg}
</a>
);
})}
</div>
</div>
</div>
<div className="mt-12 flex flex-col items-center justify-between gap-4 border-t border-white/5 pt-8 text-[10px] font-black uppercase tracking-widest text-gray-600 md:flex-row">
<p className="flex items-center gap-2">
<Film size={14} /> © {copyrightYear} DPTXA - Động Phim Đỉnh Cao
</p>
<p className="flex items-center gap-2">
Made with <Heart size={12} className="text-primary animate-pulse" /> by DPTXA Team
</p>
</div>
</div>
</footer>
);
}
|