Website-Vorlage
Shadcn Dashboard and Landing
Admin dashboard plus a matching landing page, shipped in both a Next.js and a Vite build of the same design.
Die Beschreibung dieser Vorlage ist noch nicht auf Deutsch verfügbar und wird daher auf Englisch angezeigt.
Landing Page · Dashboard · Kostenlos
Seiten
Screenshots der Live-Demo, Seite für Seite. Scrollen Sie innerhalb einer Seite, um sie ganz zu sehen.
Design-Analyse
Eine KI-Auswertung des Designs dieser Vorlage: Farben, Typografie, Abstände, Abschnitte und markante Details. Ottermind startet damit, wenn Sie die Vorlage verwenden.
Diese Analyse ist noch nicht auf Deutsch verfügbar und wird daher auf Englisch angezeigt.
- Overall
Admin dashboard, professional, medium density, light
- Palette
background #ffffff; surfaces [#fafafa, #171717, #e7000b, #009689]; text #0a0a0a; muted text #737373; primary #00a63e; accents [#e7000b, #009689, #f54a00]
- Type
headings Inter, 700, sentence-case; body Inter, 14px; scale h1 24px, h3 16px
- Shape & spacing
button/card radius 8px/14px, no borders, shadow rgba(0,0,0,0.1) 0px 1px 3px 0px, rgba(0,0,0,0.1) 0px 1px 2px -1px, section spacing 24px, content width 1200px max
- Sections (top to bottom)
- Header — horizontal layout, logo, search bar, navigation links, user actions, white background
- Hero — centered headline, subheading, two CTA buttons, white background
- Stats grid — four cards with metrics, trend indicators, and status labels, white background
- Charts row — two side-by-side cards: line chart (sales performance), donut chart (revenue breakdown), white background
- Transactions & Products — two columns: list of recent transactions with status tags, top products with ratings and stock levels, white background
- Customer Insights — tabbed view (Growth, Demographics, Regions), bar chart with dual-color bars, key metrics in card layout, white background
- Footer — centered attribution text, small font, light gray
- Signature details
- Rounded cards with subtle shadows
- Status badges in accent colors (red, green, orange)
- Dual-tone bar charts with contrasting data series
- Hover effects on interactive elements
- Clean, minimal typography with consistent spacing
- Tabbed interface for insights section
- Other pages
- /dashboard: admin dashboard with metrics and charts
- /landing: landing page with hero and features
- /auth-pages: authentication forms
- /errors: error handling pages
- /settings: configuration panel
Details zur Vorlage
- Kategorie
- Landing Page, Dashboard
- Autor
- shadcnstore
- Gelistet auf
- 21st.dev
- Preis
- Kostenlos
- Dashboard
- Landing Page
Originaldesign von shadcnstore, gelistet auf 21st.dev. Ottermind kopiert nicht den Code der Vorlage, sondern erstellt aus dem Briefing eine neue Website.
Das Briefing, mit dem Ottermind startet
Es öffnet sich in Studio als Entwurf – ergänzen Sie Marke, Zielgruppe und Seiten, bevor Sie es senden.
Build a landing page website inspired by the "Shadcn Dashboard and Landing" template. Reference brief: Admin dashboard plus a matching landing page, shipped in both a Next.js and a Vite build of the same design. Use original copy and imagery for my brand rather than the reference's placeholder content.
So verwenden Sie diese Vorlage
- 1
Klicken Sie auf „Diese Vorlage verwenden“, um sie mit ausgefülltem Briefing in Ottermind Studio zu öffnen.
- 2
Ergänzen Sie das Briefing um Marke, Zielgruppe, Seiten und Inhalte.
- 3
Ottermind erstellt eine neue Website, inspiriert von diesem Design – im Chat verfeinern Sie sie weiter.
