86 lines
3.2 KiB
TypeScript
86 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>
|
|||
|
|
);
|