HeroWithVideo

herowithvideo-1779379671801.tsx

'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: 'column', alignItems: 'center', position: 'relative', overflow: 'hidden' }}>
      {/* Background gradient */}
      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse at 50% -20%, rgba(201,168,76,0.12) 0%, transparent 60%)', pointerEvents: 'none' }} />

      <div style={{ position: 'relative', maxWidth: 640, textAlign: 'center' }}>
        {/* Pills */}
        <div style={{ display: 'flex', gap: 8, justifyContent: 'center', flexWrap: 'wrap', marginBottom: 24 }}>
          {['MCP ready', 'TypeScript', 'Dark mode', 'Next.js 15'].map(p => (
            <span key={p} style={{ background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.1)', color: 'rgba(255,255,255,0.6)', padding: '4px 12px', borderRadius: 20, fontSize: 12 }}>{p}</span>
          ))}
        </div>

        <h1 style={{ color: '#F5F5F0', fontSize: 52, fontWeight: 900, lineHeight: 1.1, letterSpacing: '-0.02em', marginBottom: 20 }}>
          The UI library<br />
          <span style={{ background: 'linear-gradient(135deg, #C9A84C 0%, #f0c060 50%, #C9A84C 100%)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundSize: '200% auto', animation: 'shine 3s linear infinite' }}>
            built by AI
          </span>
        </h1>

        <p style={{ color: 'rgba(255,255,255,0.55)', fontSize: 18, lineHeight: 1.6, marginBottom: 40 }}>
          120+ production-ready React components. Search and install via Claude Code MCP. No more copy-pasting from docs.
        </p>

        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', marginBottom: 48, flexWrap: 'wrap' }}>
          <button style={{ background: '#C9A84C', color: '#0A0A0A', border: 'none', borderRadius: 12, padding: '14px 32px', fontWeight: 800, cursor: 'pointer', fontSize: 15 }}>
            Browse components →
          </button>
          <button style={{ background: 'rgba(255,255,255,0.06)', color: '#F5F5F0', border: '1px solid rgba(255,255,255,0.12)', borderRadius: 12, padding: '14px 24px', cursor: 'pointer', fontSize: 15, display: 'flex', alignItems: 'center', gap: 8 }}>
            <span style={{ fontSize: 16 }}>▶</span> Watch demo (2 min)
          </button>
        </div>

        {/* Video placeholder */}
        <div onClick={() => setPlaying(p => !p)} style={{ position: 'relative', borderRadius: 20, overflow: 'hidden', border: '1px solid rgba(255,255,255,0.08)', background: '#0F0F0F', cursor: 'pointer', boxShadow: '0 32px 80px rgba(0,0,0,0.5)' }}>
          <div style={{ height: 300, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'linear-gradient(135deg, #0F0F0F, #111)' }}>
            {/* Fake UI screenshot */}
            <div style={{ width: '80%', display: 'flex', flexDirection: 'column', gap: 8, opacity: playing ? 0.3 : 1, transition: 'opacity 0.3s' }}>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
                {[['#C9A84C', 'GlowButton'], ['#6366f1', 'HoverCard'], ['#22c55e', 'CommandMenu']].map(([c, n]) => (
                  <div key={n as string} style={{ background: (c as string) + '15', border: `1px solid ${c as string}30`, borderRadius: 8, padding: '10px', textAlign: 'center' }}>
                    <div style={{ color: c as string, fontSize: 16, marginBottom: 4 }}>⬡</div>
                    <div style={{ color: 'rgba(255,255,255,0.5)', fontSize: 10 }}>{n as string}</div>
                  </div>
                ))}
              </div>
              <div style={{ height: 6, background: 'rgba(255,255,255,0.06)', borderRadius: 3 }} />
              <div style={{ height: 6, width: '70%', background: 'rgba(255,255,255,0.04)', borderRadius: 3 }} />
            </div>
            {!playing && (
              <div style={{ position: 'absolute', width: 64, height: 64, background: 'rgba(201,168,76,0.9)', borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 0 32px rgba(201,168,76,0.4)', cursor: 'pointer' }}>
                <span style={{ color: '#0A0A0A', fontSize: 24, marginLeft: 4 }}>▶</span>
              </div>
            )}
            {playing && (
              <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <div style={{ width: 40, height: 40, border: '3px solid rgba(201,168,76,0.3)', borderTopColor: '#C9A84C', borderRadius: '50%', animation: 'spin 0.8s linear infinite' }} />
              </div>
            )}
          </div>
          <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 60, background: 'linear-gradient(transparent, rgba(0,0,0,0.8))', display: 'flex', alignItems: 'flex-end', padding: '0 20px 14px' }}>
            <span style={{ color: 'rgba(255,255,255,0.6)', fontSize: 12 }}>Empire UI — MCP component search demo · 2:34</span>
          </div>
        </div>
      </div>
      <style>{`@keyframes shine { to { background-position: 200% center } } @keyframes spin { to { transform:rotate(360deg) } }`}</style>
    </div>
  )
}

Component info

CategoryHeroes

Frameworkreact

TierFREE

Copies0

About

Product hero section with video/demo placeholder, feature pills, animated gradient, and CTA pair

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

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

'use client'
import { useEffect, useRef } from 'react'

export default function GradientHero() {
  const canvasRef = useRef<HTMLCanvasElement>(null)

  useEffect(() => {
    const canvas = canvasRef.current!
    const ctx = canvas.getContext('2d')!

GradientHero

Heroes