Metehan

43 Metehan

Ouvrir dans l'éditeur Publiez votre code

HTML

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NEO-STRAT | Geleceğin Dijital Dokusu</title>
    
    <script src="https://cdn.tailwindcss.com"></script>
    
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;600;800&family=Space+Grotesk:wght@300;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.2.0/remixicon.min.css">
    
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        cyber: {
                            dark: '#0a0b10',
                            card: 'rgba(17, 18, 27, 0.65)',
                            neon: '#3b82f6',
                            accent: '#8b5cf6',
                            glow: 'rgba(59, 130, 246, 0.4)'
                        }
                    },
                    fontFamily: {
                        sans: ['Plus Jakarta Sans', 'sans-serif'],
                        display: ['Space Grotesk', 'sans-serif']
                    }
                }
            }
        }
    </script>

/* --- Glassmorphism Gelişmiş --- */
        .glass {
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
        }

/* --- Neon Glow Animasyonları --- */
        .neon-border {
            position: relative;
        }
        .neon-border::after {
            content: '';
            position: absolute;
            inset: -1px;
            background: linear-gradient(90deg, #3b82f6, #8b5cf6, #3b82f6);
            background-size: 200% 100%;
            z-index: -1;
            border-radius: inherit;
            opacity: 0.3;
            animation: borderFlow 4s linear infinite;
        }

@keyframes borderFlow {
            0% { background-position: 0% 50%; }
            100% { background-position: 200% 50%; }
        }

/* --- Dinamik Arka Plan Küreleri --- */
        .blob {
            position: absolute;
            border-radius: 50%;
            filter: blur(80px);
            z-index: 0;
            animation: blobFloat 20s infinite alternate;
        }

@keyframes blobFloat {
            0% { transform: translate(0, 0) scale(1); }
            33% { transform: translate(30px, -50px) scale(1.1); }
            66% { transform: translate(-20px, 20px) scale(0.9); }
            100% { transform: translate(0, 0) scale(1); }
        }

/* --- Özel Kaydırma Çubuğu --- */
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: #0a0b10; }
        ::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #3b82f6; }

.hero-text-gradient {
            background: linear-gradient(to right, #fff 20%, #3b82f6 50%, #8b5cf6 80%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            background-size: 200% auto;
            animation: shine 5s linear infinite;
        }

@keyframes shine {
            to { background-position: 200% center; }
        }

.floating-capsule {
            animation: float 6s ease-in-out infinite;
        }

@keyframes float {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(2deg); }
        }

canvas#particleCanvas {
            position: fixed;
            top: 0;
            left: 0;
            pointer-events: none;
            z-index: 1;
        }
    </style>
</head>
<body class="antialiased">

<canvas id="particleCanvas"></canvas>

<div class="blob w-96 h-96 bg-blue-600/20 top-[-10%] left-[-5%]"></div>
    <div class="blob w-[500px] h-[500px] bg-purple-600/10 bottom-[0%] right-[-10%]" style="animation-delay: -5s;"></div>

<nav class="fixed top-0 w-full z-50 px-6 py-6">
        <div class="max-w-7xl mx-auto flex items-center justify-between glass px-8 py-4 rounded-full border-white/5">
            <div class="flex items-center gap-3 group cursor-pointer">
                <div class="w-10 h-10 bg-gradient-to-tr from-blue-600 to-purple-600 rounded-lg flex items-center justify-center shadow-[0_0_20px_rgba(59,130,246,0.5)] group-hover:scale-110 transition-transform">
                    <i class="ri-shining-2-fill text-white text-xl"></i>
                </div>
                <span class="font-display font-bold text-xl tracking-tight text-white">NEO<span class="text-blue-500">STRAT</span></span>
            </div>
            
            <div class="hidden md:flex items-center gap-10">
                <a href="#" class="text-sm font-medium text-slate-400 hover:text-white transition">Teknoloji</a>
                <a href="#" class="text-sm font-medium text-slate-400 hover:text-white transition">Ekosistem</a>
                <a href="#" class="text-sm font-medium text-slate-400 hover:text-white transition">Vizyon</a>
                <a href="#" class="text-sm font-medium text-slate-400 hover:text-white transition">Belgeler</a>
            </div>

<button class="bg-white text-black px-6 py-2.5 rounded-full text-sm font-bold hover:bg-blue-500 hover:text-white transition-all shadow-xl active:scale-95">
                BAŞLA
            </button>
        </div>
    </nav>

<main class="relative z-10 pt-40 pb-20 px-6">
        <div class="max-w-7xl mx-auto grid lg:grid-cols-2 gap-16 items-center">
            
            
            <div class="space-y-8">
                <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full glass border-white/10">
                    <span class="relative flex h-2 w-2">
                        <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"></span>
                        <span class="relative inline-flex rounded-full h-2 w-2 bg-blue-500"></span>
                    </span>
                    <span class="text-[10px] font-bold uppercase tracking-[0.2em] text-blue-400">v2.5 Live Experience</span>
                </div>

<h1 class="text-6xl md:text-8xl font-display font-bold leading-[0.9] hero-text-gradient">
                    Dijital Gerçekliği <br> Yeniden Tanımlayın
                </h1>

<p class="text-lg text-slate-400 max-w-lg leading-relaxed font-light">
                    Mat dokular ve neon enerjisiyle harmanlanmış yeni nesil dijital arayüz deneyimi. Stratosferik hız ve derin estetik bir arada.
                </p>

<div class="flex flex-wrap gap-5 pt-4">
                    <button class="px-8 py-4 bg-blue-600 rounded-2xl font-bold text-white shadow-[0_0_30px_rgba(59,130,246,0.4)] hover:bg-blue-500 transition-all active:scale-95 flex items-center gap-3 group">
                        Deneyimi Başlat
                        <i class="ri-arrow-right-line group-hover:translate-x-1 transition-transform"></i>
                    </button>
                    <button class="px-8 py-4 glass rounded-2xl font-bold text-white hover:bg-white/5 transition-all flex items-center gap-3 border-white/10">
                        <i class="ri-play-circle-line text-xl"></i>
                        Tanıtımı İzle
                    </button>
                </div>

<div class="grid grid-cols-3 gap-8 pt-10 border-t border-white/5">
                    <div>
                        <div class="text-3xl font-display font-bold text-white">12ms</div>
                        <div class="text-xs text-slate-500 uppercase tracking-widest mt-1">Gecikme</div>
                    </div>
                    <div>
                        <div class="text-3xl font-display font-bold text-white">99.9%</div>
                        <div class="text-xs text-slate-500 uppercase tracking-widest mt-1">Kararlılık</div>
                    </div>
                    <div>
                        <div class="text-3xl font-display font-bold text-white">4K+</div>
                        <div class="text-xs text-slate-500 uppercase tracking-widest mt-1">Doku Çözünürlüğü</div>
                    </div>
                </div>
            </div>

<div class="relative flex justify-center items-center h-[600px]">
                <div class="floating-capsule relative z-20">
                    
                    <div class="w-72 h-[450px] rounded-[100px] glass border-white/20 relative overflow-hidden flex flex-col items-center justify-center p-8 shadow-[inset_0_0_50px_rgba(255,255,255,0.05)]">
                        
                        
                        <div class="w-32 h-32 bg-blue-600 rounded-full blur-[40px] absolute top-1/4 animate-pulse"></div>
                        <div class="w-24 h-24 bg-purple-600 rounded-full blur-[40px] absolute bottom-1/4 animate-pulse" style="animation-delay: 1s;"></div>
                        
                        
                        <div class="w-full space-y-4 relative z-10">
                            <div class="h-12 w-full bg-white/10 rounded-2xl border border-white/10"></div>
                            <div class="h-32 w-full bg-gradient-to-br from-blue-500/20 to-purple-500/20 rounded-3xl border border-white/20 backdrop-blur-md flex items-center justify-center">
                                <i class="ri-bar-chart-box-line text-4xl text-blue-400"></i>
                            </div>
                            <div class="flex gap-2">
                                <div class="h-10 w-10 bg-white/5 rounded-full border border-white/10"></div>
                                <div class="h-10 flex-1 bg-white/5 rounded-full border border-white/10"></div>
                            </div>
                        </div>

<div class="absolute top-0 left-1/2 -translate-x-1/2 w-px h-full bg-gradient-to-b from-transparent via-white/20 to-transparent"></div>
                    </div>
                    
                    
                    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[400px] h-[400px] border border-white/5 rounded-full animate-[spin_20s_linear_infinite]"></div>
                    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[450px] h-[450px] border border-white/5 rounded-full animate-[spin_30s_linear_infinite_reverse]"></div>
                </div>

<div class="absolute top-10 right-10 w-24 h-24 bg-blue-500/10 blur-[50px] rounded-full"></div>
                <div class="absolute bottom-10 left-10 w-32 h-32 bg-purple-500/10 blur-[60px] rounded-full"></div>
            </div>

</div>
    </main>

<footer class="fixed bottom-0 w-full z-40 p-8 pointer-events-none">
        <div class="max-w-7xl mx-auto flex justify-between items-end">
            <div class="glass px-6 py-3 rounded-2xl border-white/10 pointer-events-auto flex items-center gap-4">
                <div class="flex -space-x-3">
                    <div class="w-8 h-8 rounded-full bg-slate-700 border-2 border-cyber-dark flex items-center justify-center text-[10px] font-bold">JD</div>
                    <div class="w-8 h-8 rounded-full bg-blue-600 border-2 border-cyber-dark flex items-center justify-center text-[10px] font-bold">AS</div>
                    <div class="w-8 h-8 rounded-full bg-slate-800 border-2 border-cyber-dark flex items-center justify-center text-[10px] font-bold">+12</div>
                </div>
                <div class="text-[11px] font-medium text-slate-300">
                    <span class="text-blue-400 font-bold">842 Kişi</span> şu an deneyimliyor
                </div>
            </div>

function resize() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        }

window.addEventListener('resize', resize);
        resize();

class Particle {
            constructor() {
                this.reset();
            }

reset() {
                this.x = Math.random() * canvas.width;
                this.y = Math.random() * canvas.height;
                this.size = Math.random() * 1.5 + 0.5;
                this.speedX = (Math.random() - 0.5) * 0.5;
                this.speedY = (Math.random() - 0.5) * 0.5;
                this.opacity = Math.random() * 0.5 + 0.2;
            }

update() {
                this.x += this.speedX;
                this.y += this.speedY;

if (this.x < 0 || this.x > canvas.width || this.y < 0 || this.y > canvas.height) {
                    this.reset();
                }
            }

draw() {
                ctx.fillStyle = `rgba(59, 130, 246, ${this.opacity})`;
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                ctx.fill();
            }
        }

for (let i = 0; i < 60; i++) {
            particles.push(new Particle());
        }

function animate() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            particles.forEach(p => {
                p.update();
                p.draw();
            });
            requestAnimationFrame(animate);
        }

animate();

// Buton Efektleri
        const buttons = document.querySelectorAll('button');
        buttons.forEach(btn => {
            btn.addEventListener('mousemove', (e) => {
                const rect = btn.getBoundingClientRect();
                const x = e.clientX - rect.left;
                const y = e.clientY - rect.top;
                btn.style.setProperty('--x', `${x}px`);
                btn.style.setProperty('--y', `${y}px`);
            });
        });

// Mouse Parallax Efekti (Sağdaki kapsül için)
        document.addEventListener('mousemove', (e) => {
            const moveX = (e.clientX - window.innerWidth / 2) * 0.01;
            const moveY = (e.clientY - window.innerHeight / 2) * 0.01;
            document.querySelector('.floating-capsule').style.transform = `translate(${moveX}px, ${moveY}px)`;
        });
    </script>
</body>
</html>

```

CSS