Update logo to PNG, restructure network intelligence layout, add globe and fix pagination

src/app/(dashboard)/geography/page.tsx

@@ -10,6 +10,7 @@ import { WorldMap } from "@/components/ui/WorldMap";
 
 export default function GeographyPage() {
   const [mounted, setMounted] = useState(false);
+  const [showMap, setShowMap] = useState(false);
   const { data, isLoading } = useCountries(50); // fetch 50 countries
 
   useEffect(() => {
@@ -74,15 +75,36 @@ export default function GeographyPage() {
         </div>
       </div>
 
-      <Card className="bg-card/80 backdrop-blur-xl border-border/50 animate-slide-up" style={{ animationDelay: '100ms' }}>
-        <CardContent className="p-1 sm:p-4">
-          <WorldMap data={mapData} />
-        </CardContent>
-      </Card>
+      {showMap && (
+        <Card className="bg-card/80 backdrop-blur-xl border-border/50 animate-slide-up" style={{ animationDelay: '100ms' }}>
+          <CardHeader className="flex flex-row items-center justify-between border-b border-border/50 pb-4 mb-4">
+            <CardTitle className="text-lg text-white">Heatmap Visualization</CardTitle>
+            <button 
+              onClick={() => setShowMap(false)}
+              className="px-3 py-1.5 bg-red-500/20 hover:bg-red-500/30 text-red-400 border border-red-500/50 rounded-lg transition-colors flex items-center gap-2 text-sm"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+              Close Heatmap
+            </button>
+          </CardHeader>
+          <CardContent className="p-1 sm:p-4 pt-0">
+            <WorldMap data={mapData} />
+          </CardContent>
+        </Card>
+      )}
 
       <Card className="bg-card/80 backdrop-blur-xl border-border/50 animate-slide-up" style={{ animationDelay: '200ms' }}>
-        <CardHeader className="border-b border-border/50 pb-4 mb-4">
+        <CardHeader className="flex flex-row items-center justify-between border-b border-border/50 pb-4 mb-4">
           <CardTitle className="text-lg text-white">Traffic by Country ({data.length})</CardTitle>
+          {!showMap && (
+            <button 
+              onClick={() => setShowMap(true)} 
+              className="px-4 py-2 bg-blue-500/20 hover:bg-blue-500/30 text-blue-400 border border-blue-500/50 rounded-lg transition-all shadow-[0_0_15px_rgba(59,130,246,0.15)] flex items-center gap-2 text-sm font-medium"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/></svg>
+              Load Geographic Heatmap
+            </button>
+          )}
         </CardHeader>
         <CardContent>
           <DataTable