https://github.com/hanadzin/luma

Luma is a stunning, modern, and fully responsive SaaS landing page built with React and TailwindCSS, designed with a captivating interface for a seamless user experience.
https://github.com/hanadzin/luma

react react-collapse react-countup tailwindcss

Last synced: 6 months ago
JSON representation

Luma is a stunning, modern, and fully responsive SaaS landing page built with React and TailwindCSS, designed with a captivating interface for a seamless user experience.

• Host: GitHub
• URL: https://github.com/hanadzin/luma
• Owner: HanaDzin
• Created: 2025-02-02T11:16:56.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2025-02-07T17:16:48.000Z (about 1 year ago)
• Last Synced: 2025-03-30T23:27:59.571Z (12 months ago)
• Topics: react, react-collapse, react-countup, tailwindcss
• Language: JavaScript
• Homepage: https://luma-saas.netlify.app/
• Size: 6.18 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 🤖 Luma – Modern SaaS UI/UX Website  

Luma is a sleek and modern SaaS landing page built with **React.js** and **Tailwind CSS**, showcasing stunning UI/UX design, smooth animations, and an optimized user experience. 

---

## 🌐 Live Preview  

🔗 To see Luma in it's full glory, visit [Luma](https://luma-saas.netlify.app/) 

---

## ⚙️ Tech Stack  

![Vite](https://img.shields.io/badge/Vite-646CFF?style=for-the-badge&logo=vite&logoColor=white)  

![React](https://img.shields.io/badge/React-61DAFB?style=for-the-badge&logo=react&logoColor=black)  

![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-06B6D4?style=for-the-badge&logo=tailwindcss&logoColor=white)    

## 📦 Additional Libraries  

![React CountUp](https://img.shields.io/badge/React%20CountUp-3178C6?style=for-the-badge&logo=react&logoColor=white)  - animated number counters used in displaying Luma pricings

![clsx](https://img.shields.io/badge/clsx-8E44AD?style=for-the-badge)   - conditional classNames made easier 

![React Collapse](https://img.shields.io/badge/React%20Collapse-61DAFB?style=for-the-badge&logo=react&logoColor=black)  - for a smooth "open" effect on FAQ section

![React Scroll](https://img.shields.io/badge/React%20Scroll-FF4500?style=for-the-badge)  - for smoother scrolling and active sections tracking

---

## ✨ Features  

✅ **Stunning Sections** – Hero, Features, Pricing (Monthly/Yearly), FAQ, Testimonials, and Download Software.  

🎥 **Smooth Animations** – Complex CSS animations for fluid transitions and eye-catching effects.  

🎨 **Cool CSS Gradients** – Beautiful gradient effects using pseudo-elements.  

🧭 **Seamless Navigation** – Intuitive scrolling and navigation for a frictionless experience.  

⚡ **Optimized Performance** – Built for speed with optimized rendering and loading times.  

📱 **Pixel-Perfect Design** – Fully responsive across all devices and screen sizes.  

---

## 🎥 Built Following This Tutorial  

This project was developed following a tutorial by **JavaScript Mastery**:  

🔗 [Watch Here](https://www.youtube.com/watch?v=ukiGFmZ32YA&t=1s&ab_channel=JavaScriptMastery)  

---