xontopglobal/afrilift-ai

Africa continues to face persistent poverty, unemployment, limited access to education and skills, and unequal access to economic opportunities. Many vulnerable people do not know which skills they should acquire, what economic opportunities are available to them, or where to find relevant support. # React + Vite + shadcn/ui Starter Template A modern React starter template built with Vite, TypeScript, Tailwind CSS, and shadcn/ui components. ## 🚀 Features - ⚡️ **Vite** - Fast build tool and development server - ⚛️ **React 18** - Latest React with hooks support - 🎯 **TypeScript** - Type safety and better developer experience - 🎨 **Tailwind CSS** - Utility-first CSS framework - 🧩 **shadcn/ui** - Beautifully designed components built with Radix UI - 📦 **Path Mapping** - Clean imports with `@/` prefix ## 📦 Included shadcn/ui Components - Button - Card - Input - Label - Badge - Dialog - And more... ## 🛠️ Getting Started 1. **Install dependencies** ```bash npm install ``` 2. **Start development server** ```bash npm run dev ``` 3. **Build for production** ```bash npm run build ``` 4. **Preview production build** ```bash npm run preview ``` ## 📁 Project Structure ``` src/ ├── components/ │ └── ui/ # shadcn/ui components ├── lib/ │ └── utils.ts # Utility functions ├── App.tsx # Main application component ├── index.css # Global styles with Tailwind └── main.tsx # Application entry point ``` ## 🎨 Customization ### Adding New shadcn/ui Components This template is pre-configured with shadcn/ui. You can add more components by creating them in the `src/components/ui/` directory. ### Tailwind Configuration The Tailwind configuration is set up with shadcn/ui color variables. You can customize colors and other design tokens in: - `tailwind.config.js` - Tailwind configuration - `src/index.css` - CSS custom properties for themes ### TypeScript Configuration Path mapping is configured for clean imports: ```typescript import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; ``` ## 🌗 Dark Mode The template includes dark mode support through Tailwind's `dark:` classes and CSS custom properties. ## 📚 Learn More - Vite Documentation - React Documentation - Tailwind CSS - sh …