Header 5

1"use client";
2 
3import SmoothButton from "@/components/smoothui/smooth-button";
4import { motion, useReducedMotion } from "motion/react";
5 
6const SPRING = {
7  bounce: 0.1,
8  duration: 0.25,
9  type: "spring" as const,
10};
11 
12export function HeroSpotlight() {
13  const shouldReduceMotion = useReducedMotion();
14 
15  return (
16    <section aria-labelledby="hero-spotlight-heading">
17      <div className="relative flex min-h-[600px] items-center justify-center overflow-hidden bg-zinc-950 py-24 md:py-32">
18        {/* Spotlight beam */}
19        <motion.div
20          aria-hidden="true"
21          className="pointer-events-none absolute top-0 left-1/2 h-full w-[600px] -translate-x-1/2"
22          initial={
23            shouldReduceMotion ? { opacity: 0.15 } : { opacity: 0, scaleX: 0 }
24          }
25          style={{
26            background:
27              "conic-gradient(from 180deg at 50% 0%, transparent 40%, rgba(120, 119, 198, 0.12) 50%, transparent 60%)",
28          }}
29          transition={
30            shouldReduceMotion
31              ? { duration: 0 }
32              : { duration: 0.8, ease: [0.23, 1, 0.32, 1] }
33          }
34          viewport={{ once: true }}
35          whileInView={
36            shouldReduceMotion
37              ? { opacity: 0.15 }
38              : { opacity: 0.15, scaleX: 1 }
39          }
40        />
41 
42        {/* Floating particles */}
43        <div
44          aria-hidden="true"
45          className="pointer-events-none absolute inset-0"
46        >
47          {Array.from({ length: 20 }, (_, i) => (
48            <div
49              className="absolute h-1 w-1 rounded-full bg-white/20"
50              key={`particle-${i}`}
51              style={{
52                animation: `pulse ${2 + (i % 3)}s ease-in-out infinite ${(i % 5) * 0.5}s`,
53                left: `${(i * 37 + 13) % 100}%`,
54                top: `${(i * 53 + 7) % 100}%`,
55              }}
56            />
57          ))}
58        </div>
59 
60        <div className="relative z-10 mx-auto max-w-4xl px-6 text-center">
61          <motion.div
62            initial={
63              shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 24 }
64            }
65            transition={
66              shouldReduceMotion
67                ? { duration: 0 }
68                : { ...SPRING, staggerChildren: 0.08 }
69            }
70            viewport={{ once: true }}
71            whileInView={
72              shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
73            }
74          >
75            <h1
76// … truncated