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
-
Clone the repository
git clone <your-repository-url> cd wdi-website -
Install dependencies
npm install # or yarn install -
Start the development server
npm run dev # or yarn dev -
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 servernpm run build- Build for productionnpm run preview- Preview production buildnpm run lint- Run ESLint
Environment Setup
- Ensure Node.js v18+ is installed
- Install dependencies with
npm install - 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