Removed videoask, using alias email instead

for contacting

components/buttons/ContactButton.jsx

@@ -1,19 +1,39 @@
-const ContactButton = ({buttonText}) => {
+import { useState } from 'react';
-    const openChatScreen = () => {
+
-      const chatButton = document.getElementsByClassName('videoask-embed__button--SgLKO')[0];
+const ContactButton = ({ buttonText, email }) => {
-      if (chatButton) {
+  const [hovered, setHovered] = useState(false);
-        chatButton.click();
+  const [copied, setCopied] = useState(false);
-      }
+
-    };
+  const handleHover = () => {
-  
+    setHovered(true);
-    return (
-      <button
-        className="px-20 mt-8 mx-5 py-2 text-white border border-blue-500 rounded hover:border-white transition duration-300 ease-in-out focus:outline-none"
-        onClick={openChatScreen}
-      >
-        {buttonText}
-      </button>
-    );
   };
-  
+
-  export default ContactButton;
+  const handleMouseLeave = () => {
+    setHovered(false);
+  };
+
+  const handleClick = () => {
+    navigator.clipboard.writeText(email);
+    setCopied(true);
+    setTimeout(() => {
+      setCopied(false);
+    }, 2000);
+  };
+
+  return (
+    <button
+      className={`px-20 mt-8 mx-5 py-2 text-white border rounded focus:outline-none ${
+        hovered
+          ? 'border-white transition duration-300 ease-in-out'
+          : 'border-blue-500 transition duration-300 ease-in-out'
+      }`}
+      onMouseEnter={handleHover}
+      onMouseLeave={handleMouseLeave}
+      onClick={handleClick}
+    >
+      {copied ? 'Email copied to your clipboard.' : hovered ? email : buttonText}
+    </button>
+  );
+};
+
+export default ContactButton;

components/elements/ContactThreeJsComponent.jsx

@@ -1,12 +1,12 @@
-import React, { useRef, useEffect, useState } from 'react';
+import React, { useRef, useEffect, useState } from "react";
-import * as THREE from 'three';
+import * as THREE from "three";
-import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
+import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js";
-import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
+import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass.js";
-import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';
+import { ShaderPass } from "three/examples/jsm/postprocessing/ShaderPass.js";
-import { RGBShiftShader } from 'three/examples/jsm/shaders/RGBShiftShader.js';
+import { RGBShiftShader } from "three/examples/jsm/shaders/RGBShiftShader.js";
-import { DotScreenShader } from 'three/examples/jsm/shaders/DotScreenShader.js';
+import { DotScreenShader } from "three/examples/jsm/shaders/DotScreenShader.js";
 
-const ContactThreeJsComponent =  React.memo(() => {
+const ContactThreeJsComponent = React.memo(() => {
   const [isMounted, setIsMounted] = useState(false);
   const mountRef = useRef(null);
 
@@ -24,7 +24,12 @@ const ContactThreeJsComponent =  React.memo(() => {
         renderer.setSize(window.innerWidth, window.innerHeight);
         mountRef.current.appendChild(renderer.domElement);
 
-        camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
+        camera = new THREE.PerspectiveCamera(
+          70,
+          window.innerWidth / window.innerHeight,
+          1,
+          1000
+        );
         camera.position.z = 700;
 
         const scene = new THREE.Scene();
@@ -34,13 +39,22 @@ const ContactThreeJsComponent =  React.memo(() => {
         scene.add(object);
 
         const geometry = new THREE.BoxGeometry(50, 50, 50);
-        const material = new THREE.MeshPhongMaterial({ color: 0xFFD700, flatShading: true });
+        const material = new THREE.MeshPhongMaterial({
+          color: 0xffd700,
+          flatShading: true,
+        });
 
         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
+            .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.rotation.set(
+            Math.random() * 2,
+            Math.random() * 2,
+            Math.random() * 2
+          );
           mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 2;
           object.add(mesh);
         }
@@ -55,14 +69,14 @@ const ContactThreeJsComponent =  React.memo(() => {
         composer.addPass(new RenderPass(scene, camera));
 
         const effect1 = new ShaderPass(DotScreenShader);
-        effect1.uniforms['scale'].value = 4;
+        effect1.uniforms["scale"].value = 4;
         composer.addPass(effect1);
 
         const effect2 = new ShaderPass(RGBShiftShader);
-        effect2.uniforms['amount'].value = 0.0015;
+        effect2.uniforms["amount"].value = 0.0015;
         composer.addPass(effect2);
 
-        window.addEventListener('resize', onWindowResize);
+        window.addEventListener("resize", onWindowResize);
       }
 
       function onWindowResize() {
@@ -72,7 +86,6 @@ const ContactThreeJsComponent =  React.memo(() => {
         renderer.setSize(window.innerWidth, window.innerHeight);
         composer.setSize(window.innerWidth, window.innerHeight);
       }
-      
 
       function animate() {
         requestAnimationFrame(animate);
@@ -86,7 +99,7 @@ const ContactThreeJsComponent =  React.memo(() => {
 
       return () => {
         // cleanup logic
-        window.removeEventListener('resize', onWindowResize);
+        window.removeEventListener("resize", onWindowResize);
         renderer.dispose();
         composer.dispose();
       };

components/elements/VideoAsk.jsx

@@ -1,30 +0,0 @@
-import { useEffect, useState } from 'react';
-
-const VideoAsk = () => {
-const [isMounted, setIsMounted] = useState(false);
-
-useEffect(() => {
-setIsMounted(true);
-if (isMounted) {
-  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);
-}
-}, [isMounted]);
-
-return null;
-};
-
-export default VideoAsk;

components/layouts/ContactFormSection.jsx

@@ -4,6 +4,7 @@ import ContactThreeJsComponent from "../elements/ContactThreeJsComponent.jsx";
 const ContactFormSection = ({
   text,
   buttonText,
+  email,
 }) => {
   return (
     <>
@@ -19,6 +20,7 @@ const ContactFormSection = ({
         <div className="flex justify-start space-x-4">
         <ContactButton
         buttonText={buttonText}
+        email={email}
         />
         </div>
       </div>

pages/_app.js

@@ -1,6 +1,5 @@
 import { Fira_Code } from 'next/font/google'
 import { AnimatePresence, motion } from "framer-motion";
-import VideoAsk from "../components/elements/VideoAsk.jsx";
 import "../styles/globals.css";
 
 const firaCode = Fira_Code ({
@@ -23,7 +22,6 @@ function MyApp({ Component, pageProps, router }) {
         </main>
       </motion.div>
     </AnimatePresence>
-    <VideoAsk />
     </>
   );
 }

pages/about.js

@@ -12,29 +12,31 @@ const ContactFormSection = dynamic(() =>
 export default function Home() {
   return (
     <>
-        <Head>
+      <Head>
         <title>about</title>
         <meta name="description" content="about shiloh" />
-        <meta name="keywords" content="shiloh, about, redemptive tech, Jesus, faith, christian developers" />
+        <meta
+          name="keywords"
+          content="shiloh, about, redemptive tech, Jesus, faith, christian developers"
+        />
       </Head>
       <Navbar />
 
-<Section
+      <Section
-  key="aboutSection0"
+        key="aboutSection0"
-  videoUrl="/true_freedom_optimized.mp4"
+        videoUrl="/true_freedom_optimized.mp4"
-  text="about"
+        text="about"
-  buttonTwoText="say hello"
+        buttonTwoText="say hello"
-  buttonLink="#contact"
+        buttonLink="#contact"
-  buttonOneText="watch"
+        buttonOneText="watch"
-  videoId="W60vWdXR1sQ"
+        videoId="W60vWdXR1sQ"
->
+      ></Section>
-</Section>
+      <StatementOfFaithSection />
-<StatementOfFaithSection/>
 
       <ContactFormSection
-      text="say hello"
+        text="contact us"
-
+        buttonText="contact us"
-      buttonText="contact us"
+        email="hello-izmqxby3qjkffhh6w7a9s2j3qwj7zu93iji7gxjcn@shilohcode.com"
       />
     </>
   );

pages/contactus.js

@@ -7,21 +7,23 @@ const ContactFormSection = dynamic(() =>
   import("../components/layouts/ContactFormSection.jsx")
 );
 
-
 export default function Home() {
   return (
     <>
-    <Head>
+      <Head>
         <title>contact us</title>
         <meta name="description" content="contact shiloh" />
-        <meta name="keywords" content="shiloh, contact, redemptive tech, Jesus, faith, christian developers" />
+        <meta
+          name="keywords"
+          content="shiloh, contact, redemptive tech, Jesus, faith, christian developers"
+        />
       </Head>
       <Navbar />
       <ContactFormSection
-      text="say hello"
+        text="contact us"
-
+        buttonText="contact us"
-      buttonText="contact us"
+        email="hello-izmqxby3qjkffhh6w7a9s2j3qwj7zu93iji7gxjcn@shilohcode.com"
       />
-      </>
+    </>
   );
 }

pages/getinvolved.js

@@ -8,7 +8,6 @@ const ContactFormSection = dynamic(() =>
   import("../components/layouts/ContactFormSection.jsx")
 );
 
-
 export default function Home() {
   return (
     <>
@@ -19,29 +18,29 @@ export default function Home() {
         text="get involved"
         buttonLink="#contact"
         buttonTwoText="say hello"
-        buttonOneText="watch" videoId="j16NyCutsOo"
+        buttonOneText="watch"
+        videoId="j16NyCutsOo"
       />
-      <SectionTwo 
+      <SectionTwo
-      text ="githaven"
+        text="githaven"
-      buttonText="Explore"
+        buttonText="Explore"
-      buttonLink="https://githaven.org"
+        buttonLink="https://githaven.org"
-      >
-      </SectionTwo>
-      <SectionTwo 
-      text ="remnant.chat"
-      buttonText="Explore"
-      buttonLink="https://remnant.chat"
       ></SectionTwo>
-      <SectionTwo 
+      <SectionTwo
-      text ="agilegrace"
+        text="remnant.chat"
-      buttonText="Explore"
+        buttonText="Explore"
-      buttonLink="https://agilegrace.org"
+        buttonLink="https://remnant.chat"
       ></SectionTwo>
-      
+      <SectionTwo
-<ContactFormSection
+        text="agilegrace"
-text="say hello"
+        buttonText="Explore"
-buttonText="contact us"
+        buttonLink="https://agilegrace.org"
-/>
+      ></SectionTwo>
-      </>
+      <ContactFormSection
+        text="contact us"
+        buttonText="contact us"
+        email="hello-izmqxby3qjkffhh6w7a9s2j3qwj7zu93iji7gxjcn@shilohcode.com"
+      />
+    </>
   );
 }

pages/hireus.js

@@ -17,13 +17,14 @@ export default function Home() {
         text="hire us"
         buttonLink="#contact"
         buttonTwoText="contact us"
-        buttonOneText="watch" videoId="uu01xBw_BVE"
+        buttonOneText="watch"
+        videoId="uu01xBw_BVE"
       />
       <ContactFormSection
-      text="say hello"
+        text="contact us"
-
+        buttonText="contact us"
-      buttonText="contact us"
+        email="hello-izmqxby3qjkffhh6w7a9s2j3qwj7zu93iji7gxjcn@shilohcode.com"
       />
-      </>
+    </>
   );
 }

pages/index.js

@@ -13,8 +13,14 @@ export default function Home() {
     <>
       <Head>
         <title>shiloh code</title>
-        <meta name="description" content="shiloh is accelerating redemptive technology in Jesus' name." />
+        <meta
-        <meta name="keywords" content="shiloh, redemptive tech, Jesus, faith, christian developers" />
+          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
@@ -50,7 +56,7 @@ export default function Home() {
       <ContactFormSection
         text="contact us"
         buttonText="contact us"
-        buttonLink="https://www.videoask.com/f8fah1r34"
+        email="hello-izmqxby3qjkffhh6w7a9s2j3qwj7zu93iji7gxjcn@shilohcode.com"
       />
     </>
   );

pages/projects.js

@@ -7,7 +7,6 @@ const ContactFormSection = dynamic(() =>
   import("../components/layouts/ContactFormSection.jsx")
 );
 
-
 export default function Home() {
   return (
     <>
@@ -18,13 +17,10 @@ export default function Home() {
         text="projects"
         buttonLink="#contact"
         buttonTwoText="say hello"
-        buttonOneText="watch" videoId="uu01xBw_BVE"
+        buttonOneText="watch"
+        videoId="uu01xBw_BVE"
       />
-       <ContactFormSection
+      <ContactFormSection text="say hello" buttonText="contact us" />
-      text="say hello"
+    </>
-
-      buttonText="contact us"
-      />
-      </>
   );
 }