웹사이트 템플릿
WriteMate AI
An AI product marketing template from TailGrids built in React and Tailwind CSS. Designed to promote an AI writing tool with feature and pricing sections.
이 템플릿의 설명은 아직 한국어로 제공되지 않아 영어로 표시됩니다.
Landing Page · AI · 무료
페이지
라이브 데모의 페이지별 스크린샷입니다. 페이지 안에서 스크롤하면 전체를 볼 수 있습니다.
디자인 분석
이 템플릿 디자인을 AI가 분석한 내용입니다: 색상, 글꼴, 여백, 섹션, 특징적인 디테일. 템플릿을 사용하면 Ottermind가 여기에서 시작합니다.
이 분석은 아직 한국어로 제공되지 않아 영어로 표시됩니다.
- Overall
landing page, modern tech, medium density, dark
- Palette
background #030303; surfaces [#ffffff]; text #ffffff; muted text #9f9fa9; primary #ffffff; accents []
- Type
headings Inter, 400, sentence-case; body Inter, 16px; scale h1 60px / h2 36px / h3 24px
- Shape & spacing
button/card radius 0; borders 1px solid #1a1a1a; shadows none; section spacing 80px; content width 1232px
- Sections (top to bottom)
- Header — horizontal nav with logo, links, login, and "Start for free" CTA; black background
- Hero — full-width gradient background (blue to purple), centered headline, subheadline, input field with upload icon
- Trusted by — horizontal row of logos (Udeck, FormBold) on black background
- What You Get — four-column grid of feature cards with icons, titles, descriptions, and "Try now" buttons
- Use Cases — six-column grid of use case cards with title and description
- Plans & Pricing — three-column pricing cards with tier names, prices, features, and CTAs; "Most Popular" badge on middle card
- Community Testimonials — two-row grid of user cards with avatar, name, handle, and quote
- FAQs — two-column layout with accordion-style questions on right, intro text on left
- Call to Action — gradient background, headline, subheadline, two CTA buttons
- Footer — four-column footer with Product, Resources, Company, Legal links, copyright, and policy links
- Signature details
- Gradient backgrounds in hero and pricing sections
- Minimalist white-on-black contrast
- Consistent use of rounded corners on cards and buttons
- Horizontal logo carousel under "Trusted by"
- Accordion-style FAQ with downward chevrons
- Clean, spaced typography with consistent line height
- Other pages
- /pricing: pricing section repeated with different layout and additional plan tiers
- /docs: sidebar navigation with documentation content, clean prose layout
템플릿 정보
- 카테고리
- Landing Page, AI
- 제작자
- tailgrids
- 게시처
- 21st.dev
- 가격
- 무료
- Landing Page
- AI
원본 디자인: tailgrids (21st.dev에 게시). Ottermind는 템플릿 코드를 복사하지 않고, 브리프를 바탕으로 새 사이트를 만듭니다.
Ottermind가 시작하는 브리프
Studio에서 초안으로 열립니다. 보내기 전에 브랜드, 대상, 페이지를 추가하세요.
Build a landing page website inspired by the "WriteMate AI" template. Reference brief: An AI product marketing template from TailGrids built in React and Tailwind CSS. Designed to promote an AI writing tool with feature and pricing sections. Use original copy and imagery for my brand rather than the reference's placeholder content.
이 템플릿 사용 방법
- 1
“이 템플릿 사용하기”를 누르면 브리프가 채워진 상태로 Ottermind Studio가 열립니다.
- 2
브리프에 브랜드, 대상, 페이지, 콘텐츠를 추가하세요.
- 3
Ottermind가 이 디자인에서 영감을 받은 새 사이트를 만듭니다. 채팅으로 계속 다듬으세요.
