213 lines
8.4 KiB
TypeScript
213 lines
8.4 KiB
TypeScript
import Link from 'next/link'
|
|
import { Button } from '@/components/ui/button'
|
|
import {
|
|
Monitor,
|
|
Shield,
|
|
Zap,
|
|
Users,
|
|
Download,
|
|
ArrowRight,
|
|
Keyboard,
|
|
Globe,
|
|
Clock
|
|
} from 'lucide-react'
|
|
|
|
export default function HomePage() {
|
|
const features = [
|
|
{
|
|
icon: Zap,
|
|
title: 'Low Latency',
|
|
description: 'WebRTC-powered connections for real-time screen sharing and control with minimal delay.',
|
|
},
|
|
{
|
|
icon: Shield,
|
|
title: 'Secure by Design',
|
|
description: 'End-to-end encryption with session codes that expire. Your data never touches our servers.',
|
|
},
|
|
{
|
|
icon: Keyboard,
|
|
title: 'Full Control',
|
|
description: 'Complete mouse and keyboard control. Multiple monitor support and file transfer.',
|
|
},
|
|
{
|
|
icon: Globe,
|
|
title: 'Works Everywhere',
|
|
description: 'Connect from any browser. The agent runs on Windows, macOS, and Linux.',
|
|
},
|
|
{
|
|
icon: Users,
|
|
title: 'Team Ready',
|
|
description: 'Manage multiple machines, track session history, and collaborate with your team.',
|
|
},
|
|
{
|
|
icon: Clock,
|
|
title: 'Session History',
|
|
description: 'Complete audit trail of all remote sessions with timestamps and duration.',
|
|
},
|
|
]
|
|
|
|
return (
|
|
<div className="min-h-svh bg-background">
|
|
{/* Navigation */}
|
|
<nav className="border-b border-border/50">
|
|
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
|
<div className="flex h-16 items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<div className="flex h-9 w-9 items-center justify-center rounded-lg bg-primary">
|
|
<Monitor className="h-5 w-5 text-primary-foreground" />
|
|
</div>
|
|
<span className="text-xl font-bold">RemoteLink</span>
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<Button asChild>
|
|
<Link href="/auth/login">Sign in</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
{/* Hero Section */}
|
|
<section className="relative overflow-hidden">
|
|
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-24 md:py-32">
|
|
<div className="text-center max-w-3xl mx-auto">
|
|
<div className="inline-flex items-center gap-2 rounded-full bg-primary/10 px-4 py-1.5 text-sm text-primary mb-6">
|
|
<Shield className="h-4 w-4" />
|
|
<span>Secure Remote Access</span>
|
|
</div>
|
|
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight text-balance mb-6">
|
|
Remote Desktop
|
|
<span className="text-primary"> Made Simple</span>
|
|
</h1>
|
|
<p className="text-lg md:text-xl text-muted-foreground max-w-2xl mx-auto mb-8 text-balance">
|
|
Connect to and control remote machines securely. Perfect for IT support,
|
|
system administration, and helping friends and family.
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
<Button size="lg" asChild>
|
|
<Link href="/auth/login">
|
|
Sign in
|
|
<ArrowRight className="ml-2 h-4 w-4" />
|
|
</Link>
|
|
</Button>
|
|
<Button size="lg" variant="outline" asChild>
|
|
<Link href="/download">
|
|
<Download className="mr-2 h-4 w-4" />
|
|
Download Agent
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Background decoration */}
|
|
<div className="absolute inset-0 -z-10 overflow-hidden">
|
|
<div className="absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 h-[600px] w-[600px] rounded-full bg-primary/5 blur-3xl" />
|
|
</div>
|
|
</section>
|
|
|
|
{/* How it works */}
|
|
<section className="border-t border-border/50 bg-card/50">
|
|
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-24">
|
|
<div className="text-center mb-16">
|
|
<h2 className="text-3xl font-bold mb-4">How It Works</h2>
|
|
<p className="text-muted-foreground max-w-xl mx-auto text-balance">
|
|
Get connected in three simple steps
|
|
</p>
|
|
</div>
|
|
<div className="grid md:grid-cols-3 gap-8">
|
|
<div className="text-center">
|
|
<div className="inline-flex h-12 w-12 items-center justify-center rounded-full bg-primary text-primary-foreground text-xl font-bold mb-4">
|
|
1
|
|
</div>
|
|
<h3 className="font-semibold mb-2">Install the Agent</h3>
|
|
<p className="text-sm text-muted-foreground text-balance">
|
|
Download and run our lightweight agent on the remote machine
|
|
</p>
|
|
</div>
|
|
<div className="text-center">
|
|
<div className="inline-flex h-12 w-12 items-center justify-center rounded-full bg-primary text-primary-foreground text-xl font-bold mb-4">
|
|
2
|
|
</div>
|
|
<h3 className="font-semibold mb-2">Get a Session Code</h3>
|
|
<p className="text-sm text-muted-foreground text-balance">
|
|
The agent generates a 6-digit code that expires in 10 minutes
|
|
</p>
|
|
</div>
|
|
<div className="text-center">
|
|
<div className="inline-flex h-12 w-12 items-center justify-center rounded-full bg-primary text-primary-foreground text-xl font-bold mb-4">
|
|
3
|
|
</div>
|
|
<h3 className="font-semibold mb-2">Connect & Control</h3>
|
|
<p className="text-sm text-muted-foreground text-balance">
|
|
Enter the code in your dashboard and take full control
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Features Grid */}
|
|
<section className="border-t border-border/50">
|
|
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-24">
|
|
<div className="text-center mb-16">
|
|
<h2 className="text-3xl font-bold mb-4">Built for IT Professionals</h2>
|
|
<p className="text-muted-foreground max-w-xl mx-auto text-balance">
|
|
Everything you need for efficient remote support
|
|
</p>
|
|
</div>
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{features.map((feature, index) => (
|
|
<div
|
|
key={index}
|
|
className="rounded-xl border border-border/50 bg-card p-6 hover:border-primary/30 transition-colors"
|
|
>
|
|
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10 mb-4">
|
|
<feature.icon className="h-5 w-5 text-primary" />
|
|
</div>
|
|
<h3 className="font-semibold mb-2">{feature.title}</h3>
|
|
<p className="text-sm text-muted-foreground text-balance">{feature.description}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* CTA Section */}
|
|
<section className="border-t border-border/50 bg-primary/5">
|
|
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-24">
|
|
<div className="text-center">
|
|
<h2 className="text-3xl font-bold mb-4">Ready to connect?</h2>
|
|
<p className="text-muted-foreground max-w-xl mx-auto mb-8 text-balance">
|
|
Sign in to your account or contact your administrator for an invite.
|
|
</p>
|
|
<Button size="lg" asChild>
|
|
<Link href="/auth/login">
|
|
Sign in
|
|
<ArrowRight className="ml-2 h-4 w-4" />
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Footer */}
|
|
<footer className="border-t border-border/50">
|
|
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-8">
|
|
<div className="flex flex-col md:flex-row items-center justify-between gap-4">
|
|
<div className="flex items-center gap-2">
|
|
<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary">
|
|
<Monitor className="h-4 w-4 text-primary-foreground" />
|
|
</div>
|
|
<span className="font-semibold">RemoteLink</span>
|
|
</div>
|
|
<p className="text-sm text-muted-foreground">
|
|
Built with WebRTC. End-to-end encrypted.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
)
|
|
}
|