diff --git a/resources/css/app.css b/resources/css/app.css
index 6f9d1f5..0110b7a 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -70,6 +70,7 @@ @theme inline {
   color utility to any element that depends on these defaults.
 */
 @layer base {
+
     *,
     ::after,
     ::before,
@@ -80,12 +81,14 @@ @layer base {
 }
 
 @layer utilities {
+
     body,
     html {
         --font-sans:
             'Instrument Sans', ui-sans-serif, system-ui, sans-serif,
             'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
             'Noto Color Emoji';
+
     }
 }
 
@@ -166,7 +169,41 @@ @layer base {
     * {
         @apply border-border outline-ring/50;
     }
+
     body {
         @apply bg-background text-foreground;
     }
 }
+
+/* 1. Membuat scroll halus untuk seluruh halaman */
+html {
+    scroll-behavior: smooth;
+}
+
+/* 2. Opsional: Mengatur jarak berhenti scroll agar tidak tertutup Navbar */
+/* Jika kamu punya section dengan ID, beri jarak atas 5rem (80px) */
+section,
+[id] {
+    scroll-margin-top: 5rem;
+}
+
+/* 3. Membuat scrollbar terlihat lebih estetik (cocok dengan tema gelapmu) */
+::-webkit-scrollbar {
+    width: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: #09090b;
+    /* Warna zinc-950 */
+}
+
+::-webkit-scrollbar-thumb {
+    background: #27272a;
+    /* Warna zinc-800 */
+    border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #f97316;
+    /* Warna orange-500 saat dihover */
+}
\ No newline at end of file
diff --git a/resources/js/app.ts b/resources/js/app.ts
index 2ed2760..2903edf 100644
--- a/resources/js/app.ts
+++ b/resources/js/app.ts
@@ -2,6 +2,7 @@ import { createInertiaApp } from '@inertiajs/vue3';
 import { initializeTheme } from '@/composables/useAppearance';
 import AppLayout from '@/layouts/AppLayout.vue';
 import AuthLayout from '@/layouts/AuthLayout.vue';
+import PublicLayout from '@/layouts/PublicLayout.vue';
 import SettingsLayout from '@/layouts/settings/Layout.vue';
 import { initializeFlashToast } from '@/lib/flashToast';
 
@@ -17,8 +18,10 @@ createInertiaApp({
                 return AuthLayout;
             case name.startsWith('settings/'):
                 return [AppLayout, SettingsLayout];
+            case name.startsWith('admin/'):
+                return [AppLayout];
             default:
-                return AppLayout;
+                return PublicLayout;
         }
     },
     progress: {
diff --git a/resources/js/components/UserMenuContent.vue b/resources/js/components/UserMenuContent.vue
index 97726e7..df471df 100644
--- a/resources/js/components/UserMenuContent.vue
+++ b/resources/js/components/UserMenuContent.vue
@@ -42,6 +42,7 @@ defineProps<Props>();
         <Link
             class="block w-full cursor-pointer"
             :href="route('logout')"
+            method="post"
             @click="handleLogout"
             as="button"
             data-test="logout-button"
diff --git a/resources/js/components/public/BentoGrid.vue b/resources/js/components/public/BentoGrid.vue
index d674f0c..d36d820 100644
--- a/resources/js/components/public/BentoGrid.vue
+++ b/resources/js/components/public/BentoGrid.vue
@@ -1,150 +1,174 @@
 <template>
-  <section id="features" class="py-24 px-4">
+  <section id="klasifikasi" class="py-24 px-4 bg-black">
     <div class="max-w-6xl mx-auto">
+
+
       <div class="text-center mb-16">
-        <h2 class="text-3xl sm:text-4xl font-bold text-white mb-4 font-display">Everything you need to ship</h2>
+        <h2 class="text-3xl sm:text-4xl font-bold text-white mb-4 font-display">COFFEE SCAN</h2>
         <p class="text-zinc-400 max-w-2xl mx-auto">
-          Built for modern teams. Powerful features that help you build, deploy, and scale faster than ever.
+          Identifikasi proses pasca-panen biji kopi Anda (Natural, Honey, Wash) menggunakan teknologi Artificial Intelligence.
         </p>
       </div>
 
-      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-        <!-- Large card - System Status -->
+      <div class="max-w-5xl mx-auto">
         <div
-          class="md:col-span-2 group relative p-6 rounded-2xl bg-zinc-900 border border-zinc-800 hover:border-zinc-600 hover:scale-[1.02] transition-all duration-300 overflow-hidden"
+          class="group relative p-8 rounded-3xl bg-zinc-900 border border-zinc-800 hover:border-emerald-500/50 transition-all duration-500 overflow-hidden"
         >
-          <div class="flex items-start justify-between mb-8">
-            <div>
-              <div class="p-2 rounded-lg bg-zinc-800 w-fit mb-4">
-                <Activity class="w-5 h-5 text-zinc-400" :stroke-width="1.5" />
+          <div class="flex flex-col md:flex-row items-stretch justify-between gap-8">
+            <div class="flex-1 flex flex-col justify-center">
+              <div class="p-3 rounded-xl bg-emerald-500/10 w-fit mb-6">
+                <Upload class="w-6 h-6 text-emerald-500" :stroke-width="2" />
               </div>
-              <h3 class="text-xl font-semibold text-white mb-2">Real-time Monitoring</h3>
-              <p class="text-zinc-400 text-sm">
-                Track system health, performance metrics, and alerts in real-time across all your deployments.
+              <h3 class="text-2xl font-bold text-white mb-3">Klasifikasi Foto</h3>
+              <p class="text-zinc-400 text-sm mb-8 leading-relaxed max-w-xs">
+                Unggah foto biji kopi Arabika Anda. Pastikan gambar jelas dan mendapatkan pencahayaan yang cukup untuk hasil terbaik.
               </p>
+              
+              <div class="flex items-center gap-3">
+                <div class="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-emerald-500/10 border border-emerald-500/20">
+                  <div class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></div>
+                  <span class="text-[10px] font-bold text-emerald-500 uppercase tracking-wider">AI Model Ready</span>
+                </div>
+              </div>
             </div>
-            <div class="flex items-center gap-2">
-              <div
-                v-for="(active, i) in dots"
-                :key="i"
-                :class="[
-                  'w-2 h-2 rounded-full',
-                  active ? 'bg-emerald-500 animate-pulse' : 'bg-zinc-700',
-                ]"
-              />
-            </div>
-          </div>
-          <div class="grid grid-cols-4 gap-4">
-            <div v-for="metric in metrics" :key="metric" class="text-center">
-              <div class="text-2xl font-bold text-white mb-1">{{ Math.floor(Math.random() * 40 + 60) }}%</div>
-              <div class="text-xs text-zinc-500">{{ metric }}</div>
+
+            <div class="w-full md:w-1/2 flex flex-col justify-center gap-4">
+              <label 
+                for="coffee-upload"
+                class="relative group/upload w-full aspect-[4/3] cursor-pointer flex flex-col items-center justify-center border-2 border-dashed border-zinc-800 rounded-2xl bg-zinc-950/50 p-6 hover:border-emerald-500/40 hover:bg-zinc-900/50 transition-all duration-300 overflow-hidden"
+              >
+                <input 
+                  type="file" 
+                  id="coffee-upload" 
+                  class="hidden" 
+                  accept="image/*"
+                  @change="handleFileChange" 
+                />
+                
+                <template v-if="!imagePreview">
+                  <div class="w-16 h-16 bg-zinc-800 rounded-full flex items-center justify-center mb-6 group-hover/upload:scale-110 transition-transform duration-300">
+                    <Plus class="w-8 h-8 text-zinc-400 group-hover/upload:text-emerald-500 transition-colors" />
+                  </div>
+                  <p class="text-base font-semibold text-zinc-300">Pilih Gambar Biji Kopi</p>
+                  <p class="text-sm text-zinc-500 mt-2">Format PNG, JPG (Maks 5MB)</p>
+                </template>
+
+                <template v-else>
+                  <img :src="imagePreview" class="absolute inset-0 w-full h-full object-cover" />
+                  <div class="absolute inset-0 bg-black/40 opacity-0 group-hover/upload:opacity-100 transition-opacity duration-300 flex items-center justify-center backdrop-blur-[2px]">
+                    <span class="bg-black/60 text-white px-4 py-2 rounded-full text-sm font-medium">Klik untuk mengganti</span>
+                  </div>
+                  <button 
+                    @click.stop.prevent="clearImage" 
+                    class="absolute top-4 right-4 bg-red-500 text-white p-1.5 rounded-full hover:bg-red-600 transition-all hover:scale-110 z-10 shadow-xl"
+                  >
+                    <X class="w-4 h-4" />
+                  </button>
+                </template>
+              </label>
+              
+              <button 
+                :disabled="!imagePreview"
+                class="w-full py-4 rounded-xl font-bold text-base transition-all border-2 border-emerald-600 text-emerald-500 hover:bg-emerald-600/10 active:scale-95 disabled:opacity-50 disabled:border-zinc-700 disabled:text-zinc-500 disabled:hover:bg-transparent disabled:active:scale-100 disabled:cursor-not-allowed flex-none"
+              >
+                Analisis Sekarang
+              </button>
             </div>
           </div>
         </div>
 
-        <!-- Command Palette -->
-        <div
+        <!-- <div
           class="group relative p-6 rounded-2xl bg-zinc-900 border border-zinc-800 hover:border-zinc-600 hover:scale-[1.02] transition-all duration-300"
         >
           <div class="p-2 rounded-lg bg-zinc-800 w-fit mb-4">
             <Command class="w-5 h-5 text-zinc-400" :stroke-width="1.5" />
           </div>
-          <h3 class="text-lg font-semibold text-white mb-2">Command Palette</h3>
-          <p class="text-zinc-400 text-sm mb-6">Navigate anywhere instantly with powerful keyboard shortcuts.</p>
+          <h3 class="text-lg font-semibold text-white mb-2">Panduan Cepat</h3>
+          <p class="text-zinc-400 text-sm mb-6">Gunakan shortcut untuk berpindah antar mode klasifikasi.</p>
           <div class="flex items-center gap-1">
-            <kbd class="px-2 py-1 text-xs bg-zinc-800 border border-zinc-700 rounded text-zinc-300 font-mono">
-              ⌘
-            </kbd>
-            <kbd class="px-2 py-1 text-xs bg-zinc-800 border border-zinc-700 rounded text-zinc-300 font-mono">
-              K
-            </kbd>
+            <kbd class="px-2 py-1 text-xs bg-zinc-800 border border-zinc-700 rounded text-zinc-300 font-mono italic">Alt + S</kbd>
+            <span class="text-xs text-zinc-600 ml-1">untuk Scan</span>
           </div>
-        </div>
+        </div> -->
 
-        <!-- Analytics -->
-        <div
+        <!-- <div
           class="group relative p-6 rounded-2xl bg-zinc-900 border border-zinc-800 hover:border-zinc-600 hover:scale-[1.02] transition-all duration-300"
         >
           <div class="p-2 rounded-lg bg-zinc-800 w-fit mb-4">
             <BarChart3 class="w-5 h-5 text-zinc-400" :stroke-width="1.5" />
           </div>
-          <h3 class="text-lg font-semibold text-white mb-2">Analytics</h3>
-          <p class="text-zinc-400 text-sm mb-4">Deep insights into your application performance.</p>
-          <svg viewBox="0 0 100 70" class="w-full h-24">
-            <defs>
-              <linearGradient id="chartGradient" x1="0" y1="0" x2="0" y2="1">
-                <stop offset="0%" stop-color="rgb(255,255,255)" stop-opacity="0.2" />
-                <stop offset="100%" stop-color="rgb(255,255,255)" stop-opacity="0" />
-              </linearGradient>
-            </defs>
-            <path
-              d="M 0 60 L 20 45 L 40 55 L 60 30 L 80 40 L 100 15 L 100 70 L 0 70 Z"
-              fill="url(#chartGradient)"
-              class="opacity-50"
-            />
-            <path
-              d="M 0 60 L 20 45 L 40 55 L 60 30 L 80 40 L 100 15"
-              fill="none"
-              stroke="white"
-              stroke-width="2"
-              stroke-linecap="round"
-            />
-          </svg>
-        </div>
+          <h3 class="text-lg font-semibold text-white mb-2">Akurasi Model</h3>
+          <p class="text-zinc-400 text-sm mb-4">Performa klasifikasi berdasarkan dataset saat ini.</p>
+          <div class="flex items-end gap-1 h-12">
+            <div class="flex-1 bg-orange-500/20 h-[80%] rounded-t-sm"></div>
+            <div class="flex-1 bg-orange-500/40 h-[60%] rounded-t-sm"></div>
+            <div class="flex-1 bg-orange-500 h-[95%] rounded-t-sm"></div>
+            <div class="flex-1 bg-orange-500/60 h-[40%] rounded-t-sm"></div>
+          </div>
+        </div> -->
 
-        <!-- Performance -->
-        <div
+        <!-- <div
           class="group relative p-6 rounded-2xl bg-zinc-900 border border-zinc-800 hover:border-zinc-600 hover:scale-[1.02] transition-all duration-300"
         >
           <div class="p-2 rounded-lg bg-zinc-800 w-fit mb-4">
             <Zap class="w-5 h-5 text-zinc-400" :stroke-width="1.5" />
           </div>
-          <h3 class="text-lg font-semibold text-white mb-2">Blazing Fast</h3>
+          <h3 class="text-lg font-semibold text-white mb-2">Proses Cepat</h3>
           <p class="text-zinc-400 text-sm mb-4">
-            Edge-optimized infrastructure for sub-50ms response times globally.
+            Prediksi instan menggunakan akselerasi GPU via TensorFlow.js.
           </p>
-          <div class="flex items-center gap-2 text-emerald-500 text-sm">
-            <span class="font-mono">~32ms</span>
-            <span class="text-zinc-500">avg response</span>
+          <div class="flex items-center gap-2 text-orange-500 text-sm">
+            <span class="font-mono">~150ms</span>
+            <span class="text-zinc-500 italic">inference time</span>
           </div>
-        </div>
+        </div> -->
 
-        <!-- Security -->
-        <div
+        <!-- <div
           class="group relative p-6 rounded-2xl bg-zinc-900 border border-zinc-800 hover:border-zinc-600 hover:scale-[1.02] transition-all duration-300"
         >
           <div class="p-2 rounded-lg bg-zinc-800 w-fit mb-4">
             <Shield class="w-5 h-5 text-zinc-400" :stroke-width="1.5" />
           </div>
-          <h3 class="text-lg font-semibold text-white mb-2">Enterprise Security</h3>
-          <p class="text-zinc-400 text-sm mb-4">SOC2 compliant with end-to-end encryption and SSO support.</p>
+          <h3 class="text-lg font-semibold text-white mb-2">Privasi Terjamin</h3>
+          <p class="text-zinc-400 text-sm mb-4">Foto Anda diproses langsung di browser tanpa disimpan di server kami.</p>
           <div class="flex items-center gap-2">
-            <span class="px-2 py-1 text-xs bg-zinc-800 rounded text-zinc-400">SOC2</span>
-            <span class="px-2 py-1 text-xs bg-zinc-800 rounded text-zinc-400">GDPR</span>
-            <span class="px-2 py-1 text-xs bg-zinc-800 rounded text-zinc-400">HIPAA</span>
+            <span class="px-2 py-1 text-[10px] font-bold bg-zinc-800 rounded text-zinc-400">CLIENT-SIDE</span>
+            <span class="px-2 py-1 text-[10px] font-bold bg-zinc-800 rounded text-zinc-400">ENCRYPTED</span>
           </div>
-        </div>
+        </div> -->
       </div>
     </div>
   </section>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from 'vue'
-import { Activity, Command, BarChart3, Zap, Shield } from 'lucide-vue-next'
+import { ref } from 'vue'
+import { 
+  Upload, 
+  Plus, 
+  X, 
+  Command, 
+  BarChart3, 
+  Zap, 
+  Shield 
+} from 'lucide-vue-next'
 
-const dots = ref([true, true, true, false, true])
-const metrics = ['CPU', 'Memory', 'Network', 'Storage']
+const imagePreview = ref<string | null>(null)
 
-let interval: NodeJS.Timeout
+const handleFileChange = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  const file = target.files?.[0]
+  
+  if (file) {
+    const reader = new FileReader()
+    reader.onload = (e) => {
+      imagePreview.value = e.target?.result as string
+    }
+    reader.readAsDataURL(file)
+  }
+}
 
-onMounted(() => {
-  interval = setInterval(() => {
-    dots.value = dots.value.map(() => Math.random() > 0.2)
-  }, 2000)
-})
-
-onBeforeUnmount(() => {
-  clearInterval(interval)
-})
-</script>
+const clearImage = () => {
+  imagePreview.value = null
+}
+</script>
\ No newline at end of file
diff --git a/resources/js/components/public/FAQ.vue b/resources/js/components/public/FAQ.vue
new file mode 100644
index 0000000..93a0559
--- /dev/null
+++ b/resources/js/components/public/FAQ.vue
@@ -0,0 +1,74 @@
+<template>
+  <section id="faq" class="py-24 px-4 bg-zinc-950 border-t border-zinc-900">
+    <div class="max-w-4xl mx-auto">
+      <div class="text-center mb-16">
+        <h2 class="text-3xl sm:text-4xl font-bold text-white mb-4 font-display">Pertanyaan yang Sering Diajukan</h2>
+        <p class="text-zinc-400">Temukan jawaban untuk pertanyaan umum seputar klasifikasi AI GREENS CoffeeScan.</p>
+      </div>
+
+      <div class="space-y-4">
+        <div 
+          v-for="(faq, index) in faqs" 
+          :key="index"
+          class="border border-zinc-800 bg-zinc-900/50 rounded-2xl overflow-hidden transition-all duration-300 hover:border-emerald-500/30"
+        >
+          <button 
+            @click="toggle(index)"
+            class="w-full flex items-center justify-between p-6 text-left focus:outline-none"
+          >
+            <span class="font-semibold text-white pr-8">{{ faq.question }}</span>
+            <div class="flex-shrink-0 w-8 h-8 rounded-full bg-zinc-800 flex items-center justify-center">
+              <ChevronDown 
+                class="w-5 h-5 text-emerald-500 transition-transform duration-300" 
+                :class="activeIndex === index ? 'rotate-180' : ''"
+              />
+            </div>
+          </button>
+          
+          <div 
+            class="transition-all duration-300 ease-in-out overflow-hidden"
+            :class="activeIndex === index ? 'max-h-48 opacity-100' : 'max-h-0 opacity-0'"
+          >
+            <div class="px-6 pb-6 text-zinc-400 text-sm leading-relaxed">
+              {{ faq.answer }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ChevronDown } from 'lucide-vue-next'
+
+const activeIndex = ref<number | null>(0)
+
+const toggle = (index: number) => {
+  activeIndex.value = activeIndex.value === index ? null : index
+}
+
+const faqs = [
+  {
+    question: 'Apa itu GREENS CoffeeScan?',
+    answer: 'GREENS CoffeeScan adalah platform berbasis kecerdasan buatan (AI) yang dirancang khusus untuk mendeteksi dan mengklasifikasikan proses pasca-panen pada biji kopi Arabika (Natural, Honey, Wash).'
+  },
+  {
+    question: 'Seberapa akurat model AI ini?',
+    answer: 'Kami menggunakan arsitektur EfficientNetB0 canggih yang memberikan tingkat akurasi tinggi. Meskipun begitu, hasil prediksi AI sebaiknya digunakan sebagai asisten verifikasi dan referensi sekunder Anda.'
+  },
+  {
+    question: 'Bagaimana cara mendapatkan hasil klasifikasi yang maksimal?',
+    answer: 'Untuk hasil terbaik, pastikan foto biji kopi Anda jelas dan fokus. Ambil gambar dari jarak dekat dengan pencahayaan putih yang merata, dan pastikan tekstur serta warna biji kopi terlihat dengan baik.'
+  },
+  {
+    question: 'Apakah layanan ini berbayar?',
+    answer: 'Tidak, layanan analisis pemindaian dasar ini sepenuhnya gratis. Kami membangun platform ini untuk membantu produktivitas komunitas petani, prosesor, dan pecinta kopi.'
+  },
+  {
+    question: 'Apakah foto yang saya unggah aman?',
+    answer: 'Tentu saja. Privasi data Anda terjamin. Jika Anda memutuskan untuk membuat akun, foto tersebut hanya akan disimpan dalam database privat sebagai riwayat pribadi Anda dan tidak akan disebarluaskan.'
+  }
+]
+</script>
diff --git a/resources/js/components/public/FinalCta.vue b/resources/js/components/public/FinalCta.vue
index eeb1dee..dc50ff7 100644
--- a/resources/js/components/public/FinalCta.vue
+++ b/resources/js/components/public/FinalCta.vue
@@ -1,32 +1,35 @@
 <template>
-  <section class="py-24 px-4">
+  <section class="py-24 px-4 bg-black">
     <div class="max-w-4xl mx-auto text-center">
       <h2 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-white mb-6 tracking-tight font-display">
-        Ready to ship faster?
+        Pantau Riwayat Klasifikasi
       </h2>
       <p class="text-lg sm:text-xl text-zinc-400 mb-10 max-w-2xl mx-auto">
-        Join thousands of teams already building with Apex. Start free, no credit card required.
+        Masuk ke akun Anda sekarang untuk menyimpan hasil dan melihat kembali seluruh riwayat klasifikasi biji kopi yang pernah Anda lakukan.
       </p>
 
       <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
-        <button
-          class="shimmer-btn bg-white text-zinc-950 hover:bg-zinc-200 rounded-full px-8 py-3 text-base font-medium shadow-lg shadow-white/20 flex items-center gap-2"
+        <Link
+          href="/login"
+          class="shimmer-btn bg-emerald-500 text-zinc-950 hover:bg-emerald-400 rounded-full px-8 py-3 text-base font-bold shadow-lg shadow-emerald-500/20 flex items-center gap-2 transition-all active:scale-95"
         >
-          Get Started for Free
+          Masuk ke Akun
           <ArrowRight :size="20" />
-        </button>
-        <button
-          class="rounded-full px-8 py-3 text-base font-medium border border-zinc-800 text-zinc-300 hover:bg-zinc-900 hover:text-white hover:border-zinc-700 bg-transparent"
+        </Link>
+        <Link
+          href="/register"
+          class="rounded-full px-8 py-3 text-base font-medium border border-zinc-800 text-zinc-300 hover:bg-zinc-900 hover:text-white hover:border-zinc-700 bg-transparent transition-all active:scale-95"
         >
-          Talk to Sales
-        </button>
+          Daftar Baru
+        </Link>
       </div>
 
-      <p class="mt-8 text-sm text-zinc-500">Free forever for individuals. Team plans start at $29/month.</p>
+      <p class="mt-8 text-sm text-zinc-500">Gratis sepenuhnya. Jangan biarkan riwayat klasifikasi Anda hilang.</p>
     </div>
   </section>
 </template>
 
 <script setup lang="ts">
 import { ArrowRight } from 'lucide-vue-next'
+import { Link } from '@inertiajs/vue3'
 </script>
diff --git a/resources/js/components/public/Footer.vue b/resources/js/components/public/Footer.vue
index 936a471..a340c26 100644
--- a/resources/js/components/public/Footer.vue
+++ b/resources/js/components/public/Footer.vue
@@ -3,17 +3,17 @@
     <div class="max-w-6xl mx-auto px-4 py-16">
       <div class="grid grid-cols-2 md:grid-cols-5 gap-8">
         <!-- Brand -->
-        <div class="col-span-2 md:col-span-1">
+        <div class="col-span-2 md:col-span-2">
           <a href="#" class="flex items-center gap-2 mb-4">
-            <div class="w-8 h-8 rounded-lg bg-white flex items-center justify-center">
-              <span class="text-zinc-950 font-bold text-sm">A</span>
+            <div class="w-8 h-8 rounded-lg bg-emerald-500 flex items-center justify-center">
+              <span class="text-zinc-950 font-bold text-sm">GB</span>
             </div>
-            <span class="font-semibold text-white">Apex</span>
+            <span class="font-semibold text-white">Greens</span>
           </a>
-          <p class="text-sm text-zinc-500 mb-4">The modern platform for teams who ship fast.</p>
+          <p class="text-sm text-zinc-500 mb-4 max-w-xs">Platform cerdas yang ditenagai oleh kecerdasan buatan untuk membantu Anda mengklasifikasikan proses pasca-panen biji kopi Arabika dengan akurat.</p>
           <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-zinc-900 border border-zinc-800">
-            <span class="w-2 h-2 rounded-full bg-emerald-500 pulse-glow" />
-            <span class="text-xs text-zinc-400">All Systems Operational</span>
+            <span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
+            <span class="text-xs text-zinc-400">Model AI Aktif & Berjalan</span>
           </div>
         </div>
 
@@ -21,9 +21,9 @@
         <div v-for="(links, title) in footerLinks" :key="title">
           <h4 class="text-sm font-semibold text-white mb-4">{{ title }}</h4>
           <ul class="space-y-3">
-            <li v-for="link in links" :key="link">
-              <a href="#" class="text-sm text-zinc-500 hover:text-white transition-colors">
-                {{ link }}
+            <li v-for="link in links" :key="link.label">
+              <a :href="link.href" class="text-sm text-zinc-500 hover:text-white transition-colors">
+                {{ link.label }}
               </a>
             </li>
           </ul>
@@ -34,11 +34,11 @@
       <div
         class="mt-16 pt-8 border-t border-zinc-800 flex flex-col sm:flex-row items-center justify-between gap-4"
       >
-        <p class="text-sm text-zinc-500">&copy; {{ new Date().getFullYear() }} Apex, Inc. All rights reserved.</p>
+        <p class="text-sm text-zinc-500">&copy; {{ new Date().getFullYear() }} Greens. Hak Cipta Dilindungi.</p>
         <div class="flex items-center gap-6">
-          <a href="#" class="text-sm text-zinc-500 hover:text-white transition-colors">Twitter</a>
+          <a href="#" class="text-sm text-zinc-500 hover:text-white transition-colors">Instagram</a>
           <a href="#" class="text-sm text-zinc-500 hover:text-white transition-colors">GitHub</a>
-          <a href="#" class="text-sm text-zinc-500 hover:text-white transition-colors">Discord</a>
+          <a href="#" class="text-sm text-zinc-500 hover:text-white transition-colors">Youtube</a>
         </div>
       </div>
     </div>
@@ -46,10 +46,24 @@
 </template>
 
 <script setup lang="ts">
-const footerLinks: Record<string, string[]> = {
-  Product: ['Features', 'Pricing', 'Changelog', 'Roadmap', 'API'],
-  Resources: ['Documentation', 'Guides', 'Blog', 'Community', 'Templates'],
-  Company: ['About', 'Careers', 'Press', 'Partners', 'Contact'],
-  Legal: ['Privacy', 'Terms', 'Security', 'Cookies', 'Licenses'],
+const footerLinks = {
+  Navigasi: [
+    { label: 'Beranda', href: '#' },
+    { label: 'Klasifikasi', href: '#klasifikasi' },
+    { label: 'Keunggulan', href: '#keunggulan' },
+    { label: 'Teknologi', href: '#technology' },
+  ],
+  Bantuan: [
+    { label: 'Panduan Pengguna', href: '#' },
+    { label: 'F.A.Q', href: '#faq' },
+    { label: 'Hubungi Kami', href: '#' },
+    { label: 'Komunitas', href: '#' },
+  ],
+  Legal: [
+    { label: 'Kebijakan Privasi', href: '#' },
+    { label: 'Syarat Ketentuan', href: '#' },
+    { label: 'Keamanan', href: '#' },
+    { label: 'Lisensi', href: '#' },
+  ],
 }
 </script>
diff --git a/resources/js/components/public/Hero.vue b/resources/js/components/public/Hero.vue
index 6ef3f30..6a7edba 100644
--- a/resources/js/components/public/Hero.vue
+++ b/resources/js/components/public/Hero.vue
@@ -16,19 +16,18 @@
       <!-- Badge -->
       <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-900 border border-zinc-800 mb-8">
         <span class="w-2 h-2 rounded-full bg-emerald-500 pulse-glow" />
-        <span class="text-sm text-zinc-400">Now in Public Beta</span>
+        <span class="text-sm text-zinc-400">GREENS</span>
       </div>
 
       <!-- Headline -->
       <h1 class="text-5xl sm:text-6xl lg:text-7xl font-bold tracking-tight text-white mb-6 font-display">
-        <span class="block">Ship faster.</span>
-        <span class="block text-zinc-500">Scale smarter.</span>
+        <span class="block">Klasifikasi</span>
+        <span class="block text-zinc-500">Biji Hijau Kopi</span>
       </h1>
 
       <!-- Subheadline -->
       <p class="text-lg sm:text-xl text-zinc-400 max-w-2xl mx-auto mb-10 leading-relaxed">
-        The modern platform for teams who ship fast. Built for scale, designed for speed. Everything you need to build,
-        deploy, and grow.
+        Klasifikasi Biji Hijau Kopi adalah sebuah sistem yang menggunakan Kecerdasan Buatan (AI) untuk mengklasifikasikan biji hijau kopi berdasarkan Proses Pasca Panennya
       </p>
 
       <!-- CTAs -->
@@ -36,14 +35,14 @@
         <button
           class="shimmer-btn bg-white text-zinc-950 hover:bg-zinc-200 rounded-full px-8 py-3 text-base font-medium shadow-lg shadow-white/10 flex items-center gap-2"
         >
-          Start Building
+          Mulai Klasifikasi
           <ArrowRight :size="16" />
         </button>
-        <button
+        <!-- <button
           class="rounded-full px-8 py-3 text-base font-medium border border-zinc-800 text-zinc-300 hover:bg-zinc-900 hover:text-white hover:border-zinc-700 bg-transparent"
         >
           View Demo
-        </button>
+        </button> -->
       </div>
 
       <!-- Social Proof -->
@@ -58,7 +57,7 @@
           />
         </div>
         <p class="text-sm text-zinc-500">
-          Trusted by <span class="text-zinc-300 font-medium">2,000+</span> teams worldwide
+          Telah digunakan oleh <span class="text-zinc-300 font-medium">2,000+</span> orang
         </p>
       </div>
     </div>
diff --git a/resources/js/components/public/Navbar.vue b/resources/js/components/public/Navbar.vue
index dc18e97..82e59c5 100644
--- a/resources/js/components/public/Navbar.vue
+++ b/resources/js/components/public/Navbar.vue
@@ -5,10 +5,10 @@
     >
       <!-- Logo -->
       <a href="#" class="flex items-center gap-2">
-        <div class="w-8 h-8 rounded-lg bg-white flex items-center justify-center">
-          <span class="text-zinc-950 font-bold text-sm">A</span>
+        <div class="w-8 h-8 rounded-lg bg-emerald-500 flex items-center justify-center">
+          <span class="text-zinc-950 font-bold text-sm">GB</span>
         </div>
-        <span class="font-semibold text-white hidden sm:block">Apex</span>
+        <span class="font-semibold text-white hidden sm:block">GREENS</span>
       </a>
 
       <!-- Desktop Nav Items -->
@@ -31,16 +31,18 @@
 
       <!-- CTA Buttons -->
       <div class="hidden md:flex items-center gap-3">
-        <button
+        <Link
+          href="/login"
           class="px-4 py-2 text-sm text-zinc-400 hover:text-white hover:bg-zinc-800 rounded-lg transition-colors"
         >
-          Sign In
-        </button>
-        <button
-          class="shimmer-btn bg-white text-zinc-950 hover:bg-zinc-200 rounded-full px-4 py-2 text-sm font-medium"
+          Masuk
+        </Link>
+        <Link
+          href="/register"
+          class="shimmer-btn bg-emerald-500 text-zinc-950 hover:bg-emerald-400 rounded-full px-4 py-2 text-sm font-bold shadow-lg shadow-emerald-500/20 transition-all active:scale-95"
         >
-          Get Started
-        </button>
+          Daftar
+        </Link>
       </div>
 
       <!-- Mobile Menu Button -->
@@ -69,14 +71,16 @@
             {{ item.label }}
           </a>
           <hr class="border-zinc-800 my-2" />
-          <button class="px-4 py-3 text-sm text-zinc-400 hover:text-white hover:bg-zinc-800 rounded-lg transition-colors text-left">
-            Sign In
-          </button>
-          <button
-            class="shimmer-btn bg-white text-zinc-950 hover:bg-zinc-200 rounded-full px-4 py-2 text-sm font-medium w-full"
+          <Link href="/login" class="px-4 py-3 text-sm text-zinc-400 hover:text-white hover:bg-zinc-800 rounded-lg transition-colors text-left" @click="mobileMenuOpen = false">
+            Masuk
+          </Link>
+          <Link
+            href="/register"
+            class="shimmer-btn bg-emerald-500 text-zinc-950 hover:bg-emerald-400 rounded-full px-4 py-3 text-sm font-bold text-center shadow-lg shadow-emerald-500/20"
+            @click="mobileMenuOpen = false"
           >
-            Get Started
-          </button>
+            Daftar
+          </Link>
         </div>
       </div>
     </nav>
@@ -86,12 +90,13 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { Menu, X } from 'lucide-vue-next'
+import { Link } from '@inertiajs/vue3'
 
 const navItems = [
-  { label: 'Features', href: '#features' },
-  { label: 'Pricing', href: '#pricing' },
-  { label: 'Docs', href: '#docs' },
-  { label: 'Blog', href: '#blog' },
+  { label: 'Klasifikasi', href: '#klasifikasi' },
+  { label: 'Keunggulan', href: '#keunggulan' },
+  { label: 'Teknologi', href: '#technology' },
+  { label: 'F.A.Q', href: '#faq' },
 ]
 
 const hoveredIndex = ref<number | null>(null)
diff --git a/resources/js/components/public/Pricing.vue b/resources/js/components/public/Pricing.vue
index 34c8ca2..0fc5af5 100644
--- a/resources/js/components/public/Pricing.vue
+++ b/resources/js/components/public/Pricing.vue
@@ -1,94 +1,47 @@
 <template>
-  <section id="pricing" class="py-24 px-4">
+  <section id="technology" class="py-24 px-4 bg-black">
     <div class="max-w-6xl mx-auto">
-      <div class="text-center mb-12">
-        <h2 class="text-3xl sm:text-4xl font-bold text-white mb-4 font-display">Simple, transparent pricing</h2>
-        <p class="text-zinc-400 max-w-2xl mx-auto mb-8">Start free, scale as you grow. No hidden fees, no surprises.</p>
-
-        <!-- Billing Toggle -->
-        <div class="inline-flex items-center p-1 rounded-full bg-zinc-900 border border-zinc-800">
-          <button
-            @click="billingCycle = 'monthly'"
-            :class="[
-              'relative px-4 py-2 text-sm font-medium rounded-full transition-colors',
-              billingCycle === 'monthly' ? 'text-white' : 'text-zinc-400',
-            ]"
-          >
-            <div
-              v-if="billingCycle === 'monthly'"
-              class="absolute inset-0 bg-zinc-800 rounded-full"
-            />
-            <span class="relative z-10">Monthly</span>
-          </button>
-          <button
-            @click="billingCycle = 'yearly'"
-            :class="[
-              'relative px-4 py-2 text-sm font-medium rounded-full transition-colors',
-              billingCycle === 'yearly' ? 'text-white' : 'text-zinc-400',
-            ]"
-          >
-            <div
-              v-if="billingCycle === 'yearly'"
-              class="absolute inset-0 bg-zinc-800 rounded-full"
-            />
-            <span class="relative z-10">Yearly</span>
-            <span class="relative z-10 ml-2 px-2 py-0.5 text-xs bg-emerald-500/20 text-emerald-400 rounded-full">
-              -20%
-            </span>
-          </button>
-        </div>
+      <div class="text-center mb-16">
+        <h2 class="text-3xl sm:text-4xl font-bold text-white mb-4 font-display">Teknologi di Balik Layar</h2>
+        <p class="text-zinc-400 max-w-2xl mx-auto">
+          Sistem klasifikasi kami dibangun di atas ekosistem kecerdasan buatan modern untuk memastikan hasil yang cepat, efisien, dan akurat.
+        </p>
       </div>
 
