웹사이트 템플릿

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.

이 템플릿의 설명은 아직 한국어로 제공되지 않아 영어로 표시됩니다.

Landing Page · SaaS · 원본 $45

라이브 데모 열기

페이지

라이브 데모의 페이지별 스크린샷입니다. 페이지 안에서 스크롤하면 전체를 볼 수 있습니다.

T3Code - Cinematic Dark SaaS Landing Page Template 웹사이트 템플릿, / 페이지, 2부분 — /Next.js SaaS Landing Page Template

디자인 분석

이 템플릿 디자인을 AI가 분석한 내용입니다: 색상, 글꼴, 여백, 섹션, 특징적인 디테일. 템플릿을 사용하면 Ottermind가 여기에서 시작합니다.

이 분석은 아직 한국어로 제공되지 않아 영어로 표시됩니다.

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

템플릿 정보

카테고리: Landing Page, SaaS
기술: Tailwind CSS, Next.js, React, Three.js
제작자: jahed
게시처: 21st.dev
가격: 원본 $45

Animation
Landing Page
SaaS
Tailwind
Next.js
React
Three.js
Dark

원본 디자인: jahed (21st.dev에 게시). Ottermind는 템플릿 코드를 복사하지 않고, 브리프를 바탕으로 새 사이트를 만듭니다.

Ottermind가 시작하는 브리프

Studio에서 초안으로 열립니다. 보내기 전에 브랜드, 대상, 페이지를 추가하세요.

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.