Webleb - UI Elements

HTML

<!DOCTYPE html>

<head>

<title>AeroWind AI - Sürdürülebilir Seyahat Asistanı</title>

tailwind.config = {

theme: {

extend: {

fontFamily: {

sans: ['Inter', 'sans-serif'],

serif: ['Playfair Display', 'serif'],

},

colors: {

brand: {

dark: '#0f172a', // Slate 900

green: '#14532d', // Deep Forest

lime: '#d9f99d', // Lime 200 (Soft Neon)

neon: '#bef264', // Lime 400 (Active Neon)

surface: '#f9fafb', // Gray 50

}

},

spacing: {

'128': '32rem',

},

backgroundImage: {

'hero-pattern': "url('https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?q=80&w=2021&auto=format&fit=crop')",

}

</script>

<style>

/* Custom Utilities */

.glass-card {

background: rgba(255, 255, 255, 0.7);

backdrop-filter: blur(10px);

border: 1px solid rgba(255, 255, 255, 0.5);

}

.text-shadow {

text-shadow: 0 2px 4px rgba(0,0,0,0.3);

}

/* Smooth fade-in animation basics */

.reveal {

opacity: 0;

transform: translateY(30px);

transition: all 0.8s ease-out;

}

.reveal.active {

opacity: 1;

transform: translateY(0);

}

</style>

</head>

</div>

<span class="font-serif text-xl font-bold tracking-tight text-white mix-blend-difference">AeroWind.ai</span>

</div>

<a href="#about" class="text-sm font-medium text-white mix-blend-difference hover:text-brand-neon transition">Hikayemiz</a>

<a href="#features" class="text-sm font-medium text-white mix-blend-difference hover:text-brand-neon transition">Özellikler</a>

<a href="#pricing" class="text-sm font-medium text-white mix-blend-difference hover:text-brand-neon transition">Planlar</a>

</div>

Hemen Başla

</a>

</div>

</div>

</nav>

Yeni Nesil Sürdürülebilirlik

</span>

Gelecek İçin <br>

<span class="italic text-brand-lime">Bilinçli</span> Seyahat Et.

</h1>

Yapay zeka destekli karbon ayak izi analizi ve premium seyahat planlaması.

Kurumsal hedeflerinize ulaşırken dünyayı keşfedin.

</p>

Ücretsiz Deneyin

</a>

</div>

<span class="font-medium">Nasıl Çalışır?</span>

</a>

</div>

</div>

</header>

<p class="text-gray-500 font-serif italic text-lg">Kurumsal Üye</p>

</div>

<p class="text-gray-500 font-serif italic text-lg">Karbon Azaltımı</p>

</div>

<p class="text-gray-500 font-serif italic text-lg">Ülke Desteği</p>

</div>

<p class="text-gray-500 font-serif italic text-lg">Kullanıcı Puanı</p>

</div>

</section>

<p class="font-serif italic text-gray-800 text-lg">"Doğa ile teknoloji arasında bir köprü kuruyoruz. Amacımız sadece karbonu azaltmak değil, farkındalığı artırmak."</p>

</div>

</div>

<h2 class="text-brand-neon font-bold tracking-widest text-xs uppercase mb-4">Misyonumuz</h2>

Dünya'yı korurken işinizi büyütün.

</h3>

Geleneksel kurumsal seyahat yönetimi, modern dünyanın ekolojik hassasiyetleriyle çelişiyor. AeroWind AI, büyük veriyi kullanarak seyahat rotalarınızı optimize eder, en düşük karbon ayak izine sahip konaklama ve ulaşım seçeneklerini saniyeler içinde sunar.

</p>

Sadece bir SaaS platformu değiliz; şirketinizin sürdürülebilirlik raporlarını otomatize eden ve yeşil dönüşümünüze liderlik eden bir yol arkadaşıyız.

</p>

Hikayemizi Okuyun <i class="fa-solid fa-arrow-right ml-2 text-sm"></i>

</a>

</div>

</section>

<span class="text-brand-green font-medium tracking-wide text-sm uppercase">Yetenekler</span>

<h2 class="font-serif text-4xl md:text-5xl text-brand-dark mt-3 mb-6">Her Adımda Akıllı Asistan</h2>

<p class="text-gray-500 text-lg">Süreçlerinizi sadeleştiren ve doğayı önceliklendiren araçlar.</p>

</div>

</div>

<h4 class="font-serif text-2xl text-brand-dark mb-4">AI Co-Pilot</h4>

<p class="text-gray-600 leading-relaxed">Seyahat tercihlerinizi öğrenen ve bütçenize en uygun, çevre dostu rotaları proaktif olarak öneren akıllı algoritma.</p>

</div>

</div>

<h4 class="font-serif text-2xl text-brand-dark mb-4">Canlı Raporlama</h4>

<p class="text-gray-600 leading-relaxed">Kurumsal karbon emisyonlarınızı departman bazında anlık takip edin ve ESG hedeflerinizle karşılaştırın.</p>

</div>

</div>

<h4 class="font-serif text-2xl text-brand-dark mb-4">Global Entegrasyon</h4>

<p class="text-gray-600 leading-relaxed">Dünya genelinde 500+ havayolu ve 2 milyon otel ile tam entegre çalışarak kesintisiz rezervasyon deneyimi.</p>

</div>

</section>

</div>

<div>

<p class="text-xs text-gray-400 uppercase font-semibold">Toplam Tasarruf</p>

</div>

+24% Artış

</span>

</div>

<div class="absolute -top-8 left-1/2 -translate-x-1/2 bg-black text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">Bugün</div>

</div>

</div>

</div>

<h3 class="font-serif text-3xl md:text-4xl mb-6">Finansal ve Ekolojik Denge</h3>

Yeşil olmak pahalı olmak zorunda değil. AeroWind, vergi avantajlarını ve sürdürülebilirlik teşviklerini otomatik olarak hesaplar.

</p>

<span class="text-gray-700">Otomatik vergi indirim hesaplaması</span>

</li>

<span class="text-gray-700">Dinamik bütçe yönetimi</span>

</li>

<span class="text-gray-700">Gider raporlarında %100 şeffaflık</span>

</li>

</ul>

</div>

</section>

<h2 class="font-serif text-center text-3xl md:text-4xl mb-16">Liderlerin Görüşleri</h2>

</div>

"AeroWind ile çalışmaya başladığımızdan beri sadece karbon ayak izimizi düşürmedik, çalışan memnuniyetimiz de arttı. Gerçek bir kazan-kazan."

</p>

<div>

<p class="font-bold text-sm text-gray-900">Emre Yılmaz</p>

<p class="text-xs text-gray-500 uppercase tracking-wide">CEO, TechFlow</p>

</div>

</div>

"Arayüz o kadar temiz ve akıcı ki, tüm seyahat planlamamızı tek bir ekrandan yönetebiliyoruz. Raporlama özellikleri ise paha biçilemez."

</p>

<div>

<p class="font-bold text-sm text-gray-900">Selin Kaya</p>

<p class="text-xs text-gray-500 uppercase tracking-wide">HR Direktörü, GreenWave</p>

</div>

</div>

"Sürdürülebilirlik hedeflerimiz artık sadece kağıt üzerinde değil, her uçuşta ve her otel rezervasyonunda somut bir şekilde ölçülebiliyor."

</p>

<div>

<p class="font-bold text-sm text-gray-900">Marcus Chen</p>

<p class="text-xs text-gray-500 uppercase tracking-wide">COO, SolarNext</p>

</div>

</section>

<h2 class="font-serif text-4xl mb-4">Şeffaf Fiyatlandırma</h2>

<p class="text-gray-500">İşletmenizin ölçeğine uygun esnek planlar.</p>

</div>

<h3 class="font-serif text-2xl mb-2">Başlangıç</h3>

<p class="text-gray-500 text-sm mb-6">Küçük ekipler için ideal.</p>

<li class="flex gap-3"><i class="fa-solid fa-check text-green-500"></i> 5 Kullanıcı</li>

<li class="flex gap-3"><i class="fa-solid fa-check text-green-500"></i> Temel Raporlama</li>

<li class="flex gap-3"><i class="fa-solid fa-check text-green-500"></i> E-posta Desteği</li>

</ul>

</div>

<div class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-brand-neon text-brand-dark px-4 py-1 rounded-full text-xs font-bold uppercase tracking-wide">En Popüler</div>

<h3 class="font-serif text-2xl mb-2 text-brand-lime">Kurumsal</h3>

<p class="text-gray-400 text-sm mb-6">Büyüyen şirketler için.</p>

<li class="flex gap-3"><i class="fa-solid fa-check text-brand-neon"></i> 50 Kullanıcı</li>

<li class="flex gap-3"><i class="fa-solid fa-check text-brand-neon"></i> Gelişmiş AI Analizi</li>

<li class="flex gap-3"><i class="fa-solid fa-check text-brand-neon"></i> 7/24 Canlı Destek</li>

<li class="flex gap-3"><i class="fa-solid fa-check text-brand-neon"></i> Karbon Sertifikası</li>

</ul>

<a href="#" class="block w-full py-3 rounded-xl bg-brand-neon text-brand-dark text-center font-bold hover:bg-white transition-colors">Şimdi Başla</a>

</div>

<h3 class="font-serif text-2xl mb-2">Global</h3>

<p class="text-gray-500 text-sm mb-6">Sınırsız ölçeklenme.</p>

<li class="flex gap-3"><i class="fa-solid fa-check text-green-500"></i> Sınırsız Kullanıcı</li>

<li class="flex gap-3"><i class="fa-solid fa-check text-green-500"></i> Özel API Entegrasyonu</li>

<li class="flex gap-3"><i class="fa-solid fa-check text-green-500"></i> Dedicated Müşteri Temsilcisi</li>

</ul>

<a href="#" class="block w-full py-3 rounded-xl border border-gray-200 text-center font-medium hover:border-brand-dark transition-colors">İletişime Geç</a>

</div>

</section>

<div>

<h2 class="font-serif text-4xl mb-2">Güncel İçerikler</h2>

<p class="text-gray-500">Seyahat trendleri ve sürdürülebilirlik notları.</p>

</div>

<a href="#" class="hidden md:block text-brand-dark hover:text-brand-green font-medium">Tümünü Gör →</a>

</div>

</div>

<span class="text-xs font-bold text-brand-neon bg-brand-dark px-2 py-1 rounded mb-2 inline-block">TREND</span>

<h3 class="font-serif text-xl font-bold mb-2 group-hover:text-brand-green transition-colors">2026'da Yeşil Seyahat Trendleri</h3>

<p class="text-gray-500 text-sm line-clamp-2">Gelecek yılın kurumsal seyahat alışkanlıkları nasıl değişecek? İşte öngörülerimiz.</p>

</article>

</div>

<span class="text-xs font-bold text-brand-dark bg-gray-200 px-2 py-1 rounded mb-2 inline-block">REHBER</span>

<h3 class="font-serif text-xl font-bold mb-2 group-hover:text-brand-green transition-colors">Remote Çalışma ve Seyahat Dengesi</h3>

<p class="text-gray-500 text-sm line-clamp-2">Dijital göçebeler için verimliliği korurken dünyayı gezmenin ipuçları.</p>

</article>

</div>

<span class="text-xs font-bold text-brand-dark bg-gray-200 px-2 py-1 rounded mb-2 inline-block">TEKNOLOJİ</span>

<h3 class="font-serif text-xl font-bold mb-2 group-hover:text-brand-green transition-colors">AI ile Karbon Ayak İzi Hesaplama</h3>

<p class="text-gray-500 text-sm line-clamp-2">Arka plandaki teknoloji nasıl çalışıyor? Veri bilimcilerimiz anlatıyor.</p>

</article>

</div>

</section>

<h2 class="font-serif text-3xl md:text-5xl text-white mb-6">Yolculuğa Katılın</h2>

<p class="text-gray-400 mb-10 text-lg">En yeni özelliklerden ve sürdürülebilirlik ipuçlarından ilk sizin haberiniz olsun. Spam yok, sadece ilham.</p>

<button type="button" class="px-8 py-4 rounded-full bg-brand-neon text-brand-dark font-bold hover:bg-white hover:scale-105 transition-all">Abone Ol</button>

</form>

</div>

</section>

</div>

<span class="font-serif text-lg font-bold text-brand-dark">AeroWind.ai</span>

</div>

Modern işletmeler için sürdürülebilir, yapay zeka destekli seyahat yönetim platformu.

</p>

</div>

<div>

<h4 class="font-bold text-brand-dark mb-4">Platform</h4>

<li><a href="#" class="hover:text-brand-green">Özellikler</a></li>

<li><a href="#" class="hover:text-brand-green">Entegrasyonlar</a></li>

<li><a href="#" class="hover:text-brand-green">Fiyatlandırma</a></li>

</ul>

</div>

<div>

<h4 class="font-bold text-brand-dark mb-4">Şirket</h4>

<li><a href="#" class="hover:text-brand-green">Hakkımızda</a></li>

<li><a href="#" class="hover:text-brand-green">Kariyer</a></li>

<li><a href="#" class="hover:text-brand-green">İletişim</a></li>

</ul>

</div>

<div>

<h4 class="font-bold text-brand-dark mb-4">Yasal</h4>

<li><a href="#" class="hover:text-brand-green">Gizlilik Politikası</a></li>

<li><a href="#" class="hover:text-brand-green">Kullanım Şartları</a></li>

<li><a href="#" class="hover:text-brand-green">Çerez Politikası</a></li>

</ul>

</div>

</div>

</footer>

// Navbar Change on Scroll

window.addEventListener('scroll', function() {

const navbar = document.getElementById('navbar');

if (window.scrollY > 50) {

navbar.classList.add('bg-white/90', 'backdrop-blur-md', 'shadow-sm');

// Change text colors for light background

const links = navbar.querySelectorAll('a, span, i');

links.forEach(link => {

// Very basic logic to switch text colors, in real app manage via classes better

if(link.classList.contains('mix-blend-difference')) {

link.classList.remove('mix-blend-difference', 'text-white');

link.classList.add('text-brand-dark');

}

});

} else {

navbar.classList.remove('bg-white/90', 'backdrop-blur-md', 'shadow-sm');

const links = navbar.querySelectorAll('a, span, i');

links.forEach(link => {

if(link.classList.contains('text-brand-dark') && !link.classList.contains('bg-brand-neon')) {

link.classList.add('mix-blend-difference', 'text-white');

link.classList.remove('text-brand-dark');

}

});

}

});

// Reveal Animation on Scroll

function reveal() {

var reveals = document.querySelectorAll(".reveal");

for (var i = 0; i < reveals.length; i++) {

var windowHeight = window.innerHeight;

var elementTop = reveals[i].getBoundingClientRect().top;

var elementVisible = 150;

if (elementTop < windowHeight - elementVisible) {

reveals[i].classList.add("active");

}

window.addEventListener("scroll", reveal);

// Trigger once on load

reveal();

</script>

</body>

</html>

CSS

JS

Metehan

Recommended