89 lines
4.5 KiB
TypeScript
89 lines
4.5 KiB
TypeScript
'use client'
|
|
|
|
import React from 'react'
|
|
|
|
export default function InstallationPage() {
|
|
return (
|
|
<div className="relative min-h-screen flex flex-col overflow-hidden">
|
|
|
|
{/* * --- 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-400/10 rounded-full blur-[128px] opacity-40" />
|
|
{/* * Grid Pattern with Radial Mask */}
|
|
<div
|
|
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-white mb-6">
|
|
Installation
|
|
</h1>
|
|
<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-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">
|
|
<div className="flex items-center px-4 py-3 bg-neutral-800 border-b border-neutral-800">
|
|
<div className="flex gap-2">
|
|
<div className="w-3 h-3 rounded-full bg-red-500/20" />
|
|
<div className="w-3 h-3 rounded-full bg-yellow-500/20" />
|
|
<div className="w-3 h-3 rounded-full bg-green-500/20" />
|
|
</div>
|
|
<span className="ml-4 text-xs text-neutral-500 font-mono">layout.tsx / index.html</span>
|
|
</div>
|
|
<div className="p-6 overflow-x-auto">
|
|
<code className="font-mono text-sm text-neutral-300">
|
|
<span className="text-blue-400"><script</span>{' '}
|
|
<span className="text-sky-300">defer</span>{' '}
|
|
<span className="text-sky-300">data-domain</span>
|
|
<span className="text-white">=</span>
|
|
<span className="text-orange-300">"your-site.com"</span>{' '}
|
|
<span className="text-sky-300">src</span>
|
|
<span className="text-white">=</span>
|
|
<span className="text-orange-300">"https://pulse.ciphera.net/script.js"</span>
|
|
<span className="text-blue-400">></script></span>
|
|
</code>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="w-full mt-16 text-center">
|
|
<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-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">
|
|
<div className="flex gap-2">
|
|
<div className="w-3 h-3 rounded-full bg-red-500/20" />
|
|
<div className="w-3 h-3 rounded-full bg-yellow-500/20" />
|
|
<div className="w-3 h-3 rounded-full bg-green-500/20" />
|
|
</div>
|
|
<span className="ml-4 text-xs text-neutral-500 font-mono">e.g. button click handler</span>
|
|
</div>
|
|
<div className="p-6 overflow-x-auto">
|
|
<code className="font-mono text-sm text-neutral-300">
|
|
<span className="text-purple-400">pulse</span>
|
|
<span className="text-white">.</span>
|
|
<span className="text-yellow-300">track</span>
|
|
<span className="text-white">(</span>
|
|
<span className="text-green-400">'signup_click'</span>
|
|
<span className="text-white">);</span>
|
|
</code>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|