feat: implement unique visitor tracking using Redis and display count on home page

app/page.tsx

@@ -3,9 +3,27 @@ import { Card, CardHeader } from "@/components/ui/card";
 import Image from "next/image";
 import { getFollowerCounts } from "@/lib/followers";
 import { LinkCard } from "@/components/LinkCard";
+import { getRedisClient } from "@/lib/redis";
+import { headers } from "next/headers";
+import { Users } from "lucide-react";
+import { Kbd } from "@/components/ui/kbd";
 
 export default async function Home() {
   const counts = await getFollowerCounts();
+  const headersList = await headers();
+  const ip = headersList.get("x-forwarded-for") || headersList.get("x-real-ip") || "unknown";
+  
+  let visitorCount = 0;
+  try {
+    const redis = await getRedisClient();
+    if (ip !== "unknown") {
+      await redis.sadd("erika:unique_visitors", ip);
+    }
+    visitorCount = await redis.scard("erika:unique_visitors");
+  } catch (e) {
+    console.error("Failed to track visitor:", e);
+  }
+
   const jsonLd = {
     "@context": "https://schema.org",
     "@type": "ProfilePage",
@@ -20,6 +38,7 @@ export default async function Home() {
     },
   };
 
+
   return (
     <main className="flex min-h-screen flex-col items-center justify-center p-4">
       <script
@@ -50,6 +69,14 @@ export default async function Home() {
             <p className="text-sm text-zinc-400 mt-1">
               {config.profile.desc}
             </p>
+            {visitorCount > 0 && (
+              <div className="mt-3 flex justify-center">
+                <Kbd>
+                  <Users className="size-3.5" />
+                  <span>{visitorCount} Unique Visitors</span>
+                </Kbd>
+              </div>
+            )}
           </div>
         </CardHeader>