HeroSection

herosection-1779394345610.tsx

'use client'
export default function HeroSection({
  badge = '🚀 Now with 17,500+ components',
  title = 'Build Beautiful UIs at',
  highlight = 'Lightning Speed',
  desc = 'The largest AI-generated React component library. Browse, copy, and ship production-ready components in seconds.',
  primaryCTA = 'Browse Components',
  secondaryCTA = 'View Docs',
}) {
  return (
    <section style={{
      background:'linear-gradient(135deg,#0f0c29,#302b63,#24243e)',
      padding:'80px 24px', textAlign:'center', borderRadius:'24px',
      position:'relative', overflow:'hidden',
    }}>
      <div style={{
        position:'absolute', top:'-40px', left:'50%', transform:'translateX(-50%)',
        width:'400px', height:'400px', borderRadius:'50%',
        background:'radial-gradient(circle,rgba(109,40,217,0.3),transparent 70%)',
        pointerEvents:'none',
      }} />
      <div style={{ position:'relative', zIndex:1 }}>
        <div style={{
          display:'inline-flex', alignItems:'center', gap:'8px',
          background:'rgba(255,255,255,0.1)', backdropFilter:'blur(8px)',
          border:'1px solid rgba(255,255,255,0.2)', borderRadius:'9999px',
          padding:'6px 16px', fontSize:'13px', color:'#e2e8f0', fontWeight:500,
          marginBottom:'28px',
        }}>{badge}</div>
        <h1 style={{ fontSize:'52px', fontWeight:900, color:'#fff', margin:'0 0 8px', lineHeight:1.1 }}>{title}</h1>
        <h1 style={{
          fontSize:'52px', fontWeight:900, margin:'0 0 20px', lineHeight:1.1,
          background:'linear-gradient(90deg,#a78bfa,#60a5fa,#34d399)',
          WebkitBackgroundClip:'text', WebkitTextFillColor:'transparent', backgroundClip:'text',
        }}>{highlight}</h1>
        <p style={{ fontSize:'18px', color:'rgba(255,255,255,0.65)', lineHeight:1.7, maxWidth:'480px', margin:'0 auto 36px' }}>{desc}</p>
        <div style={{ display:'flex', gap:'14px', justifyContent:'center', flexWrap:'wrap' }}>
          <button style={{
            background:'linear-gradient(135deg,#6d28d9,#2563eb)', color:'#fff',
            border:'none', borderRadius:'12px', padding:'14px 28px',
            fontWeight:700, fontSize:'16px', cursor:'pointer',
            boxShadow:'0 8px 25px rgba(109,40,217,0.4)',
          }}>{primaryCTA} →</button>
          <button style={{
            background:'rgba(255,255,255,0.1)', color:'#fff',
            border:'1px solid rgba(255,255,255,0.2)', borderRadius:'12px',
            padding:'14px 28px', fontWeight:600, fontSize:'16px', cursor:'pointer',
            backdropFilter:'blur(8px)',
          }}>{secondaryCTA}</button>
        </div>
      </div>
    </section>
  )
}

Component info

CategoryHeroes

Frameworkreact

TierFREE

Copies0

About

Full-width hero section with gradient, CTA buttons and animated badge

More from Heroes

import React, { useState, useEffect } from 'react';

interface Props {
  phrases: string[];
  speed: number;
}

const TypewriterHero: React.FC<Props> = ({ phrases, speed }) => {
  const [currentPhrase, setCurrentPhrase] = useState(0);
  const [text,

TypewriterHero

Heroes

'use client'
import { useState } from 'react'

export default function HeroWithVideo() {
  const [playing, setPlaying] = useState(false)

  return (
    <div style={{ background: '#080808', padding: '64px 40px', display: 'flex', flexDirection: 'colum

HeroWithVideo

Heroes

import * as React from 'react';
import './particle-hero.css';
interface Particle {
  x: number;
  y: number;
  vx: number;
  vy: number;
  radius: number;
  color: string;
}
class ParticleHero extends React.Component<{}, { particles: Particle[] }> {

ParticleHero

Heroes

import React from 'react';
import './GradientHero.css';

interface GradientHeroProps {
  title: string;
  subtitle: string;
  ctaText: string;
  ctaLink: string;
}

const GradientHero: React.FC<GradientHeroProps> = ({ title, subtitle, ctaText, ctaLin

GradientHero

Heroes