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

feat: responsive hero

This commit is contained in:
Oleg Proskurin 2025-12-19 00:19:35 +07:00
parent 052584a78b
commit bbe39bddc5
2 changed files with 21 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,14 +11,16 @@ const badges = [
export function HeroSection() { export function HeroSection() {
return ( return (
<section className="relative pt-20 pb-20 px-6"> <section className="relative pt-12 sm:pt-16 md:pt-20 lg:pt-24 pb-12 sm:pb-16 md:pb-20 px-4 sm:px-6">
<div className="max-w-4xl mx-auto text-center"> <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"> {/* Beta Badge */}
<div className="inline-flex items-center gap-1.5 sm:gap-2 px-2.5 sm:px-3 py-1 rounded-full bg-white/5 border border-white/10 text-gray-400 text-[10px] sm:text-xs mb-5 sm:mb-6">
<span className="w-1.5 h-1.5 rounded-full bg-gray-500 beta-dot" /> <span className="w-1.5 h-1.5 rounded-full bg-gray-500 beta-dot" />
In Active Development In Active Development
</div> </div>
<h1 className="text-5xl md:text-6xl lg:text-7xl font-bold mb-8 leading-tight"> {/* Heading */}
<h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold mb-6 sm:mb-8 md:mb-10 leading-tight">
AI Image Generation AI Image Generation
<br /> <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"> <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">
@ -26,28 +28,35 @@ export function HeroSection() {
</span> </span>
</h1> </h1>
<p className="text-xl text-gray-400 mb-20 max-w-2xl mx-auto"> {/* Subtitle */}
<p className="text-base sm:text-lg md:text-xl text-gray-400 mb-8 sm:mb-12 md:mb-16 lg:mb-20 max-w-2xl mx-auto">
Generate images via API, SDK, CLI, Lab, or live URLs. Generate images via API, SDK, CLI, Lab, or live URLs.
<br /> <br className="hidden sm:inline" />
<span className="sm:hidden"> </span>
Production-ready CDN delivery in seconds. Production-ready CDN delivery in seconds.
</p> </p>
{/* Email Form */}
<WaitlistEmailForm /> <WaitlistEmailForm />
<p className="text-sm text-gray-500 mb-20">Free early access. No credit card required.</p> {/* Fine Print */}
<p className="text-xs sm:text-sm text-gray-500 mb-8 sm:mb-12 md:mb-16 lg:mb-20">
Free early access. No credit card required.
</p>
<div className="flex flex-wrap gap-3 sm:gap-5 justify-center"> {/* Feature Badges */}
<div className="flex flex-wrap gap-2 sm:gap-3 md:gap-4 justify-center">
{badges.map((badge, i) => ( {badges.map((badge, i) => (
<span <span
key={i} 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 ${ className={`px-3 sm:px-4 md:px-6 py-1.5 sm:py-2 md:py-2.5 rounded-full text-xs sm:text-sm flex items-center gap-1.5 sm:gap-2 md:gap-2.5 whitespace-nowrap ${
badge.variant === 'cyan' badge.variant === 'cyan'
? 'bg-cyan-500/10 border border-cyan-500/30 text-cyan-300' ? 'bg-cyan-500/10 border border-cyan-500/30 text-cyan-300'
: 'bg-indigo-500/15 border border-indigo-500/30 text-indigo-300' : 'bg-indigo-500/15 border border-indigo-500/30 text-indigo-300'
}`} }`}
> >
<badge.icon <badge.icon
className={`w-4 h-4 ${badge.variant === 'cyan' ? 'text-cyan-400' : 'text-indigo-400'}`} className={`w-3.5 sm:w-4 h-3.5 sm:h-4 ${badge.variant === 'cyan' ? 'text-cyan-400' : 'text-indigo-400'}`}
/> />
{badge.text} {badge.text}
</span> </span>

6
apps/landing/src/app/layout.tsx
View File

@ -49,7 +49,7 @@ export default function RootLayout({
{/* Header */} {/* Header */}
<header className="sticky top-0 z-10 bg-slate-900/80 backdrop-blur-md border-b border-white/5"> <header className="sticky top-0 z-10 bg-slate-900/80 backdrop-blur-md border-b border-white/5">
<nav className="max-w-7xl mx-auto px-6 py-3 flex justify-between items-center h-16"> <nav className="max-w-7xl mx-auto px-4 sm:px-6 py-2 sm:py-3 flex justify-between items-center h-12 sm:h-14 md:h-16">
<div className="h-full flex items-center"> <div className="h-full flex items-center">
<Image <Image
src={banatieLogo} src={banatieLogo}
@ -57,12 +57,12 @@ export default function RootLayout({
width={150} width={150}
height={40} height={40}
priority priority
className="h-full w-auto object-contain" className="h-8 sm:h-10 md:h-full w-auto object-contain"
/> />
</div> </div>
<a <a
href="#get-access" href="#get-access"
className="text-sm text-gray-300 hover:text-white transition-colors" className="text-xs sm:text-sm text-gray-300 hover:text-white transition-colors"
> >
Get Access Get Access
</a> </a>