-      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8">
         <div
-          v-for="(plan, index) in plans"
-          :key="plan.name"
+          v-for="tech in technologies"
+          :key="tech.name"
           :class="[
-            'relative p-6 rounded-2xl border transition-all duration-300 hover:scale-[1.02]',
-            plan.highlighted
-              ? 'bg-zinc-900 border-zinc-700'
-              : 'bg-zinc-900/50 border-zinc-800 hover:border-zinc-600',
+            'relative p-8 rounded-3xl border transition-all duration-500 hover:scale-[1.02] flex flex-col',
+            tech.highlighted
+              ? 'bg-zinc-900 border-emerald-500/50 shadow-2xl shadow-emerald-900/20'
+              : 'bg-zinc-950 border-zinc-800 hover:border-zinc-700',
           ]"
         >
           <div
-            v-if="plan.highlighted"
-            class="absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-1 bg-white text-zinc-950 text-xs font-medium rounded-full"
-          >
-            Most Popular
-          </div>
-
-          <div class="mb-6">
-            <h3 class="text-xl font-semibold text-white mb-2">{{ plan.name }}</h3>
-            <p class="text-zinc-400 text-sm">{{ plan.description }}</p>
-          </div>
-
-          <div class="mb-6">
-            <div class="flex items-baseline gap-1">
-              <span class="text-4xl font-bold text-white">${{ plan.price[billingCycle] }}</span>
-              <span v-if="plan.price.monthly > 0" class="text-zinc-400 text-sm">/month</span>
-            </div>
-            <p v-if="billingCycle === 'yearly' && plan.price.yearly > 0" class="text-xs text-zinc-500 mt-1">
-              Billed annually (${{ plan.price.yearly * 12 }}/year)
-            </p>
-          </div>
-
-          <ul class="space-y-3 mb-8">
-            <li v-for="feature in plan.features" :key="feature" class="flex items-center gap-3 text-sm text-zinc-300">
-              <Check class="w-4 h-4 text-emerald-500 shrink-0" :stroke-width="1.5" />
-              {{ feature }}
-            </li>
-          </ul>
-
-          <button
+            v-if="tech.badge"
             :class="[
