A modern, responsive lead generation website for Universal Power Systems, an authorized Honda Power Products dealer. Built with React to showcase products, services, and capture customer inquiries.
- Fully Responsive Design - Optimized for desktop, tablet, and mobile devices
- Product Catalog - Browse Honda power products by category with search and filtering
- Services Showcase - Comprehensive display of service offerings
- Lead Generation - Inquiry modal for capturing customer leads
- Contact Integration - WhatsApp, phone, and email contact options
- Fast Performance - Optimized React application with smooth animations
- Accessible - Built with accessibility best practices
| Technology | Purpose |
|---|---|
| React 19 | Frontend framework |
| React Router 7 | Client-side routing |
| Lucide React | Icon library |
| CSS Custom Properties | Theming and styling |
| BEM Methodology | CSS architecture |
src/
├── components/ # Reusable UI components
│ ├── AnimatedStatCard.js
│ ├── CategoryCard.js
│ ├── Footer.js
│ ├── Hero.js
│ ├── InquiryModal.js
│ ├── Navbar.js
│ ├── ProductCard.js
│ ├── ScrollToTop.js
│ ├── ServiceGrid.js
│ └── Timeline.js
├── config/
│ └── themeConfig.js # Company info, services, navigation
├── context/
│ └── InquiryContext.js # Global inquiry modal state
├── data/
│ └── products.js # Product catalog data
├── hooks/
│ └── useCountUp.js # Animated counter hook
├── pages/
│ ├── AboutPage.js
│ ├── ContactPage.js
│ ├── HomePage.js
│ ├── ProductsPage.js
│ └── ServicesPage.js
└── styles/
├── variables.css # CSS custom properties (design tokens)
├── pages.css # Shared page styles
├── ProductsPage.css
├── ContactPage.css
└── ServicesPage.css
- Node.js 18+
- npm or yarn
-
Clone the repository
git clone https://github.com/roguekishore/UPS-Lead-Generation-Website.git cd UPS-Lead-Generation-Website -
Install dependencies
npm install
-
Start development server
npm start
-
Open in browser
Navigate to http://localhost:3000
| Command | Description |
|---|---|
npm start |
Run development server |
npm run build |
Create production build |
npm test |
Run test suite |
Update company details in src/config/themeConfig.js:
export const companyInfo = {
name: 'Universal Power Systems',
phone: '+91 XXXXX XXXXX',
email: 'info@universalpowersystems.com',
whatsapp: '+91XXXXXXXXXX',
address: {
line1: 'Your Address Line 1',
city: 'City',
state: 'State',
pincode: 'XXXXXX',
},
};Manage product catalog in src/data/products.js.
Customize colors, typography, and spacing in src/styles/variables.css.
npm run buildThe optimized build will be in the build/ folder.
This project includes a _redirects file for single-page app routing on platforms like Netlify.
Deploy to Netlify:
- Connect your GitHub repository
- Set build command:
npm run build - Set publish directory:
build
| Page | Route | Description |
|---|---|---|
| Home | / |
Hero section, featured products, services overview |
| About | /about |
Company history, timeline, team info |
| Products | /products |
Full product catalog with filters |
| Services | /services |
Detailed service offerings |
| Contact | /contact |
Contact form and company location |
The project uses CSS custom properties for easy theming. Key variables in variables.css:
:root {
--primary: #DC2626; /* Brand color */
--honda-red: #CC0000; /* Honda brand red */
--font-display: 'Georgia'; /* Heading font */
--font-body: 'Inter'; /* Body font */
}Add products to src/data/products.js following the existing structure:
{
id: 'unique-id',
name: 'Product Name',
category: 'Category',
image: 'https://image-url.com/image.jpg',
description: 'Product description',
features: ['Feature 1', 'Feature 2'],
}This project is private and proprietary to Universal Power Systems.
Universal Power Systems
- Email: info@universalpowersystems.com
- Website: universalpowersystems.in