Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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.

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