Revisi about, footer, hero

src/components/Footer.jsx

@@ -8,10 +8,10 @@ export default function Footer({ footerRef }) {
       ref={footerRef}  
       className="bg-[#5C739B] text-white py-10 px-6">
         
-      <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-8">
+      <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-12 gap-8">
 
         {/* Logo + Deskripsi */}
-        <div>
+        <div className="md:col-span-4">
           <img src="/WTell.png" alt="Walanja Logo" className="w-32 mb-4" />
           <p className="text-sm leading-relaxed">
             PT. Jaringan Citra Mandiri adalah Perusahaan Swasta yang bergerak di bidang Penyedia
@@ -19,9 +19,30 @@ export default function Footer({ footerRef }) {
           </p>
         </div>
 
-        {/* Explore */}
+        {/* Alamat */}
-        <div>
+        <div className="md:col-span-4">
           <h3 className="font-bold text-lg mb-4 relative inline-block">
+            Alamat
+          </h3>
+          <p className="text-sm leading-relaxed">
+            Kantor Administrasi:
+            <br />
+           Jl. Paledang No. 236, Kec. Campaka, Kel. Andir Bandung 40184
+
+          </p>
+          <br />
+           <p className="text-sm leading-relaxed">
+            Kantor Teknis:
+            <br />
+            Parahyangan Business Park, The Suites Blok E5-E7
+            Jl. Soekarno Hatta No. 693, Bandung,
+            Jawa Barat 40286, Indonesia
+          </p>
+        </div>
+
+        {/* Explore */}
+        <div className="md:col-span-2">
+          <h3 className="font-bold text-lg mb-2 relative inline-block">
             Explore
           </h3>
           <ul className="space-y-3 text-sm">
@@ -44,29 +65,10 @@ export default function Footer({ footerRef }) {
           </ul>
         </div>
 
-        {/* Newsletter */}
+        
-        <div>
-          <h3 className="font-bold text-lg mb-4 relative inline-block">
-            Newsletter
-          </h3>
-          <p className="text-sm mb-3">
-            Subscribe untuk mendapatkan berita terbaru
-          </p>
-          <div className="flex flex-col sm:flex-row gap-2">
-            <input
-              type="email"
-              placeholder="Masukkan Email"
-              className="px-3 py-2 rounded-md border border-gray-300 text-black text-sm focus:outline-none"
-            />
-            <button className="px-4 py-2 bg-gradient-to-r from-green-400 to-blue-400 text-white rounded-md text-sm hover:opacity-90">
-              Subscribe
-            </button>
-          </div>
-        </div>
-
         {/* Kontak Kami */}
-        <div>
+        <div className="md:col-span-2">
-          <h3 className="font-bold text-lg mb-4 relative inline-block">
+          <h3 className="font-bold text-lg mb-2 relative inline-block">
             Kontak Kami
           </h3>
           <ul className="space-y-2 text-sm">

src/pages/About.jsx

@@ -1,5 +1,7 @@
+"use client"; // kalau pakai Next.js, taruh di baris paling atas
+
 import Navbar from "../components/Navbar";
-import Footer from "../components/Footer";
+import Footer from "../components/Footer"; // <- tambahkan ini
 import { motion } from "framer-motion";
 import { CheckCircle } from "lucide-react";
 
@@ -13,43 +15,51 @@ export default function About() {
       <section className="py-20 bg-gray-50 min-h-screen">
         <div className="max-w-6xl mx-auto px-6 lg:px-20">
           {/* Logo & Deskripsi */}
-          <motion.section className="text-center"
+          <motion.section
+            className="grid grid-cols-1 md:grid-cols-2 items-center gap-10"
             initial={{ opacity: 0, y: 40 }}
             whileInView={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.7 }}
             viewport={{ once: true }}
-          >
+            >
-            <img
+            {/* Logo di kiri */}
-              src="/WTell.png"
+            <div className="flex justify-center md:justify-start">
-              alt="Logo Walanja"
+              <img
-              className="mx-auto w-32 mb-6"
+                src="/WTell_logo.png"
-            />
+                alt="Logo Walanja"
-            <p className="text-gray-700 max-w-3xl mx-auto leading-relaxed">
+                className="w-45 md:w-45"
-              <span className="font-semibold">PT. Jaringan Citra Mandiri</span>{" "}
+              />
-              adalah Perusahaan Swasta yang bergerak di bidang Penyedia Layanan
+            </div>
-              Teknologi Telekomunikasi Berbasis Fiber Optic.
-            </p>
-            <p className="mt-4 text-gray-700 max-w-3xl mx-auto leading-relaxed">
-              Berdiri sejak tahun 2018,{" "}
-              <span className="font-semibold text-blue-700">WTELL</span>{" "}
-              berkomitmen menjadi{" "}
-              <span className="font-bold">
-                Penyedia Layanan Teknologi Telekomunikasi Berbasis Fiber Optic
-                yang Handal dan Profesional.
-              </span>
-            </p>
-          </motion.section>
 
+            {/* Deskripsi di kanan */}
+            <div>
+              <p className="text-gray-700 leading-relaxed mb-4">
+                <span className="font-semibold">PT. Jaringan Citra Mandiri</span>{" "}
+                adalah Perusahaan Swasta yang bergerak di bidang Penyedia Layanan
+                Teknologi Telekomunikasi Berbasis Fiber Optic.
+              </p>
+              <p className="text-gray-700 leading-relaxed">
+                Berdiri sejak tahun 2018,{" "}
+                <span className="font-semibold text-blue-700">WTELL</span>{" "}
+                berkomitmen menjadi{" "}
+                <span className="font-bold">
+                  Penyedia Layanan Teknologi Telekomunikasi Berbasis Fiber Optic
+                  yang Handal dan Profesional.
+                </span>
+              </p>
+            </div>
+          </motion.section>
           {/* Visi & Misi */}
           <div className="grid grid-cols-1 md:grid-cols-2 gap-10 mt-16">
             {/* Visi */}
-            <motion.section className="bg-white shadow-lg rounded-2xl p-8"
+            <motion.section
+              className="bg-white shadow-lg rounded-2xl p-8"
+              whileHover={{ scale: 1.05 }}
               initial={{ opacity: 0, x: -50 }}
               whileInView={{ opacity: 1, x: 0 }}
               transition={{ duration: 0.7 }}
               viewport={{ once: true }}
             >
-
               <h3 className="text-2xl font-bold text-center mb-6">VISI</h3>
               <p className="text-gray-700 text-center leading-relaxed">
                 Menjadi Penyedia Jaringan Kabel Serat Optik Terbaik yang
@@ -58,7 +68,9 @@ export default function About() {
             </motion.section>
 
             {/* Misi */}
-            <motion.section className="bg-white shadow-lg rounded-2xl p-8"
+            <motion.section
+              className="bg-white shadow-lg rounded-2xl p-8"
+              whileHover={{ scale: 1.05 }}
               initial={{ opacity: 0, x: 50 }}
               whileInView={{ opacity: 1, x: 0 }}
               transition={{ duration: 0.7 }}
@@ -86,7 +98,7 @@ export default function About() {
           </div>
         </div>
       </section>
-      
+
       {/* Footer */}
       <Footer />
     </div>

src/pages/Home.jsx

@@ -34,13 +34,12 @@ export default function Home() {
         <div className="absolute inset-0 bg-black/50"></div>
 
         <div className="relative z-10 flex flex-col justify-center h-full px-6 lg:px-20 text-white max-w-3xl">
-          <p className="text-lg">Mari menjadi bagian dari kami</p>
+          <header className="text-4xl md:text-6xl font-bold leading-tight mt-2">
-          <h1 className="text-4xl md:text-6xl font-bold leading-tight mt-2">
             WALANJA <br /> TELEKOMUNIKASI
+          </header>
+          <h1 className="mt-4 text-2xl md:text-3xl">
+            Always Connected
           </h1>
-          <p className="mt-4 text-lg">
-            Bergabung bersama kami untuk mewujudkan Indonesia Emas 2045
-          </p>
         </div>
       </section>
 
@@ -134,7 +133,7 @@ export default function Home() {
           {/* Title */}
           <div className="text-center mb-12">
             <h2 className="text-3xl md:text-4xl font-bold flex items-center justify-center gap-2 text-blue-900">
-              <MapPin className="w-8 h-8 text-blue-600" />
+             
               Cakupan Area
             </h2>
             <p className="mt-3 text-gray-600 max-w-2xl mx-auto">
@@ -146,38 +145,38 @@ export default function Home() {
           </div>
 
           {/* Content */}
-          <div className="max-w-6xl mx-auto flex flex-col md:flex-row items-center gap-12 px-6">
+          <div className="max-w-6xl mx-auto flex flex-col md:flex-row items-stretch gap-12 px-6">
-            {/* Map with hover animation */}
+          {/* Map */}
-            <motion.div
+          <motion.div
-              whileHover={{ scale: 1.05 }}
+            whileHover={{ scale: 1.05 }}
-              className="flex-1 flex justify-center"
+            className="flex-1 flex justify-center"
-            >
+          >
-              <img
+            <img
-                src="/map-bandung.jpg"
+              src="/map-bandung.jpg"
-                alt="Map Bandung"
+              alt="Map Bandung"
-                className="w-full max-w-md rounded-2xl shadow-xl border-4 border-blue-100"
+              className="w-full max-w-md rounded-2xl shadow-xl border-4 border-blue-100 object-cover"
-              />
+            />
-            </motion.div>
+          </motion.div>
 
-            {/* List Area */}
+          {/* List Area */}
-            <div className="flex-1 bg-white/70 p-6 rounded-2xl shadow-lg">
+          <div className="flex-1 bg-white/70 p-12 rounded-2xl shadow-lg flex flex-col justify-center">
-              <h3 className="text-xl font-semibold mb-4 text-blue-600">
+            <h2 className="text-2xl text-center font-semibold mb-6 text-blue-600">
-                Fokus Layanan
+              Fokus Layanan
-              </h3>
+            </h2>
-              <ul className="space-y-3 text-gray-700">
+            <ul className="space-y-3 text-gray-700">
-                <li>📍 Bandung Kota</li>
+              <li>📍 Bandung Kota</li>
-                <li>📍 Cimahi</li>
+              <li>📍 Cimahi</li>
-                <li>📍 Cileunyi</li>
+              <li>📍 Cileunyi</li>
-                <li>📍 Ngamprah</li>
+              <li>📍 Ngamprah</li>
-                <li>📍 Desa 3T sekitar Bandung</li>
+              <li>📍 Desa 3T sekitar Bandung</li>
-              </ul>
+            </ul>
-            </div>
           </div>
         </div>
-      </section>
 
-      {/* Footer */}
+        </div>
-      <Footer footerRef={footerRef} />
+      </section>
-    </div>
+            {/* Footer */}
+            <Footer footerRef={footerRef} />
+          </div>
   );
 }