-              'w-full rounded-full py-2 font-medium transition-colors',
-              plan.highlighted
-                ? 'shimmer-btn bg-white text-zinc-950 hover:bg-zinc-200'
-                : 'bg-zinc-800 text-white hover:bg-zinc-700 border border-zinc-700',
+              'absolute -top-4 left-1/2 -translate-x-1/2 px-4 py-1.5 text-xs font-bold rounded-full uppercase tracking-widest shadow-lg whitespace-nowrap',
+              tech.highlighted
+                ? 'bg-emerald-500 text-zinc-950'
+                : 'bg-zinc-800 text-zinc-300 border border-zinc-700'
             ]"
           >
-            {{ plan.cta }}
-          </button>
+            {{ tech.badge }}
+          </div>
+
+          <div class="mb-8 flex-1">
+            <h3 class="text-2xl font-bold text-white mb-4">{{ tech.name }}</h3>
+            <p class="text-zinc-400 text-sm leading-relaxed">{{ tech.description }}</p>
+          </div>
+
+          <ul class="space-y-4 mb-4">
+            <li v-for="feature in tech.features" :key="feature" class="flex items-start gap-3 text-sm text-zinc-300">
+              <Check class="w-5 h-5 text-emerald-500 shrink-0 mt-0.5" :stroke-width="2" />
+              <span class="leading-relaxed">{{ feature }}</span>
+            </li>
+          </ul>
         </div>
       </div>
     </div>
