perubahan UI web + fix menu navigasi di page coba gratis

resources/css/app.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

resources/js/App.jsx

@@ -0,0 +1,612 @@
+import React, { useState, useEffect } from 'react';
+import { 
+  Menu, X, ChevronRight, CheckCircle, 
+  BarChart3, Box, CreditCard, Smartphone, 
+  Store, Coffee, Scissors, ShoppingBag, Star,
+  MonitorSmartphone, Printer, ShieldCheck, Wrench, Sparkles,
+  Laptop, Tablet, ArrowRight, Bot, PieChart, TrendingUp, BrainCircuit,
+  Package, FileText, ShoppingCart, Warehouse, Users, GitMerge, ArrowLeft,
+  Utensils, Zap, Clock, UserCheck, CalendarDays, History
+} from 'lucide-react';
+
+export default function App() {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [activeIndustryTab, setActiveIndustryTab] = useState('fnb');
+  const [currentPage, setCurrentPage] = useState('home'); // 'home' or 'industry-detail'
+
+  // Scroll to top when changing page
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [currentPage, activeIndustryTab]);
+
+  const industries = [
+    {
+      id: 'fnb',
+      title: 'Food & Beverages',
+      headline: 'Solusi Kasir Terpadu untuk Bisnis Kuliner Modern',
+      description: 'Dari coffee shop mandiri hingga jaringan restoran berskala nasional, Kulakpos.id menyediakan fitur manajemen meja, dapur, dan stok bahan baku yang presisi.',
+      icon: <Coffee className="w-5 h-5" />,
+      image: 'https://images.unsplash.com/photo-1554118811-1e0d58224f24?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80',
+      items: ['Quick Services', 'Resto Full Service', 'Fast Casual FnB', 'Coffee Shops', 'Cloud Kitchen', 'Foodcourt', 'Lounge & Bar'],
+      features: [
+        { icon: <Utensils />, name: "Manajemen Meja", detail: "Atur layout meja secara visual dan pantau status pesanan tiap pelanggan." },
+        { icon: <Zap />, name: "Kitchen Display System", desc: "Kirim pesanan kasir langsung ke layar dapur untuk efisiensi maksimal." },
+        { icon: <Clock />, name: "Split & Merge Bill", desc: "Fleksibilitas pembayaran untuk pelanggan rombongan atau pisah pesanan." }
+      ]
+    },
+    {
+      id: 'retail',
+      title: 'Toko Retail',
+      headline: 'Kelola Ribuan SKU dengan Inventori Terotomatisasi',
+      description: 'Sistem retail kami dirancang untuk menangani pergerakan stok yang cepat, barcode scanning, dan sinkronisasi harga antar cabang secara real-time.',
+      icon: <ShoppingBag className="w-5 h-5" />,
+      image: 'https://images.unsplash.com/photo-1441986300917-64674bd600d8?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80',
+      items: ['Clothing & Accessories', 'Toko Elektronik', 'Grosir & Minimarket', 'Toko Online', 'Gadget & Accessories', 'Toko Bangunan', 'Furniture', 'Apotek', 'Distributor'],
+      features: [
+        { icon: <Package />, name: "Multi-UOM & SKU", detail: "Jual dalam satuan pcs, lusin, atau karton dengan satu kode barang yang sama." },
+        { icon: <TrendingUp />, name: "Grosir & Tier Pricing", desc: "Atur harga otomatis berdasarkan jumlah pembelian pelanggan." },
+        { icon: <GitMerge />, name: "Stock Opname Digital", desc: "Lakukan audit stok tanpa harus menutup toko menggunakan scan smartphone." }
+      ]
+    },
+    {
+      id: 'beauty',
+      title: 'Beauty',
+      headline: 'Tingkatkan Pengalaman Pelanggan Salon & Klinik',
+      description: 'Kelola jadwal janji temu (appointment), komisi staf beauty therapist, hingga riwayat perawatan pelanggan dalam satu aplikasi.',
+      icon: <Sparkles className="w-5 h-5" />,
+      image: 'https://images.unsplash.com/photo-1560750588-73207b1ef5b8?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80',
+      items: ['Salon Kecantikan', 'Barbershop', 'Klinik & Kesehatan', 'Day Spa', 'Pet Shops'],
+      features: [
+        { icon: <CalendarDays />, name: "Booking Online", detail: "Pelanggan bisa pesan jadwal lewat website tanpa perlu telepon manual." },
+        { icon: <UserCheck />, name: "Komisi Staf", desc: "Hitung otomatis bagi hasil untuk tiap terapis berdasarkan layanan yang diberikan." },
+        { icon: <History />, name: "Customer Records", desc: "Simpan riwayat treatment dan preferensi produk favorit pelanggan." }
+      ]
+    },
+    {
+      id: 'jasa',
+      title: 'Jasa',
+      headline: 'Efisiensi Operasional untuk Bisnis Berbasis Layanan',
+      description: 'Lacak status pengerjaan jasa, manajemen antrean, hingga laporan produktivitas karyawan secara mendalam.',
+      icon: <Wrench className="w-5 h-5" />,
+      image: 'https://images.unsplash.com/photo-1521671757615-16782a1705e4?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80',
+      items: ['Laundry', 'Car Wash', 'Reparasi', 'Bengkel', 'Jasa Profesional', 'Sport & Fitness', 'Penginapan', 'Parkir', 'Daycare'],
+      features: [
+        { icon: <Clock />, name: "Tracker Pengerjaan", detail: "Update status layanan dari 'Proses' hingga 'Selesai' dan kirim notifikasi ke pelanggan." },
+        { icon: <ShieldCheck />, name: "Manajemen Garansi", desc: "Cetak kartu garansi digital dan lacak klaim perbaikan dengan mudah." },
+        { icon: <Smartphone />, name: "Mobile Workforce", desc: "Karyawan lapangan dapat update pekerjaan langsung dari smartphone mereka." }
+      ]
+    }
+  ];
+
+  const activeIndustry = industries.find(i => i.id === activeIndustryTab);
+
+  const renderNavbar = () => (
+    <nav className="fixed top-0 w-full bg-white/95 backdrop-blur-md z-50 border-b border-slate-200 transition-all shadow-sm">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex justify-between items-center h-20">
+          <div className="flex-shrink-0 flex items-center gap-2 cursor-pointer" onClick={() => setCurrentPage('home')}>
+            <div className="w-10 h-10 bg-teal-600 rounded-lg flex items-center justify-center shadow-md">
+              <Store className="text-white w-6 h-6" />
+            </div>
+            <span className="font-extrabold text-2xl text-slate-900 tracking-tight hidden sm:block">
+              Kulak<span className="text-teal-600">pos</span>
+            </span>
+          </div>
+
+          <div className="hidden md:flex space-x-8 items-center">
+            <a href="#fitur" onClick={(e) => { e.preventDefault(); setCurrentPage('home'); setTimeout(() => document.getElementById('fitur')?.scrollIntoView({behavior: 'smooth'}), 100); }} className="text-slate-600 hover:text-teal-600 font-semibold transition-colors text-sm">Fitur POS</a>
+            <a href="#ai" onClick={(e) => { e.preventDefault(); setCurrentPage('home'); setTimeout(() => document.getElementById('ai')?.scrollIntoView({behavior: 'smooth'}), 100); }} className="text-teal-600 hover:text-teal-700 font-bold transition-colors text-sm flex items-center gap-1.5 bg-teal-50 px-3 py-1.5 rounded-full border border-teal-100">
+              <Bot className="w-4 h-4" /> AI Assistance
+            </a>
+            <a href="#perangkat" onClick={(e) => { e.preventDefault(); setCurrentPage('home'); setTimeout(() => document.getElementById('perangkat')?.scrollIntoView({behavior: 'smooth'}), 100); }} className="text-slate-600 hover:text-teal-600 font-semibold transition-colors text-sm">Perangkat</a>
+            <a href="#solusi" onClick={(e) => { e.preventDefault(); setCurrentPage('home'); setTimeout(() => document.getElementById('solusi')?.scrollIntoView({behavior: 'smooth'}), 100); }} className="text-slate-600 hover:text-teal-600 font-semibold transition-colors text-sm">Solusi Industri</a>
+            <a href="#harga" onClick={(e) => { e.preventDefault(); setCurrentPage('home'); setTimeout(() => document.getElementById('harga')?.scrollIntoView({behavior: 'smooth'}), 100); }} className="text-slate-600 hover:text-teal-600 font-semibold transition-colors text-sm">Harga</a>
+          </div>
+
+          <div className="hidden md:flex items-center space-x-4">
+            <a href="/login" className="text-slate-600 font-semibold hover:text-red-600 transition-colors text-sm">Masuk</a>
+            <a href="/plans" className="bg-teal-600 hover:bg-teal-700 text-white px-5 py-2.5 rounded-lg font-semibold transition-all shadow-md text-sm flex items-center gap-2">
+              Coba Gratis <ArrowRight className="w-4 h-4" />
+            </a>
+          </div>
+
+          <div className="md:hidden flex items-center">
+            <button onClick={() => setIsMenuOpen(!isMenuOpen)} className="text-slate-600 hover:text-teal-600 focus:outline-none">
+              {isMenuOpen ? <X className="h-7 w-7" /> : <Menu className="h-7 w-7" />}
+            </button>
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+
+  const renderFooter = () => (
+    <footer className="bg-white text-slate-600 py-16 border-t border-slate-200">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-12 lg:gap-8 mb-12">
+          <div className="lg:col-span-2">
+            <div className="flex items-center gap-2 mb-6 cursor-pointer" onClick={() => setCurrentPage('home')}>
+              <div className="w-10 h-10 bg-teal-600 rounded-lg flex items-center justify-center shadow-md">
+                <Store className="text-white w-6 h-6" />
+              </div>
+              <span className="font-extrabold text-2xl text-slate-900 tracking-tight">
+                Kulak<span className="text-teal-600">pos</span>
+              </span>
+            </div>
+            <p className="text-sm mb-6 max-w-sm leading-relaxed text-slate-500 font-medium">
+              Penyedia layanan perangkat lunak kasir (SaaS POS) terkemuka di Indonesia. Misi kami adalah memberdayakan UMKM untuk naik kelas melalui teknologi kasir yang cerdas dan mudah.
+            </p>
+          </div>
+          <div>
+            <h4 className="text-slate-900 font-extrabold mb-6 text-sm uppercase tracking-widest">Produk</h4>
+            <ul className="space-y-3 text-sm font-medium">
+              <li><a href="#" className="hover:text-teal-600 transition-colors">Aplikasi Kasir POS</a></li>
+              <li><a href="#" className="hover:text-teal-600 transition-colors">AI Assistance</a></li>
+              <li><a href="#" className="hover:text-teal-600 transition-colors">Manajemen Inventori</a></li>
+            </ul>
+          </div>
+          <div>
+            <h4 className="text-slate-900 font-extrabold mb-6 text-sm uppercase tracking-widest">Industri</h4>
+            <ul className="space-y-3 text-sm font-medium">
+              {industries.map(ind => (
+                <li key={ind.id}><button onClick={() => { setActiveIndustryTab(ind.id); setCurrentPage('industry-detail'); }} className="hover:text-teal-600 transition-colors text-left">{ind.title}</button></li>
+              ))}
+            </ul>
+          </div>
+          <div>
+            <h4 className="text-slate-900 font-extrabold mb-6 text-sm uppercase tracking-widest">Bantuan</h4>
+            <ul className="space-y-3 text-sm font-medium">
+              <li><a href="#" className="hover:text-teal-600 transition-colors">FAQ</a></li>
+              <li><a href="#" className="hover:text-teal-600 transition-colors">Kebijakan Privasi</a></li>
+              <li><a href="#" className="hover:text-teal-600 transition-colors">Hubungi Kami</a></li>
+            </ul>
+          </div>
+        </div>
+        <div className="pt-8 border-t border-slate-200 flex flex-col md:flex-row justify-between items-center gap-4 text-xs font-medium text-slate-500">
+          <p>© {new Date().getFullYear()} PT Sada Teknologi Indonesia. All rights reserved.</p>
+          <div className="flex gap-4">
+            <a href="#" className="hover:text-teal-600">Google Play</a>
+            <a href="#" className="hover:text-teal-600">App Store</a>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+
+  const renderHomePage = () => (
+    <>
+      {/* HERO SECTION */}
+      <section className="pt-32 pb-20 lg:pt-40 lg:pb-24 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto relative overflow-hidden">
+        <div className="absolute top-0 right-0 -translate-y-12 translate-x-1/3 w-96 h-96 bg-teal-50 rounded-full blur-3xl opacity-50 z-0"></div>
+        <div className="absolute top-40 left-0 -translate-x-1/2 w-64 h-64 bg-red-50 rounded-full blur-3xl opacity-50 z-0"></div>
+
+        <div className="text-center max-w-4xl mx-auto relative z-10">
+          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-red-50 text-red-600 font-bold text-xs md:text-sm mb-6 border border-red-100 shadow-sm">
+            <Sparkles className="w-4 h-4" />
+            Mitra Digital #1 untuk UMKM Naik Kelas
+          </div>
+          <h1 className="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-slate-900 leading-[1.15] mb-6 tracking-tight">
+            Sistem Kasir Pintar dengan <br className="hidden md:block" />
+            Teknologi <span className="text-teal-600">AI Assistance</span>
+          </h1>
+          <p className="text-lg sm:text-xl text-slate-600 mb-10 max-w-2xl mx-auto leading-relaxed">
+            Tinggalkan cara manual. Kendalikan penjualan, pantau stok bahan baku, hingga analisis laba rugi secara real-time dari satu dashboard profesional Kulakpos.id.
+          </p>
+          <div className="flex flex-col sm:flex-row items-center gap-4 justify-center">
+            <a href="/plans" className="w-full sm:w-auto bg-teal-600 hover:bg-teal-700 text-white px-8 py-4 rounded-lg text-base font-bold transition-all shadow-lg shadow-teal-600/20 flex items-center justify-center gap-2 group decoration-transparent">
+              Coba Gratis Sekarang <ChevronRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
+            </a>
+            <button className="w-full sm:w-auto bg-white border-2 border-slate-200 hover:border-red-600 hover:text-red-600 text-slate-700 px-8 py-4 rounded-lg text-base font-bold transition-all">
+              Jadwalkan Demo
+            </button>
+          </div>
+        </div>
+
+        <div className="mt-16 relative mx-auto max-w-5xl z-10 px-4 sm:px-0">
+          <div className="relative rounded-3xl p-2 md:p-3 bg-white/50 backdrop-blur-md border border-slate-200 shadow-2xl">
+            <img 
+              src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80" 
+              alt="" 
+              className="rounded-2xl w-full object-cover shadow-sm h-[350px] md:h-[550px]"
+            />
+            
+            {/* AI Insight Badge */}
+            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white/90 backdrop-blur-md p-6 rounded-2xl shadow-2xl border border-teal-200 flex flex-col gap-4 max-w-xs animate-pulse z-30">
+              <div className="flex items-center gap-3">
+                <div className="w-10 h-10 bg-teal-600 rounded-lg flex items-center justify-center shadow-md">
+                  <Bot className="text-white w-6 h-6" />
+                </div>
+                <div><h4 className="font-bold text-slate-900 text-sm">Saran AI Hari Ini</h4></div>
+              </div>
+              <p className="text-xs text-slate-600 leading-relaxed font-medium italic">"Omset Anda naik 15% dibanding hari Senin lalu. Stok Gula menipis, disarankan restock 20 unit sekarang."</p>
+            </div>
+
+            {/* Sales/Omset Floating Badge */}
+            <div className="absolute bottom-4 sm:bottom-8 left-2 sm:left-6 bg-white p-3 sm:p-4 rounded-xl shadow-xl border border-slate-100 z-20 flex items-center gap-3 sm:gap-4 animate-bounce" style={{ animationDuration: '3s' }}>
+              <div className="w-10 h-10 sm:w-12 sm:h-12 bg-teal-100 rounded-full flex items-center justify-center flex-shrink-0">
+                <BarChart3 className="w-5 h-5 sm:w-6 sm:h-6 text-teal-600" />
+              </div>
+              <div>
+                <p className="text-[10px] sm:text-xs text-slate-500 font-bold uppercase tracking-wider">Pendapatan Hari Ini</p>
+                <p className="text-base sm:text-lg font-black text-slate-900">+ Rp 4.500.000</p>
+              </div>
+            </div>
+
+            {/* Inventory Floating Badge */}
+            <div className="absolute top-8 sm:top-12 right-2 sm:right-6 bg-white p-3 sm:p-4 rounded-xl shadow-xl border border-slate-100 z-20 flex items-center gap-3 sm:gap-4 animate-bounce" style={{ animationDuration: '4s', animationDelay: '1s' }}>
+              <div className="w-10 h-10 sm:w-12 sm:h-12 bg-red-100 rounded-full flex items-center justify-center flex-shrink-0">
+                <Box className="w-5 h-5 sm:w-6 sm:h-6 text-red-600" />
+              </div>
+              <div>
+                <p className="text-[10px] sm:text-xs text-slate-500 font-bold uppercase tracking-wider">Update Stok Pusat</p>
+                <p className="text-sm sm:text-base font-black text-slate-900">Tersinkronisasi</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* AI SPOTLIGHT */}
+      <section id="ai" className="py-24 bg-teal-900 relative overflow-hidden">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+          <div className="grid lg:grid-cols-2 gap-16 items-center">
+            <div className="text-white">
+              <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-red-500/20 text-red-400 font-bold text-xs mb-6 border border-red-500/30">
+                <BrainCircuit className="w-4 h-4" /> Teknologi AI
+              </div>
+              <h2 className="text-3xl md:text-5xl font-black mb-8 leading-tight text-teal-400">Asisten Cerdas Business Owner</h2>
+              <p className="text-teal-100 text-lg mb-10 leading-relaxed">Lupakan ribetnya membaca tabel laporan manual. AI Kulakpos melakukan analisis mendalam untuk Anda secara otomatis.</p>
+              <div className="space-y-6">
+                {["Analisis Omset & Revenue", "Laporan Laba Rugi (P&L)", "Prediksi Inventori Otomatis"].map((title, idx) => (
+                  <div key={idx} className="flex gap-4"><CheckCircle className="w-6 h-6 text-teal-400" /> <span className="font-bold text-lg">{title}</span></div>
+                ))}
+              </div>
+            </div>
+            <div className="bg-white/10 backdrop-blur-xl rounded-3xl p-8 border border-white/20 shadow-2xl text-white">
+              <div className="flex justify-between mb-8"><span className="font-bold">AI Dashboard</span><Bot className="w-6 h-6" /></div>
+              <div className="p-4 bg-teal-800/40 rounded-xl mb-4 border border-teal-700">
+                <span className="text-xs font-bold text-teal-300">ESTIMASI PROFIT</span>
+                <div className="text-2xl font-black">Rp 24.500.000</div>
+              </div>
+              <div className="p-4 bg-white/5 rounded-xl border border-white/10">
+                <div className="h-2 bg-white/10 rounded-full flex overflow-hidden">
+                  <div className="bg-teal-500 w-[60%]"></div><div className="bg-red-500 w-[25%]"></div>
+                </div>
+                <div className="flex justify-between mt-3 text-xs font-bold"><span>FnB 60%</span><span>Retail 25%</span></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* FITUR POS SECTION */}
+      <section id="fitur" className="py-24 bg-white border-b border-slate-100">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center max-w-3xl mx-auto mb-16">
+            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-red-50 text-red-600 font-bold text-xs mb-6 border border-red-100 shadow-sm">
+              <Star className="w-4 h-4" /> Modul Terintegrasi
+            </div>
+            <h2 className="text-3xl font-extrabold text-slate-900 mb-4 tracking-tight">Ekosistem Fitur Terlengkap</h2>
+            <p className="text-slate-600 text-lg">Semua modul operasional yang Anda butuhkan untuk memantau dan mengembangkan bisnis dalam satu aplikasi cerdas.</p>
+          </div>
+
+          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+            {[
+              { icon: <MonitorSmartphone className="w-6 h-6" />, title: "Sales Management", desc: "Kelola transaksi kasir, pencatatan pesanan, dan riwayat penjualan dengan cepat." },
+              { icon: <ShoppingCart className="w-6 h-6" />, title: "Purchase Management", desc: "Pantau PO (Purchase Order) dan pembelian stok barang ke supplier." },
+              { icon: <GitMerge className="w-6 h-6" />, title: "3rd Party Management", desc: "Integrasi sistem dengan layanan pihak ketiga, payment gateway, dan kurir." },
+              { icon: <TrendingUp className="w-6 h-6" />, title: "Pricing Management", desc: "Atur harga dinamis, harga grosir, diskon, dan tier pricing dengan mudah." },
+              { icon: <Package className="w-6 h-6" />, title: "Inventory Management", desc: "Pantau pergerakan barang, stok opname, dan resep bahan baku (BOM)." },
+              { icon: <Warehouse className="w-6 h-6" />, title: "Warehouse Management", desc: "Kelola transfer dan ketersediaan stok antar gudang pusat secara real-time." },
+              { icon: <Store className="w-6 h-6" />, title: "Multi Branch Management", desc: "Pantau dan sinkronisasi data puluhan cabang dari satu dashboard." },
+              { icon: <Bot className="w-6 h-6" />, title: "AI Assistance", desc: "Analisis cerdas untuk performa omset, laba rugi, dan prediksi restock otomatis." }
+            ].map((feature, idx) => (
+              <div key={idx} className="p-6 border border-slate-200 rounded-2xl hover:shadow-xl hover:border-teal-200 transition-all bg-slate-50 group">
+                <div className="w-12 h-12 bg-white text-teal-600 rounded-xl flex items-center justify-center mb-5 shadow-sm group-hover:bg-teal-600 group-hover:text-white transition-colors">
+                  {feature.icon}
+                </div>
+                <h3 className="text-lg font-bold text-slate-900 mb-2">{feature.title}</h3>
+                <p className="text-slate-600 text-sm leading-relaxed">{feature.desc}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* PERANGKAT SECTION */}
+      <section id="perangkat" className="py-24 bg-slate-50 border-y border-slate-100">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center max-w-3xl mx-auto mb-16">
+            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-red-50 text-red-600 font-bold text-xs mb-6 border border-red-100 shadow-sm">
+              <MonitorSmartphone className="w-4 h-4" /> Multi Platform
+            </div>
+            <h2 className="text-3xl font-extrabold text-slate-900 mb-4 tracking-tight">Fleksibel di Semua Perangkat Anda</h2>
+            <p className="text-slate-600 text-lg">Tanpa perlu investasi mesin kasir mahal. Gunakan perangkat cerdas yang sudah Anda miliki untuk mulai berjualan.</p>
+          </div>
+
+          <div className="grid md:grid-cols-3 gap-8">
+            {/* Laptop/PC Card */}
+            <div className="bg-white rounded-2xl overflow-hidden border border-slate-200 hover:shadow-2xl hover:border-teal-300 transition-all group">
+              <div className="h-48 w-full relative">
+                <img 
+                  src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" 
+                  alt="" 
+                  className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
+                />
+                <div className="absolute inset-0 bg-teal-900/10 group-hover:bg-transparent transition-colors"></div>
+                <div className="absolute top-4 left-4 w-10 h-10 bg-white rounded-lg flex items-center justify-center shadow-lg text-teal-600">
+                  <Laptop className="w-6 h-6" />
+                </div>
+              </div>
+              <div className="p-8 text-center">
+                <h3 className="text-xl font-extrabold text-slate-900 mb-3">Laptop & PC</h3>
+                <p className="text-slate-600 text-sm leading-relaxed">
+                  Akses dashboard backoffice via browser. Sangat ideal untuk pantau analitik mendalam, manajemen stok pusat, dan laporan keuangan komprehensif.
+                </p>
+              </div>
+            </div>
+
+            {/* Tablet Card */}
+            <div className="bg-white rounded-2xl overflow-hidden border border-slate-200 hover:shadow-2xl hover:border-red-300 transition-all group">
+              <div className="h-48 w-full relative">
+                <img 
+                  src="https://images.unsplash.com/photo-1556742044-3c52d6e88c62?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" 
+                  alt="" 
+                  className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
+                />
+                <div className="absolute inset-0 bg-red-900/10 group-hover:bg-transparent transition-colors"></div>
+                <div className="absolute top-4 left-4 w-10 h-10 bg-white rounded-lg flex items-center justify-center shadow-lg text-red-600">
+                  <Tablet className="w-6 h-6" />
+                </div>
+              </div>
+              <div className="p-8 text-center">
+                <h3 className="text-xl font-extrabold text-slate-900 mb-3">Tablet Android</h3>
+                <p className="text-slate-600 text-sm leading-relaxed">
+                  Tampilan antarmuka kasir yang lega dan interaktif. Memberikan kesan elegan di meja kasir restoran, butik, atau toko retail modern Anda.
+                </p>
+              </div>
+            </div>
+
+            {/* Smartphone Card */}
+            <div className="bg-white rounded-2xl overflow-hidden border border-slate-200 hover:shadow-2xl hover:border-teal-300 transition-all group">
+              <div className="h-48 w-full relative">
+                <img 
+                  src="https://images.unsplash.com/photo-1512428559087-560fa5ceab42?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" 
+                  alt="" 
+                  className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
+                />
+                <div className="absolute inset-0 bg-teal-900/10 group-hover:bg-transparent transition-colors"></div>
+                <div className="absolute top-4 left-4 w-10 h-10 bg-white rounded-lg flex items-center justify-center shadow-lg text-teal-600">
+                  <Smartphone className="w-6 h-6" />
+                </div>
+              </div>
+              <div className="p-8 text-center">
+                <h3 className="text-xl font-extrabold text-slate-900 mb-3">Smartphone</h3>
+                <p className="text-slate-600 text-sm leading-relaxed">
+                  Mobilitas maksimal. Gunakan untuk pelayan (waiter) mencatat pesanan dari meja, atau operasional bisnis dinamis seperti food truck.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* SOLUTIONS SECTION */}
+      <section id="solusi" className="py-24 bg-white">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex flex-col lg:flex-row gap-16 items-center">
+            <div className="flex-1 w-full">
+              <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-red-50 text-red-600 font-bold text-xs mb-6 border border-red-100 shadow-sm">
+                <Store className="w-4 h-4" /> Solusi Spesifik
+              </div>
+              <h2 className="text-3xl font-extrabold text-slate-900 mb-6 tracking-tight">Satu Platform, Solusi Berbagai Industri</h2>
+              <div className="space-y-3">
+                {industries.map((industry) => (
+                  <div 
+                    key={industry.id}
+                    onClick={() => setActiveIndustryTab(industry.id)}
+                    className={`p-5 rounded-xl border transition-all cursor-pointer relative ${activeIndustryTab === industry.id ? 'bg-slate-50 border-teal-200' : 'bg-white border-slate-100'}`}
+                  >
+                    <div className="flex items-center gap-4">
+                      <div className={`w-12 h-12 rounded-xl flex items-center justify-center ${activeIndustryTab === industry.id ? 'bg-teal-600 text-white shadow-md' : 'bg-slate-100 text-slate-500'}`}>
+                        {industry.icon}
+                      </div>
+                      <h4 className="font-bold text-lg">{industry.title}</h4>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+            <div className="flex-1 w-full">
+              <div className="bg-slate-50 p-8 rounded-3xl border border-slate-200 shadow-xl min-h-[420px] flex flex-col justify-between">
+                <div>
+                  <h3 className="text-2xl font-extrabold text-slate-900 mb-6">{activeIndustry?.title}</h3>
+                  <div className="flex flex-wrap gap-2.5">
+                    {activeIndustry?.items.map((item, idx) => (
+                      <span key={idx} className="inline-flex items-center px-4 py-2 rounded-lg bg-white border border-slate-200 text-slate-700 font-semibold text-sm shadow-sm"><CheckCircle className="w-4 h-4 mr-2 text-teal-500" />{item}</span>
+                    ))}
+                  </div>
+                </div>
+                <button 
+                  onClick={() => setCurrentPage('industry-detail')}
+                  className="mt-8 bg-teal-600 text-white px-6 py-3 rounded-xl font-bold flex items-center gap-2 w-max hover:bg-teal-700 transition-colors"
+                >
+                  Pelajari Solusi {activeIndustry?.title} <ArrowRight className="w-5 h-5" />
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* PRICING SECTION */}
+      <section id="harga" className="py-24 bg-slate-50">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center max-w-3xl mx-auto mb-16">
+            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-red-50 text-red-600 font-bold text-xs mb-6 border border-red-100 shadow-sm">
+              <CreditCard className="w-4 h-4" /> Harga Terbaik
+            </div>
+            <h2 className="text-3xl font-extrabold text-slate-900 mb-4 tracking-tight">Investasi Transparan UMKM</h2>
+            <p className="text-lg text-slate-600">Skema harga yang ramah di kantong tanpa biaya tersembunyi. Skalakan sesuai pertumbuhan bisnis Anda.</p>
+          </div>
+          <div className="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
+            {/* Basic */}
+            <div className="bg-white rounded-3xl p-8 border border-slate-200 flex flex-col shadow-sm">
+              <h3 className="text-xl font-extrabold text-slate-900 mb-2">Basic</h3>
+              <div className="text-4xl font-black text-slate-900 mb-6 pb-6 border-b">Rp 50.k <span className="text-sm font-medium">/bln</span></div>
+              <ul className="space-y-4 mb-8 flex-1">
+                {["POS Full Features", "Inventory Management", "Finance & Accounting", "Purchase Management", "Warehouse Management", "3rd Party Management"].map(f => (
+                  <li key={f} className="flex gap-2 text-sm font-medium"><CheckCircle className="w-5 h-5 text-teal-500" />{f}</li>
+                ))}
+                <li className="flex gap-2 text-sm font-medium italic opacity-50"><X className="w-5 h-5" /> Multi-branch Allowed</li>
+              </ul>
+              <button className="w-full py-3 rounded-xl border-2 font-bold hover:border-teal-600 transition-colors">Pilih Basic</button>
+            </div>
+            {/* Pro */}
+            <div className="bg-teal-900 rounded-3xl p-8 border border-teal-800 flex flex-col transform md:-translate-y-4 shadow-2xl text-white">
+              <div className="bg-red-600 text-white px-4 py-1.5 rounded-full text-[10px] font-black uppercase w-max mb-4">Paling Laris</div>
+              <h3 className="text-xl font-extrabold mb-2">Pro Business</h3>
+              <div className="text-4xl font-black mb-6 pb-6 border-b text-teal-400">Rp 100.k <span className="text-sm font-medium text-white">/bln</span></div>
+              <ul className="space-y-4 mb-8 flex-1">
+                <li className="flex gap-2 text-sm font-bold text-teal-300"><Bot className="w-5 h-5" /> Akses AI Assistance</li>
+                {["POS Full Features", "Inventory Management", "Finance & Accounting", "Purchase Management", "Warehouse Management", "3rd Party Management", "Multi-branch Allowed"].map(f => (
+                  <li key={f} className="flex gap-2 text-sm font-medium"><CheckCircle className="w-5 h-5 text-teal-400" />{f}</li>
+                ))}
+              </ul>
+              <button className="w-full py-3 rounded-xl bg-teal-500 text-teal-950 font-black hover:bg-teal-400 transition-all">Pilih Pro</button>
+            </div>
+            {/* Enterprise */}
+            <div className="bg-white rounded-3xl p-8 border border-slate-200 flex flex-col shadow-sm">
+              <h3 className="text-xl font-extrabold text-slate-900 mb-2">Enterprise</h3>
+              <div className="text-2xl font-black text-slate-900 mb-6 pb-6 border-b">Hubungi Kami</div>
+              <ul className="space-y-4 mb-8 flex-1">
+                {["Custom AI Model", "Unlimited Outlets", "SLA Support 24/7", "Dedicated Manager"].map(f => (
+                  <li key={f} className="flex gap-2 text-sm font-medium"><CheckCircle className="w-5 h-5 text-teal-500" />{f}</li>
+                ))}
+              </ul>
+              <button className="w-full py-3 rounded-xl border-2 font-bold hover:bg-slate-50 transition-colors">Konsultasi Sales</button>
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+
+  const renderIndustryDetail = () => (
+    <div className="pt-20">
+      {/* Detail Hero */}
+      <section className="relative h-[400px] md:h-[500px] overflow-hidden">
+        <img src={activeIndustry?.image} alt={activeIndustry?.title} className="w-full h-full object-cover" />
+        <div className="absolute inset-0 bg-gradient-to-r from-teal-950 via-teal-900/70 to-transparent"></div>
+        <div className="absolute inset-0 max-w-7xl mx-auto px-4 flex flex-col justify-center text-white">
+          <button 
+            onClick={() => setCurrentPage('home')}
+            className="flex items-center gap-2 text-teal-400 font-bold mb-8 hover:text-white transition-colors w-max"
+          >
+            <ArrowLeft className="w-5 h-5" /> Kembali ke Beranda
+          </button>
+          
+          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-red-500/20 text-red-300 font-bold text-xs mb-4 border border-red-500/30 w-max">
+            <Sparkles className="w-4 h-4" /> Spesialisasi {activeIndustry?.title}
+          </div>
+          
+          <h1 className="text-4xl md:text-6xl font-black mb-6 max-w-3xl leading-tight">
+            {activeIndustry?.headline}
+          </h1>
+          <p className="text-lg md:text-xl text-teal-100 max-w-2xl leading-relaxed">
+            {activeIndustry?.description}
+          </p>
+        </div>
+      </section>
+
+      {/* Industry Specific Features */}
+      <section className="py-24 bg-white">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center max-w-3xl mx-auto mb-16">
+            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-red-50 text-red-600 font-bold text-xs mb-6 border border-red-100 shadow-sm">
+              <Star className="w-4 h-4" /> Fitur Spesifik
+            </div>
+            <h2 className="text-3xl font-extrabold text-slate-900 tracking-tight">Modul Khusus {activeIndustry?.title}</h2>
+          </div>
+          <div className="grid md:grid-cols-3 gap-8">
+            {activeIndustry?.features.map((feat, idx) => (
+              <div key={idx} className="p-8 rounded-3xl bg-slate-50 border border-slate-100 hover:border-teal-200 transition-all group">
+                <div className="w-14 h-14 bg-white rounded-xl flex items-center justify-center shadow-md mb-6 text-teal-600 group-hover:bg-teal-600 group-hover:text-white transition-all">
+                  {React.cloneElement(feat.icon, { className: "w-7 h-7" })}
+                </div>
+                <h3 className="text-xl font-black text-slate-900 mb-4">{feat.name}</h3>
+                <p className="text-slate-600 leading-relaxed text-sm">
+                  {feat.detail || feat.desc}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* List of Sub-industries */}
+      <section className="py-24 bg-slate-50 border-y border-slate-200">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-16">
+            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-red-50 text-red-600 font-bold text-xs mb-6 border border-red-100 shadow-sm">
+              <Users className="w-4 h-4" /> Fleksibilitas Skala
+            </div>
+            <h2 className="text-3xl font-black text-center text-slate-900">Mendukung Berbagai Jenis {activeIndustry?.title}</h2>
+          </div>
+          <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
+            {activeIndustry?.items.map((item, idx) => (
+              <div key={idx} className="bg-white p-4 rounded-xl border border-slate-200 text-center font-bold text-slate-700 shadow-sm hover:text-teal-600 transition-colors">
+                {item}
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Specialized CTA */}
+      <section className="py-24 bg-teal-600 text-white">
+        <div className="max-w-4xl mx-auto px-4 text-center">
+          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-red-500/20 text-red-100 font-bold text-xs mb-6 border border-red-400/30 shadow-sm">
+            <Zap className="w-4 h-4" /> Mulai Sekarang
+          </div>
+          <h2 className="text-3xl md:text-4xl font-black mb-6">Siap Menjalankan Bisnis {activeIndustry?.title} yang Lebih Efisien?</h2>
+          <p className="text-xl text-teal-100 mb-10 font-medium">Ribuan pemilik bisnis seperti Anda telah bertransformasi bersama Kulakpos.id.</p>
+          <div className="flex flex-col sm:flex-row gap-4 justify-center">
+            <a href="/plans" className="bg-white text-teal-600 px-10 py-4 rounded-xl font-black hover:bg-teal-50 transition-colors inline-block decoration-transparent">Mulai Gratis Sekarang</a>
+            <button className="bg-teal-700 text-white px-10 py-4 rounded-xl font-black border border-teal-500 hover:bg-teal-800 transition-colors">Tanya Tim Kami</button>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+
+  return (
+    <div className="min-h-screen font-sans text-slate-800 bg-white">
+      {renderNavbar()}
+      
+      <main>
+        {currentPage === 'home' ? renderHomePage() : renderIndustryDetail()}
+      </main>
+
+      {renderFooter()}
+
+      {/* WHATSAPP WIDGET */}
+      <a 
+        href="https://wa.me/6281234567890?text=Halo%20Kulakpos.id,%20saya%20tertarik%20dengan%20solusi%20POS%20dan%20AI%20Assistance%20Anda."
+        target="_blank"
+        rel="noopener noreferrer"
+        className="fixed bottom-6 right-6 z-[60] group flex items-center gap-3"
+      >
+        <div className="bg-white px-4 py-2 rounded-full shadow-xl border border-slate-100 opacity-0 group-hover:opacity-100 transition-all duration-300 -translate-x-2 group-hover:translate-x-0 pointer-events-none hidden md:block">
+          <span className="text-sm font-bold text-slate-700">Butuh Konsultasi?</span>
+        </div>
+        <div className="w-14 h-14 bg-[#25D366] rounded-full shadow-2xl flex items-center justify-center text-white relative hover:scale-110 transition-transform duration-300">
+          <div className="absolute inset-0 bg-[#25D366] rounded-full animate-ping opacity-25"></div>
+          <svg viewBox="0 0 24 24" className="w-8 h-8 fill-current">
+            <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.653a11.888 11.888 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
+          </svg>
+        </div>
+      </a>
+    </div>
+  );
+}

resources/js/app.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import '../css/app.css';
+import App from './App';
+
+ReactDOM.createRoot(document.getElementById('app')).render(
+    <React.StrictMode>
+        <App />
+    </React.StrictMode>
+);

resources/views/index.blade.php

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>KulakPOS</title>
+    @vite('resources/js/app.jsx')
+</head>
+<body>
+    <div id="app"></div>
+</body>
+</html>

resources/views/layouts/web/master.blade.php

@@ -18,11 +18,7 @@
 </head>
 
 <body>
-    @if (request()->is('/'))
-        @include('layouts.web.partials.header')
-    @else
-        @include('layouts.web.partials.common_header')
-    @endif
+    @include('layouts.web.partials.header')
 
     @yield('main_content')
 

resources/views/layouts/web/partials/css.blade.php

@@ -1,3 +1,5 @@
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
+
 <link rel="shortcut icon" type="image/x-icon" href="{{ asset(get_option('general')['favicon'] ?? 'assets/images/logo/favicon.png')}}">
 <link rel="stylesheet" href="{{ asset('assets/web/css/bootstrap.min.css') }}" />
 <link rel="stylesheet" href="{{ asset('assets/web/css/swiper-bundle.min.css') }}" />

resources/views/layouts/web/partials/header.blade.php

@@ -1,187 +1,163 @@
-<header class="header-section home-header">
-    <nav class="navbar navbar-expand-lg p-0">
-        <div class="container">
-            <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop"
-                aria-controls="staticBackdrop">
-                <i class="fa fa-bars" aria-hidden="true"></i>
+<style>
+/* New React-like Header */
+.react-header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    min-height: 80px;
+    background: rgba(255, 255, 255, 0.95) !important;
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    z-index: 1050;
+    border-bottom: 1px solid #e2e8f0;
+    font-family: 'Inter', sans-serif;
+}
+
+.react-header .navbar-brand a { text-decoration: none; }
+
+.rh-logo-icon {
+    width: 40px;
+    height: 40px;
+    background-color: #0d9488;
+    border-radius: 0.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+.rh-logo-icon svg { color: white; width: 24px; height: 24px; }
+
+.rh-logo-text {
+    font-weight: 800;
+    font-size: 1.5rem;
+    line-height: 1;
+    color: #0f172a;
+    letter-spacing: -0.025em;
+    margin-left: 0.5rem;
+}
+.rh-logo-text span { color: #0d9488; }
+
+.rh-link {
+    color: #475569 !important;
+    font-weight: 600 !important;
+    font-size: 0.875rem !important;
+    transition: color 0.2s;
+    text-decoration: none;
+    padding: 0.5rem 1rem !important;
+}
+.rh-link:hover { color: #0d9488 !important; }
+
+.rh-ai-link {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    color: #0d9488 !important;
+    background-color: #f0fdfa;
+    padding: 0.375rem 0.875rem !important;
+    border-radius: 9999px;
+    border: 1px solid #ccfbf1;
+    font-weight: 700 !important;
+    font-size: 0.875rem !important;
+    transition: color 0.2s;
+    text-decoration: none;
+    margin: 0 0.5rem;
+}
+.rh-ai-link:hover { color: #0f766e !important; }
+.rh-ai-link svg { width: 16px; height: 16px; margin-bottom: 2px; }
+
+.rh-login {
+    color: #475569 !important;
+    font-weight: 600 !important;
+    font-size: 0.875rem !important;
+    transition: color 0.2s;
+    text-decoration: none;
+    margin-right: 1.25rem;
+}
+.rh-login:hover { color: #dc2626 !important; }
+
+.rh-btn {
+    background-color: #0d9488 !important;
+    color: white !important;
+    padding: 0.625rem 1.25rem !important;
+    border-radius: 0.5rem;
+    font-weight: 600 !important;
+    font-size: 0.875rem !important;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    transition: all 0.2s;
+    text-decoration: none;
+    border: none;
+}
+.rh-btn:hover { background-color: #0f766e !important; }
+.rh-btn svg { width: 16px; height: 16px; margin-bottom: 2px; }
+
+body { padding-top: 80px; }
+@media (max-width: 991px) {
+    .react-header .navbar-nav {
+        padding: 1.5rem 0;
+        gap: 0.75rem;
+    }
+    .react-header .d-lg-flex {
+        padding-bottom: 1.5rem;
+    }
+    .react-header {
+        background: #ffffff !important;
+    }
+}
+</style>
+
+<div class="react-header">
+    <nav class="navbar navbar-expand-lg h-100" style="min-height:80px;">
+        <div class="container" style="max-width:80rem;">
+            <!-- Logo -->
+            <a class="navbar-brand d-flex align-items-center m-0 p-0" href="{{ route('home') }}">
+                <div class="rh-logo-icon">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7"/><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><path d="M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4"/><path d="M2 7h20"/><path d="M22 7v3a2 2 0 0 1-2 2v0a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12v0a2 2 0 0 1-2-2V7"/></svg>
+                </div>
+                <!-- Hide text on mobile using d-none d-sm-block -->
+                <span class="rh-logo-text d-none d-md-block">Kulak<span>pos</span></span>
+            </a>
+
+            <!-- Mobile Toggle -->
+            <button class="navbar-toggler border-0 shadow-none" type="button" data-bs-toggle="collapse" data-bs-target="#reactNavbar" aria-controls="reactNavbar" aria-expanded="false" aria-label="Toggle navigation">
+                <i class="fa fa-bars text-secondary" style="font-size:1.5rem;"></i>
             </button>
 
-            <div class="d-flex align-items-center gap-2">
-                <div class="mobile-lang-container">
-                    <div class="home-page-language-change">
-                        <div class="dropdown">
-                            <button class="language-btn" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-                                <img src="{{ asset('flags/' . languages()[app()->getLocale()]['flag'] . '.svg') }}" alt="" class="flag-icon me-2"> 
-                                <span class="lang-name">
-                                    {{ languages()[app()->getLocale()]['name'] }}
-                                </span> 
-                            </button>
-                            <ul class="dropdown-menu dropdown-menu-scroll">
-                                @foreach (languages() as $key => $language)
-                                <li class="language-li">
-                                    <a class="dropdown-item" href="{{ request()->fullUrlWithQuery(['lang' => $key]) }}">
-                                        <img src="{{ asset('flags/' . $language['flag'] . '.svg') }}" alt="" class="flag-icon me-2">
-                                        {{ $language['name'] }}
-                                    </a>
-                                    @if (app()->getLocale() == $key)
-                                        <i class="fas fa-check language-check"></i>
-                                    @endif
-                                </li>
-                               @endforeach
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-                <a href="{{ route('home') }}" class="header-logo"><img src="{{ asset($general->value['logo'] ?? 'assets/images/icons/upload-icon.svg') }}" alt="header-logo" /></a>
-            </div>
-
-            <!-- Mobile Menu -->
-            <div class="offcanvas offcanvas-start mobile-menu" data-bs-backdrop="static" tabindex="-1"
-                id="staticBackdrop" aria-labelledby="staticBackdropLabel">
-                <div class="offcanvas-header home-offcanvas-header">
-                    <a href="{{ route('home') }}" class="header-logo"><img
-                            src="{{ asset($general->value['logo'] ?? 'assets/images/icons/upload-icon.svg') }}"
-                            alt="header-logo" /></a>
-                    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close">
-                        <i class="fa-solid fa-xmark"></i>
-                    </button>
-                </div>
-                <div class="offcanvas-body">
-                    <div class="accordion accordion-flush mb-30" id="sidebarMenuAccordion">
-                        <div class="accordion-item">
-                            <a href="{{ route('home') }}" class="accordion-button without-sub-menu"
-                                type="button">{{ __('Home') }}</a>
-                        </div>
-                        <div class="accordion-item">
-                            <a href="{{ route('about.index') }}" class="accordion-button without-sub-menu"
-                                type="button">{{ __('About Us') }}</a>
-                        </div>
-                        <div class="accordion-item">
-                            <a href="{{ route('plan.index') }}" class="accordion-button without-sub-menu"
-                                type="button">{{ __('Pricing') }}</a>
-                        </div>
-                        <div class="accordion-item">
-                            <a href="javascript:void(0);" class="accordion-button collapsed" type="button"
-                                data-bs-toggle="collapse" data-bs-target="#support-menu" aria-expanded="false"
-                                aria-controls="support-menu">{{ __('Pages') }}</a>
-                            <div id="support-menu" class="accordion-collapse collapse"
-                                data-bs-parent="#sidebarMenuAccordion">
-                                <ul class="accordion-body p-0">
-                                    <li>
-                                        <a href="{{ route('blogs.index') }}">{{ __('Blog') }}</a>
-                                        <p class="mb-0 arrow">></p>
-                                    </li>
-                                    <li>
-                                        <a href="{{ route('term.index') }}"> {{ __('Terms & Conditions') }} </a>
-                                        <p class="mb-0 arrow">></p>
-                                    </li>
-                                    <li>
-                                        <a href="{{ route('policy.index') }}"> {{ __('Privacy Policy') }} </a>
-                                        <p class="mb-0 arrow">></p>
-                                    </li>
-                                </ul>
-                            </div>
-                        </div>
-                        <div class="accordion-item">
-                            <a href="{{ route('contact.index') }}" class="accordion-button without-sub-menu"
-                                type="button">{{ __('Contact Us') }}</a>
-                        </div>
-                            <a href="{{ Route::has($page_data['headings']['header_btn_link']) ? route($page_data['headings']['header_btn_link']) : route('login') }}"  class="get-app-btn login-btn ">
-                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
-                                xmlns="http://www.w3.org/2000/svg">
-                                <path
-                                    d="M5.48131 12.9012C4.30234 13.6032 1.21114 15.0366 3.09389 16.8304C4.01359 17.7065 5.03791 18.3332 6.32573 18.3332H13.6743C14.9621 18.3332 15.9864 17.7065 16.9061 16.8304C18.7888 15.0366 15.6977 13.6032 14.5187 12.9012C11.754 11.2549 8.24599 11.2549 5.48131 12.9012Z"
-                                    fill="white" />
-                                <path
-                                    d="M13.75 5.4165C13.75 7.48757 12.0711 9.1665 10 9.1665C7.92893 9.1665 6.25 7.48757 6.25 5.4165C6.25 3.34544 7.92893 1.6665 10 1.6665C12.0711 1.6665 13.75 3.34544 13.75 5.4165Z"
-                                    fill="white" />
-                            </svg>
-                            {{ $page_data['headings']['header_btn_text'] ?? 'Login' }}
+            <!-- Menu Content -->
+            <div class="collapse navbar-collapse" id="reactNavbar">
+                <ul class="navbar-nav mx-auto align-items-center">
+                    <li class="nav-item">
+                        <a class="nav-link rh-link" href="{{ route('home') }}#fitur">Fitur POS</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link rh-ai-link" href="{{ route('home') }}#ai">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M15 13v2"/><path d="M9 13v2"/></svg>
+                            AI Assistance
                         </a>
-                    </div>
-                    {{--
-                    <a href="" data-bs-toggle="modal" data-bs-target="#signup-modal" class="get-app-btn ">
-                        {{ $page_data['headings']['header_btn_text'] ?? '' }}
-                    </a> --}}
-                </div>
-            </div>
-            <!-- Desktop Menu -->
-            <div class="collapse navbar-collapse">
-                <ul class="navbar-nav mx-auto mb-2 mb-lg-0">
-                    <li class="nav-item">
-                        <a href="{{ route('home') }}" class="nav-link active"
-                            aria-current="page">{{ __('Home') }}</a>
-                    </li>
-
-                    <li class="nav-item">
-                        <a class="nav-link" aria-current="page"
-                            href="{{ route('about.index') }}">{{ __('About Us') }}</a>
-                    </li>
-
-                    <li class="nav-item">
-                        <a class="nav-link" aria-current="page"
-                            href="{{ route('plan.index') }}">{{ __('Pricing') }}</a>
-                    </li>
-
-                    <li class="nav-item menu-dropdown">
-                        <a class="nav-link" aria-current="page" href="javascript:void(0);">{{ __('Pages') }} <span
-                                class="arrow">></span></a>
-                        <ul class="dropdown-content">
-                            <li>
-                                <a class="dropdown-item"
-                                    href="{{ route('blogs.index') }}">{{ __('Blog') }}<span>></span></a>
-                            </li>
-                            <li>
-                                <a class="dropdown-item"
-                                    href="{{ route('term.index') }}">{{ __('Terms & Conditions') }}
-                                    <span>></span></a>
-                            </li>
-                            <li>
-                                <a class="dropdown-item"
-                                    href="{{ route('policy.index') }}">{{ __('Privacy Policy') }}<span>></span></a>
-                            </li>
-                        </ul>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link" aria-current="page"
-                            href="{{ route('contact.index') }}">{{ __('Contact Us') }}</a>
+                        <a class="nav-link rh-link" href="{{ route('home') }}#perangkat">Perangkat</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link rh-link" href="{{ route('home') }}#solusi">Solusi Industri</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link rh-link" href="{{ route('plan.index') }}">Harga</a>
                     </li>
                 </ul>
-                <div class="home-page-language-change">
-                    <div class="dropdown">
-                        <button class="language-btn" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-                            <img src="{{ asset('flags/' . languages()[app()->getLocale()]['flag'] . '.svg') }}" alt="" class="flag-icon me-2">{{ languages()[app()->getLocale()]['name'] }}
-                        </button>
-                        <ul class="dropdown-menu dropdown-menu-scroll">
-                            @foreach (languages() as $key => $language)
-                            <li class="language-li">
-                                <a class="dropdown-item" href="{{ request()->fullUrlWithQuery(['lang' => $key]) }}">
-                                    <img src="{{ asset('flags/' . $language['flag'] . '.svg') }}" alt="" class="flag-icon me-2">
-                                    {{ $language['name'] }}
-                                </a>
-                                @if (app()->getLocale() == $key)
-                                    <i class="fas fa-check language-check"></i>
-                                @endif
-                            </li>
-                           @endforeach
-                        </ul>
-                    </div>
+
+                <div class="d-flex align-items-center justify-content-center d-lg-flex mt-3 mt-lg-0">
+                    <a href="{{ route('login') }}" class="rh-login">Masuk</a>
+                    <a href="{{ route('plan.index') }}" class="rh-btn">
+                        Coba Gratis 
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
+                    </a>
                 </div>
-                <a href="{{ Route::has($page_data['headings']['header_btn_link']) ? route($page_data['headings']['header_btn_link']) : route('login') }}" class="get-app-btn">
-                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
-                        xmlns="http://www.w3.org/2000/svg">
-                        <path
-                            d="M5.48131 12.9012C4.30234 13.6032 1.21114 15.0366 3.09389 16.8304C4.01359 17.7065 5.03791 18.3332 6.32573 18.3332H13.6743C14.9621 18.3332 15.9864 17.7065 16.9061 16.8304C18.7888 15.0366 15.6977 13.6032 14.5187 12.9012C11.754 11.2549 8.24599 11.2549 5.48131 12.9012Z"
-                            fill="white" />
-                        <path
-                            d="M13.75 5.4165C13.75 7.48757 12.0711 9.1665 10 9.1665C7.92893 9.1665 6.25 7.48757 6.25 5.4165C6.25 3.34544 7.92893 1.6665 10 1.6665C12.0711 1.6665 13.75 3.34544 13.75 5.4165Z"
-                            fill="white" />
-                    </svg>
-
-                    {{ $page_data['headings']['header_btn_text'] ?? 'Login' }}
-
-                </a>
             </div>
         </div>
     </nav>
-</header>
+</div>

resources/views/web/index.blade.php

@@ -1,195 +1,216 @@
 @extends('layouts.web.master')
 
 @section('title')
-    {{ __(env('APP_NAME')) }}
+Kulakpos Modern
 @endsection
 
 @section('main_content')
-    <section class="home-banner-section" style="background-image: url('{{ asset($page_data['slider_bg_img'] ?? 'assets/web/images/banner/banner1.png') }}');">
-        <div class="container">
-            <div class="row align-items-center pb-5 py-lg-5">
-                <div class="col-lg-6 order-2 order-lg-1 mt-5 mt-lg-0">
-                    <div class="banner-content">
-                        <h1>
-                            {{ $page_data['headings']['slider_title'] ?? '' }}
-                            <span
-                                data-typer-targets='{"targets": [
-                                @foreach ($page_data['headings']['silder_shop_text'] ?? [] as $key => $shop)
-                                    "{{ $shop }}"@if (!$loop->last),@endif @endforeach
-                            ]}'>
-                            </span>
 
-                        </h1>
-                        <p>
-                            {{ $page_data['headings']['slider_description'] ?? '' }}
-                        </p>
-                        <div class="demo-btn-group mb-3">
-                            <a href="{{ url($page_data['headings']['slider_btn1_link'] ?? '') }}"
-                                class="custom-btn custom-primary-btn">
-                                {{ $page_data['headings']['slider_btn1'] ?? '' }}<i class="fas fa-arrow-right ms-1"></i>
-                            </a>
+<style>
+.home-modern { font-family: system-ui; }
 
-                            <a href="" class="mt-1 video-button d-flex align-items-center gap-2"
-                                data-bs-toggle="modal" data-bs-target="#watch-video-modal">
-                                <span class="play-button"></span>
-                                <span class="text-white ms-3">{{ $page_data['headings']['slider_btn2'] ?? '' }}</span>
-                            </a>
+/* HERO */
+.hero { padding:140px 20px 100px; text-align:center; position:relative; }
+.hero h1 { font-size:48px; font-weight:800; }
+.hero p { color:#64748b; }
 
-                        </div>
+/* BUTTON */
+.btn-main { background:#0d9488; color:#fff; padding:14px 30px; border-radius:10px; font-weight:bold; }
+.btn-outline { border:2px solid #ddd; padding:14px 30px; border-radius:10px; }
 
-                        <div class="banner-scan">
-                            <img src="{{ asset($page_data['scanner_image'] ?? 'assets/images/icons/img-upload.png') }}"
-                                alt="" />
-                            <p>
-                                {{ $page_data['headings']['slider_scanner_text'] ?? '' }}
-                            </p>
-                        </div>
+/* SECTION */
+.section { padding:100px 20px; }
+.section-dark { background:#0f172a; color:white; }
 
-                        <div class="play-store mt-3">
-                            <a href="{{ $page_data['headings']['footer_apple_app_link'] ?? '' }}" target="_blank">
-                                <img src="{{ asset($page_data['footer_apple_app_image'] ?? 'assets/images/icons/img-upload.png') }}"
-                                    alt="image" />
-                            </a>
-                            <a href="{{ $page_data['headings']['footer_google_play_app_link'] ?? '' }}" target="_blank">
-                                <img src="{{ asset($page_data['footer_google_app_image'] ?? 'assets/images/icons/img-upload.png') }}"
-                                    alt="image" />
-                            </a>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-lg-6 order-1 order-lg-2">
-                    <div class="banner-img text-center">
-                        <img src="{{ asset($page_data['slider_image'] ?? 'assets/images/icons/img-upload.png') }}"
-                            alt="banner-img" class=" move-image" />
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
+/* GRID */
+.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:40px; }
+.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
+.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
 
-    <div class="modal modal-custom-design" id="watch-video-modal" data-bs-backdrop="static" data-bs-keyboard="false"
-        tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
-        <div class="modal-dialog modal-lg modal-dialog-centered">
-            <div class="modal-content">
-                <div class="modal-header border-0 pb-0">
-                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-                </div>
-                <div class="modal-body">
-                    <iframe width="100%" height="400px" src="{{ $page_data['headings']['slider_btn2_link'] ?? '' }}"
-                        title="YouTube video player" frameborder="0"
-                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                        referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
-                </div>
-            </div>
-        </div>
+/* CARD */
+.card { border:1px solid #eee; border-radius:16px; padding:20px; transition:.3s; }
+.card:hover { transform:translateY(-5px); box-shadow:0 10px 30px rgba(0,0,0,.08); }
+
+/* INDUSTRY ACTIVE */
+.industry-active { border:2px solid #0d9488; background:#f0fdfa; }
+
+/* CTA */
+.cta { background:#0d9488; color:white; text-align:center; padding:80px 20px; }
+</style>
+
+<div class="home-modern">
+
+{{-- ================= HERO ================= --}}
+<section class="hero">
+
+    <span style="background:#fee2e2;color:#dc2626;padding:8px 16px;border-radius:999px;font-weight:bold;">
+        Mitra Digital #1 untuk UMKM
+    </span>
+
+    <h1 class="mt-3">
+        Sistem Kasir Pintar <br>
+        <span style="color:#0d9488;">AI Assistance</span>
+    </h1>
+
+    <p class="mt-3">
+        Kendalikan penjualan, stok, dan laporan dalam satu dashboard.
+    </p>
+
+    <div class="mt-4">
+        <a href="#" class="btn-main">Coba Gratis</a>
+        <a href="#" class="btn-outline">Demo</a>
     </div>
 
-    {{-- Feature Code Start --}}
+</section>
 
-    @include('web.components.feature')
+{{-- ================= AI ================= --}}
+<section id="ai" class="section section-dark">
 
-    {{-- Interface Code Start --}}
+    <div class="grid-2">
 
-    <section class="slick-slider-section bg-pos">
-        <div class="container">
-            <div class="section-title text-center">
-                <h2>{{ $page_data['headings']['interface_title'] ?? '' }}</h2>
-                <p class="max-w-600 mx-auto section-description">
-                    {{ $page_data['headings']['interface_description'] ?? '' }}
-                </p>
-            </div>
-            <div class="row app-slide">
-                @foreach ($interfaces as $interface)
-                    <div class="image d-flex align-items-center justify-content-center p-2">
-                        <img src="{{ asset($interface->image) }}" alt="phone" />
-                    </div>
-                @endforeach
-            </div>
+        <div>
+            <h2 style="color:#14b8a6;font-weight:800;">AI Assistant</h2>
+            <p class="mt-3">Analisis otomatis bisnis Anda.</p>
+
+            <ul class="mt-4">
+                <li>✔ Analisis Omset</li>
+                <li>✔ Laba Rugi</li>
+                <li>✔ Prediksi Stok</li>
+            </ul>
         </div>
-    </section>
 
-    {{-- Watch demo Code Start --}}
-    <section class="watch-demo-section watch-demo-two bg-FFFFFF">
-        <div class="container">
-            <div class="section-title text-center">
-                <h2>{{ $page_data['headings']['watch_title'] ?? '' }}</h2>
-                <p class="section-description">
-                    {{ $page_data['headings']['watch_description'] ?? '' }}
-                </p>
-            </div>
-            <div class="video-wrapper shadow">
-                <img src="{{ asset($page_data['watch_image'] ?? 'assets/images/icons/img-upload.png') }}" alt="watch" />
-                <a class="play-btn" data-bs-toggle="modal" data-bs-target="#play-video-modal"><i class="fa fa-play"
-                        aria-hidden="true"></i></a>
-            </div>
+        <div class="card">
+            <strong>AI Dashboard</strong>
+            <h3 class="mt-3">Rp 24.500.000</h3>
         </div>
-    </section>
 
-    <div class="modal modal-custom-design" id="play-video-modal" data-bs-backdrop="static" data-bs-keyboard="false"
-        tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
-        <div class="modal-dialog modal-lg modal-dialog-centered">
-            <div class="modal-content">
-                <div class="modal-header border-0 pb-0">
-                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-                </div>
-                <div class="modal-body">
-                    <iframe width="100%" height="400px" src="{{ $page_data['headings']['watch_btn_link'] ?? '' }}"
-                        title="YouTube video player" frameborder="0"
-                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                        referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
-                </div>
-            </div>
-        </div>
     </div>
 
-    {{-- Pricing-Plan-section demo Code Start --}}
-    @include('web.components.plan')
+</section>
 
-    {{-- Testimonial Section Start --}}
-    <section class="customer-section bg-pos">
-        <div class="container mb-4">
-            <div class="section-title text-center">
-                <h2>{{ $page_data['headings']['testimonial_title'] ?? '' }}</h2>
-            </div>
+{{-- ================= FITUR ================= --}}
+<section id="fitur" class="section">
 
-            <div class="customer-slider-section">
-                <div class="row">
-                    @foreach ($testimonials as $testimonial)
-                        <div>
-                            <div class="customer-card">
-                                <img src="{{ asset($testimonial->client_image) }}" alt="" />
-                                <p>{{ $testimonial->text }}</p>
-                                <div class="w-100 pt-3 d-flex align-items-center flex-column border-top">
-                                    <h5 class="m-0">{{ $testimonial->client_name }}</h5>
-                                    <small>{{ $testimonial->work_at }}</small>
-                                    <ul class="d-flex align-items-center justify-content-center gap-2">
-                                        @for ($i = 0; $i < 5; $i++)
-                                            <li><i class="fa fa-star" aria-hidden="true"></i></li>
-                                        @endfor
-                                    </ul>
-                                </div>
-                            </div>
-                        </div>
-                    @endforeach
-                </div>
+    <h2 style="text-align:center;font-weight:800;">Fitur Lengkap</h2>
+
+    <div class="grid-4 mt-5">
+
+        <div class="card">Sales Management</div>
+        <div class="card">Purchase</div>
+        <div class="card">Inventory</div>
+        <div class="card">Multi Branch</div>
+        <div class="card">Pricing</div>
+        <div class="card">Warehouse</div>
+        <div class="card">3rd Party</div>
+        <div class="card">AI Assistant</div>
+
+    </div>
+
+</section>
+
+{{-- ================= PERANGKAT ================= --}}
+<section id="perangkat" class="section" style="background:#f8fafc;">
+
+    <h2 style="text-align:center;font-weight:800;">Multi Platform</h2>
+
+    <div class="grid-3 mt-5">
+
+        <div class="card">Laptop & PC</div>
+        <div class="card">Tablet</div>
+        <div class="card">Smartphone</div>
+
+    </div>
+
+</section>
+
+{{-- ================= SOLUSI ================= --}}
+<section id="solusi" class="section">
+
+    <div class="grid-2">
+
+        <div id="industry-list">
+
+            <div class="card industry-item industry-active" data-id="1">F&B</div>
+            <div class="card industry-item" data-id="2">Retail</div>
+            <div class="card industry-item" data-id="3">Cafe</div>
+
+        </div>
+
+        <div>
+            <h3 id="industry-title">F&B</h3>
+
+            <div id="industry-items" class="mt-3">
+                <span class="badge">Restaurant</span>
+                <span class="badge">Cafe</span>
             </div>
         </div>
-    </section>
 
-    {{-- Blogs Section Code Start --}}
+    </div>
 
-    <section class="blogs-section ">
-        <div class="container">
-            <div class="section-title d-flex align-items-center justify-content-between flex-wrap">
-                <h2>{{ $page_data['headings']['blog_title'] ?? '' }}</h2>
-                <a href="{{ url($page_data['headings']['blog_view_all_btn_link'] ?? '') }}"
-                    class="custom-btn custom-outline-btn bg-white">
-                    {{ $page_data['headings']['blog_view_all_btn_text'] ?? '' }}<i class="fas fa-arrow-right ms-1"></i>
-                </a>
-            </div>
+</section>
+
+{{-- ================= HARGA ================= --}}
+<section id="harga" class="section" style="background:#f8fafc;">
+
+    <h2 style="text-align:center;font-weight:800;">Harga</h2>
+
+    <div class="grid-3 mt-5">
+
+        <div class="card">
+            <h4>Basic</h4>
+            <h3>Rp 50k</h3>
         </div>
-        @include('web.components.blog')
-    </section>
 
-    @include('web.components.signup')
-@endsection
+        <div class="card" style="background:#0d9488;color:white;">
+            <h4>Pro</h4>
+            <h3>Rp 100k</h3>
+        </div>
+
+        <div class="card">
+            <h4>Enterprise</h4>
+            <h3>Custom</h3>
+        </div>
+
+    </div>
+
+</section>
+
+{{-- ================= CTA ================= --}}
+<section class="cta">
+    <h2>Siap Naik Kelas?</h2>
+    <p>Mulai sekarang bersama Kulakpos</p>
+</section>
+
+</div>
+
+{{-- ================= JS INTERACTIVE ================= --}}
+<script>
+const industries = {
+    1: { title: "F&B", items: ["Restaurant","Cafe","Warung"] },
+    2: { title: "Retail", items: ["Minimarket","Toko"] },
+    3: { title: "Cafe", items: ["Coffee Shop","Bakery"] },
+};
+
+document.querySelectorAll('.industry-item').forEach(el=>{
+    el.addEventListener('click', function(){
+
+        document.querySelectorAll('.industry-item').forEach(i=>i.classList.remove('industry-active'));
+        this.classList.add('industry-active');
+
+        const id = this.dataset.id;
+        const data = industries[id];
+
+        document.getElementById('industry-title').innerText = data.title;
+
+        let html = '';
+        data.items.forEach(i=>{
+            html += `<span class="badge">${i}</span>`;
+        });
+
+        document.getElementById('industry-items').innerHTML = html;
+
+    });
+});
+</script>
+
+@endsection