From 19a72bd621d96a5b9b87a9ef47e1a4b807b9b2fe Mon Sep 17 00:00:00 2001
From: jwinterm <johnwmurphy@gmail.com>
Date: Fri, 16 Jan 2026 09:58:12 -0500
Subject: [PATCH] feat: enhance landing page, add about page and footer.
 refactor nebula animation.

---
 apps/web/package.json                         |   1 +
 apps/web/src/app/about/page.tsx               |  85 +++++++++++++++
 apps/web/src/app/layout.tsx                   |   2 +
 apps/web/src/app/page.tsx                     |   5 +-
 .../components/landing/services-preview.tsx   |  29 +++++
 apps/web/src/components/layout/footer.tsx     |  67 ++++++++++++
 .../src/components/portfolio/bento-grid.tsx   |  40 +++++--
 packages/ui/src/procedural/nebula-field.tsx   | 100 +++++++++++++-----
 pnpm-lock.yaml                                |  12 +++
 9 files changed, 306 insertions(+), 35 deletions(-)
 create mode 100644 apps/web/src/app/about/page.tsx
 create mode 100644 apps/web/src/components/landing/services-preview.tsx
 create mode 100644 apps/web/src/components/layout/footer.tsx

diff --git a/apps/web/package.json b/apps/web/package.json
index 0479f7b..6d0c9ee 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -18,6 +18,7 @@
     "next-themes": "^0.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.5.0",
     "zod": "^3.22.4"
   },
   "devDependencies": {
diff --git a/apps/web/src/app/about/page.tsx b/apps/web/src/app/about/page.tsx
new file mode 100644
index 0000000..4e23572
--- /dev/null
+++ b/apps/web/src/app/about/page.tsx
@@ -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>
+  );
+}
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
index d863783..6a81039 100644
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@@ -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>
diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index 9098381..d71410a 100644
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -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>
diff --git a/apps/web/src/components/landing/services-preview.tsx b/apps/web/src/components/landing/services-preview.tsx
new file mode 100644
index 0000000..ebdcce7
--- /dev/null
+++ b/apps/web/src/components/landing/services-preview.tsx
@@ -0,0 +1,29 @@
+import { Card } from "@repo/ui/components/card";
+
+export function ServicesPreview() {
+  return (
+        <div className="grid md:grid-cols-3 gap-6 w-full max-w-6xl mx-auto px-4 mt-8 mb-16">
+            <Card className="p-6 bg-card/50 backdrop-blur-sm border-indigo-500/20 hover:border-indigo-500/40 transition-colors text-left">
+                <h3 className="text-xl font-bold mb-2">Unlimited Data Modeling</h3>
+                <p className="text-sm text-muted-foreground">
+                    Need a product with "DNA Sequence", "Artist Bio", and "Royalty Logic"? 
+                    We model that natively in the database, not via hacky meta-fields.
+                </p>
+            </Card>
+            <Card className="p-6 bg-card/50 backdrop-blur-sm border-indigo-500/20 hover:border-indigo-500/40 transition-colors text-left">
+                <h3 className="text-xl font-bold mb-2">Workflow Orchestration</h3>
+                <p className="text-sm text-muted-foreground">
+                     Automate complex business logic—like splitting an order between a print-on-demand provider 
+                     and a local warehouse automatically using Medusa Workflows.
+                </p>
+            </Card>
+            <Card className="p-6 bg-card/50 backdrop-blur-sm border-indigo-500/20 hover:border-indigo-500/40 transition-colors text-left">
+                <h3 className="text-xl font-bold mb-2">Headless Performance</h3>
+                <p className="text-sm text-muted-foreground">
+                    We couple the robust Medusa backend with a Next.js frontend, ensuring your shop 
+                    scores 100/100 on Core Web Vitals and SEO.
+                </p>
+            </Card>
+        </div>
+  )
+}
diff --git a/apps/web/src/components/layout/footer.tsx b/apps/web/src/components/layout/footer.tsx
new file mode 100644
index 0000000..89a71d5
--- /dev/null
+++ b/apps/web/src/components/layout/footer.tsx
@@ -0,0 +1,67 @@
+'use client';
+
+import Link from "next/link";
+import { FaXTwitter, FaTelegram, FaReddit, FaPhone } from "react-icons/fa6";
+
+export function Footer() {
+  return (
+    <footer className="w-full border-t border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 py-12">
+      <div className="container px-4 md:px-6 mx-auto">
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
+          <div className="space-y-4">
+            <h3 className="text-lg font-bold">Such Software</h3>
+            <p className="text-sm text-muted-foreground">
+              Full-service software provider in the heart of Mushroom Country.
+            </p>
+          </div>
+          
+          <div className="space-y-4">
+            <h3 className="text-lg font-bold">Contact</h3>
+            <address className="text-sm text-muted-foreground not-italic space-y-2">
+              <p>Such Software LLC</p>
+              <p>110 E State St, Suite 300</p>
+              <p>Kennett Square, PA 19348</p>
+              <p>USA</p>
+              <div className="pt-2 flex items-center gap-2">
+                <FaPhone className="h-4 w-4" />
+                <a href="tel:+14438779940" className="hover:text-primary transition-colors">+1 (443) 877-9940</a>
+              </div>
+            </address>
+          </div>
+
+          <div className="space-y-4">
+            <h3 className="text-lg font-bold">Links</h3>
+            <nav className="flex flex-col gap-2 text-sm text-muted-foreground">
+              <Link href="/services" className="hover:text-primary transition-colors">Services</Link>
+              <Link href="/about" className="hover:text-primary transition-colors">About</Link>
+              <a href="https://maps.app.goo.gl/JeGx1rHFcriMdngn9" target="_blank" rel="noopener noreferrer" className="hover:text-primary transition-colors">
+                Google Business
+              </a>
+            </nav>
+          </div>
+
+          <div className="space-y-4">
+            <h3 className="text-lg font-bold">Connect</h3>
+            <div className="flex gap-4">
+              <a href="https://x.com/such_software" target="_blank" rel="noopener noreferrer" className="text-muted-foreground hover:text-primary transition-colors">
+                <FaXTwitter className="h-5 w-5" />
+                <span className="sr-only">X (Twitter)</span>
+              </a>
+              <a href="https://t.me/j_winter_m" target="_blank" rel="noopener noreferrer" className="text-muted-foreground hover:text-primary transition-colors">
+                <FaTelegram className="h-5 w-5" />
+                <span className="sr-only">Telegram</span>
+              </a>
+              <a href="https://reddit.com/r/SuchSoftware" target="_blank" rel="noopener noreferrer" className="text-muted-foreground hover:text-primary transition-colors">
+                <FaReddit className="h-5 w-5" />
+                <span className="sr-only">Reddit</span>
+              </a>
+            </div>
+          </div>
+        </div>
+        <div className="mt-12 pt-8 border-t border-border/40 text-center text-sm text-muted-foreground">
+          <p>&copy; {new Date().getFullYear()} Such Software LLC. All rights reserved.</p>
+        </div>
+      </div>
+    </footer>
+  );
+}
diff --git a/apps/web/src/components/portfolio/bento-grid.tsx b/apps/web/src/components/portfolio/bento-grid.tsx
index b3e01ce..f7eb86f 100644
--- a/apps/web/src/components/portfolio/bento-grid.tsx
+++ b/apps/web/src/components/portfolio/bento-grid.tsx
@@ -10,35 +10,57 @@ export const PortfolioGrid = () => {
           <h3 className="text-3xl font-bold text-white">r/CryptoCurrency</h3>
           <p className="text-gray-200">Governance dashboard for 10M+ members. Real-time DAO metrics.</p>
         </div>
-        {/* Placeholder image since we don't have the assets yet */}
-        <div className="absolute inset-0 bg-slate-800/50" />
+        <Image 
+          src="/images/r-cryptocurrency.png" 
+          alt="r/CryptoCurrency Governance Dashboard" 
+          fill 
+          className="object-cover opacity-60 transition-transform duration-500 group-hover:scale-105" 
+        />
       </Card>
 
       {/* Secondary: Occupy Wallets */}
       <Card className="md:col-span-2 relative group overflow-hidden bg-zinc-100/70 backdrop-blur-sm">
         <div className="absolute inset-0 z-10 p-6 flex flex-col justify-center items-center text-center">
-          <h3 className="text-2xl font-bold text-zinc-900">Occupy Wallets</h3>
-          <p className="text-zinc-600">High-fidelity gallery for fiscal graffiti.</p>
+          <h3 className="text-2xl font-bold text-zinc-900 drop-shadow-sm">Occupy Wallets</h3>
+          <p className="text-zinc-800 font-medium drop-shadow-sm">High-fidelity gallery for fiscal graffiti.</p>
         </div>
+        <Image 
+          src="/images/occupy-wallets.png" 
+          alt="Occupy Wallets Gallery" 
+          fill 
+          className="object-cover opacity-40 transition-transform duration-500 group-hover:scale-105" 
+        />
       </Card>
 
       {/* Tertiary: Monerogue & Wowne.ro (Grouped) */}
       <Card className="md:col-span-1 relative group overflow-hidden bg-orange-50/70 dark:bg-orange-950/70 border-orange-500/20 backdrop-blur-sm">
-        <div className="p-6">
+        <div className="absolute inset-0 z-10 p-6 bg-gradient-to-br from-background/90 to-transparent">
           <h3 className="text-xl font-bold text-orange-700 dark:text-orange-400">Privacy Labs</h3>
-          <ul className="mt-2 space-y-2 text-sm">
+          <ul className="mt-2 space-y-2 text-sm text-foreground">
             <li className="flex items-center gap-2">Monerogue <span className="text-xs opacity-50">(Game)</span></li>
             <li className="flex items-center gap-2">Wowne.ro <span className="text-xs opacity-50">(WASM)</span></li>
           </ul>
         </div>
+         <Image 
+          src="/images/privacy-labs.png" 
+          alt="Privacy Labs Projects" 
+          fill 
+          className="object-cover opacity-30 transition-transform duration-500 group-hover:scale-105" 
+        />
       </Card>
 
        {/* Quaternary: MoonPlace */}
-      <Card className="md:col-span-1 relative group bg-indigo-50/70 dark:bg-indigo-950/70 border-indigo-500/20 backdrop-blur-sm">
-         <div className="p-6">
+      <Card className="md:col-span-1 relative group overflow-hidden bg-indigo-50/70 dark:bg-indigo-950/70 border-indigo-500/20 backdrop-blur-sm">
+         <div className="absolute inset-0 z-10 p-6 bg-gradient-to-br from-background/90 to-transparent">
           <h3 className="text-xl font-bold text-indigo-700 dark:text-indigo-400">MoonPlace</h3>
-          <p className="text-sm mt-2">Collaborative pixel canvas engine.</p>
+          <p className="text-sm mt-2 text-foreground">Collaborative pixel canvas engine.</p>
         </div>
+         <Image 
+          src="/images/moonplace.png" 
+          alt="MoonPlace Pixel Canvas" 
+          fill 
+          className="object-cover opacity-30 transition-transform duration-500 group-hover:scale-105" 
+        />
       </Card>
     </section>
   );
diff --git a/packages/ui/src/procedural/nebula-field.tsx b/packages/ui/src/procedural/nebula-field.tsx
index 3d0f92f..de93061 100644
--- a/packages/ui/src/procedural/nebula-field.tsx
+++ b/packages/ui/src/procedural/nebula-field.tsx
@@ -1,7 +1,7 @@
 'use client';
 
-import { motion } from "framer-motion";
-import { useEffect, useState } from "react";
+import { motion, useAnimation } from "framer-motion";
+import { useEffect, useState, useCallback } from "react";
 import { cn } from "../lib/utils";
 import { Monitor } from "lucide-react";
 
@@ -11,9 +11,65 @@ interface NebulaProps {
   themeMode?: 'light' | 'dark'; // customized prop
 }
 
+interface StreamLineProps {
+  d: string;
+  themeMode: 'light' | 'dark';
+  onHit: () => void;
+  width: number;
+}
+
+const StreamLine = ({ d, themeMode, onHit, width }: StreamLineProps) => {
+  const controls = useAnimation();
+
+  useEffect(() => {
+    let isMounted = true;
+    const animate = async () => {
+      // Random initial delay
+      await new Promise(resolve => setTimeout(resolve, Math.random() * 4000));
+      
+      while (isMounted) {
+        const duration = 2 + Math.random() * 4;
+        
+        controls.set({ pathLength: 0, opacity: 0 });
+
+        await controls.start({
+          pathLength: [0, 1],
+          opacity: [0, 1, 1, 0],
+          transition: { 
+            duration, 
+            ease: "easeInOut",
+            times: [0, 0.1, 0.9, 1]
+          }
+        });
+
+        if (isMounted) onHit();
+        
+        await new Promise(resolve => setTimeout(resolve, Math.random() * 2000));
+      }
+    };
+    animate();
+    return () => { isMounted = false; };
+  }, [controls, onHit]);
+
+  return (
+    <motion.path
+      d={d}
+      stroke="currentColor"
+      strokeWidth={width}
+      fill="none"
+      animate={controls}
+      className={cn(
+        "transition-colors duration-500",
+        themeMode === 'light' ? "text-slate-400" : "text-emerald-500"
+      )}
+    />
+  );
+};
+
 export const NebulaField = ({ className, density = 20, themeMode = 'dark' }: NebulaProps) => {
   const [paths, setPaths] = useState<string[]>([]);
   const [mounted, setMounted] = useState(false);
+  const monitorControls = useAnimation();
   
   // Configuration for convergence point (percent of container)
   const targetX = 25; // moved right
@@ -45,7 +101,15 @@ export const NebulaField = ({ className, density = 20, themeMode = 'dark' }: Neb
       return `M ${startX} ${startY} Q ${cpX} ${cpY} ${endX} ${endY}`;
     });
     setPaths(newPaths);