@@ -96,53 +49,44 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
 import { Check } from 'lucide-vue-next'
 
-type BillingCycle = 'monthly' | 'yearly'
-
-const billingCycle = ref<BillingCycle>('monthly')
-
-const plans = [
+const technologies = [
   {
-    name: 'Starter',
-    description: 'Perfect for side projects and small teams',
-    price: { monthly: 0, yearly: 0 },
-    features: ['3 team members', '10 projects', 'Basic analytics', 'Community support', '1GB storage'],
-    cta: 'Get Started',
+    name: 'Convolutional Neural Network',
+    badge: 'Algoritma AI',
+    description: 'Metode Deep Learning mutakhir yang secara khusus dirancang untuk memproses dan menganalisis data visual dengan meniru cara kerja korteks visual manusia.',
+    features: [
+      'Mampu mengenali pola spasial pada tekstur dan warna biji kopi',
+      'Mengekstraksi fitur visual secara otomatis',
+      'Tahan terhadap variasi pencahayaan dan sudut gambar',
+      'Standar industri terdepan untuk klasifikasi citra'
+    ],
     highlighted: false,
   },
   {
-    name: 'Pro',
-    description: 'For growing teams that need more power',
-    price: { monthly: 29, yearly: 24 },
+    name: 'EfficientNetB0',
+    badge: 'Arsitektur Utama',
+    description: 'Arsitektur CNN canggih yang menggunakan metode compound scaling, menyeimbangkan kedalaman, lebar, dan resolusi jaringan secara presisi.',
     features: [
-      'Unlimited team members',
-      'Unlimited projects',
-      'Advanced analytics',
-      'Priority support',
-      '100GB storage',
-      'Custom domains',
-      'API access',
+      'Akurasi klasifikasi tinggi (State-of-the-art)',
+      'Jumlah parameter jauh lebih efisien dari arsitektur lama (ResNet/VGG)',
+      'Waktu prediksi instan yang tidak membebani perangkat',
+      'Memanfaatkan Transfer Learning untuk dataset kopi'
     ],
-    cta: 'Start Free Trial',
     highlighted: true,
   },
   {
-    name: 'Enterprise',
-    description: 'For organizations with advanced needs',
-    price: { monthly: 99, yearly: 79 },
-    features: [
-      'Everything in Pro',
-      'SSO & SAML',
-      'Dedicated support',
-      'SLA guarantee',
-      'Unlimited storage',
-      'Custom integrations',
-      'Audit logs',
-    ],
-    cta: 'Contact Sales',
-    highlighted: false,
-  },
+  name: 'Klasifikasi Pasca-Panen',
+  badge: 'AI Recognition',
+  description: 'Implementasi model CNN yang dilatih secara khusus untuk membedakan karakteristik morfologi dan visual pada tiga metode pemrosesan kopi utama.',
+  features: [
+    'Identifikasi akurat untuk proses Natural, Honey, dan Wash',
+    'Analisis tekstur dan gradasi warna biji kopi secara mendalam',
+    'Inference real-time dengan latensi rendah di browser',
+    'Optimasi akurasi berdasarkan varietas Arabika Bondowoso'
+  ],
+  highlighted: false, 
+},
 ]
 </script>
