120 lines
4.0 KiB
TypeScript
120 lines
4.0 KiB
TypeScript
"use client";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { Input } from "@/components/ui/input";
|
|
import { MessageCircle, Users, Shield } from "lucide-react";
|
|
import { motion } from "framer-motion";
|
|
import { useRouter } from "next/navigation";
|
|
|
|
export default function LandingPage() {
|
|
const router = useRouter();
|
|
|
|
return (
|
|
<div className="min-h-screen flex flex-col">
|
|
{/* Header */}
|
|
<header className="flex items-center justify-between px-8 py-6 border-b bg-background/60 backdrop-blur-md sticky top-0 z-50">
|
|
<motion.img
|
|
initial={{ opacity: 0, y: -10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5 }}
|
|
className="text-2xl font-bold"
|
|
src="/voxa.svg"
|
|
/>
|
|
<div className="flex gap-4">
|
|
<Button variant="ghost" onClick={() => router.push("/login")}>
|
|
Login
|
|
</Button>
|
|
<Button onClick={() => router.push("/signup")}>Get Started</Button>
|
|
</div>
|
|
</header>
|
|
|
|
{/* Hero Section */}
|
|
<main className="flex-1 flex flex-col items-center justify-center text-center px-6 py-20">
|
|
<motion.h2
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6 }}
|
|
className="text-4xl md:text-6xl font-extrabold tracking-tight mb-6"
|
|
>
|
|
Chat. Connect. Collaborate.
|
|
</motion.h2>
|
|
<p className="text-lg text-muted-foreground max-w-xl mb-8">
|
|
A modern chat app for teams and friends. Stay connected with real-time
|
|
messaging, secure channels, and seamless collaboration.
|
|
</p>
|
|
<div className="flex gap-3">
|
|
<Button size="lg" onClick={() => router.push("/signup")}>
|
|
Get Started
|
|
</Button>
|
|
<Button
|
|
size="lg"
|
|
variant="outline"
|
|
onClick={() => router.push("/docs/introduction")}
|
|
>
|
|
Learn More
|
|
</Button>
|
|
</div>
|
|
</main>
|
|
|
|
{/* Features */}
|
|
<section className="grid md:grid-cols-3 gap-6 px-6 py-16 max-w-6xl mx-auto">
|
|
<FeatureCard
|
|
icon={<MessageCircle className="h-10 w-10 text-primary" />}
|
|
title="Real-Time Chat"
|
|
description="Experience instant messaging with typing indicators, read receipts, and more with our self-hostable node system."
|
|
/>
|
|
<FeatureCard
|
|
icon={<Users className="h-10 w-10 text-primary" />}
|
|
title="Group Channels"
|
|
description="Organize conversations into channels for projects, teams, or friends by hosting your own server."
|
|
/>
|
|
<FeatureCard
|
|
icon={<Shield className="h-10 w-10 text-primary" />}
|
|
title="Secure & Private"
|
|
description="Your data is encrypted and protected, ensuring safe communication."
|
|
/>
|
|
</section>
|
|
|
|
{/* Call to Action */}
|
|
{/* <section className="bg-muted py-20 px-6 text-center">
|
|
<h3 className="text-3xl font-semibold mb-4">
|
|
Ready to start chatting?
|
|
</h3>
|
|
<p className="text-muted-foreground mb-6">
|
|
Create your free account today and bring your conversations together.
|
|
</p>
|
|
<div className="max-w-md mx-auto flex gap-2">
|
|
<Input placeholder="Enter your email" />
|
|
<Button>Sign Up</Button>
|
|
</div>
|
|
</section> */}
|
|
|
|
{/* Footer */}
|
|
<footer className="px-6 py-8 border-t text-center text-sm text-muted-foreground">
|
|
© {new Date().getFullYear()} Voxa. All rights reserved.
|
|
</footer>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function FeatureCard({
|
|
icon,
|
|
title,
|
|
description,
|
|
}: {
|
|
icon: React.ReactNode;
|
|
title: string;
|
|
description: string;
|
|
}) {
|
|
return (
|
|
<Card className="shadow-sm">
|
|
<CardContent className="p-6 flex flex-col items-center text-center">
|
|
{icon}
|
|
<h4 className="mt-4 font-semibold text-xl">{title}</h4>
|
|
<p className="mt-2 text-muted-foreground">{description}</p>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|