ico
/
pingql
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: sticky header with nav links on landing page

This commit is contained in:
M1 2026-03-16 14:21:24 +04:00
parent d11488ecbf
commit f4283a0915
1 changed files with 20 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
apps/web/src/dashboard/landing.html
View File

@ -132,8 +132,25 @@
</head> </head>
<body class="bg-[#0a0a0a] text-gray-100 font-sans antialiased grid-bg"> <body class="bg-[#0a0a0a] text-gray-100 font-sans antialiased grid-bg">
<!-- ─── HEADER ─── -->
<header class="fixed top-0 left-0 right-0 z-50 border-b border-gray-800/60 bg-[#0a0a0a]/80 backdrop-blur-md">
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
<a href="/" class="font-mono text-lg font-bold tracking-tight">Ping<span class="text-blue-400">QL</span></a>
<nav class="hidden md:flex items-center gap-7 text-sm text-gray-400">
<a href="/docs" class="hover:text-gray-200 transition-colors">Docs</a>
<a href="/docs#ql-fields" class="hover:text-gray-200 transition-colors">Query Language</a>
<a href="#privacy" class="hover:text-gray-200 transition-colors">Privacy</a>
<a href="#pricing" class="hover:text-gray-200 transition-colors">Pricing</a>
</nav>
<div class="flex items-center gap-3">
<a href="/dashboard" class="text-sm text-gray-400 hover:text-gray-200 transition-colors">Sign in</a>
<a href="/dashboard" class="text-sm bg-blue-600 hover:bg-blue-500 text-white px-4 py-2 rounded-lg font-medium transition-colors">Get started</a>
</div>
</div>
</header>
<!-- ─── HERO ─── --> <!-- ─── HERO ─── -->
<section class="relative min-h-screen flex items-center hero-glow"> <section class="relative min-h-screen flex items-center hero-glow pt-16">
<div class="max-w-6xl mx-auto px-6 py-24 w-full"> <div class="max-w-6xl mx-auto px-6 py-24 w-full">
<div class="grid lg:grid-cols-2 gap-16 items-center"> <div class="grid lg:grid-cols-2 gap-16 items-center">
<!-- Left --> <!-- Left -->
@ -319,7 +336,7 @@
</section> </section>
<!-- ─── PRIVACY ─── --> <!-- ─── PRIVACY ─── -->
<section class="py-24 px-6"> <section id="privacy" class="py-24 px-6">
<div class="max-w-4xl mx-auto"> <div class="max-w-4xl mx-auto">
<div class="rounded-2xl border border-gray-800 bg-gradient-to-b from-[#111] to-[#0a0a0a] p-8 sm:p-12"> <div class="rounded-2xl border border-gray-800 bg-gradient-to-b from-[#111] to-[#0a0a0a] p-8 sm:p-12">
<div class="flex items-start gap-4 mb-8"> <div class="flex items-start gap-4 mb-8">
@ -442,7 +459,7 @@
</section> </section>
<!-- ─── PRICING ─── --> <!-- ─── PRICING ─── -->
<section class="py-24 px-6"> <section id="pricing" class="py-24 px-6">
<div class="max-w-3xl mx-auto text-center"> <div class="max-w-3xl mx-auto text-center">
<h2 class="text-3xl sm:text-4xl font-bold tracking-tight mb-4">Simple pricing</h2> <h2 class="text-3xl sm:text-4xl font-bold tracking-tight mb-4">Simple pricing</h2>
<p class="text-gray-400 text-lg mb-12">Start for free. No credit card required.</p> <p class="text-gray-400 text-lg mb-12">Start for free. No credit card required.</p>