Svelte0 | Generate Svelte UI

A landing page hero section with a heading, leading text and an opt-in form.

A login page with option to login with GitHub.

A login form

A login page with password visibility indicator

A login page with option to login with GitHub.

Shimmering text. Text is white on black background. Shimmer should be subtle but noticeable.

Generate a responsive gallery page with lightbox setup

A landing page hero section with a heading, leading text and an opt-in form.

A login page with option to login with GitHub.

A login page with regular email and password login but also login with google

create this card, use flowbite

Can you create a page with scrolling animation? 4 sections. Overview speed agility and control. There should be fair bit of dead space and auto locking as users scroll

make a blog landing page that has header, featured post section, posts section and footer just like medium

site page management dashboard

generate Tinder-like Swipable stack of Cards. left to like, right to dismiss

generarte tinder like swipable cards

Generate a multi-step wizard to collect information on users when onboarding onto a SaaS product.

Generate a web app that is similar to VSCode, except it's not for code -- it's used for switching between different dashboards that help with managing power plant infrastructure, and has a panel that is used for chatting with an LLM that is open by default but collapsible.

Generate a multi-step wizard to collect information on users when onboarding onto a SaaS product.

create a flowbite table where each row can be clicked to expand some content below the row or hide it on another click. the revealed content is another table, indented, with smaller text

A login page with option to login with GitHub.

A login form

A customer record for an ISP company.

A login form

Sidebar of a desktop app with "Chart", "Center of Mass" and "Vibrations"

a CVSS 4 calculattor input component that generates the full vector based on a popover that displays the adequate toggle groups

A customer record with personal and address information, statistics, and functions allowing for edition and deletion, beautifully styled.

make a simple +layout with a navbar with the glass effect when things scroll underneath it

A responsive product page with sticky images on the left side on desktop

card

hacer card para un array que tenga nombre de proyecto, periodo de fecha, tags (azure, etc) y logo de la empresa

tengo una array con varios proyectos. Dentro de ellos se tiene el nombre, periodo ("Enero 2023 - Junio 2023"), tags (ej: azure, html) y logo de la empresa. Como puedo crear cards para cada uno

