Tech Behind Nina - Copy this React, Tailwind Component to your project

"use-client";-import-{-useEffect,-useRef,-useState-}-from-"react";-import-{-bottomSvg,-circularElement,-line,-lines,-ninaBody,-tiltLine,-topSvg,-}-from-"../assets";-import-gsap-from-"gsap";-import-{-ScrollTrigger-}-from-"gsap/ScrollTrigger";-import-Image-from-"next/image";-gsap.registerPlugin(ScrollTrigger);-function-TechBehindNina()-{-const-ninaRef-=-useRef(null);-const-[isMobile,-setIsMobile]-=-useState(false);-useEffect(()-=>-{-let-resizeTimeout;-const-checkMobile-=-()-=>-{-clearTimeout(resizeTimeout);-resizeTimeout-=-setTimeout(()-=>-{-setIsMobile(window.innerWidth-<=-1024);-},-200);-};-checkMobile();-window.addEventListener("resize",-checkMobile);-return-()-=>-window.removeEventListener("resize",-checkMobile);-},-[]);-useEffect(()-=>-{-ninaRef.current.classList.add("nina-animation");-const-timeline-=-gsap.timeline({-scrollTrigger:-{-trigger:-"#ninaBody",-start:-"top-70vh",-end:-"220%-top",-scrub:-true,-},-});-timeline.to(isMobile-?-null-:-"#ninaBody",-{-y:-"146vh",-x:-"-32vw",-scale:-1.55,-duration:-1,-});-timeline.to(isMobile-?-null-:-"#ninaBody",-{-y:-"235vh",-x:-"-0.7vw",-scale:-0.815,-duration:-1,-});-return-()-=>-{-timeline.kill();-ScrollTrigger.getAll().forEach((trigger)-=>-trigger.kill());-};-},-[isMobile]);-return-(-<>-<div-className="chromaFont-flex-flex-col-items-center-bg-[#060A15]-text-white-pt-5">-{/*-Title-*/}-<h2-className="text-xl-md:text-3xl-md:-mb-32-lg:mb-0-lg:text-4xl-font-bold-md:font-medium">-THE-TECH-BEHIND-NINA-</h2>-{/*-Central-Image-with-surrounding-labels-*/}-<div-className="flex-items-center-relative-justify-center-h-[105vh]-md:h-[160vh]-lg:h-[120vh]-w-[160vw]-lg:w-[140vw]">-<div-className="lg:flex-flex-col-justify-around-h-full-text-2xl--mr-12-scale-75-mb-10-hidden">-<div-className="">-<p-className="text-center-relative-top-9--left-16-whitespace-pre">-Natural-Language-Processing-</p>-<Image-src={tiltLine}-className="scale-x-[-1]-object-cover-overflow-visible"-alt="tilted-line"-/>-</div>-<div-className="">-<p-className="text-center-relative-top-32--left-24-whitespace-pre">-Intelligent-Data-</p>-<Image-src={line}-className="object-cover-overflow-visible"-alt="tiled-lines"-/>-</div>-<div-className="">-<p-className="text-center-whitespace-pre-relative-top-32--left-24">-Automation-</p>-<Image-src={line}-className="object-cover-overflow-visible"-alt="another-line"-/>-</div>-</div>-{/*-Main-NINA-Image-*/}-<Image-src={ninaBody}-alt="Nina-Body"-id="ninaBody"-className="z-30-h-[100vh]-w-auto-lg:scale-[1]"-ref={ninaRef}-/>-{/*-Circle-Background-*/}-<div-className="absolute-h-[50vh]--top-1/2-rounded-full">-<Image-src={topSvg}-alt="topimage"-/>-</div>-<div-className="absolute-h-[50vh]-top-0-z-[2]-rounded-full">-<Image-src={bottomSvg}-alt="bottom-image"-/>-</div>-<Image-src={circularElement}-alt="circular-line"-className="absolute-h-[70vh]-md:h-[100vh]-lg:h-[80vh]-object-cover-w-auto-overflow-visible-spinAnimR-rotate-[10deg]"-/>-<Image-src={circularElement}-alt="circular-line-element"-className="absolute-h-[70vh]-md:h-[100vh]-lg:h-[80vh]-object-cover-w-auto-spinAnim-overflow-visible"-/>-{/*-Individual-Labels-*/}-<div-className="lg:flex-flex-col-justify-around-h-full-text-2xl--ml-20-scale-75-mb-10-hidden">-<div-className="w-[140%]">-<p-className="relative--right-28-top-10-whitespace-pre-">-Speech-to-Text-(STT)-<br-/>-Text-to-Speech-(TTS)-</p>-<Image-src={tiltLine}-className="object-cover-overflow-visible"-alt="tiled-line"-/>-</div>-<div-className="w-[130%]">-<p-className="text-center-whitespace-pre-relative-top-40--right-16-">-Multi-Lingual-Support-</p>-<Image-src={line}-className="w-full-object-cover-overflow-visible"-alt="tiled-lines"-/>-</div>-<div-className="">-<p-className="text-center-whitespace-pre-text-md-relative--bottom-48--right-16-">-API-Integrations-</p>-<Image-src={tiltLine}-className="scale-y-[-1]-object-cover-overflow-visible"-alt="another-tilted-line"-/>-</div>-</div>-</div>-</div>-<div-className="flex-flex-col--mt-9-pb-10-md:hidden-items-center-justify-center-w-screen-bg-[#060A15]-text-white-text-xl-">-{/*-List-Items-*/}-<div-className="border-b-border-gray-500-w-full-py-2-text-center-text-[90%]">-NLP-Processing-</div>-<div-className="-border-b-border-gray-500-w-full-py-2-text-center-text-[90%]">-STT/TTS-Module-</div>-<div-className="-border-b-border-gray-500-w-full-py-2-text-center-text-[90%]">-Audio-Output-</div>-<div-className="-border-b-border-gray-500-w-full-py-2-text-center-text-[90%]">-Processed-Text-</div>-<div-className="-border-b-border-gray-500-w-full-py-2-text-center-text-[90%]">-CRM-Integration-</div>-</div>-</>-);-}-export-default-TechBehindNina;