feat (v1.0.0): initial refactor and redesign

app/contact/page.tsx

@@ -1,80 +1,57 @@
 "use client"
 
-import Header from '@/components/Header'
-import Footer from '@/components/Footer'
 import Button from '@/components/objects/Button'
-import { Phone } from 'lucide-react'
-import { useTranslation } from 'react-i18next'
+import PageHeader from '@/components/objects/PageHeader'
+import { Phone, Smartphone, Mail } from 'lucide-react'
 import { SiGithub, SiForgejo, SiTelegram } from 'react-icons/si'
-import { Mail, Smartphone } from 'lucide-react'
+
+interface ContactSection {
+  title: string
+  texts: string[]
+}
 
 export default function Contact() {
-  const { t } = useTranslation();
-
-  const sections = [
+  const sections: ContactSection[] = [
     {
-      title: t('contact.sections.busyPerson.title'),
-      texts: t('contact.sections.busyPerson.texts', { returnObjects: true }) as string[]
-    },
-    {
-      title: t('contact.sections.callingNote.title'),
-      texts: t('contact.sections.callingNote.texts', { returnObjects: true }) as string[]
+      title: "I'm a busy person",
+      texts: [
+        "I'm busy most of the time, so please be patient and understanding of my workload. I can tend to be offline for a few days when I'm busy, but I will respond as soon as I can.",
+        "For the best chance of a response, please send me a message on Telegram. If you've made a pull request on one of my repos, I will most likely respond by the next day. If you've sent me an email, I will most likely respond within three days or less."
+      ]
     }
-  ];
+  ]
 
-  const contactButtonLabels = [
-    "ihatenodejs",
-    "aidan",
-    "p0ntu5",
-    "+1 802-416-9516",
-    "aidan@p0ntus.com",
-  ];
-  
-  const contactButtonHrefs = [
-    "https://github.com/ihatenodejs",
-    "https://git.p0ntus.com/aidan",
-    "https://t.me/p0ntu5",
-    "tel:+18024169516",
-    "mailto:aidan@p0ntus.com"
-  ];
-  
-  const contactButtonIcons = [
-    <SiGithub key="github" />,
-    <SiForgejo key="forgejo" />,
-    <SiTelegram key="telegram" />,
-    <Smartphone key="smartphone" />,
-    <Mail key="mail" />
-  ];
+  const contactButtons = [
+    { label: "ihatenodejs", href: "https://github.com/ihatenodejs", icon: SiGithub },
+    { label: "aidan", href: "https://git.p0ntus.com/aidan", icon: SiForgejo },
+    { label: "p0ntu5", href: "https://t.me/p0ntu5", icon: SiTelegram },
+    { label: "+1 857-295-2295", href: "tel:+18572952295", icon: Smartphone },
+    { label: "aidan@p0ntus.com", href: "mailto:aidan@p0ntus.com", icon: Mail }
+  ]
 
   return (
-    <div className="min-h-screen flex flex-col">
-      <Header />
-      <main className="grow container mx-auto px-4 py-12">
+    <div className="grow container mx-auto px-4 py-12">
         <div className="max-w-2xl mx-auto text-center">
-          <div className="flex flex-col gap-4">
-            <div className="flex justify-center">
-              <Phone size={60} />
-            </div>
-            <h1 className="text-4xl font-bold mt-2 text-center text-gray-200" style={{ textShadow: '0 0 10px rgba(255, 255, 255, 0.5)' }}>
-              {t('contact.title')}
-            </h1>
-          </div>
+          <PageHeader
+            icon={<Phone size={60} />}
+            title="Contact"
+          />
           <div className="flex flex-col gap-8 mt-8">
             <div className="flex flex-wrap justify-center gap-3">
-              {contactButtonLabels.map((label, index) => (
+              {contactButtons.map((button) => (
                 <Button
-                  key={index}
-                  href={contactButtonHrefs[index]}
+                  key={button.label}
+                  href={button.href}
                   target="_blank"
                   variant="rounded"
-                  icon={contactButtonIcons[index]}
+                  icon={<button.icon />}
                 >
-                  {label}
-                </Button> 
+                  {button.label}
+                </Button>
               ))}
             </div>
-            {sections.map((section, sectionIndex) => (
-              <div key={sectionIndex} className="flex flex-col gap-4">
+            {sections.map((section) => (
+              <div key={section.title} className="flex flex-col gap-4">
                 <h2 className="text-2xl font-semibold text-gray-200">{section.title}</h2>
                 {section.texts.map((text, index) => (
                   <p key={index} className="text-gray-300">{text}</p>
@@ -83,8 +60,6 @@ export default function Contact() {
             ))}
           </div>
         </div>
-      </main>
-      <Footer />
     </div>
   )
 }