🍏 Apple Website Clone

A modern clone of Apple's website built using React, GSAP, Three.js, and Tailwind CSS. This project demonstrates responsive design, animations, and interactive 3D elements.

Features ✨

• Navbar: A responsive and stylish navigation bar.
• Hero Section: Eye-catching hero section with smooth animations.
• Features Section: Highlighting key features with GSAP animations.
• Interactive Elements: Engaging 3D graphics using Three.js.

Technologies Used 🛠️

• React: Front-end library for building user interfaces.
• GSAP: Animation library for creating smooth and complex animations.
• Three.js: JavaScript library for creating 3D graphics.
• Tailwind CSS: Utility-first CSS framework for rapid UI development.
• Sentry: Error tracking and performance monitoring tool.

Installation 🧑‍💻

Prerequisites

Make sure you have the following installed:

• Node.js (version 14 or later)
• npm (comes with Node.js) or Yarn

Clone the Repository

First, clone the repository:

git clone https://github.com/Slygriyrsk/apple-web-clone.git
cd apple-web-clone

Install Dependencies

Use npm or Yarn to install the necessary packages:

With npm:

npm install

With Yarn:

yarn install

Environment Variables 🌍

Create a .env file in the root directory and add the necessary environment variables. Example:

REACT_APP_SENTRY_DSN=your_sentry_dsn

Replace your_sentry_dsn with your actual Sentry DSN.

Development 🚀

To start the development server, run:

With npm:

npm run dev

With Yarn:

yarn start

Open http://localhost:5173 in your browser to view the application.

Building for Production 🔧

To create a production build, run:

With npm:

npm run build

With Yarn:

yarn build

The production build will be generated in the build directory.

Deployment 🌐

Hosting on Vercel/Netlify

Deploy your application to platforms like Vercel or Netlify by connecting your GitHub repository and following their deployment guides.

Sentry Integration

To monitor errors and performance, integrate Sentry into your React application:

1. Install the Sentry SDK:

   With npm:

   npm install @sentry/react @sentry/tracing

   With Yarn:

   yarn add @sentry/react @sentry/tracing

2. Initialize Sentry in your src/index.js file:

   import * as Sentry from "@sentry/react";
   import { Integrations } from "@sentry/tracing";
   
   Sentry.init({
     dsn: process.env.REACT_APP_SENTRY_DSN,
     integrations: [new Integrations.BrowserTracing()],
     tracesSampleRate: 1.0, // Adjust this value as needed
   });

3. Deploy your application as described above.

Example Code Snippets 📋

Navbar Component

Here's a simple example of a responsive Navbar using Tailwind CSS:

import React from 'react';

const Navbar = () => {
  return (
    <nav className="bg-gray-900 text-white p-4">
      <div className="container mx-auto flex justify-between items-center">
        <a href="#" className="text-2xl font-bold">Apple Clone</a>
        <ul className="flex space-x-4">
          <li><a href="#hero" className="hover:underline">Home</a></li>
          <li><a href="#features" className="hover:underline">Features</a></li>
          <li><a href="#contact" className="hover:underline">Contact</a></li>
        </ul>
      </div>
    </nav>
  );
};

export default Navbar;

Hero Section with GSAP Animation

Using GSAP for animations in the Hero section:

import React, { useEffect } from 'react';
import { gsap } from 'gsap';

const HeroSection = () => {
  useEffect(() => {
    gsap.from(".hero-title", { duration: 2, opacity: 0, y: -50 });
  }, []);

  return (
    <section className="hero bg-blue-500 text-white h-screen flex items-center justify-center">
      <h1 className="hero-title text-5xl font-bold">Welcome to the Apple Clone</h1>
    </section>
  );
};

export default HeroSection;

Contributing 🤝

We welcome contributions from the community! Feel free to open issues, submit pull requests, or offer feedback. Your input is invaluable and appreciated.

License 📜

This project is licensed under the MIT License. See the LICENSE file for more details.

Acknowledgments 🙌

• React: For its efficient and powerful UI development capabilities.
• GSAP: For its advanced animation capabilities.
• Three.js: For enabling interactive 3D graphics.
• Tailwind CSS: For its utility-first approach to CSS design.
• Sentry: For providing robust error tracking and performance monitoring.