183 lines
7.0 KiB
TypeScript
183 lines
7.0 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">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 50 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
className="flex flex-col items-center gap-6 mb-24"
|
|
>
|
|
<h2 className="text-4xl font-bold mb-1">
|
|
Mengenal Lebih Dekat Dealer Resmi{" "}
|
|
<span className="text-[#1F6779]">Jaecoo</span>
|
|
</h2>
|
|
<p className="text-lg">
|
|
Komitmen kami adalah memberikan layanan terbaik dan pengalaman premium
|
|
di setiap kunjungan Anda.
|
|
</p>
|
|
<div className="relative w-full max-w-[1400px] mx-auto h-[300px] sm:h-[400px] md:h-[500px] overflow-hidden">
|
|
<Image
|
|
src="/journey-2.png"
|
|
alt="about-header"
|
|
fill
|
|
className="object-cover"
|
|
sizes="(max-width: 768px) 100vw, 640px"
|
|
priority
|
|
/>
|
|
</div>
|
|
</motion.div>
|
|
<div className="max-w-[1400px] mx-auto flex flex-col lg:flex-row gap-10 my-10">
|
|
<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="/mas-group.png"
|
|
alt="Dealer Jaecoo"
|
|
fill
|
|
className="object-cover object-center"
|
|
sizes="(max-width: 768px) 100vw, 536px"
|
|
/>
|
|
</motion.div>
|
|
<motion.div
|
|
className="w-full lg:w-8/12 space-y-10 "
|
|
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">
|
|
<span className="text-[#1F6779]">Mas </span>Group
|
|
</h2>
|
|
|
|
<div className="flex flex-col gap-3 mt-1">
|
|
<p className="text-black leading-relaxed text-xl">
|
|
PT MAYAPADA AUTO SEMPURNA (MAS) dimulai pada bulan Maret 2001.
|
|
</p>
|
|
<p className="text-black leading-relaxed text-xl">
|
|
MAS merupakan Perusahaan otomotif termuka yang berawal sebagai
|
|
penjual, penyedia dan penyewaan kendaraan.
|
|
</p>
|
|
<p className="text-black leading-relaxed text-xl">
|
|
Berangkat dari industry otomotif, MAS Group merupakan salah satu
|
|
Perusahaan terkemuka di wilayah Sumatra dan DKI Jakarta.
|
|
</p>
|
|
<p className="text-black leading-relaxed text-xl">
|
|
Sampai saat ini MAS Group telah mensupply lebih dari 10.000 unit
|
|
dan menyewakan berbagai kendaraan dengan segala jenis merek serta
|
|
memiliki beberapa Authorized Dealer Otomotif Brand Terkemuka di
|
|
Indonesia seperti Ford , Mercedes Benz dan MG.
|
|
</p>
|
|
<p className="text-black leading-relaxed text-xl">
|
|
24 tahun sudah usia MAS Group dan seiring dengan perkembangan, MAS
|
|
Group terus membuka beberapa Authorized Dealer Brand lain seperti
|
|
:
|
|
</p>
|
|
<p className="text-black leading-relaxed text-xl">
|
|
GWM, Chery Authorized Dealer & Body Repair, Omoda- Jaeco, serta
|
|
Lepas
|
|
</p>
|
|
<p className="text-black leading-relaxed text-xl">
|
|
MAS Group terus berkomitmen menghadirkan Solusi otomotif terbaik
|
|
melalui jaringan purna jual serta inovasi bisnis pada masa depan
|
|
ramah lingkungan.
|
|
</p>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
<div className="max-w-[1400px] mx-auto flex flex-col lg:flex-row gap-10 mt-24">
|
|
<motion.div
|
|
className="w-full lg:w-8/12 space-y-6 "
|
|
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-4xl font-bold text-black">
|
|
Mengenal Lebih Dekat Dealer Resmi{" "}
|
|
<span className="text-[#1F6779]">Jaecoo</span>
|
|
</h2>
|
|
|
|
<div>
|
|
<p className="text-gray-600 leading-relaxed text-xl">
|
|
Dealer resmi Jaecoo sejak 2025, berlokasi di Kelapa Gading. Kami
|
|
melayani penjualan, servis, serta test drive dengan fasilitas
|
|
showroom modern dan teknisi bersertifikat.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="text-gray-700 text-xl space-y-2">
|
|
<p>
|
|
<strong>Alamat:</strong> Jaecoo 1S Kelapa Gading, Jl. Boulevard
|
|
Raya Blok LA 6 No. 34-35, Kelapa Gading, Jakarta Utara 14240
|
|
</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-2.png"
|
|
alt="Dealer Jaecoo"
|
|
fill
|
|
className="object-cover object-center"
|
|
sizes="(max-width: 768px) 100vw, 536px"
|
|
/>
|
|
</motion.div>
|
|
</div>
|
|
<div className="max-w-[1400px] mx-auto mt-32">
|
|
<motion.h2
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6 }}
|
|
viewport={{ once: true }}
|
|
className="text-3xl sm:text-4xl font-bold text-center mb-12"
|
|
>
|
|
Best Sales of The Month & SPV of The Month
|
|
</motion.h2>
|
|
|
|
<div className="flex flex-wrap justify-center gap-6">
|
|
{["/bestspv1.jpeg", "/bestspv2.jpeg"].map((src, index) => (
|
|
<motion.div
|
|
key={src}
|
|
initial={{ opacity: 0, scale: 0.95 }}
|
|
whileInView={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 0.5, delay: index * 0.1 }}
|
|
viewport={{ once: true }}
|
|
className="w-full sm:w-[45%] md:w-[300px] relative overflow-hidden rounded-xl"
|
|
>
|
|
<Image
|
|
src={src}
|
|
alt={`static-gallery-${index}`}
|
|
width={800}
|
|
height={1000}
|
|
className="w-full h-auto rounded-xl hover:scale-105 transition-transform duration-500"
|
|
sizes="(max-width: 768px) 100vw, 300px"
|
|
/>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|