Загрузка...
Шаблон лендинга для агентства AETERNA. Современный дизайн, HTML/CSS. Идеально для креативных студий, маркетинговых агентств и фрилансеров.
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head><meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AETERNA | Avant-Garde Digital Architecture</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/lucide@latest"></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=Inter:wght@200;300;400;500;600&family=JetBrains+Mono:wght@300;400;500&display=swap" rel="stylesheet">
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
fontFamily: {
sans: ['Inter', 'sans-serif'],
mono: ['JetBrains Mono', 'monospace'],
},
colors: {
void: '#020202',
surface: '#0A0A0A',
glass: 'rgba(255,255,255,0.03)',
border: 'rgba(255,255,255,0.08)',
accent: '#D4FF00', // Hyper Lime
'accent-dim': 'rgba(212, 255, 0, 0.1)',
},
letterSpacing: {
'tighter': '-0.04em',
'tight': '-0.02em',
},
animation: {
'spin-slow': 'spin 12s linear infinite',
'marquee': 'marquee 25s linear infinite',
'pulse-fast': 'pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite',
},
keyframes: {
marquee: {
'0%': { transform: 'translateX(0%)' },
'100%': { transform: 'translateX(-100%)' },
}
}
}
}
}
</script>
<style>
body {
background-color: #020202;
color: #ffffff;
cursor: default;
}
/* Custom Cursor */
.cursor-dot,
.cursor-outline {
position: fixed;
top: 0;
left: 0;
transform: translate(-50%, -50%);
border-radius: 50%;
z-index: 9999;
pointer-events: none;
}
.cursor-dot {
width: 4px;
height: 4px;
background-color: #D4FF00;
}
.cursor-outline {
width: 30px;
height: 30px;
border: 1px solid rgba(212, 255, 0, 0.5);
transition: width 0.2s, height 0.2s, background-color 0.2s;
}
body:hover .cursor-outline {
width: 50px;
height: 50px;
background-color: rgba(212, 255, 0, 0.03);
}
/* Grain & Fog */
.noise-overlay {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
pointer-events: none; z-index: 90; opacity: 0.04;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='1'/%3E%3C/svg%3E");
}
/* Utilities */
.no-scrollbar::-webkit-scrollbar { display: none; }
.text-glow { text-shadow: 0 0 20px rgba(212, 255, 0, 0.3); }
.glass-panel {
background: rgba(10, 10, 10, 0.6);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.06);
}
/* Hover Reveal Effect (Spotlight) */
.spotlight-card {
position: relative;
overflow: hidden;
}
.spotlight-card::before {
content: '';
position: absolute;
top: var(--y, 50%);
left: var(--x, 50%);
transform: translate(-50%, -50%);
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 60%);
opacity: 0;
transition: opacity 0.3s;
pointer-events: none;
z-index: 0;
}
.spotlight-card:hover::before { opacity: 1; }
/* Work Image Float */
.work-preview-img {
position: fixed;
pointer-events: none;
z-index: 50;
opacity: 0;
transform: scale(0.8) translate(-50%, -50%);
transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
width: 350px;
height: auto;
border-radius: 4px;
box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
.work-preview-img.active {
opacity: 1;
transform: scale(1) translate(-50%, -50%);
}
/* Text Scramble & Selection */
::selection { background: #D4FF00; color: #000; }
/* Grid Background Pattern */
.bg-grid {
background-size: 50px 50px;
background-image: linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
}
/* Footer Reveal Stacking */
.main-content {
position: relative;
z-index: 10;
background-color: #020202;
margin-bottom: 70vh;
box-shadow: 0 100px 200px rgba(0,0,0,1);
}
.footer-fixed {
position: fixed;
bottom: 0; left: 0; width: 100%; height: 70vh;
z-index: 0;
}
</style>
<style>
/* 3D Transform utilities */
</style></head>
<body class="font-sans text-gray-400 bg-void selection:bg-accent selection:text-black">
<!-- Custom Cursor Elements -->
<div class="cursor-dot hidden md:block"></div>
<div class="cursor-outline hidden md:block"></div>
<div class="noise-overlay"></div>
<!-- Navigation -->
<nav class="fixed top-0 left-0 w-full z-50 px-6 py-6 pointer-events-none">
<div class="max-w-[1440px] mx-auto flex justify-between items-start">
<!-- Brand -->
<div class="pointer-events-auto mix-blend-difference">
<a href="#" class="block group">
<div class="flex items-center gap-2">
<div class="w-2 h-2 bg-white group-hover:bg-accent transition-colors duration-300"></div>
<span class="font-bold text-white tracking-tighter text-lg leading-none">AETERNA</span>
</div>
<span class="font-mono text-[9px] text-gray-500 uppercase tracking-widest pl-4 opacity-0 group-hover:opacity-100 transition-opacity duration-500 -mt-1 block">Digital Foundry</span>
</a>
</div>
<!-- Menu Island -->
<div class="pointer-events-auto bg-[#0A0A0A]/80 backdrop-blur-md border border-white/10 rounded-full p-1.5 flex items-center gap-1 shadow-2xl transition-transform hover:scale-[1.02]">
<a href="#work" class="px-5 py-2 rounded-full text-xs font-medium text-gray-300 hover:text-white hover:bg-white/10 transition-all">Work</a>
<a href="#protocol" class="px-5 py-2 rounded-full text-xs font-medium text-gray-300 hover:text-white hover:bg-white/10 transition-all">Protocol</a>
<a href="#pricing" class="px-5 py-2 rounded-full text-xs font-medium text-gray-300 hover:text-white hover:bg-white/10 transition-all">Plans</a>
<a href="#contact" class="px-5 py-2 rounded-full text-xs font-medium bg-white text-black hover:bg-accent transition-colors ml-1">
Start Project
</a>
</div>
<!-- Status -->
<div class="hidden md:flex flex-col items-end pointer-events-auto mix-blend-difference">
<div class="flex items-center gap-2">
<span class="relative flex h-2 w-2">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-accent opacity-75"></span>
<span class="relative inline-flex rounded-full h-2 w-2 bg-accent"></span>
</span>
<span class="font-mono text-xs text-white">NYC <span class="text-gray-500">14:02 PM</span></span>
</div>
</div>
</div>
</nav>
<div class="main-content">
<!-- HERO SECTION -->
<section class="relative h-screen w-full flex flex-col items-center justify-center overflow-hidden bg-void">
<!-- Animated Canvas Background -->
<canvas id="heroCanvas" class="absolute inset-0 w-full h-full z-0 opacity-80"></canvas>
<!-- Background Gradient Mesh -->
<div class="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(212,255,0,0.03),transparent_60%)] z-0 pointer-events-none"></div>
<!-- Content -->
<div class="relative z-10 w-full max-w-[1440px] px-6 pt-20">
<div class="flex flex-col items-center text-center">
<!-- Badge -->
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-white/10 bg-white/5 backdrop-blur-sm mb-8 animate-fade-in-up">
<span class="w-1.5 h-1.5 rounded-full bg-accent"></span>
<span class="font-mono text-[10px] uppercase tracking-[0.2em] text-gray-300">Accepting New Clients 2024</span>
</div>
<!-- Main Title -->
<h1 class="text-[13vw] leading-[0.8] font-semibold text-white tracking-tighter uppercase mix-blend-difference relative select-none">
<span class="block hover:text-transparent hover:bg-clip-text hover:bg-gradient-to-b hover:from-white hover:to-gray-500 transition-all duration-500 cursor-none">Designing</span>
<span class="block text-gray-600 hover:text-white transition-colors duration-700">The Void</span>
</h1>
<!-- Subtext grid -->
<div class="w-full grid grid-cols-1 md:grid-cols-3 gap-8 mt-12 md:mt-20 items-start text-left border-t border-white/10 pt-8">
<div class="hidden md:block">
<p class="font-mono text-xs text-gray-500">[ SYSTEM_READY ]</p>
</div>
<div class="md:col-span-1">
<p class="text-base text-gray-400 font-light leading-relaxed">
We engineer high-performance digital experiences for forward-thinking brands. Merging brutalist aesthetics with microscopic precision.
</p>
</div>
<div class="flex justify-end">
<button class="group relative px-6 py-3 border border-white/20 hover:border-accent transition-colors duration-300">
<span class="font-mono text-xs uppercase tracking-widest text-white group-hover:text-accent flex items-center gap-3">
Explore Works <i data-lucide="arrow-down-right" class="w-3 h-3 group-hover:rotate-45 transition-transform"></i>
</span>
</button>
</div>
</div>
</div>
</div>
<!-- Marquee -->
<div class="absolute bottom-0 w-full border-t border-white/10 py-3 bg-black/50 backdrop-blur-sm overflow-hidden flex z-20">
<div class="animate-marquee whitespace-nowrap flex gap-12 items-center">
<span class="font-mono text-xs text-gray-500 uppercase">Latest Drop: Carbon DAO v2</span>
<span class="w-1 h-1 bg-accent rounded-full"></span>
<span class="font-mono text-xs text-gray-500 uppercase">Awwwards SOTD</span>
<span class="w-1 h-1 bg-accent rounded-full"></span>
<span class="font-mono text-xs text-gray-500 uppercase">FWA Winner</span>
<span class="w-1 h-1 bg-accent rounded-full"></span>
<span class="font-mono text-xs text-gray-500 uppercase">WebGL Index</span>
<span class="w-1 h-1 bg-accent rounded-full"></span>
<span class="font-mono text-xs text-gray-500 uppercase">Latest Drop: Carbon DAO v2</span>
<span class="w-1 h-1 bg-accent rounded-full"></span>
<span class="font-mono text-xs text-gray-500 uppercase">Awwwards SOTD</span>
<span class="w-1 h-1 bg-accent rounded-full"></span>
<span class="font-mono text-xs text-gray-500 uppercase">FWA Winner</span>
<span class="w-1 h-1 bg-accent rounded-full"></span>
<span class="font-mono text-xs text-gray-500 uppercase">WebGL Index</span>
</div>
</div>
</section>
<!-- SOCIAL PROOF (Spotlight Grid) -->
<section class="py-24 border-b border-white/10 bg-[#050505] relative overflow-hidden">
<div class="absolute inset-0 bg-grid opacity-20 pointer-events-none"></div>
<div class="max-w-[1440px] mx-auto px-6 relative z-10">
<p class="font-mono text-[10px] text-gray-600 mb-12 uppercase tracking-[0.2em]">Trusted Ecosystem</p>
<div class="grid grid-cols-2 md:grid-cols-4 border-l border-t border-white/10">
<!-- Item 1 -->
<div class="spotlight-card border-r border-b border-white/10 h-32 flex items-center justify-center group cursor-crosshair bg-void transition-colors hover:bg-[#080808]">
<svg class="w-24 h-auto text-gray-600 group-hover:text-white transition-colors duration-500" viewBox="0 0 100 25" fill="none" stroke="currentColor" stroke-width="2">
<path d="M10,20 L20,5 L30,20 L40,5 M60,5 V20 M70,5 L90,20 M90,5 L70,20" />
</svg>
</div>
<!-- Item 2 -->
<div class="spotlight-card border-r border-b border-white/10 h-32 flex items-center justify-center group cursor-crosshair bg-void transition-colors hover:bg-[#080808]">
<svg class="w-24 h-auto text-gray-600 group-hover:text-white transition-colors duration-500" viewBox="0 0 100 25" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="20" cy="12.5" r="8" /> <rect x="40" y="5" width="15" height="15" /> <rect x="70" y="5" width="15" height="15" />
</svg>
</div>
<!-- Item 3 -->
<div class="spotlight-card border-r border-b border-white/10 h-32 flex items-center justify-center group cursor-crosshair bg-void transition-colors hover:bg-[#080808]">
<svg class="w-24 h-auto text-gray-600 group-hover:text-white transition-colors duration-500" viewBox="0 0 100 25" fill="none" stroke="currentColor" stroke-width="2">
<path d="M10,12.5 H30 M20,5 V20 M50,12.5 H80" />
</svg>
</div>
<!-- Item 4 -->
<div class="spotlight-card border-r border-b border-white/10 h-32 flex items-center justify-center group cursor-crosshair bg-void transition-colors hover:bg-[#080808]">
<svg class="w-24 h-auto text-gray-600 group-hover:text-white transition-colors duration-500" viewBox="0 0 100 25" fill="none" stroke="currentColor" stroke-width="2">
<path d="M10,20 Q25,5 40,20 T70,20 T100,20" />
</svg>
</div>
</div>
</div>
</section>
<!-- PROTOCOL (Bento Grid) -->
<section id="protocol" class="py-32 border-b border-white/10 bg-void relative">
<div class="max-w-[1440px] mx-auto px-6">
<div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
<!-- Header -->
<div class="lg:col-span-4 flex flex-col justify-between h-full">
<div>
<h2 class="text-6xl font-medium tracking-tighter text-white mb-6">The<br><span class="text-gray-600">Protocol</span></h2>
<p class="text-sm text-gray-400 max-w-xs leading-relaxed">
We don't just design; we architect systems. Our proprietary stack ensures pixel-perfect translation from Figma to Production.
</p>
</div>
<div class="mt-12 lg:mt-0">
<div class="font-mono text-xs text-accent mb-2">> INITIALIZING_STACK...</div>
<div class="h-1 w-full bg-gray-800 rounded-full overflow-hidden">
<div class="h-full bg-accent w-2/3 animate-pulse"></div>
</div>
</div>
</div>
<!-- Cards -->
<div class="lg:col-span-8 grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Card 1: 3D Perspective -->
<div class="spotlight-card bg-surface border border-white/10 p-8 rounded-xl h-[400px] flex flex-col group relative perspective-1000">
<div class="absolute top-4 right-4 p-2 bg-white/5 rounded-lg border border-white/5">
<i data-lucide="cpu" class="w-5 h-5 text-gray-400"></i>
</div>
<h3 class="text-2xl text-white font-medium mb-2">System Architecture</h3>
<p class="text-xs text-gray-500 font-mono mb-8">REACT / NEXT.JS / WEBGL</p>
<!-- Visual Code -->
<div class="flex-1 bg-[#050505] rounded border border-white/5 p-4 font-mono text-[10px] text-gray-400 overflow-hidden shadow-inner group-hover:border-accent/20 transition-colors">
<div class="flex gap-1.5 mb-3">
<div class="w-2 h-2 rounded-full bg-red-500/20"></div>
<div class="w-2 h-2 rounded-full bg-yellow-500/20"></div>
<div class="w-2 h-2 rounded-full bg-green-500/20"></div>
</div>
<span class="text-purple-400">export function</span> <span class="text-blue-400">Render</span>() {<br>
<span class="text-purple-400">const</span> velocity = <span class="text-orange-300">useMotion</span>();<br>
<span class="text-gray-500">// Calculating physics...</span><br>
<span class="text-purple-400">return</span> (<br>
<<span class="text-green-400">Canvas</span> <span class="text-blue-300">gl</span>={{ <span class="text-orange-300">antialias: true</span> }}><br>
<<span class="text-green-400">Mesh</span> <span class="text-blue-300">ref</span>={ref} /><br>
</<span class="text-green-400">Canvas</span>><br>
)<br>
}<span class="animate-pulse text-accent">_</span>
</div>
</div>
<!-- Card 2: Metrics -->
<div class="spotlight-card bg-surface border border-white/10 p-8 rounded-xl h-[400px] flex flex-col justify-between group">
<div>
<h3 class="text-2xl text-white font-medium mb-2">Performance First</h3>
<p class="text-xs text-gray-500 font-mono">LIGHTHOUSE SCORE 100</p>
</div>
<div class="relative w-48 h-48 mx-auto flex items-center justify-center">
<svg class="transform -rotate-90 w-full h-full">
<circle cx="96" cy="96" r="88" stroke="currentColor" stroke-width="8" fill="transparent" class="text-gray-800" />
<circle cx="96" cy="96" r="88" stroke="currentColor" stroke-width="8" fill="transparent" class="text-accent" stroke-dasharray="552" stroke-dashoffset="20" stroke-linecap="round" />
</svg>
<div class="absolute inset-0 flex flex-col items-center justify-center">
<span class="text-5xl font-bold text-white tracking-tighter">99</span>
<span class="text-xs font-mono text-gray-500 mt-1">PERFORMANCE</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- WORK (Interactive List with Hover Image) -->
<section id="work" class="py-32 bg-[#020202] border-b border-white/10 relative z-20">
<div class="max-w-[1440px] mx-auto px-6">
<div class="flex items-end justify-between mb-20">
<h2 class="text-[5rem] leading-none font-medium tracking-tighter text-white">Selected<br>Works</h2>
<div class="text-right hidden md:block">
<span class="block font-mono text-xs text-gray-500">SCROLL TO EXPLORE</span>
<i data-lucide="arrow-down" class="w-4 h-4 text-accent ml-auto mt-2 animate-bounce"></i>
</div>
</div>
<!-- Project List -->
<div class="flex flex-col group/list" id="workList">
<!-- Item 1 -->
<a href="#" class="work-item relative border-t border-white/10 py-12 group hover:bg-white/[0.02] transition-colors cursor-none" data-image="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=1000&auto=format&fit=crop">
<div class="flex justify-between items-baseline relative z-10 px-4">
<h3 class="text-4xl md:text-6xl font-light text-gray-400 group-hover:text-white group-hover:translate-x-6 transition-all duration-500 ease-out">
Velocore Exchange
</h3>
<div class="flex flex-col items-end">
<span class="font-mono text-xs text-accent mb-2 opacity-0 group-hover:opacity-100 transition-opacity">DeFi Protocol</span>
<span class="font-mono text-xs text-gray-600 group-hover:text-white transition-colors">2023</span>
</div>
</div>
</a>
<!-- Item 2 -->
<a href="#" class="work-item relative border-t border-white/10 py-12 group hover:bg-white/[0.02] transition-colors cursor-none" data-image="https://images.unsplash.com/photo-1620641788421-7a1c342ea42e?q=80&w=1000&auto=format&fit=crop">
<div class="flex justify-between items-baseline relative z-10 px-4">
<h3 class="text-4xl md:text-6xl font-light text-gray-400 group-hover:text-white group-hover:translate-x-6 transition-all duration-500 ease-out">
Onyx Fashion
</h3>
<div class="flex flex-col items-end">
<span class="font-mono text-xs text-accent mb-2 opacity-0 group-hover:opacity-100 transition-opacity">E-Commerce</span>
<span class="font-mono text-xs text-gray-600 group-hover:text-white transition-colors">2023</span>
</div>
</div>
</a>
<!-- Item 3 -->
<a href="#" class="work-item relative border-t border-b border-white/10 py-12 group hover:bg-white/[0.02] transition-colors cursor-none" data-image="https://images.unsplash.com/photo-1639322537228-f710d846310a?q=80&w=1000&auto=format&fit=crop">
<div class="flex justify-between items-baseline relative z-10 px-4">
<h3 class="text-4xl md:text-6xl font-light text-gray-400 group-hover:text-white group-hover:translate-x-6 transition-all duration-500 ease-out">
Carbon DAO
</h3>
<div class="flex flex-col items-end">
<span class="font-mono text-xs text-accent mb-2 opacity-0 group-hover:opacity-100 transition-opacity">Web3 Identity</span>
<span class="font-mono text-xs text-gray-600 group-hover:text-white transition-colors">2024</span>
</div>
</div>
</a>
</div>
</div>
<!-- Dynamic Image Container -->
<img id="hoverImage" src="" alt="Project Preview" class="work-preview-img grayscale contrast-125 brightness-75">
</section>
<!-- PRICING (Glassmorphism Cards) -->
<section id="pricing" class="py-32 bg-void border-b border-white/10">
<div class="max-w-[1440px] mx-auto px-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- Standard -->
<div class="group relative p-12 border border-white/10 bg-[#050505] hover:border-white/20 transition-all duration-500">
<div class="absolute top-0 right-0 p-4 opacity-0 group-hover:opacity-100 transition-opacity">
<i data-lucide="arrow-up-right" class="text-white w-6 h-6"></i>
</div>
<div class="font-mono text-xs text-gray-500 mb-6 uppercase tracking-widest">[ The Blueprint ]</div>
<div class="flex items-baseline gap-2 mb-8">
<h3 class="text-6xl font-light text-white tracking-tighter">$8k</h3>
<span class="text-gray-500">/mo</span>
</div>
<p class="text-gray-400 mb-12 border-l border-accent pl-4 text-sm leading-relaxed max-w-sm">
Rapid deployment for startups. Access to senior design talent and frontend engineering.
</p>
<ul class="space-y-4 font-mono text-xs text-gray-300 mb-12">
<li class="flex items-center gap-3"><span class="w-1 h-1 bg-accent"></span>Design System v2.0</li>
<li class="flex items-center gap-3"><span class="w-1 h-1 bg-accent"></span>React / Next.js Build</li>
<li class="flex items-center gap-3"><span class="w-1 h-1 bg-accent"></span>Weekly Sprints</li>
</ul>
<button class="w-full py-4 border border-white/10 text-white font-mono text-xs hover:bg-white hover:text-black transition-all uppercase tracking-widest">
Initialize
</button>
</div>
<!-- Bespoke -->
<div class="group relative p-12 border border-white/10 bg-[#050505] overflow-hidden">
<!-- Gradient Glow -->
<div class="absolute inset-0 bg-gradient-to-br from-accent/5 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700"></div>
<div class="relative z-10">
<div class="flex justify-between items-start mb-6">
<div class="font-mono text-xs text-accent uppercase tracking-widest">[ The Architect ]</div>
<span class="px-2 py-1 bg-accent text-black text-[10px] font-bold uppercase tracking-wider">Most Popular</span>
</div>
<div class="flex items-baseline gap-2 mb-8">
<h3 class="text-6xl font-light text-white tracking-tighter">Custom</h3>
</div>
<p class="text-gray-400 mb-12 border-l border-white pl-4 text-sm leading-relaxed max-w-sm">
Full-scale digital transformation. Custom shaders, heavy backend, immersive 3D experiences.
</p>
<ul class="space-y-4 font-mono text-xs text-gray-300 mb-12">
<li class="flex items-center gap-3"><span class="w-1 h-1 bg-white"></span>Dedicated Art Director</li>
<li class="flex items-center gap-3"><span class="w-1 h-1 bg-white"></span>WebGL / Three.js</li>
<li class="flex items-center gap-3"><span class="w-1 h-1 bg-white"></span>Smart Contract Integration</li>
</ul>
<button class="w-full py-4 bg-white text-black font-mono text-xs hover:bg-accent hover:border-accent transition-all uppercase tracking-widest">
Contact Sales
</button>
</div>
</div>
</div>
</div>
</section>
<!-- CONTACT (Terminal Style) -->
<section id="contact" class="py-32 bg-[#020202]">
<div class="max-w-3xl mx-auto px-6">
<div class="glass-panel rounded-lg overflow-hidden shadow-2xl transform transition-transform hover:scale-[1.01] duration-500">
<!-- Title Bar -->
<div class="bg-[#111] px-4 py-3 flex items-center justify-between border-b border-white/5">
<div class="flex items-center gap-2">
<div class="w-3 h-3 rounded-full bg-[#FF5F56]"></div>
<div class="w-3 h-3 rounded-full bg-[#FFBD2E]"></div>
<div class="w-3 h-3 rounded-full bg-[#27C93F]"></div>
</div>
<div class="font-mono text-[10px] text-gray-500">guest@aeterna: ~/inquiry</div>
<div class="w-10"></div>
</div>
<!-- Content -->
<div class="p-8 md:p-12 font-mono text-sm relative">
<!-- Matrix Rain Effect Subtle Background -->
<div class="absolute top-0 right-0 p-8 opacity-20 pointer-events-none text-xs text-accent hidden md:block text-right">
<div>CONNECTING...</div>
<div>ENCRYPTED: TLS 1.3</div>
<div>IP: 192.168.0.1</div>
</div>
<form class="space-y-8 relative z-10">
<div class="group">
<label class="block text-gray-600 mb-2 text-xs uppercase tracking-widest group-focus-within:text-accent transition-colors">01. Identity</label>
<input type="text" placeholder="Enter your name" class="w-full bg-transparent border-b border-gray-800 py-3 text-white focus:outline-none focus:border-accent transition-colors placeholder-gray-800">
</div>
<div class="group">
<label class="block text-gray-600 mb-2 text-xs uppercase tracking-widest group-focus-within:text-accent transition-colors">02. Coordinates</label>
<input type="email" placeholder="Enter email address" class="w-full bg-transparent border-b border-gray-800 py-3 text-white focus:outline-none focus:border-accent transition-colors placeholder-gray-800">
</div>
<div class="group">
<label class="block text-gray-600 mb-4 text-xs uppercase tracking-widest">03. Parameters</label>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<label class="cursor-pointer border border-white/10 hover:border-white/40 rounded p-3 text-center transition-all has-[:checked]:bg-white has-[:checked]:text-black">
<input type="radio" name="type" class="hidden">
<span class="text-xs">Web Design</span>
</label>
<label class="cursor-pointer border border-white/10 hover:border-white/40 rounded p-3 text-center transition-all has-[:checked]:bg-white has-[:checked]:text-black">
<input type="radio" name="type" class="hidden">
<span class="text-xs">Development</span>
</label>
<label class="cursor-pointer border border-white/10 hover:border-white/40 rounded p-3 text-center transition-all has-[:checked]:bg-white has-[:checked]:text-black">
<input type="radio" name="type" class="hidden">
<span class="text-xs">Branding</span>
</label>
<label class="cursor-pointer border border-white/10 hover:border-white/40 rounded p-3 text-center transition-all has-[:checked]:bg-white has-[:checked]:text-black">
<input type="radio" name="type" class="hidden">
<span class="text-xs">Audit</span>
</label>
</div>
</div>
<div class="pt-8">
<button type="submit" class="group flex items-center gap-4 text-accent hover:text-white transition-colors">
<span class="text-lg">> Execute Protocol</span>
<div class="h-px flex-1 bg-accent/20 group-hover:bg-white/20 transition-colors"></div>
<span class="w-2 h-2 bg-accent animate-pulse"></span>
</button>
</div>
</form>
</div>
</div>
</div>
</section>
</div><!-- End Main Content -->
<!-- FOOTER (Fixed Reveal) -->
<footer class="footer-fixed bg-white text-black flex flex-col justify-between pt-24 pb-8 px-6">
<div class="max-w-[1440px] mx-auto w-full grid grid-cols-2 md:grid-cols-4 gap-12">
<div>
<h5 class="font-mono text-xs uppercase tracking-widest mb-6">Index</h5>
<ul class="space-y-2 text-sm font-medium opacity-60">
<li><a href="#" class="hover:opacity-100">Work</a></li>
<li><a href="#" class="hover:opacity-100">Services</a></li>
<li><a href="#" class="hover:opacity-100">Agency</a></li>
</ul>
</div>
<div>
<h5 class="font-mono text-xs uppercase tracking-widest mb-6">Connect</h5>
<ul class="space-y-2 text-sm font-medium opacity-60">
<li><a href="#" class="hover:opacity-100">Twitter</a></li>
<li><a href="#" class="hover:opacity-100">LinkedIn</a></li>
<li><a href="#" class="hover:opacity-100">Instagram</a></li>
</ul>
</div>
<div class="col-span-2 md:text-right">
<p class="text-2xl font-light tracking-tight leading-snug">
San Francisco, CA<br>
<a href="mailto:hello@aeterna.design" class="hover:underline decoration-1 underline-offset-4">hello@aeterna.design</a>
</p>
</div>
</div>
<div class="w-full text-center overflow-hidden">
<h1 class="text-[20vw] font-bold leading-none tracking-tighter select-none opacity-100 translate-y-[10%]">AETERNA</h1>
</div>
<div class="flex justify-between items-end border-t border-black/10 pt-4 max-w-[1440px] mx-auto w-full">
<span class="font-mono text-[10px] uppercase">©2024 Aeterna. All rights reserved.</span>
<span class="font-mono text-[10px] uppercase">Scroll to Top</span>
</div>
</footer>
<script>
lucide.createIcons();
// 1. ADVANCED HERO CANVAS ANIMATION
const canvas = document.getElementById('heroCanvas');
const ctx = canvas.getContext('2d');
let width, height;
let particles = [];
const particleCount = 70; // Increased density
function resize() {
width = canvas.width = window.innerWidth;
height = canvas.height = window.innerHeight;
}
window.addEventListener('resize', resize);
resize();
class Particle {
constructor() {
this.x = Math.random() * width;
this.y = Math.random() * height;
this.vx = (Math.random() - 0.5) * 0.5;
this.vy = (Math.random() - 0.5) * 0.5;
this.size = Math.random() * 1.5 + 0.5;
}
update() {
this.x += this.vx;
this.y += this.vy;
if (this.x < 0) this.x = width;
if (this.x > width) this.x = 0;
if (this.y < 0) this.y = height;
if (this.y > height) this.y = 0;
}
draw() {
ctx.fillStyle = 'rgba(255,255,255,0.4)';
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fill();
}
}
// Initialize particles
for(let i=0; i<particleCount; i++) particles.push(new Particle());
// Mouse interaction
let mouse = { x: -100, y: -100 };
window.addEventListener('mousemove', (e) => {
mouse.x = e.clientX;
mouse.y = e.clientY;
// Custom cursor movement
const dot = document.querySelector('.cursor-dot');
const outline = document.querySelector('.cursor-outline');
if(dot && outline) {
dot.style.left = e.clientX + 'px';
dot.style.top = e.clientY + 'px';
// Add slight delay to outline for fluid feel
outline.animate({
left: e.clientX + 'px',
top: e.clientY + 'px'
}, { duration: 500, fill: "forwards" });
}
});
function animate() {
ctx.clearRect(0, 0, width, height);
particles.forEach(p => {
p.update();
p.draw();
// Draw connections
particles.forEach(p2 => {
const dx = p.x - p2.x;
const dy = p.y - p2.y;
const dist = Math.sqrt(dx*dx + dy*dy);
if(dist < 120) {
ctx.strokeStyle = `rgba(255,255,255,${0.05 - dist/2400})`;
ctx.lineWidth = 0.5;
ctx.beginPath();
ctx.moveTo(p.x, p.y);
ctx.lineTo(p2.x, p2.y);
ctx.stroke();
}
});
// Mouse connections
const dx = mouse.x - p.x;
const dy = mouse.y - p.y;
const dist = Math.sqrt(dx*dx + dy*dy);
if (dist < 200) {
ctx.strokeStyle = `rgba(212, 255, 0, ${0.2 - dist/1000})`; // Accent color
ctx.lineWidth = 0.8;
ctx.beginPath();
ctx.moveTo(p.x, p.y);
ctx.lineTo(mouse.x, mouse.y);
ctx.stroke();
}
});
requestAnimationFrame(animate);
}
animate();
// 2. SPOTLIGHT EFFECT LOGIC
const cards = document.querySelectorAll('.spotlight-card');
cards.forEach(card => {
card.addEventListener('mousemove', e => {
const rect = card.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
card.style.setProperty('--x', `${x}px`);
card.style.setProperty('--y', `${y}px`);
});
});
// 3. WORK SECTION IMAGE FOLLOW
const workItems = document.querySelectorAll('.work-item');
const hoverImage = document.getElementById('hoverImage');
workItems.forEach(item => {
item.addEventListener('mousemove', (e) => {
const imgUrl = item.getAttribute('data-image');
if(hoverImage.src !== imgUrl) hoverImage.src = imgUrl;
hoverImage.classList.add('active');
// Offset image slightly from cursor
const x = e.clientX;
const y = e.clientY;
// Use transform for performance
hoverImage.style.left = `${x}px`;
hoverImage.style.top = `${y}px`;
});
item.addEventListener('mouseleave', () => {
hoverImage.classList.remove('active');
});
});
</script>
</body>
</html>