feat(web): footer credit — Made with ♥ by techfreakworm

web/src/components/MadeBy.tsx

@@ -0,0 +1,28 @@
+const URL = "https://mayankgupta.in";
+
+export default function MadeBy() {
+  return (
+    <a
+      href={URL}
+      target="_blank"
+      rel="noopener noreferrer"
+      aria-label="Made by Mayank Gupta — opens mayankgupta.in in a new tab"
+      className="group block text-center py-6 select-none"
+    >
+      <div className="label-mono inline-flex items-center gap-1.5 text-muted-foreground">
+        <span>Made with</span>
+        <span
+          aria-hidden
+          className="text-[hsl(var(--ember))] group-hover:animate-pulse-dot"
+        >
+          ♥
+        </span>
+        <span>by</span>
+      </div>
+      <div className="display-serif text-[24px] mt-1 transition-colors duration-200 group-hover:text-[hsl(var(--ember))]">
+        techfreakworm
+      </div>
+      <div className="label-mono mt-1 text-muted-foreground/70">2026</div>
+    </a>
+  );
+}

web/src/pages/Studio.tsx

@@ -13,6 +13,7 @@ import DeviceBadge from "@/components/DeviceBadge";
 import DialogComposer, { type DialogSubmit } from "@/components/DialogComposer";
 import HistoryList from "@/components/HistoryList";
 import LoadingBanner from "@/components/LoadingBanner";
+import MadeBy from "@/components/MadeBy";
 import ModelPicker from "@/components/ModelPicker";
 import ModeToggle, { type Mode } from "@/components/ModeToggle";
 import ParamsPanel from "@/components/ParamsPanel";
@@ -355,6 +356,8 @@ export default function Studio() {
       </main>
 
       <footer className="border-t border-border mt-16">
+        <MadeBy />
+        <div className="rule-dotted mx-8" />
         <div className="mx-auto max-w-[1280px] px-8 py-6 flex items-center justify-between">
           <span className="label-mono">chatterbox · resemble ai</span>
           <span className="label-mono">stateless · browser-persisted</span>

web/src/test/MadeBy.test.tsx

@@ -0,0 +1,21 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import MadeBy from "@/components/MadeBy";
+
+describe("MadeBy", () => {
+  it("renders an anchor to mayankgupta.in opening in a new tab", () => {
+    render(<MadeBy />);
+    const link = screen.getByRole("link", { name: /made by/i });
+    expect(link).toHaveAttribute("href", "https://mayankgupta.in");
+    expect(link).toHaveAttribute("target", "_blank");
+    expect(link).toHaveAttribute("rel", "noopener noreferrer");
+    expect(link.textContent).toMatch(/techfreakworm/);
+  });
+
+  it("includes the heart and the year", () => {
+    render(<MadeBy />);
+    const link = screen.getByRole("link", { name: /made by/i });
+    expect(link.textContent).toMatch(/♥/);
+    expect(link.textContent).toMatch(/2026/);
+  });
+});