Update to site
This commit is contained in:
parent
426b6d695c
commit
7ad234ec36
@ -6,8 +6,8 @@ import NavItem from "./nav-item";
|
||||
const MENU_LIST = [
|
||||
{ text: "about", href: "/about" },
|
||||
{ text: "get involved", href: "/getinvolved" },
|
||||
{ text: "projects", href: "/projects" },
|
||||
{ text: "hire us", href: "/hireus" },
|
||||
//{ text: "projects", href: "/projects" },
|
||||
//{ text: "hire us", href: "/hireus" },
|
||||
{ text: "contact us", href: "/contactus" },
|
||||
];
|
||||
const Navbar = () => {
|
||||
|
@ -8,10 +8,12 @@ const Section = ({
|
||||
videoId,
|
||||
buttonOneText,
|
||||
buttonTwoText,
|
||||
buttonLink = "/", // add a default value,
|
||||
buttonLink = "/",
|
||||
headingLevel = 1,
|
||||
}) => {
|
||||
const videoRef = useRef(null);
|
||||
const [isPlaying, setIsPlaying] = useState(false);
|
||||
const [hasInteracted, setHasInteracted] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const options = {
|
||||
@ -24,7 +26,9 @@ const Section = ({
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
setIsPlaying(true);
|
||||
videoRef.current?.play();
|
||||
if (!isMobile) {
|
||||
videoRef.current?.play();
|
||||
}
|
||||
} else {
|
||||
setIsPlaying(false);
|
||||
videoRef.current?.pause();
|
||||
@ -43,28 +47,63 @@ const Section = ({
|
||||
};
|
||||
}, []);
|
||||
|
||||
let isMobile = false;
|
||||
if (typeof window !== "undefined") {
|
||||
isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
|
||||
}
|
||||
|
||||
const handlePlayVideo = () => {
|
||||
if (videoRef.current) {
|
||||
videoRef.current.play();
|
||||
setHasInteracted(true);
|
||||
}
|
||||
};
|
||||
|
||||
const Heading = headingLevel === 1 ? "h1" : "h2";
|
||||
|
||||
return (
|
||||
<div className="relative z-10 h-screen w-screen">
|
||||
<video
|
||||
className="absolute h-screen w-screen object-cover blur-sm"
|
||||
src={videoUrl}
|
||||
ref={videoRef}
|
||||
muted
|
||||
loop
|
||||
autoPlay={isPlaying}
|
||||
preload="metadata"
|
||||
/>
|
||||
{isMobile ? (
|
||||
<div
|
||||
className="absolute h-screen w-screen object-cover blur-sm"
|
||||
style={{
|
||||
backgroundImage: `url(${videoUrl})`,
|
||||
backgroundSize: "cover",
|
||||
backgroundPosition: "center",
|
||||
filter: "blur(4px)",
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<video
|
||||
className="absolute h-screen w-screen object-cover blur-sm"
|
||||
src={videoUrl}
|
||||
ref={videoRef}
|
||||
muted
|
||||
loop
|
||||
autoPlay={!isMobile || (isMobile && isPlaying && hasInteracted)}
|
||||
preload="metadata"
|
||||
/>
|
||||
)}
|
||||
<div className="relative z-10 flex flex-col items-center justify-center h-full">
|
||||
<div className="relative flex justify-center items-end w-full mb-20">
|
||||
<h1 className="text-6xl font-normal text-white">{text}</h1>
|
||||
<Heading className={`text-6xl font-normal text-white ${isMobile ? 'text-4xl md:text-5xl mx-4 px-2' : ''}`}>{text}</Heading>
|
||||
</div>
|
||||
<div className="flex justify-start space-x-4">
|
||||
<VideoButton videoId={videoId} buttonOneText={buttonOneText} />
|
||||
{isMobile && !hasInteracted ? (
|
||||
<button
|
||||
onClick={handlePlayVideo}
|
||||
className="px-4 mt-8 mx-5 py-2 text-white"
|
||||
>
|
||||
{buttonOneText}
|
||||
</button>
|
||||
) : (
|
||||
<VideoButton videoId={videoId} buttonOneText={buttonOneText} />
|
||||
)}
|
||||
{buttonLink && (
|
||||
<Link
|
||||
href={buttonLink}
|
||||
id="ButtonLink"
|
||||
className="px-4 mt-8 mx-5 py-2 text-white "
|
||||
className="px-4 mt-8 mx-5 py-2 text-white"
|
||||
>
|
||||
{buttonTwoText}
|
||||
</Link>
|
||||
|
@ -2,7 +2,7 @@ import Link from "next/link";
|
||||
|
||||
const SubSection = ({ h2Text, p1Text, h3Text, p2Text }) => {
|
||||
return (
|
||||
<div className="relative bg-blue-600 w-full h-screen">
|
||||
<div className="relative bg-black-600 w-full h-screen">
|
||||
<div className="relative z-10 flex flex-col items-center justify-center h-full">
|
||||
<div className="relative flex justify-center items-end w-full mb-20">
|
||||
<h2 className="text-5xl font-normal text-white mt-8">{h2Text}</h2>
|
||||
|
9
package-lock.json
generated
9
package-lock.json
generated
@ -13,6 +13,7 @@
|
||||
"core-js": "^3.30.2",
|
||||
"framer-motion": "^10.12.4",
|
||||
"grid": "^4.10.8",
|
||||
"helmet": "^7.0.0",
|
||||
"next": "^13.3.0",
|
||||
"observer": "^0.0.2",
|
||||
"pagination": "^0.4.6",
|
||||
@ -4730,6 +4731,14 @@
|
||||
"he": "bin/he"
|
||||
}
|
||||
},
|
||||
"node_modules/helmet": {
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/helmet/-/helmet-7.0.0.tgz",
|
||||
"integrity": "sha512-MsIgYmdBh460ZZ8cJC81q4XJknjG567wzEmv46WOBblDb6TUd3z8/GhgmsM9pn8g2B80tAJ4m5/d3Bi1KrSUBQ==",
|
||||
"engines": {
|
||||
"node": ">=16.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/hmac-drbg": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
|
||||
|
@ -14,6 +14,7 @@
|
||||
"core-js": "^3.30.2",
|
||||
"framer-motion": "^10.12.4",
|
||||
"grid": "^4.10.8",
|
||||
"helmet": "^7.0.0",
|
||||
"next": "^13.3.0",
|
||||
"observer": "^0.0.2",
|
||||
"pagination": "^0.4.6",
|
||||
|
@ -1,6 +1,6 @@
|
||||
import React from "react";
|
||||
import Head from "next/head";
|
||||
import Navbar from "../components/layouts/navbar.jsx";
|
||||
|
||||
import dynamic from "next/dynamic";
|
||||
|
||||
const Section = dynamic(() => import("../components/layouts/section.jsx"));
|
||||
@ -11,34 +11,23 @@ const ContactFormSection = dynamic(() =>
|
||||
export default function Home() {
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>about</title>
|
||||
<meta name="description" content="about shiloh" />
|
||||
<meta name="keywords" content="shiloh, about, redemptive tech, Jesus, faith, christian developers" />
|
||||
</Head>
|
||||
<Navbar />
|
||||
|
||||
<Section
|
||||
key="aboutSection0"
|
||||
videoUrl="https://vid.puffyan.us/latest_version?id=--khbXchTeE&itag=22"
|
||||
videoUrl="/true_freedom_optimized.mp4"
|
||||
text="about"
|
||||
buttonTwoText="say hello"
|
||||
buttonLink="#contact"
|
||||
buttonOneText="watch"
|
||||
videoId="uu01xBw_BVE"
|
||||
videoId="W60vWdXR1sQ"
|
||||
>
|
||||
</Section>
|
||||
<Section
|
||||
key="aboutSection1"
|
||||
videoUrl="https://vid.puffyan.us/latest_version?id=--khbXchTeE&itag=22"
|
||||
text="core team"
|
||||
buttonOneText="watch"
|
||||
buttonLink=""
|
||||
videoId="uu01xBw_BVE"
|
||||
/>
|
||||
<Section
|
||||
key="aboutSection3"
|
||||
videoUrl="https://vid.puffyan.us/latest_version?id=--khbXchTeE&itag=22"
|
||||
text="what we do"
|
||||
buttonOneText="watch"
|
||||
buttonLink=""
|
||||
videoId="uu01xBw_BVE"
|
||||
/>
|
||||
|
||||
<ContactFormSection
|
||||
text="say hello"
|
||||
|
@ -1,4 +1,5 @@
|
||||
import React from "react";
|
||||
import Head from "next/head";
|
||||
import Navbar from "../components/layouts/navbar.jsx";
|
||||
import dynamic from "next/dynamic";
|
||||
|
||||
@ -10,6 +11,11 @@ const ContactFormSection = dynamic(() =>
|
||||
export default function Home() {
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>contact us</title>
|
||||
<meta name="description" content="contact shiloh" />
|
||||
<meta name="keywords" content="shiloh, contact, redemptive tech, Jesus, faith, christian developers" />
|
||||
</Head>
|
||||
<Navbar />
|
||||
<ContactFormSection
|
||||
text="say hello"
|
||||
|
@ -1,6 +1,6 @@
|
||||
import React from "react";
|
||||
import Navbar from "../components/layouts/navbar.jsx";
|
||||
|
||||
import SubSection from "../components/layouts/sub-section.jsx"
|
||||
import dynamic from "next/dynamic";
|
||||
|
||||
const Section = dynamic(() => import("../components/layouts/section.jsx"));
|
||||
@ -15,46 +15,12 @@ export default function Home() {
|
||||
<Navbar />
|
||||
<Section
|
||||
key="getInvolved0"
|
||||
videoUrl="https://vid.puffyan.us/latest_version?id=--khbXchTeE&itag=22"
|
||||
videoUrl="/higher_ground_optimized.mp4"
|
||||
text="get involved"
|
||||
buttonLink="#contact"
|
||||
buttonTwoText="say hello"
|
||||
buttonOneText="watch" videoId="uu01xBw_BVE"
|
||||
buttonOneText="watch" videoId="j16NyCutsOo"
|
||||
/>
|
||||
<Section
|
||||
key="getInvolved1"
|
||||
videoUrl="https://vid.puffyan.us/latest_version?id=--khbXchTeE&itag=22"
|
||||
text="Community"
|
||||
buttonLink="/"
|
||||
buttonTwoText="Join Us"
|
||||
buttonOneText="watch" videoId="uu01xBw_BVE"
|
||||
/>
|
||||
<Section
|
||||
key="getInvolved2"
|
||||
videoUrl="https://vid.puffyan.us/latest_version?id=--khbXchTeE&itag=22"
|
||||
text="Intern"
|
||||
buttonLink="#contact"
|
||||
buttonTwoText="reach out"
|
||||
buttonOneText="watch" videoId="uu01xBw_BVE"
|
||||
/>
|
||||
<Section
|
||||
key="getInvolved3"
|
||||
videoUrl="https://vid.puffyan.us/latest_version?id=--khbXchTeE&itag=22"
|
||||
text="Resources"
|
||||
buttonLink=""
|
||||
buttonTwoText=""
|
||||
buttonOneText="watch" videoId="uu01xBw_BVE"
|
||||
/>
|
||||
<Section
|
||||
key="getInvolved2"
|
||||
videoUrl="https://vid.puffyan.us/latest_version?id=--khbXchTeE&itag=22"
|
||||
text="Newsletter"
|
||||
buttonLink=""
|
||||
buttonTwoText="Join Our Newsletter"
|
||||
buttonOneText="watch" videoId="uu01xBw_BVE"
|
||||
/>
|
||||
|
||||
|
||||
<ContactFormSection
|
||||
text="say hello"
|
||||
buttonText="contact us"
|
||||
|
@ -1,4 +1,5 @@
|
||||
import React from "react";
|
||||
import Head from "next/head";
|
||||
import Navbar from "../components/layouts/navbar.jsx";
|
||||
import dynamic from "next/dynamic";
|
||||
|
||||
@ -10,52 +11,47 @@ const ContactFormSection = dynamic(() =>
|
||||
export default function Home() {
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>shiloh code</title>
|
||||
<meta name="description" content="shiloh is accelerating redemptive technology in Jesus' name." />
|
||||
<meta name="keywords" content="shiloh, redemptive tech, Jesus, faith, christian developers" />
|
||||
</Head>
|
||||
<Navbar />
|
||||
<Section
|
||||
key="section0"
|
||||
videoUrl="/optimized-shiloh-main-banner.mp4"
|
||||
text="redemptive tech in Jesus' name"
|
||||
buttonTwoText="learn more"
|
||||
buttonOneText="watch" videoId="R0QFTSLC1Gg"
|
||||
buttonOneText="watch"
|
||||
videoId="R0QFTSLC1Gg"
|
||||
buttonLink="/about"
|
||||
headingLevel={1}
|
||||
/>
|
||||
<Section
|
||||
key="section1"
|
||||
videoUrl="https://vid.puffyan.us/latest_version?id=tQG6jYy9xto&itag=22&local=true"
|
||||
videoUrl="/true_freedom_optimized.mp4"
|
||||
text="about"
|
||||
buttonOneText="watch"
|
||||
buttonOneText="watch"
|
||||
buttonTwoText="learn more"
|
||||
videoId="W60vWdXR1sQ"
|
||||
buttonLink="/about"
|
||||
headingLevel={2}
|
||||
/>
|
||||
<Section
|
||||
key="section2"
|
||||
videoUrl="https://vid.puffyan.us/latest_version?id=fVgq6j-krzU&itag=22"
|
||||
videoUrl="/higher_ground_optimized.mp4"
|
||||
text="get involved"
|
||||
buttonOneText="watch"
|
||||
buttonOneText="watch"
|
||||
buttonTwoText="learn more"
|
||||
videoId="j16NyCutsOo"
|
||||
buttonLink="/getinvolved"
|
||||
/>
|
||||
<Section
|
||||
key="section3"
|
||||
videoUrl="https://vid.puffyan.us/latest_version?id=LBNDfxjEYlA&itag=22"
|
||||
text="projects"
|
||||
buttonOneText="watch"
|
||||
buttonTwoText="learn more"
|
||||
buttonLink="/projects"
|
||||
/>
|
||||
<Section
|
||||
key="section4"
|
||||
videoUrl="https://vid.puffyan.us/latest_version?id=J33nDgS3uUY&itag=22"
|
||||
text="hire us"
|
||||
buttonOneText="watch"
|
||||
buttonTwoText="learn more"
|
||||
buttonLink="/contactus"
|
||||
headingLevel={2}
|
||||
/>
|
||||
<ContactFormSection
|
||||
text="contact us"
|
||||
buttonText="contact us"
|
||||
buttonLink="https://www.videoask.com/f8fah1r34"
|
||||
text="contact us"
|
||||
buttonText="contact us"
|
||||
buttonLink="https://www.videoask.com/f8fah1r34"
|
||||
/>
|
||||
</>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
BIN
public/higher_ground_optimized.mp4
Normal file
BIN
public/higher_ground_optimized.mp4
Normal file
Binary file not shown.
BIN
public/true_freedom_optimized.mp4
Normal file
BIN
public/true_freedom_optimized.mp4
Normal file
Binary file not shown.
Reference in New Issue
Block a user