# 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