Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yoni-deserbaix/kronix
Kronix is a project focused on creating a landing page for a SaaS application.
https://github.com/yoni-deserbaix/kronix
framer-motion magic-ui react tailwindcss typescript
Last synced: about 1 month ago
JSON representation
Kronix is a project focused on creating a landing page for a SaaS application.
- Host: GitHub
- URL: https://github.com/yoni-deserbaix/kronix
- Owner: Yoni-Deserbaix
- Created: 2024-07-06T22:06:20.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-09-05T07:15:00.000Z (5 months ago)
- Last Synced: 2024-09-06T12:14:24.746Z (5 months ago)
- Topics: framer-motion, magic-ui, react, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://kronix.vercel.app
- Size: 23.5 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Kronix - Landing Page ✨
## Description
Kronix is a project focused on creating a landing page for a SaaS application. This project allowed me to enhance my frontend development skills by starting from a Figma design and integrating advanced animations using libraries like **Framer Motion** and **Magic UI**.
## View project 👀
Check out the project online 👉 [here](https://kronix.vercel.app/)
## Screenshots 📸
![kronix-screen](https://cbdkybsqwibanwjshmgr.supabase.co/storage/v1/object/public/Projects/kronix01.png)
![kronix-screen](https://cbdkybsqwibanwjshmgr.supabase.co/storage/v1/object/public/Projects/kronix02.png)
![kronix-screen](https://cbdkybsqwibanwjshmgr.supabase.co/storage/v1/object/public/Projects/kronix03.png)## Technologies Used 🔪
- **React**: JavaScript library for building user interfaces.
- **TailwindCSS**: A utility-first CSS framework for quickly styling web applications.
- **Framer Motion**: Animation library for React used to create smooth and interactive animations.
- **Magic UI**: Collection of UI components and transitions to enhance user experience.## Features
- **Advanced Animations**: Utilization of Framer Motion and Magic UI to add sophisticated animations, making the interface more dynamic and engaging.
- **Responsive Design**: Optimization of the interface for a seamless user experience across all devices.## Skills Gained 🌟
- **Animations with Framer Motion and Magic UI**: Proficiency in integrating complex animations to enhance page interactivity.
- **Reproducing and Enhancing Designs**: Expertise in faithfully reproducing a design with added interactive elements and animations.## Inspirations 💭
https://www.figma.com/community/file/1334225650154033099