tengo el siguiente json con variables. Como puedo generar un card que tenga el nombre del proyecto, logo de la empresa, tags y periodo { "projects": [ { "nombre": "Diagnóstico de Infraestructura en Azure", "id": 1, "periodo": "Enero 2023 - Junio 2023", "tags": [ "Azure", "Diagnóstico", "Databricks" ], "detalle": "Este proyecto se enfocó en realizar un diagnóstico completo de la infraestructura existente en Azure, utilizando herramientas avanzadas como Databricks para el análisis de datos y la optimización de recursos.", "participantes": [ { "nombre": "Ana García", "cargo": "Líder de Proyecto", "foto": "/images/user.png" }, { "nombre": "Carlos Pérez", "cargo": "Arquitecto de Soluciones", "foto": "/images/user.png" }, { "nombre": "Laura Martínez", "cargo": "Analista de Datos", "foto": "/images/user.png" } ], "archivos": [ { "nombre": "Presentación Final.ppt", "tipo": "ppt" }, { "nombre": "Análisis de Costos.xlsx", "tipo": "excel" } ] }, { "nombre": "Migración a Cloud con AWS", "id": 2, "periodo": "Julio 2023 - Diciembre 2023", "tags": [ "AWS", "Migración", "Contenedores" ], "detalle": "Este proyecto se centró en la migración de la infraestructura local a la nube de AWS, incluyendo la containerización de aplicaciones y la optimización de recursos.", "participantes": [ { "nombre": "Juan Rodríguez", "cargo": "Líder de Proyecto", "foto": "/images/user.png" }, { "nombre": "María Gómez", "cargo": "Arquitecto de Infraestructura", "foto": "/images/user.png" }, { "nombre": "Pedro Fernández", "cargo": "Ingeniero de DevOps", "foto": "/images/user.png" } ], "archivos": [ { "nombre": "Plan de Migración.pdf", "tipo": "pdf" }, { "nombre": "Reporte de Optimización.docx", "tipo": "word" } ] }, { "nombre": "Implementación de Plataforma de BI en GCP", "id": 3, "periodo": "Agosto 2023 - Enero 2024", "tags": [ "GCP", "BI", "Visualización de Datos" ], "detalle": "Este proyecto se enfocó en la implementación de una plataforma de Business Intelligence en Google Cloud Platform, integrando herramientas como BigQuery, DataStudio y Looker.", "participantes": [ { "nombre": "Sofía Hernández", "cargo": "Líder de Proyecto", "foto": "/images/user.png" }, { "nombre": "Miguel Suárez", "cargo": "Arquitecto de Datos", "foto": "/images/user.png" }, { "nombre": "Fernanda Jiménez", "cargo": "Analista de BI", "foto": "/images/user.png" } ], "archivos": [ { "nombre": "Diseño de la Plataforma.pdf", "tipo": "pdf" }, { "nombre": "Reporte de Implementación.docx", "tipo": "word" } ] }, { "nombre": "Análisis de Seguridad en Azure", "id": 4, "periodo": "Septiembre 2023 - Febrero 2024", "tags": [ "Azure", "Seguridad", "Ciberseguridad" ], "detalle": "Este proyecto se centró en la evaluación y fortalecimiento de la seguridad de la infraestructura existente en Azure, incluyendo el análisis de vulnerabilidades y la implementación de medidas de protección.", "participantes": [ { "nombre": "Javier Guzman", "cargo": "Líder de Proyecto", "foto": "/images/user.png" }, { "nombre": "Lucía Reyes", "cargo": "Especialista en Ciberseguridad", "foto": "/images/user.png" }, { "nombre": "Daniel Sánchez", "cargo": "Consultor de Seguridad", "foto": "/images/user.png" } ], "archivos": [ { "nombre": "Análisis de Vulnerabilidades.pdf", "tipo": "pdf" }, { "nombre": "Plan de Mitigación.docx", "tipo": "word" } ] }, { "nombre": "Modernización de Aplicaciones con Kubernetes", "id": 5, "periodo": "Octubre 2023 - Marzo 2024", "tags": [ "Kubernetes", "Modernización", "Microservicios" ], "detalle": "Este proyecto se enfocó en la modernización de las aplicaciones heredadas mediante la migración a una arquitectura de microservicios desplegada en una plataforma de Kubernetes.", "participantes": [ { "nombre": "Alejandra Ramírez", "cargo": "Líder de Proyecto", "foto": "/images/user.png" }, { "nombre": "Pablo Ortiz", "cargo": "Arquitecto de Aplicaciones", "foto": "/images/user.png" }, { "nombre": "Gabriela Flores", "cargo": "Ingeniero de DevOps", "foto": "/images/user.png" } ], "archivos": [ { "nombre": "Diseño de la Arquitectura.pdf", "tipo": "pdf" }, { "nombre": "Plan de Implementación.docx", "tipo": "word" } ] }, { "nombre": "Implementación de Solución de IoT en Azure", "id": 6, "periodo": "Noviembre 2023 - Abril 2024", "tags": [ "Azure", "IoT", "Telemetría" ], "detalle": "Este proyecto se centró en la implementación de una solución de Internet of Things (IoT) en la plataforma de Azure, incluyendo la recopilación y análisis de datos de telemetría.", "participantes": [ { "nombre": "Sergio López", "cargo": "Líder de Proyecto", "foto": "/images/user.png" }, { "nombre": "Valeria Castillo", "cargo": "Arquitecto de IoT", "foto": "/images/user.png" }, { "nombre": "Andrés Gutiérrez", "cargo": "Ingeniero de Sistemas Embebidos", "foto": "/images/user.png" } ], "archivos": [ { "nombre": "Diseño de la Solución IoT.pdf", "tipo": "pdf" }, { "nombre": "Reporte de Implementación.docx", "tipo": "word" } ] } ] }

Make me a mercury style landing page

create a multi-select select component that when a option is selected (for our example let's use fruits) a badge will appear in the selected values and that badge will have the name of the selected value and also a little "x" button that when it's pressed will un-select that value

A nav side bar with home, transactions, payments, accounts links. Whichever is the current page should be highlighted. At the bottom should be the company name "Acme Corp" that is also an account switcher

an image slider

create a beautiful looking UI for a mobile first chat app. I want the UI to be clean and sexy. The title should read "Whale Cum" with emojis. Show the server status as well. Have a text box at the bottom and a send key as well. Good luck!

create a landing page

Recent UIs