terminalGETTING_STARTED_v1.0

Introducción

Layero es un marketplace de temas Next.js construidos con precisión, diseñados para sitios web de alto rendimiento. Cada tema se entrega listo para producción — con TypeScript, Tailwind CSS, SEO y conectores CMS incluidos.

codeSTART (Solo tema) es para

checkDesarrolladores
checkFreelancers
checkAgencias
checkUsuarios técnicos autónomos

support_agent¿No eres técnico?

Sin problema. Nuestros planes gestionados se encargan de todo — desde la instalación hasta el lanzamiento y la edición del contenido.

PRO Plan — nos encargamos del despliegue por ti

MAX Plan — despliegue + interfaz editable

ULTRA — solución completamente personalizada

01. Comprar

Elige un tema y selecciona tu plan — START, PRO o MAX.

02. Configurar

Clona el repositorio, instala las dependencias y configura tus variables de entorno en .env.local.

03. Personalizar

Edita el contenido en la carpeta data/, cambia las imágenes y ajusta los tokens del tema Tailwind.

04. Desplegar

Publica en Vercel, Netlify, o sube una build estática a tu hosting Apache / cPanel.

REQUISITOS

Node.js ≥ 18.17, npm ≥ 9 o pnpm ≥ 8. Git es necesario para clonar y gestionar tu proyecto.

Instalación

Tras la compra, recibirás acceso al repositorio fuente de tu tema. Sigue los pasos a continuación para inicializar tu entorno local.

Terminalbash

# Clone your purchased theme
git clone https://github.com/sitelift/your-theme.git

# Enter the project directory
cd your-theme

# Install dependencies
npm install

# Copy the environment template
cp .env.example .env.local

# Start the dev server
npm run dev

Abre http://localhost:3000 para ver tu tema funcionando en local.

VARIABLES DE ENTORNO

Edita .env.local con tus credenciales antes de ejecutar:

# Site config NEXT_PUBLIC_SITE_URL=https://yourdomain.com NEXT_PUBLIC_SITE_NAME="Your Business" # CMS (optional) CONTENTFUL_SPACE_ID=xxxx CONTENTFUL_ACCESS_TOKEN=xxxx # Stripe (optional) STRIPE_SECRET_KEY=sk_live_xxxx NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_live_xxxx

Estructura de archivos

Todos los temas Layero siguen una estructura de directorios consistente basada en las convenciones de Next.js App Router.

Project Root

.
├─ app/                  # Next.js App Router
│  ├─ (routes)/          # Page route groups
│  ├─ api/               # Server API routes
│  ├─ globals.css        # Tailwind + design tokens
│  └─ layout.tsx         # Root layout + fonts
├─ components/           # Shared UI components
├─ data/                 # ← All editable content lives here
│  ├─ site.ts            # Business info, contact, hours
│  ├─ services.ts        # Services / offerings (theme-specific)
│  ├─ team.ts            # Team profiles
│  └─ ...               # Additional files per theme
├─ hooks/                # Custom React hooks
├─ lib/                  # SEO helpers, form utils, animations
├─ public/               # Static assets
├─ tailwind.config.ts    # Design token overrides
└─ .env.local            # Your environment secrets

data/site.ts

Nombre de empresa, teléfono, email, dirección, horarios y estadísticas globales del sitio. El primer archivo que abrir tras comprar un tema.

data/

Todo el contenido editable dividido en archivos TypeScript especializados. Cada tema documenta sus archivos de datos en su README — ábrelo para la lista completa.

app/globals.css

Bloque @theme de Tailwind con todos los design tokens — colores, escalas tipográficas, espaciados y border radii.

tailwind.config.ts

Extiende o sobreescribe las utilidades Tailwind. Añade plugins personalizados como Tailwind Typography o Forms aquí.

components/

Componentes reutilizables compartidos entre páginas (Navbar, Footer, primitivas UI). Evita duplicar lógica en otro lugar.

Despliegue

Opciones de hosting recomendadas

Los temas Layero funcionan con cualquier proveedor de hosting moderno. A continuación las tres opciones más comunes — elige la que se adapte a tu flujo de trabajo.

1. Desplegar en Vercel

El camino más sencillo. Sube tu repositorio a GitHub, impórtalo en el panel de Vercel y estarás en línea en minutos. Cada push futuro activa un redespliegue automático.

