290 lines
14 KiB
TypeScript
290 lines
14 KiB
TypeScript
import { Button } from "@/components/ui/button"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Film, Music, Server, Users, Heart, Rocket, Tv } from "lucide-react"
|
|
import Image from "next/image"
|
|
import { JefflixLogo } from "@/components/jefflix-logo"
|
|
|
|
export default function JefflixPage() {
|
|
return (
|
|
<div className="min-h-screen bg-background">
|
|
{/* Hero Section */}
|
|
<section className="relative overflow-hidden">
|
|
<div className="absolute inset-0">
|
|
<Image
|
|
src="/images/jeff-tea.jpg"
|
|
alt="Building communities in nature"
|
|
fill
|
|
className="object-cover opacity-20"
|
|
priority
|
|
/>
|
|
</div>
|
|
<div className="absolute inset-0 bg-gradient-to-br from-yellow-50/80 via-background/90 to-green-50/80" />
|
|
<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">
|
|
<div className="mb-4">
|
|
<JefflixLogo />
|
|
</div>
|
|
<h1
|
|
className="text-3xl font-black text-balance leading-tight md:text-4xl font-marker"
|
|
style={{
|
|
textShadow: "3px 3px 0px rgba(0,0,0,0.1)",
|
|
color: "hsl(var(--foreground))",
|
|
}}
|
|
>
|
|
Seizing the Streams of Production :P
|
|
</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>
|
|
|
|
{/* Action Buttons */}
|
|
<div className="text-center space-y-4">
|
|
<p className="text-lg font-medium text-muted-foreground">Try it out on Jefflix (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 bg-red-600 hover:bg-red-700 text-white"
|
|
variant="default"
|
|
>
|
|
<a href="https://movies.jeffemmett.com">
|
|
<Film className="mr-2 h-5 w-5" />
|
|
Movies
|
|
</a>
|
|
</Button>
|
|
<Button
|
|
asChild
|
|
size="lg"
|
|
className="text-lg px-8 py-6 font-bold bg-blue-600 hover:bg-blue-700 text-white"
|
|
variant="default"
|
|
>
|
|
<a href="https://movies.jeffemmett.com">
|
|
<Tv className="mr-2 h-5 w-5" />
|
|
Shows
|
|
</a>
|
|
</Button>
|
|
<Button
|
|
asChild
|
|
size="lg"
|
|
className="text-lg px-8 py-6 font-bold bg-green-600 hover:bg-green-700 text-white"
|
|
variant="outline"
|
|
>
|
|
<a href="https://music.jeffemmett.com">
|
|
<Music className="mr-2 h-5 w-5" />
|
|
Music
|
|
</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-3xl md:text-3xl font-black text-balance mb-4 font-marker">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 className="flex justify-center mt-12">
|
|
<Badge className="bg-green-600 text-white text-lg px-4 py-2 font-bold border-2 border-green-800 shadow-md">
|
|
An Experiment in Digital Solidarity
|
|
</Badge>
|
|
</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-3xl md:text-3xl font-black text-balance font-marker">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-xl font-bold mb-3 font-marker">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-xl font-bold mb-3 font-marker">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-xl font-bold mb-3 font-marker">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 className="relative mt-16 rounded-xl overflow-hidden shadow-2xl">
|
|
<div className="relative aspect-[16/9]">
|
|
<Image
|
|
src="/images/jeff-blueberries.jpg"
|
|
alt="Seeing through the matrix of artificial scarcity"
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
|
|
<div className="absolute bottom-0 left-0 right-0 p-6">
|
|
<p className="text-white text-xl font-bold text-center font-marker text-shadow">
|
|
See through artificial scarcity
|
|
</p>
|
|
</div>
|
|
</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-3xl md:text-3xl font-black text-balance font-marker">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 bg-red-600 hover:bg-red-700 text-white">
|
|
<a href="https://movies.jeffemmett.com">
|
|
<Film className="mr-2 h-5 w-5" />
|
|
Movies
|
|
</a>
|
|
</Button>
|
|
<Button
|
|
asChild
|
|
size="lg"
|
|
className="text-lg px-8 py-6 font-bold bg-blue-600 hover:bg-blue-700 text-white"
|
|
>
|
|
<a href="https://movies.jeffemmett.com">
|
|
<Tv className="mr-2 h-5 w-5" />
|
|
Shows
|
|
</a>
|
|
</Button>
|
|
<Button
|
|
asChild
|
|
size="lg"
|
|
className="text-lg px-8 py-6 font-bold bg-green-600 hover:bg-green-700 text-white"
|
|
>
|
|
<a href="https://music.jeffemmett.com">
|
|
<Music className="mr-2 h-5 w-5" />
|
|
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 className="relative mt-12 rounded-xl overflow-hidden shadow-2xl">
|
|
<div className="relative aspect-video">
|
|
<Image src="/images/jeff-donkey.jpg" alt="Making connections" fill className="object-cover" />
|
|
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent" />
|
|
<div className="absolute inset-0 flex items-end justify-center p-8">
|
|
<p className="text-white text-2xl md:text-3xl font-black text-center font-marker drop-shadow-lg">
|
|
If this ass can figure it out, you can too! XD
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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">
|
|
<JefflixLogo className="justify-center" size="small" />
|
|
<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>
|
|
)
|
|
}
|