Website-Vorlage
Qronos AI/SaaS Product Template
Qronos is a polished, responsive landing-page template for SaaS, AI, and autonomous agent-related product marketing sites. It pairs a dark, high-contrast visual system with product-led dashboard previews, scheduling workflows, pricing, customer stories, and conversion-focused calls to action. Template features: * Responsive hero with animated scheduling visual, partner marquee, and primary CTAs * Product overview with agent schedule, guardrails, inbox, and multi-agent pipeline previews * Agent insights dashboard with KPI cards, budget meter, activity chart, and project table * Pricing tiers with monthly/yearly billing toggles and annual savings messaging * Customer-story cards, testimonial logos, and supplied avatar assets * CTA and footer sections with responsive navigation * Mobile-specific static dashboard previews for schedule and tracking views, preserving visual clarity on smaller screens * Reusable shadcn/Radix-based UI primitives and custom motion effects Stack * Next.js 16 * React 19 * TypeScript * Tailwind CSS 4 * Radix UI * Framer Motion * Hugeicons * pnpm Quick Start Guide Prerequisites * Node.js 20 or later * pnpm 10 or later
Die Beschreibung dieser Vorlage ist noch nicht auf Deutsch verfügbar und wird daher auf Englisch angezeigt.
AI · Starter Kit · Original $69
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
SaaS landing page, sleek and technical, high density, dark
- Palette
background #000101; surfaces [#000000, #101112, #ffffff, #7d86ff]; text #ffffff; muted text #757168; primary #7d86ff; accents [#7d86ff, #ffd230, #ffdf20]
- Type
headings Google Sans, 400, sentence-case; body system-ui, 18px; scale h1:66px / h2:48px / h3:36px
- Shape & spacing
button radius 9999px, card radius 14px, borders thin white, shadows rgba(255,255,255,0.08) 0px 1px 0px 0px inset, rgba(0,0,0,0.7) 0px -1px 0px 0px inset, section spacing 120px, content width 1288px
- Sections (top to bottom)
- Hero — full-width, centered headline with two CTA buttons, partner logo row below, dark background
- Stateful execution — left-aligned headline, right-aligned paragraph, dashboard preview with sidebar navigation and timeline view
- Durable autonomy — three-column feature cards above two-panel layout showing multi-agent pipeline and flexible scheduling dashboards
- Track agent insights — headline with subtext, large dashboard preview featuring KPI cards, bar chart, and project table
- Pricing — headline with subtext, four-tier pricing cards with toggle switches for yearly billing and savings labels
- Customer stories — two testimonial cards with logos, quotes, avatars, and metrics below
- Footer — minimal CTA with social icons and navigation links
- Signature details
- High-contrast dark theme with subtle inset highlights
- Dashboard previews styled as product screenshots with UI depth
- Animated timeline bars in schedule views
- Floating card shadows with dual-layer inset glow
- Consistent use of rounded corners and soft padding
- Monochrome iconography with accent color highlights
- Other pages
- /about: brief company narrative with team photo
- /features: detailed breakdown of capabilities with interactive mockups
- /pricing: expanded tier comparison with feature toggles
- /testimonials: grid of customer quotes with brand logos
Details zur Vorlage
- Kategorie
- AI, Starter Kit
- Technologie
- Tailwind CSS, Next.js, React, TypeScript, Radix UI
- Autor
- monolythdev
- Gelistet auf
- 21st.dev
- Preis
- Original $69
- AI
- Tailwind
- Next.js
- React
- Typescript
- 3D Animation
- Radix
- AI Agent
- Starter Template
Originaldesign von monolythdev, 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 ai website inspired by the "Qronos AI/SaaS Product Template" template. Reference brief: Qronos is a polished, responsive landing-page template for SaaS, AI, and autonomous agent-related product marketing sites. It pairs a dark, high-contrast visual system with product-led dashboard previews, scheduling workflows, pricing, customer stories, and conversion-focused calls to action. Template features: * Responsive hero with animated scheduling visual, partner marquee, and primary CTAs * Product overview with agent schedule, guardrails, inbox, and multi-agent pipeline previews * Agent insights dashboard with KPI cards, budget meter, activity chart, and project table * Pricing tiers with monthly/yearly billing toggles and annual savings messaging * Customer-story cards, testimonial logos, and supplied avatar assets * CTA and footer sections with responsive navigation * Mobile-specific static dashboard previews for schedule and tracking views, preserving visual clarity on smaller screens * Reusable shadcn/Radix-based UI primitives and custom motion effects Stack * Next.js 16 * React 19 * TypeScript * Tailwind CSS 4 * Radix UI * Framer Motion * Hugeicons * pnpm Quick Start Guide Prerequisites * Node.js 20 or later * pnpm 10 or later Style and features to reflect: Tailwind, Next.js, React, Typescript, 3D Animation, Radix. 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.
