Upload files to "/"
This commit is contained in:
BIN
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
@@ -1,169 +1,123 @@
|
|||||||
export default function AboutPage() {
|
|
||||||
|
import Image from 'next/image';
|
||||||
|
|
||||||
|
export default function HobbiesPage() {
|
||||||
|
const hobbies = [
|
||||||
|
{
|
||||||
|
title: 'KA Argo Bromo Anggrek',
|
||||||
|
category: 'Kereta Favorit #1',
|
||||||
|
desc: 'Salah satu kereta api favorit saya yang melayani relasi Surabaya Pasarturi - Gambir. Saya suka mengabadikan perjalanan, lokomotif, rangkaian kereta, serta kemewahan fasilitas kereta eksekutif ini.',
|
||||||
|
img: '/images/Ka.1-2-3-4 Argo Bromo Anggrek.jpg',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'KA Argo Semeru',
|
||||||
|
category: 'Kereta Favorit #2',
|
||||||
|
desc: 'Kereta api eksekutif favorit dengan relasi Surabaya Gubeng - Gambir. Menjadi salah satu objek menarik untuk konten YouTube, mulai dari kedatangan kereta hingga suasana perjalanan.',
|
||||||
|
img: '/images/Ka.5-6 Argo Semeru.jpg',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'KA Bima',
|
||||||
|
category: 'Kereta Favorit #3',
|
||||||
|
desc: 'Kereta api legendaris yang melayani perjalanan Surabaya Gubeng - Gambir. Saya tertarik mengabadikan perjalanan, sejarah, dan pengalaman menggunakan kereta api ini.',
|
||||||
|
img: '/images/Ka.7-8 Bima Argo Bima.jpg',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section className="space-y-8">
|
<section className="space-y-8">
|
||||||
<h1 className="text-3xl font-bold border-b border-zinc-800 pb-2">
|
|
||||||
About Me - Pecinta Kereta Api
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<div className="space-y-4 text-zinc-300">
|
{/* Header */}
|
||||||
<p>
|
<div className="space-y-2">
|
||||||
Halo! Saya adalah seorang pecinta kereta api Indonesia,
|
<h1 className="text-3xl font-bold border-b border-zinc-800 pb-2">
|
||||||
khususnya kereta api kelas eksekutif yang melayani
|
Hobi Saya - Railfans Indonesia
|
||||||
perjalanan Surabaya - Jakarta.
|
</h1>
|
||||||
|
|
||||||
|
<p className="text-zinc-400">
|
||||||
|
Mengenal dunia perkeretaapian Indonesia melalui
|
||||||
|
fotografi, videografi, trainspotting, dan konten YouTube.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p>
|
|
||||||
Saya sangat menyukai dunia perkeretaapian Indonesia,
|
|
||||||
mulai dari lokomotif, rangkaian kereta, fasilitas
|
|
||||||
perjalanan, stasiun, hingga perkembangan teknologi
|
|
||||||
transportasi kereta api.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
{/* Kereta Api Favorit */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<h2 className="text-xl font-semibold text-white">
|
|
||||||
Kereta Api Favorit Surabaya - Jakarta
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
<ul className="list-disc list-inside text-zinc-400 space-y-2">
|
|
||||||
<li>
|
|
||||||
<strong className="text-white">
|
|
||||||
KA 1,2,3,4 Argo Bromo Anggrek
|
|
||||||
</strong>
|
|
||||||
{" "} - Kereta api kelas Eksekutif & Compartment Suites Batch 2 yang melayani
|
|
||||||
perjalanan Surabaya Pasarturi - Jakarta Gambir via Semarang Tawang.
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li>
|
|
||||||
<strong className="text-white">
|
|
||||||
KA 5-6 Argo Semeru
|
|
||||||
</strong>
|
|
||||||
{" "} - Kereta api kelas Eksekutif & Compartment Suites Batch 1 relasi
|
|
||||||
Surabaya Gubeng - Jakarta Gambir via Yogyakarta.
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li>
|
|
||||||
<strong className="text-white">
|
|
||||||
KA 7-8 Bima
|
|
||||||
</strong>
|
|
||||||
{" "} - Kereta api kelas Eksekutif & Compartment Suites Batch 1 dengan
|
|
||||||
perjalanan Surabaya Gubeng - Jakarta Gambir via Yogyakarta.
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Kegiatan Favorit */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<h2 className="text-xl font-semibold text-white">
|
|
||||||
Kegiatan Favorit
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
<ol className="list-decimal list-inside text-zinc-400 space-y-1">
|
|
||||||
<li>Menonton perjalanan kereta api.</li>
|
|
||||||
<li>Berburu foto dan video kereta api (Trainspotting).</li>
|
|
||||||
<li>Mengoleksi informasi jadwal perjalanan kereta api.</li>
|
|
||||||
<li>Mencoba perjalanan kereta api jarak jauh.</li>
|
|
||||||
<li>Mengikuti perkembangan KAI Indonesia.</li>
|
|
||||||
</ol>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Tabel Kereta Api */}
|
|
||||||
<div className="space-y-2 pt-4">
|
|
||||||
<h2 className="text-xl font-semibold text-white">
|
|
||||||
Daftar Kereta Api Favorit
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
<div className="overflow-x-auto">
|
|
||||||
<table className="w-full text-left border-collapse border border-zinc-800">
|
|
||||||
<thead>
|
|
||||||
<tr className="bg-zinc-900 text-white">
|
|
||||||
<th className="border border-zinc-800 px-4 py-2">
|
|
||||||
No.
|
|
||||||
</th>
|
|
||||||
<th className="border border-zinc-800 px-4 py-2">
|
|
||||||
Nama Kereta
|
|
||||||
</th>
|
|
||||||
<th className="border border-zinc-800 px-4 py-2">
|
|
||||||
Relasi
|
|
||||||
</th>
|
|
||||||
<th className="border border-zinc-800 px-4 py-2">
|
|
||||||
Kelas
|
|
||||||
</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
|
|
||||||
<tbody className="text-zinc-400">
|
|
||||||
<tr>
|
|
||||||
<td className="border border-zinc-800 px-4 py-2">1</td>
|
|
||||||
<td className="border border-zinc-800 px-4 py-2">
|
|
||||||
Argo Bromo Anggrek
|
|
||||||
</td>
|
|
||||||
<td className="border border-zinc-800 px-4 py-2">
|
|
||||||
Surabaya Pasarturi - Jakarta Gambir via Semarang Tawang
|
|
||||||
</td>
|
|
||||||
<td className="border border-zinc-800 px-4 py-2">
|
|
||||||
Eksekutif & Compartment Suites Batch 2
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td className="border border-zinc-800 px-4 py-2">2</td>
|
|
||||||
<td className="border border-zinc-800 px-4 py-2">
|
|
||||||
Argo Semeru
|
|
||||||
</td>
|
|
||||||
<td className="border border-zinc-800 px-4 py-2">
|
|
||||||
Surabaya Gubeng - Jakarta Gambir via Yogyakarta
|
|
||||||
</td>
|
|
||||||
<td className="border border-zinc-800 px-4 py-2">
|
|
||||||
Eksekutif & Compartment Suites Batch 1
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr>
|
|
||||||
<td className="border border-zinc-800 px-4 py-2">3</td>
|
|
||||||
<td className="border border-zinc-800 px-4 py-2">
|
|
||||||
Bima
|
|
||||||
</td>
|
|
||||||
<td className="border border-zinc-800 px-4 py-2">
|
|
||||||
Surabaya Gubeng - Jakarta Gambir via Yogyakarta
|
|
||||||
</td>
|
|
||||||
<td className="border border-zinc-800 px-4 py-2">
|
|
||||||
Eksekutif & Compartment Suites Batch 1
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Semboyan */}
|
|
||||||
<div className="pt-4 space-y-2">
|
|
||||||
<h2 className="text-xl font-semibold text-white">
|
|
||||||
Motto Pecinta Kereta Api
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
<blockquote className="border-l-4 border-red-600 pl-4 italic text-zinc-400">
|
|
||||||
"Kereta Api Bukan Sekadar Transportasi,
|
|
||||||
Tetapi Juga Perjalanan, Pengalaman, dan Kebanggaan
|
|
||||||
Perkeretaapian Indonesia."
|
|
||||||
</blockquote>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* External Link */}
|
|
||||||
<div className="pt-4">
|
|
||||||
<p className="text-sm">
|
|
||||||
Informasi resmi perkeretaapian Indonesia:{" "}
|
|
||||||
<a
|
|
||||||
href="https://www.kai.id/"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="text-blue-400 underline hover:text-blue-300"
|
|
||||||
>
|
|
||||||
PT Kereta Api Indonesia (Persero)
|
|
||||||
</a>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Hobbies Cards */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
|
|
||||||
|
{hobbies.map((hobby, index) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className="bg-zinc-900 border border-zinc-800
|
||||||
|
rounded-xl p-4 space-y-4 hover:border-red-600
|
||||||
|
transition duration-300"
|
||||||
|
>
|
||||||
|
{/* Image */}
|
||||||
|
<div className="h-48 relative rounded-lg overflow-hidden">
|
||||||
|
<Image
|
||||||
|
src={hobby.img}
|
||||||
|
alt={hobby.title}
|
||||||
|
fill
|
||||||
|
sizes="(max-width: 768px) 100vw,
|
||||||
|
(max-width: 1200px) 50vw, 33vw"
|
||||||
|
className="object-cover hover:scale-105
|
||||||
|
transition duration-500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Category */}
|
||||||
|
<span className="text-xs font-semibold
|
||||||
|
text-red-400 uppercase tracking-wider">
|
||||||
|
{hobby.category}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
{/* Title */}
|
||||||
|
<h2 className="text-xl font-semibold text-white">
|
||||||
|
{hobby.title}
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
{/* Description */}
|
||||||
|
<p className="text-zinc-400 text-sm leading-relaxed">
|
||||||
|
{hobby.desc}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* YouTube Creator Section */}
|
||||||
|
<div className="bg-zinc-900 border border-zinc-800
|
||||||
|
rounded-xl p-6 space-y-3">
|
||||||
|
|
||||||
|
<h2 className="text-2xl font-bold text-white">
|
||||||
|
My YouTube Railway Channel
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<p className="text-zinc-400">
|
||||||
|
Saya ingin mengembangkan channel YouTube yang
|
||||||
|
berisi dokumentasi kereta api Indonesia, khususnya
|
||||||
|
kereta api favorit rute Surabaya - Jakarta.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<ul className="list-disc list-inside text-zinc-400 space-y-2">
|
||||||
|
<li>Dokumentasi Argo Bromo Anggrek.</li>
|
||||||
|
<li>Review dan perjalanan Argo Semeru.</li>
|
||||||
|
<li>Dokumentasi KA Bima.</li>
|
||||||
|
<li>Trainspotting dan railway photography.</li>
|
||||||
|
<li>Review fasilitas kereta api eksekutif.</li>
|
||||||
|
<li>Vlog perjalanan kereta api jarak jauh.</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Motto */}
|
||||||
|
<div className="border-l-4 border-red-600 pl-4 py-2">
|
||||||
|
<h2 className="text-lg font-semibold text-white">
|
||||||
|
Motto Seorang Railfans
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<p className="text-zinc-400 italic">
|
||||||
|
"Setiap Kereta Punya Cerita, Setiap Perjalanan
|
||||||
|
Punya Kenangan. Bangga Menjadi Bagian dari
|
||||||
|
Perkeretaapian Indonesia!"
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user