🚀 macOS Sonoma Login Page

This project is a simple login page inspired by macOS Sonoma's screen saver transition effect. It uses React and styled-components for the user interface.

🌐 Deployment

The project is hosted on GitHub Pages. You can access the live demo at https://iamsrikanthnani.github.io/macOS-Sonoma-Login.

🧱 Code Structure

App.tsx: The main application component that includes Header, Timestamp, and Footer components. It plays a random video from the videos array.
components/Header.tsx: The header of the application, which may include Wi-Fi and battery icons.
components/Timestamp.tsx: Displays the current date and time in a format similar to Apple's UI.
components/Footer.tsx: Represents the footer with an avatar, login input, and other login-related elements.
Styling: Styled components are used for component styling, maintaining a clean and organized structure.
Video Playback: The main video element plays a random video from the videos array with auto-play, muted, and loop attributes.

✨ Customization

Feel free to customize the components to match your design and functionality requirements.

🚀 Installation and Usage

To run this project locally, follow these steps:

Clone this repository: git clone https://github.com/iamsrikanthnani/macOS-Sonoma-Login.git
Navigate to the project directory: cd macOS-Sonoma-Login
In the project directory, you can run: npm install to install all dependency packages. and
npm start Runs the app in the development mode. Open 🌐 http://localhost:3000 to view it in your browser.

The page will reload when you make changes. You may also see any lint errors in the console.

📄 License