Merge version_4 into main

Merge version_4 into main

src/app/page.tsx

@@ -41,26 +41,33 @@ export default function LandingPage() {
   </div>
 
   <div id="hero" data-section="hero" className="relative">
-      <HeroCentered
-      title="Linktown International: Your Global Property Partner"
-      description="Wujudkan aset global keluarga dengan legalitas terjamin untuk WNI. Cari properti impian Anda di Malaysia sekarang."
-      background={{ variant: "plain" }}
-      avatars={[]}
-      className="min-h-[60vh] flex items-center"
-    />
-    <div className="absolute -bottom-16 left-1/2 -translate-x-1/2 w-full max-w-4xl px-4 z-20">
-      <div className="bg-white p-6 rounded-2xl shadow-xl border border-gray-100 flex flex-col gap-4">
-        <div className="flex gap-2 border-b border-gray-100 pb-4">
-          <button className="px-6 py-2 bg-blue-900 text-white rounded-full font-medium">Jual</button>
-          <button className="px-6 py-2 text-gray-600 font-medium hover:text-blue-900">Sewa</button>
+      <div className="relative min-h-[85vh] flex items-center justify-center">
+        <div className="absolute inset-0">
+            <img src="https://img.b2bpic.net/free-photo/luxury-penthouse-view-kuala-lumpur-dusk_1268-24531.jpg" alt="Kuala Lumpur Penthouse" className="w-full h-full object-cover" />
+            <div className="absolute inset-0 bg-black/60"></div>
         </div>
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-            <input type="text" placeholder="Lokasi Properti" className="p-3 border rounded-lg bg-gray-50" />
-            <input type="text" placeholder="Tipe Properti" className="p-3 border rounded-lg bg-gray-50" />
-            <button className="p-3 bg-blue-900 text-white rounded-lg font-semibold hover:bg-blue-800 transition">Cari Properti</button>
+        <div className="relative z-10 w-full max-w-4xl px-4 text-center text-white">
+            <p className="text-sm font-bold uppercase tracking-widest mb-4 opacity-90">PELUANG INVESTASI PREMIUM</p>
+            <h1 className="text-5xl md:text-7xl font-bold mb-6">Investasi Properti di MALAYSIA.</h1>
+            <p className="text-lg md:text-xl opacity-90 mb-12">Wujudkan aset global keluarga dengan legalitas terjamin untuk WNI.</p>
+            
+            <div className="bg-white p-6 rounded-2xl shadow-xl flex flex-col gap-4 text-left">
+              <div className="flex gap-2 border-b border-gray-100 pb-4">
+                <button className="px-6 py-2 bg-blue-900 text-white rounded-full font-medium">Jual</button>
+                <button className="px-6 py-2 text-gray-600 font-medium hover:text-blue-900">Sewa</button>
+              </div>
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                  <select className="p-3 border rounded-lg bg-gray-50 text-gray-700">
+                      <option>Tipe Properti</option>
+                      <option>Apartemen</option>
+                      <option>Kondominium</option>
+                  </select>
+                  <input type="text" placeholder="Lokasi / Proyek" className="p-3 border rounded-lg bg-gray-50 text-gray-700" />
+                  <button className="p-3 bg-blue-900 text-white rounded-lg font-semibold hover:bg-blue-800 transition">Cari Properti</button>
+              </div>
+            </div>
         </div>
       </div>
-    </div>
   </div>
 
   <div id="properti" data-section="properti" className="pt-24">