Next

.eslintrc.json

@@ -5,7 +5,6 @@
     "next",
     "next/core-web-vitals",
     "prettier",
-    "plugin:tailwindcss/recommended",
     "plugin:tailwindcss/recommended"
   ],
   "plugins": ["tailwindcss"],

.vscode/settings.json

@@ -5,7 +5,9 @@
   ],
   "tailwindCSS.experimental.classRegex": [
     ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
-    ["cn\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
+    ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"],
+    ["cn\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"],
+    // ["cn\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
   ],
   "vitest.debugExclude": [
     "<node_internals>/**",

apps/prepare/package.json

@@ -14,14 +14,26 @@
   "dependencies": {
     "@astrojs/react": "^3.6.2",
     "@astrojs/tailwind": "^5.1.2",
+    "@fontsource-variable/fustat": "^5.1.0",
+    "@fontsource/ibm-plex-mono": "^5.1.0",
+    "@hookform/resolvers": "^3.1.0",
+    "@motionone/utils": "^10.18.0",
+    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/themes": "3.1.6",
+    "class-variance-authority": "0.7.1",
     "@types/node": "^22.9.1",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "astro": "5.0.0-beta.8",
+    "framer-motion": ">=11.5.6",
     "lucide-react": "0.359.0",
+    "next-themes": "^0.4.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-hook-form": "^7.44.2",
     "tailwindcss": "3.4.6",
-    "www": "workspace:*"
+    "tailwindcss-motion": "0.4.3-beta",
+    "www": "workspace:*",
+    "zod": "^3.23.8"
   }
 }

apps/prepare/src/assets/prodkt/logo.tsx

@@ -0,0 +1,26 @@
+import * as React from "react"
+import { SVGProps } from "react"
+
+export default function Logo(props: SVGProps<SVGSVGElement>) {
+  return (
+  <svg
+    width={128}
+    height={32}
+    viewBox="0 0 128 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <title>Prodkt - Home of Bryan Funk</title>
+    <path
+      d="m20.537 31.5-8.7-15h9.846l8.668 15h-9.814Zm-9.857-16H.866L9.534.5h9.847l-8.7 15ZM9.273 27.112a4.387 4.387 0 1 1-4.387-4.388 4.387 4.387 0 0 1 4.387 4.388Z"
+      fill="currentColor"
+      stroke="currentColor"
+    />
+    <path
+      d="M73.176 9c-1.033 0-1.945.222-2.733.666a4.512 4.512 0 0 0-1.826 1.867c-.43.802-.646 1.733-.646 2.793v4.094c0 1.06.216 1.994.646 2.803a4.59 4.59 0 0 0 1.826 1.867c.788.437 1.7.656 2.733.656 1.033 0 1.944-.219 2.732-.656a4.594 4.594 0 0 0 1.828-1.867c.43-.808.645-1.743.645-2.803v-4.094c0-1.06-.214-1.991-.645-2.793a4.515 4.515 0 0 0-1.828-1.867C75.12 9.222 74.208 9 73.176 9Zm-21.24.139v14.459h2.484v-5.912h2.11l3.195 5.912h3l-3.41-6.078a3.672 3.672 0 0 0 2.297-1.861c.337-.65.505-1.399.505-2.247 0-.848-.168-1.594-.506-2.236a3.53 3.53 0 0 0-1.42-1.5c-.609-.358-1.319-.537-2.127-.537h-6.129ZM36 9.149v14.449h2.484v-5.606h3.239c.887 0 1.668-.18 2.343-.545a3.866 3.866 0 0 0 1.57-1.54c.372-.67.557-1.446.557-2.327s-.185-1.655-.556-2.324a3.848 3.848 0 0 0-1.57-1.55c-.676-.372-1.457-.558-2.344-.558H36Zm48.66 0v14.449h4.699c1.212 0 2.24-.21 3.08-.627.848-.424 1.483-1.024 1.907-1.8.43-.774.646-1.691.646-2.751v-4.094c0-1.093-.219-2.027-.656-2.803-.437-.775-1.075-1.363-1.916-1.767-.841-.404-1.859-.608-3.05-.608h-4.71Zm16.611 0v14.449h2.485v-3.485l2.164-2.883 3.697 6.368h2.979l-5.008-8.586 4.402-5.864h-3.109l-5.125 7.338V9.148h-2.485Zm15.321 0v2.394h3.982v12.055h2.485V11.543h3.982V9.148h-10.449Zm-43.416 2.335c.523 0 .983.116 1.38.348.405.225.713.55.925.975.218.417.328.899.328 1.449v4.234c0 .55-.11 1.037-.328 1.461-.212.418-.52.741-.924.973-.398.225-.858.338-1.381.338s-.987-.113-1.39-.338a2.377 2.377 0 0 1-.925-.973c-.212-.424-.318-.911-.318-1.46v-4.235c0-.55.106-1.032.318-1.45.219-.423.527-.749.924-.974a2.576 2.576 0 0 1 1.01-.326 3.26 3.26 0 0 1 .38-.022Zm-18.756.05h3.525c.318 0 .598.075.836.228a1.5 1.5 0 0 1 .555.666c.132.285.2.613.2.984a2.489 2.489 0 0 1-.21.994 1.425 1.425 0 0 1-.556.654 1.44 1.44 0 0 1-.598.215c-.073.01-.149.016-.227.016H54.42v-3.758Zm-15.936.009h3.309c.364 0 .685.088.963.26.278.165.489.403.635.715.152.304.228.658.228 1.062 0 .398-.076.753-.228 1.065-.153.304-.367.539-.645.705a1.793 1.793 0 0 1-.953.248h-3.309v-4.055Zm48.66 0h2.286c.953 0 1.688.237 2.205.707.523.47.785 1.135.785 1.996V18.5c0 .861-.262 1.526-.785 1.996-.517.47-1.252.707-2.205.707h-2.286v-9.66Z"
+      fill="currentColor"
+    />
+  </svg>
+)
+}

apps/prepare/src/assets/prodkt/logomark.tsx

@@ -0,0 +1,21 @@
+import * as React from "react"
+import { SVGProps } from "react"
+
+export default function Logomark(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width={32}
+      height={32}
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+  >
+  <path
+    d="m20.537 31.5-8.7-15h9.846l8.668 15h-9.814Zm-9.857-16H.866L9.534.5h9.847l-8.7 15ZM9.273 27.112a4.387 4.387 0 1 1-4.387-4.388 4.387 4.387 0 0 1 4.387 4.388Z"
+    fill="currentColor"
+      stroke="currentColor"
+    />
+    </svg>
+  )
+}

apps/prepare/src/assets/prodkt/logotype.tsx

@@ -0,0 +1,28 @@
+import * as React from "react"
+import { SVGProps } from "react"
+
+export default function Logotype(props: SVGProps<SVGSVGElement>) {
+  return (
+
+  <svg
+    width={92}
+    height={15}
+    viewBox="0 0 92 15"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <g clipPath="url(#prodkt-logotype-a)">
+      <path
+        d="M37.176 0c-1.033 0-1.945.222-2.733.666a4.512 4.512 0 0 0-1.826 1.867c-.43.802-.646 1.733-.646 2.793V9.42c0 1.06.216 1.995.646 2.803a4.59 4.59 0 0 0 1.826 1.867c.788.437 1.7.656 2.733.656 1.033 0 1.944-.219 2.732-.656a4.594 4.594 0 0 0 1.828-1.867c.43-.809.645-1.743.645-2.803V5.326c0-1.06-.214-1.991-.645-2.793A4.515 4.515 0 0 0 39.908.666C39.12.222 38.208 0 37.176 0Zm-21.24.139v14.459h2.484V8.686h2.11l3.195 5.912h3l-3.41-6.078a3.672 3.672 0 0 0 2.297-1.861c.337-.65.505-1.399.505-2.247 0-.848-.168-1.594-.506-2.236a3.53 3.53 0 0 0-1.42-1.5c-.609-.358-1.319-.537-2.127-.537h-6.129ZM0 .149v14.449h2.484V8.992h3.239c.887 0 1.668-.18 2.343-.545a3.866 3.866 0 0 0 1.57-1.54c.372-.67.557-1.446.557-2.327s-.185-1.655-.556-2.324a3.849 3.849 0 0 0-1.57-1.55C7.39.333 6.61.147 5.722.147H0Zm48.66 0v14.449h4.699c1.212 0 2.24-.21 3.08-.627.848-.424 1.483-1.024 1.907-1.8.43-.774.646-1.691.646-2.751V5.326c0-1.093-.219-2.027-.656-2.803-.437-.775-1.075-1.363-1.916-1.767-.841-.404-1.859-.608-3.05-.608h-4.71Zm16.612 0v14.449h2.484v-3.485L69.92 8.23l3.697 6.368h2.979l-5.008-8.586L75.99.148h-3.11l-5.124 7.338V.148h-2.484Zm15.32 0v2.394h3.982v12.055h2.485V2.543h3.982V.148h-10.45ZM37.176 2.483c.523 0 .983.116 1.38.348.405.225.713.55.925.975.218.417.328.899.328 1.449V9.49c0 .55-.11 1.037-.328 1.461-.212.418-.52.741-.924.973-.398.225-.858.338-1.381.338s-.987-.113-1.39-.338a2.377 2.377 0 0 1-.925-.973c-.212-.424-.318-.911-.318-1.46V5.255c0-.55.106-1.032.318-1.45.219-.423.527-.749.924-.974a2.577 2.577 0 0 1 1.01-.326c.123-.015.25-.022.38-.022Zm-18.756.05h3.525c.318 0 .598.075.836.228a1.5 1.5 0 0 1 .555.666c.132.285.2.613.2.984a2.49 2.49 0 0 1-.21.994 1.425 1.425 0 0 1-.556.655 1.44 1.44 0 0 1-.598.214c-.073.01-.149.016-.227.016H18.42V2.533Zm-15.936.009h3.309c.364 0 .685.087.963.26.278.165.489.403.635.715.152.304.228.658.228 1.062 0 .398-.076.753-.228 1.065-.153.304-.367.539-.645.705a1.793 1.793 0 0 1-.953.248H2.484V2.543Zm48.66 0h2.286c.953 0 1.688.237 2.205.707.523.47.785 1.135.785 1.996V9.5c0 .861-.262 1.526-.785 1.996-.517.47-1.252.707-2.205.707h-2.285v-9.66Z"
+        fill="currentColor"
+      />
+    </g>
+    <defs>
+      <clipPath id="prodkt-logotype-a">
+        <path fill="currentColor" d="M0 0h91.041v14.746H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+)
+}

apps/prepare/src/components/effect-ripple.tsx

@@ -0,0 +1,61 @@
+import React, { type CSSProperties } from "react";
+
+import { cn } from '@/lib/utils';
+
+interface RippleProps {
+  mainCircleSize?: number;
+  mainCircleOpacity?: number;
+  numCircles?: number;
+  className?: string;
+}
+
+const Ripple = React.memo(function Ripple({
+  mainCircleSize = 45,
+  mainCircleOpacity = 0.08,
+  numCircles = 8,
+  className,
+}: RippleProps) {
+  return (
+    <div
+      className={cn(
+        "pointer-events-none select-none absolute inset-0 [mask-image:linear-gradient(to_top,white,transparent)]",
+        className,
+      )}
+    >
+      {Array.from({ length: numCircles }, (_, i) => {
+        const size = mainCircleSize + i * 8;
+        const opacity = mainCircleOpacity - i * 0.012;
+        const animationDelay = `${i * 0.1}s`;
+        const borderStyle = i === numCircles - 1 ? "dashed" : "solid";
+        const borderOpacity = 5 + i * 4;
+        const borderRadius = 1 + i * 0.15;
+
+        return (
+          <div
+            key={i}
+            className={`absolute animate-ripple bg-accent-a4 shadow-xl border [--i:${i}]`}
+            style={
+              {
+                width: `${size}%`,
+                height: `${size}%`,
+                opacity,
+                animationDelay,
+                borderStyle,
+                borderRadius: `${borderRadius}rem`,
+                borderWidth: "1px",
+                borderColor: `hsl(var(--foreground), ${borderOpacity / 100})`,
+                top: "50%",
+                left: "50%",
+                transform: "translate(-50%, -50%) scale(1)",
+              } as CSSProperties
+            }
+          />
+        );
+      })}
+    </div>
+  );
+});
+
+Ripple.displayName = "Ripple";
+
+export default Ripple;