104 lines
3.5 KiB
TypeScript
104 lines
3.5 KiB
TypeScript
"use client";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { motion } from "framer-motion";
|
|
import { useRouter } from "next/navigation";
|
|
import Logo from "@/components/Logo";
|
|
import Shine from "./Shine";
|
|
|
|
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.div
|
|
initial={{ opacity: 0, y: -10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5 }}
|
|
className="text-2xl font-bold"
|
|
>
|
|
<Logo />
|
|
</motion.div>
|
|
<div className="flex gap-4">
|
|
<Button variant="ghost" onClick={() => router.push("/auth?t=login")}>
|
|
Login
|
|
</Button>
|
|
<Button onClick={() => router.push("/auth?t=create")}>
|
|
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-4xl font-extrabold tracking-tight mb-6"
|
|
>
|
|
Your Conversations, Your Privacy, Your Community.
|
|
</motion.h2>
|
|
<p className="text-lg text-muted-foreground max-w-xl mb-8">
|
|
A modern chat app for teams, communities 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("/auth?t=create")}>
|
|
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 our self-hostable node / server 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 with plugins."
|
|
/>
|
|
<FeatureCard
|
|
icon={<Shield className="h-10 w-10 text-primary" />}
|
|
title="Secure & Private"
|
|
description="Your messages are managed by your chosen node server, including your own self hosted node."
|
|
/>
|
|
</section> */}
|
|
|
|
{/* Showcase */}
|
|
<motion.section
|
|
className="w-full lg:w-6xl mx-auto px-8 pb-10"
|
|
initial={{ opacity: 0, y: -20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6 }}
|
|
>
|
|
<Shine />
|
|
|
|
<img
|
|
src="/ss.png"
|
|
alt="Showcase"
|
|
className="w-full mx-auto relative border border-accent rounded-lg"
|
|
/>
|
|
</motion.section>
|
|
|
|
{/* Footer */}
|
|
<footer className="px-6 py-8 border-t text-center text-sm text-muted-foreground">
|
|
© {new Date().getFullYear()} Axiom. All rights reserved.
|
|
</footer>
|
|
</div>
|
|
);
|
|
}
|