neoris/landing-vite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
landing-vite/README.md
Cesar Mendivil 8c2111702b feat: enhance UI components with framer-motion animations 
- Added framer-motion for animations in Features, Footer, Header, Hero, and Button components.
- Implemented entrance animations for feature cards and section headers.
- Enhanced button interactions with ripple effects and gradient overlays.
- Improved mobile menu animations and transitions.
- Added animated stats and placeholders in the Hero section.
- Updated package.json to include framer-motion dependency.
2025-09-16 02:20:08 -07:00

2.1 KiB
Raw Permalink Blame History

{# Inteliq UI Kit - React.js Project

A modern React.js project built with Vite and TypeScript, implementing a comprehensive UI kit based on Figma designs.

🚀 Features

  • ⚡ Lightning Fast - Built with Vite for optimal performance
  • 🛡️ Type Safe - Full TypeScript support
  • 📱 Responsive - Mobile-first design approach
  • 🎨 Modern UI - Clean and modern component library
  • 🔧 Customizable - Easy theming with Tailwind CSS
  • ♿ Accessible - Built with accessibility in mind

🛠️ Tech Stack

  • React 18 - Modern React with hooks
  • TypeScript - Type safety and better DX
  • Vite - Fast build tool and dev server
  • Tailwind CSS - Utility-first CSS framework
  • Lucide React - Beautiful and consistent icons

📦 Installation

  1. Install dependencies:
npm install
  1. Start the development server:
npm run dev
  1. Build for production:
npm run build

🏗️ Project Structure

src/
├── components/          # React components
│   ├── ui/             # Reusable UI components
│   ├── Header.tsx      # Navigation header
│   ├── Hero.tsx        # Hero section
│   ├── Features.tsx    # Features showcase
│   └── Footer.tsx      # Footer component
├── lib/                # Utility functions
├── assets/             # Static assets
└── App.tsx            # Main application component

🎨 Components

Header

  • Responsive navigation
  • Mobile menu toggle
  • CTA button

Hero Section

  • Compelling headline
  • Call-to-action buttons
  • Statistics display
  • Animated placeholder design

Features

  • Grid layout
  • Icon-based feature cards
  • Hover effects
  • Responsive design

Footer

  • Multi-column layout
  • Social media links
  • Company information
  • Legal links

🚀 Getting Started

The project is ready to run! Simply use:

npm run dev

Then open http://localhost:5173 to view it in your browser.

📄 License

This project is open source and available under the MIT License.