# Kuuli Technologies - Website Structure and Content

## Site Information

**Website**: https://www.kuuli.tech
**Company**: Kuuli Technologies
**Description**: We help Startups and SMEs scale through process automation and AI-powered mobile app development. Specialists in React Native, Expo, and Spec-Driven-Development.
**Languages**: Spanish (es), English (en)
**Default Language**: Spanish (es)
**Language Detection**: Client-side via localStorage and browser navigator

## Site Structure

### Pages

#### Home Page (/)
**URL**: https://www.kuuli.tech/
**Title**: Kuuli Technologies - Transformamos tus ideas en software inteligente
**Description**: Ayudamos a Startups y PYMES a escalar mediante la automatización de procesos y desarrollo de Apps Móviles impulsadas por IA. Especialistas en React Native, Expo y Spec-Driven-Development.

**Sections**:
1. **Hero Section**
   - Badge: "Potenciado por Inteligencia Artificial"
   - Main Title: "Transformamos tus ideas en software inteligente con Spec-Driven-Development"
   - Description: Help for Startups and SMEs to scale through process automation and AI-powered mobile app development
   - Primary CTA: "Empieza tu proyecto" (mailto:hello@kuuli.tech)
   - Secondary CTA: "Conoce nuestro método" (scrolls to method section)

2. **Automation Section**
   - Badge: "Automatización Inteligente"
   - Title: "Automatización que impulsa tu negocio"
   - Description: Simplify complex operations and recover valuable hours with automation solutions
   - Features:
     - **Smart Calendars**: Appointment and calendar automation to optimize time
     - **Document Management**: Automatic document processing and delivery without manual intervention
     - **Pro Invoicing**: Complete invoicing cycle automation, reminders, and payment tracking

3. **Method Section** (id: "method")
   - Badge: "Innovación"
   - Title: "Nuestro Método: Spec-Driven-Development"
   - Description: We use AI to transform technical specifications into high-quality code, faster and error-free
   - Steps:
     - **Specifications (INPUT)**: Define precise and structured technical requirements. We use agendas, rules, docs, and hooks to create the best engineering context.
     - **AI Processing**: We select the best and latest models for each purpose, delivering the most efficient base code.
     - **Quality Software (OUTPUT)**: Fast delivery of robust, scalable, and maintainable products.

4. **Mobile Development Section**
   - Badge: "Expertos en Desarrollo Móvil"
   - Title: "Expertos en React Native & Expo"
   - Description: Cross-platform mobile app development with React Native and Expo
   - Features:
     - React Native & Expo development
     - Cross-platform solutions
     - User-centered design
     - High performance
   - App Store and Google Play badges
   - CTA: "View mobile portfolio" (links to /portfolio)

5. **Values Section**
   - Company values and principles

6. **Social Proof Section**
   - Rating: 5/5 stars on Google
   - Testimonials from clients:
     - Maria Alejandra Ovalle, CEO of Diadica
     - Andrés Navarro, President of Club ADC San Fermín
   - Link to Google reviews

7. **Footer**
   - Company information
   - Contact: hello@kuuli.tech
   - LinkedIn: https://www.linkedin.com/company/100021645/
   - Theme switcher (light/dark/system)
   - Language switcher (Spanish/English)
   - Copyright: "Hecho con pasión en España" (Made with passion in Spain)

#### Portfolio Page (/portfolio)
**URL**: https://www.kuuli.tech/portfolio
**Title**: Portfolio - Kuuli Technologies
**Description**: Showcase of mobile applications developed by Kuuli Technologies

**Content**:
- **Kharty - Tecnología Educativa**
  - Website: https://www.kharty.com/
  - App Store: https://apps.apple.com/us/app/kharty-educational-quiz-game/id1186133554
  - Google Play: https://play.google.com/store/apps/details?id=com.kharty.kharty
  - Description: The educational App that allows you to learn and share content. The best app for teachers and students. Learn your school material in a dynamic and visual way. With Kharty, online education is more enjoyable whether in class or at home.

- **Phonémica**
  - Website: https://www.phonemica.es/
  - App Store: https://apps.apple.com/es/app/phon%C3%A9mica/id6753864792?l=en-GB
  - Google Play: https://play.google.com/store/apps/details?id=com.app.phonemica
  - Description: Specialized intervention in reading, writing, language, and speech difficulties. This application is designed by Phonémica to efficiently manage user sessions.

## Technical Stack

**Frontend Framework**: React 18.3.1 with Vite
**Routing**: React Router DOM 7.11.0
**Internationalization**: i18next 25.7.3, react-i18next 16.5.0
**Styling**: Tailwind CSS 3.4.17
**Icons**: Lucide React 0.522.0
**Animations**: Framer Motion 11.5.4
**Language Detection**: i18next-browser-languagedetector 8.2.0
**Build Tool**: Vite 5.2.0
**TypeScript**: 5.5.4

## Key Features

- **Multilingual Support**: Spanish and English with automatic browser language detection
- **Dark Mode**: System preference detection with manual override
- **Responsive Design**: Mobile-first approach with Tailwind CSS
- **SEO Optimized**: 
  - Critical CSS inlined
  - Async CSS loading
  - Image optimization (lazy loading, dimensions, fetchpriority)
  - Comprehensive meta tags (Open Graph, Twitter Cards)
  - Dynamic HTML lang attribute
  - Proper hreflang implementation
  - robots.txt configured
- **Performance**: 
  - Code splitting (react-vendor, i18n-vendor, ui-vendor)
  - CSS code splitting
  - Asset optimization
  - Resource hints (preload, modulepreload, preconnect)

## Content Structure

### Main Services

1. **Process Automation**
   - Smart Calendars
   - Document Management
   - Pro Invoicing

2. **Mobile App Development**
   - React Native & Expo
   - Cross-platform solutions
   - User-centered design

3. **Spec-Driven-Development**
   - Technical specification to code transformation
   - AI-powered development
   - Quality software delivery

### Target Audience

- **Startups**: Early-stage companies needing scalable solutions
- **SMEs (Small and Medium Enterprises)**: 5-50 employees seeking automation
- **Businesses**: Companies looking to automate processes and develop mobile apps

## Contact Information

**Email**: hello@kuuli.tech
**LinkedIn**: https://www.linkedin.com/company/100021645/
**Location**: Spain

## Language Support

- **Spanish (es)**: Default language, primary market
- **English (en)**: Secondary language for international reach
- **Language Switching**: Client-side via UI components (localStorage persistence)
- **HTML lang Attribute**: Dynamically synced with active i18n language

## SEO Configuration

- **Canonical URL**: https://www.kuuli.tech
- **Open Graph Locale**: es_ES (primary), en_US (alternate)
- **hreflang**: Both es and en point to same URL (client-side language switching)
- **robots.txt**: Located at /robots.txt
- **Sitemap**: Referenced in robots.txt (to be created)

## Site Architecture

**Type**: Single Page Application (SPA) with React Router
**Build**: Static site generation with Vite
**Deployment**: Vercel (static hosting)
**Routing**: Client-side routing with React Router
**State Management**: React Context API (ThemeContext)

## Important Notes

- Language is handled client-side via i18n (localStorage + navigator detection)
- No URL-based language routing (no /es/ or /en/ paths)
- Theme preference is stored in localStorage
- All images are optimized with lazy loading and explicit dimensions
- CSS loads asynchronously to avoid render-blocking
- Critical CSS is inlined in HTML for above-the-fold content

## Last Updated

2025-12-19