Skip to content

Commit d5dd9fd

Browse files
davidemarcolidavidemarcoli
committed
New homepage
1 parent f68bbae commit d5dd9fd

File tree

6 files changed

+278
-107
lines changed

6 files changed

+278
-107
lines changed

‎app/(home)/page.tsx‎

Lines changed: 239 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,245 @@
11
import Link from 'next/link';
2+
import { ArrowRight, Zap, Shield, Puzzle, Cog, Bell, BarChart3, GitBranch, Download } from 'lucide-react';
3+
import { StarCounter } from '@/components/star-counter';
24

3-
export default function HomePage() {
5+
async function getGitHubStars() {
6+
try {
7+
const res = await fetch('https://api.github.com/repos/rivenmedia/riven', {
8+
next: { revalidate: 3600 } // Revalidate every hour
9+
});
10+
if (!res.ok) return null;
11+
const data = await res.json();
12+
return data.stargazers_count as number;
13+
} catch {
14+
return null;
15+
}
16+
}
17+
18+
export default async function HomePage() {
19+
const stars = await getGitHubStars();
420
return (
5-
<main className="flex flex-1 flex-col justify-center text-center">
6-
<h1 className="mb-4 text-2xl font-bold">Hello World</h1>
7-
<p className="text-fd-muted-foreground">
8-
You can open{' '}
9-
<Link
10-
href="/docs"
11-
className="text-fd-foreground font-semibold underline"
12-
>
13-
/docs
14-
</Link>{' '}
15-
and see the documentation.
16-
</p>
21+
<main className="flex flex-1 flex-col">
22+
{/* Hero Section */}
23+
<section className="relative overflow-hidden border-b border-fd-border bg-gradient-to-b from-fd-background to-fd-muted/20 px-4 py-20 md:py-32">
24+
<div className="mx-auto max-w-6xl">
25+
<div className="flex flex-col items-center text-center">
26+
<div className="mb-6 inline-flex items-center gap-2 rounded-full border border-fd-border bg-fd-muted/50 px-4 py-2 text-sm">
27+
<Zap className="h-4 w-4 text-yellow-500" />
28+
<span className="text-fd-muted-foreground">
29+
vfs-based media management
30+
</span>
31+
</div>
32+
33+
<h1 className="mb-6 text-4xl font-bold tracking-tight md:text-6xl lg:text-7xl">
34+
The Ultimate
35+
<br />
36+
<span className="bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 bg-clip-text text-transparent">
37+
Media Management
38+
</span>
39+
<br />
40+
Solution
41+
</h1>
42+
43+
<p className="mb-8 max-w-2xl text-lg text-fd-muted-foreground md:text-xl">
44+
Riven is a comprehensive media management system that uses a virtual file system to organize your content.
45+
Built with efficiency and automation in mind, it seamlessly integrates with your favorite tools.
46+
</p>
47+
48+
<div className="flex flex-col gap-4 sm:flex-row sm:items-center">
49+
<Link
50+
href="/docs"
51+
className="inline-flex items-center gap-2 rounded-lg bg-fd-primary px-6 py-3 font-semibold text-fd-primary-foreground transition-colors hover:bg-fd-primary/90"
52+
>
53+
Get Started
54+
<ArrowRight className="h-4 w-4" />
55+
</Link>
56+
<Link
57+
href="https://github.com/rivenmedia/riven"
58+
className="inline-flex items-center gap-2 rounded-lg border border-fd-border bg-fd-background px-6 py-3 font-semibold transition-colors hover:bg-fd-muted/50"
59+
>
60+
<Download className="h-4 w-4" />
61+
View on GitHub
62+
</Link>
63+
{stars && <StarCounter targetCount={stars} />}
64+
</div>
65+
66+
<div className="mt-8 flex items-center gap-6 text-sm text-fd-muted-foreground">
67+
<div className="flex items-center gap-2">
68+
<div className="h-2 w-2 rounded-full bg-green-500"></div>
69+
<span>Open Source</span>
70+
</div>
71+
<div className="flex items-center gap-2">
72+
<div className="h-2 w-2 rounded-full bg-blue-500"></div>
73+
<span>Self-Hosted</span>
74+
</div>
75+
<div className="flex items-center gap-2">
76+
<div className="h-2 w-2 rounded-full bg-purple-500"></div>
77+
<span>Docker Ready</span>
78+
</div>
79+
</div>
80+
</div>
81+
</div>
82+
</section>
83+
84+
{/* Features Grid */}
85+
<section className="border-b border-fd-border px-4 py-20">
86+
<div className="mx-auto max-w-6xl">
87+
<div className="mb-12 text-center">
88+
<h2 className="mb-4 text-3xl font-bold md:text-4xl">
89+
Powerful Features
90+
</h2>
91+
<p className="text-lg text-fd-muted-foreground">
92+
Everything you need for automated media management
93+
</p>
94+
</div>
95+
96+
<div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
97+
<FeatureCard
98+
icon={<Shield className="h-6 w-6" />}
99+
title="VFS-Based"
100+
description="Efficient organization using a virtual file system, keeping your media library clean and accessible."
101+
/>
102+
<FeatureCard
103+
icon={<Puzzle className="h-6 w-6" />}
104+
title="Extensive Integration"
105+
description="Works with Plex, Jellyfin, Emby, Real-Debrid, and many more services out of the box."
106+
/>
107+
<FeatureCard
108+
icon={<Cog className="h-6 w-6" />}
109+
title="Smart Automation"
110+
description="Automated content discovery, downloading, and organization with intelligent scraping and matching."
111+
/>
112+
<FeatureCard
113+
icon={<Bell className="h-6 w-6" />}
114+
title="Real-Time Notifications"
115+
description="Stay updated with Discord, Apprise, and webhook notifications for all your media events."
116+
/>
117+
<FeatureCard
118+
icon={<BarChart3 className="h-6 w-6" />}
119+
title="Rich Dashboard"
120+
description="Beautiful web interface with analytics, monitoring, and complete control over your media library."
121+
/>
122+
<FeatureCard
123+
icon={<GitBranch className="h-6 w-6" />}
124+
title="Advanced Scraping"
125+
description="Multiple scraper support with configurable quality preferences based on RTN."
126+
/>
127+
</div>
128+
</div>
129+
</section>
130+
131+
{/* Integration Showcase */}
132+
<section className="border-b border-fd-border px-4 py-20">
133+
<div className="mx-auto max-w-6xl">
134+
<div className="mb-12 text-center">
135+
<h2 className="mb-4 text-3xl font-bold md:text-4xl">
136+
Seamless Integration
137+
</h2>
138+
<p className="text-lg text-fd-muted-foreground">
139+
Connect with your favorite services
140+
</p>
141+
</div>
142+
143+
<div className="grid grid-cols-2 gap-6 md:grid-cols-2 lg:grid-cols-5">
144+
<IntegrationBadge name="Plex" />
145+
<IntegrationBadge name="Jellyfin" />
146+
<IntegrationBadge name="Emby" />
147+
<IntegrationBadge name="Real-Debrid" />
148+
<IntegrationBadge name="All-Debrid" />
149+
<IntegrationBadge name="Torrentio" />
150+
<IntegrationBadge name="Jackett" />
151+
<IntegrationBadge name="Prowlarr" />
152+
<IntegrationBadge name="Overseerr" />
153+
<IntegrationBadge name="Discord" />
154+
</div>
155+
</div>
156+
</section>
157+
158+
{/* Quick Start Section */}
159+
<section className="px-4 py-20">
160+
<div className="mx-auto max-w-6xl">
161+
<div className="rounded-2xl border border-fd-border bg-gradient-to-br from-blue-500/10 via-purple-500/10 to-pink-500/10 p-8 md:p-12">
162+
<div className="grid gap-8 lg:grid-cols-2 lg:gap-12">
163+
<div>
164+
<h2 className="mb-4 text-3xl font-bold md:text-4xl">
165+
Ready to get started?
166+
</h2>
167+
<p className="mb-6 text-lg text-fd-muted-foreground">
168+
Deploy Riven in minutes with Docker or follow our comprehensive installation guide.
169+
</p>
170+
<div className="flex flex-col gap-4 sm:flex-row">
171+
<Link
172+
href="/docs"
173+
className="inline-flex items-center gap-2 rounded-lg bg-fd-primary px-6 py-3 font-semibold text-fd-primary-foreground transition-colors hover:bg-fd-primary/90"
174+
>
175+
Read Documentation
176+
<ArrowRight className="h-4 w-4" />
177+
</Link>
178+
<Link
179+
href="https://github.com/rivenmedia/riven"
180+
className="inline-flex items-center gap-2 rounded-lg border border-fd-border bg-fd-background px-6 py-3 font-semibold transition-colors hover:bg-fd-muted/50"
181+
>
182+
View Source
183+
</Link>
184+
</div>
185+
</div>
186+
187+
<div className="rounded-lg border border-fd-border bg-fd-background/50 p-6">
188+
<h3 className="mb-4 font-semibold">Quick Install</h3>
189+
<pre className="overflow-x-auto rounded-lg bg-fd-muted/50 p-4 text-sm">
190+
<code className="text-fd-muted-foreground">
191+
{`docker run -d \\
192+
--name riven \\
193+
-p 8080:8080 \\
194+
-v ./data:/riven/data \\
195+
ghcr.io/rivenmedia/riven:latest`}
196+
</code>
197+
</pre>
198+
</div>
199+
</div>
200+
</div>
201+
</div>
202+
</section>
203+
204+
{/* Stats Section */}
205+
<section className="border-t border-fd-border px-4 py-12">
206+
<div className="mx-auto max-w-6xl">
207+
<div className="grid gap-8 text-center md:grid-cols-3">
208+
<div>
209+
<div className="mb-2 text-3xl font-bold">20+</div>
210+
<div className="text-sm text-fd-muted-foreground">Service Integrations</div>
211+
</div>
212+
<div>
213+
<div className="mb-2 text-3xl font-bold">100%</div>
214+
<div className="text-sm text-fd-muted-foreground">Open Source</div>
215+
</div>
216+
<div>
217+
<div className="mb-2 text-3xl font-bold">24/7</div>
218+
<div className="text-sm text-fd-muted-foreground">Automated Management</div>
219+
</div>
220+
</div>
221+
</div>
222+
</section>
17223
</main>
18224
);
19225
}
226+
227+
function FeatureCard({ icon, title, description }: { icon: React.ReactNode; title: string; description: string }) {
228+
return (
229+
<div className="rounded-lg border border-fd-border bg-fd-card p-6 transition-colors hover:bg-fd-muted/50">
230+
<div className="mb-4 inline-flex rounded-lg bg-fd-primary/10 p-3 text-fd-primary">
231+
{icon}
232+
</div>
233+
<h3 className="mb-2 text-xl font-semibold">{title}</h3>
234+
<p className="text-fd-muted-foreground">{description}</p>
235+
</div>
236+
);
237+
}
238+
239+
function IntegrationBadge({ name }: { name: string }) {
240+
return (
241+
<div className="flex items-center justify-center rounded-lg border border-fd-border bg-fd-card px-4 py-3 text-sm font-medium transition-colors hover:bg-fd-muted/50">
242+
{name}
243+
</div>
244+
);
245+
}

‎components/star-counter.tsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
'use client';
2+
3+
import { Star } from 'lucide-react';
4+
import { useEffect, useState } from 'react';
5+
6+
export function StarCounter({ targetCount }: { targetCount: number }) {
7+
const [count, setCount] = useState(0);
8+
9+
useEffect(() => {
10+
let start = 0;
11+
const duration = 2000; // 2 seconds
12+
const increment = targetCount / (duration / 16); // 60fps
13+
14+
const timer = setInterval(() => {
15+
start += increment;
16+
if (start >= targetCount) {
17+
setCount(targetCount);
18+
clearInterval(timer);
19+
} else {
20+
setCount(Math.floor(start));
21+
}
22+
}, 16);
23+
24+
return () => clearInterval(timer);
25+
}, [targetCount]);
26+
27+
return (
28+
<div className="inline-flex items-center gap-2 rounded-lg border border-fd-border bg-fd-card px-4 py-3 text-sm">
29+
<Star className="h-4 w-4 fill-yellow-500 text-yellow-500" />
30+
<span className="font-semibold tabular-nums">{count.toLocaleString()}</span>
31+
<span className="text-fd-muted-foreground">stars</span>
32+
</div>
33+
);
34+
}

‎content/docs/index.mdx‎

Lines changed: 3 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -65,39 +65,21 @@ description: All in one media management solution
6565
<div className="grid grid-cols-2 cards" markdown="1" style={{ justifyContent: "center" }} id="home-cards">
6666

6767
<div>
68-
- ⚙️ __Easy Installation__
69-
70-
---
68+
⚙️ __Easy Installation__
7169

7270
Get Riven up and running quickly with our comprehensive installation guide. Whether you're using Docker or running natively, we've got you covered.
7371

7472
[⚙️ Installation Guide](#installation)
7573
</div>
7674
<div>
77-
- 🔧 __Powerful Configuration__
78-
79-
---
75+
🔧 __Powerful Configuration__
8076

8177
Customize Riven to fit your media management needs. Configure debrid services, media servers, and more with our user-friendly interface.
8278

8379
[🔧 Configuration Options](#configuration)
8480
</div>
8581
<div>
86-
- ☁️ __ElfHosted ❤️__
87-
88-
---
89-
90-
[ElfHosted](https://elfhosted.com) is an [open-source](https://elfhosted.com/open/) PaaS that provides all the "plumbing" (*hosting, security, and updates, etc*) for your self-hosted apps, leaving the fun stuff for you!
91-
92-
!!! tip "🎉 **Sponsored**"
93-
100% of your Riven subscription revenue goes directly to Riven developers! ❤️
94-
95-
[☁️ Check out ElfHosted](#elfhosted)
96-
</div>
97-
<div>
98-
- __Active Community__
99-
100-
---
82+
__Active Community__
10183

10284
Join our vibrant community for support, updates, and contributions. Collaborate with other users and developers to make Riven even better.
10385

@@ -125,26 +107,6 @@ Riven streamlines your media consumption experience by:
125107

126108
Whether you're a casual viewer or a media enthusiast, Riven offers a powerful, automated solution to keep your media library up-to-date and easily accessible.
127109

128-
---
129-
## <img src="https://elfhosted.com/images/logo.svg" width="100" /> ElfHosted
130-
131-
[ElfHosted](https://elfhosted.com) is a geeky [open-source](https://elfhosted.com/open/) PaaS which provides all the "plumbing" (_hosting, security, updates, etc_) for your self-hosted apps.
132-
133-
**Curious how it works? Here's an [explainer video](https://www.youtube.com/watch?v=ZHZAEhLuJqk)!** :fire:
134-
135-
!!! important "**ElfHosted ❤️ Riven 100%**"
136-
137-
[Riven](https://elfhosted.com/app/riven/) is an "Elf-icial" app in the [ElfHosted app catalogue](https://elfhosted.com/apps/) - A whopping 100% of your subscription goes directly to Riven developers, who can usually be found in the [#elf-riven](https://discord.com/channels/396055506072109067/1253110932062601276) channel in the [ElfHosted Discord Server](https://discord.elfhosted.com).
138-
139-
!!! tip "ElfHosted "Infinite Streaming" bundles"
140-
Riven comes pre-packaged with Zurg and your choice of Plex, Jellyfin, or Emby, and is available in the following convenient bundles:
141-
142-
* [Starter Kit](https://store.elfhosted.com/product-category/streaming-bundles/starter) (*quick and easy setup*)
143-
* [Hobbit Bundle](https://store.elfhosted.com/product-category/streaming-bundles/hobbit) (*12.5% dedicated node, GPU transcoding, 250Mbps shared, extra bundled apps, 22% off non-bundled*)
144-
* [Ranger Bundle](https://store.elfhosted.com/product-category/streaming-bundles/ranger) (*25% dedicated node, GPU transcoding, 500Mbps shared, extra bundled apps, 44% off non-bundled*)
145-
* [Halfling Bundle](https://store.elfhosted.com/product-category/streaming-bundles/halfling) (*50% dedicated node, GPU transcoding, 1Gbps shared, extra bundled apps, 66% off non-bundled*)
146-
* [Nazgul Bundle](https://store.elfhosted.com/product-category/streaming-bundles/nazgul) (*100% dedicated node, GPU transcoding, 1Gbps dedicated, extra bundled apps, 88% off non-bundled*)
147-
148110
---
149111

150112
## Setup

0 commit comments

Comments
 (0)