feat: remove blockchain landing copy
This commit is contained in:
+92
-165
@@ -4,11 +4,8 @@ import {
|
||||
ChevronRight,
|
||||
Coins,
|
||||
Egg,
|
||||
Film,
|
||||
PlayCircle,
|
||||
Shield,
|
||||
Tv,
|
||||
Wallet,
|
||||
Zap,
|
||||
} from "lucide-react";
|
||||
import Link from "next/link";
|
||||
@@ -16,10 +13,9 @@ import { Button } from "@/components/ui/button";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-background flex flex-col selection:bg-primary selection:text-primary-foreground">
|
||||
{/* Grain Pattern Overlay */}
|
||||
<div className="min-h-screen flex flex-col bg-background selection:bg-primary selection:text-primary-foreground">
|
||||
<div
|
||||
className="fixed inset-0 z-0 opacity-[0.06] pointer-events-none"
|
||||
className="fixed inset-0 pointer-events-none z-0 opacity-[0.06]"
|
||||
style={{
|
||||
backgroundImage:
|
||||
"radial-gradient(circle at 2px 2px, rgba(185, 28, 28, 0.5) 1px, transparent 0)",
|
||||
@@ -27,28 +23,26 @@ export default function LandingPage() {
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Header */}
|
||||
<header className="sticky top-0 z-50 w-full border-b bg-background/80 backdrop-blur-md">
|
||||
<div className="container mx-auto px-4 h-16 flex items-center justify-between">
|
||||
<div className="container mx-auto flex h-16 items-center justify-between px-4">
|
||||
<div className="flex items-center gap-2 group cursor-pointer">
|
||||
<div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center transition-transform group-hover:rotate-12">
|
||||
<Egg className="w-5 h-5 text-primary-foreground" />
|
||||
<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary transition-transform group-hover:rotate-12">
|
||||
<Egg className="h-5 w-5 text-primary-foreground" />
|
||||
</div>
|
||||
<span className="font-display text-xl tracking-tight">
|
||||
CoopCredits
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<nav className="hidden md:flex items-center gap-8">
|
||||
<nav className="hidden items-center gap-8 md:flex">
|
||||
<a
|
||||
href="#features"
|
||||
className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
|
||||
className="text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
|
||||
>
|
||||
Features
|
||||
</a>
|
||||
<a
|
||||
href="#how-it-works"
|
||||
className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
|
||||
className="text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
|
||||
>
|
||||
How it Works
|
||||
</a>
|
||||
@@ -58,7 +52,6 @@ export default function LandingPage() {
|
||||
</Button>
|
||||
</Link>
|
||||
</nav>
|
||||
|
||||
<Link href="/login" className="md:hidden">
|
||||
<Button size="sm" className="rounded-full">
|
||||
Login
|
||||
@@ -67,198 +60,132 @@ export default function LandingPage() {
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="flex-1 relative z-10">
|
||||
{/* Hero Section */}
|
||||
<section className="py-20 md:py-32 overflow-hidden">
|
||||
<main className="relative z-10 flex-1">
|
||||
<section className="overflow-hidden py-20 md:py-32">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto text-center space-y-8">
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 text-primary text-xs font-bold uppercase tracking-widest border border-primary/20 animate-in fade-in slide-in-from-bottom-4 duration-500">
|
||||
<Coins className="w-3 h-3" />
|
||||
Blockchain-Powered Barnyard
|
||||
<div className="mx-auto max-w-4xl space-y-8 text-center">
|
||||
<div className="inline-flex items-center gap-2 rounded-full border border-primary/20 bg-primary/10 px-3 py-1 text-xs font-bold uppercase tracking-widest text-primary animate-in fade-in slide-in-from-bottom-4 duration-500">
|
||||
<Coins className="h-3 w-3" /> Barnyard rewards
|
||||
</div>
|
||||
|
||||
<h1 className="font-display text-5xl md:text-7xl tracking-tight leading-[1.1] animate-in fade-in slide-in-from-bottom-8 duration-700 delay-100">
|
||||
<h1 className="font-display text-5xl leading-[1.1] tracking-tight animate-in fade-in slide-in-from-bottom-8 duration-700 delay-100 md:text-7xl">
|
||||
Welcome to the Coop, Friend
|
||||
</h1>
|
||||
|
||||
<p className="text-xl text-muted-foreground max-w-2xl mx-auto animate-in fade-in slide-in-from-bottom-12 duration-1000 delay-200">
|
||||
Earn $COOP tokens automatically for every minute you watch on
|
||||
Plex. Then spend them like golden eggs to request new movies &
|
||||
shows.
|
||||
<p className="mx-auto max-w-2xl text-xl text-muted-foreground animate-in fade-in slide-in-from-bottom-12 duration-1000 delay-200">
|
||||
Earn $COOP automatically for every minute you watch on Plex.
|
||||
Spend it like golden eggs to request movies and shows.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row items-center justify-center gap-4 pt-4 animate-in fade-in slide-in-from-bottom-16 duration-1000 delay-300">
|
||||
<div className="flex flex-col items-center justify-center gap-4 pt-4 sm:flex-row animate-in fade-in slide-in-from-bottom-16 duration-1000 delay-300">
|
||||
<Link href="/login">
|
||||
<Button
|
||||
size="lg"
|
||||
className="h-14 px-8 text-lg rounded-full shadow-lg shadow-primary/20 group"
|
||||
className="h-14 rounded-full px-8 text-lg shadow-lg shadow-primary/20 group"
|
||||
>
|
||||
Join the Flock
|
||||
<ChevronRight className="ml-2 w-5 h-5 transition-transform group-hover:translate-x-1" />
|
||||
Join the Flock{" "}
|
||||
<ChevronRight className="ml-2 h-5 w-5 transition-transform group-hover:translate-x-1" />
|
||||
</Button>
|
||||
</Link>
|
||||
<a href="#how-it-works">
|
||||
<a href="#features">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="lg"
|
||||
className="h-14 px-8 text-lg rounded-full"
|
||||
variant="outline"
|
||||
className="h-14 rounded-full px-8 text-lg"
|
||||
>
|
||||
How It Works
|
||||
See how it works
|
||||
</Button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Warm glow background element */}
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[400px] bg-primary/10 blur-[120px] rounded-full -z-10 pointer-events-none" />
|
||||
</section>
|
||||
|
||||
{/* Features Section */}
|
||||
<section id="features" className="py-24 border-y bg-secondary/40">
|
||||
<section id="features" className="border-y bg-card/50 py-20">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="font-display text-3xl md:text-5xl tracking-tight">
|
||||
What the Coop Offers
|
||||
</h2>
|
||||
<p className="text-muted-foreground mt-4 max-w-xl mx-auto">
|
||||
A little barnyard magic mixed with blockchain tech.
|
||||
<div className="mb-12 text-center">
|
||||
<p className="text-sm font-bold uppercase tracking-[0.3em] text-primary">
|
||||
Why the flock likes it
|
||||
</p>
|
||||
<h2 className="mt-3 font-display text-3xl md:text-5xl">
|
||||
Simple, warm, and built for watching
|
||||
</h2>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-12">
|
||||
<div className="space-y-4 p-6 rounded-2xl bg-background border-2 transition-all hover:shadow-xl hover:-translate-y-1">
|
||||
<div className="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center mb-6">
|
||||
<PlayCircle className="w-6 h-6 text-primary" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold">Watch & Cluck</h3>
|
||||
<p className="text-muted-foreground leading-relaxed">
|
||||
Every minute on Plex earns $COOP. No extra steps — just kick
|
||||
back and enjoy the show.
|
||||
<div className="grid gap-6 md:grid-cols-3">
|
||||
<div className="rounded-3xl border bg-background/80 p-6 shadow-sm">
|
||||
<PlayCircle className="h-10 w-10 text-primary" />
|
||||
<h3 className="mt-4 text-xl font-bold">Watch earns</h3>
|
||||
<p className="mt-2 text-muted-foreground">
|
||||
Every minute on Plex fills your nest with $COOP.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4 p-6 rounded-2xl bg-background border-2 transition-all hover:shadow-xl hover:-translate-y-1">
|
||||
<div className="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center mb-6">
|
||||
<Shield className="w-6 h-6 text-primary" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold">Solana Strong</h3>
|
||||
<p className="text-muted-foreground leading-relaxed">
|
||||
Your $COOP lives on the Solana blockchain — fast, transparent,
|
||||
and secure as a locked coop.
|
||||
<div className="rounded-3xl border bg-background/80 p-6 shadow-sm">
|
||||
<Shield className="h-10 w-10 text-primary" />
|
||||
<h3 className="mt-4 text-xl font-bold">Safe balance</h3>
|
||||
<p className="mt-2 text-muted-foreground">
|
||||
Your credits live in the coop database and update fast.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4 p-6 rounded-2xl bg-background border-2 transition-all hover:shadow-xl hover:-translate-y-1">
|
||||
<div className="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center mb-6">
|
||||
<Zap className="w-6 h-6 text-primary" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold">Spend Your Eggs</h3>
|
||||
<p className="text-muted-foreground leading-relaxed">
|
||||
Cash in $COOP to request new movies or shows on Overseer. You
|
||||
help build the library.
|
||||
<div className="rounded-3xl border bg-background/80 p-6 shadow-sm">
|
||||
<Zap className="h-10 w-10 text-primary" />
|
||||
<h3 className="mt-4 text-xl font-bold">Request fast</h3>
|
||||
<p className="mt-2 text-muted-foreground">
|
||||
Spend credits on movie and TV requests with a few taps.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* How it Works Section */}
|
||||
<section id="how-it-works" className="py-24">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-3xl mx-auto space-y-16">
|
||||
<div className="text-center space-y-4">
|
||||
<h2 className="font-display text-3xl md:text-5xl tracking-tight">
|
||||
Simple as Counting Chickens
|
||||
</h2>
|
||||
<p className="text-muted-foreground text-lg italic">
|
||||
“Our way of saying thanks for being part of the Hoboken
|
||||
Chicken family!”
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-12">
|
||||
<div className="flex gap-6 items-start">
|
||||
<div className="flex-none w-10 h-10 rounded-full bg-primary flex items-center justify-center font-bold text-primary-foreground font-display">
|
||||
1
|
||||
<section id="how-it-works" className="py-20">
|
||||
<div className="container mx-auto grid gap-10 px-4 lg:grid-cols-[1.1fr_0.9fr] lg:items-center">
|
||||
<div className="space-y-6">
|
||||
<p className="text-sm font-bold uppercase tracking-[0.3em] text-primary">
|
||||
How it works
|
||||
</p>
|
||||
<h2 className="font-display text-3xl md:text-5xl">
|
||||
A cozy loop: watch, earn, request, repeat
|
||||
</h2>
|
||||
<p className="max-w-xl text-lg text-muted-foreground">
|
||||
No weird hoops. Plex watch time becomes credits. Credits become
|
||||
requests. The coop keeps score.
|
||||
</p>
|
||||
<ul className="space-y-4 text-sm text-muted-foreground">
|
||||
<li>• Log in with Plex.</li>
|
||||
<li>• Watch content.</li>
|
||||
<li>• Get $COOP in your balance.</li>
|
||||
<li>• Request new content from dashboard.</li>
|
||||
</ul>
|
||||
<Link href="/login">
|
||||
<Button size="lg" className="rounded-full px-8">
|
||||
Enter the Coop <ChevronRight className="ml-2 h-5 w-5" />
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="rounded-[2rem] border bg-card p-8 shadow-[0_25px_60px_-35px_rgba(0,0,0,0.5)]">
|
||||
<div className="space-y-4">
|
||||
<div className="rounded-2xl bg-primary/10 p-4">
|
||||
<div className="text-xs uppercase tracking-[0.3em] text-muted-foreground">
|
||||
Balance
|
||||
</div>
|
||||
<div className="space-y-2 pt-1">
|
||||
<h4 className="text-xl font-bold">
|
||||
Connect Your Plex Account
|
||||
</h4>
|
||||
<p className="text-muted-foreground">
|
||||
Just log in with Plex. We set up your Solana wallet
|
||||
quietly in the background.
|
||||
</p>
|
||||
<div className="mt-2 text-4xl font-bold">$COOP</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="rounded-2xl bg-secondary p-4">
|
||||
<div className="text-xs uppercase tracking-[0.25em] text-muted-foreground">
|
||||
Watch
|
||||
</div>
|
||||
<div className="mt-2 text-2xl font-bold">Earn</div>
|
||||
</div>
|
||||
<div className="rounded-2xl bg-secondary p-4">
|
||||
<div className="text-xs uppercase tracking-[0.25em] text-muted-foreground">
|
||||
Spend
|
||||
</div>
|
||||
<div className="mt-2 text-2xl font-bold">Request</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-6 items-start">
|
||||
<div className="flex-none w-10 h-10 rounded-full bg-primary flex items-center justify-center font-bold text-primary-foreground font-display">
|
||||
2
|
||||
</div>
|
||||
<div className="space-y-2 pt-1">
|
||||
<h4 className="text-xl font-bold">Watch Your Favorites</h4>
|
||||
<p className="text-muted-foreground">
|
||||
Enjoy movies and shows as usual. Tautulli tracks your
|
||||
time, and $COOP lands in your wallet.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-6 items-start">
|
||||
<div className="flex-none w-10 h-10 rounded-full bg-primary flex items-center justify-center font-bold text-primary-foreground font-display">
|
||||
3
|
||||
</div>
|
||||
<div className="space-y-2 pt-1">
|
||||
<h4 className="text-xl font-bold">Redeem & Repeat</h4>
|
||||
<p className="text-muted-foreground">
|
||||
Spend $COOP to pick new things for the server via
|
||||
Overseer. Happy requesting!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-card border-2 p-8 rounded-3xl flex flex-col md:flex-row items-center gap-8 shadow-2xl shadow-primary/5">
|
||||
<div className="flex-1 space-y-4 text-center md:text-left">
|
||||
<h3 className="font-display text-2xl">Ready to roost?</h3>
|
||||
<p className="text-muted-foreground">
|
||||
Come join the flock and earn rewards for your watch time.
|
||||
</p>
|
||||
</div>
|
||||
<Link href="/login">
|
||||
<Button size="lg" className="rounded-full px-8 h-12">
|
||||
Start Now
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="border-t-2 py-12 bg-secondary/40">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="flex flex-col md:flex-row justify-between items-center gap-8">
|
||||
<div className="flex items-center gap-2 opacity-60">
|
||||
<Egg className="w-5 h-5" />
|
||||
<span className="font-display">CoopCredits</span>
|
||||
</div>
|
||||
|
||||
<div className="text-sm text-muted-foreground text-center md:text-right">
|
||||
<p>
|
||||
© {new Date().getFullYear()} Hoboken Chicken. All rights
|
||||
reserved.
|
||||
</p>
|
||||
<p className="mt-1 flex items-center justify-center md:justify-end gap-1">
|
||||
Built with <Zap className="w-3 h-3 text-primary fill-primary" />{" "}
|
||||
on Solana
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user