From c39c02dfc87dde59b7bc1acfc8863da69c177a4b Mon Sep 17 00:00:00 2001
From: "Muhammad.haekal Rahmatullah" <haekalrahmatullah36@gmail.com>
Date: Tue, 3 Nov 2026 08:31:02 -0500
Subject: [PATCH] Upload files to "/"

---
 Gallery.tsx |  25 +++++++++++
 favicon.ico | Bin 0 -> 15086 bytes
 page.tsx    | 123 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 148 insertions(+)
 create mode 100644 Gallery.tsx
 create mode 100644 favicon.ico
 create mode 100644 page.tsx

diff --git a/Gallery.tsx b/Gallery.tsx
new file mode 100644
index 0000000..b505cd4
--- /dev/null
+++ b/Gallery.tsx
@@ -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>
+  );
+}
\ No newline at end of file
diff --git a/favicon.ico b/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..af98450595e8b8efd9e505cddc5ed705b665a4d8
GIT binary patch
literal 15086
zcmdU$XN*<H702)H0t+@}>0PW5y#)gXL_h{3FkJ#<n(5ex76J+I1p+HTAPgVyg6Ksw
z84!pfge5T96#+}2&_7TO8;HPJ5lT#1Ij|?^H@tbd@A{Sd-rHR#Bb|5eojK)yXXehF
zIWy03Qk*oWZCgjLna<wEj?>X`oXpI?bB5#G)w~S7Qa+`W<1AB#X3C=?&UhvAO=|S+
zQpCR%R9`2h-z)7_x}fw(>6KDpfVd}*GI-!c2H9UDrKwS>=#NU@Ddj7@Q4*g7FEYrY
z16}AW?v$zq+9+i!-B+T1{bG*9hmHqIUn`*-8^w`osM0?vVJi}rWb@IzKnYt#l~PpE
zZ<TVD-YO-FF{*rOYU<lkrAp<bq@-XI+sPyy4V<w`#aZXU_eo1jlPXoJNTo`Zq)eGI
z5A+?d4TeNgX%+f|(sQMtjpDl3dY8I&>q^t6O{HGFdQ!P^WzlxPHW<JXPvV`Cd!bb9
z*s%fTu3fuIhYlU2dGqE{ty(qF`o}gHz!Fb8&~7DC?`lVC)~qQ52M&}00|v+^pL`-M
zTehVCxa$opVDgi?DidR)TfW%tD^{#1pMCb3eDTE>GIHcd>D{}x={sTUg9&WW6602m
zQnBH6>!yx}4jn2B7A%n2vuDesNt2{;<Hpf!gDu+F%J^RBwozR7^zA-<`pD|lt7XNC
z6|!*QLeqB`gQD038yLf--)Lru^_!1A`bf5I+a^19?2z^A*UOh*ekt$2|9&*=whWA5
zb*EH)_*%*G6zlba4?ZxsPn<X*hYlT*l`B_D{rdIeu?bc%+tgfd;;Q=*BSy%^jT>dd
zh7B@$^l0C<Gcqz{-MV#h_3Bmm{`>Fc@ZrPKrArsz@`@AQzbS#)CVarSbb!I8ty{PH
zk}X}jv}9#v$)iV)<cA-Akjs}Zn{Sr6D_;A`4`vcRIDTwgIugN8J3W8?Twc9;C66CJ
zmNjeENcr;R<Ff0*31+afj`)Ww-<Q64@ptOfN$%dgYn#mU9lnEj?Yj8EY}ZY1T=~9q
z#)BWfCMPE+i2dQihi0sd*QSRb%y!M^3$t6^FaC1n%9(H6f~W6HojTR{HuQVO`vm(x
zn0G6&CM_2H%uzFE&Xj_J0t;W(u3al-%a%3%4Zbpj4-xRy;>Gb-#m>4qUO6)cT2PV3
zpI*Is$&Ww&XxZfC$&*s6RxM+zLWK&_s8J(BjQt6=fsGRsIez?@ix)2jvEROZTiUm8
zAGA}oYE|jjv7_)^<8Q|B8-jA4x_+h43HdwG`akQZ{rmR^u|IqEOoj~`7J{KpojS(<
z>D#xjnZI<c5>oEL8L15HMT(z#WR80C=8eJ6m1l4LW@cu}s8OTj^Upsw@4?*W6SJES
z?6iS9&)0pV`lp_$Z=3e*+h^9ZUK>rCG?5uIW|;4L`0(N0^@=YH0qjNg{kCh@PHx@0
zWueQ33l}2#^Q~LAHa;_LgYTK1p6(a3o6pAd+<Ct4-Sxj^%NDZ+#GkYYABXYBTkrOn
zZyDb|J3CwE%$Z}xR9hCum9d{WAflZ}Wp4btckebh3JVJj{MWBvo4yfkOvmTkxpSxN
z*|SF$FJ3I~z4u<+7y{UtgOl<f7~@~OcwwvF%ni)Dk=~vB?%lh~v17;N+i$-$?cj6m
z;?`;Xhot?tAaK1ob?TJVu3g)0C+t1zbo~Ew=g!IY?b{RaL#_XowEt}J-??+g#BZY2
zyDcMLa^uDgLFVAWgTj1l%Y0tHQ$Dbhl3KrjAHSaXhwAc0#7v$(eJVfw^po*T@qzrx
z2KemyMIX&tj5V2W9d`Z5cgz}c^5n@9&m2UYjj;!RZtmQ<66<^MU}LT8UO$%T`rU)Y
zcb&Q9yz6%@GBJs`*6=QUiC{=n28`bL3HV7R7Qa$kiQvcIi4?yAe@&$vr9^a>gv_56
zTeSG07MmF9|6)G^Q&#}`NMn_Um~~0isUI6)0h8ZU;`<j0EYf?}{fjie-~)Umx_=Y_
zKlPr-{*irE+JSZ}k^MWh<8A|NVjB#}q!QgfRiJN`a+Qi=|5Vik6XO<RZ*jH-y0H;!
zj8v9{QmRU^$ItwYtwJStn<sLQ4#vi8rQ$q4pz4DuP4E66&u;`@z;%NUZsWkLMOl;D
zxEOT{5#z9HZFpGoA!Ge_y-h5M<fV(YdXNenrvcB;9H$c3Ts_#rHA@d8aK()N0LoeP
zZsF;C>^Lf>f{vqND)`@P9?$9TK1fc;<nrvgX7Q{eg!f8zQKl@Eg|U-Mz6+0i&LdxO
zd*8>tCyQ6!+t!2dtUtke$_><;tw&q0@ECem?{wl!rS3|>b6OetkXT}@W?k_+rGrYh
zl>Vi}m<VxC9%VC>;6*0c#P>*l+@N$%>EBBFmQe{Fc#%OC9f_nmD)f~S=dohhj8vYl
zv6`=x&=pVWsLX#+q8mig9W$TUxvt*}bzk7L-lNk`>Y+?Gm163T#zTyXvm=~)sb0N0
zaaweuJ6Zx`(zaEHG-%L3KK=Al6T>DZPhLQGq<Wx@P6zlbe?nK{MB~PdlkwxnOWU?>
zy?Yqg@b-sP&7-d+WX~-}jDPy{>9TCuG9i8(A^wLgY}(XWZ-_f3WuJ2&?4j-5yH}Ph
zSrTpU9$VNX@qMmWifEgC6yB+S|Ng&-_q*kY6P-PKR*oJ$D&4wui>NOkgH3F=P`Ve$
z3oFArk%&op&JP9oiCbR3eqHX}yJupw-hGKM`tJs8Gp0rz*J9ak*s!6TKY!j}B<@Qe
z2xHHihfO=4d&@$equD1uh)vR!D_5jhvt}W(F>o+n#QfeP*=Ky4KYza26Uxue7xt`(
zwGs1UFEoa2%CXJd6_q!V{lS9=%abQh<maD%Hs_oe^J>(nAuU?8F#8U%^agA*f5vUU
zO`A5Rzftd-H*XGp=j=}sgJvHomR>El^LJEU_xn@7oB=$3{5YoN^y$-PoVT`!UrwAj
z(d>cRyeL=eJNUAXP0n?!TD8j9&dbY_&Ye4l$oA~n)9gP*+v9QJq3wP5KkQGLGDTj#
zd};PI#*Q5uVjI0fh76HSn>LxVdoDY_;0u&tn{OaexyiTnfB*h{;fw|QLCcpf4;xpW
zFkyme8_o^J(yQeMlzfjrrqcE2$dM!Fd_g$<vu4dQXQ0?S3s>&SWBkEa^gaG!|Jt={
z=KFH#39++i(IT_Yx^(H%ko++GcKr1<|Ih~0rcI04uj!BQ`Z)V#=O2Y;=E9`s-!ShO
zsSe!pFZPSf|L}>y>wkcu$o#Ju7{d8q*e4a4|Eapd)ji*PB>xlpq$2UZRgc#`wqyC<
z*e8K8>Gg-|00V0nbj5maWeG|22l`3AlJ{NwJ|l|`ufMHXz7k^tYsg<?{pki6&-$D3
zyt$IE^|w5$B$AaP+DMBu_V96mMq3Ci<Y|;5SN&rsOG5~joEXXSam@|L=cz7qq8l67
z!X~zfQxKNOR0_r^Vk6fGiqltVuhQR@m`fn;$)gOOaH*DNW-C2a3fqs=uY9WOrfl_f
z;B_aSk0^zeBOf0Sf1GnjdJnJFQAY2v8&Q_BR;^mem@#9Fj}_oW23g+epMgB{Uw{uk
z{E+{W1oh$jarV`-_CW^OZ>%g=)+?N8;M_9LtdS2KI3UcQZk+)cWFG|X4L^R?nKNgM
zJp7#1#y{fx7<J(04am|y!F;zoYh}(9u~z2nA7>Zcyn1ijH<*t+zGuIF{p8Z6OUCbF
zJuqm{AfqFUd<gy?J$lH^n>USJ))2_z+s>OeFWelDY)Ji4$N2uccI^tDkzj4ezJD0s
z6WNgVqu%*n4eJGq6%4dL{<Y21t8G7D{l_I|b=dx+MW!!C?Y|y*cmGA66!ZI09=<K?
o+P<&1At_y-s1M)YZ$Sgc$y2FZ9g(wA-cg7~*MlvG7a3&#0|$9^=Kufz

literal 0
HcmV?d00001

diff --git a/page.tsx b/page.tsx
new file mode 100644
index 0000000..41261d7
--- /dev/null
+++ b/page.tsx
@@ -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>
+  );
+}