96 lines
3.8 KiB
Rust
96 lines
3.8 KiB
Rust
//! Home page component.
|
|
|
|
use leptos::prelude::*;
|
|
|
|
use crate::components::{Card, PageLayout};
|
|
|
|
/// Home page.
|
|
#[component]
|
|
pub fn HomePage() -> impl IntoView {
|
|
view! {
|
|
<PageLayout>
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
|
// Hero section
|
|
<section class="text-center mb-16">
|
|
<h1 class="text-4xl md:text-6xl font-bold text-white mb-6">
|
|
"Welcome to "
|
|
<span class="text-blue-400">"Chattyness"</span>
|
|
</h1>
|
|
<p class="text-xl text-gray-300 max-w-2xl mx-auto mb-8">
|
|
"Create and explore virtual spaces where communities come alive. "
|
|
"Build your own realm, customize it, and invite others to join."
|
|
</p>
|
|
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
<a href="/realms/new" class="btn-primary text-lg px-8 py-4">
|
|
"Create Your Realm"
|
|
</a>
|
|
<a href="/realms" class="btn-secondary text-lg px-8 py-4">
|
|
"Explore Realms"
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
// Features section
|
|
<section class="mb-16">
|
|
<h2 class="text-2xl font-bold text-white text-center mb-8">"Why Chattyness?"</h2>
|
|
<div class="grid md:grid-cols-3 gap-8">
|
|
<FeatureCard
|
|
icon="castle"
|
|
title="Create Realms"
|
|
description="Build themed virtual spaces with multiple scenes, customizable spots, and interactive elements."
|
|
/>
|
|
<FeatureCard
|
|
icon="users"
|
|
title="Build Communities"
|
|
description="Invite friends, manage members, and create a thriving community around your interests."
|
|
/>
|
|
<FeatureCard
|
|
icon="palette"
|
|
title="Customize Everything"
|
|
description="Props, avatars, scenes, and scripts - make your realm truly unique."
|
|
/>
|
|
</div>
|
|
</section>
|
|
|
|
// CTA section
|
|
<section class="text-center">
|
|
<Card class="p-8 max-w-2xl mx-auto">
|
|
<h2 class="text-2xl font-bold text-white mb-4">"Ready to get started?"</h2>
|
|
<p class="text-gray-300 mb-6">
|
|
"Create your first realm in just a few clicks. No experience needed."
|
|
</p>
|
|
<a href="/realms/new" class="btn-primary inline-block">
|
|
"Create a Realm"
|
|
</a>
|
|
</Card>
|
|
</section>
|
|
</div>
|
|
</PageLayout>
|
|
}
|
|
}
|
|
|
|
/// Feature card component.
|
|
#[component]
|
|
fn FeatureCard(icon: &'static str, title: &'static str, description: &'static str) -> impl IntoView {
|
|
let icon_symbol = match icon {
|
|
"castle" => "castle",
|
|
"users" => "users",
|
|
"palette" => "palette",
|
|
_ => "star",
|
|
};
|
|
|
|
view! {
|
|
<Card class="p-6 text-center">
|
|
<div class="text-4xl mb-4" aria-hidden="true">
|
|
<img
|
|
src=format!("/icons/{}.svg", icon_symbol)
|
|
alt=""
|
|
class="w-12 h-12 mx-auto"
|
|
aria-hidden="true"
|
|
/>
|
|
</div>
|
|
<h3 class="text-xl font-semibold text-white mb-2">{title}</h3>
|
|
<p class="text-gray-400">{description}</p>
|
|
</Card>
|
|
}
|
|
}
|