How do i not call the globecomponent twice while staying showing it in the two different locations on the screen based on screen size: import { motion } from "framer-motion";
import dynamic from 'next/dynamic';
import { useState, useEffect, useRef } from "react";
import Bulb from "../components/Bulb";
import ProjectsBtn from "../components/ProjectsBtn";
import TrackVisibility from 'react-on-screen'; 
import { fadeIn } from "../variants";

const GlobeComponent = dynamic(() => import("../components/GlobeComponent"), { ssr: false });


const Home = () => {
  
  const [loopNum, setLoopNum] = useState(0);
  const [isDeleting, setIsDeleting] = useState(false);
  const [text, setText] = useState('');
  const [delta, setDelta] = useState(300 - Math.random() * 100);
  const [index, setIndex] = useState(1);
  const toRotate = ["Digital Reality", "Modern Websites", "Global Brands"];
  const period = 750;

  useEffect(() => {
    let ticker = setInterval(() => {
      tick();
    }, delta);

    return () => { clearInterval(ticker) };
  }, [text])

  const tick = () => {
    let i = loopNum % toRotate.length;
    let fullText = toRotate[i];
    let updatedText = isDeleting ? fullText.substring(0, text.length - 1) : fullText.substring(0, text.length + 1);

    setText(updatedText);

    if (isDeleting) {
      setDelta(prevDelta => prevDelta / 2);
    }

    if (!isDeleting && updatedText === fullText) {
      setIsDeleting(true);
      setIndex(prevIndex => prevIndex - 1);
      setDelta(period);
    } else if (isDeleting && updatedText === '') {
      setIsDeleting(false);
      setLoopNum(loopNum + 1);
      setIndex(1);
      setDelta(250);
    } else {
      setIndex(prevIndex => prevIndex + 1);
    }
  }

  return (
    <div className="bg-primary/30 h-full overflow-x-auto">
      {/* text */}
      <div className="w-full h-full pt-20">
        <div className="text-center flex flex-col justify-center sm:pt-40 pt-40 xl:pt-40 xl:text-left h-full container mx-auto">
          {/* title */}
          <motion.h1
            variants={fadeIn("down", 0.2)}
            initial="hidden"
            animate="show"
            exit="hidden"
            className="h1 my-text"
          >
          <TrackVisibility>
            {({ isVisible }) =>
            <div className={isVisible ? "animate__animated animate__fadeIn" : "text-center flex flex-col justify-center"}>
                  <div className="md:hidden w-full h-full flex justify-center pt-12 md:pt-0">
              <GlobeComponent />
            </div>
            Transforming Your <br /> Ideas Into{" "}<br />
                  <span className="text-accent typewriter" data-rotate='[ "Digital Reality", "Modern Websites", "Global Brands"]'>
                    {text}
                  </span>
            </div>}
          </TrackVisibility>
          </motion.h1>

          {/* subtitle */}
          <motion.p
            variants={fadeIn("down", 0.3)}
            initial="hidden"
            animate="show"
            exit="hidden"
            className="max-w-sm xl:max-w-xl mx-auto xl:mx-0 mb-10 xl:mb-16 text-lg font-monda"
          >
            With a keen eye for design and a passion for code, I bring visions to life with precision and polish. Let's collaborate to create a stunning online presence that showcases your unique brand and leaves a lasting impression. Elevate your digital game with a developer who is committed to quality and innovation.    
          </motion.p>

          {/* btn */}
          <div className="flex justify-center xl:hidden relative pb-15">
            <ProjectsBtn />
          </div>
          <motion.div
            variants={fadeIn("down", 0.4)}
            initial="hidden"
            animate="show"
            exit="hidden"
            className="hidden xl:flex"
          >
            <ProjectsBtn />
          </motion.div>
        </div>
       
      </div>
      {/* image */}
      <div className="hidden md:block w-[100%] xl:w-[50%] md:w-[100%] h-full pt-10 xl:mr-10 absolute xl:right-0 bottom-0">
        {/* bg img */}
        <div
          role="img"
          className="bg-none xl:bg-right xl:bg-no-repeat w-full h-full bg-cover bg-center relative"
          aria-hidden
        >

        <motion.div
          variants={fadeIn("up", 0.5)}
          initial="hidden"
          animate="show"
          exit="hidden"
          transition={{ duration: 1, ease: "easeInOut" }}
          className="w-full h-full max-w-[100%] max-h-[100%] absolute"
        >
            <div className="w-full h-full max-w-[100%] max-h-[100%] xl:pb-50 xl:mr-50 sm:m-auto">
              <GlobeComponent
                globeWidth={1100}
                globeHeight={1100}
              />
          </div>
          
        </motion.div> 
        </div>
       </div>
       <Bulb /> 
    </div>
  );
};

export default Home;