updated app layout

Author: unmukta

client/src/App.jsx

@@ -1,84 +1,92 @@
-import GlassCard from "./components/ui/GlassCard"
-import NeonButton from "./components/ui/NeonButton"
 import AnimatedBackground from "./components/animations/AnimatedBackground"
-import Sidebar from "./components/layout/Sidebar"
 import WebsiteStatusCard from "./components/dashboard/WebsiteStatusCard"
 import TrackerIntelligenceCard from "./components/dashboard/TrackerIntelligenceCard"
+import ProtectionStatusCard from "./components/dashboard/ProtectionStatusCard"
+import NeonButton from "./components/ui/NeonButton"
 
 function App() {
   return (
     <>
       <AnimatedBackground />
-      <Sidebar />
 
-      <main className="ml-72 min-h-screen p-10">
-        
-        <div className="max-w-6xl mx-auto">
+      <div className="min-h-screen flex items-center justify-center p-6">
+
+        {/* Extension Popup */}
+        <div
+          className="
+            w-[380px]
+            rounded-3xl
+            border border-white/10
+            bg-[#0d1117]/95
+            backdrop-blur-xl
+            shadow-2xl
+            overflow-hidden
+          "
+        >
 
           {/* Header */}
-          <div className="mb-10">
-            <h1 className="text-5xl font-bold text-cyan-400">
-              Security Overview
-            </h1>
-
-            <p className="text-gray-400 mt-3">
-              Monitor threats, privacy exposure, and browser security.
-            </p>
-          </div>
+          <div className="px-5 py-4 border-b border-white/5">
+
+            <div className="flex items-center justify-between">
 
-          {/* Dashboard Grid */}
-          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
+              <div>
+                <h1 className="text-lg font-semibold text-white">
+                  Ubiqui_Shield
+                </h1>
 
-            <GlassCard>
-              <h2 className="text-xl font-semibold text-cyan-300">
-                Privacy Score
-              </h2>
+                <p className="text-xs text-gray-400 mt-1">
+                  Browser Protection Active
+                </p>
+              </div>
 
-              <p className="text-5xl font-bold mt-6 text-white">
-                92%
-              </p>
-            </GlassCard>
+              <div className="
+                w-3
+                h-3
+                rounded-full
+                bg-green-400
+              " />
 
-            <GlassCard>
-              <h2 className="text-xl font-semibold text-cyan-300">
-                Threat Alerts
-              </h2>
+            </div>
 
-              <p className="text-5xl font-bold mt-6 text-red-400">
-                0
-              </p>
-            </GlassCard>
+          </div>
+
+          {/* Content */}
+          <div className="p-4 space-y-4">
 
             <WebsiteStatusCard />
 
             <TrackerIntelligenceCard />
 
-          </div>
+            <ProtectionStatusCard />
 
-          {/* Action Panel */}
-          <div className="mt-10">
-            <GlassCard className="flex items-center justify-between flex-wrap gap-4">
-              
-              <div>
-                <h2 className="text-2xl font-bold text-cyan-300">
-                  Real-Time Analysis
-                </h2>
+            {/* Action Buttons */}
+            <div className="grid grid-cols-2 gap-3">
 
-                <p className="text-gray-400 mt-2">
-                  Analyze websites, detect phishing, and improve privacy.
-                </p>
-              </div>
-
-              <NeonButton>
-                Launch Scan
+              <NeonButton className="text-sm py-2">
+                Scan Site
               </NeonButton>
 
-            </GlassCard>
+              <button
+                className="
+                  rounded-xl
+                  border border-white/10
+                  bg-white/5
+                  text-gray-300
+                  text-sm
+                  hover:bg-white/10
+                  transition
+                "
+              >
+                Settings
+              </button>
+
+            </div>
+
           </div>
 
         </div>
 
-      </main>
+      </div>
     </>
   )
 }

client/src/components/dashboard/ProtectionStatusCard.jsx

@@ -0,0 +1,75 @@
+import GlassCard from "../ui/GlassCard"
+import {
+  ShieldCheck,
+  Lock,
+  EyeOff,
+  Globe,
+} from "lucide-react"
+
+function ProtectionStatusCard() {
+  return (
+    <GlassCard>
+
+      <div className="flex items-center justify-between">
+
+        <div>
+          <h2 className="text-lg font-semibold text-white">
+            Protection Status
+          </h2>
+
+          <p className="text-sm text-gray-400 mt-1">
+            Browser defenses active
+          </p>
+        </div>
+
+        <ShieldCheck
+          className="text-green-400"
+          size={24}
+        />
+
+      </div>
+
+      <div className="mt-5 space-y-4">
+
+        <ProtectionItem
+          icon={<Lock size={16} />}
+          label="HTTPS Protection"
+          status="Enabled"
+        />
+
+        <ProtectionItem
+          icon={<EyeOff size={16} />}
+          label="Tracker Blocking"
+          status="Active"
+        />
+
+        <ProtectionItem
+          icon={<Globe size={16} />}
+          label="Safe Browsing"
+          status="Protected"
+        />
+
+      </div>
+
+    </GlassCard>
+  )
+}
+
+function ProtectionItem({ icon, label, status }) {
+  return (
+    <div className="flex items-center justify-between">
+
+      <div className="flex items-center gap-2 text-gray-300 text-sm">
+        {icon}
+        <span>{label}</span>
+      </div>
+
+      <span className="text-green-400 text-sm">
+        {status}
+      </span>
+
+    </div>
+  )
+}
+
+export default ProtectionStatusCard