120 lines
2.4 KiB
Markdown
120 lines
2.4 KiB
Markdown
# WDI Website
|
|
|
|
A modern React application built with TypeScript, Tailwind CSS, and Framer Motion for WDI's corporate website.
|
|
|
|
## 🚀 Quick Start
|
|
|
|
### Prerequisites
|
|
|
|
- Node.js (v18 or higher)
|
|
- npm or yarn package manager
|
|
|
|
### Installation
|
|
|
|
1. **Clone the repository**
|
|
```bash
|
|
git clone <your-repository-url>
|
|
cd wdi-website
|
|
```
|
|
|
|
2. **Install dependencies**
|
|
```bash
|
|
npm install
|
|
# or
|
|
yarn install
|
|
```
|
|
|
|
3. **Start the development server**
|
|
```bash
|
|
npm run dev
|
|
# or
|
|
yarn dev
|
|
```
|
|
|
|
4. **Open your browser**
|
|
Navigate to `http://localhost:3000`
|
|
|
|
## 📁 Project Structure
|
|
|
|
```
|
|
├── components/ # Reusable UI components
|
|
│ ├── ui/ # Shadcn/ui components
|
|
│ └── ... # Custom components
|
|
├── pages/ # Page components
|
|
├── styles/ # Global CSS and Tailwind config
|
|
├── imports/ # SVG and asset imports
|
|
└── ...
|
|
```
|
|
|
|
## 🛠️ Built With
|
|
|
|
- **React 18** - UI library
|
|
- **TypeScript** - Type safety
|
|
- **Vite** - Build tool
|
|
- **Tailwind CSS v4** - Styling
|
|
- **Framer Motion** - Animations
|
|
- **Radix UI** - Accessible components
|
|
- **Lucide React** - Icons
|
|
|
|
## 🎨 Design System
|
|
|
|
- **Colors**: Dark theme with #E5195E accent
|
|
- **Typography**: Manrope font family
|
|
- **Components**: Consistent glassmorphism design
|
|
- **Animations**: Smooth transitions and interactions
|
|
|
|
## 📱 Features
|
|
|
|
- Responsive design
|
|
- Dark theme optimized
|
|
- Smooth animations
|
|
- SEO optimized
|
|
- Accessible components
|
|
- Modern routing system
|
|
|
|
## 🔧 Development
|
|
|
|
### Available Scripts
|
|
|
|
- `npm run dev` - Start development server
|
|
- `npm run build` - Build for production
|
|
- `npm run preview` - Preview production build
|
|
- `npm run lint` - Run ESLint
|
|
|
|
### Environment Setup
|
|
|
|
1. Ensure Node.js v18+ is installed
|
|
2. Install dependencies with `npm install`
|
|
3. Start development with `npm run dev`
|
|
|
|
## 🚢 Deployment
|
|
|
|
### Build for Production
|
|
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
This creates an optimized build in the `dist` folder.
|
|
|
|
### Preview Production Build
|
|
|
|
```bash
|
|
npm run preview
|
|
```
|
|
|
|
## 🔍 Key Technologies
|
|
|
|
- **Vite**: Fast build tool and dev server
|
|
- **TypeScript**: Enhanced developer experience
|
|
- **Tailwind CSS**: Utility-first CSS framework
|
|
- **Framer Motion**: Production-ready motion library
|
|
- **Radix UI**: Low-level accessible components
|
|
|
|
## 📞 Support
|
|
|
|
For questions or support, please contact the development team.
|
|
|
|
---
|
|
|
|
Built with ❤️ by the WDI Development Team |