Plantilla web
Relative - Landing page template Next.js & Astro
A landing page template crafted with shadcn/ui, and Tailwind. Available in both Next.js and Astro editions. Perfect for quickly launching a marketing site with essential sections.
La descripción de esta plantilla aún no está disponible en español, así que se muestra en inglés.
Landing Page · Gratis
Análisis del diseño
Una lectura por IA del diseño de esta plantilla: colores, tipografía, espaciado, secciones y detalles característicos. Ottermind parte de ella cuando usas la plantilla.
Este análisis aún no está disponible en español, así que se muestra en inglés.
- Overall
landing page, clean and modern, low density, light
- Palette
background #f9fafb; surfaces #ffffff, #f3f4f6; text #111827; muted text #6b7280; primary #111827; accents #000000, #10b981, #f59e0b
- Type
headings Inter, 700, sentence-case; body Inter, 14px; scale h1 64px, h2 40px, h3 24px
- Shape & spacing
button/card radius 6px, borders 1px solid #e5e7eb, shadows 0 1px 3px rgba(0,0,0,0.1), section spacing 80px, content width 1280px
- Sections (top to bottom)
- Header — horizontal navigation with logo on left, links centered, login/sign up buttons on right, white background
- Hero — full-width section with large headline centered, subheading below, "Get started" button beneath, light gray textured background on sides
- Product demo — embedded interface mockup showing task management dashboard with tabs, status columns, cards with images and metadata, white background with subtle border
- Footer — not visible in screenshot
- Signature details
- Minimalist UI with high contrast black-on-white typography
- Subtle diagonal texture on hero side panels
- Task card layout with consistent spacing and rounded corners
- Status indicators using colored dots (red, yellow, blue, green)
- Clean iconography for actions and filters
- Floating action button ("New Task") with plus symbol
- Other pages
- /features: product features overview
- /about-us: company information
- /pricing: tiered pricing plans
- /faq: frequently asked questions
- /contacts: contact form and details
Detalles de la plantilla
- Categoría
- Landing Page
- Tecnología
- Next.js, Astro, Tailwind CSS, shadcn/ui
- Licencia
- Commercial
- Autor
- Shadcnblocks
- Publicada en
- Shadcnblocks
- Precio
- Gratis
Diseño original de Shadcnblocks, publicado en Shadcnblocks. Ottermind no copia el código de la plantilla: crea una web nueva a partir del briefing.
El briefing del que parte Ottermind
Se abre en Studio como borrador: añade tu marca, tu público y tus páginas antes de enviarlo.
Build a landing page website inspired by the "Relative" template. Reference brief: A landing page template crafted with shadcn/ui, and Tailwind. Available in both Next.js and Astro editions. Perfect for quickly launching a marketing site with essential sections. Use original copy and imagery for my brand rather than the reference's placeholder content.
Cómo usar esta plantilla
- 1
Haz clic en «Usar esta plantilla» para abrirla en Ottermind Studio con el briefing ya escrito.
- 2
Añade al briefing tu marca, tu público, las páginas y el contenido.
- 3
Ottermind crea una web nueva inspirada en este diseño; sigue ajustándola en el chat.
