Spaces:
Build error
Build error
File size: 3,966 Bytes
13c1140 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | import { ArrowRight, Code2, Sparkles } from 'lucide-react'
export default function Hero() {
return (
<div className="relative overflow-hidden pt-20 pb-16 lg:pt-32 lg:pb-24">
{/* Background Glow */}
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-[500px] bg-brand-accent/10 blur-[120px] rounded-full pointer-events-none" />
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col items-center text-center">
{/* Badge */}
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-gray-700 bg-gray-800/50 text-sm text-gray-400 mb-8 animate-pulse-slow">
<Sparkles size={14} className="text-brand-accent" />
<span>AI-Powered Documentation & Code</span>
</div>
<h1 className="text-5xl md:text-7xl font-bold tracking-tight mb-6 text-white">
<span className="gradient-text">Generate code at the</span>
<br />
<span className="text-gray-500">speed of thought.</span>
</h1>
<p className="text-xl text-gray-400 max-w-2xl mb-10 leading-relaxed">
Deepnote transforms your technical notes into production-ready code,
documentation, and visualizations instantly. The future of developer productivity.
</p>
<div className="flex flex-col sm:flex-row gap-4 w-full sm:w-auto">
<button className="flex items-center justify-center gap-2 bg-brand-accent hover:bg-violet-700 text-white px-8 py-4 rounded-lg font-bold text-lg transition-all shadow-lg shadow-brand-accent/25 hover:shadow-brand-accent/40">
Start for free
<ArrowRight size={20} />
</button>
<button className="flex items-center justify-center gap-2 bg-gray-800 hover:bg-gray-700 text-white border border-gray-700 px-8 py-4 rounded-lg font-bold text-lg transition-all">
<Code2 size={20} />
View Demo
</button>
</div>
{/* Code Preview Mockup */}
<div className="mt-20 w-full max-w-4xl glass-panel rounded-xl p-6 border border-gray-700 shadow-2xl">
<div className="flex items-center gap-2 mb-4">
<div className="w-3 h-3 rounded-full bg-red-500" />
<div className="w-3 h-3 rounded-full bg-yellow-500" />
<div className="w-3 h-3 rounded-full bg-green-500" />
<span className="text-xs text-gray-500 ml-2">main.py</span>
</div>
<div className="text-left font-mono text-sm text-gray-300 space-y-2 overflow-hidden">
<div className="flex">
<span className="text-gray-500 w-8">1</span>
<span className="text-purple-400">import</span> deepnote <span className="text-purple-400">as</span> dn
</div>
<div className="flex">
<span className="text-gray-500 w-8">2</span>
<span className="text-blue-400">def</span> <span className="text-yellow-300">generate_component</span>(data):
</div>
<div className="flex">
<span className="text-gray-500 w-8">3</span>
<span className="ml-4 text-gray-500"># AI analyzes input structure</span>
</div>
<div className="flex">
<span className="text-gray-500 w-8">4</span>
<span className="ml-4">model = dn.Analyze(data, <span className="text-green-400">mode=<span className="text-orange-300">'react'</span></span>)</span>
</div>
<div className="flex">
<span className="text-gray-500 w-8">5</span>
<span className="ml-4">return model.render()</span>
</div>
<div className="flex animate-pulse">
<span className="text-gray-500 w-8">6</span>
<span className="ml-4 text-brand-accent">Processing...</span>
</div>
</div>
</div>
</div>
</div>
)
} |