change TextBlock component to TextUtils.TextBlock and add TextUtils.Paragraph

Author: YasInvolved

app/about/ContactEmail.tsx

@@ -1,7 +1,6 @@
 "use client"
 
 import { useEffect, useState } from "react"
-import { motion } from "framer-motion";
 
 export default function ContactEmail() {
     const [isShown, setIsShown] = useState<boolean>(false);
@@ -11,17 +10,11 @@ export default function ContactEmail() {
         setEmail(isShown ? "newclients@devsh.eu" : "");
     }, [isShown])
 
-    function toggleVisibility(visible: boolean) {
-        if (visible) {
-            setIsShown(true);
-        }
-    }
-
     return (
-        <div
+        <span
             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>
+        </span>
     )
 }

app/about/page.tsx

@@ -1,25 +1,33 @@
 import Link from "next/link"
-import TextBlock from "../components/TextBlock"
+import { TextBlock, Paragraph } from "../components/TextUtils"
 import ContactEmail from "./ContactEmail"
 
 export default function Page() {
     return (
         <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
-                Performance Computing with a particular focus on Computer Graphics and GPU Programming.
-                Currently boasting a team of 10 Consultants and 3 separate concurrent projects.
-                We offer consulting and co-development to Third Parties with their own products, as well as con-
-                duct our own Research and Development, developing Open-Source Middleware and Libraries.
-                The primary mission for all of our self-funded developments is to advance open source ecosys-
-                tems with innovative tooling, with a particular focus on Vulkan and SPIR-V.
-                We maintain a single source HLSL202x/C++20 Standard Template Header Only Library and our
-                Utility and Rapid Prototyping Framework <Link href="https://github.com/Devsh-Graphics-Programming/Nabla" target="_blank" rel="noopener noreferer" className="no-underline text-teal-600 devsh-link">Nabla</Link> designed {/*this prevents visual bug, "designed must stay here"*/}
-                to give a CUDA-like programming experience in the Vulkan ecosystem.
-                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.
+                <Paragraph>
+                    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.
+                    We offer consulting and co-development to Third Parties with their own products, as well as con-
+                    duct our own Research and Development, developing Open-Source Middleware and Libraries.
+                </Paragraph>
+
+                <Paragraph>
+                    The primary mission for all of our self-funded developments is to advance open source ecosys-
+                    tems with innovative tooling, with a particular focus on Vulkan and SPIR-V.
+                    We maintain a single source HLSL202x/C++20 Standard Template Header Only Library and our
+                    Utility and Rapid Prototyping Framework <Link href="https://github.com/Devsh-Graphics-Programming/Nabla" target="_blank" rel="noopener noreferer" className="no-underline text-teal-600 devsh-link">Nabla</Link> designed {/*this prevents visual bug, "designed must stay here"*/}
+                    to give a CUDA-like programming experience in the Vulkan ecosystem.
+                </Paragraph>
+
+                <Paragraph>
+                    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.
+                </Paragraph>
             </TextBlock>
             <h1>Contact</h1>
             <TextBlock>

app/components/TextBlock.tsx

@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+
+export function Paragraph({children}: {children?: ReactNode}) {
+    return <p className="block prose sm:prose-sm md:prose-md lg:prose-lg xl:prose-xl 2xl:prose-2xl prose-invert font-thin">{children}</p>
+}
+
+export function TextBlock({children}: {children?: ReactNode}) {
+    return <div className="block prose sm:prose-sm md:prose-md lg:prose-lg xl:prose-xl 2xl:prose-2xl prose-invert font-thin">{children}</div>
+}

app/components/TextUtils.tsx

@@ -3,7 +3,7 @@ import nablaScreenshot1 from "@/public/nabla_screenshot1.jpg"
 
 import Image from "next/image"
 import Slide from "./slide"
-import TextBlock from "../components/TextBlock"
+import { TextBlock } from "../components/TextUtils"
 import Link from "next/link"
 import fs from 'node:fs/promises'
 import { join } from 'node:path'

app/nabla/page.tsx

@@ -1,5 +1,5 @@
 import Link from "next/link"
-import TextBlock from "../components/TextBlock"
+import { TextBlock } from "../components/TextUtils"
 
 type PastProjectProps =
 {