npx vercel --prod

2. Desplegar en Netlify

Conecta tu repositorio GitHub en el panel de Netlify. Establece el build command en npm run build y el directorio de publicación en .next. Cada push reconstruye automáticamente.

npx netlify deploy --prod

dns

3. Hosting tradicional (Apache / cPanel)

Si tu tema soporta exportación estática, puedes alojarlo en cualquier servidor Apache o cPanel estándar — sin Node.js. Adecuado para sitios web y portfolios.

Habilitar exportación estática

Verifica en el README del tema que la exportación estática esté soportada. En next.config.ts, output debe estar configurado como 'export'.

Generar archivos estáticos

Ejecuta npm run build. Next.js genera una carpeta out/ con HTML, CSS y JS — sin necesidad de servidor.

Subir por FTP

Usa un cliente FTP (FileZilla, Cyberduck) o el administrador de archivos de tu panel de hosting para subir el contenido de out/ a tu carpeta public_html.

Publicar

Tu sitio está ahora en línea como un sitio web estático estándar. Sin proceso Node.js, sin configuración de servidor requerida.

npm run build # generates the out/ folder

CONSEJO PRO

Vercel y Netlify son las opciones recomendadas para la mayoría de los usuarios — configuración cero, SSL automático y redespliegue instantáneo en cada push. Usa Apache si ya tienes un plan de hosting compartido y quieres minimizar costes.

Editar contenido

Todo el contenido visible para el usuario está dividido en archivos TypeScript especializados dentro de la carpeta data/ en la raíz del proyecto. No necesitarás tocar los archivos de página individuales para cambios de contenido básicos.

Archivo	Lo que controla
`data/site.ts`	Nombre de empresa, teléfono, email, dirección, horarios, estadísticas
`data/services.ts`	Servicios / áreas de práctica / elementos de menú
`data/team.ts`	Perfiles de miembros del equipo
`data/testimonials.ts`	Testimonios (donde aplique)
`data/navigation.ts`	Enlaces de navegación

Consulta el README de tu tema para la lista completa de archivos de datos y su estructura exacta — varía según el tema.

data/site.tsTypeScript

export const siteConfig = {
  name: "Your Business",
  tagline: "Your memorable tagline",
  phone: "+1 (555) 000-0000",
  email: "hello@yourdomain.com",
  address: "123 Main St, City, Country",
};

Tras guardar el archivo, el servidor de desarrollo se recarga instantáneamente. En producción, se requiere una nueva build para aplicar los cambios.

Cómo funcionan las actualizaciones de contenido

El proceso de actualización depende de dónde esté alojado tu sitio. Esto es lo que esperar en cada plataforma.

cloud

Vercel

01Edita los archivos relevantes en la carpeta data/ de tu tema
02Haz commit y push a tu repositorio
03Vercel reconstruye y redesplega automáticamente

Flujo más rápido — los cambios están en línea en menos de un minuto.

bolt

Netlify

01Edita los archivos relevantes en la carpeta data/ de tu tema
02Haz commit y push a tu repositorio
03Netlify reconstruye y redesplega automáticamente

Igual que Vercel — push para desplegar.

dns

Apache / Static

01Edita los archivos relevantes en la carpeta data/ de tu tema en local
02Ejecuta npm run build para generar nuevos archivos estáticos
03Sube la nueva carpeta out/ por FTP

Requiere acceso al código fuente y un cliente FTP cada vez.

¿QUIERES SALTARTE EL REBUILD?

Actualiza al plan MAX y edita tu contenido a través de una interfaz visual — sin código, sin terminal, sin FTP requerido.

Reemplazar imágenes

Todas las imágenes de marcador de posición se cargan desde URLs externas. Reemplázalas con tus propios assets en public/images/ o a través de la biblioteca multimedia de tu CMS.

Añade tus imágenes

Deposita los archivos en public/images/. Formatos aceptados: WebP, AVIF, PNG, JPG. Apunta al WebP al 80% de calidad para el mejor rendimiento.

Actualiza la ruta fuente

En la página o archivo de datos relevante, reemplaza la cadena URL por /images/your-file.webp. Next.js Image gestiona la optimización automáticamente.

Establece ancho y alto

Si usas el componente Next.js Image, proporciona las dimensiones intrínsecas para evitar el desplazamiento de diseño (CLS). Omítelas en modo fill.

