Cretly AI

Cretly AI is a cutting-edge, futuristic AI chat interface designed with a focus on premium aesthetics, fluid animations, and a seamless user experience. Built with the latest web technologies, it provides a high-end environment for interacting with advanced AI models.

✨ Features

• Premium Interface: A modern "Dark Glassmorphism" design with vibrant gradients and subtle micro-animations.

• Dynamic Sidebar:

  • Fluid Transitions: Smooth width transitions with smart layout adjustments.

• Advanced Chat Input:

  • Multi-functional input with support for attachments, settings, and options.
  • Integrated Voice Control with a dynamic waveform animation.

• Modular Architecture: Built with highly reusable Vue components and a customized Tailwind CSS 4 design system.

🛠️ Tech Stack

• Framework: Nuxt 3 (Vue 3 Composition API)
• Styling: Tailwind CSS 4
• State Management: Vue Reactive Refs (Lifted state for global layout control)
• Icons: Lucide-inspired SVG components
• Animations: CSS Transitions & Vue <Transition> components

🚀 Getting Started

Prerequisites

• Node.js (Latest LTS version recommended)
• npm or yarn

Installation

1. Clone the repository:

   git clone https://github.com/Likeur/cretly.git
   cd cretly

2. Install dependencies:

   npm install

3. Run the development server:

   npm run dev

   Open http://localhost:3000 in your browser to see the result.

Building for Production

npm run build

📐 Project Structure

app/
├── assets/          # Global styles and CSS variables
├── components/      # Reusable UI components (SideBar, TopHeader, MainContent, etc.)
├── app.vue          # Root application component
public/              # Static assets (images, favicon, etc.)
nuxt.config.ts       # Nuxt configuration

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

Built with ❤️ by Likeur