Web sitesi şablonu

Folio - Data Intelligence Landing Template

A Next.js 15 marketing template for data and analytics products with a live dashboard mock, client carousel, bento feature system, feature tabs, pricing, contact, and first-class light and dark themes.

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

Landing Page · Dashboard · Orijinali $49

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.

/Folio
Folio - Data Intelligence Landing Template web sitesi şablonu, / sayfası, bölüm 1Folio - Data Intelligence Landing Template web sitesi şablonu, / sayfası, bölüm 2Folio - Data Intelligence Landing Template web sitesi şablonu, / sayfası, bölüm 3Folio - Data Intelligence Landing Template web sitesi şablonu, / sayfası, bölüm 4Folio - Data Intelligence Landing Template web sitesi şablonu, / sayfası, bölüm 5

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, clean and modern, medium density, light/dark themes

Palette

background #ffffff; surfaces [#f5f5f5, #edfaf0, #171717, #fff4eb]; text #171717; muted text #737373; primary #266df0; accents [#2b7fff, #00bc7d, #00a6f4]

Type

headings Tiempos Headline, 600, sentence-case; body Geist, 20px; scale h1 60px / h2 48px / h3 16px

Shape & spacing

button radius 6px, card radius 16px, borders none, shadows rgba(0,0,0,0.1) 0px 1px 3px 0px, rgba(0,0,0,0.1) 0px 1px 2px -1px, section spacing 80px, content width 1216px

Sections (top to bottom)
  • Hero — full-width, centered headline with subheading, two CTA buttons, "Crafted with Ruixen UI" credit, overlayed dashboard mock on blurred nature background
  • Feature grid — three-column layout with cards showing activity feed, integrations, AI drafting, each with icon and descriptive text
  • Bento feature system — mixed grid of cards with diagrams, lists, and text blocks highlighting data automations, suggested queries, connect anywhere, web search chat, and activity timeline
  • Why prefer Folio — four-column feature tabs with icons and labels, followed by a large dashboard mockup showing conversational AI interface
  • Client carousel — horizontal row of logos with consistent spacing and subtle hover effects
  • Testimonials — grid of user cards with avatars, names, titles, and quotes, plus empty addable card
  • FAQs — accordion-style list with general questions and answers, collapsible sections
Signature details
  • Dashboard mockups with realistic UI elements and data tables
  • Subtle gradient overlays on hero and feature sections
  • Clean card-based layout with consistent padding and rounded corners
  • Hover states on interactive elements like CTAs and testimonials
  • Integrated dark mode support with inverted color scheme
  • Use of micro-interactions in UI components (e.g., toggle switches, loading indicators)
Other pages
  • /faq: FAQ section with expandable questions and answers

Şablon ayrıntıları

Kategori
Landing Page, Dashboard, E-commerce, Starter Kit
Teknoloji
shadcn/ui, Tailwind CSS, Next.js
Yazar
ruixen.ui
Yayınlandığı yer
21st.dev
Fiyat
Orijinali $49
  • Landing Page
  • shadcn/ui
  • Analytics
  • Pricing
  • Tailwind
  • Next.js
  • Startup Landing
  • Product Detail Page
  • Starter Template
  • Dark

Orijinal tasarım: ruixen.ui, 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 "Folio" template. Reference brief: A Next.js 15 marketing template for data and analytics products with a live dashboard mock, client carousel, bento feature system, feature tabs, pricing, contact, and first-class light and dark themes. Style and features to reflect: shadcn/ui, Analytics, Pricing, Tailwind, Next.js, Startup Landing. 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.