diff --git a/resources/js/components/public/kelebihan.vue b/resources/js/components/public/kelebihan.vue
new file mode 100644
index 0000000..8b4c6e2
--- /dev/null
+++ b/resources/js/components/public/kelebihan.vue
@@ -0,0 +1,136 @@
+<template>
+  <section id="features" class="py-24 px-4">
+    <div class="max-w-6xl mx-auto">
+      <div class="text-center mb-16">
+        <h2 class="text-3xl sm:text-4xl font-bold text-white mb-4 font-display">Keunggulan Sistem Kami</h2>
+        <p class="text-zinc-400 max-w-2xl mx-auto">
+          Didukung oleh teknologi kecerdasan buatan terkini untuk memberikan klasifikasi biji kopi yang cepat, presisi, dan andal.
+        </p>
+      </div>
+
+      
+
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        <!-- Large card - AI Architecture -->
+        <div
+          class="md:col-span-2 group relative p-6 rounded-2xl bg-zinc-900 border border-zinc-800 hover:border-emerald-500/50 hover:scale-[1.02] transition-all duration-300 overflow-hidden"
+        >
+          <div class="flex items-start justify-between mb-8">
+            <div>
+              <div class="p-2 rounded-lg bg-emerald-500/10 w-fit mb-4">
+                <Activity class="w-5 h-5 text-emerald-500" :stroke-width="1.5" />
+              </div>
+              <h3 class="text-xl font-semibold text-white mb-2">Arsitektur EfficientNetB0</h3>
+              <p class="text-zinc-400 text-sm">
+                Model klasifikasi kami menggunakan EfficientNetB0, menghadirkan keseimbangan optimal antara akurasi tinggi dan efisiensi komputasi untuk mendeteksi proses pasca-panen (Natural, Honey, Wash).
+              </p>
+            </div>
+            <div class="flex items-center gap-2">
+              <div
+                v-for="(active, i) in dots"
+                :key="i"
+                :class="[
+                  'w-2 h-2 rounded-full',
+                  active ? 'bg-emerald-500 animate-pulse' : 'bg-zinc-700',
+                ]"
+              />
+            </div>
+          </div>
+          <div class="grid grid-cols-4 gap-4">
+            <div v-for="(metric, idx) in metrics" :key="metric" class="text-center">
+              <div class="text-2xl font-bold text-white mb-1">{{ metricValues[idx] }}%</div>
+              <div class="text-xs text-zinc-500">{{ metric }}</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Command Palette -->
+        <div
+          class="group relative p-6 rounded-2xl bg-zinc-900 border border-zinc-800 hover:border-emerald-500/50 hover:scale-[1.02] transition-all duration-300"
+        >
+          <div class="p-2 rounded-lg bg-zinc-800 w-fit mb-4 group-hover:bg-emerald-500/10 transition-colors">
+            <Command class="w-5 h-5 text-zinc-400 group-hover:text-emerald-500 transition-colors" :stroke-width="1.5" />
+          </div>
+          <h3 class="text-lg font-semibold text-white mb-2">Panduan Cepat</h3>
+          <p class="text-zinc-400 text-sm mb-6">Gunakan pintasan keyboard untuk berpindah antarmuka dan memulai analisis dengan cepat.</p>
+          <div class="flex items-center gap-1">
+            <kbd class="px-2 py-1 text-xs bg-zinc-800 border border-zinc-700 rounded text-zinc-300 font-mono italic">
+              Alt + S
+            </kbd>
+            <span class="text-xs text-zinc-600 ml-1">untuk Scan</span>
+          </div>
+        </div>
+
+        <!-- Analytics -->
+        <div
+          class="group relative p-6 rounded-2xl bg-zinc-900 border border-zinc-800 hover:border-emerald-500/50 hover:scale-[1.02] transition-all duration-300"
+        >
+          <div class="p-2 rounded-lg bg-zinc-800 w-fit mb-4 group-hover:bg-emerald-500/10 transition-colors">
+            <BarChart3 class="w-5 h-5 text-zinc-400 group-hover:text-emerald-500 transition-colors" :stroke-width="1.5" />
+          </div>
+          <h3 class="text-lg font-semibold text-white mb-2">Performa Stabil</h3>
+          <p class="text-zinc-400 text-sm mb-4">Grafik akurasi klasifikasi berdasarkan dataset pelatihan yang komprehensif.</p>
+          <div class="flex items-end gap-1 h-12">
+            <div class="flex-1 bg-emerald-500/20 h-[80%] rounded-t-sm"></div>
+            <div class="flex-1 bg-emerald-500/40 h-[60%] rounded-t-sm"></div>
+            <div class="flex-1 bg-emerald-500 h-[95%] rounded-t-sm"></div>
+            <div class="flex-1 bg-emerald-500/60 h-[40%] rounded-t-sm"></div>
+          </div>
+        </div>
+
+        <!-- Performance -->
+        <div
+          class="group relative p-6 rounded-2xl bg-zinc-900 border border-zinc-800 hover:border-emerald-500/50 hover:scale-[1.02] transition-all duration-300"
+        >
+          <div class="p-2 rounded-lg bg-zinc-800 w-fit mb-4 group-hover:bg-emerald-500/10 transition-colors">
+            <Zap class="w-5 h-5 text-zinc-400 group-hover:text-emerald-500 transition-colors" :stroke-width="1.5" />
+          </div>
+          <h3 class="text-lg font-semibold text-white mb-2">Proses Instan</h3>
+          <p class="text-zinc-400 text-sm mb-4">
+            Infrastruktur yang dioptimalkan untuk memberikan hasil prediksi klasifikasi secara instan.
+          </p>
+          <div class="flex items-center gap-2 text-emerald-500 text-sm">
+            <span class="font-mono">~150ms</span>
+            <span class="text-zinc-500 italic">inference time</span>
+          </div>
+        </div>
+
+        <!-- Security -->
+        <div
+          class="group relative p-6 rounded-2xl bg-zinc-900 border border-zinc-800 hover:border-emerald-500/50 hover:scale-[1.02] transition-all duration-300"
+        >
+          <div class="p-2 rounded-lg bg-zinc-800 w-fit mb-4 group-hover:bg-emerald-500/10 transition-colors">
+            <Shield class="w-5 h-5 text-zinc-400 group-hover:text-emerald-500 transition-colors" :stroke-width="1.5" />
+          </div>
+          <h3 class="text-lg font-semibold text-white mb-2">Privasi Terjamin</h3>
+          <p class="text-zinc-400 text-sm mb-4">Foto Anda dapat diproses dengan aman tanpa harus khawatir disalahgunakan.</p>
+          <div class="flex items-center gap-2">
+            <span class="px-2 py-1 text-[10px] font-bold bg-zinc-800 rounded text-zinc-400 tracking-wider">CLIENT-SIDE</span>
+            <span class="px-2 py-1 text-[10px] font-bold bg-zinc-800 rounded text-zinc-400 tracking-wider">ENCRYPTED</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { Activity, Command, BarChart3, Zap, Shield } from 'lucide-vue-next'
+
+const dots = ref([true, true, true, false, true])
+const metrics = ['Akurasi', 'Presisi', 'Recall', 'F1-Score']
+const metricValues = [96, 95, 96, 95]
+
+let interval: ReturnType<typeof setInterval>
+
+onMounted(() => {
+  interval = setInterval(() => {
+    dots.value = dots.value.map(() => Math.random() > 0.2)
+  }, 2000)
+})
+
+onBeforeUnmount(() => {
+  clearInterval(interval)
+})
+</script>
diff --git a/resources/js/layouts/PublicLayout.vue b/resources/js/layouts/PublicLayout.vue
new file mode 100644
index 0000000..974b8f4
--- /dev/null
+++ b/resources/js/layouts/PublicLayout.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import Navbar from '@/components/public/Navbar.vue';
+import Footer from '@/components/public/Footer.vue';
+import Notification from '@/layouts/Notification.vue';
+</script>
+
+<template>
+    <div class="min-h-screen bg-background flex flex-col font-sans">
+        <Navbar />
+        <main class="flex-grow">
+            <slot />
+        </main>
+        <Footer />
+        <Notification />
+    </div>
+</template>
diff --git a/resources/js/layouts/auth/AuthSimpleLayout.vue b/resources/js/layouts/auth/AuthSimpleLayout.vue
index dde8954..f4d0845 100644
--- a/resources/js/layouts/auth/AuthSimpleLayout.vue
+++ b/resources/js/layouts/auth/AuthSimpleLayout.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { Link } from '@inertiajs/vue3';
 import { route } from 'ziggy-js';
