merge contact and about pages, add anti email scraper component

Author: YasInvolved

app/about/ContactEmail.tsx

@@ -0,0 +1,22 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { motion } from "framer-motion";
+
+export default function ContactEmail() {
+    const [isShown, setIsShown] = useState<boolean>(false);
+    const [email, setEmail] = useState<string>()
+
+    useEffect(() => {
+        setEmail(isShown ? "newclients@devsh.eu" : "");
+    }, [isShown])
+
+    return (
+        <motion.div
+            onHoverStart={() => setIsShown(true)}
+            onHoverEnd={() => setIsShown(false)}
+            className="bg-neutral-950 px-4 py-2">
+                {isShown ? email : "Hover on this text to show"}
+        </motion.div>
+    )
+}

app/about/page.tsx

@@ -1,10 +1,12 @@
 import Link from "next/link"
+import TextBlock from "../components/TextBlock"
+import ContactEmail from "./ContactEmail"
 
 export default function Page() {
     return (
         <div className="container mx-auto p-4 flex flex-col gap-4 sm:gap-8 sm:items-center h-full justify-center">
             <h1>About Us</h1>
-            <div className="prose sm:prose-sm md:prose-md lg:prose-lg xl:prose-xl 2xl:prose-2xl prose-invert font-thin">
+            <TextBlock>
                 DevSH Graphics Programming (DevSH) sp. z o.o. ( devsh.eu ) is a company specializing in High
                 Performance Computing with a particular focus on Computer Graphics and GPU Programming.
                 Currently boasting a team of 10 Consultants and 3 separate concurrent projects.
@@ -18,7 +20,11 @@ export default function Page() {
                 We’ve honed the culture of remote work, since the company’s inception before 2019. Subject to
                 availability of consultants and specific expertise required their regular working hours overlap the
                 normal working hours from San Francisco to Sydney.
-            </div>
+            </TextBlock>
+            <h1>Contact</h1>
+            <TextBlock>
+                You can contact us at e-mail address <ContactEmail/>
+            </TextBlock>
         </div>
     )
 }

app/components/Navbar.tsx

@@ -16,7 +16,6 @@ const links: Link[] = [
     { name: "About", url: "/about" },
     { name: "Nabla", url: "/nabla" },
     { name: "Services", url: "/services" },
-    { name: "Contact", url: "/contact" },
     { name: "Blog", url: "/blog" },
 ]
 

app/contact/page.tsx

@@ -1,4 +1,5 @@
 import Link from "next/link"
+import TextBlock from "../components/TextBlock"
 
 type PastProjectProps =
 {
@@ -23,10 +24,6 @@ function PastProject({company, companyWebsite, projects}: PastProjectProps) {
     )
 }
 
-function TextBlock({children}: { children?: React.ReactNode }) {
-    return <div className="prose sm:prose-sm md:prose-md lg:prose-lg xl:prose-xl 2xl:prose-2xl prose-invert font-thin px-2">{children}</div>
-}
-
 function Chapter({title, children}: {title: string, children?: React.ReactNode}) {
     return (
         <div className="flex flex-col gap-4">