mirror of
https://github.com/ershisan99/www.git
synced 2025-12-18 05:19:23 +00:00
412 lines
17 KiB
TypeScript
412 lines
17 KiB
TypeScript
import { GithubLinks } from '@/app/_components/github-links'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
|
import { DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
|
|
import { SiGithub } from '@icons-pack/react-simple-icons'
|
|
import { ChevronRight, MessageSquare, Trophy, Users } from 'lucide-react'
|
|
import Image from 'next/image'
|
|
import Link from 'next/link'
|
|
|
|
export default function Home() {
|
|
return (
|
|
<div className='flex min-h-screen flex-col'>
|
|
<main className='flex-1'>
|
|
<section className='space-y-6 pt-6 pb-8 md:pt-10 md:pb-12 lg:py-32'>
|
|
<div className='container mx-auto flex flex-col items-center gap-4 text-center'>
|
|
<Link
|
|
href='https://github.com/Balatro-Multiplayer'
|
|
className='rounded-2xl bg-muted px-4 py-1.5 font-medium text-sm'
|
|
target='_blank'
|
|
>
|
|
Follow along on GitHub
|
|
</Link>
|
|
<h1 className='font-bold text-3xl leading-tight tracking-tighter md:text-5xl lg:text-6xl'>
|
|
Play Balatro Against Your Friends
|
|
</h1>
|
|
<p className='max-w-[42rem] text-muted-foreground leading-normal sm:text-xl sm:leading-8'>
|
|
The unofficial multiplayer mod for Balatro. Challenge your
|
|
friends, compete in tournaments, and climb the global
|
|
leaderboards.
|
|
</p>
|
|
<div className='flex flex-col gap-4 sm:flex-row sm:space-x-4'>
|
|
<Button
|
|
asChild
|
|
size='lg'
|
|
className='w-full bg-red-600 text-white hover:bg-red-700 sm:w-auto'
|
|
>
|
|
<Link href='/docs/getting-started/installation'>
|
|
Get Started
|
|
<ChevronRight className='ml-2 h-4 w-4' />
|
|
</Link>
|
|
</Button>
|
|
<Button variant='outline' size='lg' asChild>
|
|
<Link href='/docs'>Learn More</Link>
|
|
</Button>
|
|
</div>
|
|
<div className='mt-8 w-full max-w-5xl rounded-lg border bg-card p-4 shadow-xl'>
|
|
<Image
|
|
src='/multiplayer-screenshot.jpeg'
|
|
width={1200}
|
|
height={600}
|
|
alt='Balatro Multiplayer Screenshot'
|
|
className='rounded-md'
|
|
priority
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section className='container mx-auto space-y-6 py-8 md:py-12 lg:py-24'>
|
|
<div className='mx-auto flex max-w-[58rem] flex-col items-center space-y-4 text-center'>
|
|
<h2 className='font-bold text-3xl leading-tight tracking-tighter md:text-4xl'>
|
|
Features
|
|
</h2>
|
|
<p className='max-w-[85%] text-muted-foreground leading-normal sm:text-lg sm:leading-7'>
|
|
Play with friends, compete globally, join tournaments
|
|
</p>
|
|
</div>
|
|
<div className='mx-auto grid justify-center gap-4 sm:grid-cols-2 md:max-w-[64rem] md:grid-cols-3'>
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Real-time Matches</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p>Challenge friends to head-to-head Balatro matches.</p>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Tournaments</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p>
|
|
Join our weekly tournaments and compete against other players.
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Global Leaderboards</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p>
|
|
Compete for the highest scores and track your progress against
|
|
players worldwide.
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Active Community</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p>
|
|
Join our Discord server to find matches, share strategies, and
|
|
participate in community events.
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Custom Game Modes</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p>
|
|
Play with modified rules and unique challenges created by the
|
|
community.
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Cross-Platform</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p>
|
|
Play with friends regardless of their platform - Windows, Mac,
|
|
or Linux.
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</section>
|
|
|
|
<section className='container mx-auto border-t border-b py-12 md:py-16'>
|
|
<div className='mx-auto mb-10 flex max-w-[58rem] flex-col items-center space-y-4 text-center'>
|
|
<h2 className='font-bold text-3xl leading-tight tracking-tighter md:text-4xl'>
|
|
Ways to Play
|
|
</h2>
|
|
<p className='max-w-[85%] text-muted-foreground leading-normal sm:text-lg sm:leading-7'>
|
|
Choose how you want to experience Balatro Multiplayer
|
|
</p>
|
|
</div>
|
|
|
|
<div className='mx-auto grid max-w-6xl gap-8 sm:grid-cols-2 lg:grid-cols-3'>
|
|
<Card className='flex h-full flex-col'>
|
|
<CardHeader className='pb-2'>
|
|
<div className='mb-2 flex h-12 w-12 items-center justify-center rounded-full bg-red-100'>
|
|
<Users className='h-6 w-6 text-red-600' />
|
|
</div>
|
|
<CardTitle>Direct Play</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className='flex-grow'>
|
|
<p className='mb-4 text-muted-foreground'>
|
|
Challenge friends in private matches
|
|
</p>
|
|
<ul className='space-y-2 text-sm'>
|
|
<li className='flex items-start gap-2'>
|
|
<span className='font-medium'>
|
|
• No matchmaking or ratings
|
|
</span>
|
|
</li>
|
|
<li className='flex items-start gap-2'>
|
|
<span className='font-medium'>
|
|
• Customize all lobby options
|
|
</span>
|
|
</li>
|
|
<li className='flex items-start gap-2'>
|
|
<span className='font-medium'>
|
|
• Play with friends directly
|
|
</span>
|
|
</li>
|
|
<li className='flex items-start gap-2'>
|
|
<span className='font-medium'>
|
|
• Perfect for casual games
|
|
</span>
|
|
</li>
|
|
</ul>
|
|
</CardContent>
|
|
{/*<div className='mt-auto p-6 pt-0'>*/}
|
|
{/* <Button variant='outline' className='w-full' asChild>*/}
|
|
{/* <Link href='/docs/direct-play'>Learn More</Link>*/}
|
|
{/* </Button>*/}
|
|
{/*</div>*/}
|
|
</Card>
|
|
|
|
<Card className='flex h-full flex-col'>
|
|
<CardHeader className='pb-2'>
|
|
<div className='mb-2 flex h-12 w-12 items-center justify-center rounded-full bg-red-100'>
|
|
<Trophy className='h-6 w-6 text-red-600' />
|
|
</div>
|
|
<CardTitle>Matchmaking Queues</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className='flex-grow'>
|
|
<p className='mb-4 text-muted-foreground'>
|
|
Compete in two distinct queues:
|
|
</p>
|
|
<div className='space-y-4'>
|
|
<div className='space-y-2 text-sm'>
|
|
<h4 className='font-semibold'>Vanilla Queue:</h4>
|
|
<ul className='space-y-1'>
|
|
<li>• Original game balance</li>
|
|
<li>• Has MMR but no MMR-based matchmaking</li>
|
|
<li>• Same seed for fair competition</li>
|
|
</ul>
|
|
</div>
|
|
<div className='space-y-2 text-sm'>
|
|
<h4 className='font-semibold'>Ranked Queue:</h4>
|
|
<ul className='space-y-1'>
|
|
<li>• Rebalanced cards and mechanics</li>
|
|
<li>• MMR-based matchmaking</li>
|
|
<li>• New jokers, reworked tarots, new planets</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
{/*<div className='mt-auto p-6 pt-0'>*/}
|
|
{/* <Button variant='outline' className='w-full' asChild>*/}
|
|
{/* <Link href='/docs/matchmaking'>Learn More</Link>*/}
|
|
{/* </Button>*/}
|
|
{/*</div>*/}
|
|
</Card>
|
|
|
|
<Card className='flex h-full flex-col'>
|
|
<CardHeader className='pb-2'>
|
|
<div className='mb-2 flex h-12 w-12 items-center justify-center rounded-full bg-red-100'>
|
|
<MessageSquare className='h-6 w-6 text-red-600' />
|
|
</div>
|
|
<CardTitle>Custom LFG</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className='flex-grow'>
|
|
<p className='mb-4 text-muted-foreground'>
|
|
Organize custom matches with unique rules and mods
|
|
</p>
|
|
<ul className='space-y-2 text-sm'>
|
|
<li className='flex items-start gap-2'>
|
|
<span className='font-medium'>
|
|
• Any ruleset or lobby options
|
|
</span>
|
|
</li>
|
|
<li className='flex items-start gap-2'>
|
|
<span className='font-medium'>
|
|
• Compatible with mods (with agreement)
|
|
</span>
|
|
</li>
|
|
<li className='flex items-start gap-2'>
|
|
<span className='font-medium'>• No MMR or rankings</span>
|
|
</li>
|
|
<li className='flex items-start gap-2'>
|
|
<span className='font-medium'>
|
|
• Great for experimenting with new formats
|
|
</span>
|
|
</li>
|
|
</ul>
|
|
</CardContent>
|
|
<div className='mt-auto p-6 pt-0'>
|
|
<Button variant='outline' className='w-full' asChild>
|
|
<Link href='https://discord.gg/E4ZFwWbtT5' target='_blank'>
|
|
Join Our Discord
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
|
|
<div className='mt-10 text-center'>
|
|
<Button
|
|
asChild
|
|
size='lg'
|
|
className='w-full bg-red-600 text-white hover:bg-red-700 sm:w-auto'
|
|
>
|
|
<Link href='/leaderboards'>
|
|
View Leaderboards
|
|
<Trophy className='ml-2 h-4 w-4' />
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</section>
|
|
|
|
<section className='container mx-auto py-8 md:py-12 lg:py-24'>
|
|
<div className='mx-auto max-w-[85rem]'>
|
|
<div className='mx-auto grid max-w-6xl gap-8 md:grid-cols-2'>
|
|
<div className='flex flex-col justify-center space-y-4'>
|
|
<div className='space-y-2'>
|
|
<h2 className='font-bold text-3xl tracking-tighter sm:text-4xl'>
|
|
How It Works
|
|
</h2>
|
|
<p className='max-w-[600px] text-muted-foreground md:text-xl/relaxed'>
|
|
Getting started with Balatro Multiplayer is simple. Install
|
|
the mod, connect with friends, and start playing.
|
|
</p>
|
|
</div>
|
|
<ul className='grid gap-6'>
|
|
<li className='flex items-start gap-4'>
|
|
<div className='flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-red-100 text-red-600'>
|
|
1
|
|
</div>
|
|
<div className='space-y-1'>
|
|
<h3 className='font-bold text-xl'>Install the Mod</h3>
|
|
<p className='text-muted-foreground'>
|
|
Download and install the multiplayer mod by following
|
|
the instructions on our documentation.
|
|
</p>
|
|
</div>
|
|
</li>
|
|
<li className='flex items-start gap-4'>
|
|
<div className='flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-red-100 text-red-600'>
|
|
2
|
|
</div>
|
|
<div className='space-y-1'>
|
|
<h3 className='font-bold text-xl'>Start a match</h3>
|
|
<p className='text-muted-foreground'>
|
|
Host your own game or join an existing one with a simple
|
|
game code.
|
|
</p>
|
|
</div>
|
|
</li>
|
|
<li className='flex items-start gap-4'>
|
|
<div className='flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-red-100 text-red-600'>
|
|
3
|
|
</div>
|
|
<div className='space-y-1'>
|
|
<h3 className='font-bold text-xl'>Play Together</h3>
|
|
<p className='text-muted-foreground'>
|
|
Compete in real-time with synchronized gameplay and live
|
|
scoring.
|
|
</p>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<div className='flex flex-col gap-2 min-[400px]:flex-row'>
|
|
<Button
|
|
size='lg'
|
|
className='w-full bg-red-600 text-white hover:bg-red-700 sm:w-auto'
|
|
asChild
|
|
>
|
|
<Link href='/docs/getting-started/installation'>
|
|
Install Now
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div className='flex items-center justify-center'>
|
|
<Image
|
|
src='/multiplayer-screenshot.jpeg'
|
|
width={500}
|
|
height={500}
|
|
alt='Balatro Multiplayer Gameplay'
|
|
className='rounded-lg shadow-xl'
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section className='bg-muted py-12 md:py-16'>
|
|
<div className='container mx-auto flex flex-col items-center justify-center gap-4 text-center'>
|
|
<h2 className='font-bold text-3xl tracking-tighter sm:text-4xl'>
|
|
Ready to Play?
|
|
</h2>
|
|
<p className='max-w-[600px] text-muted-foreground md:text-xl/relaxed'>
|
|
Join our competitive community of 3,000+ ranked players.
|
|
</p>
|
|
<Button
|
|
size='lg'
|
|
className='mt-4 w-full bg-red-600 text-white hover:bg-red-700 sm:w-auto'
|
|
asChild
|
|
>
|
|
<Link href='/docs/getting-started/installation'>
|
|
Get Started Now
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<footer className='border-t py-6 md:py-0'>
|
|
<div className='container mx-auto flex flex-col items-center justify-between gap-4 md:h-24 md:flex-row'>
|
|
<p className='text-center text-muted-foreground text-sm leading-loose md:text-left'>
|
|
© {new Date().getFullYear()} Balatro Multiplayer Mod. All
|
|
rights reserved. Not affiliated with LocalThunk or Playstack.
|
|
</p>
|
|
<nav className='flex items-center gap-4'>
|
|
<Link
|
|
href='/docs'
|
|
className='text-muted-foreground text-sm underline-offset-4 hover:underline'
|
|
>
|
|
Documentation
|
|
</Link>
|
|
<Link
|
|
href='/about'
|
|
className='text-muted-foreground text-sm underline-offset-4 hover:underline'
|
|
>
|
|
About
|
|
</Link>
|
|
{/*<Link*/}
|
|
{/* href='/credits'*/}
|
|
{/* className='text-muted-foreground text-sm underline-offset-4 hover:underline'*/}
|
|
{/*>*/}
|
|
{/* Credits*/}
|
|
{/*</Link>*/}
|
|
<GithubLinks>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant='ghost' size='icon'>
|
|
<SiGithub className='h-5 w-5' />
|
|
<span className='sr-only'>GitHub</span>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
</GithubLinks>
|
|
</nav>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
)
|
|
}
|