Endüstriyel Ambalaj Kurumsal Web Sitesi - Modern Slider Hero
| Özellik | v1 | v2 (Yeni) |
|---|---|---|
| Hero Layout | #22 Split Layout | #5 Full-Screen Slider |
| Font Çifti | Manrope + Inter (#14) | Space Grotesk + DM Sans (#11) |
| Border Radius | rounded-none (keskin) | rounded-2xl (yumuşak) |
| Mega Menu | #1 Grid with Images | #4 Tabbed Mega Menu |
| Hover Efektleri | #2, #6, #8, #12 | #1, #9, #11, #16 |
| About Section | Stats + Image Stack | Timeline + Image Grid |
| Animated BG | Pattern Grid | #9 Gradient Mesh Morph |
| Section Sırası | Hero > Companies > Products... | Hero > Products > Companies... |
Space Grotesk
font-family: 'Space Grotesk'
DM Sans
font-family: 'DM Sans'
Swiper.js ile 3 slaytlı hero: IBC Tank, Plastik Bidon, Geri Dönüşüm. Fade geçiş, otomatik ilerleme.
Sol tarafta tab butonları, sağ tarafta tab içeriği. Alpine.js ile dinamik geçiş.
4 sütunlu grid, ribbon badge'leri (En Popüler, Geri Dönüşüm), hover efektleri.
Sol tarafta dikey timeline (1999, 2008, 2024), sağ tarafta 2x2 masonry görsel grid.
3 sütunlu grid, her şirket için gradient arka plan, floating circles.
FontAwesome far → fas geçişi. İkon hover'da dolgu kazanır.
.far → .fas (font-weight: 900)
Text renk değişimi + text-shadow ile glow efekti.
text-shadow: 0 0 20px rgba(...)
Üst ve alt border'ın soldan/sağdan çizilerek belirmesi.
::before, ::after pseudo elements
Background gradient'in hover'da kayması (background-position).
background-size: 200%, background-position shift
Hero ve Sustainability section'larında kullanıldı. 3 adet radial gradient, 20 saniyelik döngüde yavaşça hareket ediyor ve dönüyor. Kullanıcı dikkatini dağıtmadan dinamik hissiyat.
.animated-mesh::before {
background:
radial-gradient(circle at 20% 30%, rgba(2,132,199,0.3) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(14,165,233,0.2) 0%, transparent 50%),
radial-gradient(circle at 50% 50%, rgba(250,195,18,0.1) 0%, transparent 40%);
animation: meshMove 20s ease-in-out infinite;
}
Mantık: Endüstriyel ambalaj firması için ürünler ön planda. Ziyaretçi hemen ürünleri görüyor, sonra şirket yapısını öğreniyor, ardından hikaye ve sürdürülebilirlik.
Industrial photography of modern IBC tank production facility, rows of white 1000L IBC containers with metal cage frames, professional factory lighting, clean manufacturing environment, workers in safety gear operating machinery, morning sunlight through large windows, Canon EOS R5 24-70mm f/2.8, industrial editorial style, Kodak Portra 400 film emulation, subtle lens dust particles, sharp focus on foreground tanks with bokeh background, 8k quality
Professional industrial photograph of colorful HDPE plastic drums 30L to 200L arranged in organized warehouse, blue yellow red barrels, modern logistics center, forklift in background, LED overhead lighting, clean concrete floor, safety markings on ground, morning shift operations, Nikon Z9 35mm f/1.8, corporate documentary style, natural color grading, subtle film grain, depth of field, 8k resolution
Aerial drone photography of modern recycling facility with green sustainable technology, solar panels on roof, organized recycling bins, greenery around facility, eco-friendly industrial complex, morning golden hour light, DJI Mavic 3 Hasselblad, environmental documentary style, vibrant greens and earth tones, clean processing, 8k quality, sustainability theme
Product photography of single white 1000L IBC tank container with metal cage frame, clean white studio background, soft box lighting from multiple angles, sharp details of valve and cage structure, UN certification marking visible, professional packshot style, Canon R5 100mm macro, zero shadows on background, commercial product catalog style, 8k quality
Product photography of blue HDPE plastic drum 200L with screw cap, clean white studio background, professional lighting showing material texture, brand-new condition, reflective surface detail, commercial catalog style, Canon R5 85mm f/1.4, soft shadows, high-end product visualization, 8k quality
Product photography of steel metal barrel 200L industrial drum, blue painted with sealed lid, clean white studio background, showing texture of painted metal surface, slight reflections, industrial strength feeling, commercial catalog style, Canon R5 70mm, professional lighting, 8k quality
Close-up macro photography of white HDPE plastic granules pellets, pile of recycled plastic material, clean background, showing texture and uniformity of granules, soft lighting, material science aesthetic, Canon R5 100mm macro, shallow depth of field, scientific documentary style, 8k quality
Exterior photograph of modern industrial manufacturing facility in Gebze Turkey, large warehouse building with company signage, truck loading docks, organized parking, blue sky with white clouds, professional corporate architecture photography, morning light, DJI Mavic 3, clean and professional aesthetic, 8k quality
Portrait photograph of diverse industrial workers team in modern factory, wearing safety helmets and high-visibility vests, confident professional poses, industrial machinery in background, natural factory lighting, corporate team photography style, Canon R5 35mm f/1.4, shallow depth of field, warm and trustworthy atmosphere, 8k quality
Industrial photograph of automated production line for plastic containers, robotic arms and conveyor belts, modern manufacturing technology, blue LED indicators, clean factory floor, professional industrial photography, Canon R5 24mm f/2.8, wide angle showing scale of operations, technical documentation style, 8k quality
{
"hash": "vg-v2-space-grotesk-5-11-9-4",
"created": "2026-01-06T23:00:00+03:00",
"layouts": {
"hero": 5,
"mega_menu": 4,
"products": 61,
"companies": 106,
"about": 81,
"contact": 1,
"footer": "6-column-mega"
},
"colors": {
"palette": "Sky",
"gradient_number": 5,
"primary": "sky-600",
"primary_hover": "sky-700",
"accent": "#fac312"
},
"fonts": {
"preset_number": 11,
"heading": "Space Grotesk",
"body": "DM Sans"
},
"style": {
"border_radius": "rounded-2xl",
"button_radius": "rounded-xl",
"section_padding": "py-20 md:py-28 lg:py-36"
},
"hover_effects": [1, 9, 11, 16],
"animated_background": 9,
"section_order": [
"hero",
"products",
"companies",
"about",
"sustainability",
"cta",
"contact",
"footer"
]
}
Swiper.js: Hero slider için kullanıldı. Fade efekti, autoplay (6 saniye), pagination ve navigation.
Alpine.js: Mega menu tabs, dark mode toggle, mobile menu için kullanıldı.
AOS: Scroll animasyonları için. duration: 800ms, easing: ease-out-cubic, once: true.
Dark Mode: localStorage ile tercih kaydediliyor. Varsayılan: dark mode aktif.
Container: px-3 sm:px-6 md:px-8 lg:px-12 xl:px-16 2xl:px-20 (standart responsive padding).
Header: Transparent → solid on scroll. backdrop-blur-md + shadow-lg aktif.