feat: enhance landing page, add about page and footer. refactor nebula animation.

This commit is contained in:
jwinterm
2026-01-16 09:58:12 -05:00
parent 4a51d8a334
commit 19a72bd621
9 changed files with 306 additions and 35 deletions
+85
View File
@@ -0,0 +1,85 @@
import { DynamicBackground } from "@/components/landing/dynamic-background";
import { ThemeToggle } from "@/components/theme-toggle";
import { FounderSignature } from "@/components/about/founder-signature";
import Link from "next/link";
import { FaMapMarkerAlt, FaPhone, FaBuilding, FaExternalLinkAlt } from "react-icons/fa";
export default function AboutPage() {
return (
<main className="relative min-h-screen flex flex-col items-center bg-background text-foreground overflow-hidden">
<DynamicBackground />
<header className="z-50 w-full max-w-7xl mx-auto flex justify-between items-center p-6 bg-background/50 backdrop-blur-sm sticky top-0">
<div className="flex items-center gap-6">
<Link href="/" className="text-2xl font-bold tracking-tighter">Such Software</Link>
<nav className="hidden md:flex gap-4 text-sm font-medium">
<Link href="/services" className="hover:text-primary transition-colors">Services</Link>
<Link href="/about" className="text-primary transition-colors">About</Link>
</nav>
</div>
<ThemeToggle />
</header>
<div className="z-10 w-full max-w-4xl mx-auto py-20 px-4">
<h1 className="text-4xl md:text-5xl font-bold mb-10 text-center">About Us</h1>
<div className="bg-card/80 backdrop-blur-md rounded-2xl p-8 md:p-12 shadow-xl border border-border/50">
<div className="prose dark:prose-invert max-w-none mb-12">
<p className="text-xl leading-relaxed">
Founded in 2021 by John Winter Murphy in Chester County, PA, and operating in Kennett Square since July 2025,
we are a full-service software provider in the heart of Mushroom Country.
</p>
</div>
<div className="grid md:grid-cols-2 gap-10 mb-12">
<div>
<h3 className="text-xl font-bold mb-4 flex items-center gap-2">
<FaBuilding className="text-primary" />
Headquarters
</h3>
<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">
<h3 className="text-lg font-semibold mb-2">Connect</h3>
<p className="text-sm text-muted-foreground mb-4">Find us on your favorite platforms</p>
{/* Social links are in the footer, but we can highlight them here or leave for footer */}
</div>
</div>
</div>
<div className="border-t border-border/50 pt-10">
<h3 className="text-2xl font-bold mb-6 text-center">Leadership</h3>
<FounderSignature />
</div>
</div>
</div>
</main>
);
}
+2
View File
@@ -2,6 +2,7 @@ import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import { ThemeProvider } from "@/components/theme-provider";
import { Footer } from "@/components/layout/footer";
const inter = Inter({ subsets: ["latin"] });
@@ -25,6 +26,7 @@ export default function RootLayout({
disableTransitionOnChange
>
{children}
<Footer />
</ThemeProvider>
</body>
</html>
+4 -1
View File
@@ -3,6 +3,7 @@ import { ThemeToggle } from "@/components/theme-toggle";
import { PortfolioGrid } from "@/components/portfolio/bento-grid";
import { ContactForm } from "@/components/contact/contact-form";
import { FounderSignature } from "@/components/about/founder-signature";
import { ServicesPreview } from "@/components/landing/services-preview";
import Link from "next/link";
import { Button } from "@repo/ui/components/button";
@@ -31,7 +32,7 @@ export default function Home() {
Next-generation web applications engineered for scale, compliance, and performance.
</p>
<div className="flex gap-4 mb-20">
<div className="flex gap-4 mb-10">
<Link href="/services">
<Button size="lg" className="rounded-full">
Explore Services
@@ -43,6 +44,8 @@ export default function Home() {
</Button>
</Link>
</div>
<ServicesPreview />
<div className="grid gap-4 w-full">
<h3 className="text-3xl font-bold text-left w-full mt-10 mb-6 px-4">Selected Works</h3>