Annisa1724
/
TA_POLIJECARE_E31231389
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

selesai smeua

This commit is contained in:
krizzn65 2026-02-17 18:15:42 +07:00
parent 049bbd36a8
commit 75f48918b8
1 changed files with 30 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
frontend/src/components/Footer.jsx
View File

@ -34,11 +34,10 @@ const Footer = () => {
]; ];
return ( return (
<footer className="bg-white dark:bg-black border-t border-gray-100 dark:border-white/10 pt-16 pb-8 relative overflow-hidden"> <footer className="bg-white/80 dark:bg-black/80 backdrop-blur-md border-t border-gray-200/50 dark:border-white/5 pt-20 pb-10 relative overflow-hidden">
{/* Background Gradients */} {/* Background Gradients */}
<div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-gray-200 dark:via-white/20 to-transparent opacity-50"></div> <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,_var(--tw-gradient-stops))] from-primary/5 via-transparent to-transparent opacity-70"></div>
<div className="absolute top-0 left-1/4 w-64 h-64 bg-primary/5 rounded-full blur-[100px] pointer-events-none"></div> <div className="absolute inset-0 bg-[radial-gradient(circle_at_bottom_left,_var(--tw-gradient-stops))] from-blue-500/5 via-transparent to-transparent opacity-70"></div>
<div className="absolute bottom-0 right-1/4 w-64 h-64 bg-blue-500/5 rounded-full blur-[100px] pointer-events-none"></div>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-8 mb-16"> <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-8 mb-16">
@ -48,28 +47,28 @@ const Footer = () => {
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }} viewport={{ once: true }}
className="flex items-center gap-3" className="flex items-center gap-4"
> >
<img <img
src="/logo_polijecare.png" src="/logo_polijecare.png"
alt="PolijeCare Logo" alt="PolijeCare Logo"
className="w-12 h-12 object-contain" className="w-14 h-14 object-contain filter drop-shadow-sm"
/> />
<div> <div className="space-y-0.5">
<h3 className="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-gray-900 to-gray-600 dark:from-white dark:to-gray-400"> <h3 className="text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
PolijeCare PolijeCare
</h3> </h3>
<p className="text-xs font-medium text-gray-500 dark:text-gray-400 tracking-wide"> <p className="text-[10px] uppercase tracking-[0.2em] font-semibold text-primary">
SATGAS PPKS POLITEKNIK NEGERI JEMBER Satgas PPKS Polije
</p> </p>
</div> </div>
</motion.div> </motion.div>
<p className="text-gray-600 dark:text-gray-400 leading-relaxed max-w-sm"> <p className="text-gray-500 dark:text-gray-400 leading-relaxed max-w-sm text-sm">
Kami berkomitmen menciptakan lingkungan kampus yang aman, inklusif, dan bebas dari kekerasan seksual melalui pencegahan, penanganan, dan pemulihan yang berpusat pada korban. Mewujudkan lingkungan kampus yang aman, inklusif, dan bebas kekerasan seksual. Kami hadir untuk melayani, melindungi, dan mendampingi sivitas akademika Polije.
</p> </p>
<div className="flex gap-4"> <div className="flex gap-3">
{socialLinks.map((social, index) => ( {socialLinks.map((social, index) => (
<motion.a <motion.a
key={index} key={index}
@ -77,36 +76,38 @@ const Footer = () => {
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
aria-label={social.label} aria-label={social.label}
className="w-10 h-10 flex items-center justify-center rounded-full bg-gray-50 dark:bg-white/5 text-gray-500 dark:text-gray-400 hover:bg-primary/10 hover:text-primary transition-all duration-300 border border-gray-200 dark:border-white/10" className="w-9 h-9 flex items-center justify-center rounded-full bg-gray-100 dark:bg-white/5 text-gray-500 dark:text-gray-400 hover:bg-primary hover:text-white dark:hover:bg-primary dark:hover:text-white transition-all duration-300"
whileHover={{ scale: 1.1, rotate: 5 }} whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }} whileTap={{ scale: 0.95 }}
> >
{social.icon} {React.cloneElement(social.icon, { className: "w-4 h-4" })}
</motion.a> </motion.a>
))} ))}
</div> </div>
</div> </div>
{/* Links Columns */} {/* Links Columns */}
<div className="lg:col-span-8 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-4"> <div className="lg:col-span-8 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-12">
{Object.entries(footerLinks).map(([title, links], columnIndex) => ( {Object.entries(footerLinks).map(([title, links], columnIndex) => (
<div key={title} className="space-y-6"> <div key={title} className="space-y-6">
<h4 className="font-bold text-gray-900 dark:text-white text-lg">{title}</h4> <h4 className="font-semibold text-gray-900 dark:text-white text-sm uppercase tracking-wider">{title}</h4>
<ul className="space-y-4"> <ul className="space-y-3">
{links.map((link, index) => ( {links.map((link, index) => (
<motion.li <motion.li
key={index} key={index}
initial={{ opacity: 0, x: -10 }} initial={{ opacity: 0, x: -10 }}
whileInView={{ opacity: 1, x: 0 }} whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }} viewport={{ once: true }}
transition={{ delay: (columnIndex * 0.1) + (index * 0.05) }} transition={{ delay: 0.1 + (index * 0.05) }}
> >
<a <a
href={link.href} href={link.href}
className="text-gray-600 dark:text-gray-400 hover:text-primary dark:hover:text-primary transition-colors inline-block relative group" className="text-sm text-gray-500 dark:text-gray-400 hover:text-primary dark:hover:text-primary transition-colors inline-flex items-center group"
> >
<span className="relative z-10">{link.name}</span> <span className="relative overflow-hidden">
<span className="absolute left-0 bottom-0 w-0 h-px bg-primary transition-all duration-300 group-hover:w-full"></span> {link.name}
<span className="absolute bottom-0 left-0 w-full h-[1px] bg-primary transform -translate-x-full group-hover:translate-x-0 transition-transform duration-300"></span>
</span>
</a> </a>
</motion.li> </motion.li>
))} ))}
@ -117,15 +118,15 @@ const Footer = () => {
</div> </div>
{/* Bottom Bar */} {/* Bottom Bar */}
<div className="pt-8 border-t border-gray-100 dark:border-white/10 flex flex-col md:flex-row justify-between items-center gap-4 text-sm text-gray-500 dark:text-gray-500"> <div className="pt-8 border-t border-gray-200/50 dark:border-white/5 flex flex-col md:flex-row justify-between items-center gap-6 text-xs text-gray-500 dark:text-gray-500">
<p>© {currentYear} PolijeCare. Dikembangkan dengan <Heart className="w-3 h-3 inline text-red-500 mx-1 fill-current animate-pulse" /> untuk kemanusiaan.</p> <p>© {currentYear} PolijeCare. All rights reserved.</p>
<div className="flex gap-6"> <div className="flex gap-8">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<MapPin className="w-4 h-4" /> <MapPin className="w-3 h-3" />
<span>Jember, Jawa Timur</span> <span>Jember, East Java</span>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Mail className="w-4 h-4" /> <Mail className="w-3 h-3" />
<span>satgasppkpt@polije.ac.id</span> <span>satgasppkpt@polije.ac.id</span>
</div> </div>
</div> </div>