61 lines
1.9 KiB
TypeScript
61 lines
1.9 KiB
TypeScript
import novel from "../../assets/novel.png";
|
|
import elektronik from "../../assets/elektronik.png";
|
|
import alat from "../../assets/alat.png";
|
|
|
|
export default function Content() {
|
|
const items = [
|
|
{
|
|
name: "novel",
|
|
image: novel,
|
|
function:
|
|
"rekreatif (hiburan), didaktif (mendidik), moralitas (penanaman nilai baik-buruk), religius (ajaran agama), dan estetis (keindahan bahasa/cerita).",
|
|
},
|
|
{
|
|
name: "elektronik",
|
|
image: elektronik,
|
|
function:
|
|
"Elektronik digunakan untuk mempermudah pekerjaan manusia, memberikan hiburan, membantu komunikasi, serta meningkatkan efisiensi dan keamanan dalam kehidupan sehari-hari.",
|
|
},
|
|
{
|
|
name: "Alat Tulis",
|
|
image: alat ,
|
|
function:
|
|
"mencatat informasi, mendukung administrasi perkantoran, menunjang kegiatan belajar-mengajar, serta memfasilitasi ekspresi kreatif seperti menggambar dan merancang.",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className="space-y-8 bg-white p-6 rounded-2xl">
|
|
<h2 className="text-3xl font-bold text-black mb-6 border-b-4 border-blue-600 pb-2">
|
|
Barang Barang
|
|
</h2>
|
|
|
|
{items.map((item, index) => (
|
|
<div
|
|
key={index}
|
|
className="bg-black text-white rounded-2xl shadow-lg p-6 flex items-center gap-8 border-l-4 border-blue-600"
|
|
>
|
|
{/* KIRI - PENJELASAN */}
|
|
<div className="flex-1">
|
|
<h3 className="text-2xl font-bold text-blue-400 mb-3">
|
|
{item.name}
|
|
</h3>
|
|
|
|
<p className="text-gray-300 leading-relaxed">
|
|
{item.function}
|
|
</p>
|
|
</div>
|
|
|
|
{/* KANAN - FOTO */}
|
|
<div className="w-72">
|
|
<img
|
|
src={item.image}
|
|
alt={item.name}
|
|
className="w-full h-56 object-cover rounded-xl shadow border-2 border-blue-500"
|
|
/>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
} |