tio-design-make-experiments 0.0.1

package/src/app/pages/DesignSystem.tsx

@@ -0,0 +1,189 @@
+import React, { useState } from "react";
+import { Link, useLocation } from "react-router";
+import svgPaths from "../../imports/svg-umftvfphsk";
+import { imgLogoTestinator } from "../../imports/svg-hm2n0";
+import { ColorPalette } from "../components/design-system/ColorPalette";
+import { Typography } from "../components/design-system/Typography";
+import { Icons } from "../components/design-system/Icons";
+import { Buttons } from "../components/design-system/Buttons";
+import { Cards } from "../components/design-system/Cards";
+import { StatusIndicators } from "../components/design-system/StatusIndicators";
+import { Navigation } from "../components/design-system/Navigation";
+import { ListItems } from "../components/design-system/ListItems";
+import { Charts } from "../components/design-system/Charts";
+import { Patterns } from "../components/design-system/Patterns";
+import { Spacing } from "../components/design-system/Spacing";
+import { Forms } from "../components/design-system/Forms";
+import { PopoverMenu } from "../components/design-system/PopoverMenu";
+
+const sections = [
+  { id: "colors", label: "Colors" },
+  { id: "typography", label: "Typography" },
+  { id: "icons", label: "Icons" },
+  { id: "buttons", label: "Buttons" },
+  { id: "navigation", label: "Navigation" },
+  { id: "forms", label: "Forms" },
+  { id: "popover", label: "Popover" },
+  { id: "cards", label: "Cards" },
+  { id: "status", label: "Status" },
+  { id: "lists", label: "List Items" },
+  { id: "charts", label: "Charts" },
+  { id: "patterns", label: "Patterns" },
+  { id: "spacing", label: "Spacing" },
+];
+
+export default function DesignSystem() {
+  const [activeSection, setActiveSection] = useState("colors");
+  const location = useLocation();
+
+  const scrollToSection = (id: string) => {
+    setActiveSection(id);
+    const el = document.getElementById(id);
+    if (el) {
+      el.scrollIntoView({ behavior: "smooth", block: "start" });
+    }
+  };
+
+  return (
+    <div className="bg-background min-h-screen font-['Source_Sans_3',sans-serif]">
+      {/* Header */}
+      <header className="sticky top-0 z-50 header-bar">
+        <div className="max-w-[1600px] mx-auto flex items-center h-[70px] px-8 lg:px-12">
+          {/* Logo */}
+          <Link to="/" className="h-[34px] w-[148px] overflow-clip relative shrink-0 mr-8">
+            <div
+              className="absolute inset-0 mask-alpha mask-intersect mask-no-clip mask-no-repeat mask-position-[0px_0px] mask-size-[148px_34px]"
+              style={{ maskImage: `url('${imgLogoTestinator}')` }}
+            >
+              <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 147.351 34.0003">
+                <path d={svgPaths.pd3f4900} fill="white" />
+                <path d={svgPaths.p2ef9e700} fill="white" />
+                <path d={svgPaths.p1507e900} fill="white" />
+                <path d={svgPaths.p63b5500} fill="white" />
+                <path d={svgPaths.p73e5c00} fill="white" />
+                <path d={svgPaths.p269eee80} fill="white" />
+                <path d={svgPaths.p32f5f900} fill="white" />
+                <path d={svgPaths.p166df900} fill="white" />
+                <path d={svgPaths.p3af52100} fill="white" />
+                <path d={svgPaths.p224ff200} fill="white" />
+                <path d={svgPaths.p29a28100} fill="white" />
+                <path d={svgPaths.p38feaa80} fill="white" />
+                <path d={svgPaths.p1649b700} fill="white" />
+                <path d={svgPaths.p5b04f70} fill="white" />
+                <path d={svgPaths.pafbcd00} fill="white" />
+                <path d={svgPaths.p94ead80} fill="white" />
+                <path d={svgPaths.p3e1a5280} fill="white" />
+                <path d={svgPaths.p288b2800} fill="#7954FF" />
+                <path clipRule="evenodd" d={svgPaths.p1f8b5980} fill="#78EAC1" fillRule="evenodd" />
+              </svg>
+            </div>
+          </Link>
+
+          <div className="h-8 w-px bg-border mr-6 hidden lg:block" />
+
+          {/* Page Navigation */}
+          <nav className="flex items-center gap-1 mr-6">
+            <Link
+              to="/"
+              className={location.pathname === "/" ? "navlink-active" : "navlink"}
+              style={{ fontSize: 14 }}
+            >
+              <span>Design System</span>
+            </Link>
+            <Link
+              to="/team"
+              className={location.pathname === "/team" ? "navlink-active" : "navlink"}
+              style={{ fontSize: 14 }}
+            >
+              <span>Team</span>
+            </Link>
+          </nav>
+
+          {/* Section Nav - scrollable on mobile */}
+          {location.pathname === "/" && (
+            <>
+              <div className="h-8 w-px bg-border mr-6 hidden lg:block" />
+              <div className="flex-1 overflow-x-auto" style={{ scrollbarWidth: 'none' }}>
+                <div className="flex items-center gap-1 min-w-max">
+                  {sections.map((section) => (
+                    <button
+                      key={section.id}
+                      onClick={() => scrollToSection(section.id)}
+                      className={`${
+                        activeSection === section.id ? "tablink-active" : "tablink"
+                      }`}
+                      style={{ fontSize: 14 }}
+                    >
+                      <span>{section.label}</span>
+                    </button>
+                  ))}
+                </div>
+              </div>
+            </>
+          )}
+        </div>
+      </header>
+
+      {/* Main Content */}
+      <main className="max-w-[1600px] mx-auto px-8 lg:px-12 py-12">
+        {/* Hero */}
+        <div className="mb-16">
+          <h1 className="font-['Source_Sans_3',sans-serif] text-[40px] text-foreground uppercase tracking-wide" style={{ fontWeight: 300 }}>
+            Design System
+          </h1>
+          <p className="font-['Source_Sans_3',sans-serif] text-muted-foreground mt-2 max-w-2xl">
+            A comprehensive reference of all UI components, tokens, and patterns used in the Testinator application. 
+            Each section documents the visual elements, their variants, and usage context.
+          </p>
+          <div className="flex items-center gap-2 mt-4">
+            <div className="inline-flex items-center justify-center size-[26px] rounded-[6px] bg-muted text-muted-foreground">
+              <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+                <rect x="4.5" y="4.5" width="7" height="7" rx="1.5" stroke="currentColor" strokeWidth="1.2" />
+                <path d="M9.5 4.5V3C9.5 2.17157 8.82843 1.5 8 1.5H3C2.17157 1.5 1.5 2.17157 1.5 3V8C1.5 8.82843 2.17157 9.5 3 9.5H4.5" stroke="currentColor" strokeWidth="1.2" />
+              </svg>
+            </div>
+            <span className="font-['Source_Sans_3',sans-serif] text-[13px] text-muted-foreground/60">
+              Hover over any element to copy its design token
+            </span>
+          </div>
+        </div>
+
+        {/* Sections */}
+        <div className="space-y-20">
+          <div id="colors"><ColorPalette /></div>
+          <div id="typography"><Typography /></div>
+          <div id="icons"><Icons /></div>
+          <div id="buttons"><Buttons /></div>
+          <div id="navigation"><Navigation /></div>
+          <div id="forms"><Forms /></div>
+          <div id="popover"><PopoverMenu /></div>
+          <div id="cards"><Cards /></div>
+          <div id="status"><StatusIndicators /></div>
+          <div id="lists"><ListItems /></div>
+          <div id="charts"><Charts /></div>
+          <div id="patterns"><Patterns /></div>
+          <div id="spacing"><Spacing /></div>
+        </div>
+
+        {/* Footer */}
+        <div className="mt-20 pt-8 border-t border-border">
+          <div className="flex items-center justify-between">
+            <p className="font-['Source_Sans_3',sans-serif] text-[13px] text-muted-foreground/60">
+              Testinator Design System v1.0
+            </p>
+            <div className="flex items-center gap-4">
+              <div className="flex items-center gap-2">
+                <div className="size-3 rounded-full bg-primary" />
+                <span className="font-['Source_Sans_3',sans-serif] text-[12px] text-muted-foreground/60">Primary</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <div className="size-3 rounded-full bg-accent" />
+                <span className="font-['Source_Sans_3',sans-serif] text-[12px] text-muted-foreground/60">Accent</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}

package/src/app/pages/Team.tsx

@@ -0,0 +1,168 @@
+import React, { useState } from "react";
+
+export default function Team() {
+  const [email, setEmail] = useState("");
+
+  const testers = [
+    {
+      id: 1,
+      name: "Sarah Johnson",
+      role: "Senior QA Engineer",
+      tests: 1247,
+      successRate: 94,
+    },
+    {
+      id: 2,
+      name: "Michael Chen",
+      role: "Test Automation Lead",
+      tests: 2103,
+      successRate: 96,
+    },
+    {
+      id: 3,
+      name: "Emma Rodriguez",
+      role: "QA Analyst",
+      tests: 856,
+      successRate: 92,
+    },
+    {
+      id: 4,
+      name: "David Kim",
+      role: "Testing Specialist",
+      tests: 1432,
+      successRate: 95,
+    },
+  ];
+
+  const handleSubscribe = (e: React.FormEvent) => {
+    e.preventDefault();
+    console.log("Subscribed:", email);
+    setEmail("");
+  };
+
+  return (
+    <div className="bg-background min-h-screen">
+      {/* Hero Section */}
+      <div className="bg-card border-b border-border">
+        <div className="max-w-[1600px] mx-auto px-8 lg:px-12 py-12">
+          <h1 className="font-['Source_Sans_3',sans-serif] text-[40px] text-foreground uppercase tracking-wide mb-4" style={{ fontWeight: 300 }}>
+            Our Testing Team
+          </h1>
+          <p className="font-['Source_Sans_3',sans-serif] text-muted-foreground max-w-2xl">
+            Meet the experts who ensure quality across all testing scenarios. 
+            Our dedicated team combines technical expertise with attention to detail.
+          </p>
+        </div>
+      </div>
+
+      {/* Main Content */}
+      <main className="max-w-[1600px] mx-auto px-8 lg:px-12 py-12">
+        {/* Team Members Section */}
+        <div className="mb-16">
+          <h2 className="font-['Source_Sans_3',sans-serif] text-lg text-foreground uppercase tracking-wider mb-6">
+            Team Members
+          </h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+            {testers.map((tester) => (
+              <div key={tester.id} className="bg-card rounded-xl p-6 border border-border hover:border-primary transition-all">
+                {/* Avatar Circle */}
+                <div className="mb-4">
+                  <div className="size-20 rounded-full bg-secondary flex items-center justify-center">
+                    <span className="font-['Source_Sans_3',sans-serif] text-2xl text-primary" style={{ fontWeight: 600 }}>
+                      {tester.name.split(' ').map(n => n[0]).join('')}
+                    </span>
+                  </div>
+                </div>
+
+                {/* Info */}
+                <h3 className="font-['Source_Sans_3',sans-serif] text-xl text-foreground mb-1" style={{ fontWeight: 300 }}>
+                  {tester.name}
+                </h3>
+                <p className="font-['Source_Sans_3',sans-serif] text-sm text-primary uppercase mb-4">
+                  {tester.role}
+                </p>
+
+                {/* Stats */}
+                <div className="space-y-2 pt-4 border-t border-border">
+                  <div className="flex items-center justify-between">
+                    <span className="font-['Source_Sans_3',sans-serif] text-xs text-muted-foreground uppercase" style={{ fontWeight: 600 }}>
+                      Tests Run:
+                    </span>
+                    <span className="font-['Source_Sans_3',sans-serif] text-base text-foreground">
+                      {tester.tests.toLocaleString()}
+                    </span>
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <span className="font-['Source_Sans_3',sans-serif] text-xs text-muted-foreground uppercase" style={{ fontWeight: 600 }}>
+                      Success Rate:
+                    </span>
+                    <span className="font-['Source_Sans_3',sans-serif] text-base text-foreground">
+                      {tester.successRate}%
+                    </span>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Newsletter Section */}
+        <div className="bg-card rounded-xl p-12 border border-border">
+          <div className="max-w-2xl mx-auto text-center">
+            <h2 className="font-['Source_Sans_3',sans-serif] text-2xl text-foreground uppercase tracking-wide mb-4" style={{ fontWeight: 300 }}>
+              Stay Updated
+            </h2>
+            <p className="font-['Source_Sans_3',sans-serif] text-muted-foreground mb-8">
+              Subscribe to our newsletter for the latest testing insights, team updates, and quality assurance best practices.
+            </p>
+
+            <form onSubmit={handleSubscribe} className="flex flex-col sm:flex-row gap-4 max-w-lg mx-auto">
+              <div className="flex-1">
+                <input
+                  type="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  placeholder="Enter your email"
+                  required
+                  className="w-full h-10 px-4 bg-input-background border border-border rounded-lg text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent font-['Source_Sans_3',sans-serif]"
+                />
+              </div>
+              <button type="submit" className="btn-primary">
+                Subscribe
+              </button>
+            </form>
+
+            <p className="font-['Source_Sans_3',sans-serif] text-xs text-muted-foreground mt-4">
+              We respect your privacy. Unsubscribe at any time.
+            </p>
+          </div>
+        </div>
+      </main>
+
+      {/* Floating Chat Button */}
+      <button
+        className="fixed bottom-8 right-8 size-12 bg-primary rounded-full flex items-center justify-center shadow-lg hover:bg-link-hover transition-all hover:scale-110 z-50"
+        aria-label="Open chat"
+      >
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+          <path
+            d="M12 2C6.48 2 2 6.48 2 12C2 13.82 2.55 15.5 3.5 16.89L2.05 21.71C1.97 22.01 2.06 22.33 2.29 22.54C2.43 22.68 2.62 22.75 2.81 22.75C2.9 22.75 2.99 22.73 3.08 22.7L8.11 21.1C9.47 21.94 11.18 22.5 13 22.5C18.52 22.5 23 18.02 23 12.5C23 6.98 18.52 2 12 2ZM12 20C10.42 20 8.94 19.57 7.68 18.84L7.41 18.67L4.07 19.75L5.01 16.59L4.82 16.29C3.98 14.99 3.5 13.53 3.5 12C3.5 7.86 6.86 4.5 11 4.5C15.14 4.5 18.5 7.86 18.5 12C18.5 16.14 15.14 19.5 11 19.5Z"
+            fill="currentColor"
+          />
+          <path
+            d="M8.5 11C8.22 11 8 11.22 8 11.5V12.5C8 12.78 8.22 13 8.5 13C8.78 13 9 12.78 9 12.5V11.5C9 11.22 8.78 11 8.5 11Z"
+            fill="currentColor"
+          />
+          <path
+            d="M12 11C11.72 11 11.5 11.22 11.5 11.5V12.5C11.5 12.78 11.72 13 12 13C12.28 13 12.5 12.78 12.5 12.5V11.5C12.5 11.22 12.28 11 12 11Z"
+            fill="currentColor"
+          />
+          <path
+            d="M15.5 11C15.22 11 15 11.22 15 11.5V12.5C15 12.78 15.22 13 15.5 13C15.78 13 16 12.78 16 12.5V11.5C16 11.22 15.78 11 15.5 11Z"
+            fill="currentColor"
+          />
+        </svg>
+      </button>
+    </div>
+  );
+}

package/src/app/routes.tsx

@@ -0,0 +1,14 @@
+import { createBrowserRouter } from "react-router";
+import DesignSystem from "./pages/DesignSystem";
+import Team from "./pages/Team";
+
+export const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <DesignSystem />,
+  },
+  {
+    path: "/team",
+    element: <Team />,
+  },
+]);

