250 lines
12 KiB
TypeScript
250 lines
12 KiB
TypeScript
import { Button } from "@/components/ui/button"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Film, Music, Server, Users, Heart, Rocket } from "lucide-react"
|
|
import Image from "next/image"
|
|
|
|
export default function JefflixPage() {
|
|
return (
|
|
<div className="min-h-screen bg-background">
|
|
{/* Hero Section */}
|
|
<section className="relative overflow-hidden">
|
|
<div className="absolute inset-0 bg-gradient-to-br from-yellow-50 via-background to-green-50" />
|
|
<div
|
|
className="absolute inset-0 opacity-30"
|
|
style={{
|
|
backgroundImage:
|
|
"repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,.02) 2px, rgba(0,0,0,.02) 4px)",
|
|
}}
|
|
/>
|
|
<div className="relative container mx-auto px-4 py-12 md:py-20">
|
|
<div className="max-w-6xl mx-auto">
|
|
{/* Comic Panel Header */}
|
|
<div className="text-center space-y-6 mb-12">
|
|
<Badge className="bg-green-600 text-white text-lg px-4 py-2 font-bold border-2 border-green-800 shadow-md">
|
|
Digital Solidarity Project
|
|
</Badge>
|
|
<h1
|
|
className="text-5xl md:text-7xl font-black text-balance leading-tight"
|
|
style={{
|
|
textShadow: "3px 3px 0px rgba(0,0,0,0.1)",
|
|
color: "hsl(var(--foreground))",
|
|
}}
|
|
>
|
|
Seize the Streams of Production
|
|
</h1>
|
|
<div className="relative inline-block max-w-3xl">
|
|
<p className="text-xl md:text-2xl font-medium leading-relaxed text-muted-foreground">
|
|
Self-hosted media servers aren't just for tech nerds anymore. They're infrastructure for digital
|
|
solidarity—scalable to groups, communities, and organizations of any size. Break down the fortress
|
|
walls of digital feudalism, one server at a time.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Comic Panel Grid with Photos */}
|
|
<div className="grid md:grid-cols-3 gap-6 mb-12">
|
|
{/* Panel 1 */}
|
|
<div className="bg-card border-2 border-border rounded-lg shadow-md hover:shadow-lg transition-shadow overflow-hidden">
|
|
<div className="relative aspect-square">
|
|
<Image src="/images/jeff-tea.jpg" alt="Having tea with nature" fill className="object-cover" />
|
|
</div>
|
|
<div className="p-4 space-y-2">
|
|
<p className="font-semibold text-sm text-muted-foreground">Build communities, not customer bases</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Panel 2 */}
|
|
<div className="bg-card border-2 border-border rounded-lg shadow-md hover:shadow-lg transition-shadow overflow-hidden">
|
|
<div className="relative aspect-square">
|
|
<Image
|
|
src="/images/jeff-blueberries.jpg"
|
|
alt="Seeing through the matrix"
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
<div className="p-4 space-y-2">
|
|
<p className="font-semibold text-sm text-muted-foreground">See through artificial scarcity</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Panel 3 */}
|
|
<div className="bg-card border-2 border-border rounded-lg shadow-md hover:shadow-lg transition-shadow overflow-hidden">
|
|
<div className="relative aspect-square">
|
|
<Image src="/images/jeff-donkey.jpg" alt="Building bridges" fill className="object-cover" />
|
|
</div>
|
|
<div className="p-4 space-y-2">
|
|
<p className="font-semibold text-sm text-muted-foreground">Infrastructure scales with solidarity</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Action Buttons */}
|
|
<div className="text-center space-y-4">
|
|
<p className="text-lg font-medium text-muted-foreground">
|
|
Need a place to start? Try these servers (or build your own):
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
|
|
<Button asChild size="lg" className="text-lg px-8 py-6 font-bold" variant="default">
|
|
<a href="https://movies.jeffemmett.com">
|
|
<Film className="mr-2 h-5 w-5" />
|
|
Movies Server
|
|
</a>
|
|
</Button>
|
|
<Button asChild size="lg" className="text-lg px-8 py-6 font-bold bg-transparent" variant="outline">
|
|
<a href="https://music.jeffemmett.com">
|
|
<Music className="mr-2 h-5 w-5" />
|
|
Music Server
|
|
</a>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Self-Hosting Empowerment Section */}
|
|
<section className="border-y border-border bg-muted/30">
|
|
<div className="container mx-auto px-4 py-16 md:py-24">
|
|
<div className="max-w-5xl mx-auto">
|
|
<div className="text-center mb-12">
|
|
<h2 className="text-4xl md:text-5xl font-black text-balance mb-4">Why Self-Host?</h2>
|
|
<p className="text-xl text-muted-foreground max-w-2xl mx-auto leading-relaxed">
|
|
Technology promised abundance, but corporations chose artificial scarcity. Let's build the alternative.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-3 gap-8">
|
|
<div className="bg-card p-8 rounded-lg border-2 border-border shadow-sm hover:shadow-md transition-shadow">
|
|
<div className="flex flex-col items-center text-center space-y-4">
|
|
<div className="p-4 bg-green-100 dark:bg-green-900/30 rounded-full">
|
|
<Server className="h-8 w-8 text-green-600 dark:text-green-400" strokeWidth={2.5} />
|
|
</div>
|
|
<h3 className="text-xl font-bold">Own Your Infrastructure</h3>
|
|
<p className="text-muted-foreground leading-relaxed">
|
|
No remote kill switches. No disappearing content. Your data, your rules, your timeline.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-card p-8 rounded-lg border-2 border-border shadow-sm hover:shadow-md transition-shadow">
|
|
<div className="flex flex-col items-center text-center space-y-4">
|
|
<div className="p-4 bg-blue-100 dark:bg-blue-900/30 rounded-full">
|
|
<Users className="h-8 w-8 text-blue-600 dark:text-blue-400" strokeWidth={2.5} />
|
|
</div>
|
|
<h3 className="text-xl font-bold">Scale with Community</h3>
|
|
<p className="text-muted-foreground leading-relaxed">
|
|
Start small, grow with your network. From friend groups to organizations—the infrastructure adapts.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="bg-card p-8 rounded-lg border-2 border-border shadow-sm hover:shadow-md transition-shadow">
|
|
<div className="flex flex-col items-center text-center space-y-4">
|
|
<div className="p-4 bg-purple-100 dark:bg-purple-900/30 rounded-full">
|
|
<Heart className="h-8 w-8 text-purple-600 dark:text-purple-400" strokeWidth={2.5} />
|
|
</div>
|
|
<h3 className="text-xl font-bold">Digital Mutual Aid</h3>
|
|
<p className="text-muted-foreground leading-relaxed">
|
|
Sharing isn't piracy—it's solidarity. Build movements, not monopolies.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Resistance Section */}
|
|
<section className="py-16 md:py-24">
|
|
<div className="container mx-auto px-4">
|
|
<div className="max-w-4xl mx-auto space-y-12">
|
|
<div className="text-center space-y-4">
|
|
<h2 className="text-4xl md:text-5xl font-black text-balance">Beyond Digital Feudalism</h2>
|
|
<p className="text-xl text-muted-foreground leading-relaxed">
|
|
Streaming platforms aren't just bad business—they're architecture for extraction.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="space-y-6">
|
|
<div className="bg-card p-8 rounded-lg border-l-4 border-l-red-500 shadow-sm">
|
|
<h3 className="text-2xl font-bold mb-3">They Don't Own What They Sell</h3>
|
|
<p className="text-muted-foreground text-lg leading-relaxed">
|
|
Content rotates based on licensing deals, not user needs. You're not buying access—you're renting
|
|
temporary gates to shifting catalogs.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="bg-card p-8 rounded-lg border-l-4 border-l-blue-500 shadow-sm">
|
|
<h3 className="text-2xl font-bold mb-3">Subscription Fatigue is Designed</h3>
|
|
<p className="text-muted-foreground text-lg leading-relaxed">
|
|
The "streaming wars" recreated cable monopolies with extra steps. Fragmentation isn't a bug—it's the
|
|
business model.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="bg-card p-8 rounded-lg border-l-4 border-l-green-500 shadow-sm">
|
|
<h3 className="text-2xl font-bold mb-3">Technology Enables Abundance</h3>
|
|
<p className="text-muted-foreground text-lg leading-relaxed">
|
|
Digital goods cost nothing to copy, but everything to gate. Self-hosting is how we build
|
|
infrastructure for sharing, starting with media.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Empowerment-Focused CTA */}
|
|
<section className="py-16 md:py-24 bg-gradient-to-b from-green-50 to-blue-50 dark:from-green-950/20 dark:to-blue-950/20">
|
|
<div className="container mx-auto px-4">
|
|
<div className="max-w-3xl mx-auto text-center space-y-8">
|
|
<div className="space-y-6">
|
|
<div className="inline-block p-6 bg-primary/10 rounded-full">
|
|
<Rocket className="h-12 w-12 text-primary" strokeWidth={2.5} />
|
|
</div>
|
|
<h2 className="text-4xl md:text-5xl font-black text-balance">Start Your Own Server</h2>
|
|
<p className="text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto">
|
|
Tools like Jellyfin make self-hosting accessible. Start with your own library, share with friends, scale
|
|
to your community. Or use mine while you figure it out—that's the point.
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center pt-6">
|
|
<Button asChild size="lg" className="text-lg px-8 py-6 font-bold">
|
|
<a href="https://movies.jeffemmett.com">
|
|
<Film className="mr-2 h-5 w-5" />
|
|
Try Movies
|
|
</a>
|
|
</Button>
|
|
<Button asChild size="lg" variant="outline" className="text-lg px-8 py-6 font-bold bg-transparent">
|
|
<a href="https://music.jeffemmett.com">
|
|
<Music className="mr-2 h-5 w-5" />
|
|
Try Music
|
|
</a>
|
|
</Button>
|
|
</div>
|
|
<p className="text-sm text-muted-foreground pt-4">
|
|
Or learn how to set up your own Jellyfin server and join the movement
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Footer */}
|
|
<footer className="border-t border-border bg-muted/50">
|
|
<div className="container mx-auto px-4 py-12">
|
|
<div className="max-w-4xl mx-auto text-center space-y-4">
|
|
<div className="text-3xl font-black">JEFFLIX</div>
|
|
<p className="text-muted-foreground leading-relaxed max-w-2xl mx-auto">
|
|
Powered by Jellyfin. Built on solidarity. Infrastructure for the sharing economy—starting digitally.
|
|
</p>
|
|
<div className="pt-4 text-sm text-muted-foreground">
|
|
© 2025 • Support artists • Build movements • Question everything
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
)
|
|
}
|