WEBLEB
Startseite
Editor
Anmelden
Pro
Deutsch
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Ein Code von Metehan
219
Metehan
Im Editor öffnen
Veröffentlichen Sie Ihren Code
Empfohlen
18 May 2025
Ein Code von Mete
1 June 2025
CodePen Home CSS-Galerie mit unendlichem Scrollen
2 March 2025
Ein Code von Mr. Duck
HTML
Copy
<!DOCTYPE html> <html lang="tr"> <head><script src="https://static.readdy.ai/static/e.js"></script> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Huawei Türkiye - Teknoloji Yeniliği</title> <script src="https://cdn.tailwindcss.com/3.4.16"></script> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Open+Sans:wght@400;500;600&family=Pacifico&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.6.0/remixicon.min.css"> <style> :where([class^="ri-"])::before { content: "\f3c2"; } body { font-family: 'Open Sans', sans-serif; } h1, h2, h3, h4, h5, h6 { font-family: 'Montserrat', sans-serif; } .glass-card { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); } .feature-card:hover { transform: translateY(-8px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15); } .product-card:hover { transform: translateY(-8px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15); } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; background: #FF0000; border-radius: 50%; cursor: pointer; } .custom-checkbox:checked + label:before { background-color: #FF0000; border-color: #FF0000; } </style> <script>tailwind.config={theme:{extend:{colors:{primary:'#FF0000',secondary:'#007CFF'},borderRadius:{'none':'0px','sm':'4px',DEFAULT:'8px','md':'12px','lg':'16px','xl':'20px','2xl':'24px','3xl':'32px','full':'9999px','button':'8px'}}}}</script> </head> <body class="bg-gradient-to-b from-[#0F0F0F] to-[#1C1C1C] text-white min-h-screen"> <!-- Header/Navigation --> <header class="fixed top-0 left-0 w-full z-50 bg-[#0A0A0A] bg-opacity-95 backdrop-blur-md"> <div class="container mx-auto px-4 py-3 flex items-center justify-between"> <a href="#" class="text-2xl font-bold text-white font-['Montserrat']"> <span class="text-primary">HUAWEI</span> </a> <nav class="hidden md:flex items-center space-x-8"> <a href="#" class="text-white hover:text-primary transition-colors duration-300 font-medium">Ana Sayfa</a> <div class="relative group"> <a href="#" class="text-white hover:text-primary transition-colors duration-300 font-medium flex items-center"> Ürünler <i class="ri-arrow-down-s-line ml-1"></i> </a> <div class="absolute top-full left-0 mt-2 w-64 bg-[#1A1A1A] rounded-lg shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-50"> <div class="p-4"> <a href="#" class="flex items-center p-3 hover:bg-[#252525] rounded-lg group/item"> <i class="ri-smartphone-line text-primary mr-3"></i> <div> <h4 class="font-medium">Akıllı Telefonlar</h4> <p class="text-sm text-gray-400">P60 Pro, Nova Serisi</p> </div> </a> <a href="#" class="flex items-center p-3 hover:bg-[#252525] rounded-lg group/item"> <i class="ri-laptop-line text-primary mr-3"></i> <div> <h4 class="font-medium">Dizüstü Bilgisayarlar</h4> <p class="text-sm text-gray-400">MateBook Serisi</p> </div> </a> <a href="#" class="flex items-center p-3 hover:bg-[#252525] rounded-lg group/item"> <i class="ri-tablet-line text-primary mr-3"></i> <div> <h4 class="font-medium">Tabletler</h4> <p class="text-sm text-gray-400">MatePad Serisi</p> </div> </a> <a href="#" class="flex items-center p-3 hover:bg-[#252525] rounded-lg group/item"> <i class="ri-watch-line text-primary mr-3"></i> <div> <h4 class="font-medium">Giyilebilir Teknoloji</h4> <p class="text-sm text-gray-400">Watch GT, FreeBuds</p> </div> </a> </div> </div> </div> <div class="relative group"> <a href="#" class="text-white hover:text-primary transition-colors duration-300 font-medium flex items-center"> Hizmetler <i class="ri-arrow-down-s-line ml-1"></i> </a> <div class="absolute top-full left-0 mt-2 w-72 bg-[#1A1A1A] rounded-lg shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-50"> <div class="p-4"> <a href="#" class="flex items-center p-3 hover:bg-[#252525] rounded-lg group/item"> <i class="ri-building-line text-primary mr-3"></i> <div> <h4 class="font-medium">Kurumsal Çözümler</h4> <p class="text-sm text-gray-400">40+ Ülkede Kurumsal Hizmet</p> </div> </a> <a href="#" class="flex items-center p-3 hover:bg-[#252525] rounded-lg group/item"> <i class="ri-cloud-line text-primary mr-3"></i> <div> <h4 class="font-medium">Cloud Hizmetleri</h4> <p class="text-sm text-gray-400">Global Veri Merkezi Ağı</p> </div> </a> <a href="#" class="flex items-center p-3 hover:bg-[#252525] rounded-lg group/item"> <i class="ri-database-2-line text-primary mr-3"></i> <div> <h4 class="font-medium">Veri Çözümleri</h4> <p class="text-sm text-gray-400">Güvenli Veri Yönetimi</p> </div> </a> </div> </div> </div> <div class="relative group"> <a href="#" class="text-white hover:text-primary transition-colors duration-300 font-medium flex items-center"> Destek <i class="ri-arrow-down-s-line ml-1"></i> </a> <div class="absolute top-full left-0 mt-2 w-64 bg-[#1A1A1A] rounded-lg shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-50"> <div class="p-4"> <a href="#" class="flex items-center p-3 hover:bg-[#252525] rounded-lg group/item"> <i class="ri-customer-service-2-line text-primary mr-3"></i> <div> <h4 class="font-medium">7/24 Canlı Destek</h4> <p class="text-sm text-gray-400">Anında Teknik Yardım</p> </div> </a> <a href="#" class="flex items-center p-3 hover:bg-[#252525] rounded-lg group/item"> <i class="ri-tools-line text-primary mr-3"></i> <div> <h4 class="font-medium">Teknik Servis</h4> <p class="text-sm text-gray-400">Profesyonel Onarım</p> </div> </a> <a href="#" class="flex items-center p-3 hover:bg-[#252525] rounded-lg group/item"> <i class="ri-questionnaire-line text-primary mr-3"></i> <div> <h4 class="font-medium">SSS</h4> <p class="text-sm text-gray-400">Sık Sorulan Sorular</p> </div> </a> </div> </div> </div> <div class="relative group"> <a href="#" class="text-white hover:text-primary transition-colors duration-300 font-medium flex items-center"> Kurumsal <i class="ri-arrow-down-s-line ml-1"></i> </a> <div class="absolute top-full right-0 mt-2 w-72 bg-[#1A1A1A] rounded-lg shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 z-50"> <div class="p-4"> <a href="#" class="flex items-center p-3 hover:bg-[#252525] rounded-lg group/item"> <i class="ri-award-line text-primary mr-3"></i> <div> <h4 class="font-medium">Şirket Profili</h4> <p class="text-sm text-gray-400">30+ Yıllık Deneyim</p> </div> </a> <a href="#" class="flex items-center p-3 hover:bg-[#252525] rounded-lg group/item"> <i class="ri-presentation-line text-primary mr-3"></i> <div> <h4 class="font-medium">Yatırımcı İlişkileri</h4> <p class="text-sm text-gray-400">Finansal Raporlar</p> </div> </a> <a href="#" class="flex items-center p-3 hover:bg-[#252525] rounded-lg group/item"> <i class="ri-group-line text-primary mr-3"></i> <div> <h4 class="font-medium">Kariyer</h4> <p class="text-sm text-gray-400">İş Fırsatları</p> </div> </a> </div> </div> </div> </nav> <div class="flex items-center space-x-6"> <div class="w-8 h-8 flex items-center justify-center text-white hover:text-primary transition-colors duration-300"> <i class="ri-search-line ri-lg"></i> </div> <div class="w-8 h-8 flex items-center justify-center text-white hover:text-primary transition-colors duration-300"> <i class="ri-global-line ri-lg"></i> </div> <div class="md:hidden w-8 h-8 flex items-center justify-center text-white hover:text-primary transition-colors duration-300"> <i class="ri-menu-line ri-lg"></i> </div> </div> </div> </header> <!-- Hero Section --> <section class="relative w-full min-h-screen flex items-center justify-center pt-16" style="background-image: url('https://readdy.ai/api/search-image?query=futuristic%20technology%20background%20with%20soft%20glowing%20particles%20and%20light%20streaks%2C%20dark%20gradient%20from%20black%20to%20dark%20gray%2C%20abstract%20digital%20network%20concept%2C%20high-tech%20minimalist%20design%20with%20subtle%20red%20accent%20lights%2C%20perfect%20for%20Huawei%20brand%20hero%20section&width=1920&height=1080&seq=hero1&orientation=landscape'); background-size: cover; background-position: center;"> <div class="absolute inset-0 bg-gradient-to-r from-[#0A0A0A] to-transparent opacity-80"></div> <div class="container mx-auto px-4 z-10 w-full"> <div class="max-w-3xl mx-auto md:mx-0"> <h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight">Geleceğin Teknolojisi <span class="text-primary">Bugün</span> Elinizde</h1> <p class="text-lg md:text-xl mb-8 text-gray-300">Huawei ile sınırları aşan yenilikçi teknolojiler ve üstün performans deneyimini keşfedin. Akıllı yaşamın merkezinde siz olun.</p> <div class="flex flex-col sm:flex-row gap-4"> <a href="#" class="bg-primary hover:bg-opacity-90 text-white font-medium py-3 px-8 !rounded-button whitespace-nowrap transition-all duration-300">Yeni Ürünleri Keşfet</a> <a href="#" class="glass-card text-white font-medium py-3 px-8 !rounded-button whitespace-nowrap transition-all duration-300 border border-white/10 hover:border-white/30">Daha Fazla Bilgi</a> </div> </div> </div> <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce"> <div class="w-10 h-10 flex items-center justify-center text-white"> <i class="ri-arrow-down-line ri-2x"></i> </div> </div> </section> <!-- Latest Products Section --> <section class="py-20 bg-[#0F0F0F]"> <div class="container mx-auto px-4"> <div class="text-center mb-16"> <h2 class="text-3xl md:text-4xl font-bold mb-4">En Yeni Ürünlerimiz</h2> <p class="text-gray-400 max-w-2xl mx-auto">Huawei'in en son teknoloji ürünleriyle tanışın. Yenilikçi özellikler ve üstün performans bir arada.</p> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <!-- Product Card 1 --> <div class="product-card glass-card rounded-lg overflow-hidden transition-all duration-300"> <div class="h-64 overflow-hidden"> <img src="https://readdy.ai/api/search-image?query=modern%20Huawei%20smartphone%20with%20sleek%20design%20on%20dark%20background%2C%20professional%20product%20photography%20with%20subtle%20lighting%2C%20minimalist%20tech%20aesthetic%2C%20high-end%20device%20showcase%20with%20clean%20background&width=600&height=400&seq=prod1&orientation=landscape" alt="Huawei P60 Pro" class="w-full h-full object-cover object-top"> </div> <div class="p-6"> <h3 class="text-xl font-bold mb-2">Huawei P60 Pro</h3> <p class="text-gray-400 mb-4">Ultra Görüş Kamera Sistemi ile fotoğrafçılıkta yeni bir çağ başlatın.</p> <div class="flex justify-between items-center"> <span class="text-primary font-bold">24.999 ₺</span> <a href="#" class="bg-[#1A1A1A] hover:bg-[#252525] text-white py-2 px-4 !rounded-button whitespace-nowrap transition-all duration-300">İncele</a> </div> </div> </div> <!-- Product Card 2 --> <div class="product-card glass-card rounded-lg overflow-hidden transition-all duration-300"> <div class="h-64 overflow-hidden"> <img src="https://readdy.ai/api/search-image?query=modern%20Huawei%20smartwatch%20with%20elegant%20design%20on%20dark%20background%2C%20professional%20product%20photography%20with%20subtle%20lighting%2C%20minimalist%20tech%20aesthetic%2C%20high-end%20device%20showcase%20with%20clean%20background&width=600&height=400&seq=prod2&orientation=landscape" alt="Huawei Watch GT 4" class="w-full h-full object-cover object-top"> </div> <div class="p-6"> <h3 class="text-xl font-bold mb-2">Huawei Watch GT 4</h3> <p class="text-gray-400 mb-4">Zarif tasarım ve gelişmiş sağlık izleme özellikleriyle tamamlayıcı aksesuar.</p> <div class="flex justify-between items-center"> <span class="text-primary font-bold">7.499 ₺</span> <a href="#" class="bg-[#1A1A1A] hover:bg-[#252525] text-white py-2 px-4 !rounded-button whitespace-nowrap transition-all duration-300">İncele</a> </div> </div> </div> <!-- Product Card 3 --> <div class="product-card glass-card rounded-lg overflow-hidden transition-all duration-300"> <div class="h-64 overflow-hidden"> <img src="https://readdy.ai/api/search-image?query=modern%20Huawei%20laptop%20with%20sleek%20design%20on%20dark%20background%2C%20professional%20product%20photography%20with%20subtle%20lighting%2C%20minimalist%20tech%20aesthetic%2C%20high-end%20device%20showcase%20with%20clean%20background&width=600&height=400&seq=prod3&orientation=landscape" alt="Huawei MateBook X Pro" class="w-full h-full object-cover object-top"> </div> <div class="p-6"> <h3 class="text-xl font-bold mb-2">Huawei MateBook X Pro</h3> <p class="text-gray-400 mb-4">Ultra ince tasarım ve güçlü performansla profesyonel iş deneyimi.</p> <div class="flex justify-between items-center"> <span class="text-primary font-bold">39.999 ₺</span> <a href="#" class="bg-[#1A1A1A] hover:bg-[#252525] text-white py-2 px-4 !rounded-button whitespace-nowrap transition-all duration-300">İncele</a> </div> </div> </div> </div> <div class="text-center mt-12"> <a href="#" class="inline-flex items-center text-primary font-medium hover:text-secondary transition-colors duration-300"> Tüm Ürünleri Görüntüle <i class="ri-arrow-right-line ml-2"></i> </a> </div> </div> </section> <!-- Features Section --> <section class="py-20 bg-[#1C1C1C]"> <div class="container mx-auto px-4"> <div class="text-center mb-16"> <h2 class="text-3xl md:text-4xl font-bold mb-4">Üstün Teknoloji</h2> <p class="text-gray-400 max-w-2xl mx-auto">Huawei'in yenilikçi teknolojileri ile hayatınızı kolaylaştırın ve geleceği bugünden yaşayın.</p> </div> <!-- Feature Row 1 --> <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center mb-20"> <div class="order-2 md:order-1"> <h3 class="text-2xl font-bold mb-4">Ultra Görüş Kamera Sistemi</h3> <p class="text-gray-400 mb-6">XMAGE görüntü teknolojisi ile donatılmış kamera sistemi, gece çekimlerinde bile olağanüstü netlik ve detay sunar. 50MP ana kamera, 13MP ultra geniş açı ve 48MP telefoto lens ile profesyonel fotoğrafçılık deneyimi.</p> <ul class="space-y-3"> <li class="flex items-start"> <div class="w-5 h-5 flex items-center justify-center text-primary mt-1"> <i class="ri-check-line"></i> </div> <span class="ml-3 text-gray-300">50MP Ultra Aydınlık Ana Kamera</span> </li> <li class="flex items-start"> <div class="w-5 h-5 flex items-center justify-center text-primary mt-1"> <i class="ri-check-line"></i> </div> <span class="ml-3 text-gray-300">Yapay Zeka Destekli Gece Modu</span> </li> <li class="flex items-start"> <div class="w-5 h-5 flex items-center justify-center text-primary mt-1"> <i class="ri-check-line"></i> </div> <span class="ml-3 text-gray-300">200x Dijital Zoom Kapasitesi</span> </li> </ul> </div> <div class="order-1 md:order-2"> <img src="https://readdy.ai/api/search-image?query=Huawei%20smartphone%20camera%20system%20close-up%20with%20professional%20lens%20detail%2C%20dark%20elegant%20background%20with%20subtle%20red%20accent%20lighting%2C%20high-tech%20camera%20module%20showcase%2C%20premium%20product%20photography&width=600&height=400&seq=feat1&orientation=landscape" alt="Ultra Görüş Kamera Sistemi" class="w-full h-auto rounded-lg shadow-2xl"> </div> </div> <!-- Feature Row 2 --> <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center mb-20"> <div> <img src="https://readdy.ai/api/search-image?query=Huawei%20ecosystem%20devices%20connected%20together%2C%20smart%20home%20integration%20concept%2C%20multiple%20devices%20showing%20seamless%20connectivity%2C%20dark%20elegant%20background%20with%20subtle%20blue%20accent%20lighting%2C%20premium%20tech%20photography&width=600&height=400&seq=feat2&orientation=landscape" alt="Akıllı Ekosistem" class="w-full h-auto rounded-lg shadow-2xl"> </div> <div> <h3 class="text-2xl font-bold mb-4">Akıllı Ekosistem</h3> <p class="text-gray-400 mb-6">Huawei cihazları arasında kesintisiz bağlantı ve veri paylaşımı. Tek dokunuşla dosya aktarımı, çoklu ekran işbirliği ve cihazlar arası sorunsuz geçiş deneyimi.</p> <ul class="space-y-3"> <li class="flex items-start"> <div class="w-5 h-5 flex items-center justify-center text-primary mt-1"> <i class="ri-check-line"></i> </div> <span class="ml-3 text-gray-300">Çoklu Ekran İşbirliği</span> </li> <li class="flex items-start"> <div class="w-5 h-5 flex items-center justify-center text-primary mt-1"> <i class="ri-check-line"></i> </div> <span class="ml-3 text-gray-300">Huawei Share Hızlı Dosya Transferi</span> </li> <li class="flex items-start"> <div class="w-5 h-5 flex items-center justify-center text-primary mt-1"> <i class="ri-check-line"></i> </div> <span class="ml-3 text-gray-300">Akıllı Ev Kontrolü</span> </li> </ul> </div> </div> <!-- Feature Row 3 --> <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center"> <div class="order-2 md:order-1"> <h3 class="text-2xl font-bold mb-4">Süper Hızlı Şarj</h3> <p class="text-gray-400 mb-6">100W Huawei SuperCharge teknolojisi ile dakikalar içinde saatler süren kullanım. Gelişmiş batarya ömrü ve akıllı güç yönetimi ile her zaman hazır.</p> <ul class="space-y-3"> <li class="flex items-start"> <div class="w-5 h-5 flex items-center justify-center text-primary mt-1"> <i class="ri-check-line"></i> </div> <span class="ml-3 text-gray-300">100W Hızlı Şarj Desteği</span> </li> <li class="flex items-start"> <div class="w-5 h-5 flex items-center justify-center text-primary mt-1"> <i class="ri-check-line"></i> </div> <span class="ml-3 text-gray-300">20 Dakikada %60 Şarj</span> </li> <li class="flex items-start"> <div class="w-5 h-5 flex items-center justify-center text-primary mt-1"> <i class="ri-check-line"></i> </div> <span class="ml-3 text-gray-300">Akıllı Batarya Ömrü Optimizasyonu</span> </li> </ul> </div> <div class="order-1 md:order-2"> <img src="https://readdy.ai/api/search-image?query=Huawei%20supercharge%20technology%20visualization%2C%20fast%20charging%20concept%20with%20energy%20flow%20visualization%2C%20smartphone%20charging%20with%20dynamic%20red%20energy%20streaks%2C%20dark%20elegant%20background%2C%20high-tech%20product%20photography&width=600&height=400&seq=feat3&orientation=landscape" alt="Süper Hızlı Şarj" class="w-full h-auto rounded-lg shadow-2xl"> </div> </div> </div> </section> <!-- Corporate Services --> <section class="py-20 bg-[#0F0F0F] relative overflow-hidden"> <div class="container mx-auto px-4"> <div class="text-center mb-16"> <h2 class="text-3xl md:text-4xl font-bold mb-4">Kurumsal Hizmetlerimiz</h2> <p class="text-gray-400 max-w-2xl mx-auto">Global ölçekte 40'tan fazla ülkede kurumsal çözümler ve profesyonel hizmetler sunuyoruz.</p> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16"> <!-- Service Card 1 --> <div class="glass-card rounded-lg p-8"> <div class="w-16 h-16 flex items-center justify-center text-primary mb-6 bg-[#1A1A1A] rounded-full"> <i class="ri-building-4-line ri-2x"></i> </div> <h3 class="text-xl font-bold mb-3">Kurumsal Çözümler</h3> <p class="text-gray-400">Fortune 500 şirketleri dahil binlerce kurumsal müşteriye özel çözümler sunuyoruz.</p> <ul class="mt-4 space-y-2"> <li class="flex items-center text-gray-300"> <i class="ri-check-line text-primary mr-2"></i> Amerika Birleşik Devletleri </li> <li class="flex items-center text-gray-300"> <i class="ri-check-line text-primary mr-2"></i> Avrupa Birliği </li> <li class="flex items-center text-gray-300"> <i class="ri-check-line text-primary mr-2"></i> Asya Pasifik </li> </ul> </div> <!-- Service Card 2 --> <div class="glass-card rounded-lg p-8"> <div class="w-16 h-16 flex items-center justify-center text-primary mb-6 bg-[#1A1A1A] rounded-full"> <i class="ri-customer-service-2-line ri-2x"></i> </div> <h3 class="text-xl font-bold mb-3">7/24 Teknik Destek</h3> <p class="text-gray-400">Profesyonel teknik ekiplerimiz ile kesintisiz destek hizmeti sağlıyoruz.</p> <ul class="mt-4 space-y-2"> <li class="flex items-center text-gray-300"> <i class="ri-check-line text-primary mr-2"></i> Canlı Destek Hizmeti </li> <li class="flex items-center text-gray-300"> <i class="ri-check-line text-primary mr-2"></i> Uzman Teknik Ekip </li> <li class="flex items-center text-gray-300"> <i class="ri-check-line text-primary mr-2"></i> Yerinde Servis </li> </ul> </div> <!-- Service Card 3 --> <div class="glass-card rounded-lg p-8"> <div class="w-16 h-16 flex items-center justify-center text-primary mb-6 bg-[#1A1A1A] rounded-full"> <i class="ri-cloud-line ri-2x"></i> </div> <h3 class="text-xl font-bold mb-3">Cloud Hizmetleri</h3> <p class="text-gray-400">Global veri merkezi ağımız ile güvenli ve hızlı cloud çözümleri.</p> <ul class="mt-4 space-y-2"> <li class="flex items-center text-gray-300"> <i class="ri-check-line text-primary mr-2"></i> Veri Depolama </li> <li class="flex items-center text-gray-300"> <i class="ri-check-line text-primary mr-2"></i> Yedekleme </li> <li class="flex items-center text-gray-300"> <i class="ri-check-line text-primary mr-2"></i> Felaket Kurtarma </li> </ul> </div> </div> <!-- Corporate Video Section --> <div class="mt-20"> <div class="text-center mb-16"> <h2 class="text-3xl md:text-4xl font-bold mb-4">Kurumsal Hikayemiz</h2> <p class="text-gray-400 max-w-2xl mx-auto">30 yılı aşkın süredir teknoloji dünyasına yön veren yolculuğumuz.</p> </div> <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center"> <div> <img src="https://readdy.ai/api/search-image?query=modern%20corporate%20office%20building%20interior%20with%20advanced%20technology%20displays%20and%20meeting%20rooms%2C%20professional%20business%20environment%20with%20Huawei%20branding%2C%20elegant%20and%20sophisticated%20workspace%20design&width=600&height=400&seq=corp1&orientation=landscape" alt="Huawei Headquarters" class="w-full h-auto rounded-lg shadow-2xl"> </div> <div> <h3 class="text-2xl font-bold mb-4">Global Vizyonumuz</h3> <p class="text-gray-400 mb-6">1987'den bu yana, teknoloji dünyasında öncü olmak için çalışıyoruz. 170'ten fazla ülkede faaliyet gösteren global bir teknoloji lideri olarak, sürdürülebilir bir dijital dünya için çalışıyoruz.</p> <ul class="space-y-4"> <li class="flex items-start"> <div class="w-5 h-5 flex items-center justify-center text-primary mt-1"> <i class="ri-check-line"></i> </div> <span class="ml-3 text-gray-300">194,000+ Çalışan</span> </li> <li class="flex items-start"> <div class="w-5 h-5 flex items-center justify-center text-primary mt-1"> <i class="ri-check-line"></i> </div> <span class="ml-3 text-gray-300">170+ Ülkede Faaliyet</span> </li> <li class="flex items-start"> <div class="w-5 h-5 flex items-center justify-center text-primary mt-1"> <i class="ri-check-line"></i> </div> <span class="ml-3 text-gray-300">Yıllık 15%+ AR-GE Yatırımı</span> </li> </ul> </div> </div> </div> </div> </section> <!-- Innovation Showcase --> <section class="py-20 bg-[#1C1C1C] relative overflow-hidden"> <div class="absolute top-0 left-0 w-full h-full opacity-10"> <div class="absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-primary blur-[100px]"></div> <div class="absolute bottom-1/3 right-1/4 w-80 h-80 rounded-full bg-secondary blur-[120px]"></div> </div> <div class="container mx-auto px-4 relative z-10"> <div class="text-center mb-16"> <h2 class="text-3xl md:text-4xl font-bold mb-4">Yenilikçi Teknolojiler</h2> <p class="text-gray-400 max-w-2xl mx-auto">Huawei'in öncü AR/VR, yapay zeka ve 5G teknolojileri ile geleceğin dünyasını bugünden deneyimleyin.</p> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <!-- Innovation Card 1 --> <div class="feature-card glass-card rounded-lg p-8 transition-all duration-300"> <div class="w-16 h-16 flex items-center justify-center text-primary mb-6 bg-[#1A1A1A] rounded-full"> <i class="ri-ai-generate ri-2x"></i> </div> <h3 class="text-xl font-bold mb-3">Yapay Zeka</h3> <p class="text-gray-400 mb-4">Kirin AI işlemci ile cihazınız öğrenir, adapte olur ve ihtiyaçlarınızı öngörür. Kamera optimizasyonundan pil yönetimine kadar her alanda akıllı destek.</p> <a href="#" class="inline-flex items-center text-primary font-medium hover:text-secondary transition-colors duration-300"> Daha Fazla <i class="ri-arrow-right-line ml-2"></i> </a> </div> <!-- Innovation Card 2 --> <div class="feature-card glass-card rounded-lg p-8 transition-all duration-300"> <div class="w-16 h-16 flex items-center justify-center text-primary mb-6 bg-[#1A1A1A] rounded-full"> <i class="ri-base-station-line ri-2x"></i> </div> <h3 class="text-xl font-bold mb-3">5G Teknolojisi</h3> <p class="text-gray-400 mb-4">Ultra hızlı bağlantı ve düşük gecikme süresi ile kesintisiz iletişim. Gelişmiş 5G modem ile her yerde yüksek hızlı internet erişimi.</p> <a href="#" class="inline-flex items-center text-primary font-medium hover:text-secondary transition-colors duration-300"> Daha Fazla <i class="ri-arrow-right-line ml-2"></i> </a> </div> <!-- Innovation Card 3 --> <div class="feature-card glass-card rounded-lg p-8 transition-all duration-300"> <div class="w-16 h-16 flex items-center justify-center text-primary mb-6 bg-[#1A1A1A] rounded-full"> <i class="ri-augmented-reality-line ri-2x"></i> </div> <h3 class="text-xl font-bold mb-3">AR/VR Deneyimi</h3> <p class="text-gray-400 mb-4">Artırılmış ve sanal gerçeklik teknolojileri ile yeni boyutlar keşfedin. Oyundan eğitime, alışverişten sanal toplantılara kadar geniş kullanım alanı.</p> <a href="#" class="inline-flex items-center text-primary font-medium hover:text-secondary transition-colors duration-300"> Daha Fazla <i class="ri-arrow-right-line ml-2"></i> </a> </div> </div> </div> </section> <!-- Testimonials Section --> <section class="py-20 bg-[#1C1C1C]"> <div class="container mx-auto px-4"> <div class="text-center mb-16"> <h2 class="text-3xl md:text-4xl font-bold mb-4">Kullanıcı Deneyimleri</h2> <p class="text-gray-400 max-w-2xl mx-auto">Huawei kullanıcılarının gerçek deneyimleri ve yorumları.</p> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <!-- Testimonial 1 --> <div class="glass-card rounded-lg p-8"> <div class="flex items-center mb-6"> <div class="text-primary"> <i class="ri-star-fill"></i> <i class="ri-star-fill"></i> <i class="ri-star-fill"></i> <i class="ri-star-fill"></i> <i class="ri-star-fill"></i> </div> </div> <p class="text-gray-300 mb-6">"Huawei P60 Pro'nun kamera performansı gerçekten inanılmaz. Gece çekimlerinde bile profesyonel kalitede fotoğraflar çekebiliyorum. Batarya ömrü de bir günü rahatça çıkarıyor."</p> <div class="flex items-center"> <div class="w-12 h-12 bg-[#2A2A2A] rounded-full flex items-center justify-center text-primary"> <i class="ri-user-3-line ri-lg"></i> </div> <div class="ml-4"> <h4 class="font-bold">Mehmet Yılmaz</h4> <p class="text-gray-500 text-sm">Fotoğrafçı</p> </div> </div> </div> <!-- Testimonial 2 --> <div class="glass-card rounded-lg p-8"> <div class="flex items-center mb-6"> <div class="text-primary"> <i class="ri-star-fill"></i> <i class="ri-star-fill"></i> <i class="ri-star-fill"></i> <i class="ri-star-fill"></i> <i class="ri-star-fill"></i> </div> </div> <p class="text-gray-300 mb-6">"MateBook X Pro ile iş verimliliğim arttı. İnce tasarımı, uzun pil ömrü ve güçlü performansı ile her yerde çalışabiliyorum. Ekran kalitesi ve klavye hissiyatı mükemmel."</p> <div class="flex items-center"> <div class="w-12 h-12 bg-[#2A2A2A] rounded-full flex items-center justify-center text-primary"> <i class="ri-user-3-line ri-lg"></i> </div> <div class="ml-4"> <h4 class="font-bold">Ayşe Demir</h4> <p class="text-gray-500 text-sm">Yazılım Mühendisi</p> </div> </div> </div> <!-- Testimonial 3 --> <div class="glass-card rounded-lg p-8"> <div class="flex items-center mb-6"> <div class="text-primary"> <i class="ri-star-fill"></i> <i class="ri-star-fill"></i> <i class="ri-star-fill"></i> <i class="ri-star-fill"></i> <i class="ri-star-half-fill"></i> </div> </div> <p class="text-gray-300 mb-6">"Watch GT 4 ile spor ve sağlık takibim çok kolaylaştı. Uyku analizi ve kalp ritmi ölçümleri oldukça doğru. Şık tasarımı ile günlük kullanımda da çok beğeniliyorum."</p> <div class="flex items-center"> <div class="w-12 h-12 bg-[#2A2A2A] rounded-full flex items-center justify-center text-primary"> <i class="ri-user-3-line ri-lg"></i> </div> <div class="ml-4"> <h4 class="font-bold">Emre Kaya</h4> <p class="text-gray-500 text-sm">Fitness Eğitmeni</p> </div> </div> </div> </div> </div> </section> <!-- Newsletter Section --> <section class="py-20 bg-[#0F0F0F] relative overflow-hidden"> <div class="absolute top-0 left-0 w-full h-full opacity-10"> <div class="absolute top-1/3 right-1/3 w-72 h-72 rounded-full bg-primary blur-[100px]"></div> </div> <div class="container mx-auto px-4 relative z-10"> <div class="max-w-3xl mx-auto text-center"> <h2 class="text-3xl md:text-4xl font-bold mb-4">Yeniliklerden Haberdar Olun</h2> <p class="text-gray-400 mb-8">En yeni Huawei ürünleri, teknolojik gelişmeler ve özel teklifler hakkında bilgi almak için abone olun.</p> <form class="flex flex-col sm:flex-row gap-4 max-w-xl mx-auto"> <input type="email" placeholder="E-posta adresiniz" class="flex-grow bg-[#1A1A1A] border border-[#333] text-white px-4 py-3 rounded-button focus:outline-none focus:border-primary"> <button type="submit" class="bg-primary hover:bg-opacity-90 text-white font-medium py-3 px-8 !rounded-button whitespace-nowrap transition-all duration-300">Abone Ol</button> </form> <p class="text-gray-500 text-sm mt-4">Gizlilik politikamıza göre bilgileriniz güvende. İstediğiniz zaman abonelikten çıkabilirsiniz.</p> </div> </div> </section> <!-- Footer --> <footer class="bg-[#0A0A0A] pt-16 pb-8"> <div class="container mx-auto px-4"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8 mb-12"> <div class="lg:col-span-2"> <a href="#" class="text-2xl font-bold text-white font-['Montserrat'] mb-6 inline-block"> <span class="text-primary">HUAWEI</span> </a> <p class="text-gray-400 mb-6">Huawei, yenilikçi teknolojileri ve üstün kaliteli ürünleriyle hayatınızı kolaylaştırmak için çalışıyor. Akıllı telefonlardan giyilebilir teknolojilere, dizüstü bilgisayarlardan ağ çözümlerine kadar geniş bir ürün yelpazesi sunuyoruz.</p> <div class="flex space-x-4"> <a href="#" class="w-10 h-10 flex items-center justify-center text-gray-400 hover:text-white bg-[#1A1A1A] rounded-full transition-colors duration-300"> <i class="ri-facebook-fill"></i> </a> <a href="#" class="w-10 h-10 flex items-center justify-center text-gray-400 hover:text-white bg-[#1A1A1A] rounded-full transition-colors duration-300"> <i class="ri-twitter-x-fill"></i> </a> <a href="#" class="w-10 h-10 flex items-center justify-center text-gray-400 hover:text-white bg-[#1A1A1A] rounded-full transition-colors duration-300"> <i class="ri-instagram-fill"></i> </a> <a href="#" class="w-10 h-10 flex items-center justify-center text-gray-400 hover:text-white bg-[#1A1A1A] rounded-full transition-colors duration-300"> <i class="ri-youtube-fill"></i> </a> </div> </div> <div> <h4 class="text-lg font-bold mb-6">Ürünler</h4> <ul class="space-y-3"> <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Akıllı Telefonlar</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Tabletler</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Dizüstü Bilgisayarlar</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Akıllı Saatler</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Kulaklıklar</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Akıllı Ev</a></li> </ul> </div> <div> <h4 class="text-lg font-bold mb-6">Destek</h4> <ul class="space-y-3"> <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Servis Merkezleri</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Garanti Bilgileri</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Yazılım Güncellemeleri</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Sık Sorulan Sorular</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Kullanım Kılavuzları</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">İletişim</a></li> </ul> </div> <div> <h4 class="text-lg font-bold mb-6">Kurumsal</h4> <ul class="space-y-3"> <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Hakkımızda</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Haberler</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Kariyer</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Sürdürülebilirlik</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Yatırımcı İlişkileri</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Tedarikçiler</a></li> </ul> </div> </div> <div class="border-t border-[#333] pt-8"> <div class="flex flex-col md:flex-row justify-between items-center"> <p class="text-gray-500 mb-4 md:mb-0">© 2025 Huawei Technologies Co., Ltd. Tüm hakları saklıdır.</p> <div class="flex flex-wrap gap-4"> <a href="#" class="text-gray-500 hover:text-white transition-colors duration-300 text-sm">Gizlilik Politikası</a> <a href="#" class="text-gray-500 hover:text-white transition-colors duration-300 text-sm">Kullanım Koşulları</a> <a href="#" class="text-gray-500 hover:text-white transition-colors duration-300 text-sm">Çerez Politikası</a> <a href="#" class="text-gray-500 hover:text-white transition-colors duration-300 text-sm">Yasal Bildirimler</a> </div> </div> </div> </div> </footer> <!-- Mobile Menu (Hidden by default) --> <div id="mobile-menu" class="fixed inset-0 bg-[#0A0A0A] z-50 transform translate-x-full transition-transform duration-300 ease-in-out"> <div class="container mx-auto px-4 py-6 h-full flex flex-col"> <div class="flex justify-between items-center mb-8"> <a href="#" class="text-2xl font-bold text-white font-['Montserrat']"> <span class="text-primary">HUAWEI</span> </a> <button id="close-menu" class="w-10 h-10 flex items-center justify-center text-white"> <i class="ri-close-line ri-2x"></i> </button> </div> <nav class="flex-grow"> <ul class="space-y-6"> <li><a href="#" class="text-white text-xl font-medium block py-2">Ana Sayfa</a></li> <li><a href="#" class="text-white text-xl font-medium block py-2">Ürünler</a></li> <li><a href="#" class="text-white text-xl font-medium block py-2">Hizmetler</a></li> <li><a href="#" class="text-white text-xl font-medium block py-2">Destek</a></li> <li><a href="#" class="text-white text-xl font-medium block py-2">Kurumsal</a></li> </ul> </nav> <div class="mt-auto"> <div class="flex space-x-4 mb-6"> <a href="#" class="w-10 h-10 flex items-center justify-center text-gray-400 hover:text-white bg-[#1A1A1A] rounded-full transition-colors duration-300"> <i class="ri-facebook-fill"></i> </a> <a href="#" class="w-10 h-10 flex items-center justify-center text-gray-400 hover:text-white bg-[#1A1A1A] rounded-full transition-colors duration-300"> <i class="ri-twitter-x-fill"></i> </a> <a href="#" class="w-10 h-10 flex items-center justify-center text-gray-400 hover:text-white bg-[#1A1A1A] rounded-full transition-colors duration-300"> <i class="ri-instagram-fill"></i> </a> <a href="#" class="w-10 h-10 flex items-center justify-center text-gray-400 hover:text-white bg-[#1A1A1A] rounded-full transition-colors duration-300"> <i class="ri-youtube-fill"></i> </a> </div> <p class="text-gray-500">© 2025 Huawei Technologies Co., Ltd.</p> </div> </div> </div> <!-- Scripts --> <script id="mobile-menu-script"> document.addEventListener('DOMContentLoaded', function() { const menuButton = document.querySelector('.ri-menu-line').parentElement; const mobileMenu = document.getElementById('mobile-menu'); const closeButton = document.getElementById('close-menu'); menuButton.addEventListener('click', function() { mobileMenu.classList.remove('translate-x-full'); }); closeButton.addEventListener('click', function() { mobileMenu.classList.add('translate-x-full'); }); }); </script> <script id="scroll-animation-script"> document.addEventListener('DOMContentLoaded', function() { const productCards = document.querySelectorAll('.product-card'); const featureCards = document.querySelectorAll('.feature-card'); const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.style.opacity = '1'; entry.target.style.transform = 'translateY(0)'; } }); }, { threshold: 0.1 }); productCards.forEach(card => { card.style.opacity = '0'; card.style.transform = 'translateY(20px)'; card.style.transition = 'opacity 0.5s ease, transform 0.5s ease'; observer.observe(card); }); featureCards.forEach(card => { card.style.opacity = '0'; card.style.transform = 'translateY(20px)'; card.style.transition = 'opacity 0.5s ease, transform 0.5s ease'; observer.observe(card); }); }); <script> !function (t, e) { var o, n, p, r; e.__SV || (window.posthog = e, e._i = [], e.init = function (i, s, a) { function g(t, e) { var o = e.split("."); 2 == o.length && (t = t[o[0]], e = o[1]), t[e] = function () { t.push([e].concat(Array.prototype.slice.call(arguments, 0))) } } (p = t.createElement("script")).type = "text/javascript", p.crossOrigin = "anonymous", p.async = !0, p.src = s.api_host.replace(".i.posthog.com", "-assets.i.posthog.com") + "/static/array.js", (r = t.getElementsByTagName("script")[0]).parentNode.insertBefore(p, r); var u = e; for (void 0 !== a ? u = e[a] = [] : a = "posthog", u.people = u.people || [], u.toString = function (t) { var e = "posthog"; return "posthog" !== a && (e += "." + a), t || (e += " (stub)"), e }, u.people.toString = function () { return u.toString(1) + ".people (stub)" }, o = "init capture register register_once register_for_session unregister unregister_for_session getFeatureFlag getFeatureFlagPayload isFeatureEnabled reloadFeatureFlags updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on onFeatureFlags onSessionId getSurveys getActiveMatchingSurveys renderSurvey canRenderSurvey getNextSurveyStep identify setPersonProperties group resetGroups setPersonPropertiesForFlags resetPersonPropertiesForFlags setGroupPropertiesForFlags resetGroupPropertiesForFlags reset get_distinct_id getGroups get_session_id get_session_replay_url alias set_config startSessionRecording stopSessionRecording sessionRecordingStarted captureException loadToolbar get_property getSessionProperty createPersonProfile opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing clear_opt_in_out_capturing debug".split(" "), n = 0; n < o.length; n++)g(u, o[n]); e._i.push([i, s, a]) }, e.__SV = 1) }(document, window.posthog || []); posthog.init('phc_t9tkQZJiyi2ps9zUYm8TDsL6qXo4YmZx0Ot5rBlAlEd', { api_host: 'https://us.i.posthog.com', autocapture: false, capture_pageview: false, capture_pageleave: false, capture_performance: { web_vitals: false, }, rageclick: false, }) window.shareKey = 'UpMJddfxjUJljyPkI5Pxpw'; window.host = 'readdy.ai'; </script> <script src="https://static.readdy.ai/static/share.js"></script></script> </body> </html>
CSS
Copy
/* Replace with your CSS Code (Leave empty if not needed) */
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */
