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





디자인 분석
이 템플릿 디자인을 AI가 분석한 내용입니다: 색상, 글꼴, 여백, 섹션, 특징적인 디테일. 템플릿을 사용하면 Ottermind가 여기에서 시작합니다.
이 분석은 아직 한국어로 제공되지 않아 영어로 표시됩니다.
- Overall
SaaS landing page, futuristic, high-density, dark
- Palette
background #09090b; surfaces [#2563eb, #fafafa, #3b82f6, #0ea5e9]; text #fafafa; muted text #a3a3a3; primary #3b82f6; accents [#2563eb, #0ea5e9]
- Type
headings heading, 700, sentence-case; body heading, 18px; scale h1 72px / h2 48px / h3 20px
- Shape & spacing
button radius 7.6px, card radius 24px, no borders, subtle drop shadows, section spacing 120px, content width 1152px
- Sections (top to bottom)
- Hero — full-width, centered headline with two CTA buttons, dark gradient background with faint circular overlay, floating dashboard mockup below
- Trusted brands — logo row centered, followed by feature grid of 5 cards in 2 rows (3+2), each with icon, title, subtitle, and illustrative UI element
- Dashboard preview — two data cards side-by-side (Campaign Insights, Audience Metrics), then Social Media Integration with central logo and radial social icons
- Pricing — two-tier plan cards (Standard, Mastermind) with toggle for billing, followed by language support grid with flags and names
- Footer — not visible in screenshots
- Signature details
- Floating dashboard UI mockup with macOS-style window controls
- Animated radial pulse around central social integration icon
- Subtle glow on interactive elements like buttons and hover states
- Consistent use of purple-blue accent gradients in charts and highlights
- Minimalist card design with rounded corners and soft inner shadows
- Micro-interactions implied via hover states and animated transitions
- Other pages
- /pricing: pricing comparison table with tiered features
- /features: detailed feature breakdown with illustrations
- /blog: article list with thumbnails and meta-data
- /contact: form with input fields and submission button
템플릿 정보
- 카테고리
- Landing Page, SaaS, AI
- 제작자
- larsen66
- 게시처
- 21st.dev
- 가격
- 무료
- Landing Page
- AI
- SaaS
원본 디자인: larsen66 (21st.dev에 게시). Ottermind는 템플릿 코드를 복사하지 않고, 브리프를 바탕으로 새 사이트를 만듭니다.
Ottermind가 시작하는 브리프
Studio에서 초안으로 열립니다. 보내기 전에 브랜드, 대상, 페이지를 추가하세요.
Build a landing page website inspired by the "Vetra" template. Reference brief: Animated landing page for an AI marketing automation platform, built with Next.js, Tailwind CSS and Framer Motion. Use original copy and imagery for my brand rather than the reference's placeholder content.
이 템플릿 사용 방법
- 1
“이 템플릿 사용하기”를 누르면 브리프가 채워진 상태로 Ottermind Studio가 열립니다.
- 2
브리프에 브랜드, 대상, 페이지, 콘텐츠를 추가하세요.
- 3
Ottermind가 이 디자인에서 영감을 받은 새 사이트를 만듭니다. 채팅으로 계속 다듬으세요.