-import AppLogoIcon from '@/components/AppLogoIcon.vue';
 
 defineProps<{
     title?: string;
@@ -11,7 +10,7 @@ defineProps<{
 
 <template>
     <div
-        class="flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10"
+        class="flex min-h-svh flex-col items-center justify-center gap-6 bg-black p-6 md:p-10 text-white"
     >
         <div class="w-full max-w-sm">
             <div class="flex flex-col gap-8">
@@ -21,22 +20,23 @@ defineProps<{
                         class="flex flex-col items-center gap-2 font-medium"
                     >
                         <div
-                            class="mb-1 flex h-9 w-9 items-center justify-center rounded-md"
+                            class="mb-1 flex h-12 w-12 items-center justify-center rounded-xl bg-emerald-500 shadow-lg shadow-emerald-500/20"
                         >
-                            <AppLogoIcon
-                                class="size-9 fill-current text-[var(--foreground)] dark:text-white"
-                            />
+                            <span class="text-zinc-950 font-bold text-xl">GB</span>
                         </div>
+                        <span class="font-semibold text-white text-xl tracking-wider">GREENS</span>
                         <span class="sr-only">{{ title }}</span>
                     </Link>
-                    <div class="space-y-2 text-center">
-                        <h1 class="text-xl font-medium">{{ title }}</h1>
-                        <p class="text-center text-sm text-muted-foreground">
+                    <div class="space-y-2 text-center mt-4">
+                        <h1 class="text-2xl font-bold">{{ title }}</h1>
+                        <p class="text-center text-sm text-zinc-400">
                             {{ description }}
                         </p>
                     </div>
                 </div>
-                <slot />
+                <div class="bg-zinc-900 border border-zinc-800 p-8 rounded-3xl shadow-2xl">
+                    <slot />
+                </div>
             </div>
         </div>
     </div>
diff --git a/resources/js/pages/admin/Dashboard.vue b/resources/js/pages/admin/Dashboard.vue
index 6332eae..5fc606f 100644
--- a/resources/js/pages/admin/Dashboard.vue
+++ b/resources/js/pages/admin/Dashboard.vue
@@ -3,6 +3,8 @@ import { Head } from '@inertiajs/vue3';
 import { route } from 'ziggy-js';
 import PlaceholderPattern from '@/components/PlaceholderPattern.vue';
 import { Card } from '@/components/ui/card';
+import { User } from '@/types';
+
 
 defineOptions({
     layout: {
diff --git a/resources/js/pages/auth/Login.vue b/resources/js/pages/auth/Login.vue
index 3ffe323..203aca2 100644
--- a/resources/js/pages/auth/Login.vue
+++ b/resources/js/pages/auth/Login.vue
@@ -12,8 +12,8 @@ import { Spinner } from '@/components/ui/spinner';
 
 defineOptions({
     layout: {
-        title: 'Log in to your account',
-        description: 'Enter your email and password below to log in',
+        title: 'Masuk ke Akun Anda',
+        description: 'Masukkan email dan kata sandi Anda di bawah ini',
     },
 });
 
@@ -25,11 +25,11 @@ defineProps<{
 </script>
 
 <template>
-    <Head title="Log in" />
+    <Head title="Masuk" />
 
     <div
         v-if="status"
-        class="mb-4 text-center text-sm font-medium text-green-600"
+        class="mb-4 text-center text-sm font-medium text-emerald-500"
     >
         {{ status }}
     </div>
@@ -42,7 +42,7 @@ defineProps<{
     >
         <div class="grid gap-6">
             <div class="grid gap-2">
-                <Label for="email">Email address</Label>
+                <Label for="email" class="text-zinc-300">Alamat Email</Label>
                 <Input
                     id="email"
                     type="email"
@@ -51,21 +51,22 @@ defineProps<{
                     autofocus
                     :tabindex="1"
                     autocomplete="email"
-                    placeholder="email@example.com"
+                    placeholder="email@contoh.com"
+                    class="bg-zinc-950 border-zinc-800 text-white placeholder:text-zinc-600 focus-visible:ring-emerald-500"
                 />
                 <InputError :message="errors.email" />
             </div>
 
             <div class="grid gap-2">
                 <div class="flex items-center justify-between">
-                    <Label for="password">Password</Label>
+                    <Label for="password" class="text-zinc-300">Kata Sandi</Label>
                     <TextLink
                         v-if="canResetPassword"
                         :href="route('password.request')"
-                        class="text-sm"
+                        class="text-sm text-emerald-500 hover:text-emerald-400"
                         :tabindex="5"
                     >
-                        Forgot password?
+                        Lupa kata sandi?
                     </TextLink>
                 </div>
                 <PasswordInput
@@ -74,36 +75,37 @@ defineProps<{
                     required
                     :tabindex="2"
                     autocomplete="current-password"
-                    placeholder="Password"
+                    placeholder="Kata Sandi"
+                    class="bg-zinc-950 border-zinc-800 text-white placeholder:text-zinc-600 focus-visible:ring-emerald-500"
                 />
                 <InputError :message="errors.password" />
             </div>
 
             <div class="flex items-center justify-between">
-                <Label for="remember" class="flex items-center space-x-3">
-                    <Checkbox id="remember" name="remember" :tabindex="3" />
-                    <span>Remember me</span>
+                <Label for="remember" class="flex items-center space-x-3 text-zinc-300 cursor-pointer">
+                    <Checkbox id="remember" name="remember" :tabindex="3" class="border-zinc-600 data-[state=checked]:bg-emerald-500 data-[state=checked]:border-emerald-500 data-[state=checked]:text-zinc-950" />
+                    <span class="text-sm">Ingat saya</span>
                 </Label>
             </div>
 
             <Button
                 type="submit"
-                class="mt-4 w-full"
+                class="mt-4 w-full bg-emerald-500 text-zinc-950 hover:bg-emerald-400 font-bold transition-all"
                 :tabindex="4"
                 :disabled="processing"
                 data-test="login-button"
             >
-                <Spinner v-if="processing" />
-                Log in
+                <Spinner v-if="processing" class="mr-2" />
+                Masuk
             </Button>
         </div>
 
         <div
-            class="text-center text-sm text-muted-foreground"
+            class="text-center text-sm text-zinc-400"
             v-if="canRegister"
         >
-            Don't have an account?
-            <TextLink :href="route('register')" :tabindex="5">Sign up</TextLink>
+            Belum punya akun?
+            <TextLink :href="route('register')" :tabindex="5" class="text-emerald-500 hover:text-emerald-400 font-medium ml-1">Daftar sekarang</TextLink>
         </div>
     </Form>
 </template>
diff --git a/resources/js/pages/public/Home.vue b/resources/js/pages/public/Home.vue
index 9f256a5..dcbce4d 100644
--- a/resources/js/pages/public/Home.vue
+++ b/resources/js/pages/public/Home.vue
@@ -4,9 +4,11 @@
     <Hero />
     <LogoMarquee />
     <BentoGrid />
+    <Kelebihan />
     <Pricing />
+    <FAQ />
     <FinalCta />
-    <Footer />
+    <Footer/>
   </div>
 </template>
 
@@ -14,8 +16,9 @@
 import Navbar from '@/components/public/Navbar.vue'
 import Hero from '@/components/public/Hero.vue'
 import LogoMarquee from '@/components/public/LogoMarquee.vue'
+import Kelebihan from '@/components/public/kelebihan.vue'
 import BentoGrid from '@/components/public/BentoGrid.vue'
 import Pricing from '@/components/public/Pricing.vue'
+import FAQ from '@/components/public/FAQ.vue'
 import FinalCta from '@/components/public/FinalCta.vue'
-import Footer from '@/components/public/Footer.vue'
 </script>