Yildirim Panjur

Tasarim Dokumani

v2 Siteyi Goruntule

Proje Bilgileri

Firma Yildirim Panjur
Sektor Panjur Tamiri & Montaj
Hizmet Bolgesi Istanbul
Tecrube 30 Yil

v2 Farkliliklari (v1'den)

Renk Paleti Degisimi

v1:
Orange + Blue
v2:
Red + Rose (Fire Red)

Layout Degisiklikleri

  • Hero: Animated gradient background + Split layout
  • Why Us: Overlapping cards pattern
  • Services: Hover border efekti (shadow yerine)
  • Contact: FAQ accordion eklendi

Yeni Efektler

  • Animated gradient background (Hero)
  • Animated gradient text
  • Animated border efekti (contact card)
  • Pulse ring animasyonu (telefon ikonu)

Glassmorphism

  • Header: Scroll'da glass efekti
  • Hero contact card: Glass dark
  • Mega menu: Glass light/dark
  • Mobile menu: Glass efekti

Design Token Sistemi

Renk Paleti (Fire Red - #13)

Primary (Kirmizi)
Secondary (Rose)
Accent (Yesil - WhatsApp)
Hizmet Renkleri

Tipografi (Font Cift #17)

Heading Font Inter

Modern sans-serif, UI/UX icin ideal, bold typography

Body Font Roboto

Google'in tasarladigi genel amacli sans-serif

Hierarchy

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

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

H3 - text-xl font-bold

Body - text-base/lg

Small - text-sm

Layout Secimleri

#21 Hero Section

Split Layout + Animated Gradient BG

  • • Sol: Metin + CTA butonlari
  • • Sag: Glass contact card
  • • Animated gradient background (#1)
  • • Floating shapes dekorasyon
#21 Stats Section

Card Grid (4 kolon)

  • • Giant counter numbers
  • • Gradient icon backgrounds
  • • Hover border efekti
  • • Shadow glow
#1 Services Section

3-Column Card Grid

  • • 6 hizmet karti
  • • Icon + baslik + aciklama + liste
  • • Border hover efekti
  • • Shadow glow (renge gore)
#47 Why Us Section

Overlapping Cards Pattern

  • • Sol: Feature listesi
  • • Sag: Overlapping image + cards
  • • Floating badge animasyonu
  • • Glass overlay
#26 Process Section

Numbered Horizontal Steps

  • • 4 adim (yatay)
  • • Gradient line baglanti
  • • Numarali badge
  • • Icon + baslik + aciklama
#106 About Section

Founder Story + Image

  • • Sol: Image + experience badge
  • • Sag: Story + values grid
  • • 2x2 value kartlari
#1 Contact Section

Sol Info + Sag FAQ

  • • Sol: Contact kartlari
  • • Sag: FAQ accordion
  • • Alpine.js collapse
#1 Footer Section

4-Column Classic

  • • Logo + aciklama + social
  • • Hizli linkler
  • • Hizmetler
  • • Iletisim + CTA
#1 Header + Mega Menu

Sticky Glass + Mega Menu #1

  • • Sticky shrink + glass efekti
  • • Mega menu (2x2 grid)
  • • CTA bar in mega
  • • Mobile slide menu

Hover Efektleri

#1 Icon Weight Degisimi

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

Normal

Hover

#11 Border Cizim

Transparent → Colored border

Service kartlar: border-2 border-transparent → border-red-500

#2 Icon Buyutme

transform: scale(1.15)

Card icindeki ikonlar hover'da buyur

#17 Background Color Fade

bg-transparent → bg-color/20

Contact kartlari, mega menu linkler

#12 Shadow Derinlik

shadow-lg → shadow-2xl + glow

Stat kartlar, CTA butonlar

Custom Scale + Glow

Floating butonlar icin

hover:scale-110 + shadow glow artisi

Animated Backgrounds & Efektler

Hero Animated Gradient (#1 Smooth Shift)

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

Animated Gradient Text

.animated-gradient-text {
  background: linear-gradient(
    90deg,
    #ffffff, #fecaca,
    #ffffff, #fecaca, #ffffff
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  color: transparent;
  animation: textGradient 6s ease infinite;
}

Animated Border

.animated-border {
  padding: 3px;
  background: linear-gradient(
    90deg,
    #dc2626, #f43f5e,
    #fb7185, #f43f5e, #dc2626
  );
  background-size: 300% 100%;
  animation: borderGradient 4s ease infinite;
}

Pulse Ring (Telefon ikonu)

.pulse-ring::before {
  content: '';
  position: absolute;
  inset: -4px;
  border: 2px solid #dc2626;
  border-radius: inherit;
  animation: pulseRing 2s ease-out infinite;
}

Float Animation

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

.float {
  animation: float 4s ease-in-out infinite;
}

Glassmorphism Classes

.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.glass-dark {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(20px);
}

.glass-light {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px);
}

Fingerprint (Benzersizlik Kontrolu)

v2 Fingerprint Hash

r7k2m9p4

RED + ROSE + INTER + ANIMATED_GRADIENT + GLASSMORPHISM

v1 Fingerprint (Karsilastirma)

a3f2c8b9

ORANGE + BLUE + INTER + SOLID_BG + MINIMAL_GLASS

Kombinasyon Detaylari

Renk Paleti: Fire Red (#13)
Font Cifti: Inter + Roboto (#17)
Animated BG: Smooth Shift (#1)
Hero Layout: Split + Glass Card (#21)
Mega Menu: Grid + CTA Bar (#1)
Hover: Icon Weight + Border

Leonardo.ai Gorsel Promptlari

hero-team.jpg 1472x832

Editorial photograph of professional repair technician installing window shutters on modern building, wearing red company uniform and safety equipment, natural daylight, confident pose looking at camera, Canon R5 85mm f/2.0, medium depth of field, Kodak Portra 400 film look, professional corporate photography, 8k quality, Istanbul cityscape visible in background

Model: Leonardo Phoenix Style: Cinematic Corporate
why-us-workshop.jpg 800x600

Documentary style photograph of shutter repair workshop, aluminum profiles and motor components neatly organized, professional workbench with tools, warm industrial lighting, clean and modern workspace, Canon R5 35mm f/1.8, wide depth of field, slight vignette, professional craftsmanship atmosphere, 8k quality

Model: Leonardo Phoenix Style: Documentary
about-founder.jpg 800x600

Professional portrait of mature Turkish businessman in casual smart attire, standing in front of company van with logo, arms crossed confidently, friendly smile, 30 years experience vibe, natural outdoor lighting, Canon R5 85mm f/1.4, shallow depth of field, Fuji Pro 400H film look, trustworthy and experienced appearance, 8k quality

Model: Leonardo Phoenix Style: Portrait
service-repair.jpg 600x400

Close-up photograph of hands repairing aluminum roller shutter mechanism, professional tools visible, detailed craftsmanship, soft natural lighting from window, Canon R5 50mm macro f/2.8, shallow depth of field highlighting hands and work, clean modern aesthetic, 8k quality

Model: Leonardo Phoenix Style: Detail Shot
service-motorized.jpg 600x400

Modern motorized roller shutter system installed on luxury apartment window, sleek aluminum design, remote control visible in hand, clean white wall background, bright daylight, professional installation quality, Canon R5 35mm f/2.0, wide depth of field, minimalist modern aesthetic, 8k quality

Model: Leonardo Phoenix Style: Product Shot
service-screen.jpg 600x400

Elegant pleated fly screen installed on balcony door, bright summer daylight streaming through mesh, modern apartment interior visible, clean white frame, professional installation, Canon R5 24mm f/2.8, wide angle showing full installation, lifestyle photography aesthetic, 8k quality

Model: Leonardo Phoenix Style: Lifestyle

Section Sirasi (#1 - Servis Odakli)

1 Hero
2 Stats
3 Services
4 Why Us
5 Process
6 About
7 Areas
8 CTA
9 Contact
10 Footer

Design Consistency Kontrolu

Tum sitede ayni renk paleti (Red + Rose)
Tum butonlar rounded-xl/2xl
Tum section'lar 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
Tum h1'ler text-3xl md:text-5xl lg:text-7xl
Tum card'lar rounded-2xl
FontAwesome Pro 7 LOCAL kullanildi
Icon varsayilan: fat (thin)
Icon hover: fas (solid)
Dark/Light mode calisiyor
Border hover (shadow yerine)
Glassmorphism uygulanmis

Ozel Notlar

Tasarim Stilleri (Kullanici Tercihi)

  • • Modern ve guncel tasarim dili
  • • Cam efekti (glassmorphism) - yari saydam, bulanik arka plan
  • • Bold Typography - cesur basliklar
  • • Red renk paleti
  • • Inter + Roboto fontlari
  • • Nefes alan / Spacious layout
  • • Kurumsal / Corporate gorunum

Teknik Ozellikler

  • • Tailwind CSS v4 (CDN)
  • • Alpine.js (interaktivite - dark mode, mobile menu, FAQ accordion)
  • • AOS (scroll animasyonlari)
  • • FontAwesome Pro 7 (LOCAL)
  • • Responsive (mobile-first)
  • • Semantic HTML5

v1'den Farkli Olan Ana Ozellikler

  • • Renk: Orange → Red/Rose (Fire Red)
  • • Animated gradient background (Hero)
  • • Animated gradient text
  • • Animated border efekti
  • • Daha yogun glassmorphism
  • • FAQ accordion (Contact section)
  • • Overlapping cards pattern (Why Us)
  • • Mega menu with CTA bar