feat: Initial Monorepo Setup for Such Software

- **Architecture**: Initialized Turborepo monorepo with pnpm workspace.
- **Frontend**: Scaffolding for Next.js 14 app (apps/web) with Tailwind CSS v4 configuration.
- **UI System**: Created shared UI package (@repo/ui) with Shadcn/UI primitives (Card, Button).
- **Procedural Design**:
  - Implemented 'NebulaField' organic background animation for Home.
  - Implemented 'DataGrid' isometric background for Services.
  - Added 'DynamicBackground' for theme-aware transitions.
- **Features**:
  - Responsive 'ThemeToggle' with View Transitions API support.
  - 'PortfolioGrid' component showcasing key projects (r/CryptoCurrency, etc.).
  - 'FounderSignature' component detailing accessibility focus.
  - 'ContactForm' with Zod validation + turnstile integration stub.
- **Pages**:
  - Landing page with parallax/procedural visuals.
  - Services page highlighting Medusa v2 development capabilities.
- **Clean Up**: Removed initial Medusa backend scaffold to focus on frontend delivery first.

packages/ui/src/procedural/data-grid.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import { motion } from "framer-motion";
+
+export const DataGrid = () => {
+  const gridLines = Array.from({ length: 10 }).map((_, i) => i * 10);
+  
+  return (
+    <svg className="absolute inset-0 w-full h-full [mask-image:linear-gradient(to_bottom,transparent,black)] pointer-events-none z-0">
+      {gridLines.map((pos, i) => (
+        <motion.line
+          key={`h-${i}`}
+          x1="0" y1={`${pos}%`} x2="100%" y2={`${pos}%`}
+          stroke="currentColor"
+          strokeWidth="1"
+          className="text-gray-200 dark:text-slate-800" 
+          initial={{ pathLength: 0 }}
+          animate={{ pathLength: 1 }}
+          transition={{ duration: 2, delay: i * 0.1 }}
+        />
+      ))}
+       {/* Animated "Data Packets" travelling lines */}
+       <motion.rect
+         width="2" height="2" fill="currentColor"
+         className="text-blue-500 dark:text-blue-400"
+       >
+         <motion.animateMotion 
+           path="M 0 50 H 100"
+           dur="5s"
+           repeatCount="indefinite"
+         />
+       </motion.rect>
+    </svg>
+  );
+};

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

@@ -0,0 +1,63 @@
+'use client';
+
+import { motion } from "framer-motion";
+import { useEffect, useState } from "react";
+import { cn } from "../lib/utils";
+
+interface NebulaProps {
+  className?: string;
+  density?: number;
+  themeMode?: 'light' | 'dark'; // customized prop
+}
+
+export const NebulaField = ({ className, density = 15, themeMode = 'dark' }: NebulaProps) => {
+  const [paths, setPaths] = useState<string[]>([]);
+
+  // Procedural generation: Create organic bezier curves
+  useEffect(() => {
+    const newPaths = Array.from({ length: density }).map(() => {
+      // Random control points
+      const startX = Math.random() * 100;
+      const startY = Math.random() * 100;
+      const cp1X = startX + (Math.random() - 0.5) * 50;
+      const cp1Y = startY + (Math.random() - 0.5) * 50;
+      const endX = Math.random() * 100;
+      const endY = Math.random() * 100;
+      
+      return `M ${startX} ${startY} Q ${cp1X} ${cp1Y} ${endX} ${endY}`;
+    });
+    setPaths(newPaths);
+  }, [density]);
+
+  return (
+    <div className={cn("absolute inset-0 overflow-hidden pointer-events-none z-0", className)}>
+      <svg
+        viewBox="0 0 100 100"
+        preserveAspectRatio="none"
+        className="w-full h-full opacity-40 dark:opacity-60"
+      >
+        {paths.map((d, i) => (
+          <motion.path
+            key={i}
+            d={d}
+            stroke="currentColor"
+            strokeWidth={themeMode === 'light' ? 0.1 : 0.3} 
+            fill="none"
+            initial={{ pathLength: 0, opacity: 0 }}
+            animate={{
+              pathLength: [0, 1, 0],
+              opacity: [0, 0.8, 0]
+            }}
+            transition={{
+              duration: 20 + Math.random() * 10, // Async timing
+              repeat: Infinity,
+              ease: "linear",
+              delay: Math.random() * 5
+            }}
+            className="text-slate-400 dark:text-emerald-400"
+          />
+        ))}
+      </svg>
+    </div>
+  );
+};