💻 MacBook Pro Landing Page Recreation

A visually stunning, interactive 3D landing page replicating the premium aesthetic of Apple's MacBook Pro product pages. This project marks my first-ever venture into three-dimensional web development, combining modern web technologies to create a seamless user experience.

🖥️ Live Demo: View Live Site

---

🚀 Overview

This project is a frontend clone focused on high-fidelity 3D modeling, smooth animations, and responsive web design. The main goal was to master the integration of 3D assets into a traditional web interface, ensuring fast load times and interactive element animations.

Key Features

• Interactive 3D Model: A detailed 3D MacBook Pro model that users can rotate and interact with in real-time.
• Dynamic Scroll Animations: Smooth transitions and UI fade-ins that trigger as the user scrolls, mirroring Apple's signature landing page style.
• Performance Optimized: Clean code structure ensuring the 3D canvas loads efficiently without lagging the browser.
• Fully Responsive: Designed to adapt beautifully across different screen sizes, from mobile phones to high-res desktops.

---

🛠️ Tech Stack

• Frontend Framework: React.js
• 3D Graphics & Rendering: Three.js / React Three Fiber / Drei
• Styling: Tailwind CSS / CSS Modules
• Animations: GSAP
• Deployment: Vercel

---

💡 What I Learned (My 3D Journey)

As my first 3D website, this project came with a steep but incredibly rewarding learning curve. Some of my key takeaways include:

1. 3D Optimization: Learning how to compress 3D meshes (like .gltf / .glb files) so they load instantly on the web.
2. Lighting and Materials: Understanding how environmental lighting, shadows, and roughness maps dramatically affect the realism of a digital object.
3. Canvas Integration: Mastering how to place a 3D canvas within HTML elements without breaking standard CSS layouts or mobile responsiveness.

---

🔧 Installation & Local Setup

If you would like to run this project locally on your machine, follow these steps:

1. Clone the repository:

   git clone https://github.com/devHashir1/mackbook_landing.git

2. Navigate into the directory:

   cd macbook_landing

3. Install dependencies:

   npm install
   # or
   yarn install

4. Run the development server:

   npm run dev
   # or
   yarn dev

5. Open http://localhost:3000 in your browser to see the result.

---

🤝 Contact & Connect

If you like this project or want to talk about 3D web development, feel free to reach out!

• GitHub: @devHashir1

---

If you liked this project, feel free to leave a ⭐ on this repository! It helps a lot.