iPhone 16 Pro Page Clone

A faithful reproduction of Apple's official iPhone 16 Pro page, developed to demonstrate modern web development skills and responsive design.

🚀 Live Demo

View Demo

Experience the clone in action and compare it with the original Apple page!

🍎 Original Apple Page

View Original

Check out the original iPhone 16 Pro page that inspired this clone

📱 Features

• Responsive Design: Optimized for all devices (desktop, tablet, mobile)
• Smooth Animations: Recreation of Apple's micro-interactions
• Optimized Performance: Fast loading and smooth user experience
• Pixel-Perfect: Faithful reproduction of the original design

🛠️ Technologies Used

• Framework: Next.js
• Package Manager: pnpm
• Deployment: Vercel

🚀 Installation and Setup

Prerequisites

• Node.js (version 18 or higher)
• pnpm

Installation

# Clone the repository
git clone git@github.com:Orphe-H/iphone16-page-clone.git

# Navigate to the project folder
cd iphone16-page-clone

# Install dependencies
pnpm install

Local Development

pnpm dev

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

📂 Project Structure

iphone16-page-clone/
├── app/                # Next.js pages
├── app/components/     # Reusable React components
├── public/             # Static assets
└── README.md

🎯 Project Goals

This project was created to:

• Faithfully reproduce Apple's user interface
• Demonstrate mastery of modern web technologies
• Experiment with CSS animations and transitions
• Practice responsive development

📸 Preview

Screenshots of the site compared to the original here (TODO)

🤝 Contributing

Contributions are welcome! Feel free to:

• Report bugs
• Suggest improvements
• Submit pull requests

📄 License

This project is for educational purposes only. All design and trademark rights belong to Apple Inc.

🙏 Acknowledgments

• Apple for the inspiring original design
• The open source community for the tools used

---

⭐ Don't forget to star this project if you found it helpful!