-  }, [density, targetX, targetY]);
+  }, [density]); // Removed targetX/Y dep as constant
+
+  const handleHit = useCallback(() => {
+     monitorControls.start({
+        scale: [1, 1.15, 1],
+        filter: ["brightness(1)", "brightness(1.5)", "brightness(1)"],
+        transition: { duration: 0.3 }
+     });
+  }, [monitorControls]);
 
   if (!mounted) return null;
 
@@ -53,9 +117,10 @@ export const NebulaField = ({ className, density = 20, themeMode = 'dark' }: Neb
     <div className={cn("absolute inset-0 overflow-hidden pointer-events-none z-0", className)}>
       
       {/* "Computer" Icon positioned via inline styles to match physics target exactly */}
-      <div 
-        className="absolute -translate-x-1/2 -translate-y-1/2 z-10 opacity-20 dark:opacity-40 animate-pulse"
+      <motion.div 
+        className="absolute -translate-x-1/2 -translate-y-1/2 z-10 opacity-30 dark:opacity-50"
         style={{ left: `${targetX}%`, top: `${targetY}%` }}
+        animate={monitorControls}
       >
         <Monitor 
           size={64} 
@@ -64,7 +129,7 @@ export const NebulaField = ({ className, density = 20, themeMode = 'dark' }: Neb
             themeMode === 'light' ? "text-slate-400" : "text-emerald-500"
           )} 
         />
