feat: add DataComparisonSection to homepage for visual comparison of tracking methods, enhancing user understanding of privacy implications

app/page.tsx

@@ -40,6 +40,142 @@ function DashboardPreview() {
   )
 }
 
+function DataComparisonSection() {
+  const [activeTab, setActiveTab] = useState<'them' | 'us'>('us')
+
+  return (
+    <div className="w-full max-w-4xl mx-auto mb-32">
+      <div className="text-center mb-12">
+        <h2 className="text-3xl font-bold text-neutral-900 dark:text-white mb-4">What gets tracked?</h2>
+        <p className="text-neutral-500">See the difference between invasive tracking and privacy-first analytics.</p>
+      </div>
+
+      <div className="flex justify-center mb-8">
+        <div className="bg-neutral-100 dark:bg-neutral-800 p-1 rounded-lg inline-flex">
+          <button
+            onClick={() => setActiveTab('them')}
+            className={`px-6 py-2 rounded-md text-sm font-medium transition-all duration-200 ${
+              activeTab === 'them'
+                ? 'bg-white dark:bg-neutral-700 text-red-500 shadow-sm'
+                : 'text-neutral-500 hover:text-neutral-900 dark:hover:text-neutral-300'
+            }`}
+          >
+            Them (Google Analytics)
+          </button>
+          <button
+            onClick={() => setActiveTab('us')}
+            className={`px-6 py-2 rounded-md text-sm font-medium transition-all duration-200 ${
+              activeTab === 'us'
+                ? 'bg-white dark:bg-neutral-700 text-brand-orange shadow-sm'
+                : 'text-neutral-500 hover:text-neutral-900 dark:hover:text-neutral-300'
+            }`}
+          >
+            Us (Pulse)
+          </button>
+        </div>
+      </div>
+
+      <div className={`
+        relative overflow-hidden rounded-2xl border transition-colors duration-500
+        ${activeTab === 'them' 
+          ? 'border-red-200 dark:border-red-900/30 bg-red-50/50 dark:bg-red-900/10' 
+          : 'border-brand-orange/20 bg-brand-orange/5'
+        }
+      `}>
+        <div className="p-8 md:p-12">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+            {activeTab === 'them' ? (
+              <>
+                <div className="space-y-4">
+                  <div className="flex items-center gap-3 text-red-600 dark:text-red-400">
+                    <XIcon className="w-5 h-5" />
+                    <span className="font-medium">IP Address</span>
+                  </div>
+                  <div className="flex items-center gap-3 text-red-600 dark:text-red-400">
+                    <XIcon className="w-5 h-5" />
+                    <span className="font-medium">Exact Location (GPS)</span>
+                  </div>
+                  <div className="flex items-center gap-3 text-red-600 dark:text-red-400">
+                    <XIcon className="w-5 h-5" />
+                    <span className="font-medium">Device Fingerprint</span>
+                  </div>
+                  <div className="flex items-center gap-3 text-red-600 dark:text-red-400">
+                    <XIcon className="w-5 h-5" />
+                    <span className="font-medium">Advertising ID</span>
+                  </div>
+                </div>
+                <div className="space-y-4">
+                  <div className="flex items-center gap-3 text-red-600 dark:text-red-400">
+                    <XIcon className="w-5 h-5" />
+                    <span className="font-medium">Cross-site Tracking</span>
+                  </div>
+                  <div className="flex items-center gap-3 text-red-600 dark:text-red-400">
+                    <XIcon className="w-5 h-5" />
+                    <span className="font-medium">Personal Browsing History</span>
+                  </div>
+                  <div className="flex items-center gap-3 text-red-600 dark:text-red-400">
+                    <XIcon className="w-5 h-5" />
+                    <span className="font-medium">Demographics (Age, Gender)</span>
+                  </div>
+                  <div className="flex items-center gap-3 text-red-600 dark:text-red-400">
+                    <XIcon className="w-5 h-5" />
+                    <span className="font-medium">Interest Categories</span>
+                  </div>
+                </div>
+              </>
+            ) : (
+              <>
+                <div className="space-y-4">
+                  <div className="flex items-center gap-3 text-neutral-900 dark:text-white">
+                    <CheckCircleIcon className="w-5 h-5 text-brand-orange" />
+                    <span className="font-medium">Page URL</span>
+                  </div>
+                  <div className="flex items-center gap-3 text-neutral-900 dark:text-white">
+                    <CheckCircleIcon className="w-5 h-5 text-brand-orange" />
+                    <span className="font-medium">Referrer Source</span>
+                  </div>
+                  <div className="flex items-center gap-3 text-neutral-900 dark:text-white">
+                    <CheckCircleIcon className="w-5 h-5 text-brand-orange" />
+                    <span className="font-medium">Country (Approximate)</span>
+                  </div>
+                </div>
+                <div className="space-y-4">
+                  <div className="flex items-center gap-3 text-neutral-900 dark:text-white">
+                    <CheckCircleIcon className="w-5 h-5 text-brand-orange" />
+                    <span className="font-medium">Device Type (Mobile/Desktop)</span>
+                  </div>
+                  <div className="flex items-center gap-3 text-neutral-900 dark:text-white">
+                    <CheckCircleIcon className="w-5 h-5 text-brand-orange" />
+                    <span className="font-medium">Browser & OS</span>
+                  </div>
+                  <div className="flex items-center gap-3 text-neutral-900 dark:text-white">
+                    <CheckCircleIcon className="w-5 h-5 text-brand-orange" />
+                    <span className="font-medium">Screen Size</span>
+                  </div>
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+        
+        {/* Warning/Success Banner at bottom */}
+        <div className={`
+          p-4 text-center text-sm font-medium
+          ${activeTab === 'them' 
+            ? 'bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-200' 
+            : 'bg-brand-orange/10 text-brand-orange'
+          }
+        `}>
+          {activeTab === 'them' 
+            ? "⚠️ This data is sold to advertisers and used to profile your users."
+            : "🛡️ This data is aggregated and never linked to individual users."
+          }
+        </div>
+      </div>
+    </div>
+  )
+}
+
 function ComparisonSection() {
   return (
     <div className="w-full max-w-4xl mx-auto mb-32">
@@ -213,6 +349,9 @@ export default function HomePage() {
             ))}
           </div>
 
+          {/* * NEW: DATA COMPARISON TOGGLE */}
+          <DataComparisonSection />
+
           {/* * NEW: COMPARISON SECTION */}
           <ComparisonSection />