fix the circular animation because it does not show up or at least I cannot see it in jsx

"use client";
import React from "react";
import Image from "next/image";
import { TypeAnimation } from "react-type-animation";
import { motion } from "framer-motion";
import Link from "next/link";

const HeroSection = () => {
  return (
    <section className="lg:py-16">
      <div className="grid grid-cols-1 sm:grid-cols-12">
        <motion.div
          initial={{ opacity: 0, scale: 0.5 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ duration: 1 }}
          className="col-span-8 place-self-center text-center sm:text-left justify-self-start"
        >
          <h1 className="text-white mb-4 text-4xl sm:text-5xl lg:text-8xl lg:leading-normal font-extrabold">
            <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary-400 to-secondary-600">
              Hello, I&apos;m{" "}
            </span>
            <br />
            <TypeAnimation
              sequence={[
                "Jonathan",
                1000,
                "Data Science Student",
                1000,
                "Future Data Scientist",
                1000,
                "Curious Learner",
                1000,
              ]}
              wrapper="span"
              speed={50}
              repeat={Infinity}
            />
          </h1>
          <p className="text-[#ADB7BE] text-base sm:text-lg mb-6 lg:text-xl">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
            voluptuous.
          </p>
          <div className="flex space-x-4">
            <Link
              href=<PRESIDIO_ANONYMIZED_URL>
              target="_blank"
              rel="noopener noreferrer"
              className="px-6 inline-block py-3 rounded-full bg-gradient-to-br from-primary-500 to-secondary-500 hover:bg-slate-200 text-white"
            >
              <svg
                className="w-5 h-5 inline-block mr-2"
                xmlns="http://www.w3.org/2000/svg"
                fill="currentColor"
                viewBox="0 0 448 512"
              >
                <path d="M100.28 448H7.4V149.6h92.88zm-46.44-340.8a53.37 53.37 0 1 1 53.36-53.36 53.37 53.37 0 0 1-53.37 53.36zM447.9 448h-92.68V302.4c0-34.7-12.42-58.4-43.46-58.4-23.7 0-37.81 15.94-44.05 31.3-2.27 5.54-2.82 13.3-2.82 21.1V448h-92.68s1.24-264.8 0-292.8h92.68v41.5c-.18.3-.43.6-.61.9h.61v-.9c12.34-19 34.32-46.2 83.43-46.2 60.86 0 106.48 39.7 106.48 125.2V448z" />
              </svg>
              LinkedIn
            </Link>
            <Link
              href="https://github.com/judy"
              target="_blank"
              rel="noopener noreferrer"
              className="px-6 inline-block py-3 rounded-full bg-gradient-to-br from-primary-500 to-secondary-500 hover:bg-slate-200 text-white"
            >
              <svg
                className="w-5 h-5 inline-block mr-2"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="currentColor"
              >
                <path d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387c.599.111.793-.261.793-.577v-2.051c-3.182.711-3.992-1.45-4.38-1.836c-.427-.378-.957-1.835-1.806-2.287c-.849-.451-1.133-.954-.889-1.848c.245-.893.841-1.481 1.659-1.432c1.149.06 2.162.824 2.162 1.971c0 1.377-.299 2.486-1.025 3.136c-.626.627-1.739 1.907-2.065 2.465c-.326.558-.399 1.254-.105 1.851v2.814c0 .363.255.658.599.572c4.765-1.589 8.208-6.086 8.208-11.386C24 5.373 18.627 0 12 0z" />
              </svg>
              GitHub
            </Link>
          </div>
        </motion.div>
        <motion.div
          initial={{ opacity: 0, scale: 0.5 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ duration: 1 }}
          className="col-span-4 place-self-center mt-4 lg:mt-0"
        >
          <div className="relative rounded-full bg-[#181818] w-[250px] h-[250px] lg:w-[400px] lg:h-[400px]">
            <svg
              className="absolute inset-0 w-full h-full animate-spin"
              viewBox="0 0 100 100"
              xmlns="http://www.w3.org/2000/svg"
            >
              <defs>
                <radialGradient id="dotGradient" cx="50%" cy="50%" r="50%">
                  <stop offset="0%" stopColor="#ADB7BE" />
                  <stop offset="100%" stopColor="#4CAF50" />
                </radialGradient>
              </defs>
              <circle
                cx="50"
                cy="50"
                r="40"
                stroke="url(#dotGradient)"
                strokeWidth="4"
                fill="none"
                strokeDasharray="1 10"
                strokeLinecap="round"
              />
              <circle
                cx="50"
                cy="50"
                r="35"
                stroke="#ADB7BE"
                strokeWidth="4"
                fill="none"
                strokeDasharray="1 10"
                strokeLinecap="round"
              />
              <circle
                cx="50"
                cy="50"
                r="30"
                stroke="url(#dotGradient)"
                strokeWidth="4"
                fill="none"
                strokeDasharray="1 10"
                strokeLinecap="round"
              />
              <circle
                cx="50"
                cy="50"
                r="25"
                stroke="#ADB7BE"
                strokeWidth="4"
                fill="none"
                strokeDasharray="1 10"
                strokeLinecap="round"
              />
              <circle
                cx="50"
                cy="50"
                r="20"
                stroke="url(#dotGradient)"
                strokeWidth="4"
                fill="none"
                strokeDasharray="1 10"
                strokeLinecap="round"
              />
            </svg>
            <div className="absolute inset-2 rounded-full overflow-hidden">
              <Image
                src="/images/1680518230650.jpeg"
                alt="hero image"
                className="object-cover w-full h-full"
                width={400}  // Ensure the width and height are consistent
                height={400} // Ensure the width and height are consistent
              />
            </div>
          </div>
        </motion.div>
      </div>
      <style jsx>{`
        @keyframes spin {
          0% {
            transform: rotate(0deg);
          }
          100% {
            transform: rotate(360deg);
          }
        }
        .animate-spin {
          animation: spin 10s linear infinite; /* Adjusted to a slightly faster speed */
        }
      `}</style>
    </section>
  );
};

export default HeroSection;