such.software/apps/web/src/app/about/page.tsx

import { FounderSignature } from "@/components/about/founder-signature";
import { ContactForm } from "@/components/contact/contact-form";
import { Header } from "@/components/layout/header";
import { MobileNav } from "@/components/layout/mobile-nav";
import { ScrollReveal } from "@/components/scroll-reveal";
import { FaMapMarkerAlt, FaPhone, FaBuilding, FaExternalLinkAlt } from "react-icons/fa";
import { FaXTwitter, FaTelegram, FaDiscord, FaBluesky, FaTiktok, FaYoutube, FaInstagram, FaLinkedinIn, FaFacebookF, FaPinterestP } from "react-icons/fa6";
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "About: A Kennett Square, PA Software Studio | Such Software",
  description: "Such Software is a Kennett Square, PA studio founded by John Winter Murphy, building accessible web apps, crypto tools, and games with WCAG 2.2 compliance.",
  alternates: {
    canonical: "/about",
  },
  openGraph: {
    title: "About: A Kennett Square, PA Software Studio | Such Software",
    description: "Such Software is a Kennett Square, PA studio founded by John Winter Murphy, building accessible web apps, crypto tools, and games with WCAG 2.2 compliance.",
    type: "website",
  },
};

export default function AboutPage() {
  return (
    <main className="relative flex flex-col items-center overflow-hidden">
      <Header />

      <div id="main-content" className="z-10 w-full max-w-6xl mx-auto py-20 px-4 pb-24 md:pb-20">
        <h1 className="text-4xl md:text-5xl font-bold mb-10 text-center">About Us</h1>

        <div className="section-container">

          <div className="prose dark:prose-invert max-w-none mb-12">
            <p className="text-xl leading-relaxed">
              Such Software is a software studio in Kennett Square, PA, founded by <a href="https://jwinterm.com">John Winter Murphy</a>, 
              whose background is in semiconductor and nuclear engineering: a Materials Engineering PhD from UT-Dallas and six years at Lawrence Livermore National Laboratory. 
              We build accessible e-commerce websites, crypto infrastructure, and original mobile apps and games, 
              and offer consulting on payments, cryptocurrency, and radiation transport and interactions.
            </p>
          </div>

          <div className="grid md:grid-cols-2 gap-10 mb-12">
            <div>
              <h2 className="text-xl font-bold mb-4 flex items-center gap-2">
                <FaBuilding className="text-primary" />
                Headquarters
              </h2>
              <address className="not-italic text-muted-foreground space-y-1 pl-7 border-l-2 border-border ml-2">
                <p>Such Software LLC</p>
                <p>110 E State St</p>
                <p>Suite 300</p>
                <p>Kennett Square, PA 19348</p>
                <p>USA</p>
              </address>
              
              <div className="mt-6 flex flex-col gap-3 ml-2">
                 <a 
                   href="https://maps.app.goo.gl/JeGx1rHFcriMdngn9" 
                   target="_blank" 
                   rel="noopener noreferrer"
                   className="flex items-center gap-3 text-primary hover:underline hover:text-primary/80 transition-colors"
                 >
                   <FaMapMarkerAlt /> View on Google Maps <FaExternalLinkAlt className="w-3 h-3" />
                 </a>
                 <a 
                    href="tel:+14438779940"
                    className="flex items-center gap-3 text-muted-foreground hover:text-foreground transition-colors"
                 >
                    <FaPhone /> +1 (443) 877-9940
                 </a>
              </div>
            </div>
            
            <div className="flex flex-col justify-center items-center bg-muted/30 rounded-xl p-6">
               <div className="text-center">
                  <h2 className="text-lg font-semibold mb-2">Connect</h2>
                  <p className="text-sm text-muted-foreground mb-4">Find us on your favorite platforms</p>
                  <div className="flex flex-wrap gap-5 justify-center">
                    <a href="https://x.com/such_software" target="_blank" rel="noopener noreferrer" className="text-muted-foreground hover:text-primary transition-colors">
                      <FaXTwitter className="h-6 w-6" />
                      <span className="sr-only">X (Twitter)</span>
                    </a>
                    <a href="https://bsky.app/profile/suchsoftware.bsky.social" target="_blank" rel="noopener noreferrer" className="text-muted-foreground hover:text-primary transition-colors">
                      <FaBluesky className="h-6 w-6" />
                      <span className="sr-only">Bluesky</span>
                    </a>
                    <a href="https://www.youtube.com/@SuchSoftware" target="_blank" rel="noopener noreferrer" className="text-muted-foreground hover:text-primary transition-colors">
                      <FaYoutube className="h-6 w-6" />
                      <span className="sr-only">YouTube</span>
                    </a>
                    <a href="https://www.instagram.com/such_software/" target="_blank" rel="noopener noreferrer" className="text-muted-foreground hover:text-primary transition-colors">
                      <FaInstagram className="h-6 w-6" />
                      <span className="sr-only">Instagram</span>
                    </a>
                    <a href="https://www.tiktok.com/@such.software" target="_blank" rel="noopener noreferrer" className="text-muted-foreground hover:text-primary transition-colors">
                      <FaTiktok className="h-6 w-6" />
                      <span className="sr-only">TikTok</span>
                    </a>
                    <a href="https://www.linkedin.com/company/such-software" target="_blank" rel="noopener noreferrer" className="text-muted-foreground hover:text-primary transition-colors">
                      <FaLinkedinIn className="h-6 w-6" />
                      <span className="sr-only">LinkedIn</span>
                    </a>
                    <a href="https://www.facebook.com/people/Such-Software/61572076196412/" target="_blank" rel="noopener noreferrer" className="text-muted-foreground hover:text-primary transition-colors">
                      <FaFacebookF className="h-6 w-6" />
                      <span className="sr-only">Facebook</span>
                    </a>
                    <a href="https://www.pinterest.com/SuchSoftware/" target="_blank" rel="noopener noreferrer" className="text-muted-foreground hover:text-primary transition-colors">
                      <FaPinterestP className="h-6 w-6" />
                      <span className="sr-only">Pinterest</span>
                    </a>
                    <a href="https://t.me/SuchSoftware" target="_blank" rel="noopener noreferrer" className="text-muted-foreground hover:text-primary transition-colors">
                      <FaTelegram className="h-6 w-6" />
                      <span className="sr-only">Telegram</span>
                    </a>
                    <a href="https://discord.gg/5Wb8URrQ5e" target="_blank" rel="noopener noreferrer" className="text-muted-foreground hover:text-primary transition-colors">
                      <FaDiscord className="h-6 w-6" />
                      <span className="sr-only">Discord</span>
                    </a>
                  </div>
               </div>
            </div>
          </div>

          <ScrollReveal className="border-t border-border/50 pt-10">
            <h2 className="text-2xl font-bold mb-6 text-center">Leadership</h2>
            <FounderSignature />
          </ScrollReveal>

        </div>

        <ScrollReveal as="section" className="mt-16 border-t border-border/50 pt-16">
          <div id="contact">
            <h2 className="text-3xl font-bold mb-3 tracking-tight">Get in Touch</h2>
            <p className="text-muted-foreground text-lg mb-12 max-w-2xl">
              Have a project in mind? We'd love to hear about it.
            </p>
            <ContactForm />
          </div>
        </ScrollReveal>
      </div>
      <MobileNav />
    </main>
  );
}