84 lines
2.8 KiB
TypeScript
84 lines
2.8 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import Image from "next/image";
|
||
|
|
import { motion } from "framer-motion";
|
||
|
|
|
||
|
|
export default function HeaderAbout() {
|
||
|
|
return (
|
||
|
|
<section className="py-10 px-4 sm:px-6 md:px-10 bg-white">
|
||
|
|
<div className="flex flex-col items-center gap-6">
|
||
|
|
<motion.div
|
||
|
|
className="relative w-full h-[300px] sm:h-[400px] md:h-[640px] overflow-hidden "
|
||
|
|
initial={{ opacity: 0, y: 40 }}
|
||
|
|
whileInView={{ opacity: 1, y: 0 }}
|
||
|
|
transition={{ duration: 0.8, ease: [0.25, 0.1, 0.25, 1] }}
|
||
|
|
viewport={{ once: true }}
|
||
|
|
>
|
||
|
|
<Image
|
||
|
|
src="/about-i.png"
|
||
|
|
alt="about-header"
|
||
|
|
fill
|
||
|
|
className="object-cover"
|
||
|
|
sizes="(max-width: 768px) 100vw, 640px"
|
||
|
|
priority
|
||
|
|
/>
|
||
|
|
</motion.div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="w-full flex flex-col lg:flex-row gap-10 mt-10">
|
||
|
|
<motion.div
|
||
|
|
className="w-full lg:w-6/12 space-y-6 sm:ml-15"
|
||
|
|
initial={{ opacity: 0, x: -40 }}
|
||
|
|
whileInView={{ opacity: 1, x: 0 }}
|
||
|
|
transition={{ duration: 0.8, ease: [0.25, 0.1, 0.25, 1] }}
|
||
|
|
viewport={{ once: true }}
|
||
|
|
>
|
||
|
|
<h2 className="text-2xl sm:text-3xl font-bold text-black">
|
||
|
|
Mengenal Lebih Dekat Dealer Resmi Jaecoo
|
||
|
|
</h2>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<h3 className="text-lg sm:text-xl font-semibold text-gray-800 mb-2">
|
||
|
|
Deskripsi Singkat
|
||
|
|
</h3>
|
||
|
|
<p className="text-gray-600 leading-relaxed text-base">
|
||
|
|
Dealer resmi Jaecoo sejak 2023, berlokasi di pusat Bandung. Kami
|
||
|
|
melayani penjualan, servis, serta test drive dengan fasilitas
|
||
|
|
showroom modern dan teknisi bersertifikat.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="text-gray-700 text-sm space-y-2">
|
||
|
|
<p>
|
||
|
|
<strong>Alamat:</strong> Jaecoo Cihampelas Bandung, Jl. Cihampelas
|
||
|
|
No. 264-268, Bandung, Jawa Barat 40131
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<strong>Telepon:</strong> 021-12345678
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
<strong>Email:</strong> info@dealerjaecoo.id
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</motion.div>
|
||
|
|
|
||
|
|
<motion.div
|
||
|
|
className="relative w-full lg:w-[536px] h-[300px] sm:h-[400px] lg:h-[576px] overflow-hidden"
|
||
|
|
initial={{ opacity: 0, x: 40 }}
|
||
|
|
whileInView={{ opacity: 1, x: 0 }}
|
||
|
|
transition={{ duration: 0.8, ease: [0.25, 0.1, 0.25, 1] }}
|
||
|
|
viewport={{ once: true }}
|
||
|
|
>
|
||
|
|
<Image
|
||
|
|
src="/dealer.png"
|
||
|
|
alt="Dealer Jaecoo"
|
||
|
|
fill
|
||
|
|
className="object-cover object-center"
|
||
|
|
sizes="(max-width: 768px) 100vw, 536px"
|
||
|
|
/>
|
||
|
|
</motion.div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
}
|