QuintTech - Technology Solutions Website

A modern, responsive website for QuintTech showcasing technology services, portfolio, and company information. Built with React, Vite, and Tailwind CSS.

🚀 Features

• Modern UI/UX: Beautiful gradient designs with smooth animations and transitions
• Responsive Design: Fully responsive layout that works seamlessly on desktop, tablet, and mobile devices
• Multi-page Navigation:
  • Home page with hero section, services preview, featured projects, and testimonials
  • Services page with detailed service offerings and categories
  • Portfolio page showcasing completed projects
  • About page with company information
  • Contact page for client inquiries
• Interactive Components:
  • Animated hero section
  • Service cards with hover effects
  • Mobile-responsive navigation menu
  • Scroll-to-top functionality
  • Testimonials section
  • Stats section

🛠️ Tech Stack

• React 19.1.1 - UI library
• Vite 7.1.2 - Build tool and dev server
• React Router DOM 7.8.2 - Client-side routing
• Tailwind CSS 3.4.8 - Utility-first CSS framework
• React Icons 5.5.0 - Icon library
• ESLint - Code linting

📦 Installation

1. Clone the repository:

git clone <repository-url>
cd QuintTech

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open your browser and navigate to http://localhost:5173

🏗️ Build for Production

To create a production build:

npm run build

The build output will be in the dist directory.

To preview the production build:

npm run preview

📁 Project Structure

QuintTech/
├── public/                 # Static assets
│   ├── car.jpg
│   ├── Data.jpg
│   ├── DevOps.jpg
│   ├── Ecommerce.jpg
│   ├── image.png
│   ├── light.png
│   ├── Mobile app.jpg
│   └── UI.jpg
├── src/
│   ├── assets/            # Additional assets
│   ├── components/        # Reusable React components
│   │   ├── AdditionalServicesCard.jsx
│   │   ├── Footer.jsx
│   │   ├── Header.jsx
│   │   ├── Hero.jsx
│   │   ├── HomeService.jsx
│   │   ├── MainServicesCard.jsx
│   │   ├── MobileMenu.jsx
│   │   ├── ScrollToTop.jsx
│   │   ├── ServiceCard.jsx
│   │   ├── StatsSection.jsx
│   │   └── Testimonials.jsx
│   ├── pages/             # Page components
│   │   ├── About.jsx
│   │   ├── Contact.jsx
│   │   ├── Home.jsx
│   │   ├── Portfolio.jsx
│   │   └── Services.jsx
│   ├── App.jsx            # Main app component with routing
│   ├── Root.jsx           # Root layout component
│   ├── index.css          # Global styles
│   └── main.jsx           # Entry point
├── index.html             # HTML template
├── package.json           # Dependencies and scripts
├── tailwind.config.js     # Tailwind configuration
├── vite.config.js         # Vite configuration
└── README.md              # This file

🎨 Services Offered

The website showcases the following technology services:

Main Services

• Web Applications - Full-stack web apps with MERN, Next.js
• Mobile Applications - Cross-platform apps with React Native and Flutter
• Cloud & DevOps - CI/CD pipelines, infrastructure as code, cloud architecture
• Data & Machine Learning - Analytics dashboards, ML prototypes
• UI/UX Design - User-centered design and prototyping
• E-commerce Platforms - Complete e-commerce solutions
• Business Intelligence - Interactive dashboards and BI solutions
• Big Data Solutions - Scalable data platforms

Additional Services

• Security Audits
• API Development
• SEO Optimization
• Analytics & Reporting
• Code Reviews
• AI Integration

🎯 Key Pages

• Home (/): Landing page with hero section, services overview, featured projects, and testimonials
• Services (/service): Detailed view of all services with filtering capabilities
• Portfolio (/portfolio): Showcase of completed projects and case studies
• About (/about): Company information and team details
• Contact (/contact): Contact form and inquiry submission

🎨 Design Features

• Gradient backgrounds and modern color schemes
• Smooth scroll animations and transitions
• Hover effects on interactive elements
• Mobile-first responsive design
• Glassmorphism effects on navigation
• Custom typography using Google Fonts (Manrope & Roboto)

📝 Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

🔧 Configuration

Tailwind CSS

The project uses Tailwind CSS with custom configuration. Modify tailwind.config.js to customize the design system.

Vite

Vite configuration can be adjusted in vite.config.js for build optimizations and plugin settings.

🌐 Browser Support

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

📄 License

This project is private and proprietary to QuintTech.

👥 Contributing

This is a private project. For contributions or inquiries, please contact the project maintainers.

📞 Contact

For more information about QuintTech services, visit the website or use the contact page.

---

Built with ❤️ for QuintTech