mohitpanchal09 / apple_replica Goto Github PK

Welcome to the Apple Landing Page Clone project! This React application replicates the Apple landing page and includes a dedicated page showcasing iPhone products with data mapped using JSON Placeholder.

• Demo
• Features
• Project Structure
• Technologies Used
• Setup
• Usage
• Contributing
• License

Link to Live Demo

1. Main Landing Page:

   • Replica of the Apple landing page.
   • Engaging UI elements and design.

2. iPhone Page:

   • Dedicated page showcasing iPhone products.
   • Data mapped from JSON Placeholder.
   • Individual product cards with details.

react-apple/
│
├── public/
│   ├── index.html
│   └── ...
│
├── src/
│   ├── components/
│   │   ├── Navbar.js
│   │   ├── Header.js
│   │   ├── HeroSection.js
│   │   ├── Footer.js
│   │   └── ...
│   ├── iPhonesPage/
│   │   ├── iPhoneCard.js
│   │   ├── iPhoneList.js
│   │   └── ...
│   ├── App.js
│   └── ...
│
├── .gitignore
├── package.json
├── README.md
├── screenshots/
│   └── screenshot.png
└── ...

• React: Used for building a modular and efficient user interface, aligning with Apple's design principles.
• Bootstrap: Utilized for styling and responsive design, ensuring a visually appealing layout.
• JSON Placeholder: Employed for mock API data, providing realistic content for the iPhone products.

• Responsive Design: This website is designed to be responsive, ensuring a seamless experience across various devices, including desktops, tablets, and smartphones.

• UI/UX Design: The user interface (UI) is crafted for a visually appealing and intuitive experience. The user experience (UX) is optimized for smooth navigation and interaction.

• Home Page: A replica of the Apple landing page with engaging UI elements and design.

• iPhone Page: A dedicated page showcasing iPhone products with individual product cards and details.

• Navigation: Use the navbar to navigate between the Home Page and iPhone Page for a seamless browsing experience.

1. Clone the repository:

   git clone https://github.com/mohitpanchal09/apple_replica.git

2. Navigate to the project directory:

   cd react-apple

3. Install dependencies:

   npm install

1. Run the development server:

   npm start

2. Open your browser and go to http://localhost:3000.

3. Explore the Main Landing Page and iPhones Page using the navbar for navigation.

Feel free to contribute to enhance the project. Create a pull request or open an issue to discuss potential changes.

This project is licensed under the MIT License.