🚀 Xora SaaS Landing Page

A modern, animated SaaS landing page built with React, Vite, Tailwind CSS v4, and Motion.

---

✨ Overview

Xora is a visually rich SaaS landing page focused on polished interactions, smooth scroll navigation, and responsive design.
It is structured with reusable React sections and styled with a custom Tailwind theme for a premium product feel.

🖼️ Screenshots

🎯 Key Highlights

• 🎬 Smooth motion-driven UI with staggered reveals, hover interactions, and scroll-based effects.
• 📱 Responsive layout for mobile, tablet, and desktop.
• 🧭 Section-based navigation powered by react-scroll.
• 💳 Interactive pricing cards with monthly/yearly toggle and animated counters.
• 💬 Dynamic FAQ and testimonial sections with modern UI patterns.
• ♿ Reduced-motion support for better accessibility.

🧰 Tech Stack

• Frontend: React 19, React DOM 19
• Build Tooling: Vite 7
• Styling: Tailwind CSS v4 + custom design tokens
• Animation: Motion (motion/react)
• Utilities: React CountUp, React Scroll
• Code Quality: ESLint

📂 Project Structure

saas_landing_page/
├── public/
│   └── images/
├── src/
│   ├── assets/
│   ├── components/
│   ├── constants/
│   ├── sections/
│   ├── App.jsx
│   ├── index.css
│   └── main.jsx
├── eslint.config.js
├── tailwind.config.js
├── vite.config.js
└── package.json

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm (recommended)

Installation

git clone https://github.com/Dadir-Dev/saas_landing_page.git
cd saas_landing_page
npm install

Run in Development

npm run dev

Then open the local URL printed in the terminal (typically http://localhost:5173).

📜 Available Scripts

npm run dev      # Start development server
npm run build    # Create production build
npm run preview  # Preview production build locally
npm run lint     # Run ESLint checks

♿ Accessibility & UX

• Honors user motion preferences using prefers-reduced-motion.
• Uses responsive spacing and typography across breakpoints.
• Includes interaction feedback (hover, press, ripple, and transition states).

🌍 Deployment

Create and test a production build:

npm run build
npm run preview

Deploy the generated app to platforms like Vercel, Netlify, or any static hosting provider that supports Vite builds.

👨‍💻 Author

Abdikadir Mohammed

🙌 Acknowledgements

• React team
• Vite team
• Tailwind CSS team
• Motion library maintainers