add initial crates and apps

crates/chattyness-user-ui/src/pages/home.rs

@@ -0,0 +1,96 @@
+//! 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>
+    }
+}