import React, { useEffect, useState } from 'react'; import { Link } from 'react-router-dom'; // Ensure Link is imported import '../styles/herosection.css'; // Import the CSS file for styling

const HeroSection = () => { const [inView, setInView] = useState(false); // State to track visibility

// Intersection Observer to detect when the section is in view useEffect(() => { const observer = new IntersectionObserver( ([entry]) => { setInView(entry.isIntersecting); // Set state when the section is in view }, { threshold: 0.5 } // Trigger when 50% of the section is in view );

const section = document.getElementById('home'); // Select the section
if (section) {
  observer.observe(section); // Start observing the section
}

return () => {
  if (section) {
    observer.unobserve(section); // Clean up the observer
  }
};

}, []);

// Function to safely manipulate DOM function fetchCryptoData() { try { // Safely attempt to get the element by ID const element = document.getElementById('home'); // The section with ID 'home' if (element) { element.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; // Example of DOM manipulation } else { console.warn('Element with ID "home" not found'); } } catch (error) { // Catch and log any errors console.error('Error manipulating DOM:', error); } }

// Call fetchCryptoData on component mount useEffect(() => { fetchCryptoData(); }, []);

return ( <section id="home" className={hero-section ${inView ? 'in-view' : ''}}> <div className="video-container1"> <video autoPlay muted loop playsInline id="hero-video"> <source src="https://ptgr.ch/wp-content/uploads/2024/01/swiss_video.mp4" type="video/mp4" /> Your browser does not support the video tag. </video> </div> <div className="headingcontnetdiv container"> <p className="page-indicator-text">HOME</p> <p className='headertit'>We advise you strategically on Digital Assets. <span className='headtit1'>With Passion. With Knowledge. With Care.</span></p> <div style={{marginTop:'30px'}}>

    <Link to="/Aboutus">
      <a className="card-button" >
        Get Started <i className="fas fa-play"></i>
      </a>
    </Link></div>
  </div>
</section>

); };

export default HeroSection;

now make changes to this hero section too