-      </div>
+      </motion.div>
 
       <svg
         viewBox="0 0 100 100"
@@ -72,27 +137,12 @@ export const NebulaField = ({ className, density = 20, themeMode = 'dark' }: Neb
         className="w-full h-full opacity-60 dark:opacity-80 absolute inset-0"
       >
         {paths.map((d, i) => (
-          <motion.path
+          <StreamLine
             key={i}
             d={d}
-            stroke="currentColor"
-            strokeWidth={themeMode === 'light' ? 0.1 : 0.2} 
-            fill="none"
-            initial={{ pathLength: 0, opacity: 0 }}
-            animate={{
-              pathLength: [0, 1], // Draw from start to end
-              opacity: [0, 1, 0]  // Fade in, then out at the end
-            }}
-            transition={{
-              duration: 5 + Math.random() * 5, // Faster, more data-stream like (was 20s)
-              repeat: Infinity,
-              ease: "easeInOut",
-              delay: Math.random() * 5
-            }}
-            className={cn(
-              "transition-colors duration-500",
-              themeMode === 'light' ? "text-slate-400" : "text-emerald-500"
-            )}
+            themeMode={themeMode}
+            onHit={handleHit}
+            width={themeMode === 'light' ? 0.1 : 0.2}
           />
         ))}
       </svg>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 591118e..d456d64 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -50,6 +50,9 @@ importers:
       react-dom:
         specifier: ^18.2.0
         version: 18.3.1(react@18.3.1)
+      react-icons:
+        specifier: ^5.5.0
+        version: 5.5.0(react@18.3.1)
       zod:
         specifier: ^3.22.4
         version: 3.25.76
@@ -1626,6 +1629,11 @@ packages:
     peerDependencies:
       react: ^18.3.1
 
+  react-icons@5.5.0:
+    resolution: {integrity: sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==}
+    peerDependencies:
+      react: '*'
+
   react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
@@ -3657,6 +3665,10 @@ snapshots:
       react: 18.3.1
       scheduler: 0.23.2
 
+  react-icons@5.5.0(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+
   react-is@16.13.1: {}
 
   react@18.3.1: