Yıldırım Panjur

Tasarım Dökümanı

v1 Siteyi Görüntüle

Proje Bilgileri

Firma Yıldırım Panjur
Sektör Panjur Tamiri & Montaj
Hizmet Bölgesi İstanbul
Tecrübe 30 Yıl

Design Token Sistemi

Renk Paleti

Primary (Turuncu)
Secondary (Mavi)
Accent (Yeşil - WhatsApp)
Hizmet Renkleri

Tipografi

Heading Font Inter

Modern sans-serif, UI/UX için ideal

Body Font Roboto

Google'ın tasarladığı genel amaçlı sans-serif

Hierarchy

H1 - text-5xl font-bold

H2 - text-4xl font-bold

H3 - text-xl font-bold

Body - text-base

Small - text-sm

Layout Seçimleri

Hero

#7 - Full-screen Gradient + Glassmorphism

Animated gradient arka plan, cam efektli kartlar, floating elementler, bold tipografi

Stats

#21 - Giant Counters Bar

Turuncu gradient arka plan, 4 kolonlu istatistik, simetrik düzen

Services

#3 - Icon Grid + Gradient Cards

6 hizmet kartı, gradient border, icon hover efekti, border-draw animasyon

Why Us

#61 - Card-based Features

6 özellik kartı, merkezi ikonlar, hover border efekti

Process

#26 - Numbered Horizontal Steps

4 adım, gradient badge'ler, connecting lines

Contact

#46 - Full-width Gradient CTA

Turuncu gradient, 3 büyük iletişim butonu, floating icon

Hover Efektleri

#1 Icon Weight Değişimi

FontAwesome fat → fas (thin → solid) hover'da

Normal
Hover
#6 Text Kayma

Başlık hover'da sağa kayar (translateX 8px)

transform: translateX(8px)
#11 Border Çizim

Sol border yukarıdan aşağı çizilir

::before height: 0 → 100%

Animated Background

#1 Smooth Gradient Shift

Hero section'da kullanılan animated gradient arka plan

.animated-gradient-bg {
    background: linear-gradient(
        135deg,
        #1f2937 0%,
        #111827 25%,
        #0f172a 50%,
        #111827 75%,
        #1f2937 100%
    );
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

Fingerprint

{
  "version": "v1",
  "hash": "yp-v1-or-bl-in-ro",
  "layouts": {
    "hero": 7,
    "stats": 21,
    "services": 3,
    "whyUs": 61,
    "process": 26,
    "contactCta": 46,
    "footer": 1
  },
  "colors": {
    "primary": "Orange (from-orange-500 to-orange-600)",
    "secondary": "Blue (from-blue-500 to-blue-600)",
    "accent": "Green (green-600)"
  },
  "fonts": {
    "heading": "Inter",
    "body": "Roboto"
  },
  "hoverEffects": [1, 6, 11],
  "animatedBackground": "Gradient Shift #1",
  "features": [
    "Glassmorphism",
    "Gradient Borders",
    "Animated Gradient Text",
    "Floating Elements",
    "Pattern Overlay"
  ]
}

Leonardo.ai Görsel Promptları

hero-bg.jpg 1472x832

Editorial photograph of a modern Istanbul apartment window with elegant aluminum shutters (panjur), warm morning sunlight streaming through partially open blinds, soft shadows on white walls, professional interior photography, Canon R5 35mm f/1.4, shallow depth of field, natural lighting, clean minimalist aesthetic, 8k quality, subtle film grain

Model: Leonardo Phoenix Style: Photography
service-repair.jpg 800x600

Documentary photograph of a professional technician repairing window blinds, wearing orange branded uniform, holding specialized tools, working on modern aluminum shutter mechanism, clean workshop background, natural daylight, Nikon D850 50mm, professional craftsmanship, authentic work scene, 8k quality

Model: Leonardo Phoenix Style: Documentary
motorized-shutter.jpg 800x600

Product photography of modern motorized roller shutter with remote control, sleek aluminum finish, smart home integration, elegant window frame, contemporary interior setting, soft studio lighting, Sony A7R IV 90mm macro, high-end product shot, luxury home automation, 8k quality, clean background

Model: Leonardo Phoenix Style: Product
screen-door.jpg 800x600

Architectural photograph of elegant pleated fly screen door on modern balcony, summer day, greenery visible outside, fresh air feeling, white aluminum frame, plisse fabric detail, natural lighting, Canon EOS R6 24mm, real estate photography style, bright and airy, 8k quality

Model: Leonardo Phoenix Style: Architecture
garage-door.jpg 800x600

Exterior photograph of modern automatic sectional garage door, contemporary villa entrance, evening golden hour lighting, warm ambient glow, high-quality steel finish, remote controlled opening mechanism, architectural photography, Fuji GFX 100mm, luxury residential, 8k quality

Model: Leonardo Phoenix Style: Architecture
security-shutter.jpg 800x600

Product photograph of reinforced security roller shutter, heavy-duty aluminum slats, anti-lift mechanism detail, commercial storefront application, professional security solution, studio lighting with dramatic shadows, Sony A7 III 35mm, industrial strength, 8k quality, clean isolated background

Model: Leonardo Phoenix Style: Product
team.jpg 1200x800

Group portrait of professional shutter installation team, 4 Turkish technicians in orange branded uniforms, standing in front of service van, confident smiles, morning light, Istanbul cityscape background, authentic working class heroes, Nikon D850 85mm, corporate team photography, 8k quality, warm and trustworthy mood

Model: Leonardo Phoenix Style: Portrait

Teknik Notlar

Kullanılan Teknolojiler

  • Tailwind CSS v3.4+ (CDN)
  • Alpine.js 3.x (interaktivite)
  • FontAwesome Pro 7 (LOCAL)
  • AOS (Animate on Scroll)
  • Google Fonts (Inter, Roboto)

Özel Özellikler

  • Dark/Light mode toggle
  • Glassmorphism efektleri
  • Animated gradient arka plan
  • Gradient border kartlar
  • Floating WhatsApp butonu

Responsive Breakpoints

  • sm: 640px - Küçük tablet
  • md: 768px - Tablet
  • lg: 1024px - Desktop
  • xl: 1280px - Büyük ekran
  • 2xl: 1536px - Çok büyük

Container Padding 

container mx-auto
px-3      /* Mobile: 12px */
sm:px-6   /* 640px: 24px */
md:px-8   /* 768px: 32px */
lg:px-12  /* 1024px: 48px */
xl:px-16  /* 1280px: 64px */
2xl:px-20 /* 1536px: 80px */

Section Sıralaması

1 Hero
2 Stats
3 Services
4 Why Us
5 Process
6 Contact CTA
7 Footer

Alternatif sıralama: #1 (Servis odaklı) - Hero > Stats > Services > Why Us > Process > Contact > Footer