hex/site/src/App.tsx at main · anomalyco/hex · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
import * as m from "motion/react-m"
import ChatteringTeeth from "./ChatteringTeeth"

const MAC_VERSION = "2.1.22"
const DOWNLOAD_URL =
  `https://downloads.hex.kitlangton.dev/releases/HEX-${MAC_VERSION}-arm64.dmg`
const GITHUB_DOWNLOAD_URL =
  `https://github.com/anomalyco/hex/releases/download/app-v${MAC_VERSION}/HEX-${MAC_VERSION}-arm64.dmg`
const LINUX_INSTALL_URL = "https://github.com/anomalyco/hex/blob/main/docs/linux.md"

function HexMark() {
  return (
    <svg aria-hidden="true" viewBox="0 0 64 64" className="wordmark__icon">
      <path d="M32 4 57 18.5v27L32 60 7 45.5v-27Z" />
      <path d="M32 15 48 24.25v15.5L32 49l-16-9.25v-15.5Z" />
      <path className="wordmark__core" d="m32 24 7.5 4.25v8.5L32 41l-7.5-4.25v-8.5Z" />
    </svg>
  )
}

function AppleMark() {
  return (
    <svg aria-hidden="true" viewBox="0 0 24 24" className="download__apple">
      <path d="M16.68 12.9c.02 2.3 2.02 3.06 2.04 3.07-.02.06-.32 1.1-1.05 2.17-.63.92-1.29 1.84-2.32 1.86-1.01.02-1.34-.6-2.5-.6-1.15 0-1.51.58-2.47.62-.99.04-1.74-.99-2.38-1.91-1.3-1.88-2.3-5.32-.96-7.65a3.7 3.7 0 0 1 3.15-1.91c.98-.02 1.91.66 2.5.66.6 0 1.72-.82 2.9-.7.49.02 1.88.2 2.77 1.5-.07.04-1.65.96-1.68 2.89ZM14.81 7.27c.53-.64.89-1.53.79-2.41-.76.03-1.68.51-2.23 1.15-.49.57-.92 1.47-.8 2.34.85.07 1.71-.43 2.24-1.08Z" />
    </svg>
  )
}

function LinuxMark() {
  return (
    <svg aria-hidden="true" viewBox="0 0 24 24" className="download__linux">
      <path d="M5 5.5h14v13H5zM8 9l2.5 2.5L8 14M12.5 14H16" />
    </svg>
  )
}

export default function App() {
  const isLinux = /\bLinux\b/i.test(navigator.userAgent) && !/\bAndroid\b/i.test(navigator.userAgent)

  return (
    <m.main
      className="page"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.35, ease: "easeOut" }}
    >
      <header className="header">
        <a className="wordmark" href="/" aria-label="HEX home">
          <HexMark />
          <span>HEX</span>
        </a>
      </header>

      <section className="hero">
        <div className="hero__copy">
          <div className="hero__title">
            <h1>Speak. It appears.</h1>
            <ChatteringTeeth />
          </div>
          <p>
            Local voice dictation for {isLinux ? "Linux." : "Mac."} Hold {isLinux ? "Alt-Space" : "Option"},
            say what you mean, and HEX pastes it where you are.
          </p>
        </div>

        <div className="hero__action">
          {isLinux ? (
            <m.a
              className="download"
              href={LINUX_INSTALL_URL}
              whileHover={{ y: -1 }}
              whileTap={{ scale: 0.985 }}
            >
              <LinuxMark />
              <span>Install on Linux</span>
              <span className="download__arrow" aria-hidden="true">&#8599;</span>
            </m.a>
          ) : (
            <m.a
              className="download"
              href={DOWNLOAD_URL}
              whileHover={{ y: -1 }}
              whileTap={{ scale: 0.985 }}
            >
              <AppleMark />
              <span>Download for Mac</span>
              <span className="download__arrow" aria-hidden="true">&#8595;</span>
            </m.a>
          )}
          <p className="requirements">
            {isLinux ? "x86_64 Arch Linux beta" : `Version ${MAC_VERSION}  ·  Apple silicon  ·  macOS 15+`}
          </p>
          {!isLinux && (
            <a className="download-alternative" href={GITHUB_DOWNLOAD_URL}>
              Alternative download: GitHub
            </a>
          )}
        </div>
      </section>
    </m.main>
  )
}