85 lines
3.2 KiB
TypeScript
85 lines
3.2 KiB
TypeScript
|
||
import React from 'react';
|
||
import { Link } from 'react-router-dom';
|
||
import { BookOpenIcon, PuzzleIcon, SparklesIcon, CogIcon } from '../components/Icons';
|
||
|
||
export const HomePage: React.FC = () => {
|
||
return (
|
||
<div className="text-center">
|
||
<h1 className="text-5xl font-extrabold mb-6 text-transparent bg-clip-text bg-gradient-to-r from-purple-400 via-pink-500 to-red-500">
|
||
Chemical Docs v0.2.5
|
||
</h1>
|
||
<p className="text-xl text-gray-300 mb-12 max-w-2xl mx-auto">
|
||
Your comprehensive guide to the Chemical library – a powerful Luau solution for reactive state management and declarative UI composition.
|
||
</p>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
|
||
<FeatureCard
|
||
icon={<BookOpenIcon className="h-12 w-12 text-purple-400 mb-4" />}
|
||
title="Reactive Primitives"
|
||
description="Understand Values, Computeds, and Effects for building dynamic applications."
|
||
linkTo="/api/value"
|
||
linkText="Explore Values"
|
||
/>
|
||
<FeatureCard
|
||
icon={<PuzzleIcon className="h-12 w-12 text-green-400 mb-4" />}
|
||
title="Stateful Collections"
|
||
description="Manage complex state with reactive Tables and Maps."
|
||
linkTo="/api/table"
|
||
linkText="Learn about Tables"
|
||
/>
|
||
<FeatureCard
|
||
icon={<SparklesIcon className="h-12 w-12 text-yellow-400 mb-4" />}
|
||
title="Declarative UI"
|
||
description="Compose user interfaces with ease using the `Compose` API."
|
||
linkTo="/api/compose"
|
||
linkText="Discover Compose"
|
||
/>
|
||
<FeatureCard
|
||
icon={<CogIcon className="h-12 w-12 text-blue-400 mb-4" />}
|
||
title="Networked State"
|
||
description="Synchronize state between server and clients with Reactions and Reactors."
|
||
linkTo="/api/reactor"
|
||
linkText="Understand Reactors"
|
||
/>
|
||
</div>
|
||
|
||
<div className="space-x-4">
|
||
<Link
|
||
to="/introduction"
|
||
className="bg-purple-600 hover:bg-purple-700 text-white font-semibold py-3 px-6 rounded-lg text-lg transition duration-150 ease-in-out shadow-md hover:shadow-lg"
|
||
>
|
||
Get Started
|
||
</Link>
|
||
<Link
|
||
to="/core-concepts"
|
||
className="bg-gray-700 hover:bg-gray-600 text-white font-semibold py-3 px-6 rounded-lg text-lg transition duration-150 ease-in-out shadow-md hover:shadow-lg"
|
||
>
|
||
Core Concepts
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
interface FeatureCardProps {
|
||
icon: React.ReactNode;
|
||
title: string;
|
||
description: string;
|
||
linkTo: string;
|
||
linkText: string;
|
||
}
|
||
|
||
const FeatureCard: React.FC<FeatureCardProps> = ({ icon, title, description, linkTo, linkText }) => (
|
||
<div className="bg-gray-800 p-8 rounded-xl shadow-xl hover:shadow-2xl transition-shadow duration-300 flex flex-col items-center">
|
||
{icon}
|
||
<h3 className="text-2xl font-semibold text-white mb-3">{title}</h3>
|
||
<p className="text-gray-400 mb-6 text-center">{description}</p>
|
||
<Link
|
||
to={linkTo}
|
||
className="mt-auto text-purple-400 hover:text-purple-300 font-medium transition-colors"
|
||
>
|
||
{linkText} →
|
||
</Link>
|
||
</div>
|
||
);
|