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

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>
+  )
+}

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>
+  );
+}

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>
   );