Added Video Ask widget as a component for contact

us.
This commit is contained in:
Caretaker0699 2023-04-19 23:58:04 -07:00
parent 7de4b7bbfa
commit 06c56623a8
5 changed files with 55 additions and 32 deletions

View File

@ -25,23 +25,23 @@ const ContactThreeJsComponent = React.memo(() => {
mountRef.current.appendChild(renderer.domElement);
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 400;
camera.position.z = 700;
const scene = new THREE.Scene();
scene.fog = new THREE.Fog(0x000000, 1, 1000);
scene.fog = new THREE.Fog(0x272822, 1, 1000);
object = new THREE.Object3D();
scene.add(object);
const geometry = new THREE.SphereGeometry(1, 4, 4);
const material = new THREE.MeshPhongMaterial({ color: 0xffffff, flatShading: true });
const geometry = new THREE.BoxGeometry(50, 50, 50);
const material = new THREE.MeshPhongMaterial({ color: 0xFFD700, flatShading: true });
for (let i = 0; i < 100; i++) {
for (let i = 0; i < 30; i++) {
const mesh = new THREE.Mesh(geometry, material);
mesh.position.set(Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5).normalize();
mesh.position.multiplyScalar(Math.random() * 400);
mesh.rotation.set(Math.random() * 2, Math.random() * 2, Math.random() * 2);
mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 50;
mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 2;
object.add(mesh);
}
@ -75,8 +75,8 @@ const ContactThreeJsComponent = React.memo(() => {
function animate() {
requestAnimationFrame(animate);
object.rotation.x += 0.005;
object.rotation.y += 0.01;
object.rotation.x += 0.002;
object.rotation.y += 0.003;
composer.render();
}

View File

@ -0,0 +1,25 @@
import { useEffect } from 'react';
const VideoAsk = () => {
useEffect(() => {
window.VIDEOASK_EMBED_CONFIG = {
"kind": "widget",
"url": "https://www.videoask.com/f8fah1r34",
"options": {
"widgetType": "VideoThumbnailSmall",
"text": "Talk",
"backgroundColor": "#FFFFFF",
"position": "bottom-right",
"dismissible": true
}
};
const script = document.createElement('script');
script.src = 'https://www.videoask.com/embed/embed.js';
script.async = true;
document.body.appendChild(script);
}, []);
return null;
};
export default VideoAsk;

View File

@ -2,6 +2,7 @@ import '@/styles/globals.css'
import { Fira_Code } from '@next/font/google'
import { AnimatePresence, motion } from "framer-motion";
import "../styles/globals.css";
import VideoAsk from '../Components/Elements/VideoAsk';
const firaCode = Fira_Code ({
subsets: ["latin"],
@ -9,6 +10,7 @@ const firaCode = Fira_Code ({
function MyApp({ Component, pageProps, router }) {
return (
<>
<AnimatePresence mode='wait'>
<motion.div
key={router.route}
@ -22,6 +24,8 @@ function MyApp({ Component, pageProps, router }) {
</main>
</motion.div>
</AnimatePresence>
<VideoAsk />
</>
);
}

View File

@ -15,27 +15,24 @@ export default function Home() {
buttonOneText="watch"
videoId="uu01xBw_BVE"
/>
<SubSection
h2Text="What is Shiloh?"
p1Text="The year is 2023, a dystopian future, the world is ruled by a tyrannical technological empire controlled by none other than Satan himself. Christians live in fear of being caught and punished for their beliefs. However, hope is not lost. Shiloh is a rebel movement that believes technology can be used to break the chains of oppression and restore the world to God's design. Together with a team of devout Christian nerds, Shiloh sets out on a mission to take down Satan's tech empire and restore God's freedom to humanity. As we dive deeper into Satan's twisted technological infrastructure, we discover the shocking truth that technology controlled by Satan is being centralized for maximum top-down control. This system plans to prevent all humanity from having a true relationship with Jesus. The Shiloh community must use their faith and technological expertise to stop Satan's plans and restore humanities God given rights. We face numerous challenges and obstacles along the way, including the wrath of Satan's minions and betrayal from those we thought we could trust. Shiloh's battle against Satan's Tech Empire is a thrilling story of faith, technology, and the power of belief. It is a reminder that Christians can use technology as a tool for good and a call to arms for all those who believe in Christian freedom to rise up against the forces of oppression with spiritual means. "
<Section
key="aboutSection1"
videoUrl="https://vid.puffyan.us/latest_version?id=--khbXchTeE&itag=22"
text="core team"
buttonOneText="watch"
videoId="uu01xBw_BVE"
/>
<SubSection
h2Text="Our Team"
<Section
key="aboutSection3"
videoUrl="https://vid.puffyan.us/latest_version?id=--khbXchTeE&itag=22"
text="what we do"
buttonOneText="watch"
videoId="uu01xBw_BVE"
/>
<SubSection
h2Text="Core Focus"
p2Text="Shiloh's logo looks like a gift box, serving as a constant reminder of the gift Shiloh, our Messiah has given us and we are called to give to the world. Shiloh means His gift. In this way, we celebrate a culture of giving first, inspired by the biblical references of Genesis 49:10, Jeremiah 7:1-15, 26:6, Mark 11:15-17, and Luke 21:6.
As we embark on our mission, Shiloh's values guide us in using technology for the betterment of humanity. We recognize that our talents and resources are gifts from God, and it is our responsibility to use them for His glory. The battle against Satan's Tech Empire is not just about reclaiming our freedom, but also about sharing the gift of faith and hope with those who have lost it in the darkness of oppression.
With this in mind, Shiloh's team works tirelessly to develop decentralized technology that empowers individuals and communities to take control of their own lives and destinies. We seek to create a world where everyone has the opportunity to experience the true love and freedom of Jesus Christ, regardless of their circumstances.
Shiloh's fight against the forces of evil is not just a battle for survival, but a mission to spread the good news of salvation and redemption. We will continue to persevere in the face of adversity, knowing that our victory will not only be a triumph for ourselves, but a gift to the world."
/>
<SubSection
h2Text="What We Do"
/>
<ContactFormSection
text="say hello"
buttonOneText="contact us"
/>
</>

View File

@ -2,6 +2,8 @@
import React from "react";
import Navbar from "../Components/Layout/navbar.jsx";
import Section from "../Components/Layout/section.jsx"
import ContactFormSection from "@/Components/Layout/ContactFormSection.jsx";
export default function Home() {
return (
@ -47,13 +49,8 @@ export default function Home() {
buttonTwoText="learn more"
buttonLink="/contactus"
/>
<Section
key="section5"
videoUrl="https://vid.puffyan.us/latest_version?id=mAg8UyDt_sw&itag=22"
text="contact us"
buttonOneText="watch"
buttonTwoText="learn more"
buttonLink="/contactus"
<ContactFormSection
buttonOneText="contact us"
/>
</>
);