React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Laptop Store Web Application

A responsive and visually engaging web application for a fictional laptop store, showcasing a range of laptops tailored for different user needs. The app includes sections like Home, Products, About Us, and Contact, all connected via React Router. The UI is enhanced with smooth animations, a sticky navigation bar, and a mobile-friendly design.

Table of Contents

• Features
• Technologies Used
• Installation
• Usage
• Project Structure
• Contributing
• License

Features

• Responsive Design: Optimized for both desktop and mobile devices.
• Animated Image Carousel: Showcases different laptop models on the home page.
• Sticky Navigation: Persistent header for easy navigation across pages.
• Mobile-Friendly Navigation: Mobile menu with toggling functionality.
• Product Grid: Organized display of featured products with categories.
• Interactive Components: Buttons, links, and product cards with hover effects.

Technologies Used

• React: For building the user interface.
• React Router: For client-side routing.
• React Icons: For iconography within the app.
• Swiper: For creating a carousel of featured laptops on the home page.
• Tailwind CSS: For responsive and utility-first styling.
• Vite: For a fast development environment and bundling.

Installation

Prerequisites

• Node.js and npm should be installed on your system. You can download them from here.

Steps

1. Clone the repository:

   git clone https://github.com/asrasulaima/react_my-project.git

2. Navigate to the project directory:

   cd laptop-store

3. Install the dependencies:

   npm install

4. Start the development server:

   npm run dev

5. Open the app in your browser at http://localhost:5173.

Usage

• Home Page: Shows an animated carousel of laptop images with captions.
• Products Page: Browse various laptop categories, including Gaming, Work, and Budget options.
• About Us Page: Information about the store’s mission and offerings.
• Contact Page: Provides contact information or a form for customer inquiries.

Project Structure

##Demo https://github.com/user-attachments/assets/02e6c6ac-5158-4463-9323-53adc73e5a4b