clean: rf to find things easier

app/contact/page.tsx

@@ -1,13 +1,77 @@
+"use client"
+
 import Header from '@/components/Header'
-import ContactPg from '@/components/pages/Contact'
 import Footer from '@/components/Footer'
+import ContactButton from '@/components/objects/ContactButton'
+import { Phone } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import { faPhone, faEnvelope } from '@fortawesome/free-solid-svg-icons'
+import { faGithub, faTelegram, faBluesky } from '@fortawesome/free-brands-svg-icons'
 
 export default function Contact() {
+  const { t } = useTranslation();
+
+  const sections = [
+    {
+      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[]
+    }
+  ];
+
+  const contactButtonLabels = [
+    t('contact.buttons.github'),
+    t('contact.buttons.telegram'),
+    t('contact.buttons.bluesky'),
+    t('contact.buttons.phone'),
+    t('contact.buttons.email')
+  ];
+  
+  const contactButtonHrefs = [
+    "https://github.com/ihatenodejs",
+    "https://t.me/p0ntu5",
+    "https://bsky.app/profile/aidxn.cc",
+    "tel:+18024169516",
+    "mailto:aidan@p0ntus.com"
+  ];
+  
+  const contactButtonIcons = [faGithub, faTelegram, faBluesky, faPhone, faEnvelope];
+
   return (
     <div className="min-h-screen flex flex-col">
       <Header />
       <main className="grow container mx-auto px-4 py-12">
-        <ContactPg />
+        <div className="max-w-2xl mx-auto text-center">
+          <div className='mb-6 flex justify-center'>
+            <Phone size={60} />
+          </div>
+          <h1 className="text-4xl font-bold my-2 text-center text-gray-200" style={{ textShadow: '0 0 10px rgba(255, 255, 255, 0.5)' }}>
+            {t('contact.title')}
+          </h1>
+          <div className="p-6 space-y-4">
+            {contactButtonLabels.map((label, index) => (
+              <ContactButton 
+                key={index} 
+                label={label} 
+                href={contactButtonHrefs[index]} 
+                icon={contactButtonIcons[index]} 
+                className='mr-3'
+              />
+            ))}
+          </div>
+
+          {sections.map((section, sectionIndex) => (
+            <div key={sectionIndex}>
+              <h2 className="text-2xl font-semibold mb-4 text-gray-200 mt-10">{section.title}</h2>
+              {section.texts.map((text, index) => (
+                <p key={index} className="text-gray-300 mb-4">{text}</p>
+              ))}
+            </div>
+          ))}
+        </div>
       </main>
       <Footer />
     </div>