fix app direction: no more app loops
This commit is contained in:
@@ -0,0 +1,33 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Geist, Geist_Mono } from "next/font/google";
|
||||
import "./globals.css";
|
||||
|
||||
const geistSans = Geist({
|
||||
variable: "--font-geist-sans",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
const geistMono = Geist_Mono({
|
||||
variable: "--font-geist-mono",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Create Next App",
|
||||
description: "Generated by create next app",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html
|
||||
lang="en"
|
||||
className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
|
||||
>
|
||||
<body className="min-h-full flex flex-col">{children}</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,171 @@
|
||||
"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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user