selesai semuaa
This commit is contained in:
krizzn65
parent
c3ba927c79
commit
049bbd36a8
|
|
@ -1,11 +1,13 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { MapPin, Phone, Mail, Instagram, MessageCircle, Globe, Clock, ShieldAlert } from 'lucide-react';
|
||||
import { fadeIn, slideUp, staggerChildren } from '../utils/motionVariants';
|
||||
import { SpotlightCard } from './ui/spotlight-card';
|
||||
import { FlowButton } from './ui/flow-button';
|
||||
|
||||
const Contact = () => {
|
||||
const [contactInfo, setContactInfo] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
// Temporary disable API calls to prevent 404 errors
|
||||
|
|
@ -18,7 +20,7 @@ const Contact = () => {
|
|||
facebook: 'SatgasPPKPTPolije',
|
||||
twitter: '@SatgasPPKPTPolije'
|
||||
};
|
||||
|
||||
|
||||
setContactInfo(mockContactInfo);
|
||||
setLoading(false);
|
||||
}, []);
|
||||
|
|
@ -35,250 +37,181 @@ const Contact = () => {
|
|||
|
||||
const contactMethods = [
|
||||
{
|
||||
icon: (
|
||||
<svg className="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/>
|
||||
</svg>
|
||||
),
|
||||
label: 'Telepon',
|
||||
icon: <Phone className="w-6 h-6" />,
|
||||
label: 'Telepon Kantor',
|
||||
value: contact.phone,
|
||||
href: `tel:${contact.phone}`,
|
||||
color: 'text-primary'
|
||||
color: 'text-blue-500',
|
||||
spotlight: 'rgba(59, 130, 246, 0.2)'
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
<svg className="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
|
||||
</svg>
|
||||
),
|
||||
label: 'Email',
|
||||
icon: <Mail className="w-6 h-6" />,
|
||||
label: 'Email Resmi',
|
||||
value: contact.email,
|
||||
href: `mailto:${contact.email}`,
|
||||
color: 'text-primary'
|
||||
color: 'text-purple-500',
|
||||
spotlight: 'rgba(168, 85, 247, 0.2)'
|
||||
},
|
||||
{
|
||||
icon: (
|
||||
<svg className="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.149-.67.149-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414-.074-.123-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413"/>
|
||||
</svg>
|
||||
),
|
||||
label: 'WhatsApp',
|
||||
icon: <Instagram className="w-6 h-6" />,
|
||||
label: 'Instagram',
|
||||
value: contact.instagram,
|
||||
href: `https://instagram.com/${contact.instagram?.replace('@', '')}`,
|
||||
color: 'text-pink-500',
|
||||
spotlight: 'rgba(236, 72, 153, 0.2)'
|
||||
},
|
||||
{
|
||||
icon: <MessageCircle className="w-6 h-6" />,
|
||||
label: 'WhatsApp Admin',
|
||||
value: contact.whatsapp,
|
||||
href: `https://wa.me/${contact.whatsapp?.replace(/[^0-9]/g, '')}`,
|
||||
color: 'text-accent'
|
||||
}
|
||||
];
|
||||
|
||||
const socialMedia = [
|
||||
{
|
||||
name: 'Instagram',
|
||||
icon: (
|
||||
<svg className="w-6 h-6" 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-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 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.98-1.281-.059-1.69-.073-4.949-.073zM5.838 12a6.162 6.162 0 1112.324 0 6.162 6.162 0 01-12.324 0zM12 16a4 4 0 110-8 4 4 0 010 8zm4.965-10.405a1.44 1.44 0 112.881.001 1.44 1.44 0 01-2.881-.001z"/>
|
||||
</svg>
|
||||
),
|
||||
href: `https://instagram.com/${contact.instagram?.replace('@', '')}`,
|
||||
color: 'hover:text-pink-600'
|
||||
color: 'text-green-500',
|
||||
spotlight: 'rgba(34, 197, 94, 0.2)'
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<section id="contact" className="py-20 bg-gray-50 relative overflow-hidden">
|
||||
{/* Background Pattern */}
|
||||
<div className="absolute inset-0 opacity-5">
|
||||
<div className="absolute top-20 right-20 w-72 h-72 bg-primary rounded-full blur-3xl"></div>
|
||||
<div className="absolute bottom-20 left-20 w-96 h-96 bg-accent rounded-full blur-3xl"></div>
|
||||
<section id="contact" className="py-24 bg-gray-50 dark:bg-gray-900 relative overflow-hidden">
|
||||
{/* Background Decorations */}
|
||||
<div className="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none">
|
||||
<div className="absolute top-[10%] left-[5%] w-[500px] h-[500px] bg-primary/5 rounded-full blur-3xl"></div>
|
||||
<div className="absolute bottom-[10%] right-[5%] w-[500px] h-[500px] bg-blue-500/5 rounded-full blur-3xl"></div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||
{/* Section Header */}
|
||||
<motion.div
|
||||
className="text-center mb-20"
|
||||
<motion.div
|
||||
className="text-center mb-16"
|
||||
variants={fadeIn}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<motion.h2
|
||||
className="text-4xl md:text-5xl font-bold text-gray-900 mb-6"
|
||||
<motion.h2
|
||||
className="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-6"
|
||||
variants={slideUp}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
Hubungi <span className="text-primary">Kami</span>
|
||||
</motion.h2>
|
||||
<motion.p
|
||||
className="text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed"
|
||||
variants={fadeIn}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.2 }}
|
||||
>
|
||||
Kami siap membantu Anda. Jangan ragu untuk menghubungi kami melalui berbagai metode komunikasi yang tersedia.
|
||||
</motion.p>
|
||||
<p className="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto leading-relaxed">
|
||||
Kami siap membantu Anda. Jangan ragu untuk menghubungi kami melalui berbagai saluran komunikasi yang tersedia. Privasi Anda adalah prioritas kami.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
{/* Loading State */}
|
||||
{loading && (
|
||||
<motion.div
|
||||
className="flex justify-center items-center py-20"
|
||||
variants={fadeIn}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
>
|
||||
<div className="flex flex-col items-center space-y-4">
|
||||
<div className="w-12 h-12 border-4 border-primary/20 border-t-primary rounded-full animate-spin"></div>
|
||||
<p className="text-gray-600 font-medium">Memuat informasi kontak...</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* Contact Content */}
|
||||
{!loading && (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||||
{/* Contact Information */}
|
||||
<motion.div
|
||||
variants={fadeIn}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<div className="bg-white rounded-3xl p-8 shadow-soft">
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-8">Informasi Kontak</h3>
|
||||
|
||||
{/* Contact Methods */}
|
||||
<div className="space-y-6 mb-8">
|
||||
{contactMethods.map((method, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
className="flex items-start space-x-4 p-4 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
|
||||
variants={fadeIn}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.1 * index }}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
|
||||
{/* Left Column: Contact Info & Emergency */}
|
||||
<div className="lg:col-span-5 space-y-8">
|
||||
|
||||
{/* Emergency Card */}
|
||||
<SpotlightCard
|
||||
className="rounded-3xl p-8 border border-red-200/50 bg-red-50/50 dark:bg-red-900/20 dark:border-red-500/30 backdrop-blur-sm"
|
||||
spotlightColor="rgba(239, 68, 68, 0.15)"
|
||||
>
|
||||
<div className="flex items-start space-x-4">
|
||||
<div className="w-12 h-12 bg-red-100 dark:bg-red-900/50 rounded-xl flex items-center justify-center flex-shrink-0 text-red-600 dark:text-red-400">
|
||||
<ShieldAlert className="w-7 h-7" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2">Bantuan Darurat 24/7</h3>
|
||||
<p className="text-gray-600 dark:text-gray-300 mb-6 text-sm">
|
||||
Jika Anda dalam situasi darurat atau bahaya, segera hubungi tim Satgas PPKS melalui saluran khusus ini.
|
||||
</p>
|
||||
<FlowButton
|
||||
text="Hubungi Darurat Sekarang"
|
||||
href={`https://wa.me/${contact.whatsapp?.replace(/[^0-9]/g, '')}`}
|
||||
target="_blank"
|
||||
colorStr="#ef4444"
|
||||
hoverColorStr="#dc2626"
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</SpotlightCard>
|
||||
|
||||
{/* General Contact Info */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
{contactMethods.map((method, index) => (
|
||||
<SpotlightCard
|
||||
key={index}
|
||||
className="rounded-2xl p-6 border border-white/20 bg-white/60 dark:bg-black/20 dark:border-white/10 backdrop-blur-md shadow-sm hover:shadow-md transition-all group"
|
||||
spotlightColor={method.spotlight}
|
||||
>
|
||||
<a
|
||||
href={method.href}
|
||||
target={method.href.startsWith('http') ? '_blank' : '_self'}
|
||||
rel={method.href.startsWith('http') ? 'noopener noreferrer' : undefined}
|
||||
className="flex flex-col items-center text-center h-full"
|
||||
>
|
||||
<div className={`w-12 h-12 bg-gradient-to-br from-primary/10 to-accent/10 dark:from-primary/20 dark:to-accent/20 rounded-xl flex items-center justify-center ${method.color} flex-shrink-0`}>
|
||||
<div className={method.color === 'text-primary' ? 'text-primary dark:text-primary-light' : method.color === 'text-accent' ? 'text-accent dark:text-accent-light' : 'text-gray-700 dark:text-gray-300'}>
|
||||
{method.icon}
|
||||
</div>
|
||||
<div className={`w-12 h-12 rounded-full bg-gray-50 dark:bg-white/5 flex items-center justify-center mb-4 ${method.color} group-hover:scale-110 transition-transform duration-300`}>
|
||||
{method.icon}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h4 className="font-semibold text-gray-900 dark:text-white mb-1">{method.label}</h4>
|
||||
<a
|
||||
href={method.href}
|
||||
className="text-gray-600 dark:text-gray-300 hover:text-primary dark:hover:text-primary-light transition-colors"
|
||||
target={method.href.startsWith('http') ? '_blank' : '_self'}
|
||||
rel={method.href.startsWith('http') ? 'noopener noreferrer' : undefined}
|
||||
<h4 className="font-semibold text-gray-900 dark:text-white mb-1">{method.label}</h4>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 break-all">{method.value}</p>
|
||||
</a>
|
||||
</SpotlightCard>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Operating Hours */}
|
||||
<div className="bg-white/60 dark:bg-black/20 border border-white/20 dark:border-white/10 rounded-2xl p-6 backdrop-blur-sm">
|
||||
<div className="flex items-center space-x-3 mb-4">
|
||||
<Clock className="w-5 h-5 text-primary" />
|
||||
<h4 className="font-semibold text-gray-900 dark:text-white">Jam Operasional Kantor</h4>
|
||||
</div>
|
||||
<ul className="space-y-2 text-sm text-gray-600 dark:text-gray-300">
|
||||
<li className="flex justify-between">
|
||||
<span>Senin - Jumat</span>
|
||||
<span className="font-medium">08.00 - 16.00 WIB</span>
|
||||
</li>
|
||||
<li className="flex justify-between">
|
||||
<span>Sabtu - Minggu</span>
|
||||
<span className="font-medium text-red-500">Tutup (Kecuali Darurat)</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column: Map */}
|
||||
<div className="lg:col-span-7 h-full min-h-[500px]">
|
||||
<SpotlightCard
|
||||
className="h-full rounded-3xl p-2 border border-white/20 bg-white/60 dark:bg-black/20 dark:border-white/10 backdrop-blur-md shadow-xl overflow-hidden"
|
||||
spotlightColor="rgba(255, 255, 255, 0.1)"
|
||||
>
|
||||
<div className="relative w-full h-full rounded-2xl overflow-hidden group">
|
||||
<iframe
|
||||
title="Lokasi Politeknik Negeri Jember"
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3949.424564483758!2d113.72093787447761!3d-8.16021369187063!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2dd695b617d8f623%3A0x280e466373737b60!2sPoliteknik%20Negeri%20Jember!5e0!3m2!1sid!2sid!4v1708150000000!5m2!1sid!2sid"
|
||||
width="100%"
|
||||
height="100%"
|
||||
style={{ border: 0, minHeight: '500px' }}
|
||||
allowFullScreen=""
|
||||
loading="lazy"
|
||||
referrerPolicy="no-referrer-when-downgrade"
|
||||
className="grayscale hover:grayscale-0 transition-all duration-700 ease-in-out"
|
||||
></iframe>
|
||||
|
||||
{/* Map Overlay Info */}
|
||||
<div className="absolute bottom-6 left-6 right-6 bg-white/90 dark:bg-black/80 backdrop-blur-md p-4 rounded-xl border border-white/20 shadow-lg translate-y-full opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-500">
|
||||
<div className="flex items-start space-x-3">
|
||||
<MapPin className="w-5 h-5 text-red-500 flex-shrink-0 mt-1" />
|
||||
<div>
|
||||
<h5 className="font-bold text-gray-900 dark:text-white">Kampus Politeknik Negeri Jember</h5>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-300 mt-1">{contact.address}</p>
|
||||
<a
|
||||
href="https://maps.app.goo.gl/politekniknegerijember"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-block mt-2 text-xs font-semibold text-primary hover:underline"
|
||||
>
|
||||
{method.value}
|
||||
Buka di Google Maps →
|
||||
</a>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Address */}
|
||||
<div className="p-4 bg-gray-50 rounded-xl">
|
||||
<div className="flex items-start space-x-4">
|
||||
<div className="w-12 h-12 bg-gradient-to-br from-primary/10 to-accent/10 rounded-xl flex items-center justify-center text-primary flex-shrink-0">
|
||||
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-gray-900 mb-1">Alamat</h4>
|
||||
<p className="text-gray-600 leading-relaxed">{contact.address}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Social Media */}
|
||||
<div className="mt-8 pt-8 border-t border-gray-200">
|
||||
<h4 className="font-semibold text-gray-900 mb-4">Ikuti Kami</h4>
|
||||
<div className="flex space-x-4">
|
||||
{socialMedia.map((social, index) => (
|
||||
<motion.a
|
||||
key={index}
|
||||
href={social.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className={`w-12 h-12 bg-gray-100 rounded-xl flex items-center justify-center text-gray-600 ${social.color} transition-all duration-300`}
|
||||
variants={fadeIn}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.2 * index }}
|
||||
whileHover={{ scale: 1.1 }}
|
||||
>
|
||||
{social.icon}
|
||||
</motion.a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Emergency Contact */}
|
||||
<motion.div
|
||||
variants={fadeIn}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.2 }}
|
||||
>
|
||||
<div className="bg-gradient-to-br from-danger/10 to-danger/5 border border-danger/20 rounded-3xl p-8">
|
||||
<div className="text-center mb-8">
|
||||
<div className="w-16 h-16 bg-danger/20 rounded-2xl flex items-center justify-center mx-auto mb-4">
|
||||
<svg className="w-8 h-8 text-danger" 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 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-4">Butuh Bantuan Darurat?</h3>
|
||||
<p className="text-gray-600 leading-relaxed">
|
||||
Jika Anda atau orang lain berada dalam situasi darurat, segera hubungi kami untuk respons cepat 24/7.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<motion.a
|
||||
href={`https://wa.me/${contact.whatsapp?.replace(/[^0-9]/g, '')}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center justify-center w-full px-6 py-4 bg-danger text-white rounded-xl hover:bg-danger-dark transition-all duration-300 font-semibold shadow-soft hover:shadow-lg"
|
||||
variants={fadeIn}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.3 }}
|
||||
whileHover={{ scale: 1.02 }}
|
||||
>
|
||||
<svg className="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.149-.67.149-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414-.074-.123-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413"/>
|
||||
</svg>
|
||||
Hubungi WhatsApp Darurat
|
||||
</motion.a>
|
||||
|
||||
<motion.div
|
||||
className="text-center p-4 bg-white/80 rounded-xl"
|
||||
variants={fadeIn}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.4 }}
|
||||
>
|
||||
<div className="flex items-center justify-center space-x-2 text-gray-600">
|
||||
<svg className="w-5 h-5 text-accent" 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 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
|
||||
</svg>
|
||||
<span className="font-medium">Respons 24/7 - Privasi Terjamin</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</SpotlightCard>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,237 +1,134 @@
|
|||
import React from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { fadeIn } from '../utils/motionVariants';
|
||||
import { Facebook, Instagram, Twitter, Linkedin, Heart, Shield, Mail, Phone, MapPin } from 'lucide-react';
|
||||
|
||||
const Footer = () => {
|
||||
const currentYear = new Date().getFullYear();
|
||||
|
||||
const quickLinks = [
|
||||
{ name: 'Beranda', href: '#hero' },
|
||||
{ name: 'Tentang Kami', href: '#about' },
|
||||
{ name: 'Layanan', href: '#services' },
|
||||
{ name: 'Artikel', href: '/artikel' },
|
||||
{ name: 'Kontak', href: '#contact' }
|
||||
];
|
||||
|
||||
const services = [
|
||||
{ name: 'WhatsApp Reporting', href: 'https://wa.me/6281234567890' },
|
||||
{ name: 'Form Reporting', href: '/artikel' },
|
||||
{ name: 'Konsultasi', href: '#contact' },
|
||||
{ name: 'Pendampingan', href: '#contact' }
|
||||
];
|
||||
const footerLinks = {
|
||||
'Menu Utama': [
|
||||
{ name: 'Beranda', href: '#hero' },
|
||||
{ name: 'Tentang Kami', href: '#about' },
|
||||
{ name: 'Layanan', href: '#services' },
|
||||
{ name: 'Artikel', href: '/artikel' },
|
||||
],
|
||||
'Layanan': [
|
||||
{ name: 'Pelaporan Online', href: '#services' },
|
||||
{ name: 'Konsultasi Psikologi', href: '#contact' },
|
||||
{ name: 'Pendampingan Hukum', href: '#contact' },
|
||||
{ name: 'Edukasi & Sosialisasi', href: '/artikel' },
|
||||
],
|
||||
'Bantuan': [
|
||||
{ name: 'Kontak Darurat', href: '#contact' },
|
||||
{ name: 'Prosedur Lapor', href: '#services' },
|
||||
{ name: 'FAQ', href: '#faq' },
|
||||
{ name: 'Kebijakan Privasi', href: '#' },
|
||||
]
|
||||
};
|
||||
|
||||
const socialLinks = [
|
||||
{
|
||||
name: 'Instagram',
|
||||
icon: (
|
||||
<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-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 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.98-1.281-.059-1.69-.073-4.949-.073zM5.838 12a6.162 6.162 0 1112.324 0 6.162 6.162 0 01-12.324 0zM12 16a4 4 0 110-8 4 4 0 010 8zm4.965-10.405a1.44 1.44 0 112.881.001 1.44 1.44 0 01-2.881-.001z"/>
|
||||
</svg>
|
||||
),
|
||||
href: 'https://instagram.com/satgasppkpt_polije'
|
||||
}
|
||||
{ icon: <Instagram className="w-5 h-5" />, href: 'https://instagram.com/satgasppkpt_polije', label: 'Instagram' },
|
||||
{ icon: <Twitter className="w-5 h-5" />, href: '#', label: 'Twitter' },
|
||||
{ icon: <Facebook className="w-5 h-5" />, href: '#', label: 'Facebook' },
|
||||
{ icon: <Linkedin className="w-5 h-5" />, href: '#', label: 'LinkedIn' },
|
||||
];
|
||||
|
||||
return (
|
||||
<footer className="bg-gray-900 text-white relative overflow-hidden">
|
||||
{/* Background Pattern */}
|
||||
<div className="absolute inset-0 opacity-5">
|
||||
<div className="absolute top-10 right-10 w-64 h-64 bg-primary rounded-full blur-3xl"></div>
|
||||
<div className="absolute bottom-10 left-10 w-96 h-96 bg-accent rounded-full blur-3xl"></div>
|
||||
</div>
|
||||
<footer className="bg-white dark:bg-black border-t border-gray-100 dark:border-white/10 pt-16 pb-8 relative overflow-hidden">
|
||||
{/* 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 top-0 left-1/4 w-64 h-64 bg-primary/5 rounded-full blur-[100px] pointer-events-none"></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">
|
||||
{/* Main Footer Content */}
|
||||
<div className="py-16">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
|
||||
{/* Logo and Description */}
|
||||
<motion.div
|
||||
className="space-y-6"
|
||||
variants={fadeIn}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-8 mb-16">
|
||||
{/* Brand Column */}
|
||||
<div className="lg:col-span-4 space-y-6">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
className="flex items-center gap-3"
|
||||
>
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="relative">
|
||||
<div className="w-12 h-12 bg-gradient-to-br from-primary to-accent rounded-full flex items-center justify-center shadow-lg">
|
||||
<div className="w-7 h-7 bg-white rounded-full flex items-center justify-center">
|
||||
<div className="w-4 h-4 bg-gradient-to-br from-primary to-accent rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute -top-1 -right-1 w-4 h-4 bg-accent rounded-full animate-pulse"></div>
|
||||
</div>
|
||||
<span className="text-2xl font-bold text-white">PolijeCare</span>
|
||||
</div>
|
||||
<p className="text-gray-300 leading-relaxed">
|
||||
Satgas PPKPT Politeknik Negeri Jember - Layanan pengaduan dan pendampingan terpercaya bagi sivitas akademika.
|
||||
</p>
|
||||
|
||||
{/* Social Links */}
|
||||
<div className="flex space-x-4">
|
||||
{socialLinks.map((social, index) => (
|
||||
<motion.a
|
||||
key={index}
|
||||
href={social.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="w-10 h-10 bg-gray-800 rounded-xl flex items-center justify-center text-gray-400 hover:text-accent transition-all duration-300"
|
||||
variants={fadeIn}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.1 * index }}
|
||||
whileHover={{ scale: 1.1, y: -2 }}
|
||||
>
|
||||
{social.icon}
|
||||
</motion.a>
|
||||
))}
|
||||
<img
|
||||
src="/logo_polijecare.png"
|
||||
alt="PolijeCare Logo"
|
||||
className="w-12 h-12 object-contain"
|
||||
/>
|
||||
<div>
|
||||
<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">
|
||||
PolijeCare
|
||||
</h3>
|
||||
<p className="text-xs font-medium text-gray-500 dark:text-gray-400 tracking-wide">
|
||||
SATGAS PPKS POLITEKNIK NEGERI JEMBER
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Quick Links */}
|
||||
<motion.div
|
||||
className="space-y-6"
|
||||
variants={fadeIn}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.1 }}
|
||||
>
|
||||
<h3 className="text-lg font-bold text-white">Quick Links</h3>
|
||||
<ul className="space-y-3">
|
||||
{quickLinks.map((link, index) => (
|
||||
<motion.li
|
||||
key={index}
|
||||
variants={fadeIn}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.1 * index }}
|
||||
>
|
||||
<a
|
||||
href={link.href}
|
||||
className="text-gray-300 hover:text-accent transition-colors duration-300 flex items-center group"
|
||||
>
|
||||
<svg className="w-4 h-4 mr-2 transform group-hover:translate-x-1 transition-transform" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>
|
||||
</svg>
|
||||
{link.name}
|
||||
</a>
|
||||
</motion.li>
|
||||
))}
|
||||
</ul>
|
||||
</motion.div>
|
||||
<p className="text-gray-600 dark:text-gray-400 leading-relaxed max-w-sm">
|
||||
Kami berkomitmen menciptakan lingkungan kampus yang aman, inklusif, dan bebas dari kekerasan seksual melalui pencegahan, penanganan, dan pemulihan yang berpusat pada korban.
|
||||
</p>
|
||||
|
||||
{/* Services */}
|
||||
<motion.div
|
||||
className="space-y-6"
|
||||
variants={fadeIn}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.2 }}
|
||||
>
|
||||
<h3 className="text-lg font-bold text-white">Layanan</h3>
|
||||
<ul className="space-y-3">
|
||||
{services.map((service, index) => (
|
||||
<motion.li
|
||||
key={index}
|
||||
variants={fadeIn}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.1 * index }}
|
||||
>
|
||||
<a
|
||||
href={service.href}
|
||||
className="text-gray-300 hover:text-accent transition-colors duration-300 flex items-center group"
|
||||
target={service.href.startsWith('http') ? '_blank' : '_self'}
|
||||
rel={service.href.startsWith('http') ? 'noopener noreferrer' : undefined}
|
||||
>
|
||||
<svg className="w-4 h-4 mr-2 transform group-hover:translate-x-1 transition-transform" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>
|
||||
</svg>
|
||||
{service.name}
|
||||
</a>
|
||||
</motion.li>
|
||||
))}
|
||||
</ul>
|
||||
</motion.div>
|
||||
|
||||
{/* Contact Info */}
|
||||
<motion.div
|
||||
className="space-y-6"
|
||||
variants={fadeIn}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: 0.3 }}
|
||||
>
|
||||
<h3 className="text-lg font-bold text-white">Kontak Darurat</h3>
|
||||
<div className="space-y-4">
|
||||
<div className="flex gap-4">
|
||||
{socialLinks.map((social, index) => (
|
||||
<motion.a
|
||||
href="https://wa.me/6281234567890"
|
||||
key={index}
|
||||
href={social.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center space-x-3 text-gray-300 hover:text-accent transition-colors"
|
||||
variants={fadeIn}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true }}
|
||||
whileHover={{ x: 4 }}
|
||||
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"
|
||||
whileHover={{ scale: 1.1, rotate: 5 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
>
|
||||
<div className="w-10 h-10 bg-green-500/20 rounded-lg flex items-center justify-center">
|
||||
<svg className="w-5 h-5 text-green-400" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.149-.67.149-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414-.074-.123-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-medium">WhatsApp Darurat</div>
|
||||
<div className="text-sm text-gray-400">24/7 Available</div>
|
||||
</div>
|
||||
{social.icon}
|
||||
</motion.a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
className="flex items-center space-x-3 text-gray-300"
|
||||
variants={fadeIn}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<div className="w-10 h-10 bg-primary/20 rounded-lg flex items-center justify-center">
|
||||
<svg className="w-5 h-5 text-primary" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-medium">Alamat</div>
|
||||
<div className="text-sm text-gray-400">Jl. Mastrip PO Box 164, Jember</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
{/* 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">
|
||||
{Object.entries(footerLinks).map(([title, links], columnIndex) => (
|
||||
<div key={title} className="space-y-6">
|
||||
<h4 className="font-bold text-gray-900 dark:text-white text-lg">{title}</h4>
|
||||
<ul className="space-y-4">
|
||||
{links.map((link, index) => (
|
||||
<motion.li
|
||||
key={index}
|
||||
initial={{ opacity: 0, x: -10 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: (columnIndex * 0.1) + (index * 0.05) }}
|
||||
>
|
||||
<a
|
||||
href={link.href}
|
||||
className="text-gray-600 dark:text-gray-400 hover:text-primary dark:hover:text-primary transition-colors inline-block relative group"
|
||||
>
|
||||
<span className="relative z-10">{link.name}</span>
|
||||
<span className="absolute left-0 bottom-0 w-0 h-px bg-primary transition-all duration-300 group-hover:w-full"></span>
|
||||
</a>
|
||||
</motion.li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Bar */}
|
||||
<div className="py-6 border-t border-gray-800">
|
||||
<motion.div
|
||||
className="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0"
|
||||
variants={fadeIn}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<div className="text-gray-400 text-sm">
|
||||
© {currentYear} PolijeCare. All rights reserved.
|
||||
<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">
|
||||
<p>© {currentYear} PolijeCare. Dikembangkan dengan <Heart className="w-3 h-3 inline text-red-500 mx-1 fill-current animate-pulse" /> untuk kemanusiaan.</p>
|
||||
<div className="flex gap-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<MapPin className="w-4 h-4" />
|
||||
<span>Jember, Jawa Timur</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-6 text-gray-400 text-sm">
|
||||
<a href="#" className="hover:text-accent transition-colors">Privacy Policy</a>
|
||||
<a href="#" className="hover:text-accent transition-colors">Terms of Service</a>
|
||||
<a href="#" className="hover:text-accent transition-colors">Cookie Policy</a>
|
||||
<div className="flex items-center gap-2">
|
||||
<Mail className="w-4 h-4" />
|
||||
<span>satgasppkpt@polije.ac.id</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ export function FlowButton({
|
|||
|
||||
{/* Circle Hover Effect */}
|
||||
<span
|
||||
className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-4 h-4 rounded-[50%] opacity-0 group-hover:w-[300px] group-hover:h-[300px] group-hover:opacity-100 transition-all duration-[800ms] ease-[cubic-bezier(0.19,1,0.22,1)]"
|
||||
className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-4 h-4 rounded-[50%] opacity-0 group-hover:w-[1200px] group-hover:h-[1200px] group-hover:opacity-100 transition-all duration-[800ms] ease-[cubic-bezier(0.19,1,0.22,1)]"
|
||||
style={{ backgroundColor: hoverColorStr }}
|
||||
></span>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue