LandingPage-Fnet/src/pages/About.jsx

107 lines
4.2 KiB
JavaScript

"use client"; // kalau pakai Next.js, taruh di baris paling atas
import Navbar from "../components/Navbar";
import Footer from "../components/Footer"; // <- tambahkan ini
import { motion } from "framer-motion";
import { CheckCircle } from "lucide-react";
export default function About() {
return (
<div className="font-sans">
{/* Navbar */}
<Navbar />
{/* About Section */}
<section className="py-20 bg-gray-50 min-h-screen">
<div className="max-w-6xl mx-auto px-6 lg:px-20">
{/* Logo & Deskripsi */}
<motion.section
className="grid grid-cols-1 md:grid-cols-2 items-center gap-10"
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.7 }}
viewport={{ once: true }}
>
{/* Logo di kiri */}
<div className="flex justify-center md:justify-start">
<img
src="/WTell_logo.png"
alt="Logo Walanja"
className="w-45 md:w-45"
/>
</div>
{/* Deskripsi di kanan */}
<div>
<p className="text-gray-700 leading-relaxed mb-4">
<span className="font-semibold">PT. Jaringan Citra Mandiri</span>{" "}
adalah Perusahaan Swasta yang bergerak di bidang Penyedia Layanan
Teknologi Telekomunikasi Berbasis Fiber Optic.
</p>
<p className="text-gray-700 leading-relaxed">
Berdiri sejak tahun 2018,{" "}
<span className="font-semibold text-blue-700">WTELL</span>{" "}
berkomitmen menjadi{" "}
<span className="font-bold">
Penyedia Layanan Teknologi Telekomunikasi Berbasis Fiber Optic
yang Handal dan Profesional.
</span>
</p>
</div>
</motion.section>
{/* Visi & Misi */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-10 mt-16">
{/* Visi */}
<motion.section
className="bg-white shadow-lg rounded-2xl p-8"
whileHover={{ scale: 1.05 }}
initial={{ opacity: 0, x: -50 }}
whileInView={{ opacity: 1, x: 0 }}
transition={{ duration: 0.7 }}
viewport={{ once: true }}
>
<h3 className="text-2xl font-bold text-center mb-6">VISI</h3>
<p className="text-gray-700 text-center leading-relaxed">
Menjadi Penyedia Jaringan Kabel Serat Optik Terbaik yang
Menghubungkan Seluruh Wilayah di Indonesia.
</p>
</motion.section>
{/* Misi */}
<motion.section
className="bg-white shadow-lg rounded-2xl p-8"
whileHover={{ scale: 1.05 }}
initial={{ opacity: 0, x: 50 }}
whileInView={{ opacity: 1, x: 0 }}
transition={{ duration: 0.7 }}
viewport={{ once: true }}
>
<h3 className="text-2xl font-bold text-center mb-6">MISI</h3>
<ul className="space-y-4 text-gray-700">
<li className="flex items-start gap-2">
<CheckCircle className="text-green-500 w-6 h-6 shrink-0 mt-1" />
Menyediakan kebutuhan infrastruktur Kabel Serat Optik yang
Handal, Terpercaya dan Up To Date dengan Tenaga Profesional.
</li>
<li className="flex items-start gap-2">
<CheckCircle className="text-green-500 w-6 h-6 shrink-0 mt-1" />
Berkomitmen untuk berinovasi dalam teknologi jaringan Fiber
Optic diseluruh Indonesia.
</li>
<li className="flex items-start gap-2">
<CheckCircle className="text-green-500 w-6 h-6 shrink-0 mt-1" />
Memberikan nilai tambah dan sinergi dalam industri jaringan
Fiber Optic.
</li>
</ul>
</motion.section>
</div>
</div>
</section>
{/* Footer */}
<Footer />
</div>
);
}