kleap
/
app-quick-bear-yawn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update components/hero.tsx

This commit is contained in:
kleap-admin 2026-01-16 15:53:41 +00:00
parent cdca9153fd
commit 11340c1129
1 changed files with 86 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
components/hero.tsx Normal file
View File

@ -0,0 +1,86 @@
"use client";
import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Subheading } from "@/components/subheading";
import { Button } from "@/components/ui/button";
import { motion } from "framer-motion";
import { ArrowRight, Sparkles } from "lucide-react";
export function Hero() {
return (
<section className="relative pt-32 pb-20 md:pt-48 md:pb-32 overflow-hidden">
{/* Premium Background Elements */}
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full -z-10 overflow-hidden">
<div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-blue-400/20 blur-[120px] rounded-full animate-pulse" />
<div className="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-purple-400/20 blur-[120px] rounded-full animate-pulse delay-700" />
</div>
<Container>
<div className="flex flex-col items-center text-center max-w-5xl mx-auto">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }}
className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-blue-50 border border-blue-100 text-blue-700 text-sm font-medium mb-8 shadow-sm"
>
<Sparkles className="w-4 h-4" />
<span>Expert Growth Strategy for B2B SaaS</span>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, delay: 0.1 }}
>
<Heading as="h1" className="text-6xl md:text-8xl font-extrabold tracking-tight text-black leading-[1.1]">
Scale Your Revenue <br />
<span className="bg-clip-text text-transparent bg-gradient-to-r from-blue-600 via-indigo-600 to-purple-600">
Without the Guesswork
</span>
</Heading>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, delay: 0.2 }}
>
<Subheading className="mt-8 text-xl md:text-2xl text-neutral-600 max-w-3xl leading-relaxed">
I help founders build high-performance growth engines using data-driven strategies that actually move the needle.
</Subheading>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, delay: 0.3 }}
className="mt-12 flex flex-col sm:flex-row gap-6"
>
<Button size="lg" className="bg-neutral-900 hover:bg-neutral-800 text-white px-10 h-14 text-lg rounded-full group transition-all hover:scale-105 shadow-xl" onClick={() => document.getElementById('book')?.scrollIntoView({ behavior: 'smooth' })}>
Book a Strategy Call
<ArrowRight className="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform" />
</Button>
<Button variant="outline" size="lg" className="px-10 h-14 text-lg rounded-full border-2 hover:bg-neutral-50 transition-all" onClick={() => document.getElementById('services')?.scrollIntoView({ behavior: 'smooth' })}>
Explore Services
</Button>
</motion.div>
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 1, delay: 0.6 }}
className="mt-24 w-full"
>
<p className="text-sm font-bold uppercase tracking-[0.2em] text-neutral-400 mb-8">Trusted by Industry Leaders</p>
<div className="flex flex-wrap justify-center gap-12 md:gap-20 opacity-40 grayscale hover:grayscale-0 transition-all duration-500">
<span className="text-2xl font-black tracking-tighter">ACME CORP</span>
<span className="text-2xl font-black tracking-tighter">GLOBEX</span>
<span className="text-2xl font-black tracking-tighter">SOYLENT</span>
<span className="text-2xl font-black tracking-tighter">INITECH</span>
</div>
</motion.div>
</div>
</Container>
</section>
);
}