perbaiki header
This commit is contained in:
krizzn65
parent
282019870d
commit
a55559a202
|
|
@ -43,7 +43,7 @@ const About = () => {
|
||||||
];
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section id="about" className="py-20 bg-gradient-to-br from-purple-50 to-purple-100 relative overflow-hidden">
|
<section id="about" className="py-20 bg-gradient-to-br from-slate-50 via-indigo-50/60 to-purple-50 relative overflow-hidden">
|
||||||
{/* Background Pattern */}
|
{/* Background Pattern */}
|
||||||
<div className="absolute inset-0 opacity-5">
|
<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 top-10 right-10 w-64 h-64 bg-primary rounded-full blur-3xl"></div>
|
||||||
|
|
@ -60,16 +60,16 @@ const About = () => {
|
||||||
viewport={{ once: true }}
|
viewport={{ once: true }}
|
||||||
>
|
>
|
||||||
<motion.h2
|
<motion.h2
|
||||||
className="text-4xl md:text-5xl font-bold text-gray-900 mb-6"
|
className="text-4xl md:text-5xl font-bold text-[#191970] mb-6"
|
||||||
variants={slideUp}
|
variants={slideUp}
|
||||||
initial="hidden"
|
initial="hidden"
|
||||||
whileInView="visible"
|
whileInView="visible"
|
||||||
viewport={{ once: true }}
|
viewport={{ once: true }}
|
||||||
>
|
>
|
||||||
Tentang <span className="text-primary">Satgas PPKPT</span>
|
Tentang <span className="text-indigo-500">Satgas PPKPT</span>
|
||||||
</motion.h2>
|
</motion.h2>
|
||||||
<motion.p
|
<motion.p
|
||||||
className="text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed"
|
className="text-xl text-slate-500 max-w-3xl mx-auto leading-relaxed"
|
||||||
variants={fadeIn}
|
variants={fadeIn}
|
||||||
initial="hidden"
|
initial="hidden"
|
||||||
whileInView="visible"
|
whileInView="visible"
|
||||||
|
|
@ -80,7 +80,7 @@ const About = () => {
|
||||||
</motion.p>
|
</motion.p>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-start">
|
||||||
{/* Left Content - Logo and Description */}
|
{/* Left Content - Logo and Description */}
|
||||||
<motion.div
|
<motion.div
|
||||||
className="space-y-8"
|
className="space-y-8"
|
||||||
|
|
@ -89,46 +89,7 @@ const About = () => {
|
||||||
whileInView="visible"
|
whileInView="visible"
|
||||||
viewport={{ once: true }}
|
viewport={{ once: true }}
|
||||||
>
|
>
|
||||||
{/* PolijeCare Logo */}
|
|
||||||
<div className="flex justify-center lg:justify-start">
|
|
||||||
<motion.div
|
|
||||||
className="relative group"
|
|
||||||
variants={fadeIn}
|
|
||||||
initial="hidden"
|
|
||||||
whileInView="visible"
|
|
||||||
viewport={{ once: true }}
|
|
||||||
whileHover={{ scale: 1.05 }}
|
|
||||||
transition={{ duration: 0.3 }}
|
|
||||||
>
|
|
||||||
<div className="relative w-56 h-56">
|
|
||||||
{/* Outer gradient ring */}
|
|
||||||
<div className="absolute inset-0 bg-gradient-to-br from-primary to-accent rounded-3xl flex items-center justify-center shadow-soft group-hover:shadow-card transition-all duration-300">
|
|
||||||
<div className="w-48 h-48 bg-white rounded-2xl flex items-center justify-center">
|
|
||||||
<div className="w-40 h-40 bg-gradient-to-br from-primary/10 to-accent/10 rounded-xl flex items-center justify-center">
|
|
||||||
<span className="text-2xl font-bold text-primary">PolijeCare</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/* Floating decoration */}
|
|
||||||
<motion.div
|
|
||||||
className="absolute -top-3 -right-3 w-10 h-10 bg-accent rounded-2xl shadow-soft flex items-center justify-center"
|
|
||||||
animate={{
|
|
||||||
scale: [1, 1.2, 1],
|
|
||||||
rotate: [0, 10, -10, 0]
|
|
||||||
}}
|
|
||||||
transition={{
|
|
||||||
duration: 3,
|
|
||||||
repeat: Infinity,
|
|
||||||
ease: "easeInOut"
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
|
|
||||||
</svg>
|
|
||||||
</motion.div>
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<motion.div
|
<motion.div
|
||||||
className="space-y-6"
|
className="space-y-6"
|
||||||
|
|
@ -138,14 +99,14 @@ const About = () => {
|
||||||
viewport={{ once: true }}
|
viewport={{ once: true }}
|
||||||
transition={{ delay: 0.3 }}
|
transition={{ delay: 0.3 }}
|
||||||
>
|
>
|
||||||
<h3 className="text-2xl font-bold text-gray-900">
|
<h3 className="text-2xl font-bold text-[#191970]">
|
||||||
Layanan Pengaduan dan Pendampingan Terpercaya
|
Layanan Pengaduan dan Pendampingan Terpercaya
|
||||||
</h3>
|
</h3>
|
||||||
<p className="text-lg text-gray-600 leading-relaxed">
|
<p className="text-lg text-slate-500 leading-relaxed">
|
||||||
PolijeCare merupakan kanal resmi pengaduan Satgas PPKPT Politeknik Negeri Jember yang menangani laporan kekerasan seksual secara empati, profesional, dan menjaga kerahasiaan.
|
PolijeCare merupakan kanal resmi pengaduan Satgas PPKPT Politeknik Negeri Jember yang menangani laporan kekerasan seksual secara empati, profesional, dan menjaga kerahasiaan.
|
||||||
</p>
|
</p>
|
||||||
<p className="text-lg text-gray-600 leading-relaxed">
|
<p className="text-lg text-slate-500 leading-relaxed">
|
||||||
Kami berkomitmen untuk menciptakan lingkungan kampus yang <span className="text-primary font-semibold">aman</span>, <span className="text-primary font-semibold">mendukung</span>, dan <span className="text-primary font-semibold">bebas dari kekerasan seksual</span> bagi seluruh sivitas akademika.
|
Kami berkomitmen untuk menciptakan lingkungan kampus yang <span className="text-[#191970] font-semibold">aman</span>, <span className="text-[#191970] font-semibold">mendukung</span>, dan <span className="text-[#191970] font-semibold">bebas dari kekerasan seksual</span> bagi seluruh sivitas akademika.
|
||||||
</p>
|
</p>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|
||||||
|
|
@ -158,13 +119,13 @@ const About = () => {
|
||||||
viewport={{ once: true }}
|
viewport={{ once: true }}
|
||||||
transition={{ delay: 0.4 }}
|
transition={{ delay: 0.4 }}
|
||||||
>
|
>
|
||||||
<div className="text-center p-4 bg-white rounded-2xl shadow-soft">
|
<div className="text-center p-4 bg-white/70 backdrop-blur-sm rounded-2xl shadow-sm border border-white/50">
|
||||||
<div className="text-3xl font-bold text-primary mb-2">24/7</div>
|
<div className="text-3xl font-bold text-[#191970] mb-2">24/7</div>
|
||||||
<div className="text-sm text-gray-600 font-medium">Layanan Darurat</div>
|
<div className="text-sm text-slate-500 font-medium">Layanan Darurat</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="text-center p-4 bg-white rounded-2xl shadow-soft">
|
<div className="text-center p-4 bg-white/70 backdrop-blur-sm rounded-2xl shadow-sm border border-white/50">
|
||||||
<div className="text-3xl font-bold text-accent mb-2">100%</div>
|
<div className="text-3xl font-bold text-indigo-500 mb-2">100%</div>
|
||||||
<div className="text-sm text-gray-600 font-medium">Rahasia Terjamin</div>
|
<div className="text-sm text-slate-500 font-medium">Rahasia Terjamin</div>
|
||||||
</div>
|
</div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|
@ -188,7 +149,7 @@ const About = () => {
|
||||||
{features.map((feature, index) => (
|
{features.map((feature, index) => (
|
||||||
<motion.div
|
<motion.div
|
||||||
key={feature.title}
|
key={feature.title}
|
||||||
className="bg-white rounded-2xl p-6 shadow-soft hover:shadow-card transition-all duration-300 hover:-translate-y-1 group"
|
className="bg-white/70 backdrop-blur-sm rounded-2xl p-6 shadow-sm border border-white/50 hover:shadow-md hover:bg-white/90 transition-all duration-300 hover:-translate-y-1 group"
|
||||||
variants={fadeIn}
|
variants={fadeIn}
|
||||||
initial="hidden"
|
initial="hidden"
|
||||||
whileInView="visible"
|
whileInView="visible"
|
||||||
|
|
@ -197,14 +158,14 @@ const About = () => {
|
||||||
whileHover={{ scale: 1.02 }}
|
whileHover={{ scale: 1.02 }}
|
||||||
>
|
>
|
||||||
<div className="flex items-start space-x-4">
|
<div className="flex items-start space-x-4">
|
||||||
<div className="flex-shrink-0 w-12 h-12 bg-gradient-to-br from-primary/10 to-accent/10 rounded-xl flex items-center justify-center text-primary group-hover:from-primary/20 group-hover:to-accent/20 transition-all duration-300">
|
<div className="flex-shrink-0 w-12 h-12 bg-gradient-to-br from-indigo-100 to-purple-100 rounded-xl flex items-center justify-center text-[#191970] group-hover:from-indigo-200 group-hover:to-purple-200 transition-all duration-300">
|
||||||
{feature.icon}
|
{feature.icon}
|
||||||
</div>
|
</div>
|
||||||
<div className="flex-1">
|
<div className="flex-1">
|
||||||
<h4 className="text-lg font-semibold text-gray-900 mb-2 group-hover:text-primary transition-colors">
|
<h4 className="text-lg font-semibold text-[#191970] mb-2 group-hover:text-indigo-600 transition-colors">
|
||||||
{feature.title}
|
{feature.title}
|
||||||
</h4>
|
</h4>
|
||||||
<p className="text-gray-600 text-sm leading-relaxed">
|
<p className="text-slate-500 text-sm leading-relaxed">
|
||||||
{feature.description}
|
{feature.description}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -215,17 +176,17 @@ const About = () => {
|
||||||
|
|
||||||
{/* Quote */}
|
{/* Quote */}
|
||||||
<motion.blockquote
|
<motion.blockquote
|
||||||
className="bg-gradient-to-r from-primary/10 to-accent/10 rounded-2xl p-6 border-l-4 border-primary"
|
className="bg-gradient-to-r from-indigo-50/80 to-purple-50/80 backdrop-blur-sm rounded-2xl p-6 border-l-4 border-[#191970]"
|
||||||
variants={fadeIn}
|
variants={fadeIn}
|
||||||
initial="hidden"
|
initial="hidden"
|
||||||
whileInView="visible"
|
whileInView="visible"
|
||||||
viewport={{ once: true }}
|
viewport={{ once: true }}
|
||||||
transition={{ delay: 0.6 }}
|
transition={{ delay: 0.6 }}
|
||||||
>
|
>
|
||||||
<p className="text-lg text-gray-700 italic font-medium leading-relaxed">
|
<p className="text-lg text-slate-600 italic font-medium leading-relaxed">
|
||||||
"Setiap individu berhak mendapatkan perlindungan dan rasa aman dalam menempuh pendidikan. Mari bersama-sama menjaga kampus kita sebagai tempat yang aman dan mendukung bagi semua."
|
"Setiap individu berhak mendapatkan perlindungan dan rasa aman dalam menempuh pendidikan. Mari bersama-sama menjaga kampus kita sebagai tempat yang aman dan mendukung bagi semua."
|
||||||
</p>
|
</p>
|
||||||
<footer className="mt-4 text-sm text-gray-600 font-semibold">
|
<footer className="mt-4 text-sm text-[#191970] font-semibold">
|
||||||
— Satgas PPKPT Polije
|
— Satgas PPKPT Polije
|
||||||
</footer>
|
</footer>
|
||||||
</motion.blockquote>
|
</motion.blockquote>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue