Landing Page
Website Landing Pages
Prompt
Create a flashy landing page for a tech startup using cutting-edge tools and frameworks.
A system prompt was added to support web rendering
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>QuantumLeap – Where Innovation Takes Off</title>
<!-- TailwindCSS (JIT CDN build) -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;800&display=swap" rel="stylesheet">
<!-- Font-Awesome Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/>
<!-- GSAP + ScrollTrigger -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<!-- 3-D tilt effect -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.2/vanilla-tilt.min.js"></script>
<style>
:root{
--grad-1:#0f0c29;
--grad-2:#302b63;
--grad-3:#24243e;
--accent:#00E5FF;
}
body{
font-family:'Poppins',sans-serif;
background:#0e0e16;
color:#f4f4f7;
overflow-x:hidden;
}
/* Animated background for hero */
.hero-bg{
background:linear-gradient(130deg,var(--grad-1),var(--grad-2),var(--grad-3));
background-size:400% 400%;
animation:gradientShift 12s ease infinite;
}
@keyframes gradientShift{
0%{background-position:0% 50%;}
50%{background-position:100% 50%;}
100%{background-position:0% 50%;}
}
/* Glitch text */
.glitch{
position:relative;
font-weight:800;
color:#fff;
}
.glitch::before,
.glitch::after{
content:attr(data-text);
position:absolute;
top:0;
left:0;
width:100%;
overflow:hidden;
clip:rect(0,900px,0,0);
}
.glitch::before{
left:2px;
text-shadow:-2px 0 var(--accent);
animation:glitchTop 2.5s infinite linear alternate-reverse;
}
.glitch::after{
left:-2px;
text-shadow:-2px 0 #ff338e;
animation:glitchBot 2.5s infinite linear alternate-reverse;
}
@keyframes glitchTop{
0%{clip:rect(0,900px,0,0);}
5%{clip:rect(0,900px,45px,0);}
10%{clip:rect(0,900px,0,0);}
15%{clip:rect(0,900px,65px,0);}
20%{clip:rect(0,900px,0,0);}
100%{clip:rect(0,900px,0,0);}
}
@keyframes glitchBot{
0%{clip:rect(0,900px,0,0);}
5%{clip:rect(85px,900px,140px,0);}
10%{clip:rect(0,900px,0,0);}
15%{clip:rect(45px,900px,90px,0);}
20%{clip:rect(0,900px,0,0);}
100%{clip:rect(0,900px,0,0);}
}
</style>
</head>
<body>
<!-- HERO -->
<section class="hero-bg min-h-screen flex flex-col justify-center items-center text-center px-6 relative">
<h1 class="glitch text-5xl sm:text-7xl lg:text-8xl tracking-tight" data-text="QuantumLeap">QuantumLeap</h1>
<p class="mt-6 text-lg sm:text-2xl max-w-2xl text-gray-200">Build, scale & deploy with the world’s most adaptive cloud platform—powered by quantum-inspired tech.</p>
<a href="#features" class="mt-10 inline-flex items-center gap-3 px-8 py-4 rounded-full text-lg font-semibold bg-cyan-500 hover:bg-cyan-400 text-gray-900 shadow-lg shadow-cyan-700/40 transition">
Get Early Access <i class="fa-solid fa-rocket-launch"></i>
</a>
<!-- subtle moving blobs -->
<span class="absolute -top-20 -left-20 w-72 h-72 bg-cyan-500/10 rounded-full blur-3xl animate-pulse"></span>
<span class="absolute -bottom-20 -right-20 w-72 h-72 bg-fuchsia-500/10 rounded-full blur-3xl animate-pulse"></span>
</section>
<!-- FEATURES -->
<section id="features" class="relative py-24 bg-[#0e0e16]">
<div class="absolute inset-x-0 -top-24 pointer-events-none w-full h-24 bg-gradient-to-b from-white/5 to-transparent"></div>
<div class="max-w-6xl mx-auto px-6">
<h2 class="text-4xl sm:text-5xl font-bold mb-4 text-center">Why QuantumLeap?</h2>
<p class="text-center text-gray-400 mb-16 max-w-2xl mx-auto">We fuse bleeding-edge research with pragmatic engineering so you can focus on building—fast.</p>
<div class="grid md:grid-cols-3 gap-10">
<!-- Card -->
<div class="bg-gradient-to-br from-[#202036] to-[#151522] p-8 rounded-2xl shadow-lg border border-white/10" data-tilt data-tilt-max="12">
<i class="fa-solid fa-bolt-lightning text-3xl text-cyan-500 mb-6"></i>
<h3 class="text-2xl font-semibold mb-3">Instant Scaling</h3>
<p class="text-gray-400">Auto-scales to millions of requests & zero in seconds using predictive AI heuristics.</p>
</div>
<!-- Card -->
<div class="bg-gradient-to-br from-[#202036] to-[#151522] p-8 rounded-2xl shadow-lg border border-white/10" data-tilt data-tilt-max="12">
<i class="fa-solid fa-shield-halved text-3xl text-cyan-500 mb-6"></i>
<h3 class="text-2xl font-semibold mb-3">Quantum-Grade Security</h3>
<p class="text-gray-400">Post-quantum encryption baked in; your data remains future-proof against attacks.</p>
</div>
<!-- Card -->
<div class="bg-gradient-to-br from-[#202036] to-[#151522] p-8 rounded-2xl shadow-lg border border-white/10" data-tilt data-tilt-max="12">
<i class="fa-solid fa-gauge-high text-3xl text-cyan-500 mb-6"></i>
<h3 class="text-2xl font-semibold mb-3">Sub-Millisecond Latency</h3>
<p class="text-gray-400">Edge-native network ensures the fastest response times around the globe.</p>
</div>
</div>
</div>
</section>
<!-- STATS -->
<section class="py-24 bg-gradient-to-b from-[#151522] to-[#0e0e16]">
<div class="max-w-6xl mx-auto px-6 grid sm:grid-cols-2 md:grid-cols-4 gap-10 text-center">
<div>
<span class="counter text-5xl font-bold" data-target="99.99">0</span><span class="text-cyan-500 text-4xl font-bold">%</span>
<p class="mt-2 text-gray-400">Uptime SLA</p>
</div>
<div>
<span class="counter text-5xl font-bold" data-target="40">0</span><span class="text-cyan-500 text-4xl font-bold">ms</span>
<p class="mt-2 text-gray-400">Median Latency</p>
</div>
<div>
<span class="counter text-5xl font-bold" data-target="120">0</span><span class="text-cyan-500 text-4xl font-bold">+</span>
<p class="mt-2 text-gray-400">Edge Locations</p>
</div>
<div>
<span class="counter text-5xl font-bold" data-target="0">0</span><span class="text-cyan-500 text-4xl font-bold">$</span>
<p class="mt-2 text-gray-400">To Start</p>
</div>
</div>
</section>
<!-- CTA -->
<section class="relative py-28 bg-cyan-500 overflow-hidden">
<div class="absolute -top-32 -left-32 w-96 h-96 bg-white/10 rounded-full blur-3xl"></div>
<div class="absolute -bottom-32 -right-32 w-96 h-96 bg-white/10 rounded-full blur-3xl"></div>
<div class="relative z-10 max-w-4xl mx-auto px-6 text-center">
<h2 class="text-4xl sm:text-5xl font-extrabold text-gray-900">Ready to Leap Forward?</h2>
<p class="mt-6 text-lg text-gray-900/90">Join thousands of developers shipping at lightspeed.</p>
<a href="#" class="mt-10 inline-flex items-center gap-3 px-10 py-5 rounded-full text-lg font-semibold bg-gray-900 hover:bg-gray-800 text-white shadow-lg shadow-gray-900/40 transition">
Request Invite <i class="fa-solid fa-paper-plane"></i>
</a>
</div>
</section>
<!-- FOOTER -->
<footer class="py-8 bg-[#0e0e16] text-center text-gray-500 text-sm">
© <span id="year"></span> QuantumLeap Inc. All rights reserved.
</footer>
<!-- JS -->
<script>
// Set current year
document.getElementById('year').textContent = new Date().getFullYear();
// VanillaTilt init for cards
VanillaTilt.init(document.querySelectorAll("[data-tilt]"));
// GSAP counters animation
gsap.utils.toArray(".counter").forEach((el)=>{
const target = +el.dataset.target;
gsap.fromTo(el,{innerText:0},{innerText:target,duration:2,scrollTrigger:{trigger:el,start:"top 80%"},ease:"power1.in",snap:{innerText:1}, onUpdate:function(){
el.innerText = (+el.innerText).toLocaleString();
}});
});
</script>
</body>
</html>
```Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aetherius - The Future of Collaboration</title>
<style>
/*
* FONT IMPORT (Google Fonts)
*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
/*
* CSS VARIABLES & RESET
*/
:root {
--primary-color: #00f2fe; /* vibrant cyan */
--secondary-color: #ff00c1; /* vibrant magenta */
--dark-color: #07021a; /* deep space blue */
--light-color: #f4f4f4;
--glass-bg: rgba(255, 255, 255, 0.05);
--border-color: rgba(255, 255, 255, 0.1);
--shadow-color: rgba(0, 242, 254, 0.2);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Poppins', sans-serif;
background-color: var(--dark-color);
color: var(--light-color);
line-height: 1.6;
overflow-x: hidden;
position: relative;
}
/*
* ANIMATED GRADIENT BACKGROUND
*/
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: var(--dark-color);
pointer-events: none;
}
.gradient-blob {
position: fixed;
width: 600px;
height: 600px;
border-radius: 50%;
filter: blur(150px);
z-index: -1;
opacity: 0.6;
pointer-events: none;
}
#blob1 {
background: var(--primary-color);
animation: move1 25s infinite alternate;
}
#blob2 {
background: var(--secondary-color);
animation: move2 30s infinite alternate;
}
@keyframes move1 {
from { transform: translate(-20vw, 20vh) scale(0.8); }
to { transform: translate(50vw, -30vh) scale(1.2); }
}
@keyframes move2 {
from { transform: translate(60vw, 70vh) scale(0.9); }
to { transform: translate(-10vw, 40vh) scale(1.1); }
}
/*
* UTILITIES & SHARED STYLES
*/
.container {
max-width: 1200px;
margin: auto;
padding: 0 2rem;
}
h1, h2, h3 {
font-weight: 600;
line-height: 1.2;
}
h1 { font-size: 3rem; }
h2 { font-size: 2.5rem; text-align: center; margin-bottom: 3rem; }
p { font-size: 1.1rem; margin: 1rem 0; }
a { color: var(--primary-color); text-decoration: none; }
section {
padding: 6rem 0;
}
.btn {
display: inline-block;
padding: 0.8rem 2rem;
border: 1px solid var(--primary-color);
background: transparent;
color: var(--primary-color);
border-radius: 50px;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 0 10px var(--shadow-color), inset 0 0 5px var(--shadow-color);
text-shadow: 0 0 5px var(--primary-color);
}
.btn:hover {
background: var(--primary-color);
color: var(--dark-color);
box-shadow: 0 0 20px var(--shadow-color), inset 0 0 10px rgba(0,0,0,0.2);
transform: translateY(-3px);
text-shadow: none;
}
/* Classes for scroll animations */
.hidden {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.show {
opacity: 1;
transform: translateY(0);
}
/*
* HEADER & NAVIGATION
*/
.main-nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem 0;
position: fixed;
width: 100%;
top: 0;
z-index: 10;
background: rgba(7, 2, 26, 0.5);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border-color);
}
.main-nav .logo {
font-size: 1.8rem;
font-weight: 700;
color: var(--light-color);
margin-left: 2rem;
}
.main-nav .logo span {
color: var(--primary-color);
}
/*
* HERO SECTION
*/
.hero {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 0 1rem;
}
.hero h1 {
font-size: clamp(2.5rem, 6vw, 5rem);
margin-bottom: 1rem;
text-shadow: 0 0 20px rgba(0,0,0,0.5);
}
.hero h1 .highlight {
background: -webkit-linear-gradient(45deg, var(--primary-color), var(--secondary-color));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Typing cursor effect */
.hero h1 span.cursor {
display: inline-block;
background-color: var(--primary-color);
margin-left: 0.1rem;
width: 4px;
animation: blink 1s infinite;
}
.hero p {
font-size: 1.3rem;
max-width: 600px;
margin: 1.5rem 0 2.5rem;
font-weight: 300;
}
@keyframes blink {
0% { background-color: var(--primary-color); }
49% { background-color: var(--primary-color); }
50% { background-color: transparent; }
99% { background-color: transparent; }
100% { background-color: var(--primary-color); }
}
/*
* FEATURES SECTION
*/
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
}
.feature-card {
background: var(--glass-bg);
border: 1px solid var(--border-color);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border-radius: 15px;
padding: 2.5rem 2rem;
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
border-color: var(--primary-color);
}
.feature-icon {
background: -webkit-linear-gradient(45deg, var(--primary-color), var(--secondary-color));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 3.5rem;
margin-bottom: 1rem;
}
.feature-card h3 {
font-size: 1.5rem;
margin-bottom: 0.5rem;
color: var(--light-color);
}
.feature-card p {
font-size: 1rem;
font-weight: 300;
}
/*
* FOOTER
*/
.footer {
text-align: center;
padding: 2rem 0;
margin-top: 4rem;
background: rgba(0,0,0,0.2);
border-top: 1px solid var(--border-color);
font-size: 0.9rem;
}
/*
* RESPONSIVE DESIGN
*/
@media (max-width: 768px) {
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
.main-nav { padding: 1rem; }
.main-nav .logo { margin-left: 1rem; }
.hero { padding: 0 1rem; }
};
</style>
</head>
<body>
<!-- Animated Background Blobs -->
<div class="gradient-blob" id="blob1"></div>
<div class="gradient-blob" id="blob2"></div>
<nav class="main-nav">
<div class="logo">Aetherius<span>.</span></div>
</nav>
<!-- Hero Section -->
<header class="hero">
<h1 id="typewriter-headline">
<!-- JS will populate this -->
<span class="cursor"></span>
</h1>
<p class="hidden">
The next-generation synergy platform. Unify your team's workflow with the power of integrated AI and seamless collaboration tools.
</p>
<a href="#features" class="btn hidden">Discover More</a>
</header>
<main>
<!-- Features Section -->
<section id="features" class="container">
<h2 class="hidden">Everything You Need. Nothing You Don't.</h2>
<div class="features-grid">
<div class="feature-card hidden">
<!-- Icon SVG -->
<div class="feature-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path><path d="m9.5 9.5 5 5"></path><path d="m14.5 9.5-5 5"></path></svg>
</div>
<h3>AI-Powered Insights</h3>
<p>Leverage machine learning to predict project bottlenecks and optimize resource allocation automatically.</p>
</div>
<div class="feature-card hidden">
<div class="feature-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path><path d="M19 10v2a7 7 0 0 1-14 0v-2"></path><line x1="12" y1="19" x2="12" y2="23"></line><line x1="8" y1="23" x2="16" y2="23"></line></svg>
</div>
<h3>Real-Time Sync</h3>
<p>Communicate and collaborate with your team across the globe with zero latency and perfect synchronization.</p>
</div>
<div class="feature-card hidden">
<div class="feature-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
</div>
<h3>Dynamic Dashboards</h3>
<p>Visualize your data with fully customizable, interactive dashboards that bring your KPIs to life.</p>
</div>
</div>
</section>
</main>
<footer class="footer">
<div class="container">
<p>© 2024 Aetherius Inc. The Future is Now.</p>
</div>
</footer>
<script>
document.addEventListener('DOMContentLoaded', function() {
// --- SCROLL-TRIGGERED FADE-IN ANIMATION ---
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add('show');
}
});
}, {
threshold: 0.1 // Trigger when 10% of the element is visible
});
const hiddenElements = document.querySelectorAll('.hidden');
hiddenElements.forEach((el) => observer.observe(el));
// --- TYPEWRITER EFFECT FOR HERO HEADLINE ---
const typewriterElement = document.getElementById('typewriter-headline');
const words = ["Unleash Your Team's <span class='highlight'>Potential.</span>", "Build the Future, <span class='highlight'>Together.</span>", "Welcome to <span class='highlight'>Aetherius.</span>"];
let wordIndex = 0;
let charIndex = 0;
let isDeleting = false;
function type() {
const currentWord = words[wordIndex];
let displayText = '';
if (isDeleting) {
// Deleting text
displayText = currentWord.substring(0, charIndex--);
} else {
// Typing text
displayText = currentWord.substring(0, charIndex++);
}
typewriterElement.innerHTML = `${displayText}<span class="cursor"></span>`;
let typeSpeed = isDeleting ? 75 : 150;
if (!isDeleting && charIndex === currentWord.length) {
// Pause at end of word
typeSpeed = 2000;
isDeleting = true;
} else if (isDeleting && charIndex === 0) {
// Move to next word
isDeleting = false;
wordIndex = (wordIndex + 1) % words.length;
typeSpeed = 500;
}
setTimeout(type, typeSpeed);
}
type(); // Start the effect
});
</script>
</body>
</html>
```Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>GlowTech - The Future, Accelerated</title>
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Animate.css CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<!-- Heroicons -->
<script src="https://unpkg.com/feather-icons"></script>
<!-- Favicon -->
<link rel="icon" href="https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f680.svg">
<style>
html {
scroll-behavior: smooth;
background: radial-gradient(ellipse at 70% 33%, #72F7FC 0%, #633AFD 100%);
}
.glass {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(16px);
border: 1px solid rgba(255,255,255,0.08);
}
/* Glowing Neomorphism Card Shadow */
.neo-glow {
box-shadow: 0 4px 32px 0 #7229fc88, 0 2px 4px #40406444;
}
/* For code highlight styling */
pre {
background: #13132b;
color: #b1c2e0;
border-radius: 8px;
padding: 1em;
}
.pulse {
animation: pulseGlow 2s infinite;
}
@keyframes pulseGlow {
0% { box-shadow: 0 0 0 0 #78efd9 }
70% { box-shadow: 0 0 24px 8px #78efd988 }
100% { box-shadow: 0 0 0 0 #78efd9 }
}
</style>
</head>
<body class="font-sans text-white min-h-screen flex flex-col">
<!-- Navigation -->
<nav class="flex justify-between items-center px-7 py-4 glass fixed w-full z-30 neo-glow">
<div class="flex items-center gap-2">
<span class="text-2xl font-extrabold tracking-tight text-cyan-300 animate__animated animate__fadeInLeft">🚀 GlowTech</span>
</div>
<div class="hidden md:flex gap-8 text-lg">
<a href="#about" class="hover:text-cyan-400 transition">About</a>
<a href="#features" class="hover:text-cyan-400 transition">Features</a>
<a href="#cta" class="hover:text-cyan-400 transition">Request Access</a>
</div>
</nav>
<!-- Hero Section -->
<section class="flex flex-col md:flex-row items-center justify-between mt-24 md:mt-32 px-7 md:px-24">
<div class="flex-1 space-y-8 animate__animated animate__fadeInLeft">
<h1 class="text-5xl md:text-7xl font-extrabold leading-tight text-white drop-shadow-xl">
Accelerate <span class="text-cyan-400">Innovation</span><br>
with <span class="text-indigo-300">GlowTech</span>
</h1>
<p class="text-xl md:text-2xl text-cyan-100 max-w-xl">
AI-powered platform to launch, scale, and connect tech solutions at hyperspeed.<br>
<span class="bg-cyan-700/30 px-2 py-1 rounded-md">Next-gen automation, frictionless teamwork, infinite scalability.</span>
</p>
<div>
<a href="#cta" class="inline-flex items-center gap-2 transition neo-glow bg-cyan-400 text-indigo-900 hover:bg-white font-bold px-6 py-3 rounded-full text-lg shadow-lg pulse">
<span>Request Access</span>
<span data-feather="arrow-right"></span>
</a>
</div>
</div>
<div class="flex-1 flex justify-center mt-12 md:mt-0 animate__animated animate__fadeInRight">
<div class="neo-glow rounded-3xl p-5 bg-gradient-to-br from-cyan-700/80 to-indigo-800/80 glass relative">
<img src="https://assets-global.website-files.com/5e9aa66fd388c778727d3d4c/61f046e4417b6c60b734c42d_web3-hero%20(2).png" class="w-[380px] aspect-video object-cover rounded-2xl">
<span class="absolute top-6 right-6 text-cyan-400 animate-bounce text-3xl" data-feather="zap"></span>
<span class="absolute bottom-6 left-6 bg-cyan-500/30 px-4 py-1 rounded-lg text-xs shadow-lg">AI-Powered • Blazingly Fast • 2024</span>
</div>
</div>
</section>
<!-- Features Section -->
<section id="features" class="mt-32 px-7 md:px-24">
<h2 class="text-4xl md:text-5xl font-bold mb-12 animate__animated animate__fadeInUp text-center">Elevate Your Stack</h2>
<div class="grid md:grid-cols-3 gap-8">
<div class="glass neo-glow rounded-3xl p-8 flex flex-col items-center text-center animate__animated animate__fadeInUp animate__delay-1s">
<span class="bg-cyan-400/10 p-4 rounded-full mb-4"><i data-feather="cpu" class="w-10 h-10 text-cyan-400"></i></span>
<h3 class="font-bold text-xl mb-2 text-cyan-200">AI Automation Core</h3>
<p class="text-cyan-100 text-lg">Workflow orchestration and AI-driven task delegation to supercharge productivity.</p>
</div>
<div class="glass neo-glow rounded-3xl p-8 flex flex-col items-center text-center animate__animated animate__fadeInUp animate__delay-2s">
<span class="bg-cyan-400/10 p-4 rounded-full mb-4"><i data-feather="cloud-lightning" class="w-10 h-10 text-cyan-400"></i></span>
<h3 class="font-bold text-xl mb-2 text-cyan-200">Cloud-First Scalability</h3>
<p class="text-cyan-100 text-lg">Serverless backbone scales instantly—no more ops nightmares or growing pains.</p>
</div>
<div class="glass neo-glow rounded-3xl p-8 flex flex-col items-center text-center animate__animated animate__fadeInUp animate__delay-3s">
<span class="bg-cyan-400/10 p-4 rounded-full mb-4"><i data-feather="users" class="w-10 h-10 text-cyan-400"></i></span>
<h3 class="font-bold text-xl mb-2 text-cyan-200">Real-Time Collaboration</h3>
<p class="text-cyan-100 text-lg">Seamless teamwork with live status, distributed boards, and instant feedback.</p>
</div>
</div>
</section>
<!-- Code demo / API Section -->
<section id="about" class="mt-32 px-7 md:px-24 flex flex-col md:flex-row gap-8">
<div class="flex-1">
<h2 class="text-4xl md:text-5xl font-bold mb-6 animate__animated animate__fadeInLeft">Developers: Supercharge Your Workflow</h2>
<p class="text-lg text-cyan-200 animate__animated animate__fadeInLeft animate__delay-1s">
Easily integrate GlowTech via our cloud API or use out-of-the-box SDKs.<br>
<span class="font-bold text-cyan-300">Open, composable, secure—and always bleeding edge.</span>
</p>
</div>
<div class="flex-1 bg-gradient-to-br from-indigo-900/80 to-cyan-800/60 rounded-2xl glass neo-glow p-6 animate__animated animate__fadeInRight">
<pre>
<span class="text-cyan-400">// Connect to the GlowTech cloud</span>
import { Glow } from 'glowtech-sdk'
const glow = new Glow({ apiKey: "YOUR-API-KEY" });
<span class="text-cyan-400">// Automate a workflow with one call</span>
glow.workflow.create({
tasks: ["analyze", "summarize", "notifyTeam"],
triggers: ["newMessage"],
onComplete: () => console.log("All done! 🚀")
});
</pre>
</div>
</section>
<!-- CTA Section -->
<section id="cta" class="mt-32 mb-24 flex flex-col items-center gap-8 animate__animated animate__pulse animate__infinite">
<h2 class="text-center text-4xl md:text-5xl font-extrabold animate__animated animate__tada text-cyan-300">Be the First to Glow</h2>
<p class="text-lg text-cyan-100 text-center max-w-2xl">
We’re opening access to a select group of visionaries.<br>
Sign up to get early invites, resources, and insider perks.
</p>
<form class="w-full max-w-md flex flex-col gap-4 glass neo-glow p-8 rounded-2xl" autocomplete="off">
<input type="email" required placeholder="Your email" class="rounded-lg px-4 py-3 bg-indigo-900/70 text-cyan-200 placeholder-cyan-400 border-2 border-cyan-400/40 focus:border-cyan-300 focus:outline-none transition">
<button type="submit" class="bg-cyan-400 hover:bg-white text-indigo-900 font-bold py-3 rounded-lg transition text-lg">Request Early Access</button>
</form>
</section>
<footer class="text-center text-cyan-200 mb-6 mt-12 text-sm">
© 2024 GlowTech · Crafted with <span class="text-pink-400">♥</span>
</footer>
<script>
feather.replace();
// Handle form submit (mock)
document.querySelector("form").addEventListener("submit", function(e){
e.preventDefault();
const form = e.target;
form.innerHTML = '<div class="text-cyan-200 text-center text-xl p-6">🎉 Thanks! We\'ll be in touch soon.</div>';
});
</script>
</body>
</html>
```
Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>NeonTech Solutions</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<script src="https://unpkg.com/@heroicons/react@1.0.6/dist/index.umd.js"></script>
<style>
/* Neon Glow for Buttons */
.neon-border {
box-shadow: 0 0 5px #00f6ff, 0 0 10px #00f6ff;
}
/* Parallax Background */
.parallax-bg {
background: linear-gradient(to bottom right, #1a202c, #2d3748);
}
</style>
</head>
<body class="parallax-bg text-white overflow-x-hidden" x-data="{navOpen: false, darkMode: false}" :class="{'dark': darkMode}">
<div class="fixed top-0 left-0 right-0 z-50 shadow-md" data-aos="fade-down">
<nav class="bg-black bg-opacity-80 backdrop-filter backdrop-blur-lg">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<div class="flex items-center">
<span class="font-bold text-transparent text-2xl bg-clip-text bg-gradient-to-r from-blue-400 to-teal-400">NeonTech</span>
</div>
<div class="hidden md:block">
<a href="#" class="mx-4 text-white hover:text-blue-400 transition-colors">Home</a>
<a href="#features" class="mx-4 text-white hover:text-blue-400 transition-colors">Features</a>
<a href="#about" class="mx-4 text-white hover:text-blue-400 transition-colors">About</a>
<a href="#contact" class="mx-4 text-white hover:text-blue-400 transition-colors">Contact</a>
<button @click="darkMode = !darkMode" class="ml-4 text-white">
<span x-show="!darkMode" class="heroicon-o-moon w-5 h-5"></span>
<span x-show="darkMode" class="heroicon-o-sun w-5 h-5"></span>
</button>
</div>
<div class="md:hidden">
<button @click="navOpen = !navOpen" class="text-white">
<span x-show="!navOpen" class="heroicon-o-menu w-6 h-6"></span>
<span x-show="navOpen" class="heroicon-o-x w-6 h-6"></span>
</button>
</div>
</div>
</div>
<div x-show="navOpen" class="md:hidden bg-black bg-opacity-80 p-4">
<a href="#" class="block py-2 text-white hover:text-blue-400">Home</a>
<a href="#features" class="block py-2 text-white hover:text-blue-400">Features</a>
<a href="#about" class="block py-2 text-white hover:text-blue-400">About</a>
<a href="#contact" class="block py-2 text-white hover:text-blue-400">Contact</a>
<button @click="darkMode = !darkMode" class="mt-2 flex items-center text-white">
<span x-show="!darkMode" class="heroicon-o-moon w-5 h-5 mr-2"></span>
<span x-show="darkMode" class="heroicon-o-sun w-5 h-5 mr-2"></span>
<span x-text="darkMode ? 'Light Mode' : 'Dark Mode'"></span>
</button>
</div>
</nav>
</div>
<header class="pt-20 flex items-center justify-center" :class="{'bg-gradient-to-br from-black via-gray-900 to-slate-800': !darkMode, 'bg-gradient-to-br from-slate-900 via-gray-800 to-slate-900': darkMode}" data-aos="fade-up">
<div class="relative flex flex-col items-center text-center w-full px-4 py-20">
<h1 class="text-5xl md:text-7xl font-extrabold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-teal-400">
Transform Your Business With AI
</h1>
<p class="text-lg md:text-xl mb-8 opacity-75" data-aos="fade-up" data-aos-delay="200">Next-gen platforms to drive innovation</p>
<div data-aos="fade-up" data-aos-delay="400">
<button class="neon-border px-8 py-3 bg-blue-600 hover:bg-blue-500 transition-all active:scale-95 transform rounded-full text-white font-medium mx-2 mb-2">Get Started</button>
<button class="px-8 py-3 border-2 border-green-400 hover:border-green-300 hover:bg-green-400 hover:text-gray-900 rounded-full text-white font-medium mx-2 mb-2 transition hover:shadow-lg">Contact Sales</button>
</div>
<div class="mt-16" data-aos="zoom-out-up" data-aos-delay="600">
<svg class="w-24 h-24 mx-auto text-blue-400" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 4.5l8 8.5-2 2.5-5-5.5V18H9V9.5l-5 5.5-2-2.5 10-10z"/>
</svg>
</div>
</div>
</header>
<section id="features" class="py-20" data-aos="fade-up">
<div class="max-w-6xl mx-auto px-4">
<h2 class="text-4xl font-bold text-center mb-12 bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-teal-400">Our Features</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-10">
<div class="transform hover:scale-105 transition-all duration-300 p-6 rounded-lg backdrop-filter backdrop-blur-sm bg-gray-800 bg-opacity-30 border border-blue-500">
<div class="w-16 h-16 mx-auto mb-4">
<span class="heroicon-o-cube text-blue-400 w-full h-full"></span>
</div>
<h3 class="text-2xl font-bold text-center mb-2">AI-Powered Insights</h3>
<p class="text-center opacity-75">Transform your data into actionable strategies with AI-driven analytics.</p>
</div>
<div class="transform hover:scale-105 transition-all duration-300 p-6 rounded-lg backdrop-filter backdrop-blur-sm bg-gray-800 bg-opacity-30 border border-blue-500">
<div class="w-16 h-16 mx-auto mb-4">
<span class="heroicon-o-light-bulb text-green-400 w-full h-full"></span>
</div>
<h3 class="text-2xl font-bold text-center mb-2">Predictive Solutions</h3>
<p class="text-center opacity-75">Anticipate market trends and make data-backed decisions for tomorrow.</p>
</div>
<div class="transform hover:scale-105 transition-all duration-300 p-6 rounded-lg backdrop-filter backdrop-blur-sm bg-gray-800 bg-opacity-30 border border-blue-500">
<div class="w-16 h-16 mx-auto mb-4">
<span class="heroicon-o-globe-alt text-purple-400 w-full h-full"></span>
</div>
<h3 class="text-2xl font-bold text-center mb-2">Global Coverage</h3>
<p class="text-center opacity-75">Expand your operations seamlessly with our international network support.</p>
</div>
</div>
</div>
</section>
<section id="about" class="py-20 bg-gray-900" data-aos="fade-up" data-aos-delay="200">
<div class="max-w-6xl mx-auto px-4 flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-10 md:mb-0" data-aos="zoom-in">
<div class="relative bg-gray-800 rounded-2xl overflow-hidden shadow-2xl">
<img src="https://via.placeholder.com/600x400" alt="About Vision" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-gradient-to-r from-blue-600 to-teal-600 opacity-30"></div>
</div>
</div>
<div class="md:w-1/2 md:pl-12">
<h2 class="text-4xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-teal-400">Innovating Tomorrow's Tech</h2>
<p class="mb-6 opacity-75">NeonTech Solutions pioneers the future of digital innovation. We harness the power of artificial intelligence, advanced computing, and global networks to deliver cutting-edge solutions tailored to your business needs.</p>
<p class="opacity-75">Our mission is to empower organizations through revolutionary technology. We believe in creating smart systems that adapt, evolve, and drive efficiency in ways previously unimaginable.</p>
</div>
</div>
</section>
<section class="py-20 bg-blue-900" data-aos="fade-up" data-aos-delay="300">
<div class="max-w-4xl mx-auto px-4 text-center">
<h2 class="text-4xl font-bold mb-6 gradient-text">Accelerate Your Growth Today</h2>
<p class="text-xl opacity-90 mb-10">Join the leading tech companies revolutionizing their digital landscape with NeonTech platforms.</p>
<div class="flex flex-wrap justify-center gap-4">
<button class="neon-border bg-blue-600 hover:bg-blue-500 transition-all px-8 py-4 text-white font-bold rounded-full text-lg">Start Free Trial</button>
<button class="px-8 py-4 border-2 border-teal-400 text-white hover:bg-teal-400 hover:text-gray-900 transition rounded-full text-lg">Schedule Demo</button>
</div>
</div>
</section>
<section id="contact" class="py-20" data-aos="fade-up" data-aos-delay="400">
<div class="max-w-4xl mx-auto px-4">
<h2 class="text-4xl font-bold text-center mb-12 bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-teal-400">Contact Us</h2>
<form class="space-y-6 backdrop-filter backdrop-blur-lg bg-opacity-20 p-8 rounded-xl border border-blue-500">
<div class="grid md:grid-cols-2 gap-6">
<div>
<label class="block mb-2 font-bold text-sm">Name</label>
<input type="text" class="w-full bg-gray-800 rounded px-4 py-3 border border-gray-700 focus:border-blue-400 focus:outline-none focus:ring-1 focus:ring-blue-400" placeholder="John Doe"/>
</div>
<div>
<label class="block mb-2 font-bold text-sm">Email</label>
<input type="email" class="w-full bg-gray-800 rounded px-4 py-3 border border-gray-700 focus:border-blue-400 focus:outline-none focus:ring-1 focus:ring-blue-400" placeholder="john@company.com"/>
</div>
</div>
<div>
<label class="block mb-2 font-bold text-sm">Message</label>
<textarea rows="5" class="w-full bg-gray-800 rounded px-4 py-3 border border-gray-700 focus:border-blue-400 focus:outline-none focus:ring-1 focus:ring-blue-400" placeholder="Your message..."></textarea>
</div>
<div>
<button type="submit" class="w-full neon-border bg-gradient-to-r from-blue-500 to-teal-400 hover:from-blue-400 hover:to-teal-300 px-8 py-3 text-white font-bold rounded-full transition-all active:scale-95">Send Message</button>
</div>
</form>
</div>
</section>
<footer class="py-12 bg-gray-900" data-aos="fade-up">
<div class="max-w-6xl mx-auto px-4">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="mb-6 md:mb-0">
<span class="font-bold text-2xl bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-teal-400">NeonTech Solutions</span>
</div>
<div class="flex space-x-6">
<a href="#" class="text-blue-400 hover:text-white transition-colors">
<span class="heroicon-o-globe-alt w-6 h-6"></span>
</a>
<a href="#" class="text-blue-400 hover:text-white transition-colors">
<span class="heroicon-o-linkedin w-6 h-6"></span>
</a>
<a href="#" class="text-blue-400 hover:text-white transition-colors">
<span class="heroicon-o-twitter w-6 h-6"></span>
</a>
<a href="#" class="text-blue-400 hover:text-white transition-colors">
<span class="heroicon-o-github w-6 h-6"></span>
</a>
</div>
</div>
<div class="mt-8 border-t border-gray-800 pt-6 text-center text-sm opacity-75">
© 2024 NeonTech Solutions. All rights reserved. Built with Next.js, Tailwind CSS, and Vercel.
</div>
</div>
</footer>
<!-- External Scripts -->
<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
AOS.init({
duration: 1000,
once: true,
});
});
</script>
</body>
</html>
```Drag to resize
# Modern Tech Startup Landing Page
Here's a sleek, interactive landing page built with cutting-edge web technologies including React, Tailwind CSS, and Framer Motion for animations:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NexusTech | Future-Driven Solutions</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src="https://unpkg.com/framer-motion@10.16.4/dist/framer-motion.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Poppins', sans-serif;
background: linear-gradient(135deg, #000428, #004e92);
color: white;
min-height: 100vh;
}
.gradient-text {
background: linear-gradient(90deg, #00d2ff, #3a7bd5);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.glass-effect {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.card-hover {
transition: all 0.3s ease;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const { motion } = Motion;
function App() {
const [email, setEmail] = React.useState('');
return (
<div className="min-h-screen overflow-x-hidden">
{/* Navigation */}
<nav className="glass-effect py-6 px-8 flex justify-between items-center fixed w-full z-50">
<motion.div
initial={{ opacity: 0, x: -50 }}
animate={{ opacity: 1, x: 0 }}
className="flex items-center space-x-2"
>
<i className="fas fa-atom text-3xl gradient-text"></i>
<span className="text-2xl font-bold gradient-text">NexusTech</span>
</motion.div>
<motion.div
initial={{ opacity: 0, x: 50 }}
animate={{ opacity: 1, x: 0 }}
className="hidden md:flex space-x-8"
>
<a href="#features" className="hover:text-cyan-400 transition">Features</a>
<a href="#solutions" className="hover:text-cyan-400 transition">Solutions</a>
<a href="#pricing" className="hover:text-cyan-400 transition">Pricing</a>
<a href="#contact" className="px-4 py-2 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-full hover:opacity-90 transition">Get Started</a>
</motion.div>
<button className="md:hidden text-2xl">
<i className="fas fa-bars"></i>
</button>
</nav>
{/* Hero Section */}
<section className="pt-32 pb-20 px-8">
<div className="max-w-6xl mx-auto grid md:grid-cols-2 gap-12 items-center">
<motion.div
initial={{ opacity: 0, y: 50 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
>
<h1 className="text-5xl md:text-6xl font-bold leading-tight mb-6">
Transform Your <span className="gradient-text">Digital Future</span> With AI
</h1>
<p className="text-xl text-gray-300 mb-8">
Cutting-edge solutions for businesses ready to embrace the next generation of technology.
</p>
<div className="flex flex-col sm:flex-row gap-4">
<motion.button
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
className="px-8 py-3 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-full font-medium"
>
Start Free Trial
</motion.button>
<motion.button
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
className="px-8 py-3 border border-white rounded-full font-medium hover:bg-white hover:text-gray-900 transition"
>
Watch Demo
</motion.button>
</div>
</motion.div>
<motion.div
initial={{ opacity: 0, scale: 0.8 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.8, delay: 0.2 }}
className="relative"
>
<div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-cyan-500 to-blue-600 blur-xl opacity-20"></div>
<img
src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1600&q=80"
alt="AI Technology"
className="relative rounded-2xl shadow-2xl w-full h-auto"
/>
<motion.div
animate={{
y: [0, 15, 0],
}}
transition={{
duration: 4,
repeat: Infinity,
ease: "easeInOut",
}}
className="absolute -bottom-5 -left-5 bg-cyan-700 px-4 py-2 rounded-full shadow-lg"
>
<span>Real-time analytics</span>
</motion.div>
<motion.div
animate={{
y: [0, -15, 0],
}}
transition={{
duration: 5,
repeat: Infinity,
ease: "easeInOut",
delay: 1
}}
className="absolute -top-5 -right-5 bg-blue-700 px-4 py-2 rounded-full shadow-lg"
>
<span>AI-powered</span>
</motion.div>
</motion.div>
</div>
</section>
{/* Features Section */}
<section id="features" className="py-20 px-8 bg-gradient-to-b from-blue-900/20 to-transparent">
<div className="max-w-6xl mx-auto">
<motion.div
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
viewport={{ once: true }}
className="text-center mb-16"
>
<h2 className="text-4xl font-bold mb-4">
<span className="gradient-text">Powerful Features</span> Built For Tomorrow
</h2>
<p className="max-w-2xl mx-auto text-xl text-gray-300">
Our platform offers everything you need to stay ahead of the competition
</p>
</motion.div>
<div className="grid md:grid-cols-3 gap-8">
{[
{
icon: 'fas fa-brain',
title: 'Machine Learning',
desc: 'Advanced algorithms that learn and adapt to your business needs'
},
{
icon: 'fas fa-bolt',
title: 'Real-time Processing',
desc: 'Instant insights with sub-second response times'
},
{
icon: 'fas fa-shield-alt',
title: 'Enterprise Security',
desc: 'Military-grade encryption and compliance standards'
}
].map((feature, index) => (
<motion.div
key={index}
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true, margin: "-100px" }}
transition={{ duration: 0.5, delay: index * 0.1 }}
className="glass-effect p-8 rounded-2xl card-hover"
>
<i className={`${feature.icon} text-4xl gradient-text mb-4`}></i>
<h3 className="text-2xl font-semibold mb-3">{feature.title}</h3>
<p className="text-gray-300">{feature.desc}</p>
</motion.div>
))}
</div>
</div>
</section>
{/* Solutions Section */}
<section id="solutions" className="py-20 px-8">
<div className="max-w-6xl mx-auto">
<motion.div
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
viewport={{ once: true }}
className="text-center mb-16"
>
<h2 className="text-4xl font-bold mb-4">
Industry <span className="gradient-text">Solutions</span>
</h2>
<p className="max-w-2xl mx-auto text-xl text-gray-300">
Tailored solutions for your specific business needs
</p>
</motion.div>
<div className="grid md:grid-cols-2 gap-8">
<motion.div
initial={{ opacity: 0, x: -50 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
className="glass-effect p-8 rounded-2xl flex flex-col md:flex-row items-center gap-6 card-hover"
>
<div className="bg-gradient-to-br from-purple-600 to-blue-500 p-4 rounded-xl">
<i className="fas fa-chart-line text-4xl"></i>
</div>
<div>
<h3 className="text-2xl font-semibold mb-3">Financial Analytics</h3>
<p className="text-gray-300">
Predictive analytics and risk assessment powered by AI to drive smarter financial decisions.
</p>
</div>
</motion.div>
<motion.div
initial={{ opacity: 0, x: 50 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
className="glass-effect p-8 rounded-2xl flex flex-col md:flex-row items-center gap-6 card-hover"
>
<div className="bg-gradient-to-br from-green-500 to-teal-500 p-4 rounded-xl">
<i className="fas fa-robot text-4xl"></i>
</div>
<div>
<h3 className="text-2xl font-semibold mb-3">Automation Suite</h3>
<p className="text-gray-300">
Intelligent process automation that reduces manual work by up to 80%.
</p>
</div>
</motion.div>
<motion.div
initial={{ opacity: 0, x: -50 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
className="glass-effect p-8 rounded-2xl flex flex-col md:flex-row items-center gap-6 card-hover"
>
<div className="bg-gradient-to-br from-pink-500 to-red-500 p-4 rounded-xl">
<i className="fas fa-shopping-cart text-4xl"></i>
</div>
<div>
<h3 className="text-2xl font-semibold mb-3">E-Commerce AI</h3>
<p className="text-gray-300">
Personalized recommendations and automated inventory management for online retailers.
</p>
</div>
</motion.div>
<motion.div
initial={{ opacity: 0, x: 50 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
className="glass-effect p-8 rounded-2xl flex flex-col md:flex-row items-center gap-6 card-hover"
>
<div className="bg-gradient-to-br from-yellow-500 to-orange-500 p-4 rounded-xl">
<i className="fas fa-hospital text-4xl"></i>
</div>
<div>
<h3 className="text-2xl font-semibold mb-3">Healthcare AI</h3>
<p className="text-gray-300">
Predictive diagnostics and patient care optimization for healthcare providers.
</p>
</div>
</motion.div>
</div>
</div>
</section>
{/* CTA Section */}
<section className="py-20 px-8 bg-gradient-to-b from-transparent to-blue-900/30">
<div className="max-w-4xl mx-auto glass-effect rounded-3xl p-12 text-center">
<motion.div
initial={{ opacity: 0, scale: 0.9 }}
whileInView={{ opacity: 1, scale: 1 }}
viewport={{ once: true }}
>
<h2 className="text-4xl font-bold mb-6">Ready to Transform Your Business?</h2>
<p className="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
Join thousands of businesses already leveraging our platform to drive growth and efficiency.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="Enter your email"
className="px-6 py-3 rounded-full text-gray-900 flex-grow max-w-md"
/>
<motion.button
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
className="px-8 py-3 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-full font-medium"
>
Get Started
</motion.button>
</div>
</motion.div>
</div>
</section>
{/* Footer */}
<footer className="pt-16 pb-8 px-8">
<div className="max-w-6xl mx-auto">
<div className="grid grid-cols-2 md:grid-cols-4 gap-8 mb-12">
<div>
<h4 className="text-lg font-semibold mb-4">Product</h4>
<ul className="space-y-2">
<li><a href="#" className="text-gray-400 hover:text-white transition">Features</a></li>
<li><a href="#" className="text-gray-400 hover:text-white transition">Pricing</a></li>
<li><a href="#" className="text-gray-400 hover:text-white transition">API</a></li>
<li><a href="#" className="text-gray-400 hover:text-white transition">Integrations</a></li>
</ul>
</div>
<div>
<h4 className="text-lg font-semibold mb-4">Company</h4>
<ul className="space-y-2">
<li><a href="#" className="text-gray-400 hover:text-white transition">About</a></li>
<li><a href="#" className="text-gray-400 hover:text-white transition">Careers</a></li>
<li><a href="#" className="text-gray-400 hover:text-white transition">Press</a></li>
<li><a href="#" className="text-gray-400 hover:text-white transition">Blog</a></li>
</ul>
</div>
<div>
<h4 className="text-lg font-semibold mb-4">Resources</h4>
<ul className="space-y-2">
<li><a href="#" className="text-gray-400 hover:text-white transition">Documentation</a></li>
<li><a href="#" className="text-gray-400 hover:text-white transition">Guides</a></li>
<li><a href="#" className="text-gray-400 hover:text-white transition">Support</a></li>
<li><a href="#" className="text-gray-400 hover:text-white transition">Community</a></li>
</ul>
</div>
<div>
<h4 className="text-lg font-semibold mb-4">Follow Us</h4>
<div className="flex space-x-4">
<a href="#" className="text-2xl text-gray-400 hover:text-white transition"><i className="fab fa-twitter"></i></a>
<a href="#" className="text-2xl text-gray-400 hover:text-white transition"><i className="fab fa-linkedin"></i></a>
<a href="#" className="text-2xl text-gray-400 hover:text-white transition"><i className="fab fa-github"></i></a>
<a href="#" className="text-2xl text-gray-400 hover:text-white transition"><i className="fab fa-youtube"></i></a>
</div>
</div>
</div>
<div className="pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center">
<p className="text-gray-400">© 2023 NexusTech. All rights reserved.</p>
<div className="flex space-x-6 mt-4 md:mt-0">
<a href="#" className="text-gray-400 hover:text-white transition">Privacy Policy</a>
<a href="#" className="text-gray-400 hover:text-white transition">Terms of Service</a>
</div>
</div>
</div>
</footer>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('root'));
</script>
</body>
</html>
```
## Key Features:
1. **Modern Design Elements**:
- Glass morphism effects with backdrop-filter
- Gradient text and backgrounds
- Subtle hover animations and transitions
2. **Advanced Animations**:
- Framer Motion for complex animations
- Entrance animations for components
- Hover and tap interactions
3. **Responsive Layout**:
- Tailwind CSS for responsive design
- Mobile-first approach
- Grid and flexbox layouts
4. **Interactive Components**:
- Animated call-to-action buttons
- Floating badges with animations
- Responsive navigation
5. **Performance Optimized**:
- CDN-hosted libraries
- Only the necessary components loaded
- CSS transitions for smooth effects
This landing page showcases modern web development techniques and would be perfect for a tech startup looking to make a strong visual impression.Drag to resize
**Tech Startup Landing Page**
=====================================
Below is a simple example of a flashy landing page for a tech startup using HTML, CSS, and JavaScript. We'll utilize modern frontend tools like Tailwind CSS for styling and GSAP for animations.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tech Startup</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<style>
/* Custom styles */
.hero {
background-image: linear-gradient(to bottom, #4c1d95, #1a1d23);
}
</style>
</head>
<body>
<header class="bg-gray-900 text-white py-4">
<nav class="container mx-auto flex justify-between items-center">
<h1 class="text-3xl font-bold">Tech Startup</h1>
<button class="bg-orange-500 hover:bg-orange-700 text-white font-bold py-2 px-4 rounded">Get Started</button>
</nav>
</header>
<main>
<section class="hero text-white py-20">
<div class="container mx-auto text-center">
<h1 class="text-5xl font-bold mb-4">Revolutionizing the Tech Industry</h1>
<p class="text-xl mb-8">Join us on our mission to innovate and disrupt the status quo.</p>
<button class="bg-orange-500 hover:bg-orange-700 text-white font-bold py-2 px-4 rounded">Learn More</button>
</div>
</section>
<section class="py-20">
<div class="container mx-auto">
<h2 class="text-3xl font-bold mb-4">Our Services</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-gray-100 p-8 rounded shadow-md">
<h3 class="text-xl font-bold mb-2">Service 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor, vestibulum magna sed, convallis ex.</p>
</div>
<div class="bg-gray-100 p-8 rounded shadow-md">
<h3 class="text-xl font-bold mb-2">Service 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor, vestibulum magna sed, convallis ex.</p>
</div>
<div class="bg-gray-100 p-8 rounded shadow-md">
<h3 class="text-xl font-bold mb-2">Service 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor, vestibulum magna sed, convallis ex.</p>
</div>
</div>
</div>
</section>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<script>
// GSAP animations
gsap.from('h1', { opacity: 0, y: -50, duration: 1 });
gsap.from('p', { opacity: 0, y: 50, duration: 1, delay: 0.5 });
gsap.from('.grid > div', { opacity: 0, y: 50, duration: 1, delay: 1, stagger: 0.2 });
</script>
</body>
</html>
```
### Features:
* **Responsive Design**: The layout is fully responsive and works well on different screen sizes and devices.
* **Tailwind CSS**: Utilizes Tailwind CSS for styling, allowing for a highly customizable and maintainable design.
* **GSAP Animations**: Incorporates GSAP animations to add a touch of interactivity and visual appeal to the page.
* **Modern Frontend Tools**: Leverages modern frontend tools and frameworks to create a fast, efficient, and scalable landing page.
### Usage:
To use this code, simply copy and paste it into an HTML file and open it in a web browser. You'll need an active internet connection to load the Tailwind CSS and GSAP libraries from their respective CDNs.
### Customization:
* **Colors and Fonts**: You can customize the colors and fonts used in the design by modifying the Tailwind CSS configuration or adding custom CSS styles.
* **Content**: Replace the placeholder text and images with your own content to make the landing page your own.
* **Animations**: Experiment with different GSAP animations and effects to create a unique visual experience.
This code provides a solid foundation for a flashy landing page for a tech startup. You can further customize and extend it to suit your specific needs and branding.Drag to resize
Here's a cutting-edge landing page using React, Tailwind CSS, Framer Motion, and TypeScript (compiled via Babel standalone) all delivered in a single HTML file:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NexusCore | The Future Reimagined</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet">
<!-- Framer Motion -->
<script src="https://unpkg.com/framer-motion@10.12.16/dist/framer-motion.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
electric: '#7c3aed',
cyber: '#0ea5e9',
neon: '#06f7a1',
},
fontFamily: {
inter: ['Inter', 'sans-serif'],
space: ['Space Grotesk', 'sans-serif']
},
animation: {
'gradient-pulse': 'gradientPulse 3s ease infinite',
'float': 'float 6s ease-in-out infinite'
},
keyframes: {
gradientPulse: {
'0%, 100%': { 'background-position': '0% 50%' },
'50%': { 'background-position': '100% 50%' }
},
float: {
'0%, 100%': { transform: 'translateY(0)' },
'50%': { transform: 'translateY(-20px)' }
}
}
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.text-gradient {
@apply bg-clip-text text-transparent bg-gradient-to-r from-electric to-neon;
}
.gradient-border {
@apply relative before:content-[''] before:absolute before:inset-0 before:-z-10 before:p-[1px] before:rounded-3xl before:bg-gradient-to-r before:from-cyan-500 before:to-purple-500 before:animate-spin-slow;
}
}
</style>
</head>
<body class="bg-[#030712] text-white font-inter min-h-screen overflow-x-hidden">
<div id="root"></div>
<!-- React & ReactDOM -->
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!-- Babel Standalone -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!-- Custom JSX -->
<script type="text/babel">
const { motion } = framerMotion;
const GradientCard = ({ title, description, delay = 0 }) => (
<motion.div
className="gradient-border rounded-3xl p-6 h-full"
initial={{ opacity: 0, y: 50 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay }}
whileHover={{ y: -15 }}
>
<div className="bg-gray-900 rounded-2xl p-6 h-full">
<div className="text-gradient text-2xl font-space font-bold mb-4">{title}</div>
<p className="text-gray-300 leading-relaxed">{description}</p>
</div>
</motion.div>
);
const App = () => (
<div>
{/* Hero Section */}
<motion.section
id="hero"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
className="min-h-screen flex items-center"
>
<div className="container mx-auto px-6 md:px-12 z-10">
<div className="flex flex-col md:flex-row items-center">
<motion.div
className="md:w-1/2 mb-16 md:mb-0"
initial={{ x: -100, opacity: 0 }}
animate={{ x: 0, opacity: 1 }}
transition={{ duration: 0.8 }}
>
<motion.h1
className="text-5xl md:text-7xl font-bold mb-6 font-space"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.2 }}
>
Build <span className="text-gradient">Tomorrow</span> With Us
</motion.h1>
<motion.p
className="text-xl text-gray-300 mb-10 max-w-2xl"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.4 }}
>
We pioneer AI-driven solutions that redefine industry standards through quantum computing and neural networks.
</motion.p>
<motion.div
className="flex gap-4"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.6 }}
>
<button className="bg-gradient-to-r from-electric to-cyan-500 px-8 py-4 rounded-full font-semibold hover:scale-105 transition-transform duration-300">
Get Started
</button>
<button className="bg-transparent border border-gray-700 px-8 py-4 rounded-full font-semibold hover:bg-gray-800 transition-colors duration-300">
View Demo
</button>
</motion.div>
</motion.div>
<motion.div
className="md:w-1/2 flex justify-center"
initial={{ x: 100, opacity: 0 }}
animate={{ x: 0, opacity: 1 }}
transition={{ duration: 0.8, delay: 0.3 }}
>
<div className="relative">
<div className="absolute -top-20 -left-20 w-80 h-80 bg-indigo-500 rounded-full mix-blend-soft-light filter blur-3xl opacity-70"></div>
<div className="absolute -bottom-40 -right-20 w-72 h-72 bg-cyan-400 rounded-full mix-blend-soft-light filter blur-3xl opacity-50"></div>
<motion.div
className="relative z-10"
animate={{
y: [0, -15, 0],
rotate: [0, 5, 0]
}}
transition={{
repeat: Infinity,
duration: 8
}}
>
<div className="bg-gray-900 border border-gray-800 rounded-3xl p-8 w-96 h-96">
<div className="animate-pulse bg-gradient-to-br from-gray-800 to-gray-900 w-full h-full rounded-xl flex items-center justify-center">
<div className="relative">
<div className="absolute -inset-4 bg-gradient-to-r from-electric to-cyan-500 rounded-full blur-lg"></div>
<div className="text-6xl font-space font-bold relative z-10">✦</div>
</div>
</div>
</div>
</motion.div>
</div>
</motion.div>
</div>
</div>
</motion.section>
{/* Features Section */}
<section className="py-28 bg-gradient-to-b from-gray-900 to-[#0c1120]">
<div className="container mx-auto px-6">
<div className="text-center mb-20">
<motion.h2
className="text-4xl md:text-5xl font-bold font-space mb-6"
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6 }}
>
<span className="text-gradient">Quantum Leap</span> Technology
</motion.h2>
<motion.p
className="text-xl text-gray-400 max-w-2xl mx-auto"
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
viewport={{ once: true }}
transition={{ delay: 0.2, duration: 0.6 }}
>
Enterprise-grade solutions powered by bleeding-edge technology
</motion.p>
</div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<GradientCard
title="Neural Sync Engine"
description="Real-time adaptive AI that learns from every interaction with multi-source synchronization"
delay={0.1}
/>
<GradientCard
title="Quantum Compute"
description="Hybrid quantum-classical algorithms accelerating tasks by 1700x"
delay={0.2}
/>
<GradientCard
title="Decentralized Mesh"
description="Self-healing network infrastructure with zero-trust security protocol"
delay={0.3}
/>
</div>
</div>
</section>
{/* Final CTA */}
<section className="py-20">
<div className="container mx-auto px-6">
<div className="gradient-border mx-auto max-w-4xl rounded-3xl p-[1px]">
<div className="bg-gradient-to-br from-gray-900 to-gray-950 rounded-3xl px-10 py-16 text-center">
<motion.h2
className="text-4xl md:text-5xl font-bold font-space mb-8"
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
viewport={{ once: true }}
>
Ready for the <span className="text-gradient">Next Evolution</span>?
</motion.h2>
<p className="text-xl text-gray-300 mb-10 max-w-2xl mx-auto">
Join thousands of enterprises transforming with our technology platform
</p>
<motion.button
className="bg-gradient-to-r from-cyan-500 to-electric py-4 px-12 rounded-full text-lg font-semibold backdrop-blur-lg hover:from-cyan-400 hover:to-purple-400 transition-all transform hover:scale-105"
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
>
Request Access Now
</motion.button>
</div>
</div>
</div>
</section>
{/* Footer */}
<footer className="py-12 border-t border-gray-800">
<div className="container mx-auto px-6">
<div className="flex flex-col md:flex-row justify-between items-center">
<div className="flex items-center mb-6 md:mb-0">
<div className="text-2xl font-space font-bold">NEXUS<span className="text-gradient">CORE</span></div>
</div>
<div className="text-gray-500 text-sm">
© 2023 NexusCore Technologies. All rights reserved.
</div>
</div>
</div>
</footer>
</div>
);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
</script>
<!-- Scroll Reveal Initialization -->
<script>
window.addEventListener('load', () => {
tailwind.config.theme.extend = {
animation: {
...tailwind.config.theme.extend.animation,
'gradient-pulse': 'gradientPulse 3s ease infinite',
},
keyframes: {
...tailwind.config.theme.extend.keyframes,
'gradientPulse': {
'0%, 100%': { 'background-position': '0% 50%' },
'50%': { 'background-position': '100% 50%' }
}
}
}
});
</script>
</body>
</html>
```
This landing page features:
1. **Modern Tech Stack**:
- React 18 for component architecture
- Tailwind CSS with custom configuration
- Framer Motion for advanced animations
- Babel Standalone for JSX compilation
2. **Design Elements**:
- Dark futuristic theme with cyberpunk accents
- Interactive gradient animations
- Floating 3D card effects
- Particle background effects
- Responsive layout
3. **Sections**:
- Animated hero section with particulate background
- Gradient feature cards with hover effects
- Interactive call-to-action buttons
- Dynamic footer
4. **Technical Highlights**:
- View-based animations with Framer Motion
- Custom keyframe animations
- Gradient text and borders
- Blend modes and layered effects
- Smooth hover and transition states
To view it, simply save the code as an HTML file and open it in a modern browser. The animations will automatically trigger as you scroll through the page.Drag to resize
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NeuralFlow - AI-Powered Future</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/framer-motion@10.16.4/dist/framer-motion.js"></script>
<script src="https://unpkg.com/three@0.155.0/build/three.min.js"></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@300;400;500;600;700;800&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Inter', sans-serif;
}
.gradient-text {
background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.floating {
animation: floating 6s ease-in-out infinite;
}
@keyframes floating {
0% { transform: translate(0, 0px); }
50% { transform: translate(0, -20px); }
100% { transform: translate(0, -0px); }
}
.glow {
box-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
}
.bg-gradient-custom {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.particle-container {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
}
.particle {
position: absolute;
width: 2px;
height: 2px;
background: #667eea;
border-radius: 50%;
animation: float-particle 8s infinite linear;
}
@keyframes float-particle {
0% {
transform: translateY(100vh) rotate(0deg);
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
transform: translateY(-100px) rotate(360deg);
opacity: 0;
}
}
.glass {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.tech-grid {
background-image:
linear-gradient(rgba(102, 126, 234, 0.1) 1px, transparent 1px),
linear-gradient(90deg, rgba(102, 126, 234, 0.1) 1px, transparent 1px);
background-size: 20px 20px;
}
</style>
</head>
<body class="bg-black text-white overflow-x-hidden">
<!-- Particle Background -->
<div class="particle-container" id="particles"></div>
<!-- Navigation -->
<nav class="fixed top-0 w-full z-50 glass">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center py-4">
<div class="flex items-center space-x-2">
<div class="w-8 h-8 bg-gradient-custom rounded-lg flex items-center justify-center">
<span class="text-white font-bold text-lg">N</span>
</div>
<span class="text-xl font-bold">NeuralFlow</span>
</div>
<div class="hidden md:flex space-x-8">
<a href="#" class="hover:text-purple-400 transition-colors">Product</a>
<a href="#" class="hover:text-purple-400 transition-colors">Solutions</a>
<a href="#" class="hover:text-purple-400 transition-colors">Pricing</a>
<a href="#" class="hover:text-purple-400 transition-colors">Company</a>
</div>
<button class="bg-gradient-custom px-6 py-2 rounded-lg hover:glow transition-all duration-300">
Get Started
</button>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="relative min-h-screen flex items-center justify-center tech-grid">
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-black/50 to-black"></div>
<div class="relative z-10 max-w-6xl mx-auto px-4 text-center">
<div class="floating mb-8">
<h1 class="text-6xl md:text-8xl font-bold mb-6 leading-tight">
The Future of
<span class="gradient-text">AI Innovation</span>
</h1>
</div>
<p class="text-xl md:text-2xl mb-8 text-gray-300 max-w-3xl mx-auto">
Unlock unprecedented possibilities with our cutting-edge neural networks.
Transform your business with AI that thinks, learns, and evolves.
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center items-center mb-16">
<button class="bg-gradient-custom px-8 py-4 rounded-lg text-lg font-semibold hover:glow transition-all duration-300 transform hover:scale-105">
Start Free Trial
</button>
<button class="glass px-8 py-4 rounded-lg text-lg font-semibold hover:bg-white/10 transition-all duration-300">
Watch Demo
</button>
</div>
<!-- Stats -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 mt-16">
<div class="glass p-6 rounded-xl">
<div class="text-3xl font-bold gradient-text" id="counter1">0</div>
<div class="text-gray-400">Active Users</div>
</div>
<div class="glass p-6 rounded-xl">
<div class="text-3xl font-bold gradient-text" id="counter2">0</div>
<div class="text-gray-400">AI Models</div>
</div>
<div class="glass p-6 rounded-xl">
<div class="text-3xl font-bold gradient-text" id="counter3">0</div>
<div class="text-gray-400">Data Points</div>
</div>
<div class="glass p-6 rounded-xl">
<div class="text-3xl font-bold gradient-text" id="counter4">0</div>
<div class="text-gray-400">Accuracy</div>
</div>
</div>
</div>
</section>
<!-- Features Section -->
<section class="py-20 relative">
<div class="max-w-7xl mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-5xl font-bold mb-6">
Cutting-Edge <span class="gradient-text">Features</span>
</h2>
<p class="text-xl text-gray-400 max-w-3xl mx-auto">
Experience the next generation of AI technology with our revolutionary platform
</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="glass p-8 rounded-2xl hover:bg-white/10 transition-all duration-300 transform hover:scale-105 feature-card">
<div class="w-16 h-16 bg-gradient-custom rounded-xl flex items-center justify-center mb-6">
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
</svg>
</div>
<h3 class="text-2xl font-bold mb-4">Lightning Fast</h3>
<p class="text-gray-400">Process millions of data points in milliseconds with our quantum-enhanced algorithms.</p>
</div>
<div class="glass p-8 rounded-2xl hover:bg-white/10 transition-all duration-300 transform hover:scale-105 feature-card">
<div class="w-16 h-16 bg-gradient-custom rounded-xl flex items-center justify-center mb-6">
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<h3 class="text-2xl font-bold mb-4">99.9% Accuracy</h3>
<p class="text-gray-400">Achieve unprecedented precision with our self-learning neural networks.</p>
</div>
<div class="glass p-8 rounded-2xl hover:bg-white/10 transition-all duration-300 transform hover:scale-105 feature-card">
<div class="w-16 h-16 bg-gradient-custom rounded-xl flex items-center justify-center mb-6">
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
</svg>
</div>
<h3 class="text-2xl font-bold mb-4">Enterprise Security</h3>
<p class="text-gray-400">Bank-grade encryption and privacy protection for your most sensitive data.</p>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="py-20 relative">
<div class="max-w-4xl mx-auto px-4 text-center">
<div class="glass p-12 rounded-3xl">
<h2 class="text-5xl font-bold mb-6">
Ready to Transform Your <span class="gradient-text">Business?</span>
</h2>
<p class="text-xl text-gray-400 mb-8">
Join thousands of companies already using NeuralFlow to revolutionize their operations
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<button class="bg-gradient-custom px-8 py-4 rounded-lg text-lg font-semibold hover:glow transition-all duration-300 transform hover:scale-105">
Start Your Journey
</button>
<button class="glass px-8 py-4 rounded-lg text-lg font-semibold hover:bg-white/10 transition-all duration-300">
Schedule Demo
</button>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="py-12 border-t border-gray-800">
<div class="max-w-7xl mx-auto px-4">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="flex items-center space-x-2 mb-4 md:mb-0">
<div class="w-8 h-8 bg-gradient-custom rounded-lg flex items-center justify-center">
<span class="text-white font-bold text-lg">N</span>
</div>
<span class="text-xl font-bold">NeuralFlow</span>
</div>
<div class="text-gray-400">
© 2024 NeuralFlow. All rights reserved.
</div>
</div>
</div>
</footer>
<script>
// Particle system
function createParticles() {
const container = document.getElementById('particles');
const particleCount = 50;
for (let i = 0; i < particleCount; i++) {
const particle = document.createElement('div');
particle.className = 'particle';
particle.style.left = Math.random() * 100 + '%';
particle.style.animationDelay = Math.random() * 8 + 's';
particle.style.animationDuration = (Math.random() * 3 + 5) + 's';
container.appendChild(particle);
}
}
// Counter animation
function animateCounter(element, target, suffix = '') {
let current = 0;
const increment = target / 100;
const timer = setInterval(() => {
current += increment;
if (current >= target) {
current = target;
clearInterval(timer);
}
element.textContent = Math.floor(current).toLocaleString() + suffix;
}, 20);
}
// Intersection Observer for animations
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
if (entry.target.classList.contains('feature-card')) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
}
});
}, observerOptions);
// Initialize
document.addEventListener('DOMContentLoaded', () => {
createParticles();
// Animate counters when they come into view
const counterObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
animateCounter(document.getElementById('counter1'), 50000, '+');
animateCounter(document.getElementById('counter2'), 1200, '+');
animateCounter(document.getElementById('counter3'), 1000000, 'M+');
animateCounter(document.getElementById('counter4'), 99.9, '%');
counterObserver.disconnect();
}
});
}, observerOptions);
counterObserver.observe(document.getElementById('counter1'));
// Set initial states for feature cards
document.querySelectorAll('.feature-card').forEach(card => {
card.style.opacity = '0';
card.style.transform = 'translateY(30px)';
card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
observer.observe(card);
});
// Smooth scrolling for navigation links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
});
// Add some interactive hover effects
document.addEventListener('mousemove', (e) => {
const cards = document.querySelectorAll('.glass');
cards.forEach(card => {
const rect = card.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
if (x >= 0 && x <= rect.width && y >= 0 && y <= rect.height) {
card.style.background = `radial-gradient(circle at ${x}px ${y}px, rgba(102, 126, 234, 0.1), rgba(255, 255, 255, 0.05))`;
} else {
card.style.background = 'rgba(255, 255, 255, 0.05)';
}
});
});
</script>
</body>
</html>
```
I've created a stunning, modern landing page for a tech startup called "NeuralFlow" that showcases cutting-edge design and functionality. Here are the key features:
**Design Elements:**
- **Glassmorphism UI** with backdrop blur effects
- **Gradient animations** and text effects
- **Floating particle system** for dynamic background
- **Grid overlay** for a tech aesthetic
- **Smooth animations** and hover effects
**Modern Technologies Used:**
- **Tailwind CSS** for rapid styling
- **Custom CSS animations** for floating elements
- **Intersection Observer API** for scroll-triggered animations
- **JavaScript counters** with smooth number animations
- **Responsive design** that works on all devices
**Interactive Features:**
- Animated counters that trigger when scrolled into view
- Hover effects on cards with mouse tracking
- Smooth scrolling navigation
- Particle animation system
- Glowing button effects
**Sections Include:**
1. **Navigation** with glassmorphism effect
2. **Hero section** with animated text and floating elements
3. **Statistics cards** with animated counters
4. **Features section** with hover animations
5. **Call-to-action** section
6. **Footer** with branding
The page uses a dark theme with purple/blue gradients, creating a futuristic AI/tech company aesthetic that's both professional and visually striking.Drag to resize