SaaS Landing Page in React

A modern UI/UX SaaS landing page built with React.js and Tailwind CSS, showcasing a fictitious XORA AI Video Editor. This project exemplifies contemporary web design principles with seamless animations, elegant gradients, and optimized performance. Perfect for inspiration or as a reference for future projects.

📕 Table of Contents

• Project Overview
• Tech Stack
• Features
• Project Structure
• Getting Started
• Installation
• Usage
• Contributing
• License

🌟 Project Overview

Xora is a cutting-edge SaaS landing page that combines modern UI/UX design with powerful front-end technologies. Built using React.js and Tailwind CSS, this project demonstrates how to create a visually stunning and highly functional web application. The site includes various sections such as hero, features, pricing, FAQ, testimonials, and a download section, all designed to provide a seamless user experience.

⚙️ Tech Stack

• Vite: Next-gen front-end build tool that offers an extremely fast development experience.
• React.js: A JavaScript library for building user interfaces.
• Tailwind CSS: A utility-first CSS framework for building custom designs.
• Additional Libraries: countup, scroll, slidedown, and clsx for dynamic class management.

🚀 Features

• Stunning Sections: Includes hero, features, pricing (monthly/yearly), FAQ, testimonials, and download software sections.
• Smooth Animations: Complex CSS animations for fluid and eye-catching effects.
• Cool CSS Gradients: Beautiful gradient effects using CSS ::before and ::after pseudo-elements.
• Seamless Navigation: Intuitive navigation and smooth scrolling for a flawless user experience.
• Optimized Performance: Built with Vite for fast loading and optimized performance.
• Pixel-Perfect Design: Ensures responsiveness across all devices and screen sizes.

🛠️ Project Structure

├─ src
   ├── App.css
   ├── App.jsx
   ├── assets
   │   └── react.svg
   ├── components
   │   ├── button.jsx
   │   ├── faqItem.jsx
   │   ├── marker.jsx
   │   └── testimonialItem.jsx
   ├── constants
   │   └── index.jsx
   ├── index.css
   ├── main.jsx
   └── sections
       ├── download.jsx
       ├── faq.jsx
       ├── features.jsx
       ├── footer.jsx
       ├── header.jsx
       ├── hero.jsx
       ├── pricing.jsx
       └── testimonials.jsx

🔧 Getting Started

📦 Installation

1. Clone the repository:

   git clone https://github.com/ankitsamaddar/xora-landing-page-react.git

2. Install dependencies:

   cd xora-landing-page
   npm install

3. Start the development server:

   npm run dev

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

🏃‍♂️ Usage

• Explore the different sections of the landing page.
• Interact with the components to experience the smooth animations and transitions.

📜 License

This project is licensed under the MIT License - see the LICENSE file for details.