This project is a simple website showcasing various Apple products using React and Material-UI components. It includes a home page with a header, information section, product sections, and individual product components.
You can check the clone here : konprtk.io/appleWebsiteClone
- src/pages/Home.js: The main component for the home page that includes the header, information, product sections, and products.
- src/components/Header.js: The header component with a navigation bar and icons.
- src/components/Info.js: The information component displays a promotional message.
- src/components/Section.js: A reusable component for product sections with a background image and details.
- src/components/Products.js: A container component for displaying individual product components.
- src/components/Product.js: The component displaying details of a specific product with background image and links.
- src/constants/constants.js: Contains constant data such as the Apple logo, navigation items, and product details.
- Styling uses Material-UI's
styledutility and includes responsive design principles. - Keyframes are used for a spinning animation on the Apple logo in the header.
- Clone the repository:
git clone https://github.com/konprtk/appleWebsiteClone - Install dependencies:
npm install - Run the application:
npm start
- React
- Material-UI
Feel free to customize the content, and styling, and add more products or sections based on your preferences. Update the constant data in constants.js for changes in product details.
- Apple product images and details are taken from the official Apple website.
Contributions are welcome! If you find any bugs or want to improve the project, create a pull request.
For any questions or suggestions, feel free to reach out to me:
- Email: official.pratik.2003@gmail.com
- GitHub: konprtk
- LinkedIn: Pratik Lokhande
- CodePen: konprtk