feat: dark-only cleanup for marketing pages and authenticated landing view
This commit is contained in:
Usman Baig
@@ -15,23 +15,23 @@ function ComparisonTable({ title, competitors }: { title: string, competitors: {
|
||||
|
||||
return (
|
||||
<div className="mb-16">
|
||||
<h2 className="text-2xl font-bold mb-6 text-neutral-900 dark:text-white">{title}</h2>
|
||||
<div className="overflow-hidden rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white/50 dark:bg-neutral-900/50 backdrop-blur-sm">
|
||||
<h2 className="text-2xl font-bold mb-6 text-white">{title}</h2>
|
||||
<div className="overflow-hidden rounded-2xl border border-neutral-800 bg-neutral-900/50 backdrop-blur-sm">
|
||||
<table className="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr className="border-b border-neutral-200 dark:border-neutral-800">
|
||||
<tr className="border-b border-neutral-800">
|
||||
<th className="p-4 sm:p-6 text-sm font-medium text-neutral-500">Feature</th>
|
||||
{competitors.map((comp) => (
|
||||
<th key={comp.name} className={`p-4 sm:p-6 text-sm font-bold ${comp.isPulse ? 'text-brand-orange' : 'text-neutral-900 dark:text-white'}`}>
|
||||
<th key={comp.name} className={`p-4 sm:p-6 text-sm font-bold ${comp.isPulse ? 'text-brand-orange' : 'text-white'}`}>
|
||||
{comp.name}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-neutral-200 dark:divide-neutral-800">
|
||||
<tbody className="divide-y divide-neutral-800">
|
||||
{allFeatures.map((feature) => (
|
||||
<tr key={feature} className="hover:bg-neutral-50/50 dark:hover:bg-neutral-800/50 transition-colors">
|
||||
<td className="p-4 sm:p-6 text-neutral-900 dark:text-white font-medium text-sm sm:text-base">{feature}</td>
|
||||
<tr key={feature} className="hover:bg-neutral-800/50 transition-colors">
|
||||
<td className="p-4 sm:p-6 text-white font-medium text-sm sm:text-base">{feature}</td>
|
||||
{competitors.map((comp) => {
|
||||
const val = comp.features[feature]
|
||||
return (
|
||||
@@ -41,7 +41,7 @@ function ComparisonTable({ title, competitors }: { title: string, competitors: {
|
||||
) : val === false ? (
|
||||
<XIcon className="w-5 h-5 text-red-500" />
|
||||
) : (
|
||||
<span className={comp.isPulse ? 'text-green-500 font-medium' : 'text-neutral-600 dark:text-neutral-400'}>{val}</span>
|
||||
<span className={comp.isPulse ? 'text-green-500 font-medium' : 'text-neutral-400'}>{val}</span>
|
||||
)}
|
||||
</td>
|
||||
)
|
||||
@@ -60,9 +60,9 @@ export default function AboutPage() {
|
||||
<div className="relative min-h-screen flex flex-col overflow-hidden">
|
||||
{/* * --- ATMOSPHERE (Background) --- */}
|
||||
<div className="absolute inset-0 -z-10 pointer-events-none">
|
||||
<div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-500/10 dark:bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
|
||||
<div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
|
||||
<div
|
||||
className="absolute inset-0 bg-grid-pattern opacity-[0.02] dark:opacity-[0.05]"
|
||||
className="absolute inset-0 bg-grid-pattern opacity-[0.05]"
|
||||
style={{ maskImage: 'radial-gradient(ellipse at center, black 0%, transparent 70%)' }}
|
||||
/>
|
||||
</div>
|
||||
@@ -74,10 +74,10 @@ export default function AboutPage() {
|
||||
transition={{ duration: 0.5 }}
|
||||
className="text-center mb-16"
|
||||
>
|
||||
<h1 className="text-4xl md:text-5xl font-bold tracking-tight text-neutral-900 dark:text-white mb-6">
|
||||
<h1 className="text-4xl md:text-5xl font-bold tracking-tight text-white mb-6">
|
||||
Why Pulse?
|
||||
</h1>
|
||||
<p className="text-xl text-neutral-600 dark:text-neutral-400 max-w-2xl mx-auto leading-relaxed">
|
||||
<p className="text-xl text-neutral-400 max-w-2xl mx-auto leading-relaxed">
|
||||
We built Pulse because we were tired of complex, invasive analytics tools.
|
||||
Here is how we stack up against the giants.
|
||||
</p>
|
||||
@@ -87,9 +87,9 @@ export default function AboutPage() {
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: 0.1 }}
|
||||
className="prose prose-neutral dark:prose-invert max-w-none mb-16"
|
||||
className="prose prose-invert max-w-none mb-16"
|
||||
>
|
||||
<p className="text-lg text-neutral-600 dark:text-neutral-400">
|
||||
<p className="text-lg text-neutral-400">
|
||||
Most analytics tools are overkill. They track everything, slow down your site, and require annoying cookie banners.
|
||||
Pulse is different. We focus on the metrics that actually matter—visitors, pageviews, and sources—while respecting user privacy.
|
||||
</p>
|
||||
@@ -162,10 +162,10 @@ export default function AboutPage() {
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="mt-8 p-6 bg-neutral-100 dark:bg-neutral-800/50 rounded-xl border border-neutral-200 dark:border-neutral-800"
|
||||
className="mt-8 p-6 bg-neutral-800/50 rounded-xl border border-neutral-800"
|
||||
>
|
||||
<h3 className="text-xl font-bold mb-2 text-neutral-900 dark:text-white">What about Plausible?</h3>
|
||||
<p className="text-neutral-600 dark:text-neutral-400 text-sm">
|
||||
<h3 className="text-xl font-bold mb-2 text-white">What about Plausible?</h3>
|
||||
<p className="text-neutral-400 text-sm">
|
||||
We love Plausible! They paved the way for privacy-friendly analytics.
|
||||
Pulse offers a similar philosophy but with a focus on even deeper integration with the Ciphera ecosystem
|
||||
and more flexible pricing for developers.
|
||||
|
||||
@@ -109,9 +109,9 @@ export default function FeaturesPage() {
|
||||
<div className="relative min-h-screen flex flex-col overflow-hidden">
|
||||
{/* * --- ATMOSPHERE (Background) --- */}
|
||||
<div className="absolute inset-0 -z-10 pointer-events-none">
|
||||
<div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-500/10 dark:bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
|
||||
<div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
|
||||
<div
|
||||
className="absolute inset-0 bg-grid-pattern opacity-[0.02] dark:opacity-[0.05]"
|
||||
className="absolute inset-0 bg-grid-pattern opacity-[0.05]"
|
||||
style={{ maskImage: 'radial-gradient(ellipse at center, black 0%, transparent 70%)' }}
|
||||
/>
|
||||
</div>
|
||||
@@ -128,11 +128,11 @@ export default function FeaturesPage() {
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-brand-orange animate-pulse" />
|
||||
Product Tour
|
||||
</span>
|
||||
<h1 className="text-4xl md:text-5xl font-bold tracking-tight text-neutral-900 dark:text-white mb-6">
|
||||
<h1 className="text-4xl md:text-5xl font-bold tracking-tight text-white mb-6">
|
||||
Everything you need. <br />
|
||||
<span className="gradient-text">Nothing you don't.</span>
|
||||
</h1>
|
||||
<p className="text-xl text-neutral-600 dark:text-neutral-400 max-w-2xl mx-auto leading-relaxed">
|
||||
<p className="text-xl text-neutral-400 max-w-2xl mx-auto leading-relaxed">
|
||||
Pulse gives you meaningful analytics without the complexity, the cookies, or the privacy trade-offs.
|
||||
</p>
|
||||
</motion.div>
|
||||
@@ -151,10 +151,10 @@ export default function FeaturesPage() {
|
||||
<div className="w-12 h-12 rounded-xl bg-brand-orange/10 flex items-center justify-center mb-6 text-brand-orange group-hover:scale-110 transition-transform duration-300">
|
||||
<feature.icon className="w-6 h-6" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-neutral-900 dark:text-white mb-3">
|
||||
<h3 className="text-xl font-bold text-white mb-3">
|
||||
{feature.title}
|
||||
</h3>
|
||||
<p className="text-neutral-600 dark:text-neutral-400 leading-relaxed">
|
||||
<p className="text-neutral-400 leading-relaxed">
|
||||
{feature.description}
|
||||
</p>
|
||||
</motion.div>
|
||||
@@ -170,10 +170,10 @@ export default function FeaturesPage() {
|
||||
className="mb-28"
|
||||
>
|
||||
<div className="text-center mb-14">
|
||||
<h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-4">
|
||||
<h2 className="text-2xl font-bold text-white mb-4">
|
||||
Powerful analytics, <span className="gradient-text">simplified</span>
|
||||
</h2>
|
||||
<p className="text-lg text-neutral-600 dark:text-neutral-400 max-w-2xl mx-auto">
|
||||
<p className="text-lg text-neutral-400 max-w-2xl mx-auto">
|
||||
Everything from real-time dashboards to conversion funnels — without the bloat.
|
||||
</p>
|
||||
</div>
|
||||
@@ -192,10 +192,10 @@ export default function FeaturesPage() {
|
||||
{cap.icon}
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-bold text-neutral-900 dark:text-white mb-1">
|
||||
<h3 className="font-bold text-white mb-1">
|
||||
{cap.title}
|
||||
</h3>
|
||||
<p className="text-sm text-neutral-600 dark:text-neutral-400 leading-relaxed">
|
||||
<p className="text-sm text-neutral-400 leading-relaxed">
|
||||
{cap.description}
|
||||
</p>
|
||||
</div>
|
||||
@@ -210,14 +210,14 @@ export default function FeaturesPage() {
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="mb-28 p-10 md:p-14 bg-white/50 dark:bg-neutral-900/50 backdrop-blur-sm border border-neutral-200 dark:border-neutral-800 rounded-2xl"
|
||||
className="mb-28 p-10 md:p-14 bg-neutral-900/50 backdrop-blur-sm border border-neutral-800 rounded-2xl"
|
||||
>
|
||||
<div className="grid md:grid-cols-2 gap-10 items-center">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-4">
|
||||
<h2 className="text-2xl font-bold text-white mb-4">
|
||||
Content that <span className="gradient-text">performs</span>
|
||||
</h2>
|
||||
<p className="text-neutral-600 dark:text-neutral-400 leading-relaxed mb-6">
|
||||
<p className="text-neutral-400 leading-relaxed mb-6">
|
||||
See which pages drive the most traffic, where visitors enter your site, and where they leave. Use data to double down on what works.
|
||||
</p>
|
||||
<ul className="space-y-3">
|
||||
@@ -228,7 +228,7 @@ export default function FeaturesPage() {
|
||||
'Referral sources — where traffic comes from',
|
||||
'Browser, OS & device breakdowns',
|
||||
].map((item) => (
|
||||
<li key={item} className="flex items-start gap-3 text-sm text-neutral-600 dark:text-neutral-400">
|
||||
<li key={item} className="flex items-start gap-3 text-sm text-neutral-400">
|
||||
<svg className="w-5 h-5 text-brand-orange shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="m4.5 12.75 6 6 9-13.5" />
|
||||
</svg>
|
||||
@@ -250,17 +250,17 @@ export default function FeaturesPage() {
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.4, delay: i * 0.1 }}
|
||||
className="p-4 bg-neutral-50 dark:bg-neutral-800/50 rounded-xl"
|
||||
className="p-4 bg-neutral-800/50 rounded-xl"
|
||||
>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-sm font-medium text-neutral-900 dark:text-white truncate mr-4">
|
||||
<span className="text-sm font-medium text-white truncate mr-4">
|
||||
{page.label}
|
||||
</span>
|
||||
<span className="text-sm text-neutral-500 dark:text-neutral-400 shrink-0">
|
||||
<span className="text-sm text-neutral-400 shrink-0">
|
||||
{page.views} views
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-1.5 bg-neutral-200 dark:bg-neutral-700 rounded-full overflow-hidden">
|
||||
<div className="h-1.5 bg-neutral-700 rounded-full overflow-hidden">
|
||||
<motion.div
|
||||
initial={{ width: 0 }}
|
||||
whileInView={{ width: `${page.pct}%` }}
|
||||
@@ -284,10 +284,10 @@ export default function FeaturesPage() {
|
||||
className="mb-28"
|
||||
>
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-4">
|
||||
<h2 className="text-2xl font-bold text-white mb-4">
|
||||
Built for trust
|
||||
</h2>
|
||||
<p className="text-lg text-neutral-600 dark:text-neutral-400 max-w-2xl mx-auto">
|
||||
<p className="text-lg text-neutral-400 max-w-2xl mx-auto">
|
||||
Open source, Swiss hosted, and designed to keep your visitors' data where it belongs.
|
||||
</p>
|
||||
</div>
|
||||
@@ -306,8 +306,8 @@ export default function FeaturesPage() {
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="m4.5 12.75 6 6 9-13.5" />
|
||||
</svg>
|
||||
<div>
|
||||
<span className="font-semibold text-neutral-900 dark:text-white text-sm">{signal.label}</span>
|
||||
<p className="text-xs text-neutral-500 dark:text-neutral-400 mt-0.5">{signal.detail}</p>
|
||||
<span className="font-semibold text-white text-sm">{signal.label}</span>
|
||||
<p className="text-xs text-neutral-400 mt-0.5">{signal.detail}</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
@@ -340,10 +340,10 @@ export default function FeaturesPage() {
|
||||
className="mb-28"
|
||||
>
|
||||
<div className="text-center mb-14">
|
||||
<h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-4">
|
||||
<h2 className="text-2xl font-bold text-white mb-4">
|
||||
Up and running in <span className="gradient-text">3 minutes</span>
|
||||
</h2>
|
||||
<p className="text-lg text-neutral-600 dark:text-neutral-400 max-w-2xl mx-auto">
|
||||
<p className="text-lg text-neutral-400 max-w-2xl mx-auto">
|
||||
No SDKs to install, no build steps, no configuration files.
|
||||
</p>
|
||||
</div>
|
||||
@@ -366,15 +366,15 @@ export default function FeaturesPage() {
|
||||
{s.step}
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-bold text-neutral-900 dark:text-white text-sm">
|
||||
<h3 className="font-bold text-white text-sm">
|
||||
{s.title}
|
||||
</h3>
|
||||
<p className="text-xs text-neutral-500 dark:text-neutral-400">
|
||||
<p className="text-xs text-neutral-400">
|
||||
{s.desc}
|
||||
</p>
|
||||
</div>
|
||||
{i < 2 && (
|
||||
<ArrowRightIcon className="w-5 h-5 text-neutral-300 dark:text-neutral-600 shrink-0 hidden md:block" />
|
||||
<ArrowRightIcon className="w-5 h-5 text-neutral-600 shrink-0 hidden md:block" />
|
||||
)}
|
||||
</motion.div>
|
||||
))}
|
||||
@@ -389,10 +389,10 @@ export default function FeaturesPage() {
|
||||
transition={{ duration: 0.5 }}
|
||||
className="text-center mb-20"
|
||||
>
|
||||
<h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-4">
|
||||
<h2 className="text-2xl font-bold text-white mb-4">
|
||||
Ready to see it in action?
|
||||
</h2>
|
||||
<p className="text-neutral-600 dark:text-neutral-400 mb-8 max-w-lg mx-auto">
|
||||
<p className="text-neutral-400 mb-8 max-w-lg mx-auto">
|
||||
Start for free. No credit card required. Cancel anytime.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
|
||||
|
||||
@@ -9,26 +9,26 @@ export default function InstallationPage() {
|
||||
{/* * --- 1. ATMOSPHERE (Background) --- */}
|
||||
<div className="absolute inset-0 -z-10 pointer-events-none">
|
||||
{/* * Bottom-right Neutral Glow */}
|
||||
<div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-500/10 dark:bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
|
||||
<div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
|
||||
{/* * Grid Pattern with Radial Mask */}
|
||||
<div
|
||||
className="absolute inset-0 bg-grid-pattern opacity-[0.02] dark:opacity-[0.05]"
|
||||
className="absolute inset-0 bg-grid-pattern opacity-[0.05]"
|
||||
style={{ maskImage: 'radial-gradient(ellipse at center, black 0%, transparent 70%)' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex-grow w-full max-w-4xl mx-auto px-4 pt-20 pb-10 z-10">
|
||||
<div className="text-center mb-12">
|
||||
<h1 className="text-4xl md:text-5xl font-bold tracking-tight text-neutral-900 dark:text-white mb-6">
|
||||
<h1 className="text-4xl md:text-5xl font-bold tracking-tight text-white mb-6">
|
||||
Installation
|
||||
</h1>
|
||||
<p className="text-xl text-neutral-600 dark:text-neutral-400 max-w-2xl mx-auto leading-relaxed">
|
||||
<p className="text-xl text-neutral-400 max-w-2xl mx-auto leading-relaxed">
|
||||
Get up and running with Pulse in seconds.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="w-full text-center">
|
||||
<h2 className="text-2xl font-bold mb-8 text-neutral-900 dark:text-white">Add the snippet</h2>
|
||||
<h2 className="text-2xl font-bold mb-8 text-white">Add the snippet</h2>
|
||||
<p className="text-neutral-500 mb-8">Just add this snippet to your <head> tag in your layout or index file.</p>
|
||||
|
||||
<div className="max-w-2xl mx-auto bg-neutral-900 rounded-xl overflow-hidden shadow-2xl text-left border border-neutral-800">
|
||||
@@ -57,9 +57,9 @@ export default function InstallationPage() {
|
||||
</div>
|
||||
|
||||
<div className="w-full mt-16 text-center">
|
||||
<h2 className="text-2xl font-bold mb-4 text-neutral-900 dark:text-white">Custom events (goals)</h2>
|
||||
<h2 className="text-2xl font-bold mb-4 text-white">Custom events (goals)</h2>
|
||||
<p className="text-neutral-500 mb-6 max-w-xl mx-auto">
|
||||
Track custom events (e.g. signup, purchase) with <code className="px-1.5 py-0.5 rounded bg-neutral-200 dark:bg-neutral-700 text-sm font-mono">pulse.track('event_name')</code>. Use letters, numbers, and underscores only. Define goals in your site Settings → Goals & Events to see counts in the dashboard.
|
||||
Track custom events (e.g. signup, purchase) with <code className="px-1.5 py-0.5 rounded bg-neutral-700 text-sm font-mono">pulse.track('event_name')</code>. Use letters, numbers, and underscores only. Define goals in your site Settings → Goals & Events to see counts in the dashboard.
|
||||
</p>
|
||||
<div className="max-w-2xl mx-auto bg-neutral-900 rounded-xl overflow-hidden shadow-2xl text-left border border-neutral-800">
|
||||
<div className="flex items-center px-4 py-3 bg-neutral-800 border-b border-neutral-800">
|
||||
|
||||
@@ -8,9 +8,9 @@ export default function NextJsIntegrationPage() {
|
||||
<div className="relative min-h-screen flex flex-col overflow-hidden">
|
||||
{/* * --- ATMOSPHERE (Background) --- */}
|
||||
<div className="absolute inset-0 -z-10 pointer-events-none">
|
||||
<div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-500/10 dark:bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
|
||||
<div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
|
||||
<div
|
||||
className="absolute inset-0 bg-grid-pattern opacity-[0.02] dark:opacity-[0.05]"
|
||||
className="absolute inset-0 bg-grid-pattern opacity-[0.05]"
|
||||
style={{ maskImage: 'radial-gradient(ellipse at center, black 0%, transparent 70%)' }}
|
||||
/>
|
||||
</div>
|
||||
@@ -25,22 +25,22 @@ export default function NextJsIntegrationPage() {
|
||||
</Link>
|
||||
|
||||
<div className="flex items-center gap-4 mb-8">
|
||||
<div className="p-3 bg-neutral-100 dark:bg-neutral-800 rounded-xl">
|
||||
<svg viewBox="0 0 128 128" className="w-10 h-10 dark:invert">
|
||||
<div className="p-3 bg-neutral-800 rounded-xl">
|
||||
<svg viewBox="0 0 128 128" className="w-10 h-10 invert">
|
||||
<path d="M64 0C28.7 0 0 28.7 0 64s28.7 64 64 64 64-28.7 64-64S99.3 0 64 0zm27.6 93.9c-.8.9-2.2 1-3.1.2L42.8 52.8V88c0 1.3-1.1 2.3-2.3 2.3h-7.4c-1.3 0-2.3-1.1-2.3-2.3V40c0-1.3 1.1-2.3 2.3-2.3h7.4c1 0 1.9.6 2.2 1.5l48.6 44.8V40c0-1.3 1.1-2.3 2.3-2.3h7.4c1.3 0 2.3 1.1 2.3 2.3v48c0 1.3-1.1 2.3-2.3 2.3h-6.8c-.9 0-1.7-.5-2.1-1.3z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h1 className="text-4xl md:text-5xl font-bold tracking-tight text-neutral-900 dark:text-white">
|
||||
<h1 className="text-4xl md:text-5xl font-bold tracking-tight text-white">
|
||||
Next.js Integration
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div className="prose prose-neutral dark:prose-invert max-w-none">
|
||||
<p className="lead text-xl text-neutral-600 dark:text-neutral-400">
|
||||
<div className="prose prose-invert max-w-none">
|
||||
<p className="lead text-xl text-neutral-400">
|
||||
The best way to add Pulse to your Next.js application is using the built-in <code>next/script</code> component.
|
||||
</p>
|
||||
|
||||
<hr className="my-8 border-neutral-200 dark:border-neutral-800" />
|
||||
<hr className="my-8 border-neutral-800" />
|
||||
|
||||
<h3>Using App Router (Recommended)</h3>
|
||||
<p>
|
||||
|
||||
@@ -93,9 +93,9 @@ export default function IntegrationsPage() {
|
||||
<div className="relative min-h-screen flex flex-col overflow-hidden">
|
||||
{/* * --- ATMOSPHERE (Background) --- */}
|
||||
<div className="absolute inset-0 -z-10 pointer-events-none">
|
||||
<div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-500/10 dark:bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
|
||||
<div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
|
||||
<div
|
||||
className="absolute inset-0 bg-grid-pattern opacity-[0.02] dark:opacity-[0.05]"
|
||||
className="absolute inset-0 bg-grid-pattern opacity-[0.05]"
|
||||
style={{ maskImage: 'radial-gradient(ellipse at center, black 0%, transparent 70%)' }}
|
||||
/>
|
||||
</div>
|
||||
@@ -109,14 +109,14 @@ export default function IntegrationsPage() {
|
||||
>
|
||||
{/* * --- Title with count badge --- */}
|
||||
<div className="flex items-center justify-center gap-3 mb-6">
|
||||
<h1 className="text-4xl md:text-5xl font-bold tracking-tight text-neutral-900 dark:text-white">
|
||||
<h1 className="text-4xl md:text-5xl font-bold tracking-tight text-white">
|
||||
Integrations
|
||||
</h1>
|
||||
<span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-semibold bg-brand-orange/10 text-brand-orange border border-brand-orange/20">
|
||||
{integrations.length}+
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-xl text-neutral-600 dark:text-neutral-400 max-w-2xl mx-auto leading-relaxed mb-8">
|
||||
<p className="text-xl text-neutral-400 max-w-2xl mx-auto leading-relaxed mb-8">
|
||||
Connect Pulse with {integrations.length}+ frameworks and platforms in minutes.
|
||||
</p>
|
||||
|
||||
@@ -143,12 +143,12 @@ export default function IntegrationsPage() {
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
placeholder="Search integrations..."
|
||||
className="w-full pl-12 pr-16 py-3 bg-white/70 dark:bg-neutral-900/70 backdrop-blur-sm border border-neutral-200 dark:border-neutral-800 rounded-xl text-neutral-900 dark:text-white placeholder:text-neutral-400 focus:outline-none focus:ring-2 focus:ring-brand-orange/50 focus:border-brand-orange/50 transition-all"
|
||||
className="w-full pl-12 pr-16 py-3 bg-neutral-900/70 backdrop-blur-sm border border-neutral-800 rounded-xl text-white placeholder:text-neutral-400 focus:outline-none focus:ring-2 focus:ring-brand-orange/50 focus:border-brand-orange/50 transition-all"
|
||||
/>
|
||||
{query ? (
|
||||
<button
|
||||
onClick={() => setQuery('')}
|
||||
className="absolute inset-y-0 right-0 flex items-center pr-4 text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300 transition-colors"
|
||||
className="absolute inset-y-0 right-0 flex items-center pr-4 text-neutral-400 hover:text-neutral-600 hover:text-neutral-300 transition-colors"
|
||||
aria-label="Clear search"
|
||||
>
|
||||
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
|
||||
@@ -157,7 +157,7 @@ export default function IntegrationsPage() {
|
||||
</button>
|
||||
) : (
|
||||
<div className="absolute inset-y-0 right-0 flex items-center pr-4 pointer-events-none">
|
||||
<kbd className="hidden sm:inline-flex items-center px-1.5 py-0.5 rounded text-xs font-mono font-medium bg-neutral-200/80 dark:bg-neutral-700/80 text-neutral-500 dark:text-neutral-400 border border-neutral-300 dark:border-neutral-600">
|
||||
<kbd className="hidden sm:inline-flex items-center px-1.5 py-0.5 rounded text-xs font-mono font-medium bg-neutral-700/80 text-neutral-400 border border-neutral-600">
|
||||
/
|
||||
</kbd>
|
||||
</div>
|
||||
@@ -169,7 +169,7 @@ export default function IntegrationsPage() {
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: -5 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="text-sm text-neutral-500 dark:text-neutral-400 mt-3"
|
||||
className="text-sm text-neutral-400 mt-3"
|
||||
>
|
||||
{totalResults} {totalResults === 1 ? 'integration' : 'integrations'} found
|
||||
{query && <> for “{query}”</>}
|
||||
@@ -189,7 +189,7 @@ export default function IntegrationsPage() {
|
||||
className={`px-4 py-1.5 rounded-full text-sm font-medium transition-all ${
|
||||
activeCategory === 'all'
|
||||
? 'bg-brand-orange text-white shadow-sm'
|
||||
: 'bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-700'
|
||||
: 'bg-neutral-800 text-neutral-400 hover:bg-neutral-700'
|
||||
}`}
|
||||
>
|
||||
All
|
||||
@@ -201,7 +201,7 @@ export default function IntegrationsPage() {
|
||||
className={`px-4 py-1.5 rounded-full text-sm font-medium transition-all ${
|
||||
activeCategory === cat
|
||||
? 'bg-brand-orange text-white shadow-sm'
|
||||
: 'bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-700'
|
||||
: 'bg-neutral-800 text-neutral-400 hover:bg-neutral-700'
|
||||
}`}
|
||||
>
|
||||
{categoryLabels[cat]}
|
||||
@@ -226,7 +226,7 @@ export default function IntegrationsPage() {
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.4 }}
|
||||
className="text-lg font-semibold text-neutral-500 dark:text-neutral-400 mb-6 tracking-wide uppercase flex items-center gap-2"
|
||||
className="text-lg font-semibold text-neutral-400 mb-6 tracking-wide uppercase flex items-center gap-2"
|
||||
>
|
||||
<svg className="w-5 h-5 text-brand-orange" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M10 1l2.39 4.84 5.34.78-3.87 3.77.91 5.33L10 13.27l-4.77 2.5.91-5.33L2.27 6.67l5.34-.78L10 1z" />
|
||||
@@ -245,12 +245,12 @@ export default function IntegrationsPage() {
|
||||
>
|
||||
<Link
|
||||
href={`/integrations/${integration!.id}`}
|
||||
className="group flex items-center gap-3 p-4 bg-white/50 dark:bg-neutral-900/50 backdrop-blur-sm border border-neutral-200 dark:border-neutral-800 rounded-xl hover:border-brand-orange/50 dark:hover:border-brand-orange/50 transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg h-full"
|
||||
className="group flex items-center gap-3 p-4 bg-neutral-900/50 backdrop-blur-sm border border-neutral-800 rounded-xl hover:border-brand-orange/50 transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg h-full"
|
||||
>
|
||||
<div className="p-2 bg-neutral-100 dark:bg-neutral-800 rounded-lg shrink-0 group-hover:scale-110 transition-transform duration-300 [&_svg]:w-6 [&_svg]:h-6">
|
||||
<div className="p-2 bg-neutral-800 rounded-lg shrink-0 group-hover:scale-110 transition-transform duration-300 [&_svg]:w-6 [&_svg]:h-6">
|
||||
{integration!.icon}
|
||||
</div>
|
||||
<span className="font-semibold text-neutral-900 dark:text-white text-sm">
|
||||
<span className="font-semibold text-white text-sm">
|
||||
{integration!.name}
|
||||
</span>
|
||||
</Link>
|
||||
@@ -268,7 +268,7 @@ export default function IntegrationsPage() {
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.4 }}
|
||||
className="text-lg font-semibold text-neutral-500 dark:text-neutral-400 mb-6 tracking-wide uppercase"
|
||||
className="text-lg font-semibold text-neutral-400 mb-6 tracking-wide uppercase"
|
||||
>
|
||||
{group.label}
|
||||
</motion.h2>
|
||||
@@ -284,19 +284,19 @@ export default function IntegrationsPage() {
|
||||
>
|
||||
<Link
|
||||
href={`/integrations/${integration.id}`}
|
||||
className="group relative p-6 bg-white/50 dark:bg-neutral-900/50 backdrop-blur-sm border border-neutral-200 dark:border-neutral-800 rounded-2xl hover:border-brand-orange/50 dark:hover:border-brand-orange/50 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl block h-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2"
|
||||
className="group relative p-6 bg-neutral-900/50 backdrop-blur-sm border border-neutral-800 rounded-2xl hover:border-brand-orange/50 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl block h-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2"
|
||||
>
|
||||
<div className="flex items-start justify-between mb-6">
|
||||
<div className="p-3 bg-neutral-100 dark:bg-neutral-800 rounded-xl group-hover:scale-110 transition-transform duration-300">
|
||||
<div className="p-3 bg-neutral-800 rounded-xl group-hover:scale-110 transition-transform duration-300">
|
||||
{integration.icon}
|
||||
</div>
|
||||
<ArrowRightIcon className="w-5 h-5 text-neutral-400 group-hover:text-brand-orange transition-colors" />
|
||||
</div>
|
||||
|
||||
<h3 className="text-xl font-bold text-neutral-900 dark:text-white mb-3">
|
||||
<h3 className="text-xl font-bold text-white mb-3">
|
||||
{integration.name}
|
||||
</h3>
|
||||
<p className="text-neutral-600 dark:text-neutral-400 leading-relaxed mb-4">
|
||||
<p className="text-neutral-400 leading-relaxed mb-4">
|
||||
{integration.description}
|
||||
</p>
|
||||
<span className="text-sm font-medium text-brand-orange opacity-0 group-hover:opacity-100 transition-opacity flex items-center gap-1">
|
||||
@@ -317,20 +317,20 @@ export default function IntegrationsPage() {
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
exit={{ opacity: 0, scale: 0.95 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="max-w-md mx-auto mt-8 p-10 border border-dashed border-neutral-300 dark:border-neutral-700 rounded-2xl flex flex-col items-center justify-center text-center"
|
||||
className="max-w-md mx-auto mt-8 p-10 border border-dashed border-neutral-700 rounded-2xl flex flex-col items-center justify-center text-center"
|
||||
>
|
||||
<div className="p-4 bg-neutral-100 dark:bg-neutral-800 rounded-full mb-4">
|
||||
<div className="p-4 bg-neutral-800 rounded-full mb-4">
|
||||
<svg className="w-8 h-8 text-neutral-400" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-neutral-900 dark:text-white mb-2">
|
||||
<h3 className="text-xl font-bold text-white mb-2">
|
||||
Missing something?
|
||||
</h3>
|
||||
<p className="text-neutral-600 dark:text-neutral-400 text-sm mb-1">
|
||||
<p className="text-neutral-400 text-sm mb-1">
|
||||
No integrations found for “{query}”.
|
||||
</p>
|
||||
<p className="text-neutral-600 dark:text-neutral-400 text-sm mb-5">
|
||||
<p className="text-neutral-400 text-sm mb-5">
|
||||
Let us know which integration you'd like to see next.
|
||||
</p>
|
||||
<a
|
||||
@@ -350,12 +350,12 @@ export default function IntegrationsPage() {
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="max-w-md mx-auto mt-12 p-6 border border-dashed border-neutral-300 dark:border-neutral-700 rounded-2xl flex flex-col items-center justify-center text-center"
|
||||
className="max-w-md mx-auto mt-12 p-6 border border-dashed border-neutral-700 rounded-2xl flex flex-col items-center justify-center text-center"
|
||||
>
|
||||
<h3 className="text-xl font-bold text-neutral-900 dark:text-white mb-2">
|
||||
<h3 className="text-xl font-bold text-white mb-2">
|
||||
Missing something?
|
||||
</h3>
|
||||
<p className="text-neutral-600 dark:text-neutral-400 text-sm mb-4">
|
||||
<p className="text-neutral-400 text-sm mb-4">
|
||||
Let us know which integration you'd like to see next.
|
||||
</p>
|
||||
<a
|
||||
|
||||
@@ -8,9 +8,9 @@ export default function ReactIntegrationPage() {
|
||||
<div className="relative min-h-screen flex flex-col overflow-hidden">
|
||||
{/* * --- ATMOSPHERE (Background) --- */}
|
||||
<div className="absolute inset-0 -z-10 pointer-events-none">
|
||||
<div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-500/10 dark:bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
|
||||
<div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
|
||||
<div
|
||||
className="absolute inset-0 bg-grid-pattern opacity-[0.02] dark:opacity-[0.05]"
|
||||
className="absolute inset-0 bg-grid-pattern opacity-[0.05]"
|
||||
style={{ maskImage: 'radial-gradient(ellipse at center, black 0%, transparent 70%)' }}
|
||||
/>
|
||||
</div>
|
||||
@@ -25,23 +25,23 @@ export default function ReactIntegrationPage() {
|
||||
</Link>
|
||||
|
||||
<div className="flex items-center gap-4 mb-8">
|
||||
<div className="p-3 bg-neutral-100 dark:bg-neutral-800 rounded-xl">
|
||||
<div className="p-3 bg-neutral-800 rounded-xl">
|
||||
<svg viewBox="0 0 128 128" className="w-10 h-10 text-[#61DAFB] fill-current">
|
||||
<path d="M64 10.6c18.4 0 34.6 5.8 44.6 14.8 6.4 5.8 10.2 12.8 10.2 20.6 0 21.6-28.6 41.2-64 41.2-1.6 0-3.2-.1-4.8-.2-1.2 10.8-6.2 20.2-13.8 27.6-8.8 8.6-20.6 13.4-33.2 13.4-2.2 0-4.4-.2-6.4-.4 10.2-12.8 15.6-29.2 15.6-46.2 0-2.6-.2-5.2-.4-7.8 13.6-1.6 26.2-5.4 37.4-11 11.2-5.6 20.2-13 26.2-21.4-6.4-5.8-15.4-10-25.6-12.2-10.2-2.2-21.4-3.4-33-3.4-1.6 0-3.2.1-4.8.2 1.2-10.8 6.2-20.2 13.8-27.6 8.8-8.6 20.6-13.4 33.2-13.4 2.2 0 4.4.2 6.4.4-10.2 12.8-15.6 29.2-15.6 46.2 0 2.6.2 5.2.4 7.8-13.6 1.6-26.2 5.4-37.4 11-11.2 5.6-20.2 13-26.2 21.4 6.4 5.8 15.4 10 25.6 12.2 10.2 2.2 21.4 3.4 33 3.4 1.6 0 3.2-.1 4.8-.2-1.2 10.8-6.2 20.2-13.8 27.6-8.8 8.6-20.6 13.4-33.2 13.4-2.2 0-4.4-.2-6.4-.4 10.2-12.8 15.6-29.2 15.6-46.2 0-2.6-.2-5.2-.4-7.8 13.6-1.6 26.2-5.4 37.4-11zm-33.4 62c-11.2 5.6-20.2 13-26.2 21.4 6.4 5.8 15.4 10 25.6 12.2 10.2 2.2 21.4 3.4 33 3.4 1.6 0 3.2-.1 4.8-.2-1.2 10.8-6.2 20.2-13.8 27.6-8.8 8.6-20.6 13.4-33.2 13.4-2.2 0-4.4-.2-6.4-.4 10.2-12.8 15.6-29.2 15.6-46.2 0-2.6-.2-5.2-.4-7.8 13.6-1.6 26.2-5.4 37.4-11zm-15.2-16.6c-6.4-5.8-10.2-12.8-10.2-20.6 0-21.6 28.6-41.2 64-41.2 1.6 0 3.2.1 4.8.2 1.2-10.8 6.2-20.2 13.8-27.6 8.8-8.6 20.6-13.4 33.2-13.4 2.2 0 4.4.2 6.4.4-10.2 12.8-15.6 29.2-15.6 46.2 0 2.6.2 5.2.4 7.8-13.6 1.6-26.2 5.4-37.4 11-11.2 5.6-20.2 13-26.2 21.4 6.4 5.8 15.4 10 25.6 12.2 10.2 2.2 21.4 3.4 33 3.4 1.6 0 3.2-.1 4.8-.2-1.2 10.8-6.2 20.2-13.8 27.6-8.8 8.6-20.6 13.4-33.2 13.4-2.2 0-4.4-.2-6.4-.4 10.2-12.8 15.6-29.2 15.6-46.2 0-2.6-.2-5.2-.4-7.8z" />
|
||||
<circle cx="64" cy="64" r="10.6" />
|
||||
</svg>
|
||||
</div>
|
||||
<h1 className="text-4xl md:text-5xl font-bold tracking-tight text-neutral-900 dark:text-white">
|
||||
<h1 className="text-4xl md:text-5xl font-bold tracking-tight text-white">
|
||||
React Integration
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div className="prose prose-neutral dark:prose-invert max-w-none">
|
||||
<p className="lead text-xl text-neutral-600 dark:text-neutral-400">
|
||||
<div className="prose prose-invert max-w-none">
|
||||
<p className="lead text-xl text-neutral-400">
|
||||
For standard React SPAs (Create React App, Vite, etc.), you can simply add the script tag to your <code>index.html</code>.
|
||||
</p>
|
||||
|
||||
<hr className="my-8 border-neutral-200 dark:border-neutral-800" />
|
||||
<hr className="my-8 border-neutral-800" />
|
||||
|
||||
<h3>Method 1: index.html (Recommended)</h3>
|
||||
<p>
|
||||
|
||||
@@ -8,9 +8,9 @@ export default function VueIntegrationPage() {
|
||||
<div className="relative min-h-screen flex flex-col overflow-hidden">
|
||||
{/* * --- ATMOSPHERE (Background) --- */}
|
||||
<div className="absolute inset-0 -z-10 pointer-events-none">
|
||||
<div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-500/10 dark:bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
|
||||
<div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
|
||||
<div
|
||||
className="absolute inset-0 bg-grid-pattern opacity-[0.02] dark:opacity-[0.05]"
|
||||
className="absolute inset-0 bg-grid-pattern opacity-[0.05]"
|
||||
style={{ maskImage: 'radial-gradient(ellipse at center, black 0%, transparent 70%)' }}
|
||||
/>
|
||||
</div>
|
||||
@@ -25,23 +25,23 @@ export default function VueIntegrationPage() {
|
||||
</Link>
|
||||
|
||||
<div className="flex items-center gap-4 mb-8">
|
||||
<div className="p-3 bg-neutral-100 dark:bg-neutral-800 rounded-xl">
|
||||
<div className="p-3 bg-neutral-800 rounded-xl">
|
||||
<svg viewBox="0 0 128 128" className="w-10 h-10 text-[#4FC08D] fill-current">
|
||||
<path d="M82.8 24.6h27.8L64 103.4 17.4 24.6h27.8L64 59.4l18.8-34.8z" />
|
||||
<path d="M64 24.6H39L64 67.4l25-42.8H64z" fill="#35495E" />
|
||||
</svg>
|
||||
</div>
|
||||
<h1 className="text-4xl md:text-5xl font-bold tracking-tight text-neutral-900 dark:text-white">
|
||||
<h1 className="text-4xl md:text-5xl font-bold tracking-tight text-white">
|
||||
Vue.js Integration
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div className="prose prose-neutral dark:prose-invert max-w-none">
|
||||
<p className="lead text-xl text-neutral-600 dark:text-neutral-400">
|
||||
<div className="prose prose-invert max-w-none">
|
||||
<p className="lead text-xl text-neutral-400">
|
||||
Integrating Pulse with Vue.js is straightforward. You can add the script to your <code>index.html</code> file.
|
||||
</p>
|
||||
|
||||
<hr className="my-8 border-neutral-200 dark:border-neutral-800" />
|
||||
<hr className="my-8 border-neutral-800" />
|
||||
|
||||
<h3>Method 1: index.html (Recommended)</h3>
|
||||
<p>
|
||||
|
||||
@@ -8,9 +8,9 @@ export default function WordPressIntegrationPage() {
|
||||
<div className="relative min-h-screen flex flex-col overflow-hidden">
|
||||
{/* * --- ATMOSPHERE (Background) --- */}
|
||||
<div className="absolute inset-0 -z-10 pointer-events-none">
|
||||
<div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-500/10 dark:bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
|
||||
<div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
|
||||
<div
|
||||
className="absolute inset-0 bg-grid-pattern opacity-[0.02] dark:opacity-[0.05]"
|
||||
className="absolute inset-0 bg-grid-pattern opacity-[0.05]"
|
||||
style={{ maskImage: 'radial-gradient(ellipse at center, black 0%, transparent 70%)' }}
|
||||
/>
|
||||
</div>
|
||||
@@ -25,22 +25,22 @@ export default function WordPressIntegrationPage() {
|
||||
</Link>
|
||||
|
||||
<div className="flex items-center gap-4 mb-8">
|
||||
<div className="p-3 bg-neutral-100 dark:bg-neutral-800 rounded-xl">
|
||||
<div className="p-3 bg-neutral-800 rounded-xl">
|
||||
<svg viewBox="0 0 128 128" className="w-10 h-10 text-[#21759B] fill-current">
|
||||
<path d="M116.6 64c0-19.2-10.4-36-26-45.2l28.6 78.4c-1 3.2-2.2 6.2-3.6 9.2-11.4 12.4-27.8 20.2-46 20.2-6.2 0-12.2-.8-17.8-2.4l26.2-76.4c1.2.2 2.4.4 3.6.4 5.4 0 13.8-.8 13.8-.8 2.8-.2 3.2 4 .4 4.2 0 0-2.8.2-6 .4l19 56.6 5.4-18c2.4-7.4 4.2-12.8 4.2-17.4 0-6-2.2-10.2-7.6-12.6-2.8-1.2-2.2-5.4 1.4-5.4h4.4zM64 121.2c-15.8 0-30.2-6.4-40.8-16.8L46.6 36.8c-2.8-.2-5.8-.4-5.8-.4-2.8-.2-2.4-4.4.4-4.2 0 0 8.4.8 13.6.8 5.4 0 13.6-.8 13.6-.8 2.8-.2 3.2 4 .4 4.2 0 0-2.8.2-5.8.4l18.2 54.4 10.6-31.8L64 121.2zM11.4 64c0 17 8.2 32.2 20.8 41.8L18.8 66.8c-.8-3.4-1.2-6.6-1.2-9.2 0-6.8 2.6-13 6.2-17.8C15.6 47.4 11.4 55.2 11.4 64zM64 6.8c16.2 0 30.8 6.8 41.4 17.6-1.4-.2-2.8-.2-4.2-.2-7.8 0-14.2 1.4-14.2 1.4-2.8.6-2.2 4.8.6 4.2 0 0 5-1 10.6-1 2.2 0 4.6.2 6.6.4L88.2 53 71.4 6.8h-7.4z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h1 className="text-4xl md:text-5xl font-bold tracking-tight text-neutral-900 dark:text-white">
|
||||
<h1 className="text-4xl md:text-5xl font-bold tracking-tight text-white">
|
||||
WordPress Integration
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div className="prose prose-neutral dark:prose-invert max-w-none">
|
||||
<p className="lead text-xl text-neutral-600 dark:text-neutral-400">
|
||||
<div className="prose prose-invert max-w-none">
|
||||
<p className="lead text-xl text-neutral-400">
|
||||
You can add Pulse to your WordPress site without installing any heavy plugins, or by using a simple code snippet plugin.
|
||||
</p>
|
||||
|
||||
<hr className="my-8 border-neutral-200 dark:border-neutral-800" />
|
||||
<hr className="my-8 border-neutral-800" />
|
||||
|
||||
<h3>Method 1: Using a Plugin (Easiest)</h3>
|
||||
<ol>
|
||||
|
||||
@@ -8,19 +8,19 @@ export default function NotFound() {
|
||||
<div className="absolute inset-0 -z-10 pointer-events-none">
|
||||
{/* * Grid Pattern with Radial Mask */}
|
||||
<div
|
||||
className="absolute inset-0 bg-grid-pattern opacity-[0.02] dark:opacity-[0.05]"
|
||||
className="absolute inset-0 bg-grid-pattern opacity-[0.05]"
|
||||
style={{ maskImage: 'radial-gradient(ellipse at center, black 0%, transparent 70%)' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="text-center px-4 z-10">
|
||||
<h1 className="text-9xl font-bold text-transparent bg-clip-text bg-gradient-to-b from-neutral-900 to-neutral-500 dark:from-white dark:to-neutral-500 mb-4">
|
||||
<h1 className="text-9xl font-bold text-transparent bg-clip-text bg-gradient-to-b from-white to-neutral-500 mb-4">
|
||||
404
|
||||
</h1>
|
||||
<h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-6">
|
||||
<h2 className="text-2xl font-bold text-white mb-6">
|
||||
Page not found
|
||||
</h2>
|
||||
<p className="text-lg text-neutral-600 dark:text-neutral-400 max-w-md mx-auto mb-10 leading-relaxed">
|
||||
<p className="text-lg text-neutral-400 max-w-md mx-auto mb-10 leading-relaxed">
|
||||
Sorry, we couldn't find the page you're looking for. It might have been moved or deleted.
|
||||
</p>
|
||||
|
||||
|
||||
90
app/page.tsx
90
app/page.tsx
@@ -27,14 +27,14 @@ function DashboardPreview() {
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.7, delay: 0.4 }}
|
||||
className="relative rounded-xl border border-neutral-200/50 dark:border-neutral-800/50 shadow-2xl overflow-hidden"
|
||||
className="relative rounded-xl border border-neutral-800/50 shadow-2xl overflow-hidden"
|
||||
>
|
||||
{/* * Browser chrome */}
|
||||
<div className="h-8 bg-neutral-100 dark:bg-neutral-800/80 border-b border-neutral-200 dark:border-white/5 flex items-center px-4 gap-2">
|
||||
<div className="h-8 bg-neutral-800/80 border-b border-white/5 flex items-center px-4 gap-2">
|
||||
<div className="w-3 h-3 rounded-full bg-red-400/60" />
|
||||
<div className="w-3 h-3 rounded-full bg-yellow-400/60" />
|
||||
<div className="w-3 h-3 rounded-full bg-green-400/60" />
|
||||
<div className="ml-4 flex-1 max-w-xs h-5 rounded bg-neutral-200 dark:bg-neutral-700/50" />
|
||||
<div className="ml-4 flex-1 max-w-xs h-5 rounded bg-neutral-700/50" />
|
||||
</div>
|
||||
|
||||
{/* * Screenshot with bottom fade */}
|
||||
@@ -47,7 +47,7 @@ function DashboardPreview() {
|
||||
className="w-full h-auto object-cover object-top"
|
||||
priority
|
||||
/>
|
||||
<div className="absolute inset-0 pointer-events-none bg-gradient-to-b from-transparent from-60% to-white dark:to-neutral-950" />
|
||||
<div className="absolute inset-0 pointer-events-none bg-gradient-to-b from-transparent from-60% to-neutral-950" />
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
@@ -59,28 +59,28 @@ function ComparisonSection() {
|
||||
return (
|
||||
<div className="w-full max-w-4xl mx-auto mb-32">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-4">Why choose Pulse?</h2>
|
||||
<h2 className="text-2xl font-bold text-white mb-4">Why choose Pulse?</h2>
|
||||
<p className="text-neutral-500">The lightweight, privacy-friendly alternative.</p>
|
||||
</div>
|
||||
|
||||
<div className="overflow-hidden rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white/50 dark:bg-neutral-900/50 backdrop-blur-sm">
|
||||
<div className="overflow-hidden rounded-2xl border border-neutral-800 bg-neutral-900/50 backdrop-blur-sm">
|
||||
<table className="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr className="border-b border-neutral-200 dark:border-neutral-800">
|
||||
<tr className="border-b border-neutral-800">
|
||||
<th className="p-6 text-sm font-medium text-neutral-500">Feature</th>
|
||||
<th className="p-6 text-sm font-bold text-brand-orange">Pulse</th>
|
||||
<th className="p-6 text-sm font-medium text-neutral-500">Google Analytics</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-neutral-200 dark:divide-neutral-800">
|
||||
<tbody className="divide-y divide-neutral-800">
|
||||
{[
|
||||
{ feature: "Cookie Banner Required", pulse: false, ga: true },
|
||||
{ feature: "GDPR Compliant", pulse: true, ga: "Complex" },
|
||||
{ feature: "Script Size", pulse: "< 1 KB", ga: "45 KB+" },
|
||||
{ feature: "Data Ownership", pulse: "Yours", ga: "Google's" },
|
||||
].map((row) => (
|
||||
<tr key={row.feature} className="hover:bg-neutral-50/50 dark:hover:bg-neutral-800/50 transition-colors">
|
||||
<td className="p-6 text-neutral-900 dark:text-white font-medium">{row.feature}</td>
|
||||
<tr key={row.feature} className="hover:bg-neutral-800/50 transition-colors">
|
||||
<td className="p-6 text-white font-medium">{row.feature}</td>
|
||||
<td className="p-6">
|
||||
{row.pulse === true ? (
|
||||
<CheckCircleIcon className="w-5 h-5 text-green-500" />
|
||||
@@ -237,10 +237,10 @@ export default function HomePage() {
|
||||
{/* * --- 1. ATMOSPHERE (Background) --- */}
|
||||
<div className="absolute inset-0 -z-10 pointer-events-none">
|
||||
{/* * Bottom-right Neutral Glow */}
|
||||
<div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-500/10 dark:bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
|
||||
<div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
|
||||
{/* * Grid Pattern with Radial Mask */}
|
||||
<div
|
||||
className="absolute inset-0 bg-grid-pattern opacity-[0.02] dark:opacity-[0.05]"
|
||||
className="absolute inset-0 bg-grid-pattern opacity-[0.05]"
|
||||
style={{ maskImage: 'radial-gradient(ellipse at center, black 0%, transparent 70%)' }}
|
||||
/>
|
||||
</div>
|
||||
@@ -266,7 +266,7 @@ export default function HomePage() {
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: 0.1 }}
|
||||
className="text-5xl md:text-7xl font-bold tracking-tight text-neutral-900 dark:text-white mb-6"
|
||||
className="text-5xl md:text-7xl font-bold tracking-tight text-white mb-6"
|
||||
>
|
||||
Simple analytics for <br />
|
||||
<span className="relative inline-block">
|
||||
@@ -283,7 +283,7 @@ export default function HomePage() {
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: 0.2 }}
|
||||
className="text-xl text-neutral-600 dark:text-neutral-400 max-w-2xl mx-auto mb-10 leading-relaxed"
|
||||
className="text-xl text-neutral-400 max-w-2xl mx-auto mb-10 leading-relaxed"
|
||||
>
|
||||
Respect your users' privacy while getting the insights you need.
|
||||
No cookies, no IP tracking, fully GDPR compliant.
|
||||
@@ -326,8 +326,8 @@ export default function HomePage() {
|
||||
<div className="w-12 h-12 rounded-xl bg-brand-orange/10 flex items-center justify-center mb-6 text-brand-orange group-hover:scale-110 transition-transform duration-300">
|
||||
<feature.icon className="w-6 h-6" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-neutral-900 dark:text-white mb-3">{feature.title}</h3>
|
||||
<p className="text-neutral-600 dark:text-neutral-400 leading-relaxed">
|
||||
<h3 className="text-xl font-bold text-white mb-3">{feature.title}</h3>
|
||||
<p className="text-neutral-400 leading-relaxed">
|
||||
{feature.desc}
|
||||
</p>
|
||||
</motion.div>
|
||||
@@ -345,7 +345,7 @@ export default function HomePage() {
|
||||
transition={{ duration: 0.5 }}
|
||||
className="text-center mb-20"
|
||||
>
|
||||
<h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-6">Ready to switch?</h2>
|
||||
<h2 className="text-2xl font-bold text-white mb-6">Ready to switch?</h2>
|
||||
<Button onClick={() => initiateOAuthFlow()} variant="primary" className="px-8 py-4 text-lg shadow-lg shadow-brand-orange/20">
|
||||
Start your free trial
|
||||
</Button>
|
||||
@@ -365,8 +365,8 @@ export default function HomePage() {
|
||||
return (
|
||||
<div className="w-full max-w-6xl mx-auto px-4 sm:px-6 py-8">
|
||||
{showFinishSetupBanner && (
|
||||
<div className="mb-6 flex items-center justify-between gap-4 rounded-2xl border border-brand-orange/30 bg-brand-orange/5 px-4 py-3 dark:bg-brand-orange/10">
|
||||
<p className="text-sm text-neutral-700 dark:text-neutral-300">
|
||||
<div className="mb-6 flex items-center justify-between gap-4 rounded-2xl border border-brand-orange/30 bg-brand-orange/10 px-4 py-3">
|
||||
<p className="text-sm text-neutral-300">
|
||||
Finish setting up your workspace and add your first site.
|
||||
</p>
|
||||
<div className="flex items-center gap-2 flex-shrink-0">
|
||||
@@ -381,7 +381,7 @@ export default function HomePage() {
|
||||
if (typeof window !== 'undefined') localStorage.setItem('pulse_welcome_completed', 'true')
|
||||
setShowFinishSetupBanner(false)
|
||||
}}
|
||||
className="text-neutral-500 hover:text-neutral-700 dark:hover:text-neutral-400 p-1 rounded"
|
||||
className="text-neutral-500 hover:text-neutral-400 p-1 rounded"
|
||||
aria-label="Dismiss"
|
||||
>
|
||||
<XIcon className="h-4 w-4" />
|
||||
@@ -392,8 +392,8 @@ export default function HomePage() {
|
||||
|
||||
<div className="mb-8 flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-neutral-900 dark:text-white">Your Sites</h1>
|
||||
<p className="mt-1 text-sm text-neutral-500 dark:text-neutral-400">Manage your analytics sites and view insights.</p>
|
||||
<h1 className="text-2xl font-bold text-white">Your Sites</h1>
|
||||
<p className="mt-1 text-sm text-neutral-400">Manage your analytics sites and view insights.</p>
|
||||
</div>
|
||||
{(() => {
|
||||
const siteLimit = getSitesLimitForPlan(subscription?.plan_id)
|
||||
@@ -401,7 +401,7 @@ export default function HomePage() {
|
||||
return atLimit ? (
|
||||
<div>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-sm font-medium text-neutral-500 dark:text-neutral-400 bg-neutral-100 dark:bg-neutral-800 px-3 py-1.5 rounded-lg border border-neutral-200 dark:border-neutral-700">
|
||||
<span className="text-sm font-medium text-neutral-400 bg-neutral-800 px-3 py-1.5 rounded-lg border border-neutral-700">
|
||||
Limit reached ({sites.length}/{siteLimit})
|
||||
</span>
|
||||
<Link href="/pricing">
|
||||
@@ -411,7 +411,7 @@ export default function HomePage() {
|
||||
</Link>
|
||||
</div>
|
||||
{deletedSites.length > 0 && (
|
||||
<p className="text-sm text-neutral-500 dark:text-neutral-400 mt-2">
|
||||
<p className="text-sm text-neutral-400 mt-2">
|
||||
You have a site pending deletion. Restore it or permanently delete it to free the slot.
|
||||
</p>
|
||||
)}
|
||||
@@ -428,26 +428,26 @@ export default function HomePage() {
|
||||
|
||||
{/* * Global Overview - min-h ensures no layout shift when Plan & usage loads */}
|
||||
<div className="mb-8 grid grid-cols-1 gap-4 sm:grid-cols-3">
|
||||
<div className="flex min-h-[100px] sm:min-h-[160px] flex-col rounded-2xl border border-neutral-200 bg-white p-4 dark:border-neutral-800 dark:bg-neutral-900">
|
||||
<p className="text-sm text-neutral-500 dark:text-neutral-400">Total Sites</p>
|
||||
<p className="text-2xl font-bold text-neutral-900 dark:text-white">{sites.length}</p>
|
||||
<div className="flex min-h-[100px] sm:min-h-[160px] flex-col rounded-2xl border border-neutral-800 bg-neutral-900 p-4">
|
||||
<p className="text-sm text-neutral-400">Total Sites</p>
|
||||
<p className="text-2xl font-bold text-white">{sites.length}</p>
|
||||
</div>
|
||||
<div className="flex min-h-[100px] sm:min-h-[160px] flex-col rounded-2xl border border-neutral-200 bg-white p-4 dark:border-neutral-800 dark:bg-neutral-900">
|
||||
<p className="text-sm text-neutral-500 dark:text-neutral-400">Total Visitors (24h)</p>
|
||||
<p className="text-2xl font-bold text-neutral-900 dark:text-white">
|
||||
<div className="flex min-h-[100px] sm:min-h-[160px] flex-col rounded-2xl border border-neutral-800 bg-neutral-900 p-4">
|
||||
<p className="text-sm text-neutral-400">Total Visitors (24h)</p>
|
||||
<p className="text-2xl font-bold text-white">
|
||||
{sites.length === 0 || Object.keys(siteStats).length < sites.length
|
||||
? '--'
|
||||
: Object.values(siteStats).reduce((sum, { stats }) => sum + (stats?.visitors ?? 0), 0).toLocaleString()}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex min-h-[160px] flex-col rounded-2xl border border-neutral-200 bg-brand-orange/10 p-4 dark:border-neutral-800">
|
||||
<div className="flex min-h-[160px] flex-col rounded-2xl border border-neutral-800 bg-brand-orange/10 p-4">
|
||||
<p className="text-sm text-brand-orange">Plan & usage</p>
|
||||
{subscriptionLoading ? (
|
||||
<div className="animate-pulse space-y-2">
|
||||
<div className="h-6 w-24 rounded bg-brand-orange/25 dark:bg-brand-orange/20" />
|
||||
<div className="h-4 w-full rounded bg-brand-orange/25 dark:bg-brand-orange/20" />
|
||||
<div className="h-4 w-3/4 rounded bg-brand-orange/25 dark:bg-brand-orange/20" />
|
||||
<div className="h-4 w-20 rounded bg-brand-orange/25 dark:bg-brand-orange/20 pt-2" />
|
||||
<div className="h-6 w-24 rounded bg-brand-orange/20" />
|
||||
<div className="h-4 w-full rounded bg-brand-orange/20" />
|
||||
<div className="h-4 w-3/4 rounded bg-brand-orange/20" />
|
||||
<div className="h-4 w-20 rounded bg-brand-orange/20 pt-2" />
|
||||
</div>
|
||||
) : subscription ? (
|
||||
<>
|
||||
@@ -464,7 +464,7 @@ export default function HomePage() {
|
||||
})()}
|
||||
</p>
|
||||
{(typeof subscription.sites_count === 'number' || (subscription.pageview_limit > 0 && typeof subscription.pageview_usage === 'number') || (subscription.next_invoice_amount_due != null && subscription.next_invoice_currency && !subscription.cancel_at_period_end && (subscription.subscription_status === 'active' || subscription.subscription_status === 'trialing'))) && (
|
||||
<p className="text-sm text-neutral-600 dark:text-neutral-400 mt-1">
|
||||
<p className="text-sm text-neutral-400 mt-1">
|
||||
{typeof subscription.sites_count === 'number' && (
|
||||
<span>Sites: {(() => {
|
||||
const limit = getSitesLimitForPlan(subscription.plan_id)
|
||||
@@ -512,12 +512,12 @@ export default function HomePage() {
|
||||
</div>
|
||||
|
||||
{!sitesLoading && sites.length === 0 && (
|
||||
<div className="mb-8 rounded-2xl border-2 border-dashed border-brand-orange/30 bg-brand-orange/5 p-6 text-center dark:bg-brand-orange/10">
|
||||
<div className="mb-8 rounded-2xl border-2 border-dashed border-brand-orange/30 bg-brand-orange/10 p-6 text-center">
|
||||
<div className="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-brand-orange/20 text-brand-orange mb-4">
|
||||
<GlobeIcon className="h-7 w-7" />
|
||||
</div>
|
||||
<h2 className="text-xl font-bold text-neutral-900 dark:text-white mb-2">Add your first site</h2>
|
||||
<p className="text-neutral-600 dark:text-neutral-400 mb-6 max-w-md mx-auto">
|
||||
<h2 className="text-xl font-bold text-white mb-2">Add your first site</h2>
|
||||
<p className="text-neutral-400 mb-6 max-w-md mx-auto">
|
||||
Connect a domain to start collecting privacy-friendly analytics. You can add more sites later from the dashboard.
|
||||
</p>
|
||||
<Link href="/sites/new">
|
||||
@@ -553,31 +553,31 @@ export default function HomePage() {
|
||||
|
||||
{deletedSites.length > 0 && (
|
||||
<div className="mt-8">
|
||||
<h3 className="text-sm font-medium text-neutral-500 dark:text-neutral-400 mb-4">Scheduled for Deletion</h3>
|
||||
<h3 className="text-sm font-medium text-neutral-400 mb-4">Scheduled for Deletion</h3>
|
||||
<div className="space-y-3">
|
||||
{deletedSites.map((site) => {
|
||||
const purgeAt = site.deleted_at ? new Date(new Date(site.deleted_at).getTime() + 7 * 24 * 60 * 60 * 1000) : null
|
||||
const daysLeft = purgeAt ? Math.max(0, Math.ceil((purgeAt.getTime() - Date.now()) / (1000 * 60 * 60 * 24))) : 0
|
||||
|
||||
return (
|
||||
<div key={site.id} className="flex items-center justify-between p-4 rounded-xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900/50 opacity-60">
|
||||
<div key={site.id} className="flex items-center justify-between p-4 rounded-xl border border-neutral-800 bg-neutral-900/50 opacity-60">
|
||||
<div>
|
||||
<span className="font-medium text-neutral-700 dark:text-neutral-300">{site.name}</span>
|
||||
<span className="font-medium text-neutral-300">{site.name}</span>
|
||||
<span className="ml-2 text-sm text-neutral-400">{site.domain}</span>
|
||||
<span className="ml-3 inline-flex items-center rounded-full bg-red-50 px-2 py-0.5 text-xs font-medium text-red-600 dark:bg-red-900/20 dark:text-red-400">
|
||||
<span className="ml-3 inline-flex items-center rounded-full bg-red-900/20 px-2 py-0.5 text-xs font-medium text-red-400">
|
||||
Deleting in {daysLeft} day{daysLeft !== 1 ? 's' : ''}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => handleRestore(site.id)}
|
||||
className="px-3 py-1.5 text-xs font-medium text-neutral-700 dark:text-neutral-300 border border-neutral-300 dark:border-neutral-700 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors"
|
||||
className="px-3 py-1.5 text-xs font-medium text-neutral-300 border border-neutral-700 rounded-lg hover:bg-neutral-800 transition-colors"
|
||||
>
|
||||
Restore
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handlePermanentDelete(site.id)}
|
||||
className="px-3 py-1.5 text-xs font-medium text-red-600 dark:text-red-400 border border-red-200 dark:border-red-900 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
|
||||
className="px-3 py-1.5 text-xs font-medium text-red-400 border border-red-900 rounded-lg hover:bg-red-900/20 transition-colors"
|
||||
>
|
||||
Delete Now
|
||||
</button>
|
||||
|
||||
@@ -19,8 +19,8 @@ export default function PricingPage() {
|
||||
<Suspense fallback={
|
||||
<div className="w-full max-w-6xl mx-auto px-4 sm:px-6 py-16">
|
||||
<div className="text-center mb-12">
|
||||
<div className="h-10 w-64 animate-pulse rounded bg-neutral-100 dark:bg-neutral-800 mx-auto mb-4" />
|
||||
<div className="h-5 w-96 animate-pulse rounded bg-neutral-100 dark:bg-neutral-800 mx-auto" />
|
||||
<div className="h-10 w-64 animate-pulse rounded bg-neutral-800 mx-auto mb-4" />
|
||||
<div className="h-5 w-96 animate-pulse rounded bg-neutral-800 mx-auto" />
|
||||
</div>
|
||||
<PricingCardsSkeleton />
|
||||
</div>
|
||||
|
||||
@@ -39,9 +39,9 @@ export function IntegrationGuide({ integration, children }: IntegrationGuideProp
|
||||
<div className="relative min-h-screen flex flex-col overflow-hidden">
|
||||
{/* * --- ATMOSPHERE (Background) --- */}
|
||||
<div className="absolute inset-0 -z-10 pointer-events-none">
|
||||
<div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-500/10 dark:bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
|
||||
<div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
|
||||
<div
|
||||
className="absolute inset-0 bg-grid-pattern opacity-[0.02] dark:opacity-[0.05]"
|
||||
className="absolute inset-0 bg-grid-pattern opacity-[0.05]"
|
||||
style={{ maskImage: 'radial-gradient(ellipse at center, black 0%, transparent 70%)' }}
|
||||
/>
|
||||
</div>
|
||||
@@ -56,18 +56,18 @@ export function IntegrationGuide({ integration, children }: IntegrationGuideProp
|
||||
</Link>
|
||||
|
||||
<div className="flex items-center gap-4 mb-8">
|
||||
<div className="p-3 bg-neutral-100 dark:bg-neutral-800 rounded-xl">
|
||||
<div className="p-3 bg-neutral-800 rounded-xl">
|
||||
{headerIcon}
|
||||
</div>
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-neutral-900 dark:text-white">
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-white">
|
||||
{integration.name} Integration
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div className="prose prose-neutral dark:prose-invert max-w-none">
|
||||
<div className="prose prose-invert max-w-none">
|
||||
{children}
|
||||
|
||||
<hr className="my-8 border-neutral-200 dark:border-neutral-800" />
|
||||
<hr className="my-8 border-neutral-800" />
|
||||
<h3>Optional: Frustration Tracking</h3>
|
||||
<p>
|
||||
Detect rage clicks and dead clicks by adding the frustration tracking
|
||||
@@ -82,8 +82,8 @@ export function IntegrationGuide({ integration, children }: IntegrationGuideProp
|
||||
|
||||
{/* * --- Related Integrations --- */}
|
||||
{relatedIntegrations.length > 0 && (
|
||||
<div className="mt-16 pt-10 border-t border-neutral-200 dark:border-neutral-800">
|
||||
<h2 className="text-xl font-bold text-neutral-900 dark:text-white mb-6">
|
||||
<div className="mt-16 pt-10 border-t border-neutral-800">
|
||||
<h2 className="text-xl font-bold text-white mb-6">
|
||||
Related Integrations
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
@@ -91,16 +91,16 @@ export function IntegrationGuide({ integration, children }: IntegrationGuideProp
|
||||
<Link
|
||||
key={related.id}
|
||||
href={`/integrations/${related.id}`}
|
||||
className="group flex items-center gap-4 p-4 bg-white/50 dark:bg-neutral-900/50 backdrop-blur-sm border border-neutral-200 dark:border-neutral-800 rounded-xl hover:border-brand-orange/50 dark:hover:border-brand-orange/50 transition-all duration-300"
|
||||
className="group flex items-center gap-4 p-4 bg-neutral-900/50 backdrop-blur-sm border border-neutral-800 rounded-xl hover:border-brand-orange/50 transition-all duration-300"
|
||||
>
|
||||
<div className="p-2 bg-neutral-100 dark:bg-neutral-800 rounded-lg shrink-0 [&_svg]:w-6 [&_svg]:h-6">
|
||||
<div className="p-2 bg-neutral-800 rounded-lg shrink-0 [&_svg]:w-6 [&_svg]:h-6">
|
||||
{related.icon}
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<span className="font-semibold text-neutral-900 dark:text-white block">
|
||||
<span className="font-semibold text-white block">
|
||||
{related.name}
|
||||
</span>
|
||||
<span className="text-sm text-neutral-500 dark:text-neutral-400 truncate block">
|
||||
<span className="text-sm text-neutral-400 truncate block">
|
||||
{related.description}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -219,10 +219,10 @@ export default function PricingSection() {
|
||||
transition={{ duration: 0.5 }}
|
||||
className="text-center mb-12"
|
||||
>
|
||||
<h2 className="text-3xl font-bold text-neutral-900 dark:text-white mb-4">
|
||||
<h2 className="text-3xl font-bold text-white mb-4">
|
||||
Transparent Pricing
|
||||
</h2>
|
||||
<p className="text-lg text-neutral-600 dark:text-neutral-400">
|
||||
<p className="text-lg text-neutral-400">
|
||||
Scale with your traffic. No hidden fees.
|
||||
</p>
|
||||
</motion.div>
|
||||
@@ -232,13 +232,13 @@ export default function PricingSection() {
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: 0.1 }}
|
||||
className="max-w-6xl mx-auto border border-neutral-200 dark:border-neutral-800 rounded-2xl bg-white/50 dark:bg-neutral-900/50 backdrop-blur-xl shadow-sm overflow-hidden mb-20"
|
||||
className="max-w-6xl mx-auto border border-neutral-800 rounded-2xl bg-neutral-900/50 backdrop-blur-xl shadow-sm overflow-hidden mb-20"
|
||||
>
|
||||
|
||||
{/* Top Toolbar */}
|
||||
<div className="p-6 border-b border-neutral-200 dark:border-neutral-800 flex flex-col md:flex-row items-center justify-between gap-8 bg-neutral-50/50 dark:bg-neutral-900/50">
|
||||
<div className="p-6 border-b border-neutral-800 flex flex-col md:flex-row items-center justify-between gap-8 bg-neutral-900/50">
|
||||
<div className="w-full md:w-2/3">
|
||||
<div className="flex justify-between text-sm font-medium text-neutral-500 dark:text-neutral-400 mb-4">
|
||||
<div className="flex justify-between text-sm font-medium text-neutral-400 mb-4">
|
||||
<span>10k</span>
|
||||
<span className="text-brand-orange font-bold text-lg">
|
||||
Up to {currentTraffic.label} monthly pageviews
|
||||
@@ -254,23 +254,23 @@ export default function PricingSection() {
|
||||
onChange={(e) => setSliderIndex(parseInt(e.target.value))}
|
||||
aria-label="Monthly pageview limit"
|
||||
aria-valuetext={`${currentTraffic.label} pageviews per month`}
|
||||
className="w-full h-2 bg-neutral-200 rounded-lg appearance-none cursor-pointer dark:bg-neutral-700 accent-brand-orange focus:outline-none focus:ring-2 focus:ring-brand-orange focus:ring-offset-2"
|
||||
className="w-full h-2 bg-neutral-700 rounded-lg appearance-none cursor-pointer accent-brand-orange focus:outline-none focus:ring-2 focus:ring-brand-orange focus:ring-offset-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-end gap-2 shrink-0">
|
||||
<span className="text-xs text-neutral-500 dark:text-neutral-400 font-medium uppercase tracking-wide">
|
||||
<span className="text-xs text-neutral-400 font-medium uppercase tracking-wide">
|
||||
Get 1 month free with yearly
|
||||
</span>
|
||||
<div className="bg-neutral-200 dark:bg-neutral-800 p-1 rounded-lg flex" role="radiogroup" aria-label="Billing interval">
|
||||
<div className="bg-neutral-800 p-1 rounded-lg flex" role="radiogroup" aria-label="Billing interval">
|
||||
<button
|
||||
onClick={() => setIsYearly(false)}
|
||||
role="radio"
|
||||
aria-checked={!isYearly}
|
||||
className={`min-w-[88px] px-4 py-2 rounded-lg text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange ${
|
||||
!isYearly
|
||||
? 'bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white shadow-sm'
|
||||
: 'text-neutral-500 hover:text-neutral-900 dark:hover:text-white'
|
||||
? 'bg-neutral-700 text-white shadow-sm'
|
||||
: 'text-neutral-500 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
Monthly
|
||||
@@ -281,8 +281,8 @@ export default function PricingSection() {
|
||||
aria-checked={isYearly}
|
||||
className={`min-w-[88px] px-4 py-2 rounded-lg text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange ${
|
||||
isYearly
|
||||
? 'bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white shadow-sm'
|
||||
: 'text-neutral-500 hover:text-neutral-900 dark:hover:text-white'
|
||||
? 'bg-neutral-700 text-white shadow-sm'
|
||||
: 'text-neutral-500 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
Yearly
|
||||
@@ -292,15 +292,15 @@ export default function PricingSection() {
|
||||
</div>
|
||||
|
||||
{/* Pricing Grid */}
|
||||
<div className="grid md:grid-cols-5 divide-y md:divide-y-0 md:divide-x divide-neutral-200 dark:divide-neutral-800">
|
||||
<div className="grid md:grid-cols-5 divide-y md:divide-y-0 md:divide-x divide-neutral-800">
|
||||
{/* Free Plan */}
|
||||
<div className="p-6 flex flex-col relative transition-colors hover:bg-neutral-50/50 dark:hover:bg-neutral-800/50">
|
||||
<div className="p-6 flex flex-col relative transition-colors hover:bg-neutral-800/50">
|
||||
<div className="mb-8">
|
||||
<h3 className="text-lg font-bold text-neutral-900 dark:text-white mb-2">Free</h3>
|
||||
<p className="text-sm text-neutral-500 dark:text-neutral-400 min-h-[40px] mb-4">For trying Pulse on a personal project</p>
|
||||
<h3 className="text-lg font-bold text-white mb-2">Free</h3>
|
||||
<p className="text-sm text-neutral-400 min-h-[40px] mb-4">For trying Pulse on a personal project</p>
|
||||
<div className="flex items-baseline gap-1">
|
||||
<span className="text-4xl font-bold text-neutral-900 dark:text-white">€0</span>
|
||||
<span className="text-neutral-500 dark:text-neutral-400 font-medium">/forever</span>
|
||||
<span className="text-4xl font-bold text-white">€0</span>
|
||||
<span className="text-neutral-400 font-medium">/forever</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -320,7 +320,7 @@ export default function PricingSection() {
|
||||
|
||||
<ul className="space-y-4 flex-grow">
|
||||
{['1 site', '5k monthly pageviews', '6 months data retention', '100% Data ownership'].map((feature) => (
|
||||
<li key={feature} className="flex items-start gap-3 text-sm text-neutral-600 dark:text-neutral-400">
|
||||
<li key={feature} className="flex items-start gap-3 text-sm text-neutral-400">
|
||||
<CheckCircleIcon className="w-5 h-5 shrink-0 text-neutral-400" />
|
||||
<span>{feature}</span>
|
||||
</li>
|
||||
@@ -333,7 +333,7 @@ export default function PricingSection() {
|
||||
const isTeam = plan.id === 'team'
|
||||
|
||||
return (
|
||||
<div key={plan.id} className={`p-6 flex flex-col relative transition-colors ${isTeam ? 'bg-brand-orange/[0.02]' : 'hover:bg-neutral-50/50 dark:hover:bg-neutral-800/50'}`}>
|
||||
<div key={plan.id} className={`p-6 flex flex-col relative transition-colors ${isTeam ? 'bg-brand-orange/[0.02]' : 'hover:bg-neutral-800/50'}`}>
|
||||
{isTeam && (
|
||||
<>
|
||||
<div className="absolute top-0 left-0 w-full h-1 bg-brand-orange" />
|
||||
@@ -344,17 +344,17 @@ export default function PricingSection() {
|
||||
)}
|
||||
|
||||
<div className="mb-8">
|
||||
<h3 className="text-lg font-bold text-neutral-900 dark:text-white mb-2">{plan.name}</h3>
|
||||
<p className="text-sm text-neutral-500 dark:text-neutral-400 min-h-[40px] mb-4">{plan.description}</p>
|
||||
<h3 className="text-lg font-bold text-white mb-2">{plan.name}</h3>
|
||||
<p className="text-sm text-neutral-400 min-h-[40px] mb-4">{plan.description}</p>
|
||||
|
||||
{priceDetails ? (
|
||||
isYearly ? (
|
||||
<div>
|
||||
<div className="flex items-baseline gap-1">
|
||||
<span className="text-4xl font-bold text-neutral-900 dark:text-white">
|
||||
<span className="text-4xl font-bold text-white">
|
||||
€{priceDetails.yearlyTotal}
|
||||
</span>
|
||||
<span className="text-neutral-500 dark:text-neutral-400 font-medium">/year</span>
|
||||
<span className="text-neutral-400 font-medium">/year</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mt-2 text-sm font-medium">
|
||||
<span className="text-neutral-400 line-through decoration-neutral-400">
|
||||
@@ -367,14 +367,14 @@ export default function PricingSection() {
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-baseline gap-1">
|
||||
<span className="text-4xl font-bold text-neutral-900 dark:text-white">
|
||||
<span className="text-4xl font-bold text-white">
|
||||
€{priceDetails.baseMonthly}
|
||||
</span>
|
||||
<span className="text-neutral-500 dark:text-neutral-400 font-medium">/mo</span>
|
||||
<span className="text-neutral-400 font-medium">/mo</span>
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<div className="text-4xl font-bold text-neutral-900 dark:text-white">
|
||||
<div className="text-4xl font-bold text-white">
|
||||
Custom
|
||||
</div>
|
||||
)}
|
||||
@@ -391,7 +391,7 @@ export default function PricingSection() {
|
||||
|
||||
<ul className="space-y-4 flex-grow">
|
||||
{plan.features.map((feature) => (
|
||||
<li key={feature} className="flex items-start gap-3 text-sm text-neutral-600 dark:text-neutral-400">
|
||||
<li key={feature} className="flex items-start gap-3 text-sm text-neutral-400">
|
||||
<CheckCircleIcon className={`w-5 h-5 shrink-0 ${isTeam ? 'text-brand-orange' : 'text-neutral-400'}`} />
|
||||
<span>{feature}</span>
|
||||
</li>
|
||||
@@ -402,11 +402,11 @@ export default function PricingSection() {
|
||||
})}
|
||||
|
||||
{/* Enterprise Section */}
|
||||
<div className="p-6 bg-neutral-50/50 dark:bg-neutral-900/50 flex flex-col">
|
||||
<div className="p-6 bg-neutral-900/50 flex flex-col">
|
||||
<div className="mb-8">
|
||||
<h3 className="text-lg font-bold text-neutral-900 dark:text-white mb-2">Enterprise</h3>
|
||||
<p className="text-sm text-neutral-500 dark:text-neutral-400 min-h-[40px] mb-4">For high volume sites and custom needs</p>
|
||||
<div className="text-4xl font-bold text-neutral-900 dark:text-white">
|
||||
<h3 className="text-lg font-bold text-white mb-2">Enterprise</h3>
|
||||
<p className="text-sm text-neutral-400 min-h-[40px] mb-4">For high volume sites and custom needs</p>
|
||||
<div className="text-4xl font-bold text-white">
|
||||
Custom
|
||||
</div>
|
||||
</div>
|
||||
@@ -428,7 +428,7 @@ export default function PricingSection() {
|
||||
'Managed Proxy',
|
||||
'Raw data export'
|
||||
].map((feature) => (
|
||||
<li key={feature} className="flex items-start gap-3 text-sm text-neutral-600 dark:text-neutral-400">
|
||||
<li key={feature} className="flex items-start gap-3 text-sm text-neutral-400">
|
||||
<CheckCircleIcon className="w-5 h-5 text-neutral-400 shrink-0" />
|
||||
<span>{feature}</span>
|
||||
</li>
|
||||
|
||||
Reference in New Issue
Block a user