90 lines
3.0 KiB
TypeScript
90 lines
3.0 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import { motion } from "framer-motion";
|
|
|
|
export default function AboutSection() {
|
|
const socials = [
|
|
{ name: "Facebook", icon: "/image/fb.png" },
|
|
{ name: "Instagram", icon: "/image/ig.png" },
|
|
{ name: "X", icon: "/image/x.png" },
|
|
{ name: "Youtube", icon: "/image/yt.png" },
|
|
{ name: "Tiktok", icon: "/image/tt.png" },
|
|
];
|
|
|
|
const messages = [
|
|
{ id: 1, text: "Dimana posisi Ayah saya sekarang?", type: "user" },
|
|
{
|
|
id: 2,
|
|
text: "Bapak Ahmad terdeteksi di Tenda Maktab 45, Mina.",
|
|
type: "bot",
|
|
},
|
|
{ id: 3, text: "Apakah ada berita cuaca hari ini?", type: "user" },
|
|
{
|
|
id: 4,
|
|
text: "Makkah saat ini cerah, suhu 38°. Kemenag menghimbau jamaah untuk minum air tiap 1 jam.",
|
|
type: "bot",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="relative bg-[#f7f0e3] py-24">
|
|
<div className="container mx-auto grid grid-cols-1 items-center gap-16 px-6 md:grid-cols-2">
|
|
{/* PHONE WRAPPER */}
|
|
<div className="flex justify-center">
|
|
<div className="relative w-[320px] h-[640px]">
|
|
{/* PHONE IMAGE */}
|
|
<Image
|
|
src="/image/phone.png"
|
|
alt="App Preview"
|
|
fill
|
|
className="object-contain z-10 pointer-events-none"
|
|
/>
|
|
|
|
{/* CHAT AREA */}
|
|
<div className="absolute top-[120px] left-[25px] right-[25px] bottom-[120px] overflow-hidden z-0">
|
|
<div className="flex flex-col gap-4">
|
|
{messages.map((msg, index) => (
|
|
<motion.div
|
|
key={msg.id}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: index * 1.2 }}
|
|
className={`max-w-[80%] px-4 py-3 rounded-2xl text-sm shadow ${
|
|
msg.type === "user"
|
|
? "bg-blue-600 text-white self-end rounded-br-sm"
|
|
: "bg-gray-200 text-gray-800 self-start rounded-bl-sm"
|
|
}`}
|
|
>
|
|
{msg.text}
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* TEXT CONTENT */}
|
|
<div className="max-w-xl">
|
|
<p className="mb-4 text-sm font-semibold uppercase tracking-widest text-gray-400">
|
|
About Us
|
|
</p>
|
|
|
|
<h2 className="mb-6 text-4xl font-extrabold leading-tight">
|
|
Helping you find the right{" "}
|
|
<span className="relative inline-block">
|
|
<span className="absolute bottom-1 left-0 h-3 w-full bg-[#966314]/40"></span>
|
|
<span className="relative">Solution</span>
|
|
</span>
|
|
</h2>
|
|
|
|
<p className="text-sm leading-relaxed text-gray-600">
|
|
PT Qudo Buana Nawakara adalah perusahaan nasional Indonesia yang
|
|
berfokus pada pengembangan aplikasi...
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|