Apps AiT - Digital Transformation Solutions

A modern, responsive web application showcasing Apps AiT's comprehensive digital services and solutions.

🚀 Features

Core Pages

• Home: Hero section with animated statistics and service overview
• About: Company mission, vision, values, and team information
• Services: Detailed service offerings with category filtering
• Portfolio: Showcase of completed projects
• Contact: Interactive contact form with validation

Design & UX

• Modern Orange Theme: Professional gradient color scheme
• Responsive Design: Optimized for all devices (mobile, tablet, desktop)
• Smooth Animations: Framer Motion powered interactions
• Glass Morphism: Modern UI with backdrop blur effects
• Micro-interactions: Hover states and transitions throughout

Technical Stack

• Frontend: React 19.2.0
• Routing: React Router DOM 7.11.0
• Styling: TailwindCSS 4.1.18
• Animations: Framer Motion 11.11.1
• Icons: Lucide React 0.469.0
• Build Tool: Vite

🎨 Design System

Color Palette

• Primary: #c2410c (Orange)
• Secondary: #ea580c (Light Orange)
• Accent: #fb923c (Lighter Orange)

Typography

• Headings: Bold, large-scale typography
• Body: Clean, readable text with proper hierarchy
• Google Fonts: Integrated for enhanced typography

📱 Responsive Breakpoints

• Mobile: < 768px
• Tablet: 768px - 1024px
• Desktop: > 1024px

🛠️ Development

Getting Started

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

Project Structure

src/
├── components/          # Reusable UI components
│   ├── animations/     # Animation components
│   ├── Footer.jsx      # Footer component
│   ├── Header.jsx      # Navigation header
│   ├── Layout.jsx      # Main layout wrapper
│   └── Services.jsx    # Services cards
├── pages/              # Page components
│   ├── AboutPage.jsx   # About page
│   ├── ContactPage.jsx # Contact page
│   ├── HomePage.jsx    # Home page
│   ├── PortfolioPage.jsx # Portfolio page
│   └── ServicesPage.jsx # Services page
├── app.css             # Global styles
├── main.jsx            # Application entry point
└── App.jsx             # Main app component

✨ Key Features Implemented

Contact Page

• Interactive Form: Full validation and submission handling
• Equal Height Layout: Balanced form and sidebar sections
• Modern Design: Glass morphism effects and gradients
• Contact Information: Interactive contact cards with hover effects
• Why Choose Section: Feature highlights with animations

Services Page

• Category Filtering: Dynamic service filtering
• Service Cards: Detailed service information
• Responsive Grid: Adaptive layout for all screen sizes

About Page

• Mission & Vision: Equal height cards with flex layout
• Company Values: Visual representation of core values
• Team Statistics: Animated counters and achievements

🎯 Performance Optimizations

• Lazy Loading: Components load as needed
• Optimized Images: Proper image sizing and formats
• Minified Build: Production-ready optimized bundle
• Fast Animations: Hardware-accelerated CSS transforms

🌐 Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

📄 License

This project is proprietary and confidential to Apps AiT.

👥 Team

Apps AiT Development Team

---

Built with ❤️ by Apps AiT