Drive Tech Systems Website

This is a responsive React-based website for Drive Tech Systems Pvt Ltd, showcasing their products, solutions, and services. It includes animated product carousels, horizontal banners, and a sleek modern design.

Features

• Hero Section: Engaging landing section with company name.
• Explore Cards: Horizontally scrolling cards showcasing product categories.
• Slew Drives Section: Banner-style horizontal carousel displaying products one at a time.
• Middle Breaker: Highlights key offerings or solutions.
• Extra Cards: Static cards for additional services like Engineering and After-Sales Support.
• Contact Form: Interactive form for customer inquiries.
• Scroll Progress Bar: Shows scroll progress on top of the page.
• Go Up Button: Smooth scroll back to top.
• Responsive Design: Works on desktop, tablet, and mobile.

Tech Stack

• Frontend: React, HTML5, CSS3
• Routing: React Router DOM
• Animations: CSS keyframes for scrolling effects
• Assets: Local image assets for products

Installation

1. Clone the repository:

   git clone https://github.com/yourusername/drive-tech-website.git

2. Navigate to the project folder:

   cd drive-tech-website

   cd main-app

3. Install dependencies:

   npm install

4. Start the development server:

   npm start

5. start the backend server:

   cd backend

   node server.js

6. Open http://localhost:3000 in your browser.

Project Structure

src/
│
├─ assets/             # Product images
├─ components/         # React components (Navbar, Features, OurProduct, etc.)
├─ App.js              # Main application component with routing
├─ App.css             # Global styles
└─ Products.css        # Product and carousel-specific styles

Usage

• Hover over Explore Cards or Slew Drives to pause the scrolling animation.
• Click the Go Up button to smoothly scroll back to the top.
• Navigate to the About page via the Navbar for company information.

License

This project is licensed under the MIT License.