usulpro
/
banatie-service
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: switch to TW

This commit is contained in:
Oleg Proskurin 2025-12-18 00:01:06 +07:00
parent 42893a515c
commit 097fdd3d2d
2 changed files with 83 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
apps/landing/src/app/_components/HeroSection.tsx
View File

@ -1,37 +1,6 @@
import { Zap, Globe, FlaskConical, AtSign, Link } from 'lucide-react';
import { WaitlistEmailForm } from './WaitlistEmailForm';
const styles = `
.gradient-text {
background: linear-gradient(90deg, #818cf8 0%, #c084fc 25%, #f472b6 50%, #c084fc 75%, #818cf8 100%);
background-size: 200% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: gradient-shift 6s ease-in-out infinite;
}
@keyframes gradient-shift {
0% { background-position: 100% 50%; }
50% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
.beta-dot {
animation: beta-dot-delay 20s linear forwards, beta-dot-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) 20s infinite;
}
@keyframes beta-dot-delay {
0%, 99% { background-color: rgb(107, 114, 128); }
100% { background-color: rgb(74, 222, 128); }
}
@keyframes beta-dot-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
`;
const badges = [
{ icon: Zap, text: 'API-First', variant: 'default' },
{ icon: Globe, text: 'Built-in CDN', variant: 'default' },
@ -42,50 +11,49 @@ const badges = [
export function HeroSection() {
return (
<>
<style dangerouslySetInnerHTML={{ __html: styles }} />
<section className="relative pt-20 pb-20 px-6">
<div className="max-w-4xl mx-auto text-center">
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-gray-400 text-xs mb-6">
<span className="w-1.5 h-1.5 rounded-full bg-gray-500 beta-dot" />
In Active Development
</div>
<h1 className="text-5xl md:text-6xl lg:text-7xl font-bold mb-8 leading-tight">
AI Image Generation
<br />
<span className="gradient-text">Inside Your Workflow</span>
</h1>
<p className="text-xl text-gray-400 mb-20 max-w-2xl mx-auto">
Generate images via API, SDK, CLI, Lab, or live URLs.
<br />
Production-ready CDN delivery in seconds.
</p>
<WaitlistEmailForm />
<p className="text-sm text-gray-500 mb-20">Free early access. No credit card required.</p>
<div className="flex flex-wrap gap-3 sm:gap-5 justify-center">
{badges.map((badge, i) => (
<span
key={i}
className={`px-4 sm:px-6 py-2 sm:py-2.5 rounded-full text-sm flex items-center gap-2 sm:gap-2.5 whitespace-nowrap ${
badge.variant === 'cyan'
? 'bg-cyan-500/10 border border-cyan-500/30 text-cyan-300'
: 'bg-indigo-500/15 border border-indigo-500/30 text-indigo-300'
}`}
>
<badge.icon
className={`w-4 h-4 ${badge.variant === 'cyan' ? 'text-cyan-400' : 'text-indigo-400'}`}
/>
{badge.text}
</span>
))}
</div>
<section className="relative pt-20 pb-20 px-6">
<div className="max-w-4xl mx-auto text-center">
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-gray-400 text-xs mb-6">
<span className="w-1.5 h-1.5 rounded-full bg-gray-500 beta-dot" />
In Active Development
</div>
</section>
</>
<h1 className="text-5xl md:text-6xl lg:text-7xl font-bold mb-8 leading-tight">
AI Image Generation
<br />
<span className="bg-[linear-gradient(90deg,#818cf8_0%,#c084fc_25%,#f472b6_50%,#c084fc_75%,#818cf8_100%)] bg-[length:200%_100%] bg-clip-text text-transparent animate-gradient-shift-hero">
Inside Your Workflow
</span>
</h1>
<p className="text-xl text-gray-400 mb-20 max-w-2xl mx-auto">
Generate images via API, SDK, CLI, Lab, or live URLs.
<br />
Production-ready CDN delivery in seconds.
</p>
<WaitlistEmailForm />
<p className="text-sm text-gray-500 mb-20">Free early access. No credit card required.</p>
<div className="flex flex-wrap gap-3 sm:gap-5 justify-center">
{badges.map((badge, i) => (
<span
key={i}
className={`px-4 sm:px-6 py-2 sm:py-2.5 rounded-full text-sm flex items-center gap-2 sm:gap-2.5 whitespace-nowrap ${
badge.variant === 'cyan'
? 'bg-cyan-500/10 border border-cyan-500/30 text-cyan-300'
: 'bg-indigo-500/15 border border-indigo-500/30 text-indigo-300'
}`}
>
<badge.icon
className={`w-4 h-4 ${badge.variant === 'cyan' ? 'text-cyan-400' : 'text-indigo-400'}`}
/>
{badge.text}
</span>
))}
</div>
</div>
</section>
);
}

40
apps/landing/src/app/globals.css
View File

@ -10,6 +10,7 @@
--color-foreground: var(--foreground);
--font-sans: var(--font-geist-sans);
--font-mono: var(--font-geist-mono);
--animate-gradient-shift-hero: gradient-shift-hero 6s ease-in-out infinite;
}
body {
@ -54,6 +55,18 @@ body {
}
}
@keyframes gradient-shift-hero {
0% {
background-position: 100% 50%;
}
50% {
background-position: 0% 50%;
}
100% {
background-position: 100% 50%;
}
}
.animate-gradient {
background-size: 200% 200%;
animation: gradient-shift 3s ease infinite;
@ -67,6 +80,33 @@ body {
animation-delay: 700ms;
}
/* Hero Section - Beta Dot Animation */
@keyframes beta-dot-delay {
0%,
99% {
background-color: rgb(107, 114, 128);
}
100% {
background-color: rgb(74, 222, 128);
}
}
@keyframes beta-dot-pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
.beta-dot {
animation:
beta-dot-delay 20s linear forwards,
beta-dot-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) 20s infinite;
}
/* Smooth scrolling */
html {
scroll-behavior: smooth;