diff --git a/components/buttons/ContactButton.jsx b/components/buttons/ContactButton.jsx index 7dc6e4d..20d1e90 100644 --- a/components/buttons/ContactButton.jsx +++ b/components/buttons/ContactButton.jsx @@ -1,19 +1,39 @@ -const ContactButton = ({buttonText}) => { - const openChatScreen = () => { - const chatButton = document.getElementsByClassName('videoask-embed__button--SgLKO')[0]; - if (chatButton) { - chatButton.click(); - } - }; - - return ( - - ); +import { useState } from 'react'; + +const ContactButton = ({ buttonText, email }) => { + const [hovered, setHovered] = useState(false); + const [copied, setCopied] = useState(false); + + const handleHover = () => { + setHovered(true); }; - - export default ContactButton; \ No newline at end of file + + const handleMouseLeave = () => { + setHovered(false); + }; + + const handleClick = () => { + navigator.clipboard.writeText(email); + setCopied(true); + setTimeout(() => { + setCopied(false); + }, 2000); + }; + + return ( + + ); +}; + +export default ContactButton; diff --git a/components/elements/ContactThreeJsComponent.jsx b/components/elements/ContactThreeJsComponent.jsx index 3f4603e..dcf0977 100644 --- a/components/elements/ContactThreeJsComponent.jsx +++ b/components/elements/ContactThreeJsComponent.jsx @@ -1,12 +1,12 @@ -import React, { useRef, useEffect, useState } from 'react'; -import * as THREE from 'three'; -import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js'; -import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js'; -import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js'; -import { RGBShiftShader } from 'three/examples/jsm/shaders/RGBShiftShader.js'; -import { DotScreenShader } from 'three/examples/jsm/shaders/DotScreenShader.js'; +import React, { useRef, useEffect, useState } from "react"; +import * as THREE from "three"; +import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js"; +import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass.js"; +import { ShaderPass } from "three/examples/jsm/postprocessing/ShaderPass.js"; +import { RGBShiftShader } from "three/examples/jsm/shaders/RGBShiftShader.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(); }; diff --git a/components/elements/VideoAsk.jsx b/components/elements/VideoAsk.jsx deleted file mode 100644 index 97aef97..0000000 --- a/components/elements/VideoAsk.jsx +++ /dev/null @@ -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; \ No newline at end of file diff --git a/components/layouts/ContactFormSection.jsx b/components/layouts/ContactFormSection.jsx index fa84478..1b3dd30 100644 --- a/components/layouts/ContactFormSection.jsx +++ b/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 = ({
diff --git a/pages/_app.js b/pages/_app.js index 801e91c..1455895 100644 --- a/pages/_app.js +++ b/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 }) { - ); } diff --git a/pages/about.js b/pages/about.js index 63b6acb..a32dea0 100644 --- a/pages/about.js +++ b/pages/about.js @@ -12,29 +12,31 @@ const ContactFormSection = dynamic(() => export default function Home() { return ( <> - + about - + -
-
- +
+ ); diff --git a/pages/contactus.js b/pages/contactus.js index 0953034..074dfb4 100644 --- a/pages/contactus.js +++ b/pages/contactus.js @@ -7,21 +7,23 @@ const ContactFormSection = dynamic(() => import("../components/layouts/ContactFormSection.jsx") ); - export default function Home() { return ( <> - + contact us - + - + ); } diff --git a/pages/getinvolved.js b/pages/getinvolved.js index 326348f..a0df22a 100644 --- a/pages/getinvolved.js +++ b/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" /> - - - - - - - + + + ); } diff --git a/pages/hireus.js b/pages/hireus.js index e7b6b03..48524f6 100644 --- a/pages/hireus.js +++ b/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" /> - + ); } diff --git a/pages/index.js b/pages/index.js index 1d07f3e..7067559 100644 --- a/pages/index.js +++ b/pages/index.js @@ -13,8 +13,14 @@ export default function Home() { <> shiloh code - - + +
); diff --git a/pages/projects.js b/pages/projects.js index 57ce41b..c40d433 100644 --- a/pages/projects.js +++ b/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" /> - - + + ); }