Hello, i have problem. My site is always freezing when i implement this code

export default async function Highlight() {
  // const [items, setitems] = useState();

  // useEffect(() => {
  //   const item = axios.get('/api/items/highlight')
  //   .then(res => setitems(res.data))
  //   .catch(err => console.log(err))
  // }, [])

  // useEffect(() => {
  //   console.log(items);
  // }, [items]);


  return (
    <div className='highlight h-[400px] p-10 flex justify-center items-center'>
        <div className="highlight-container bg-custom-White h-full w-2/3 rounded-sm rounded-tl-lg border-2 border-custom-MainPink flex items-center relative">
          <div className="highlight-content w-full flex items-center justify-between px-32">
            <div className="highlight-img w-[200px] flex justify-center items-center h-full rotate-45">
            </div>
            <div className="highlight-info p-5 flex justify-center items-end flex-col gap-5">
              <div className="highlight-info-title text-left">
                <h1 className='text-left text-custom-Pink text-[50px] max-w-[400px] p-0 m-0'>Title</h1>
              </div>
              <div className="highlight-info-buy flex justify-center items-center">
                <p className='p-0 m-0 text-custom-Green font-bold'>Price</p>
                <button className="w-[100px] bg-custom-Green">KUPIT</button>
              </div>
            </div>
          </div>
        </div>
    </div>
  )
}