feat: (ui) new design
This commit is contained in:
syntaxbullet
236
web/src/pages/Home.tsx
Normal file
236
web/src/pages/Home.tsx
Normal file
@@ -0,0 +1,236 @@
|
||||
import React from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { Badge } from "../components/ui/badge";
|
||||
import { Button } from "../components/ui/button";
|
||||
import { FeatureCard } from "../components/feature-card";
|
||||
import { InfoCard } from "../components/info-card";
|
||||
import { SectionHeader } from "../components/section-header";
|
||||
import { TestimonialCard } from "../components/testimonial-card";
|
||||
import {
|
||||
GraduationCap,
|
||||
Coins,
|
||||
Package,
|
||||
ShieldCheck,
|
||||
Zap,
|
||||
Trophy
|
||||
} from "lucide-react";
|
||||
|
||||
export function Home() {
|
||||
return (
|
||||
<div className="min-h-screen bg-aurora-page text-foreground font-outfit overflow-x-hidden">
|
||||
{/* Navigation (Simple) */}
|
||||
<nav className="fixed top-0 w-full z-50 glass-card border-b border-border/50 py-4 px-8 flex justify-between items-center">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 rounded-full bg-aurora sun-flare" />
|
||||
<span className="text-xl font-bold tracking-tight text-primary">Aurora</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-6">
|
||||
<Link to="/dashboard" className="text-step--1 font-medium text-muted-foreground hover:text-primary transition-colors">
|
||||
Dashboard
|
||||
</Link>
|
||||
<Link to="/design-system" className="text-step--1 font-medium text-muted-foreground hover:text-primary transition-colors">
|
||||
Design System
|
||||
</Link>
|
||||
|
||||
</div>
|
||||
</nav>
|
||||
{/* Hero Section */}
|
||||
<header className="relative pt-32 pb-20 px-8 text-center max-w-5xl mx-auto space-y-10">
|
||||
<Badge variant="glass" className="mb-4 py-1.5 px-4 text-step--1 animate-in zoom-in spin-in-12 duration-700 delay-100">
|
||||
The Ultimate Academic Strategy RPG
|
||||
</Badge>
|
||||
|
||||
<h1 className="flex flex-col items-center justify-center text-step-5 font-black tracking-tighter leading-[0.9] text-primary drop-shadow-sm">
|
||||
<span className="animate-in slide-in-from-bottom-8 fade-in duration-700 delay-200 fill-mode-both">
|
||||
Rise to the Top
|
||||
</span>
|
||||
<span className="animate-in slide-in-from-bottom-8 fade-in duration-700 delay-300 fill-mode-both">
|
||||
of the Elite Academy
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-step--1 md:text-step-0 text-muted-foreground max-w-2xl mx-auto leading-relaxed animate-in slide-in-from-bottom-4 fade-in duration-700 delay-500 fill-mode-both">
|
||||
Aurora is a competitive academic RPG bot where students are assigned to Classes A through D, vying for supremacy in a high-stakes elite school setting.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap justify-center gap-6 pt-6 animate-in zoom-in-50 fade-in duration-700 delay-700 fill-mode-both">
|
||||
<Button className="bg-primary text-primary-foreground active-press font-bold px-6">
|
||||
Join our Server
|
||||
</Button>
|
||||
<Button className="bg-secondary text-primary-foreground active-press font-bold px-6">
|
||||
Explore Documentation
|
||||
</Button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Features Section (Bento Grid) */}
|
||||
<section className="px-8 pb-32 max-w-7xl mx-auto">
|
||||
<div className="grid grid-cols-1 md:grid-cols-6 lg:grid-cols-4 gap-6">
|
||||
|
||||
{/* Class System */}
|
||||
<FeatureCard
|
||||
className="md:col-span-3 lg:col-span-2 delay-400"
|
||||
title="Class Constellations"
|
||||
category="Immersion"
|
||||
description="You are assigned to one of the four constellations: Class A, B, C, or D. Work with your classmates to rise through the rankings and avoid expulsion."
|
||||
icon={<GraduationCap className="w-32 h-32 text-primary" />}
|
||||
>
|
||||
<div className="flex gap-2 pt-2">
|
||||
<Badge variant="secondary" className="bg-primary/10 text-primary border-primary/20">Constellation Units</Badge>
|
||||
<Badge variant="secondary" className="bg-primary/10 text-primary border-primary/20">Special Exams</Badge>
|
||||
</div>
|
||||
</FeatureCard>
|
||||
|
||||
{/* Economy */}
|
||||
<FeatureCard
|
||||
className="md:col-span-3 lg:col-span-1 delay-500"
|
||||
title="Astral Units"
|
||||
category="Commerce"
|
||||
description="Earn Astral Units through exams, tasks, and achievements. Use them to purchase privileges or influence test results."
|
||||
icon={<Coins className="w-20 h-20 text-secondary" />}
|
||||
/>
|
||||
|
||||
{/* Inventory */}
|
||||
<FeatureCard
|
||||
className="md:col-span-2 lg:col-span-1 delay-500"
|
||||
title="Inventory"
|
||||
category="Management"
|
||||
description="Manage vast collections of items, from common materials to legendary artifacts with unique rarities."
|
||||
icon={<Package className="w-20 h-20 text-primary" />}
|
||||
/>
|
||||
|
||||
{/* Exams */}
|
||||
<FeatureCard
|
||||
className="md:col-span-2 lg:col-span-1 delay-600"
|
||||
title="Special Exams"
|
||||
category="Academics"
|
||||
description="Participate in complex written and physical exams. Strategy and cooperation are key to survival."
|
||||
>
|
||||
<div className="space-y-2 pt-2">
|
||||
<div className="h-1.5 w-full bg-secondary/20 rounded-full overflow-hidden">
|
||||
<div className="h-full bg-aurora w-[65%]" />
|
||||
</div>
|
||||
<div className="flex justify-between text-[10px] text-muted-foreground font-bold uppercase tracking-wider">
|
||||
<span>Island Exam</span>
|
||||
<span>Active</span>
|
||||
</div>
|
||||
</div>
|
||||
</FeatureCard>
|
||||
|
||||
{/* Trading & Social */}
|
||||
<FeatureCard
|
||||
className="md:col-span-3 lg:col-span-2 delay-400"
|
||||
title="Class Constellations"
|
||||
category="Immersion"
|
||||
description="You are assigned to one of the four constellations: Class A, B, C, or D. Work with your classmates to rise through the rankings and avoid expulsion."
|
||||
icon={<GraduationCap className="w-32 h-32 text-primary" />}
|
||||
>
|
||||
<div className="flex gap-2 pt-2">
|
||||
<Badge variant="secondary" className="bg-primary/10 text-primary border-primary/20">Constellation Units</Badge>
|
||||
<Badge variant="secondary" className="bg-primary/10 text-primary border-primary/20">Special Exams</Badge>
|
||||
</div>
|
||||
</FeatureCard>
|
||||
|
||||
{/* Tech Stack */}
|
||||
<FeatureCard
|
||||
className="md:col-span-6 lg:col-span-1 delay-700 bg-primary/5"
|
||||
title="Modern Core"
|
||||
category="Technology"
|
||||
description="Built for speed and reliability using the most modern tech stack."
|
||||
>
|
||||
<div className="flex flex-wrap gap-2 text-[10px] font-bold">
|
||||
<span className="px-2 py-1 bg-black text-white rounded">BUN 1.0+</span>
|
||||
<span className="px-2 py-1 bg-[#5865F2] text-white rounded">DISCORD.JS</span>
|
||||
<span className="px-2 py-1 bg-[#C5F74F] text-black rounded">DRIZZLE</span>
|
||||
<span className="px-2 py-1 bg-[#336791] text-white rounded">POSTGRES</span>
|
||||
</div>
|
||||
</FeatureCard>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Unique Features Section */}
|
||||
<section className="px-8 py-20 bg-primary/5 border-y border-border/50">
|
||||
<div className="max-w-7xl mx-auto space-y-16">
|
||||
<SectionHeader
|
||||
badge="Why Aurora?"
|
||||
title="More Than Just A Game"
|
||||
description="Aurora isn't just about leveling up. It's a social experiment designed to test your strategic thinking, diplomacy, and resource management."
|
||||
/>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
<InfoCard
|
||||
icon={<Trophy className="w-6 h-6" />}
|
||||
title="Merit-Based Society"
|
||||
description="Your class standing determines your privileges. Earn points to rise, or lose them and face the consequences of falling behind."
|
||||
iconWrapperClassName="bg-primary/20 text-primary"
|
||||
/>
|
||||
<InfoCard
|
||||
icon={<ShieldCheck className="w-6 h-6" />}
|
||||
title="Psychological Warfare"
|
||||
description="Form alliances, uncover spies, and execute strategies during Special Exams where trust is the most valuable currency."
|
||||
iconWrapperClassName="bg-secondary/20 text-secondary"
|
||||
/>
|
||||
<InfoCard
|
||||
icon={<Zap className="w-6 h-6" />}
|
||||
title="Dynamic World"
|
||||
description="The school rules change based on the actions of the student body. Your decisions shape the future of the academy."
|
||||
iconWrapperClassName="bg-primary/20 text-primary"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Testimonials Section */}
|
||||
<section className="px-8 py-32 max-w-7xl mx-auto">
|
||||
<SectionHeader
|
||||
badge="Student Voices"
|
||||
title="Overheard at the Academy"
|
||||
/>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
<TestimonialCard
|
||||
quote="I thought I could just grind my way to the top like other RPGs. I was wrong. The Class D exams forced me to actually talk to people and strategize."
|
||||
author="Alex K."
|
||||
role="Class D Representative"
|
||||
avatarGradient="bg-gradient-to-br from-blue-500 to-purple-500"
|
||||
/>
|
||||
<TestimonialCard
|
||||
className="mt-8 md:mt-0"
|
||||
quote="The economy systems are surprisingly deep. Manipulating the market during exam week is honestly the most fun I've had in a Discord server."
|
||||
author="Sarah M."
|
||||
role="Class B Treasurer"
|
||||
avatarGradient="bg-gradient-to-br from-emerald-500 to-teal-500"
|
||||
/>
|
||||
<TestimonialCard
|
||||
quote="Aurora creates an environment where 'elite' actually means something. Maintaining Class A status is stressful but incredibly rewarding."
|
||||
author="James R."
|
||||
role="Class A President"
|
||||
avatarGradient="bg-gradient-to-br from-rose-500 to-orange-500"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="py-20 px-8 border-t border-border/50 bg-background/50">
|
||||
<div className="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center gap-8">
|
||||
<div className="flex flex-col items-center md:items-start gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-6 h-6 rounded-full bg-aurora" />
|
||||
<span className="text-lg font-bold text-primary">Aurora</span>
|
||||
</div>
|
||||
<p className="text-step--1 text-muted-foreground text-center md:text-left">
|
||||
© 2026 Aurora Project. Licensed under MIT.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-8 text-step--1 font-medium text-muted-foreground">
|
||||
<a href="#" className="hover:text-primary transition-colors">Documentation</a>
|
||||
<a href="#" className="hover:text-primary transition-colors">Support Server</a>
|
||||
<a href="#" className="hover:text-primary transition-colors">Privacy Policy</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Home;
|
||||
Reference in New Issue
Block a user