Web sitesi şablonu

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.

Bu şablonun açıklaması henüz Türkçe olarak mevcut değil, bu yüzden İngilizce gösteriliyor.

Landing Page · AI · Ücretsiz

Canlı demoyu aç

Sayfalar

Canlı demonun sayfa sayfa ekran görüntüleri. Tamamını görmek için sayfanın içinde kaydırın.

/WriteMate AI - Content Creation at Its Best
WriteMate AI web sitesi şablonu, / sayfası, bölüm 1WriteMate AI web sitesi şablonu, / sayfası, bölüm 2WriteMate AI web sitesi şablonu, / sayfası, bölüm 3
/pricingPricing - WriteMate AI | Affordable Plans for All
WriteMate AI web sitesi şablonu, /pricing sayfası, bölüm 1WriteMate AI web sitesi şablonu, /pricing sayfası, bölüm 2WriteMate AI web sitesi şablonu, /pricing sayfası, bölüm 3
/docsDocumentation - WriteMate AI | Complete Guide
WriteMate AI web sitesi şablonu, /docs sayfası, bölüm 1
/supportSupport - WriteMate AI | Get Help & FAQs
WriteMate AI web sitesi şablonu, /support sayfası, bölüm 1

Tasarım analizi

Bu şablonun tasarımının yapay zekâ ile okunması: renkler, yazı tipleri, boşluklar, bölümler ve öne çıkan ayrıntılar. Şablonu kullandığınızda Ottermind buradan başlar.

Bu analiz henüz Türkçe olarak mevcut değil, bu yüzden İngilizce gösteriliyor.

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

Şablon ayrıntıları

Kategori
Landing Page, AI
Yazar
tailgrids
Yayınlandığı yer
21st.dev
Fiyat
Ücretsiz
  • Landing Page
  • AI

Orijinal tasarım: tailgrids, 21st.dev üzerinde yayınlandı. Ottermind şablonun kodunu kopyalamaz; brife göre yeni bir site oluşturur.

Ottermind’in başladığı brif

Studio’da taslak olarak açılır; göndermeden önce markanızı, hedef kitlenizi ve sayfalarınızı ekleyin.

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.

Bu şablon nasıl kullanılır

  1. 1

    Brifi doldurulmuş şekilde Ottermind Studio’da açmak için “Bu şablonu kullan”a tıklayın.

  2. 2

    Brife markanızı, hedef kitlenizi, sayfalarınızı ve içeriğinizi ekleyin.

  3. 3

    Ottermind bu tasarımdan ilham alan yeni bir site oluşturur; sohbette düzenlemeye devam edin.