Xora is a modern, premium SaaS landing page designed for an AI-powered video editing application. Built using React, Vite, and Tailwind CSS, it features a fluid interface, custom illustration alignments, interactive pricing calculators, statistics counters, and smooth accordion transitions.

Preview

Features

• 🎨 Modern UI/UX Design — Sleek dark-themed interface built on functional grids with custom assets.
• 📱 Fully Fluid Responsiveness — Optimized navigation and component sizing for all form factors.
• ⚡ Vite-Powered Performance — Instant build speeds and hot module replacement for a smooth frontend experience.
• 🔄 Interactive Pricing Calculator — Front-end calculator letting users toggle between tier costs.
• 📊 Animated Statistics — Incremental numbers counting up on scroll to highlight service milestones.
• 📝 FAQ Accordions — Custom animated slide-downs for a clean document documentation look.

Tech Stack

• Framework: React 18
• Tooling: Vite
• Styling: Tailwind CSS, CLSX (conditional classes)
• Libraries: React Scroll, React CountUp, React SlideDown

Architecture Highlights

Xora uses a modular component architecture, extracting atomic elements like Buttons, Pricing Cards, and FAQ Rows into reusable structures.

Responsive CSS Architecture
By combining Tailwind CSS grid utilities with conditional class joining via CLSX, Xora maintains a highly dynamic layout that reshapes itself cleanly from desktop wide-screens to narrow mobile layouts without complex Javascript breakpoints.