Features - Copy this React, Tailwind Component to your project

import-{-useState,-useRef-}-from-"react";-import-{-TiLocationArrow-}-from-"react-icons/ti";-import-IconDisplay-from-"./ToolTips";-export-const-BentoTilt-=-({-children,-className-=-""-})-=>-{-const-[transformStyle,-setTransformStyle]-=-useState("");-const-itemRef-=-useRef(null);-const-handleMouseMove-=-(event)-=>-{-if-(!itemRef.current)-return;-const-{-left,-top,-width,-height-}-=-itemRef.current.getBoundingClientRect();-const-relativeX-=-(event.clientX---left)-/-width;-const-relativeY-=-(event.clientY---top)-/-height;-const-tiltX-=-(relativeY---0.5)-*-5;-const-tiltY-=-(relativeX---0.5)-*--5;-const-newTransform-=-`perspective(700px)-rotateX(${tiltX}deg)-rotateY(${tiltY}deg)-scale3d(.95,-.95,-.95)`;-setTransformStyle(newTransform);-};-const-handleMouseLeave-=-()-=>-{-setTransformStyle("");-};-return-(-<div-ref={itemRef}-className={className}-onMouseMove={handleMouseMove}-onMouseLeave={handleMouseLeave}-style={{-transform:-transformStyle-}}->-{children}-</div>-);-};-export-const-BentoCard-=-({-src,-title,-description,-isComingSoon-})-=>-{-const-[cursorPosition,-setCursorPosition]-=-useState({-x:-0,-y:-0-});-const-[hoverOpacity,-setHoverOpacity]-=-useState(0);-const-hoverButtonRef-=-useRef(null);-const-handleMouseMove-=-(event)-=>-{-if-(!hoverButtonRef.current)-return;-const-rect-=-hoverButtonRef.current.getBoundingClientRect();-setCursorPosition({-x:-event.clientX---rect.left,-y:-event.clientY---rect.top,-});-};-const-handleMouseEnter-=-()-=>-setHoverOpacity(1);-const-handleMouseLeave-=-()-=>-setHoverOpacity(0);-return-(-<div-className="relative-size-full">-<video-src={src}-loop-muted-autoPlay-className="absolute-left-0-top-0-size-full-object-cover-object-center-"-/>-<div-className="relative-z-10-flex-size-full-flex-col-justify-between-p-5-text-blue-50">-<div>-<h1-className="bento-title-special-font">{title}</h1>-{description-&&-(-<p-className="mt-3-max-w-64-text-xs-md:text-base">{description}</p>-)}-</div>-{isComingSoon-&&-(-<div-ref={hoverButtonRef}-onMouseMove={handleMouseMove}-onMouseEnter={handleMouseEnter}-onMouseLeave={handleMouseLeave}-className="border-hsla-relative-flex-w-fit-cursor-pointer-items-center-gap-1-overflow-hidden-rounded-full-bg-black-px-5-py-2-text-xs-uppercase-text-white/20"->-{/*-Radial-gradient-hover-effect-*/}-<div-className="pointer-events-none-absolute--inset-px-opacity-0-transition-duration-300"-style={{-opacity:-hoverOpacity,-background:-`radial-gradient(100px-circle-at-${cursorPosition.x}px-${cursorPosition.y}px,-#656fe288,-#00000026)`,-}}-/>-<TiLocationArrow-className="relative-z-20"-/>-<p-className="relative-z-20">Talk-To-An-Expert</p>-</div>-)}-</div>-</div>-);-};-const-Features-=-()-=>-(-<section-className="bg-black-pb-52">-<div-className="container-mx-auto-px-3-md:px-10">-<div-className="px-5-py-32">-<p-className="font-circular-web-text-lg-text-blue-50">-By-embracing-cutting-edge-technology-and-redefining-the-conventional-approach-</p>-<p-className="max-w-md-font-circular-web-text-lg-text-blue-50-opacity-50">-we-ensure-that-emergency-communication-remains-robust-and-accessible,-fostering-peace-of-mind-and-confidence-in-an-increasingly-interconnected-world.-Your-safety-is-our-paramount-priority,-and-we-continually-strive-to-improve-and-adapt-to-meet-the-evolving-needs-of-a-changing-landscape.-</p>-</div>-<BentoTilt-className="-border-hsla-relative-mb-7-h-96-w-full-overflow-hidden-rounded-md-md:h-[65vh]">-<IconDisplay-/>-</BentoTilt>-<div-className="grid-h-[135vh]-w-full-grid-cols-2-grid-rows-3-gap-7">-<BentoTilt-className="bento-tilt_1-row-span-1-md:col-span-1-md:row-span-2">-<BentoCard-src="videos/feature-1.mp4"-description="Ideal-for-elevators-areas-of-rescue-two-way-communication-emergency-and-pool-phones-Priority-cellular-acces-monitored-phone-line-and-robust-hardware-bundled-into-one-Provides-a-secure-direct-connection-over-an-LTE-cellular-network-to-a-UL-Listed-Central-Station."-isComingSoon-/>-</BentoTilt>-<BentoTilt-className="bento-tilt_1-row-span-1-md:col-span-1-md:row-span-2-opacity-50-hover:opacity-100-transition-duration-300">-<BentoCard-src="videos/feature-4-1.mp4"-description="Cellular-Battery-Backup-Extended-Life-of-Existing-Assets-Nationwide-Coverage-Improved-Reliability-Mass-Management-of-Devices-Network-Visibility-&-Reporting"-isComingSoon-/>-</BentoTilt>-<BentoTilt-className="bento-tilt_1-me-14-md:col-span-1-md:me-0-hover:opacity-100-transition-opacity-duration-300-opacity-50">-<BentoCard-src="videos/feature-3.mp4"-description="Revolutionary-Features-to-Elevate-Your-Experience."-isComingSoon-/>-</BentoTilt>-<BentoTilt-className="bento-tilt_2">-<div-className="flex-size-full-flex-col-justify-between-bg-violet-300-p-5">-<h1-className="bento-title-special-font-max-w-64-text-black">-M<b>o</b>re-co<b>m</b>ing-s<b>o</b>on.-</h1>-<TiLocationArrow-className="m-5-scale-[5]-self-end"-/>-</div>-</BentoTilt>-</div>-</div>-</section>-);-export-default-Features;-Make-the-text-change-color-as-you-scroll-so-the-words-highlight