275 lines
11 KiB
JavaScript
275 lines
11 KiB
JavaScript
import Navbar from "../components/Navbar";
|
||
import Footer from "../components/Footer";
|
||
import { motion } from "framer-motion";
|
||
import { useState } from "react";
|
||
|
||
export default function Portfolio() {
|
||
const [selectedPortfolio, setSelectedPortfolio] = useState(null);
|
||
|
||
const portfolioData = [
|
||
{
|
||
id: 1,
|
||
image: "/sdm2.jpg",
|
||
title: "Didukung Tenaga Kerja Profesional & Bersertifikasi BNSP",
|
||
shortDesc:
|
||
"PT. Jaringan Citra Mandiri memiliki tenaga kerja bersertifikasi BNSP dan tenaga ahli berpengalaman.",
|
||
detail: (
|
||
<>
|
||
<h2 className="text-xl font-bold mb-2">
|
||
Didukung Tenaga Kerja Profesional & Bersertifikasi BNSP Untuk Layanan Terbaik
|
||
</h2>
|
||
<p className="text-sm leading-relaxed mb-2">
|
||
PT. Jaringan Citra Mandiri memiliki tenaga kerja dengan kualifikasi tinggi dan telah
|
||
mendapatkan sertifikasi dari BNSP. Tenaga kerja kami memiliki pengetahuan, keterampilan,
|
||
dan pemahaman yang mendalam dalam berbagai bidang pekerjaan.
|
||
</p>
|
||
<p className="text-sm leading-relaxed">
|
||
Lebih dari 200 tenaga kerja siap mendukung semua layanan dengan standar terbaik,
|
||
termasuk tenaga ahli di dalamnya yang siap memaksimalkan layanan yang kami sediakan.
|
||
</p>
|
||
</>
|
||
),
|
||
},
|
||
{
|
||
id: 2,
|
||
image: "/alat2.jpg",
|
||
title: "Peralatan Fiber Optik",
|
||
shortDesc:
|
||
"PT. Jaringan Citra Mandiri memiliki alat kerja yang lengkap dan tersertifikasi.",
|
||
detail: (
|
||
<>
|
||
<h2 className="text-xl font-bold mb-2">Peralatan Fiber Optik</h2>
|
||
<p className="text-sm leading-relaxed mb-2">
|
||
Kami menggunakan peralatan fiber optik seperti Fujikura, Yokogawa, dan Exfo untuk
|
||
memastikan hasil kerja berkualitas tinggi.
|
||
</p>
|
||
<p className="text-sm leading-relaxed">
|
||
Semua alat kerja sudah sesuai standar industri jaringan serat optik.
|
||
</p>
|
||
</>
|
||
),
|
||
extraImages: ["/fujikura.jpg", "/yokogwa.jpg", "/exfo.jpg"],
|
||
},
|
||
{
|
||
id: 3,
|
||
image: "/tiang.jpg",
|
||
title: "Produksi / Pabrikasi Tiang",
|
||
shortDesc: "Pabrikasi tiang telco berkualitas dengan standar industri terbaik.",
|
||
detail: (
|
||
<div className="space-y-10">
|
||
<div className="grid md:grid-cols-2 gap-6 items-center">
|
||
<img
|
||
src="/tiang1.jpg"
|
||
alt="Pabrikasi Berkualitas"
|
||
className="w-full h-56 object-cover rounded-lg border shadow"
|
||
/>
|
||
<div>
|
||
<h3 className="font-semibold text-gray-800 mb-2">
|
||
Pabrikasi Berkualitas dengan Standar Industri Terbaik
|
||
</h3>
|
||
<p className="text-sm leading-relaxed">
|
||
Selain dari pekerjaan jaringan, PT. Jaringan Citra Mandiri mempunyai Pabrikasi Tiang Telco,
|
||
guna menunjang kebutuhan perusahaan maupun kebutuhan dari luar perusahaan.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid md:grid-cols-2 gap-6 items-center">
|
||
<div className="order-2 md:order-1">
|
||
<h3 className="font-semibold text-gray-800 mb-2">
|
||
Efisiensi Tinggi untuk Memenuhi Permintaan Pelanggan
|
||
</h3>
|
||
<p className="text-sm leading-relaxed">
|
||
Kami dapat memproduksi tiang sebanyak 50 batang per hari. Dengan peralatan dan fasilitas
|
||
yang mumpuni, tenaga kerja yang berkualitas serta sistem manajemen yang efisien, membuat
|
||
kami dapat memenuhi permintaan pelanggan dengan baik.
|
||
</p>
|
||
</div>
|
||
<img
|
||
src="/tiang2.jpg"
|
||
alt="Efisiensi Tinggi"
|
||
className="w-full h-56 object-cover rounded-lg border shadow order-1 md:order-2"
|
||
/>
|
||
</div>
|
||
</div>
|
||
),
|
||
},
|
||
{
|
||
id: 4,
|
||
image: "/map1.jpg",
|
||
title: "Pembangunan & Pemeliharaan Jaringan Serat Optik Antar Kota",
|
||
shortDesc:
|
||
"Pembangunan dan pemeliharaan jaringan serat optik skala besar di berbagai wilayah Jawa Barat.",
|
||
detail: (
|
||
<div className="space-y-4">
|
||
<h2 className="text-xl font-bold mb-2">
|
||
Pembangunan & Pemeliharaan Jaringan Serat Optik Antar Kota
|
||
</h2>
|
||
<p className="text-sm leading-relaxed mb-2">
|
||
PT. Jaringan Citra Mandiri telah menyelesaikan berbagai proyek pembangunan
|
||
dan pemeliharaan jaringan serat optik antar kota.
|
||
Beberapa proyek utama mencakup wilayah strategis di Jawa Barat.
|
||
</p>
|
||
|
||
<div className="grid grid-cols-2 gap-4 mt-4">
|
||
<div>
|
||
<img src="/subang.jpg" alt="Subang" className="w-full h-36 object-cover rounded-lg border" />
|
||
<p className="text-xs mt-1 text-center font-semibold">Subang – 50 Km</p>
|
||
</div>
|
||
<div>
|
||
<img src="/pangandaran.jpg" alt="Pangandaran" className="w-full h-36 object-cover rounded-lg border" />
|
||
<p className="text-xs mt-1 text-center font-semibold">Pangandaran – 225 Km</p>
|
||
</div>
|
||
<div>
|
||
<img src="/bandungraya.jpg" alt="Bandung Raya" className="w-full h-36 object-cover rounded-lg border" />
|
||
<p className="text-xs mt-1 text-center font-semibold">Bandung Raya – 800 Km</p>
|
||
</div>
|
||
<div>
|
||
<img src="/garut.jpg" alt="Garut" className="w-full h-36 object-cover rounded-lg border" />
|
||
<p className="text-xs mt-1 text-center font-semibold">Garut – 1000 Km</p>
|
||
</div>
|
||
<div>
|
||
<img src="/ciamis.jpg" alt="Ciamis" className="w-full h-36 object-cover rounded-lg border" />
|
||
<p className="text-xs mt-1 text-center font-semibold">Ciamis – 100 Km</p>
|
||
</div>
|
||
<div>
|
||
<img src="/tasik.jpg" alt="Tasik" className="w-full h-36 object-cover rounded-lg border" />
|
||
<p className="text-xs mt-1 text-center font-semibold">Tasik – 100 Km</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
),
|
||
},
|
||
];
|
||
|
||
return (
|
||
<div className="font-sans">
|
||
<Navbar />
|
||
|
||
<section className="relative w-full h-[400px] flex items-center justify-center text-center text-white overflow-hidden">
|
||
<video
|
||
className="absolute inset-0 w-full h-full object-cover"
|
||
src="/port2.mp4"
|
||
autoPlay
|
||
loop
|
||
muted
|
||
playsInline
|
||
/>
|
||
<div className="absolute inset-0 bg-black/50"></div>
|
||
<div className="relative z-10 px-4">
|
||
<h1 className="text-4xl font-bold mb-8">Portofolio Kami</h1>
|
||
<p className="text-lg opacity-90">
|
||
Lihat karya dan layanan terbaik yang sudah kami bangun
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section className="relative py-20 bg-gradient-to-br from-indigo-50 via-white to-pink-50 min-h-screen overflow-hidden">
|
||
<div className="relative max-w-6xl mx-auto px-6 lg:px-20">
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 relative z-10">
|
||
{portfolioData.map((item) => (
|
||
<PortfolioCard
|
||
key={item.id}
|
||
image={item.image}
|
||
title={item.title}
|
||
shortDesc={item.shortDesc}
|
||
onClick={() => setSelectedPortfolio(item)}
|
||
/>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{selectedPortfolio && (
|
||
<div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50 px-4">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 50, scale: 0.95 }}
|
||
animate={{ opacity: 1, y: 0, scale: 1 }}
|
||
exit={{ opacity: 0, y: 50, scale: 0.95 }}
|
||
transition={{ duration: 0.4, ease: "easeOut" }}
|
||
className="relative bg-white/90 backdrop-blur-xl rounded-3xl max-w-5xl w-full h-[85vh] flex flex-col shadow-2xl overflow-hidden"
|
||
>
|
||
<button
|
||
onClick={() => setSelectedPortfolio(null)}
|
||
className="absolute top-4 right-4 z-50 bg-white/80 hover:bg-red-500 hover:text-white rounded-full shadow-md p-2 transition"
|
||
>
|
||
✕
|
||
</button>
|
||
|
||
<div className="relative">
|
||
<img
|
||
src={selectedPortfolio.image}
|
||
alt={selectedPortfolio.title}
|
||
className="w-full h-72 object-cover rounded-t-3xl"
|
||
/>
|
||
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent rounded-t-3xl"></div>
|
||
<div className="absolute bottom-6 left-6">
|
||
<h2 className="text-2xl md:text-3xl font-bold text-white drop-shadow-lg">
|
||
{selectedPortfolio.title}
|
||
</h2>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="p-6 overflow-y-auto flex-1 text-gray-800 space-y-4 text-sm leading-relaxed custom-scrollbar">
|
||
{selectedPortfolio.detail}
|
||
|
||
{selectedPortfolio.extraImages && (
|
||
<div className="grid grid-cols-2 md:grid-cols-3 gap-4 mt-6">
|
||
{selectedPortfolio.extraImages.map((img, idx) => (
|
||
<motion.img
|
||
key={idx}
|
||
src={img}
|
||
alt={`extra-${idx}`}
|
||
whileHover={{ scale: 1.05 }}
|
||
className="w-full h-40 object-cover rounded-xl border shadow-sm transition"
|
||
/>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
)}
|
||
|
||
<Footer />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/* Komponen Card */
|
||
function PortfolioCard({ image, title, shortDesc, onClick }) {
|
||
return (
|
||
<motion.div
|
||
whileHover={{ scale: 1.02 }}
|
||
initial={{ opacity: 0, y: 40 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.5 }}
|
||
viewport={{ once: true }}
|
||
className="rounded-2xl overflow-hidden bg-white/90 backdrop-blur-md shadow-md hover:shadow-xl hover:-translate-y-1 transition-all duration-300 flex flex-col"
|
||
>
|
||
<div className="relative">
|
||
<img src={image} alt={title} className="w-full h-48 object-cover" />
|
||
<div className="absolute inset-0 bg-gradient-to-t from-black/30 via-transparent to-transparent"></div>
|
||
</div>
|
||
|
||
<div className="p-6 flex flex-col flex-grow">
|
||
{/* ==== WARNA JUDUL DIBUAT BIRU NAVBAR ==== */}
|
||
<h3 className="text-lg font-bold bg-gradient-to-r from-blue-700 to-blue-500 bg-clip-text text-transparent">
|
||
{title}
|
||
</h3>
|
||
|
||
<p className="mt-2 text-gray-700 text-sm leading-relaxed flex-grow">
|
||
{shortDesc}
|
||
</p>
|
||
|
||
<button
|
||
onClick={onClick}
|
||
className="mt-4 inline-block text-blue-600 font-semibold hover:underline text-sm text-left"
|
||
>
|
||
Lihat Selengkapnya →
|
||
</button>
|
||
</div>
|
||
</motion.div>
|
||
);
|
||
}
|