ciphera-net/pulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity

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

Browse Source
This commit is contained in:
Usman Baig
2026-01-30 16:28:09 +01:00
parent 0f1dbf05a1
commit df8f3f3624
1 changed files with 139 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
app/page.tsx
View File

@@ -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 />