Source identity
| Field | Recorded value |
|---|---|
| Source type | GitHub source |
| Original record | Janady13/llms-txt-hub / apps/web/components/sections/hero-section.tsx |
| Date | Not specified in source |
| Repository | Janady13/llms-txt-hub |
| Revision | e0f4bf978d4df168369c7601d9c5f5ea89e84377 |
| Branch | main |
| Path or archive member | apps/web/components/sections/hero-section.tsx |
| Original SHA-256 | 12d7041c166d6fe3b2ca3e384e465b725599c5ec7117004d2d0589ceeb889258 |
| Git blob SHA | e684c0ccb495b5def0ca38822782f33fd2313073 |
| Reading-copy SHA-256 | 12d7041c166d6fe3b2ca3e384e465b725599c5ec7117004d2d0589ceeb889258 |
Recovered source transcript
Download complete source text ↓69 lines · 3.4 KB
import { ArrowRight } from 'lucide-react'
import Link from 'next/link'
import { AnimatedBackground } from '@/components/ui/animated-background'
import { getWebsites } from '@/lib/content-loader'
import { getRoute } from '@/lib/routes'
/**
* Hero section component for the homepage
* Features: Bold typography, gradient text, staggered animations, enhanced CTAs
* @returns JSX element containing the hero section with animated background and website count
*/
export async function HeroSection() {
const websites = await getWebsites()
const websiteCount = websites.length
return (
<section className="relative overflow-hidden py-12 md:py-16 lg:py-20">
<AnimatedBackground />
<div className="relative z-10 text-center space-y-6 md:space-y-8 py-4 md:py-8 px-6 max-w-4xl mx-auto">
{/* Badge with count - stagger 1 */}
<div className="animate-fade-in-up opacity-0 stagger-1">
<Link
className="mx-auto inline-flex items-center gap-2 md:gap-3 rounded-full border border-foreground/10 bg-background/50 backdrop-blur-sm px-3 py-1.5 text-xs md:text-sm font-medium transition-all hover:border-foreground/20 hover:bg-background/80"
href={getRoute('home')}
>
<span className="inline-flex items-center rounded-full bg-foreground px-2.5 py-0.5 text-xs font-bold text-background tabular-nums">
{websiteCount}
</span>
<span className="text-muted-foreground">Websites in directory</span>
</Link>
</div>
{/* Main heading - stagger 2 */}
<h1 className="animate-fade-in-up opacity-0 stagger-2 text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold tracking-tight leading-[1.1]">
<span className="whitespace-nowrap relative">
<span className="bg-gradient-to-r from-foreground via-foreground/80 to-foreground bg-clip-text text-transparent">
llms.txt Hub
</span>
</span>
</h1>
{/* Description - stagger 3 */}
<p className="animate-fade-in-up opacity-0 stagger-3 text-base md:text-lg lg:text-xl text-muted-foreground max-w-2xl mx-auto leading-relaxed">
The largest directory for{' '}
<span className="text-foreground font-medium">AI-ready documentation</span> and tools
implementing the proposed llms.txt standard
</p>
{/* CTA Buttons - stagger 4 */}
<div className="animate-fade-in-up opacity-0 stagger-4 flex justify-center gap-3 md:gap-4 flex-col sm:flex-row pt-2">
<Link
href={getRoute('submit')}
className="group inline-flex items-center justify-center gap-2 rounded-none text-sm md:text-base font-bold py-3 md:py-4 px-6 md:px-8 bg-foreground text-background transition-all duration-300 hover:bg-foreground/90 hover:gap-3 press-effect"
>
Add Your llms.txt
<ArrowRight className="size-4 transition-transform group-hover:translate-x-0.5" />
</Link>
<Link
href={getRoute('about')}
className="inline-flex items-center justify-center rounded-none text-sm md:text-base font-bold py-3 md:py-4 px-6 md:px-8 border-2 border-foreground/20 text-foreground transition-all duration-300 hover:border-foreground/40 hover:bg-foreground/5 press-effect"
>
Learn More
</Link>
</div>
</div>
</section>
)
}