Tuufi SaaS - Tasarım Dokümantasyonu

Proje Özeti

Genel Bilgiler

Sektör	SaaS / Multi-Tenant Platform
Tarz	Modern, Premium, Bold
Hedef Kitle	Ajanslar, Kurumsal Firmalar
Fingerprint	tf-saas-v1-p24

Kullanılan Stiller

Modern Premium Bold Typography Spacious Full-Width Off-Canvas Menu Full-Screen Hero

Design Token Sistemi

Renk Paleti

Primary

purple-600 (#9333ea)

Secondary

indigo-600 (#4f46e5)

Accent

blue-500 (#3b82f6)

Gradient (#24 Royal Purple)

from-purple-600 via-indigo-600 to-blue-600

Tipografi (#17)

Heading Font

Inter

font-heading

Body Font

Outfit

font-body

Hierarchy

H1: text-5xl/7xl font-black

H2: text-4xl/5xl font-bold

H3: text-xl font-bold

Body: text-base/lg

Spacing & Buttons

Section Padding

py-16 md:py-24 lg:py-32

Container

px-3 sm:px-6 md:px-8 lg:px-12 xl:px-16 2xl:px-20

Border Radius

rounded-lg (buttons) / rounded-xl (cards)

Primary Button

Örnek Buton

Layout Seçimleri

Section	Layout #	Açıklama
Hero	#4	Full-screen gradient mesh + dev tipografi
Features	#3	6-column icon grid with hover effects
Modules	#7	Bento box grid (featured + smaller cards)
Stats	#21	Giant animated counters + gradient bg
Pricing	#2	3-column comparison with toggle
Testimonials	#1	3-column quote cards + client logos
CTA	#66	Giant headline + gradient background + aurora
Contact	#1	Sol info + Sağ form split layout
Footer	#1	5-column classic with brand section
Header/Nav	#26	Sticky shrink + color change on scroll

Section Sıralaması

Kullanılan: #6 (Ürün Odaklı)

1 Hero

2 Features

3 Modules

4 Stats

5 Pricing

6 Testimonials

7 CTA

8 Contact

Hover Efektleri & Animasyonlar

Hover Efektleri

#1

Icon Weight Değişimi

far → fas (FontAwesome regular → solid)

#2

Icon Büyütme

transform: scale(1.15)

#6

Text Kayma

transform: translateX(8px)

#12

Shadow Derinlik

shadow-lg → shadow-xl purple glow

Animated Backgrounds

#10

Aurora Borealis

Hero & CTA sections - soft pulsing aurora effect

#1

Smooth Gradient Shift

Stats section - 15s ease infinite

#13

Floating Shapes

Hero section - subtle geometric shapes

Navigasyon Stili

Desktop Navigation

Sticky header with shrink on scroll
Transparent → solid background transition
Scroll progress bar
Dark/Light mode toggle

Mobile Navigation (#6)

Off-canvas slide from right
Backdrop blur overlay
Icon + text menu items
Alpine.js transitions

Leonardo.ai Görsel Promptları

hero-bg.jpg 1472x832

Abstract dark tech background, deep purple and blue gradients merging like aurora borealis, subtle geometric grid pattern overlay, floating translucent shapes with soft glow, modern SaaS platform aesthetic, 8k quality, ultra sharp, minimal noise, dark slate base color with purple (#9333ea) and indigo (#4f46e5) accent lights

Model: Leonardo Phoenix Style: Abstract Negative: text, logos, faces

module-ecommerce.jpg 800x600

Modern e-commerce dashboard interface on laptop screen, clean UI with product cards, shopping cart icon visible, purple accent colors matching brand (#9333ea), soft depth of field, professional office environment background blur, natural window light, Canon R5 85mm f/2.8, editorial style photograph

Model: Leonardo Phoenix Style: Cinematic

module-blog.jpg 400x300

Content creation workspace, person typing on modern keyboard, blog post editor visible on screen, rich text formatting tools, minimalist desk setup, natural soft lighting, warm tones with purple accent elements, shallow depth of field, creative professional atmosphere, 35mm lens aesthetic

Model: Leonardo Phoenix Style: Lifestyle

module-portfolio.jpg 400x300

Digital portfolio gallery on tablet device, grid of project thumbnails, creative agency workspace background, mood board and design samples visible, professional studio lighting, modern interior design, warm gray tones with purple accent lighting, 50mm lens

Model: Leonardo Phoenix Style: Editorial

module-subscription.jpg 400x300

Payment processing interface on mobile phone, credit card and digital wallet icons, secure transaction visual, modern fintech aesthetic, clean white background with subtle purple gradient, isometric 3D style illustration, vector art look, minimal shadows

Model: Leonardo Phoenix Style: 3D Illustration

module-media.jpg 400x300

Cloud storage visualization, floating file icons and folder structures, data flow connections, modern abstract tech concept, dark background with glowing purple (#9333ea) and blue (#3b82f6) elements, 3D render style, depth and dimension, clean composition

Model: Leonardo Phoenix Style: 3D Abstract

avatar-[1-3].jpg 200x200

Professional headshot portrait, business professional in modern office attire, confident smile, neutral gray background with soft gradient, studio lighting setup, eye-level camera angle, high-end corporate portrait style, Canon 85mm f/1.4 lens aesthetic, sharp focus on eyes, subtle skin texture

Model: Leonardo Phoenix Style: Portrait Generate 3 variations

Tasarım Fingerprint

{
  "v1": {
    "hash": "tf-saas-v1-p24",
    "created": "2026-01-07",
    "layouts": {
      "hero": 4,
      "features": 3,
      "modules": 7,
      "stats": 21,
      "pricing": 2,
      "testimonials": 1,
      "cta": 66,
      "contact": 1,
      "footer": 1,
      "header": 26
    },
    "colors": {
      "palette": "#24 Royal Purple",
      "primary": "purple-600",
      "secondary": "indigo-600",
      "accent": "blue-500"
    },
    "fonts": {
      "heading": "Inter",
      "body": "Outfit",
      "combination": "#17"
    },
    "hover_effects": [1, 2, 6, 12],
    "animated_bg": [1, 10, 13],
    "mega_menu": 6,
    "section_order": 6
  }
}

Teknik Notlar

Kullanılan Teknolojiler

Tailwind CSS v4 (CDN)
Alpine.js 3.x
AOS (Animate on Scroll)
FontAwesome 6.5.1
Google Fonts (Inter, Outfit)

Önemli Notlar

Dark/Light mode sistemi localStorage ile persist
Scroll progress bar header'da gösterilir
Pricing toggle yıllık/aylık fiyat değişimi
Counter animasyonları scroll ile tetiklenir
Responsive: Mobile-first yaklaşım