Cesar Mendivil
8c2111702b
- Added framer-motion for animations in Features, Footer, Header, Hero, and Button components. - Implemented entrance animations for feature cards and section headers. - Enhanced button interactions with ripple effects and gradient overlays. - Improved mobile menu animations and transitions. - Added animated stats and placeholders in the Hero section. - Updated package.json to include framer-motion dependency.
92 lines
2.1 KiB
Markdown
92 lines
2.1 KiB
Markdown
{# Inteliq UI Kit - React.js Project
|
|
|
|
A modern React.js project built with Vite and TypeScript, implementing a comprehensive UI kit based on Figma designs.
|
|
|
|
## 🚀 Features
|
|
|
|
- ⚡ **Lightning Fast** - Built with Vite for optimal performance
|
|
- 🛡️ **Type Safe** - Full TypeScript support
|
|
- 📱 **Responsive** - Mobile-first design approach
|
|
- 🎨 **Modern UI** - Clean and modern component library
|
|
- 🔧 **Customizable** - Easy theming with Tailwind CSS
|
|
- ♿ **Accessible** - Built with accessibility in mind
|
|
|
|
## 🛠️ Tech Stack
|
|
|
|
- **React 18** - Modern React with hooks
|
|
- **TypeScript** - Type safety and better DX
|
|
- **Vite** - Fast build tool and dev server
|
|
- **Tailwind CSS** - Utility-first CSS framework
|
|
- **Lucide React** - Beautiful and consistent icons
|
|
|
|
## 📦 Installation
|
|
|
|
1. Install dependencies:
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
2. Start the development server:
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
3. Build for production:
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
## 🏗️ Project Structure
|
|
|
|
```
|
|
src/
|
|
├── components/ # React components
|
|
│ ├── ui/ # Reusable UI components
|
|
│ ├── Header.tsx # Navigation header
|
|
│ ├── Hero.tsx # Hero section
|
|
│ ├── Features.tsx # Features showcase
|
|
│ └── Footer.tsx # Footer component
|
|
├── lib/ # Utility functions
|
|
├── assets/ # Static assets
|
|
└── App.tsx # Main application component
|
|
```
|
|
|
|
## 🎨 Components
|
|
|
|
### Header
|
|
- Responsive navigation
|
|
- Mobile menu toggle
|
|
- CTA button
|
|
|
|
### Hero Section
|
|
- Compelling headline
|
|
- Call-to-action buttons
|
|
- Statistics display
|
|
- Animated placeholder design
|
|
|
|
### Features
|
|
- Grid layout
|
|
- Icon-based feature cards
|
|
- Hover effects
|
|
- Responsive design
|
|
|
|
### Footer
|
|
- Multi-column layout
|
|
- Social media links
|
|
- Company information
|
|
- Legal links
|
|
|
|
## 🚀 Getting Started
|
|
|
|
The project is ready to run! Simply use:
|
|
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
Then open [http://localhost:5173](http://localhost:5173) to view it in your browser.
|
|
|
|
## 📄 License
|
|
|
|
This project is open source and available under the [MIT License](LICENSE).
|