Upload files to "/"

2026-11-03 08:31:02 -05:00
commit c39c02dfc8
3 changed files with 148 additions and 0 deletions
@@ -0,0 +1,25 @@
+import Image from 'next/image';
+
+export default function GalleryPage() {
+  const photos = [
+    { src: '/images/Ka.1-2.3-4 Argo Bromo Anggrek.jpg', caption: 'THE KINGDOM OF NORTHERN LINE' },
+    { src: '/images/Ka 5-6 Argo Semeru.jpg', caption: 'THE KINGDOM OF SOUTHERN LINE' },
+    { src: '/images/Ka 7-8 Bima Argo Bima.jpg', caption: 'THE KINGDOM OF SOUTHERN Biru Malam LINE' },
+  ];
+
+  return (
+    <section className="space-y-8">
+      <h1 className="text-3xl font-bold border-b border-zinc-800 pb-2">Galeri Foto</h1>
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
+        {photos.map((item, index) => (
+          <div key={index} className="bg-zinc-900 border border-zinc-800 rounded-lg overflow-hidden p-2">
+            <div className="h-56 relative rounded-md overflow-hidden">
+              <Image src={item.src} alt={item.caption} fill className="object-cover" />
+            </div>
+            <p className="text-center text-sm text-zinc-400 mt-3">{item.caption}</p>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
@@ -0,0 +1,123 @@
+
+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">
+          Hobi Saya - Railfans Indonesia
+        </h1>
+
+        <p className="text-zinc-400">
+          Mengenal dunia perkeretaapian Indonesia melalui
+          fotografi, videografi, trainspotting, dan konten YouTube.
+        </p>
+      </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>
+  );
+}