Tasarim Dokumantasyonu

VARPLAS - v1

Endustriyel Depolama & Tasima Cozumleri

Olusturma: 7 Ocak 2026

Fingerprint: v1-e7f3a2b9

Sektor Analizi

Sektor

Endustriyel Depolama ve Tasima - IBC Tank, Metal Varil, Plastik Varil uretim ve tedarik

Hedef Kitle

B2B musteriler - kimya, gida, insaat, tarim sektorleri, uretim tesisleri

Marka Karakteri

Guvenilir, profesyonel, kaliteli, cevreci, yenilikci

Referans Siteler

vatanvaril.com, plastiksan.com.tr - Benzer sektor, ayni urun yelpazesi

Design Token Sistemi

Renk Paleti

Primary - Green

#10b981 (emerald-500)

Secondary - Sky

#0ea5e9 (sky-500)

Gradient Primary

emerald-500 → sky-500

Gradient Preset: #4 Mint Fresh + #5 Sky Blue kombinasyonu

Tipografi

Heading Font

Outfit - Modern, bold display

Body Font

Inter - Clean, readable UI

Font Cifti

#12 Outfit + Inter (Modern kategorisi)

H1: text-5xl font-bold

H2: text-4xl font-bold

H3: text-xl font-semibold

Body: text-base

Spacing & Components

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

Card Padding

p-6 md:p-8

Border Radius

rounded-lg (buttons), rounded-xl (cards), rounded-2xl (sections)

Shadow

shadow-lg → shadow-xl (hover)

Layout Secimleri

Hero Section

#21 + #5

Split Layout (Sol %60 metin + Sag %40 slider) + Full-screen image slider kombinasyonu