package/src/imports/Buttons-3-409.tsx

@@ -0,0 +1,46 @@
+import svgPaths from "./svg-1ifosis1tx";
+
+function IconsCheckCircleFilled() {
+  return (
+    <div className="relative shrink-0 size-[20px]" data-name="icons/check-circle-filled">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 20 20">
+        <g clipPath="url(#clip0_3_815)" id="icons/check-circle-filled">
+          <g id="check-circle-filled" />
+          <path d={svgPaths.p2819d400} fill="var(--fill-0, #1D1D1D)" id="Union" />
+        </g>
+        <defs>
+          <clipPath id="clip0_3_815">
+            <rect fill="white" height="20" width="20" />
+          </clipPath>
+        </defs>
+      </svg>
+    </div>
+  );
+}
+
+function IconWrapper() {
+  return (
+    <div className="content-stretch flex items-center relative shrink-0" data-name="Icon wrapper">
+      <IconsCheckCircleFilled />
+    </div>
+  );
+}
+
+function Button() {
+  return (
+    <div className="absolute bg-[#78eac1] content-stretch flex gap-[10px] h-[40px] items-center left-[117px] px-[20px] py-[10px] rounded-[50px] top-[132px]" data-name="Button">
+      <IconWrapper />
+      <div className="flex flex-col font-['Source_Sans_3:Regular',sans-serif] justify-center leading-[0] not-italic relative shrink-0 text-[#1d1d1d] text-[16px] uppercase whitespace-nowrap">
+        <p className="leading-[14px]">Button</p>
+      </div>
+    </div>
+  );
+}
+
+export default function Buttons() {
+  return (
+    <div className="bg-[#181818] relative size-full" data-name="Buttons">
+      <Button />
+    </div>
+  );
+}

