A modern, responsive website clone of Apple's Vision Pro product page built with Next.js 14 and Tailwind CSS. Experience the future of spatial computing through an immersive web interface.
Visit the live website at: https://apple3dweb.vercel.app/
- Modern and responsive design
- Smooth animations and transitions
- Interactive 3D elements
- Optimized performance
- Mobile-first approach
- Tailwind CSS for styling
- Next.js 14 with App Router
- TypeScript support
- Framework: Next.js 14
- Styling: Tailwind CSS
- Language: TypeScript
- Deployment: Vercel
- Animation: Framer Motion
- 3D Rendering: Three.js
- Development Tools: ESLint, PostCSS
- Clone the repository:
git clone https://github.com/EasyCodingTutorial/apple3dweb.git
cd apple3dweb- Install dependencies:
npm install
# or
yarn install
# or
pnpm install- Run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev- Open http://localhost:3000 with your browser to see the result.
apple3dweb/
├── app/ # Next.js app directory
│ ├── components/ # Reusable components
│ ├── styles/ # Global styles
│ └── page.tsx # Main page component
├── public/ # Static assets
├── src/ # Source files
└── scripts/ # Build and utility scripts
next.config.mjs- Next.js configurationtailwind.config.js- Tailwind CSS configurationtsconfig.json- TypeScript configurationpostcss.config.js- PostCSS configuration
This project is deployed on Vercel. The deployment process is automatic when changes are pushed to the main branch.
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Mobile browsers (iOS Safari, Android Chrome)
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License - see the LICENSE file for details.
- Apple Inc. for the original design inspiration
- Next.js team for the amazing framework
- Vercel for the deployment platform
- All contributors and maintainers
Made with ❤️ by Easy Coding Tutorial
