Shiloh/old-shiloh-website
Shiloh/old-shiloh-website
Archived
5
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update to site

Browse Source
This commit is contained in:
Caretaker0699 2023-06-06 17:16:48 -07:00
parent 426b6d695c
commit 7ad234ec36
11 changed files with 104 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/layouts/navbar.jsx
View File

@ -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 = () => {

67
components/layouts/section.jsx
View File

@ -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
components/layouts/sub-section.jsx
View File

@ -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
View File

@ -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",

1
package.json
View File

@ -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",

27
pages/about.js
View File

@ -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"

6
pages/contactus.js
View File

@ -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"

40
pages/getinvolved.js
View File

@ -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"

46
pages/index.js
View File

@ -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
View File

Binary file not shown.

BIN
public/true_freedom_optimized.mp4 Normal file
View File

Binary file not shown.