diff --git a/Components/Layout/section.jsx b/Components/Layout/section.jsx index b581e75..cfdbc1d 100644 --- a/Components/Layout/section.jsx +++ b/Components/Layout/section.jsx @@ -1,5 +1,6 @@ import React, { useEffect, useRef, useState } from "react"; import VideoButton from "/home/clyde/Code/shiloh/Components/Buttons/video-button.jsx"; + const Section = ({ videoUrl, text, videoId, buttonOneText, buttonTwoText }) => { const videoRef = useRef(null); const [isPlaying, setIsPlaying] = useState(false); @@ -10,23 +11,27 @@ const Section = ({ videoUrl, text, videoId, buttonOneText, buttonTwoText }) => { rootMargin: "0px", threshold: 0.5, }; - + const observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { setIsPlaying(true); - videoRef.current.play(); + videoRef.current?.play(); } else { setIsPlaying(false); - videoRef.current.pause(); + videoRef.current?.pause(); } }); }, options); - - observer.observe(videoRef.current); - + + if (videoRef.current) { + observer.observe(videoRef.current); + } + return () => { - observer.unobserve(videoRef.current); + if (videoRef.current) { + observer.unobserve(videoRef.current); + } }; }, []); diff --git a/pages/about.js b/pages/about.js new file mode 100644 index 0000000..00d0c3c --- /dev/null +++ b/pages/about.js @@ -0,0 +1,18 @@ +import React from "react"; +import Navbar from "../Components/Layout/navbar.jsx"; +import Section from "../Components/Layout/section.jsx" + +export default function Home() { + return ( + <> + +
+ + ); +} diff --git a/pages/contactus.js b/pages/contactus.js new file mode 100644 index 0000000..5ae612e --- /dev/null +++ b/pages/contactus.js @@ -0,0 +1,18 @@ +import React from "react"; +import Navbar from "../Components/Layout/navbar.jsx"; +import Section from "../Components/Layout/section.jsx" + +export default function Home() { + return ( + <> + +
+ + ); +} diff --git a/pages/getinvolved.js b/pages/getinvolved.js new file mode 100644 index 0000000..b4cbb61 --- /dev/null +++ b/pages/getinvolved.js @@ -0,0 +1,18 @@ +import React from "react"; +import Navbar from "../Components/Layout/navbar.jsx"; +import Section from "../Components/Layout/section.jsx" + +export default function Home() { + return ( + <> + +
+ + ); +} diff --git a/pages/hireus.js b/pages/hireus.js new file mode 100644 index 0000000..a782823 --- /dev/null +++ b/pages/hireus.js @@ -0,0 +1,18 @@ +import React from "react"; +import Navbar from "../Components/Layout/navbar.jsx"; +import Section from "../Components/Layout/section.jsx" + +export default function Home() { + return ( + <> + +
+ + ); +} diff --git a/pages/index.js b/pages/index.js index 6adb367..5c0a7ca 100644 --- a/pages/index.js +++ b/pages/index.js @@ -8,37 +8,43 @@ export default function Home() { <>
+ +
+ + ); +}