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

   git clone <your-repository-url>
   cd wdi-website
   

2. Install dependencies

   npm install
   # or
   yarn install
   

3. Start the development server

   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

npm run build

This creates an optimized build in the dist folder.

Preview Production Build

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