Website-Vorlage
T3Code - Cinematic Dark SaaS Landing Page Template
A clean, high-performance dark-mode SaaS landing page template built with Next.js 16, React 19, Tailwind CSS v4, Motion, and Three.js. Includes cinematic hero choreography, WebGL effects, responsive layouts, interactive micro-interactions, and reusable components.
Die Beschreibung dieser Vorlage ist noch nicht auf Deutsch verfügbar und wird daher auf Englisch angezeigt.
Landing Page · SaaS · Original $45
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, cinematic, low density, dark
- Palette
background #0a0a0a; surfaces [#000000, #ffffff, #4922e5, #a558fb]; text #ffffff; muted text #9f9fa9; primary #4922e5; accents [#4922e5, #a558fb]
- Type
headings Syne, 600, sentence-case; body Geist, 14px; scale h1 48px, h2 32px, p 14px
- Shape & spacing
button radius 12px, card radius 18px, borders none, shadows rgba(255, 255, 255, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.5) 0px 1px 2px -1px, section spacing 120px, content width 1004px
- Sections (top to bottom)
- Hero — full-width, centered layout, two-line headline with pixel art icon, subheading, two CTA buttons (Download for macOS, Source), curved purple glow gradient background from top edge
- Testimonials — horizontal scrollable row of five user cards with avatar, name, handle, quote, and X icon; each card has rounded corners and subtle shadow; labeled "TRUSTED BY BUILDERS AND CREATORS WORLDWIDE" above
- Features — left-aligned heading and paragraph, three pill-shaped tags below, right-side abstract circular graphic with layered rings and logo at center
- Call-to-action — centered card with rounded corners, dark overlay, dotted pattern background, headline, subtext, and two CTA buttons (same as hero)
- Footer — thin line divider, left-aligned logo and copyright, right-aligned navigation links
- Signature details
- Curved purple ambient glow across top of hero
- Subtle dot matrix pattern in CTA card background
- Floating circular graphic with concentric rings and central logo
- Interactive testimonial cards with hover effects
- Smooth motion choreography on scroll
- WebGL-style depth effects in abstract visuals
- Other pages
- /docs: Documentation page with sidebar navigation and code examples
- /changelog: Version history with release notes and timestamps
Details zur Vorlage
- Kategorie
- Landing Page, SaaS
- Technologie
- Tailwind CSS, Next.js, React, Three.js
- Autor
- jahed
- Gelistet auf
- 21st.dev
- Preis
- Original $45
- Animation
- Landing Page
- SaaS
- Tailwind
- Next.js
- React
- Three.js
- Dark
Originaldesign von jahed, 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 "T3Code" template. Reference brief: A clean, high-performance dark-mode SaaS landing page template built with Next.js 16, React 19, Tailwind CSS v4, Motion, and Three.js. Includes cinematic hero choreography, WebGL effects, responsive layouts, interactive micro-interactions, and reusable components. Style and features to reflect: Animation, Tailwind, Next.js, React, Three.js, Dark. 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.
