Skip to content

Commit 48fbf23

Browse files
ionkorolionkorol
committed
landing page
1 parent 0388247 commit 48fbf23

2 files changed

Lines changed: 139 additions & 10 deletions

File tree

‎docs/next.config.mjs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const withMDX = createMDX();
66
const config = {
77
reactStrictMode: true,
88
output: "export",
9-
basePath: "/relay",
9+
basePath: "/docs",
1010
images: {
1111
unoptimized: true,
1212
},

‎docs/src/app/(home)/page.tsx‎

Lines changed: 138 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,144 @@ import Link from 'next/link';
22

33
export default function HomePage() {
44
return (
5-
<div className="flex flex-col justify-center text-center flex-1">
6-
<h1 className="text-2xl font-bold mb-4">Hello World</h1>
7-
<p>
8-
You can open{' '}
9-
<Link href="/docs" className="font-medium underline">
10-
/docs
11-
</Link>{' '}
12-
and see the documentation.
13-
</p>
5+
<main className="container mx-auto px-4 py-12 md:py-20">
6+
{/* Hero Section */}
7+
<section className="text-center mb-20">
8+
<h1 className="text-4xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-fd-primary to-fd-primary/60 bg-clip-text text-transparent">
9+
Privacy-First Deferred Linking
10+
</h1>
11+
<p className="text-xl md:text-2xl text-fd-muted-foreground mb-8 max-w-3xl mx-auto">
12+
Track referrals and attribute users without third-party analytics. Full control over your data, zero external dependencies.
13+
</p>
14+
<div className="flex flex-wrap gap-4 justify-center">
15+
<Link
16+
href="/docs"
17+
className="px-6 py-3 bg-fd-primary text-fd-primary-foreground rounded-lg font-semibold hover:opacity-90 transition-opacity"
18+
>
19+
Get Started
20+
</Link>
21+
<Link
22+
href="/docs/installation"
23+
className="px-6 py-3 border border-fd-border rounded-lg font-semibold hover:bg-fd-accent transition-colors"
24+
>
25+
Installation
26+
</Link>
27+
</div>
28+
</section>
29+
30+
{/* Features Grid */}
31+
<section className="mb-20">
32+
<h2 className="text-3xl font-bold text-center mb-12">Why Relay?</h2>
33+
<div className="grid md:grid-cols-3 gap-8">
34+
<FeatureCard
35+
title="Privacy-Focused"
36+
description="No third-party tracking services. Your data stays on your infrastructure, giving you complete control and compliance."
37+
/>
38+
<FeatureCard
39+
title="Flexible Storage"
40+
description="Bring your own database. Works with JSON files, PostgreSQL, MongoDB, or any storage solution you prefer."
41+
/>
42+
<FeatureCard
43+
title="Simple Integration"
44+
description="Two-phase capture and process flow. Drop in the SDK, add two API calls, and you're done."
45+
/>
46+
</div>
47+
</section>
48+
49+
{/* How It Works */}
50+
<section className="mb-20">
51+
<h2 className="text-3xl font-bold text-center mb-12">How It Works</h2>
52+
<div className="grid md:grid-cols-2 gap-12 max-w-5xl mx-auto">
53+
<div>
54+
<div className="text-fd-primary font-bold mb-2">STEP 1: CAPTURE</div>
55+
<h3 className="text-xl font-semibold mb-4">Generate Anonymous Fingerprint</h3>
56+
<p className="text-fd-muted-foreground mb-6">
57+
When a user visits your referral link, capture their device fingerprint. No personal data collected.
58+
</p>
59+
<pre className="bg-fd-secondary p-4 rounded-lg overflow-x-auto text-sm">
60+
<code>{`const client = new RelayExpoClient({
61+
serverUrl: 'https://api.example.com'
62+
});
63+
64+
await client.capture({
65+
referralCode: 'FRIEND123'
66+
});`}</code>
67+
</pre>
68+
</div>
69+
<div>
70+
<div className="text-fd-primary font-bold mb-2">STEP 2: PROCESS</div>
71+
<h3 className="text-xl font-semibold mb-4">Match and Attribute</h3>
72+
<p className="text-fd-muted-foreground mb-6">
73+
After signup, match the fingerprint to attribute the referral. Reward referrers automatically.
74+
</p>
75+
<pre className="bg-fd-secondary p-4 rounded-lg overflow-x-auto text-sm">
76+
<code>{`const result = await client.process({
77+
userId: 'user_12345'
78+
});
79+
80+
if (result.referralCode) {
81+
// Reward the referrer!
82+
await rewardUser(result.referralCode);
83+
}`}</code>
84+
</pre>
85+
</div>
86+
</div>
87+
</section>
88+
89+
{/* Use Cases */}
90+
<section className="mb-20 bg-fd-secondary/30 rounded-2xl p-8 md:p-12">
91+
<h2 className="text-3xl font-bold text-center mb-12">Built For</h2>
92+
<div className="grid md:grid-cols-2 gap-6 max-w-4xl mx-auto">
93+
<UseCaseCard
94+
title="Referral Programs"
95+
description="Track who referred whom without complex analytics. Reward users based on accurate attribution."
96+
/>
97+
<UseCaseCard
98+
title="Marketing Attribution"
99+
description="Measure campaign effectiveness across app installs and sign-ups with privacy-first tracking."
100+
/>
101+
<UseCaseCard
102+
title="Deep Linking"
103+
description="Bridge web-to-app experiences. Preserve context when users transition from browser to native app."
104+
/>
105+
<UseCaseCard
106+
title="Growth Analytics"
107+
description="Understand user acquisition funnels without compromising privacy or relying on third parties."
108+
/>
109+
</div>
110+
</section>
111+
112+
{/* CTA Section */}
113+
<section className="text-center">
114+
<h2 className="text-3xl font-bold mb-4">Ready to Get Started?</h2>
115+
<p className="text-xl text-fd-muted-foreground mb-8 max-w-2xl mx-auto">
116+
Install Relay in minutes and start tracking referrals with complete privacy control.
117+
</p>
118+
<Link
119+
href="/docs/installation"
120+
className="inline-block px-8 py-4 bg-fd-primary text-fd-primary-foreground rounded-lg font-semibold text-lg hover:opacity-90 transition-opacity"
121+
>
122+
View Installation Guide
123+
</Link>
124+
</section>
125+
</main>
126+
);
127+
}
128+
129+
function FeatureCard({ title, description }: { title: string; description: string }) {
130+
return (
131+
<div className="p-6 border border-fd-border rounded-lg hover:border-fd-primary/50 transition-colors">
132+
<h3 className="text-xl font-semibold mb-3">{title}</h3>
133+
<p className="text-fd-muted-foreground">{description}</p>
134+
</div>
135+
);
136+
}
137+
138+
function UseCaseCard({ title, description }: { title: string; description: string }) {
139+
return (
140+
<div className="p-6 bg-fd-background rounded-lg">
141+
<h3 className="text-lg font-semibold mb-2">{title}</h3>
142+
<p className="text-fd-muted-foreground text-sm">{description}</p>
14143
</div>
15144
);
16145
}

0 commit comments

Comments
 (0)