package/src/imports/Buttons-3-962.tsx

@@ -0,0 +1,155 @@
+import svgPaths from "./svg-wl30wxxv53";
+
+function IconsCheckCircleFilled() {
+  return (
+    <div className="relative shrink-0 size-[20px]" data-name="icons/check-circle-filled">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 20 20">
+        <g clipPath="url(#clip0_3_815)" id="icons/check-circle-filled">
+          <g id="check-circle-filled" />
+          <path d={svgPaths.p2819d400} fill="var(--fill-0, #1D1D1D)" id="Union" />
+        </g>
+        <defs>
+          <clipPath id="clip0_3_815">
+            <rect fill="white" height="20" width="20" />
+          </clipPath>
+        </defs>
+      </svg>
+    </div>
+  );
+}
+
+function IconWrapper() {
+  return (
+    <div className="content-stretch flex items-center relative shrink-0" data-name="Icon wrapper">
+      <IconsCheckCircleFilled />
+    </div>
+  );
+}
+
+function Button() {
+  return (
+    <div className="absolute bg-[#78eac1] content-stretch flex gap-[10px] h-[40px] items-center left-[117px] px-[20px] py-[10px] rounded-[50px] top-[132px]" data-name="Button">
+      <IconWrapper />
+      <div className="flex flex-col font-['Source_Sans_3:Regular',sans-serif] justify-center leading-[0] not-italic relative shrink-0 text-[#1d1d1d] text-[16px] uppercase whitespace-nowrap">
+        <p className="leading-[14px]">Primary</p>
+      </div>
+    </div>
+  );
+}
+
+function IconsCheckCircleFilled1() {
+  return (
+    <div className="relative shrink-0 size-[20px]" data-name="icons/check-circle-filled">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 20 20">
+        <g clipPath="url(#clip0_3_1368)" id="icons/check-circle-filled">
+          <g id="check-circle-filled" />
+          <path d={svgPaths.p2819d400} fill="var(--fill-0, #78EAC1)" id="Union" />
+        </g>
+        <defs>
+          <clipPath id="clip0_3_1368">
+            <rect fill="white" height="20" width="20" />
+          </clipPath>
+        </defs>
+      </svg>
+    </div>
+  );
+}
+
+function IconWrapper1() {
+  return (
+    <div className="content-stretch flex items-center relative shrink-0" data-name="Icon wrapper">
+      <IconsCheckCircleFilled1 />
+    </div>
+  );
+}
+
+function Button1() {
+  return (
+    <div className="absolute content-stretch flex gap-[10px] h-[40px] items-center left-[117px] px-[20px] py-[10px] rounded-[50px] top-[192px]" data-name="Button">
+      <div aria-hidden="true" className="absolute border border-[#78eac1] border-solid inset-0 pointer-events-none rounded-[50px]" />
+      <IconWrapper1 />
+      <p className="font-['Source_Sans_3:Regular',sans-serif] leading-[14px] not-italic relative shrink-0 text-[#78eac1] text-[16px] uppercase">Primary</p>
+    </div>
+  );
+}
+
+function IconsCheckCircleFilled2() {
+  return (
+    <div className="relative shrink-0 size-[20px]" data-name="icons/check-circle-filled">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 20 20">
+        <g clipPath="url(#clip0_3_1775)" id="icons/check-circle-filled">
+          <g id="check-circle-filled" />
+          <path d={svgPaths.p2819d400} fill="var(--fill-0, white)" id="Union" />
+        </g>
+        <defs>
+          <clipPath id="clip0_3_1775">
+            <rect fill="white" height="20" width="20" />
+          </clipPath>
+        </defs>
+      </svg>
+    </div>
+  );
+}
+
+function IconWrapper2() {
+  return (
+    <div className="content-stretch flex items-center relative shrink-0" data-name="Icon wrapper">
+      <IconsCheckCircleFilled2 />
+    </div>
+  );
+}
+
+function Button2() {
+  return (
+    <div className="absolute bg-[#7954ff] content-stretch flex gap-[10px] h-[40px] items-center left-[255px] px-[20px] py-[10px] rounded-[50px] top-[132px]" data-name="Button">
+      <IconWrapper2 />
+      <p className="font-['Source_Sans_3:Regular',sans-serif] leading-[14px] not-italic relative shrink-0 text-[16px] text-white uppercase">Hover</p>
+    </div>
+  );
+}
+
+function IconsCheckCircleFilled3() {
+  return (
+    <div className="relative shrink-0 size-[20px]" data-name="icons/check-circle-filled">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 20 20">
+        <g clipPath="url(#clip0_3_1775)" id="icons/check-circle-filled">
+          <g id="check-circle-filled" />
+          <path d={svgPaths.p2819d400} fill="var(--fill-0, white)" id="Union" />
+        </g>
+        <defs>
+          <clipPath id="clip0_3_1775">
+            <rect fill="white" height="20" width="20" />
+          </clipPath>
+        </defs>
+      </svg>
+    </div>
+  );
+}
+
+function IconWrapper3() {
+  return (
+    <div className="content-stretch flex items-center relative shrink-0" data-name="Icon wrapper">
+      <IconsCheckCircleFilled3 />
+    </div>
+  );
+}
+
+function Button3() {
+  return (
+    <div className="absolute bg-[#7954ff] content-stretch flex gap-[10px] h-[40px] items-center left-[255px] px-[20px] py-[10px] rounded-[50px] top-[192px]" data-name="Button">
+      <IconWrapper3 />
+      <p className="font-['Source_Sans_3:Regular',sans-serif] leading-[14px] not-italic relative shrink-0 text-[16px] text-white uppercase">Hover</p>
+    </div>
+  );
+}
+
+export default function Buttons() {
+  return (
+    <div className="bg-[#181818] relative size-full" data-name="Buttons">
+      <Button />
+      <Button1 />
+      <Button2 />
+      <Button3 />
+    </div>
+  );
+}