feat: synchronize background nebula animations and overhaul site copy

- perfectly synced nebula streamer impacts with computer icon pulse
- standardized typography with left-border headers and blurbs across landing and services pages
- expanded services page with specialized solutions for commerce, custom apps, and crypto
- fixed bento grid image distortion and background persistence issues
- corrected hydration and syntax errors in nebula-field

apps/web/src/app/page.tsx

@@ -6,6 +6,7 @@ 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";
+import { Card } from "@repo/ui/components/card";
 
 export default function Home() {
   return (
@@ -45,15 +46,57 @@ export default function Home() {
 
          <ServicesPreview />
          
-         <div className="grid gap-4 w-full">
+         <div className="w-full max-w-6xl mx-auto mb-16 px-4">
-            <h3 className="text-3xl font-bold text-left w-full mt-10 mb-6 px-4">Selected Works</h3>
+            <div className="text-left mb-8 px-2 border-l-2 border-blue-500/50 pl-6">
+                <h3 className="text-2xl font-bold mb-2">Selected Works</h3>
+                <p className="text-muted-foreground text-lg max-w-3xl">
+                    A curated gallery of recent projects where we've pushed the boundaries of 
+                    performance, accessibility, and user experience.
+                </p>
+            </div>
             <PortfolioGrid />
          </div>
 
+         <div className="w-full max-w-6xl mx-auto mb-16 px-4">
+            <div className="text-left mb-8 px-2 border-l-2 border-purple-500/50 pl-6">
+                <h3 className="text-2xl font-bold mb-2">Inclusive by Design</h3>
+                <p className="text-muted-foreground text-lg max-w-3xl">
+                    We believe the web is for everyone. Every line of code we write is 
+                    audited for WCAG 2.1 compliance and high-performance across all devices.
+                </p>
+            </div>
+            <div className="grid md:grid-cols-2 gap-8">
+               <Card className="p-8 bg-card/50 backdrop-blur-sm border-purple-500/10 hover:border-purple-500/30 transition-all group">
+                  <h4 className="text-xl font-bold mb-4 flex items-center gap-2">
+                     <span className="w-8 h-8 rounded-full bg-purple-500/10 flex items-center justify-center text-purple-500 text-sm">01</span>
+                     A11y First Architecture
+                  </h4>
+                  <p className="text-muted-foreground text-sm">
+                     Semantic HTML, ARIA patterns, and keyboard navigation aren't afterthoughts—they are the foundation of our build process.
+                  </p>
+               </Card>
+               <Card className="p-8 bg-card/50 backdrop-blur-sm border-blue-500/10 hover:border-blue-500/30 transition-all group">
+                  <h4 className="text-xl font-bold mb-4 flex items-center gap-2">
+                     <span className="w-8 h-8 rounded-full bg-blue-500/10 flex items-center justify-center text-blue-500 text-sm">02</span>
+                     Edge Performance
+                  </h4>
+                  <p className="text-muted-foreground text-sm">
+                     By leveraging edge computing and static generation, we ensure your site is usable even on 3G connections and older hardware.
+                  </p>
+               </Card>
+            </div>
+         </div>
+
          <FounderSignature />
 
-         <div id="contact" className="w-full mt-20 mb-10 flex flex-col items-center">
+         <div id="contact" className="w-full mt-20 mb-20 flex flex-col items-center">
-            <h3 className="text-3xl font-bold mb-8">Start a Project</h3>
+            <div className="w-full max-w-6xl text-left mb-12 px-2 border-l-2 border-emerald-500/50 pl-6">
+                <h3 className="text-2xl font-bold mb-2">Start a Project</h3>
+                <p className="text-muted-foreground text-lg max-w-3xl">
+                    Ready to build something exceptional? Drop us a line and let's discuss 
+                    how we can help you scale your digital presence.
+                </p>
+            </div>
             <ContactForm />
          </div>
       </div>

apps/web/src/app/services/page.tsx

@@ -23,47 +23,118 @@ export default function ServicesPage() {
       </header>
 
       <div className="z-10 w-full max-w-5xl mx-auto py-20 px-4">
-        <div className="mb-16 text-center">
+        {/* Context Header */}
-            <h1 className="text-4xl md:text-6xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-indigo-500 to-cyan-500">
+        <div className="mb-20">
-            Medusa v2 Development
+            <div className="text-left mb-8 px-2 border-l-2 border-emerald-500/50 pl-6">
-            </h1>
+                <h1 className="text-4xl md:text-6xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-emerald-400 to-blue-500">
-            <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
+                  Specialized Solutions
-            We build proprietary, headless commerce engines that scale with your business logic. 
+                </h1>
-            Stop fighting with Shopify's limitations.
+                <p className="text-xl text-muted-foreground max-w-2xl">
-            </p>
+                   We solve complex business problems with elegant architecture. 
+                   Whether you're scaling a commerce empire or building a new financial protocol, 
+                   we provide the technical firepower.
+                </p>
+            </div>
         </div>
 
-        <div className="grid md:grid-cols-3 gap-6">
+        {/* Medusa / Webshops Section */}
-            <Card className="p-6 bg-card/80 backdrop-blur-sm border-indigo-500/20">
+        <div className="mb-24">
-                <h3 className="text-xl font-bold mb-2">Unlimited Data Modeling</h3>
+            <div className="text-left mb-8 px-2 border-l-2 border-blue-500/50 pl-6">
-                <p className="text-sm text-muted-foreground">
+                <h2 className="text-3xl font-bold mb-2">Medusa v2 Development</h2>
-                    Need a product with "DNA Sequence", "Artist Bio", and "Royalty Logic"? 
+                <p className="text-muted-foreground text-lg max-w-3xl">
-                    We model that natively in the database, not via hacky meta-fields.
+                    We build proprietary, headless commerce engines that scale with your business logic. 
+                    Stop fighting with Shopify's limitations and own your infrastructure.
                 </p>
-            </Card>
+            </div>
-            <Card className="p-6 bg-card/80 backdrop-blur-sm border-indigo-500/20">
+
-                <h3 className="text-xl font-bold mb-2">Workflow Orchestration</h3>
+            <div className="grid md:grid-cols-3 gap-6">
-                <p className="text-sm text-muted-foreground">
+                <Card className="p-6 bg-card/80 backdrop-blur-sm border-indigo-500/10 hover:border-indigo-500/30 transition-all">
-                     Automate complex business logic—like splitting an order between a print-on-demand provider 
+                    <h3 className="text-xl font-bold mb-2">Unlimited Data Modeling</h3>
-                     and a local warehouse automatically using Medusa Workflows.
+                    <p className="text-sm text-muted-foreground">
-                </p>
+                        Natively model complex entities like "DNA Sequences" or "Royalty Logic" 
-            </Card>
+                        directly in the database without hacky metadata.
-            <Card className="p-6 bg-card/80 backdrop-blur-sm border-indigo-500/20">
+                    </p>
-                <h3 className="text-xl font-bold mb-2">Headless Performance</h3>
+                </Card>
-                <p className="text-sm text-muted-foreground">
+                <Card className="p-6 bg-card/80 backdrop-blur-sm border-indigo-500/10 hover:border-indigo-500/30 transition-all">
-                    We couple the robust Medusa backend with a Next.js 16 frontend, ensuring your shop 
+                    <h3 className="text-xl font-bold mb-2">Zero Capital Upfront</h3>
-                    scores 100/100 on Core Web Vitals and SEO.
+                    <p className="text-sm text-muted-foreground">
-                </p>
+                        Our "Toast" style partnership means we win when you win. Low friction onboarding 
-            </Card>
+                        with performance-based incentives.
+                    </p>
+                </Card>
+                <Card className="p-6 bg-card/80 backdrop-blur-sm border-indigo-500/10 hover:border-indigo-500/30 transition-all">
+                    <h3 className="text-xl font-bold mb-2">Headless SEO</h3>
+                    <p className="text-sm text-muted-foreground">
+                        Custom Next.js frontends engineered for perfect lighthouse scores and 
+                        superior organic search conversion.
+                    </p>
+                </Card>
+            </div>
         </div>
 
-        <div className="mt-20 p-8 rounded-2xl bg-gradient-to-br from-slate-900 to-slate-800 text-white text-center">
+        {/* Custom Apps Section */}
-            <h2 className="text-2xl font-bold mb-4">Ready to upgrading your shop?</h2>
+        <div className="mb-24">
-            <p className="mb-8 text-slate-300">
+            <div className="text-left mb-8 px-2 border-l-2 border-purple-500/50 pl-6">
-                We are currently accepting beta partners for our new Medusa v2 accelerator.
+                <h2 className="text-3xl font-bold mb-2">Custom Apps & Interactive Websites</h2>
+                <p className="text-muted-foreground text-lg max-w-2xl">
+                    Whether it's a real-time collaborative tool or a high-end brand experience, 
+                    we build performant web applications that delight users.
+                </p>
+            </div>
+            <div className="grid md:grid-cols-2 gap-6">
+                <Card className="p-6 bg-card/80 backdrop-blur-sm border-purple-500/10 hover:border-purple-500/30 transition-all">
+                    <h3 className="text-xl font-bold mb-2">Real-time Platforms</h3>
+                    <p className="text-sm text-muted-foreground">
+                        Socket.io and WebRTC integration for collaborative tools, dashboards, 
+                        and live data visualization.
+                    </p>
+                </Card>
+                <Card className="p-6 bg-card/80 backdrop-blur-sm border-purple-500/10 hover:border-purple-500/30 transition-all">
+                    <h3 className="text-xl font-bold mb-2">Brand Motion</h3>
+                    <p className="text-sm text-muted-foreground">
+                        Framermotion and Three.js powered interfaces that tell your brand's story 
+                        through motion and depth.
+                    </p>
+                </Card>
+            </div>
+        </div>
+
+        {/* Crypto Section */}
+        <div className="mb-24">
+            <div className="text-left mb-8 px-2 border-l-2 border-cyan-500/50 pl-6">
+                <h2 className="text-3xl font-bold mb-2">Cryptocurrency & Payment Consulting</h2>
+                <p className="text-muted-foreground text-lg max-w-2xl">
+                    Navigate the complex world of global finance. We bridge the gap between 
+                    traditional banking and decentralized protocols.
+                </p>
+            </div>
+            <div className="grid md:grid-cols-2 gap-6">
+                <Card className="p-6 bg-card/80 backdrop-blur-sm border-cyan-500/10 hover:border-cyan-500/30 transition-all">
+                    <h3 className="text-xl font-bold mb-2">Payment Orchestration</h3>
+                    <p className="text-sm text-muted-foreground">
+                        Multi-PSP routing, automated reconciliation, and fraud prevention for 
+                        high-volume merchants.
+                    </p>
+                </Card>
+                <Card className="p-6 bg-card/80 backdrop-blur-sm border-cyan-500/10 hover:border-cyan-500/30 transition-all">
+                    <h3 className="text-xl font-bold mb-2">Web3 Integration</h3>
+                    <p className="text-sm text-muted-foreground">
+                        Non-custodial wallet auth, on/off ramp solutions, and smart contract 
+                        interactions for modern dApps.
+                    </p>
+                </Card>
+            </div>
+        </div>
+
+        <div className="mt-20 p-12 rounded-2xl bg-gradient-to-br from-slate-900 via-slate-800 to-indigo-950 text-white text-center shadow-2xl relative overflow-hidden group">
+            <div className="absolute inset-0 bg-blue-500/5 opacity-0 group-hover:opacity-100 transition-opacity" />
+            <h2 className="text-3xl font-bold mb-4 relative z-10">Start building the future</h2>
+            <p className="mb-8 text-slate-300 max-w-xl mx-auto relative z-10">
+                We are currently accepting a limited number of partners for performance-based development. 
+                Let's see if we're a fit.
             </p>
-            <Link href="/#contact">
+            <Link href="/#contact" className="relative z-10">
-                <Button size="lg" variant="secondary" className="rounded-full">
+                <Button size="lg" variant="secondary" className="rounded-full px-12 py-6 text-lg hover:scale-105 transition-transform">
                     Request a Demo
                 </Button>
             </Link>

apps/web/src/components/landing/services-preview.tsx

@@ -2,19 +2,28 @@ 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">
+    <div className="w-full max-w-6xl mx-auto px-4 mt-8 mb-16">
+        <div className="text-left mb-8 px-2 border-l-2 border-emerald-500/50 pl-6">
+            <h3 className="text-2xl font-bold mb-2">High-Performance Webshops</h3>
+            <p className="text-muted-foreground text-lg max-w-3xl">
+                We build commerce infrastructure that scales with you. From complex supply chains 
+                to global payments, we handle the technical heavy lifting so you can focus on your brand.
+            </p>
+        </div>
+
+        <div className="grid md:grid-cols-3 gap-6">
             <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>
+                <h3 className="text-xl font-bold mb-2">Native Crypto & Payments</h3>
                 <p className="text-sm text-muted-foreground">
-                    Need a product with "DNA Sequence", "Artist Bio", and "Royalty Logic"? 
+                    Deep expertise in multi-currency checkout, fiat-to-crypto onboarding, and 
-                    We model that natively in the database, not via hacky meta-fields.
+                    DeFi integration. We build payments that work everywhere, for everyone.
                 </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>
+                <h3 className="text-xl font-bold mb-2">Zero Capital Upfront</h3>
                 <p className="text-sm text-muted-foreground">
-                     Automate complex business logic—like splitting an order between a print-on-demand provider 
+                     We operate on a "Toast" style partnership model. No massive setup fees or 
-                     and a local warehouse automatically using Medusa Workflows.
+                     stiff monthly subscriptions—we only win when you're making sales.
                 </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">
@@ -25,5 +34,6 @@ export function ServicesPreview() {
                 </p>
             </Card>
         </div>
+    </div>
   )
 }

packages/ui/src/procedural/nebula-field.tsx

@@ -16,30 +16,35 @@ interface StreamLineProps {
   themeMode: 'light' | 'dark';
   onHit: () => void;
   width: number;
+  index: number;
 }
 
-const StreamLine = ({ d, themeMode, onHit, width }: StreamLineProps) => {
+const StreamLine = ({ d, themeMode, onHit, width, index }: StreamLineProps) => {
   const controls = useAnimation();
 
   useEffect(() => {
     let isMounted = true;
     const animate = async () => {
-      // Very short initial delay for first streamers
+      // Spread out initial starts so they don't all hit at once
-      await new Promise(resolve => setTimeout(resolve, Math.random() * 800));
+      await new Promise(resolve => setTimeout(resolve, index * 1500 + Math.random() * 1000));
       
       while (isMounted) {
-        const duration = 6 + Math.random() * 4; // Snappier, more frequent small impacts
+        // Calmer, longer durations (8-14 seconds)
+        const duration = 8 + Math.random() * 6; 
         
         controls.set({ pathLength: 0, pathOffset: 0, opacity: 0 });
 
+        // Timing: In the animation below, pathOffset reaches 0.8 at 80% of duration.
+        // With pathLength 0.2, the head hits the target (1.0) exactly at 80%.
         const hitTimeout = setTimeout(() => {
           if (isMounted) onHit();
-        }, duration * 750);
+        }, duration * 1000 * 0.8); 
 
+        // Animate the streamer path
         await controls.start({
-          pathLength: [0, 0.20, 0.20, 0],
+          pathLength: [0, 0.2, 0.2, 0], 
-          pathOffset: [0, 0, 0.75, 0.98], // Avoid overshooting center too much
+          pathOffset: [0, 0, 0.8, 1.0], 
-          opacity: [0, 0.5, 0.5, 0], // More visible streamers
+          opacity: [0, 0.4, 0.4, 0], 
           transition: { 
             duration, 
             ease: "linear",
@@ -48,12 +53,13 @@ const StreamLine = ({ d, themeMode, onHit, width }: StreamLineProps) => {
         });
 
         clearTimeout(hitTimeout);
-        await new Promise(resolve => setTimeout(resolve, 300 + Math.random() * 1000));
+        // Longer pause between streaks for a more ambient feel
+        await new Promise(resolve => setTimeout(resolve, 2000 + Math.random() * 3000));
       }
     };
     animate();
     return () => { isMounted = false; };
-  }, [controls, onHit]);
+  }, [controls, onHit, index]);
 
   return (
     <motion.path
@@ -85,16 +91,25 @@ export const NebulaField = ({ className, density = 8, themeMode = 'dark' }: Nebu
     setMonitorColor(themeMode === 'light' ? "text-slate-300" : "text-emerald-500/40");
   }, [themeMode]);
 
-  // Parallax Scroll for Computer Icon
+  // --- POSITIONING & ANIMATION CONTROLS ---
+
+  // Parallax Scroll: Vertical movement of the computer icon as you scroll.
+  // [0, 1000] is the scroll pixel range, [0, 250] is the movement in pixels.
   const { scrollY } = useScroll();
   const yRange = useTransform(scrollY, [0, 1000], [0, 250]);
 
-  // Configuration for convergence point
+  // 1. Computer Position: Where the icon sits on the screen (%)
-  const targetX = 18; // Moved right to clear margins better
+  const computerX = 18; 
-  const targetY = 18; // High up near the title line
+  const computerY = 18;
+
+  // 2. Streamer Convergence: Where the streamers actually head (%)
+  // If streamers hit "up and to the left", increase these values slightly.
+  const targetX = 19.8; // Tweak this to move streamer hit point right
+  const targetY = 19.8; // Tweak this to move streamer hit point down
 
   const paths = useMemo(() => {
     return Array.from({ length: density }).map(() => {
+      // Streamer start position (random edge)
       const edge = Math.floor(Math.random() * 4);
       let startX = 50, startY = 50;
       
@@ -128,7 +143,7 @@ export const NebulaField = ({ className, density = 8, themeMode = 'dark' }: Nebu
           "brightness(1.3) drop-shadow(0 0 12px currentColor)", // Stronger glow
           "brightness(1) drop-shadow(0 0 0px rgba(0,0,0,0))"
         ],
-        transition: { duration: 2.5, ease: "easeOut" } 
+        transition: { duration: 1.5, ease: "easeOut" } // Smoother, longer pulse
      });
   }, [monitorControls, themeMode]);
 
@@ -146,8 +161,8 @@ export const NebulaField = ({ className, density = 8, themeMode = 'dark' }: Nebu
         }}
         transition={{ duration: 1.5 }}
         style={{ 
-          left: `${targetX}%`, 
+          left: `${computerX}%`, 
-          top: `${targetY}%`,
+          top: `${computerY}%`,
           y: yRange
         }}
       >
@@ -155,7 +170,7 @@ export const NebulaField = ({ className, density = 8, themeMode = 'dark' }: Nebu
           <Monitor 
             size={56} // Bigger icon as requested
             className={cn(
-              "transition-colors duration-2000",
+              "transition-colors duration-1000", // Back to smoother color shift
               monitorColor
             )} 
           />
@@ -175,6 +190,7 @@ export const NebulaField = ({ className, density = 8, themeMode = 'dark' }: Nebu
             themeMode={themeMode}
             onHit={handleHit}
             width={themeMode === 'light' ? 0.08 : 0.12} 
+            index={i}
           />
         ))}
       </motion.svg>