Hero Section Two

1'use client'
2import Image from 'next/image'
3import HeaderTwo from '../header/header-two'
4import { motion, useReducedMotion } from 'motion/react'
5import { AnimatedGroup } from '@/components/ui/components/animated-group'
6import { TextEffect } from '@/components/ui/components/text-effect'
7import { cn } from '@/lib/utils'
8 
9const Spotlight = () => {
10  return (
11    <svg
12      className={cn(
13        'animate-spotlight pointer-events-none absolute z-1 h-[169%] w-[138%] opacity-0 motion-reduce:animate-none lg:w-[84%]',
14      )}
15      xmlns="http://www.w3.org/2000/svg"
16      viewBox="0 0 3787 2842"
17      fill="none"
18    >
19      <g filter="url(#filter)">
20        <ellipse
21          cx="1924.71"
22          cy="273.501"
23          rx="1924.71"
24          ry="273.501"
25          transform="matrix(-0.822377 -0.568943 -0.568943 0.822377 3631.88 2291.09)"
26          fill="white"
27          fillOpacity="0.21"
28        ></ellipse>
29      </g>
30      <defs>
31        <filter
32          id="filter"
33          x="0.860352"
34          y="0.838989"
35          width="3785.16"
36          height="2840.26"
37          filterUnits="userSpaceOnUse"
38          colorInterpolationFilters="sRGB"
39        >
40          <feFlood floodOpacity="0" result="BackgroundImageFix"></feFlood>
41          <feBlend
42            mode="normal"
43            in="SourceGraphic"
44            in2="BackgroundImageFix"
45            result="shape"
46          ></feBlend>
47          <feGaussianBlur
48            stdDeviation="151"
49            result="effect1_foregroundBlur_1065_8"
50          ></feGaussianBlur>
51        </filter>
52      </defs>
53    </svg>
54  )
55}
56 
57export default function HeroSectionTwo() {
58  const label = 'Download the app'
59  const shouldReduceMotion = useReducedMotion()
60 
61  const container = {
62    rest: {},
63    hover: {
64      transition: {
65        staggerChildren: 0.025,
66      },
67    },
68    exit: {
69      transition: {
70        staggerChild: 0.025,
71      },
72    },
73  }
74 
75  const char = {
76    rest: { y: 0, opacity: 1 },
77    hover: {
78      y: shouldReduceMotion ? 0 : -12,
79      opacity: 0,
80      transition: { duration: 0.18 },
81    },
82  }
83 
84  const charBack = {
85    rest: {
86      y: shouldReduceMotion ? 0 : 12,
87      opacity: 0,
88    },
89    hover: {
90      y: 0,
91      opacity: 1,
92      transition: { duration: 0.18 },
93    },
94  }
95  return (
96    <>
97      <HeaderTwo />
98 
99      <section className="relative overflow-hidden bg-background">
100        <Spotlight />
101 
102// … truncated