corrected navbar titles and ContactEmail component

Author: YasInvolved

app/about/ContactEmail.tsx

@@ -5,18 +5,23 @@ import { motion } from "framer-motion";
 
 export default function ContactEmail() {
     const [isShown, setIsShown] = useState<boolean>(false);
-    const [email, setEmail] = useState<string>()
+    const [email, setEmail] = useState<string>("");
 
     useEffect(() => {
         setEmail(isShown ? "newclients@devsh.eu" : "");
     }, [isShown])
 
+    function toggleVisibility(visible: boolean) {
+        if (visible) {
+            setIsShown(true);
+        }
+    }
+
     return (
-        <motion.div
-            onHoverStart={() => setIsShown(true)}
-            onHoverEnd={() => setIsShown(false)}
-            className="px-2 border border-[#181818] rounded-md">
-                {isShown ? email : "Hover your cursor on this text to show"}
-        </motion.div>
+        <div
+            onClick={() => setIsShown(true)}
+            className={`inline-block px-2 border ${isShown ? "border-teal-900" : "border-[#181818]"} rounded-md hover:border-teal-900 transition-colors duration-300`}>
+                {isShown ? email : "Click to show"}
+        </div>
     )
 }

app/about/page.tsx

@@ -4,7 +4,7 @@ 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">
+        <div className="container mx-auto max-sm:px-8 flex flex-col gap-4 sm:gap-8 sm:items-center h-full justify-center">
             <h1>About Us</h1>
             <TextBlock>
                 DevSH Graphics Programming (DevSH) sp. z o.o. ( devsh.eu ) is a company specializing in High
@@ -23,7 +23,7 @@ export default function Page() {
             </TextBlock>
             <h1>Contact</h1>
             <TextBlock>
-                You can contact us at e-mail address <ContactEmail/>
+                If you're interested in our offer, you can reach us at this e-mail address: <ContactEmail/>
             </TextBlock>
         </div>
     )

app/components/Navbar.tsx

@@ -13,7 +13,7 @@ type Link = {
 
 const links: Link[] = [
     { name: "Home", url: "/" },
-    { name: "About", url: "/about" },
+    { name: "About|Contact", url: "/about" },
     { name: "Nabla", url: "/nabla" },
     { name: "Services", url: "/services" },
     { name: "Blog", url: "/blog" },