Macbook-Landing-Page

</a>

---

📋 Table of Contents

1. ✨ Introduction
2. ⚙️ Tech Stack
3. 🔋 Features
4. 🤸 Quick Start
5. 🧱 Project Structure
6. 🧠 Architecture & Animations
7. 🤝 Contribution
8. 🔗 Contacts
9. 📄 License
10. 🙏 Acknowledgements

---

✨ Introduction

Macbook Landing Page is a high-end, Apple-style 3D product website built with cutting-edge web technologies like React, GSAP, Three.js, and TailwindCSS.

It features:

• Immersive 3D visuals powered by Three.js
• Scroll-triggered GSAP animations
• Responsive, modern layout
• Cinematic transitions and masking effects

The project is ideal for designers and developers aiming to build interactive product showcases, tech landing pages, or portfolio experiences with smooth animations and premium UI feel.

---

⚙️ Tech Stack

Technology	Purpose
React.js	Component-based architecture for dynamic UI
GSAP + ScrollTrigger	Smooth, scroll-driven animations
Three.js	Realistic 3D rendering and lighting
TailwindCSS	Utility-first responsive styling
Zustand	Lightweight global state management
Vite	Fast build tool and dev server
Hostinger	Hosting and deployment
CodeRabbit	AI-powered code review integration

---

🔋 Features

• 💎 Apple-Style Product Animation — Showcase products with cinematic motion and scroll-sync effects
• ⚙️ ScrollTrigger Timeline — Multi-section animation synchronization powered by GSAP
• 🧩 3D Model Integration — Interactive Three.js scenes with realistic lighting and depth
• 🪄 Image Masking & Reveal Effects — Scroll-pinned masks for dynamic transitions
• 🖥️ Responsive Layout — Fully optimized for desktop, tablet, and mobile screens
• 🎨 Customizable & Scalable — Modular structure to add more sections or models easily
• ⚡ Optimized Performance — Smooth frame rates even with heavy animations

---

🤸 Quick Start

Prerequisites

Ensure the following are installed:

• Node.js
• Git

Clone the Repository

git clone https://github.com/Itssanthoshhere/Macbook-Landing-Page.git
cd Macbook-Landing-Page

### Install Dependencies

```bash
npm install
```

### Run the Development Server

```bash
npm run dev
```

Visit http://localhost:5173 to view the project locally.

---

🧱 Project Structure

Folder/File	Description
src/components	React components like Showcase, Navbar, Hero, etc.
src/constants	Data files for sections and assets
src/store	Zustand state management
public/	Static assets – videos, images, and 3D models
vite.config.js	Vite configuration for fast bundling
index.css	Global styles with TailwindCSS directives

---

🧠 Architecture & Animations

The animation architecture is powered by GSAP timelines with ScrollTrigger integration. Key highlights:

• Section-based triggers for pinned scenes
• Video + mask reveals synchronized with scroll
• Responsive animation breakpoints via useMediaQuery
• Optimized timeline flow for performance

Each visual section (like “Showcase”, “Hero”, or “Performance”) has its own animation sequence and is controlled declaratively via React hooks.

---

🤝 Contribution

Contributions are always welcome! To contribute:

1. Fork the repo

2. Create a new branch

   git checkout -b feature/my-feature
   

3. Make changes and commit

   git commit -m "feat: add my feature"
   

4. Push your branch

   git push origin feature/my-feature
   

5. Create a Pull Request 🎉

---

🔗 Contacts

• GitHub: Itssanthoshhere
• LinkedIn: Santhosh VS

---

📄 License

This project is for educational and portfolio purposes only. All rights to assets, logos, and trademarks belong to their respective owners.

---

🙏 Acknowledgements

• JavaScript Mastery – for the tutorial reference
• React – for the component-based UI
• GSAP – for scroll-driven motion
• Three.js – for 3D rendering
• TailwindCSS – for utility styling

---

⭐ Show Your Support

If you liked this project, give it a ⭐ on GitHub and share it with your network!

---