Animated gradient background (#1 Smooth Shift) + Floating particles

Products Section

#61

Card-based Grid Layout - 3 column, image headers, hover lift, CTA buttons

Features Section

#21

Split Layout - Sol image + Floating stats card, Sag icerik + 2x2 feature grid

About Section

#1 + #21

Timeline mini (3 milestone) + Stats Grid (4 cards) - Dark gradient background

Certificates Section

#61

4-column card grid - Icon circles, centered text

CTA Section

#1

Split Form Layout - Sol icerik + Sag form card - Gradient background

Contact Section

#26 + #46

3-column contact cards + Full-width map with grayscale hover effect

Footer

#1

4-column classic - Company info, Quick links, Products, Contact - Dark bg

Section Sirasi

#6 (Urun Odakli): Hero → Products → Features → About → Certificates → CTA → Contact → Footer

Navigation & Mega Menu

Mega Menu Stili

#3 Icon Grid

3 sutun icon-headed grid, kategori bazli urun listesi, hover animasyonlu ikonlar

Header Ozellikleri

  • - Sticky header (shrink on scroll)
  • - Top bar (telefon, email, sosyal medya)
  • - Dark/Light mode toggle
  • - Glass morphism background (backdrop-blur)
  • - Mobile hamburger menu

Hover Efektleri

#1

Icon Weight

FontAwesome far → fas degisimi (light → solid)

Kullanim: Contact cards, feature icons, nav items

#2

Icon Scale

transform: scale(1.15) - Icon buyutme

Kullanim: Product cards, mega menu items

#6

Text Slide

translateX(8px) - Text saga kayma

Kullanim: Product card titles, CTA links

KURAL: Card sabit kalir, sadece icerik (icon, text, arrow) hareket eder. Card'a scale/translate uygulanmaz.

Animated Background

Hero Background

#1 Smooth Shift

background-size: 200% 200%;
animation: shift 15s ease infinite;
@keyframes shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

Floating Particles

#11 CSS-only particles

4 adet floating particle, farkli boyut ve animation-delay ile smooth hareket

Performans: GPU-accelerated (transform, opacity)

Leonardo.ai Gorsel Promptlari

hero-ibc-tank.jpg 1472x832

Industrial warehouse interior, rows of clean white IBC tanks (intermediate bulk containers) with blue metal cages, modern logistics facility, bright LED lighting from ceiling, concrete floor with safety markings, professional product photography style, Canon EOS R5 24-70mm f/2.8, commercial lighting setup, clean background, 8k quality, photorealistic

Model: Leonardo Phoenix Style: Product Photography
hero-metal-varil.jpg 1472x832

Stack of industrial steel drums in warehouse, blue and gray metal barrels with secure lids, organized storage facility, industrial environment, natural daylight from large windows, clean professional setting, product catalog style photography, Sony A7R IV 35mm f/1.8, shallow depth of field, subtle reflections on metal surface, 8k quality

Model: Leonardo Phoenix Style: Industrial
hero-plastik-varil.jpg 1472x832

Blue HDPE plastic drums lined up in modern warehouse, various sizes from 30L to 220L, chemical-resistant containers, clean industrial environment, soft diffused lighting, professional product arrangement, Nikon Z9 50mm f/1.4, crisp details, neutral gray background, catalog photography style, 8k quality

Model: Leonardo Phoenix Style: Product Photography
product-ibc-card.jpg 800x600

Single IBC tank product shot, white cubic container with galvanized steel cage, wooden pallet base, clean white studio background, soft box lighting from multiple angles, e-commerce product photography, Canon R5 100mm f/2.8 macro, minimal shadows, high contrast, packshot style, 8k quality

Model: Leonardo Phoenix Style: E-commerce
product-metal-card.jpg 800x600

Steel drum 200L with lid and locking ring, blue painted surface with subtle metallic sheen, industrial product photography, clean white background, professional studio lighting, detailed texture capture, Sony A7R V 90mm f/2.8, packshot composition, 8k quality

Model: Leonardo Phoenix Style: E-commerce
product-plastik-card.jpg 800x600

Blue HDPE plastic barrel 220L, tight-head drum design, UN certified container, clean product photography, gradient white to light gray background, soft reflections, professional lighting setup, Canon R5 85mm f/1.4, sharp focus throughout, 8k quality

Model: Leonardo Phoenix Style: E-commerce
features-factory.jpg 1024x768

Modern industrial facility exterior, clean manufacturing plant with company logo, green landscaping around building, blue sky with soft clouds, professional corporate architecture photography, drone perspective showing scale, DJI Mavic 3 Pro, golden hour lighting, corporate annual report style, 8k quality

Model: Leonardo Phoenix Style: Corporate

Fingerprint Kaydi 

{
  "version": "v1",
  "hash": "e7f3a2b9",
  "timestamp": "2026-01-07T15:30:00Z",
  "layouts": {
    "hero": "21+5 (Split + Slider)",
    "products": "61 (Card Grid)",
    "features": "21 (Split Layout)",
    "about": "1+21 (Timeline + Stats)",
    "certificates": "61 (Card Grid)",
    "cta": "1 (Split Form)",
    "contact": "26+46 (Cards + Map)",
    "footer": "1 (4-column)"
  },
  "colors": {
    "palette": "Green + Sky",
    "primary": "emerald-500 (#10b981)",
    "secondary": "sky-500 (#0ea5e9)",
    "gradient": "#4 + #5 (Mint Fresh + Sky Blue)"
  },
  "fonts": {
    "heading": "Outfit",
    "body": "Inter",
    "preset": "#12 (Modern kategori)"
  },
  "hover": ["#1 Icon Weight", "#2 Icon Scale", "#6 Text Slide"],
  "megaMenu": "#3 Icon Grid",
  "animatedBg": "#1 Smooth Shift + #11 Particles"
}

Teknik Notlar

Kullanilan Teknolojiler

  • Tailwind CSS v4 (CDN)
  • Alpine.js (interaktivite)
  • Swiper.js (slider)
  • AOS (scroll animasyonlar)
  • FontAwesome 6.5 (ikonlar)
  • Google Fonts (Inter + Outfit)

Responsive Breakpoints

  • sm: 640px
  • md: 768px
  • lg: 1024px
  • xl: 1280px
  • 2xl: 1536px

Dark Mode

localStorage ile tercih saklanir. Sistem tercihine gore varsayilan. class="dark" ile toggle.