https://github.com/y2-znt/Kronix

Kronix is a project focused on creating a landing page for a SaaS application.
https://github.com/y2-znt/Kronix

framer-motion magic-ui react tailwindcss typescript

Last synced: 9 months ago
JSON representation

Kronix is a project focused on creating a landing page for a SaaS application.

• Host: GitHub
• URL: https://github.com/y2-znt/Kronix
• Owner: y2-znt
• Created: 2024-07-06T22:06:20.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-12-15T18:50:46.000Z (over 1 year ago)
• Last Synced: 2025-08-19T18:11:51.104Z (10 months ago)
• Topics: framer-motion, magic-ui, react, tailwindcss, typescript
• Language: TypeScript
• Homepage: https://kronix.vercel.app
• Size: 23.5 MB
• Stars: 8
• Watchers: 1
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Security: SECURITY.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