Atlassian Landing Page Clone

🚀 Project Overview

This project is a clone of the Atlassian landing page, built to enhance my React skills. The project is bundled with Vite for fast development and styled using Tailwind CSS for efficient and responsive designs.

🎯 Features

• Sticky Header: A header that remains visible while scrolling for better navigation.
• Scrolling Section: Smooth and responsive scrolling interactions.
• Responsive Design: Optimized for various screen sizes.

🛠️ Tech Stack

• React: JavaScript library for building user interfaces.
• Vite: Modern frontend tooling for fast builds and live reload.
• Tailwind CSS: Utility-first CSS framework for rapid UI development.

📂 Project Structure

src/
├── public/        # static files and assets
├── src/    # React codes and the style sheet used
     /App.jsx        # Main application component
     /main.jsx       # Entry point for React
     /index.css       # mian style sheet

🖥️ Getting Started

1. Clone the Repository

git clone <repository-url>
cd atlassian-landing-page-clone

2. Install Dependencies

npm install

3. Run the Development Server

npm run dev

or

Build for Production

npm run build

🎨 Tailwind Configuration

Tailwind CSS is configured with a tailwind.config.js file to customize themes and extend default utilities.

🌟 Learnings

• Implemented a sticky header and scrolling section independently without external tutorials.
• Enhanced understanding of Tailwind CSS utilities and Vite's fast development workflow.

📸 Preview

🤝 Contributions

Contributions, issues, and feature requests are welcome! Feel free to open a pull request or an issue in the repository.

this is the link to the live demo of the website