Upload files to "/"

page.tsx

@@ -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 (
     <section className="space-y-8">
+
+      {/* Header */}
+      <div className="space-y-2">
         <h1 className="text-3xl font-bold border-b border-zinc-800 pb-2">
-        About Me - Pecinta Kereta Api
+          Hobi Saya - Railfans Indonesia
         </h1>
 
-      <div className="space-y-4 text-zinc-300">
-        <p>
-          Halo! Saya adalah seorang pecinta kereta api Indonesia,
-          khususnya kereta api kelas eksekutif yang melayani
-          perjalanan Surabaya - Jakarta.
+        <p className="text-zinc-400">
+          Mengenal dunia perkeretaapian Indonesia melalui
+          fotografi, videografi, trainspotting, dan konten YouTube.
         </p>
+      </div>
 
-        <p>
-          Saya sangat menyukai dunia perkeretaapian Indonesia,
-          mulai dari lokomotif, rangkaian kereta, fasilitas
-          perjalanan, stasiun, hingga perkembangan teknologi
-          transportasi kereta api.
-        </p>
+      {/* Hobbies Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
 
-        {/* Kereta Api Favorit */}
-        <div className="space-y-2">
+        {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">
-            Kereta Api Favorit Surabaya - Jakarta
+              {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>
-              <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>
+          <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>
 
-        {/* Kegiatan Favorit */}
-        <div className="space-y-2">
-          <h2 className="text-xl font-semibold text-white">
-            Kegiatan Favorit
+      {/* 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>
 
-          <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 className="text-zinc-400 italic">
+          "Setiap Kereta Punya Cerita, Setiap Perjalanan
+          Punya Kenangan. Bangga Menjadi Bagian dari
+          Perkeretaapian Indonesia!"
         </p>
       </div>
-      </div>
+
     </section>
   );
 }