Ecosystem Constellation

1"use client";
2 
3import { Timegroup } from "@editframe/react";
4import type { CSSProperties } from "react";
5 
6const FONT_FAMILY =
7  "var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif";
8 
9const GitHubMark = () => (
10  <svg viewBox="0 0 24 24" width={30} height={30} aria-hidden="true">
11    <path
12      fill="#fff"
13      d="M12 .5C5.65.5.5 5.65.5 12c0 5.08 3.29 9.39 7.86 10.91.58.11.79-.25.79-.55v-2.06c-3.2.7-3.87-1.36-3.87-1.36-.52-1.33-1.27-1.69-1.27-1.69-1.04-.71.08-.7.08-.7 1.15.08 1.76 1.18 1.76 1.18 1.02 1.75 2.69 1.24 3.35.95.1-.74.4-1.24.72-1.53-2.55-.29-5.24-1.28-5.24-5.7 0-1.26.45-2.29 1.18-3.1-.12-.29-.51-1.46.11-3.05 0 0 .97-.31 3.18 1.18.92-.26 1.91-.39 2.89-.39s1.97.13 2.89.39c2.21-1.49 3.18-1.18 3.18-1.18.62 1.59.23 2.76.11 3.05.74.81 1.18 1.84 1.18 3.1 0 4.43-2.7 5.41-5.27 5.69.41.36.77 1.06.77 2.13v3.16c0 .31.21.67.8.55C20.21 21.39 23.5 17.08 23.5 12 23.5 5.65 18.35.5 12 .5z"
14    />
15  </svg>
16);
17 
18const VercelMark = () => (
19  <svg viewBox="0 0 24 24" width={28} height={28} aria-hidden="true">
20    <path fill="#fff" d="M12 2 L23 21 L1 21 Z" />
21  </svg>
22);
23 
24const StripeMark = () => (
25  <svg viewBox="0 0 24 24" width={28} height={28} aria-hidden="true">
26    <path
27      fill="#fff"
28      d="M13.5 9.6c0-.6.5-.85 1.3-.85 1.15 0 2.6.35 3.75.97V6.16c-1.25-.5-2.5-.7-3.75-.7C11.7 5.46 9.6 7.06 9.6 9.7c0 4.13 5.7 3.47 5.7 5.25 0 .7-.6.93-1.45.93-1.25 0-2.85-.52-4.1-1.2v3.65c1.4.6 2.8.85 4.1.85 3.2 0 5.4-1.55 5.4-4.25-.02-4.45-5.75-3.65-5.75-5.33z"
29    />
30  </svg>
31);
32 
33const SlackMark = () => (
34  <svg viewBox="0 0 24 24" width={26} height={26} aria-hidden="true">
35    <rect x="2" y="10" width="9" height="2.5" rx="1.25" fill="#36C5F0" />
36    <rect x="13" y="10" width="9" height="2.5" rx="1.25" fill="#2EB67D" />
37    <rect x="10" y="2" width="2.5" height="9" rx="1.25" fill="#ECB22E" />
38    <rect x="10" y="13" width="2.5" height="9" rx="1.25" fill="#E01E5A" />
39  </svg>
40);
41 
42const LinearMark = () => (
43  <svg viewBox="0 0 24 24" width={28} height={28} aria-hidden="true">
44    <defs>
45      <linearGradient id="linear-grad" x1="0" x2="1" y1="0" y2="1">
46        <stop offset="0%" stopColor="#fff" stopOpacity="0.95" />
47        <stop offset="100%" stopColor="#fff" stopOpacity="0.55" />
48      </linearGradient>
49    </defs>
50    <circle cx="12" cy="12" r="10" fill="url(#linear-grad)" />
51    <path
52      d="M5 13 L11 19 M5 9 L15 19 M15 9 V19"
53      stroke="#0a0a0a"
54      strokeWidth="0.9"
55      strokeLinecap="round"
56      opacity="0.85"
57    />
58  </svg>
59);
60 
61// … truncated