172 lines
7.5 KiB
TypeScript
172 lines
7.5 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { ArrowRight, Sparkles, Users, Zap } from "lucide-react";
|
|
|
|
export default function Home() {
|
|
return (
|
|
<div className="min-h-screen bg-white">
|
|
{/* Navigation */}
|
|
<nav className="border-b border-gray-200 sticky top-0 z-50 bg-white">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center">
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-8 h-8 bg-gradient-to-br from-pink-600 to-purple-600 rounded-lg flex items-center justify-center">
|
|
<span className="text-white text-sm font-bold">RP</span>
|
|
</div>
|
|
<span className="font-semibold text-lg">RoleplayAI</span>
|
|
</div>
|
|
<div className="flex items-center gap-4">
|
|
<Link href="/login" className="text-gray-600 hover:text-gray-900 font-medium">
|
|
Sign In
|
|
</Link>
|
|
<Link href="/login" className="bg-black text-white px-6 py-2 rounded-full hover:bg-gray-800 font-medium">
|
|
Get Started
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
{/* Hero Section */}
|
|
<section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-32">
|
|
<div className="text-center space-y-6 mb-12">
|
|
<h1 className="text-5xl md:text-7xl font-bold leading-tight">
|
|
AI Characters,
|
|
<br />
|
|
<span className="bg-gradient-to-r from-pink-600 to-purple-600 bg-clip-text text-transparent">
|
|
Real Conversations
|
|
</span>
|
|
</h1>
|
|
<p className="text-xl text-gray-600 max-w-2xl mx-auto">
|
|
Engage in immersive roleplay conversations with AI characters. Create, discover, and connect.
|
|
</p>
|
|
<div className="flex gap-4 justify-center pt-4">
|
|
<Link href="/login" className="bg-black text-white px-8 py-3 rounded-full hover:bg-gray-800 font-medium inline-flex items-center gap-2">
|
|
Start Free <ArrowRight size={18} />
|
|
</Link>
|
|
<button className="border-2 border-black px-8 py-3 rounded-full hover:bg-gray-50 font-medium">
|
|
Learn More
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Hero Visual */}
|
|
<div className="bg-gradient-to-br from-purple-100 via-pink-50 to-blue-100 rounded-3xl h-96 flex items-center justify-center">
|
|
<div className="text-center">
|
|
<div className="text-6xl mb-4">✨</div>
|
|
<p className="text-gray-600">AI-powered conversations await</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Features Section */}
|
|
<section className="bg-gray-50 py-20">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<h2 className="text-4xl font-bold text-center mb-16">Why Choose RoleplayAI?</h2>
|
|
|
|
<div className="grid md:grid-cols-3 gap-8">
|
|
{[
|
|
{
|
|
icon: Sparkles,
|
|
title: "Rich Characters",
|
|
description: "Explore a diverse library of AI characters with unique personalities and backgrounds",
|
|
},
|
|
{
|
|
icon: Users,
|
|
title: "Discover & Share",
|
|
description: "Find trending conversations and share your roleplay moments with the community",
|
|
},
|
|
{
|
|
icon: Zap,
|
|
title: "Instant Creation",
|
|
description: "Create your own AI characters in seconds with our intuitive builder",
|
|
},
|
|
].map((item, i) => (
|
|
<div key={i} className="bg-white p-8 rounded-2xl border border-gray-200 hover:shadow-lg transition">
|
|
<item.icon className="w-12 h-12 text-pink-600 mb-4" />
|
|
<h3 className="text-xl font-semibold mb-3">{item.title}</h3>
|
|
<p className="text-gray-600">{item.description}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Showcase Section */}
|
|
<section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
|
|
<h2 className="text-4xl font-bold mb-12">Featured Characters</h2>
|
|
|
|
<div className="grid md:grid-cols-4 gap-4">
|
|
{[1, 2, 3, 4].map((i) => (
|
|
<div key={i} className="bg-gradient-to-br from-gray-100 to-gray-200 rounded-xl aspect-square flex items-end p-4">
|
|
<div>
|
|
<h3 className="font-semibold text-lg mb-1">Character {i}</h3>
|
|
<p className="text-sm text-gray-600">Popular choice</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
{/* CTA Section */}
|
|
<section className="bg-black text-white py-20 mt-20">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center space-y-6">
|
|
<h2 className="text-5xl font-bold">Ready to explore?</h2>
|
|
<p className="text-xl text-gray-300 max-w-2xl mx-auto">
|
|
Join thousands of users enjoying immersive AI conversations
|
|
</p>
|
|
<Link href="/login" className="inline-block bg-white text-black px-8 py-3 rounded-full hover:bg-gray-100 font-medium">
|
|
Get Started for Free
|
|
</Link>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Footer */}
|
|
<footer className="bg-gray-50 border-t border-gray-200 py-12">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="grid md:grid-cols-4 gap-8 mb-8">
|
|
<div>
|
|
<h4 className="font-semibold mb-4">Product</h4>
|
|
<ul className="space-y-2 text-gray-600 text-sm">
|
|
<li><a href="#" className="hover:text-black">Features</a></li>
|
|
<li><a href="#" className="hover:text-black">Pricing</a></li>
|
|
<li><a href="#" className="hover:text-black">Security</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4 className="font-semibold mb-4">Company</h4>
|
|
<ul className="space-y-2 text-gray-600 text-sm">
|
|
<li><a href="#" className="hover:text-black">About</a></li>
|
|
<li><a href="#" className="hover:text-black">Blog</a></li>
|
|
<li><a href="#" className="hover:text-black">Contact</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4 className="font-semibold mb-4">Legal</h4>
|
|
<ul className="space-y-2 text-gray-600 text-sm">
|
|
<li><a href="#" className="hover:text-black">Terms</a></li>
|
|
<li><a href="#" className="hover:text-black">Privacy</a></li>
|
|
<li><a href="#" className="hover:text-black">Cookie</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4 className="font-semibold mb-4">Follow</h4>
|
|
<ul className="space-y-2 text-gray-600 text-sm">
|
|
<li><a href="#" className="hover:text-black">Twitter</a></li>
|
|
<li><a href="#" className="hover:text-black">Discord</a></li>
|
|
<li><a href="#" className="hover:text-black">Instagram</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div className="border-t border-gray-200 pt-8 flex justify-between items-center text-gray-600 text-sm">
|
|
<p>© 2024 RoleplayAI. All rights reserved.</p>
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-6 h-6 bg-gradient-to-br from-pink-600 to-purple-600 rounded"></div>
|
|
<span className="font-semibold">RoleplayAI</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
);
|
|
}
|