react-vite-themes
Version:
A test/experimental React theme system created for learning purposes. Features atomic design components, SCSS variables, and dark/light theme support. Not intended for production use.
23 lines (22 loc) • 8.94 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useNavigate } from "react-router-dom";
import { Button } from "../../components/atoms/Button";
import { Card } from "../../components/atoms/Card";
import { Icon } from "../../components/atoms/Icon";
import { StatCard } from "../../components/molecules/StatCard";
import { Image } from "../../components/atoms/Image";
import modulesData from './seeds/modules-data.json';
import './homePage.scss';
const HomePage = () => {
const navigate = useNavigate();
const handleNavigateToModules = () => {
navigate('/showcase/modules');
};
return (_jsxs("div", { className: "app__main p-0", children: [_jsx("section", { className: "bg-dark mb-xxl", children: _jsx("div", { className: "bg-gradient-rainbow-burst text-white py-8", children: _jsxs("div", { className: "container d-flex flex-column lg:flex-row align-center justify-between", children: [_jsxs("div", { className: "d-flex flex-column mb-4 lg:mr-3 text-center lg:w-50 text-shadow-light-xl", children: [_jsx("h1", { className: "font-bold mb-4", children: "\u00A1Bienvenidos a Hallo Migrante!" }), _jsx("p", { className: "text-xl mb-6 max-w-xxl opacity-95", children: "Plataforma de video lecciones para migrantes latinos en Alemania." }), _jsx("hr", {}), _jsxs("div", { className: "d-flex flex-wrap justify-center gap-3 mb-4", children: [_jsx(StatCard, { value: "15+", subtitle: "Components", style: "glass", isHoverable: true, size: "sm" }), _jsx(StatCard, { value: "100+", subtitle: "Utility Classes", style: "glass", isHoverable: true, size: "sm" }), _jsx(StatCard, { value: "8", subtitle: "Color Themes", style: "glass", isHoverable: true, size: "sm" }), _jsx(StatCard, { value: "100%", subtitle: "Responsive", style: "glass", isHoverable: true, size: "sm" })] }), _jsx("div", { className: "mt-4", children: _jsx(Button, { variant: "light", size: "lg", colorScheme: "glass", leftIcon: "components", className: "shadow-light-sm", onClick: handleNavigateToModules, children: "Ver M\u00F3dulos" }) })] }), _jsx("div", { className: "order-first lg:order-last lg:d-flex justify-center lg:w-50", children: _jsx(Image, { src: "https://images.unsplash.com/photo-1460925895917-afdab827c52f", alt: "Modern dashboard interface", style: "natural", size: "lg", className: "rounded-xxl shadow-light-xl" }) })] }) }) }), _jsxs("section", { className: "container-xl", children: [_jsxs("div", { className: "d-flex justify-between py-4", children: [_jsx("div", { className: "w-50 px-4", children: _jsx(Image, { src: "https://images.unsplash.com/photo-1460925895917-afdab827c52f", alt: "Modern dashboard interface", variant: "elevated", style: "natural", size: "lg", className: "rounded-xxl" }) }), _jsxs("div", { className: "w-50 px-4", children: [_jsx("h2", { className: "bg-gradient-rainbow-burst bg-clip-text", children: "Aprende. Con\u00E9ctate. Avanza." }), _jsx("h4", { children: "Hallo Migrante es tu plataforma de video lecciones para migrantes latinos en Alemania." }), _jsx("p", { className: "text-secondary", children: "Descubre lecciones pr\u00E1cticas, recursos \u00FAtiles y una comunidad que te apoya en cada paso de tu integraci\u00F3n. Aprende a tu ritmo, desde cualquier lugar, y prep\u00E1rate para alcanzar tus metas en Alemania." }), _jsx("div", { className: "d-flex justify-center mt-4", children: _jsx(Button, { variant: "gradient-sunset", size: "lg", leftIcon: "components", onClick: handleNavigateToModules, children: "Ver M\u00F3dulos" }) })] })] }), _jsxs("div", { className: "py-8", children: [_jsxs("div", { className: "text-center mb-8", children: [_jsx("h2", { className: "bg-gradient-rainbow-burst bg-clip-text mb-2", children: "M\u00F3dulos Destacados" }), _jsx("p", { className: "text-neutral-500 max-w-2xl mx-auto", children: "Explora nuestros m\u00F3dulos m\u00E1s populares dise\u00F1ados para ayudarte en tu integraci\u00F3n a Alemania" })] }), _jsx("div", { className: "d-grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", children: modulesData.featuredModules.map((module) => (_jsx(Card, { variant: "primary", style: "elevated", padding: "lg", isHoverable: true, image: {
src: module.image.src,
alt: module.image.alt,
height: "200px"
}, className: "shadow-light-md hover:shadow-light-lg transition-shadow", footer: _jsxs("div", { className: "d-flex align-center gap-2", children: [_jsx(Icon, { name: "clock", size: "sm" }), _jsx("i", { children: `Última actualización:
${new Date(module.lastUpdated).toLocaleDateString('es-ES', { year: 'numeric', month: 'long', day: 'numeric' })}` })] }), children: _jsxs("div", { className: "d-flex flex-column h-100", children: [_jsx("h3", { className: "text-xxl font-bold", children: module.title }), _jsx("p", { className: "mb-4", children: module.description }), _jsxs("div", { className: "d-flex justify-between align-center mt-auto", children: [_jsxs("span", { className: "text-sm d-flex align-center gap-2", children: [_jsx(Icon, { name: "lessons", size: "sm", className: `text-primary-500` }), _jsxs("p", { children: [module.lessons, " lecciones"] })] }), _jsx(Button, { variant: "primary", size: "sm", rightIcon: "tag", onClick: handleNavigateToModules, children: "Ver M\u00F3dulo" })] })] }) }, module.id))) }), _jsx("div", { className: "text-center mt-8", children: _jsx(Button, { variant: "secondary", size: "lg", leftIcon: "components", className: "shadow-light-sm", onClick: handleNavigateToModules, children: "Ver Todos los M\u00F3dulos" }) })] }), _jsxs("div", { className: "py-8", children: [_jsxs("div", { className: "text-center mb-8", children: [_jsx("h2", { className: "bg-gradient-rainbow-burst bg-clip-text mb-2", children: "\u00BFC\u00F3mo Funciona?" }), _jsx("p", { className: "text-neutral-500 max-w-2xl mx-auto", children: "Sigue estos simples pasos para comenzar tu viaje de aprendizaje en Alemania" })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6", children: [_jsxs(Card, { variant: "primary", style: "elevated", padding: "lg", className: "text-center", children: [_jsx("div", { className: "w-16 h-16 rounded-full d-flex align-center justify-center mb-4 mx-auto", children: _jsx(Icon, { name: "user", size: "xl", className: "text-primary-500" }) }), _jsx("h3", { className: "text-lg font-semibold mb-2", children: "1. Reg\u00EDstrate" }), _jsx("p", { className: "text-secondary text-sm mb-4", children: "Crea tu cuenta gratuita en menos de 2 minutos" }), _jsx(Button, { variant: "primary", size: "sm", children: "Crear Cuenta" })] }), _jsxs(Card, { variant: "success", style: "elevated", padding: "lg", className: "text-center", children: [_jsx("div", { className: "w-16 h-16 rounded-full d-flex align-center justify-center mb-4 mx-auto", children: _jsx(Icon, { name: "lessons", size: "xl", className: "text-success-500" }) }), _jsx("h3", { className: "text-lg font-semibold mb-2", children: "2. Elige tu M\u00F3dulo" }), _jsx("p", { className: "text-secondary text-sm mb-4", children: "Selecciona el \u00E1rea que m\u00E1s te interesa aprender" }), _jsx(Button, { variant: "success", size: "sm", onClick: handleNavigateToModules, children: "Explorar M\u00F3dulos" })] }), _jsxs(Card, { variant: "warning", style: "elevated", padding: "lg", className: "text-center", children: [_jsx("div", { className: "w-16 h-16 rounded-full d-flex align-center justify-center mb-4 mx-auto", children: _jsx(Icon, { name: "play", size: "xl", className: "text-warning-500" }) }), _jsx("h3", { className: "text-lg font-semibold mb-2", children: "3. Aprende a tu Ritmo" }), _jsx("p", { className: "text-secondary text-sm mb-4", children: "Accede a lecciones en video cuando quieras" }), _jsx(Button, { variant: "warning", size: "sm", onClick: handleNavigateToModules, children: "Ver Demo" })] }), _jsxs(Card, { variant: "error", style: "elevated", padding: "lg", className: "text-center", children: [_jsx("div", { className: "w-16 h-16 rounded-full d-flex align-center justify-center mb-4 mx-auto", children: _jsx(Icon, { name: "check-circle", size: "xl", className: "text-error-500" }) }), _jsx("h3", { className: "text-lg font-semibold mb-2", children: "4. Sigue tu Progreso" }), _jsx("p", { className: "text-secondary text-sm mb-4", children: "Monitorea tu avance y celebra tus logros" }), _jsx(Button, { variant: "error", size: "sm", children: "Ver Dashboard" })] })] }), _jsxs("div", { className: "text-center mt-8", children: [_jsx(Button, { variant: "gradient-sunset", size: "lg", leftIcon: "play", className: "shadow-light-sm", onClick: handleNavigateToModules, children: "Comenzar Ahora" }), _jsx("p", { className: "text-sm text-neutral-500 mt-3", children: "\u00A1\u00DAnete a m\u00E1s de 10,000 migrantes que ya est\u00E1n aprendiendo!" })] })] })] })] }));
};
export default HomePage;