import React from 'react'
import { Spotlight } from './ui/Spotlight'
import { BackgroundBeams } from './ui/BackgroundBeams'
import { TextGenerateEffect } from './ui/TextGenerateEffect'

const Hero = () => {
  return (
    <div className="pub-20 pt-36">
        <div  >
            <Spotlight className="-top-40 -left-10 md:-left-32 md:-top-20 h-screen" fill="white"/>
            <Spotlight className="top-10 left-full h-[80vh]
            w-[50vw]" fill="purple"/>
            <Spotlight className="top-28 left-80 h-[80vh] w-[50vw]" fill="blue"/>
        </div>
        <div className="h-screen w-full rounded-md bg-black-100 flex flex-col items-center justify-center antialiased absolute top-0 left-0">
      <BackgroundBeams />
    </div>
    <div className="flex justify-center relative my-20 z-10">
       <div className='max-w-[89vw] md:max-w-2xl lg:max-w-[60vw] flex flex-col items-center justify-center'>
          <h2 className='uppercase tracking-widest text-cs text-center text-blue-100 max-w-80'> 
          {/*Dynamic Web Magic with  Next.js*/}
          </h2>
          <TextGenerateEffect
            className="text-center text-[40px]
            md:text-5xl lg:text-6xl"
            words="My Capstone Project"/>

            <p className='text-center md:tracking-wider mb-4 text-sm md:text-lg lg:text-2xl'>
              Hi, I&apos;m Lucien Letvinchuk, a student from RSS
            </p>
       </div>
    </div>


    </div>
  )
}

export default Hero