TAMAÑOS DE IMAGEN

Imágenes hero: 1920×1080 px. Miniaturas de tarjetas: 800×600 px. Avatares/logos: 400×400 px. Exporta siempre a 2× para pantallas retina.

CMS Ready

Los temas Layero incluyen adaptadores opcionales para las tres plataformas CMS headless más populares. Conecta la que se adapte a tu flujo de trabajo.

edit_square

Sanity

Edición colaborativa en tiempo real, lenguaje de consulta GROQ, Studio completamente personalizable.

dns

Strapi

Auto-alojado, open source. Control total sobre tus datos e infraestructura de despliegue.

api

Payload

CMS Node.js code-first, auto-alojado. TypeScript nativo con APIs REST y GraphQL autogeneradas.

lib/sanity.ts — example

import {createClient} from '@sanity/client';

export const sanity = createClient({
  projectId: process.env.SANITY_PROJECT_ID!,
  dataset: 'production',
  apiVersion: '2024-01-01',
  useCdn: true,
});

Stripe Ready

Los temas habilitados para comercio incluyen una integración Stripe preconfigurada. Añade tus claves y tu flujo de pago está listo.

Crea una cuenta Stripe

Regístrate en stripe.com y obtén tu Publishable Key y Secret Key desde el panel de Developers.

Añade las claves a .env.local

Establece STRIPE_SECRET_KEY y NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY en tu archivo .env.local.

Define tus productos

Crea productos e IDs de precio en el panel de Stripe. Pega los price_xxx IDs en tu archivo de datos de productos.

Prueba con Stripe CLI

Reenvía los webhooks a tu servidor local para probar el flujo de pago antes de publicar.

SEGURIDAD DE WEBHOOKS

Verifica siempre las firmas de los webhooks usando stripe.webhooks.constructEvent(). Nunca confíes en los datos del payload de un webhook sin verificación.

Cambiar de plan

¿Ya estás en START? Puedes actualizar a un nivel superior en cualquier momento — contáctanos y aplicaremos un crédito por lo que ya hayas pagado.

rocket_launch

LVL-02

PRO Plan

€399

Nos encargamos del despliegue, configuración del dominio y primer lanzamiento. Dánoslo y obtén un sitio web en vivo sin tocar el código.

checkConfiguración del tema
checkCarga de contenido
checkConfiguración de dominio y hosting
checkEntrega lista para el lanzamiento

edit_note

LVL-03

MAX Plan

€999

Todo lo de PRO, más una interfaz de gestión de contenidos. Actualiza páginas, textos e imágenes tú mismo — sin código, sin rebuilds, sin FTP.

checkTodo de Setup
checkIntegración CMS
checkEditor de contenido visual
checkEdición sin desarrollador

auto_awesome

LVL-MAX

ULTRA

Quote

Páginas a medida, integraciones de terceros y una solución de gestión personalizada adaptada a tus requisitos específicos.

checkDiseño de páginas personalizado
checkIntegraciones API
checkGestión a medida
checkSoporte premium

¿Listo para actualizar?

Dinos en qué plan estás y a cuál quieres cambiar. Nosotros nos encargamos del resto.

HÁBLANOS →

FAQ

¿Puedo usar un tema para múltiples proyectos de clientes?expand_more

Una sola licencia cubre un sitio. Para múltiples despliegues de clientes, compra una Licencia de Agencia que permite instalaciones en producción ilimitadas.

¿Layero es compatible con React 19?expand_more

Sí. Todos los temas apuntan a React 19 y Next.js 16 con el App Router. Server Components, Suspense y Streaming son compatibles por defecto.

¿Cómo actualizo los colores del tema?expand_more

Ve a app/globals.css y modifica las propiedades CSS personalizadas dentro del bloque @theme. Cada token de color se propaga automáticamente a todos los componentes.

¿Puedo integrar una API personalizada?expand_more

Por supuesto. Crea route handlers en app/api/ o usa Server Components con fetch() para la recuperación de datos del lado del servidor. La arquitectura es API-agnóstica.

¿Necesitas más ayuda?

Nuestro equipo está disponible para soporte técnico y consultas sobre actualizaciones. Abre un ticket y responderemos en 2 horas.

ABRIR TICKET DE SOPORTE

help_center