react-vite-themes/dist/pages/Home/Home.js

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.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { Link } from 'react-router-dom';
import { Button } from '../../components/atoms/Button';
import { Card } from '../../components/atoms/Card';
export const Home = () => {
    return (_jsx("div", { className: "app", children: _jsx("main", { className: "app__main", children: _jsxs("div", { className: "app__container", children: [_jsx("div", { className: "app__section", children: _jsx("div", { className: "hero", children: _jsxs("div", { className: "hero__content", children: [_jsx("h2", { className: "hero__title", children: "Build Better Interfaces" }), _jsx("p", { className: "hero__description", children: "A comprehensive design system with 50+ components, 12 color palettes, 16 gradients, and full TypeScript support. Perfect for React applications." }), _jsxs("div", { className: "hero__actions", children: [_jsx(Link, { to: "/documentation", children: _jsx(Button, { variant: "primary", size: "lg", children: "View Documentation" }) }), _jsx(Link, { to: "/documentation/buttons", children: _jsx(Button, { variant: "secondary", colorScheme: "outline", size: "lg", children: "Explore Components" }) })] })] }) }) }), _jsxs("div", { className: "app__section", children: [_jsx("h3", { className: "section-title", children: "Why Choose This Theme System?" }), _jsxs("div", { className: "features-grid", children: [_jsxs(Card, { variant: "neutral", style: "elevated", className: "feature-card", children: [_jsx("div", { className: "feature-card__icon", children: "\uD83C\uDFA8" }), _jsx("h4", { children: "Flexible Theming" }), _jsx("p", { children: "Light and dark themes with 12 color palettes and 16 gradients. Easy customization with SCSS variables." })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "feature-card", children: [_jsx("div", { className: "feature-card__icon", children: "\u26A1" }), _jsx("h4", { children: "TypeScript First" }), _jsx("p", { children: "Full TypeScript support with auto-generated types. Catch errors at compile time, not runtime." })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "feature-card", children: [_jsx("div", { className: "feature-card__icon", children: "\uD83D\uDCF1" }), _jsx("h4", { children: "Responsive Design" }), _jsx("p", { children: "Mobile-first approach with responsive components. Works perfectly on all screen sizes." })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "feature-card", children: [_jsx("div", { className: "feature-card__icon", children: "\u267F" }), _jsx("h4", { children: "Accessible" }), _jsx("p", { children: "Built with accessibility in mind. ARIA labels, keyboard navigation, and screen reader support." })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "feature-card", children: [_jsx("div", { className: "feature-card__icon", children: "\uD83D\uDD27" }), _jsx("h4", { children: "Easy Customization" }), _jsx("p", { children: "Simple SCSS variables and mixins. Customize colors, spacing, and components with ease." })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "feature-card", children: [_jsx("div", { className: "feature-card__icon", children: "\uD83D\uDCE6" }), _jsx("h4", { children: "Production Ready" }), _jsx("p", { children: "Optimized for production with tree-shaking support. Only include what you use." })] })] })] }), _jsxs("div", { className: "app__section", children: [_jsx("h3", { className: "section-title", children: "Quick Start" }), _jsxs("div", { className: "quick-start", children: [_jsxs(Card, { variant: "neutral", style: "filled", className: "code-card", children: [_jsx("h4", { children: "Installation" }), _jsx("pre", { children: _jsx("code", { children: `npm install react-theme-system` }) })] }), _jsxs(Card, { variant: "neutral", style: "filled", className: "code-card", children: [_jsx("h4", { children: "Basic Usage" }), _jsx("pre", { children: _jsx("code", { children: `import { Button, Card, Navbar } from 'react-theme-system';

function App() {
  return (
    <ThemeProvider>
      <Navbar brand="My App" />
      <Button variant="primary">Hello World</Button>
    </ThemeProvider>
  );
}` }) })] })] })] }), _jsx("div", { className: "app__section", children: _jsxs("div", { className: "cta", children: [_jsx("h3", { children: "Ready to Get Started?" }), _jsx("p", { children: "Explore the full documentation and see all available components." }), _jsx(Link, { to: "/documentation", children: _jsx(Button, { variant: "gradient-primary", size: "lg", children: "Browse Documentation" }) })] }) })] }) }) }));
};