www/index.html at develop · wraith-protocol/www · 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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Wraith Protocol — Private payments for every chain</title>
    <meta
      name="description"
      content="Wraith Protocol enables private payments on any blockchain using stealth addresses. One SDK, multiple chains."
    />
    <meta property="og:title" content="Wraith Protocol" />
    <meta
      property="og:description"
      content="Private payments for every chain. Stealth addresses, multichain SDK, and AI-powered privacy agents."
    />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://usewraith.xyz" />
    <meta property="og:image" content="https://usewraith.xyz/og/home.png" />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="Wraith Protocol" />
    <meta
      name="twitter:description"
      content="Private payments for every chain. Stealth addresses, multichain SDK, and AI-powered privacy agents."
    />
    <meta name="twitter:image" content="https://usewraith.xyz/og/home.png" />
    <meta name="theme-color" content="#0e0e0e" />
    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    <link rel="manifest" href="/site.webmanifest" />

    <!--
      Plausible Analytics — cookieless, GDPR-compliant, no consent banner required.
      • No cookies are set; only aggregate page/event counts are stored.
      • script.scroll.js extension tracks scroll depth at every percent automatically.
      • script.tagged-events.js lets us fire goals from JS via window.plausible().
      • Integrity hash pins the exact script bytes served by plausible.io CDN.
      • Replace the integrity value if you upgrade to a newer Plausible release.
    -->
    <script
      defer
      data-domain="usewraith.xyz"
      src="https://plausible.io/js/script.scroll.tagged-events.js"
    ></script>
    <script>
      window.plausible =
        window.plausible ||
        function () {
          (window.plausible.q = window.plausible.q || []).push(arguments);
        };
    </script>

    <link
      rel="preload"
      href="/fonts/space-grotesk-700-normal.woff2"
      as="font"
      type="font/woff2"
      crossorigin
    />
    <link
      rel="preload"
      href="/fonts/inter-400-normal.woff2"
      as="font"
      type="font/woff2"
      crossorigin
    />
    <link
      rel="preload"
      href="/fonts/inter-600-normal.woff2"
      as="font"
      type="font/woff2"
      crossorigin
    />
    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@graph": [
          {
            "@type": "Organization",
            "@id": "https://usewraith.xyz/#organization",
            "name": "Wraith Protocol",
            "url": "https://usewraith.xyz",
            "logo": "https://usewraith.xyz/logo.png",
            "sameAs": ["https://github.com/wraith-protocol", "https://twitter.com/wraith_protocol"]
          },
          {
            "@type": "SoftwareApplication",
            "@id": "https://usewraith.xyz/#softwareapplication",
            "name": "Wraith Protocol SDK",
            "applicationCategory": "DeveloperApplication",
            "operatingSystem": "All",
            "url": "https://usewraith.xyz",
            "downloadUrl": "https://www.npmjs.com/package/@wraith-protocol/sdk",
            "offers": {
              "@type": "Offer",
              "price": "0.00",
              "priceCurrency": "USD"
            }
          }
        ]
      }
    </script>
    <script type="application/ld+json" id="breadcrumb-jsonld">
      {
        "@context": "https://schema.org",
        "@type": "BreadcrumbList",
        "itemListElement": [
          {
            "@type": "ListItem",
            "position": 1,
            "name": "Home",
            "item": "https://usewraith.xyz"
          }
        ]
      }
    </script>
  </head>
  <body>
    <script>
      (function () {
        const savedTheme = localStorage.getItem('wraith-theme');
        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
        const theme = savedTheme || (prefersDark ? 'dark' : 'light');
        document.documentElement.setAttribute('data-theme', theme);
      })();
    </script>
    <div id="root">
      <div class="bg-surface text-on-surface">
        <header
          class="fixed top-0 z-50 w-full border-b border-outline-variant-30 bg-surface/80 backdrop-blur-sm"
        >
          <div class="mx-auto flex w-full items-center justify-between px-12 py-5">
            <a href="https://usewraith.xyz" class="flex items-center gap-3">
              <img src="/logo.png" alt="" width="30" height="24" class="h-6 opacity-90" />
              <span class="font-heading text-[15px] font-bold tracking-[2px] text-on-surface"
                >WRAITH</span
              >
            </a>
            <div class="flex items-center gap-4">
              <a
                href="https://demo.usewraith.xyz"
                target="_blank"
                rel="noopener noreferrer"
                class="hidden h-9 items-center justify-center bg-primary px-5 font-heading text-[11px] font-semibold uppercase tracking-[1.5px] text-surface md:flex"
                >Launch App</a
              >
            </div>
          </div>
        </header>
        <main id="main-content" tabindex="-1">
          <section
            class="flex w-full flex-col gap-16 px-6 pt-24 pb-[120px] md:flex-row md:gap-16 md:px-12 md:pt-24 lg:gap-16"
          >
            <div class="flex w-full flex-col gap-8 pt-16 md:w-1/2">
              <div class="flex flex-wrap items-center gap-3">
                <div class="flex items-center gap-2 border border-outline-variant px-2.5 py-1.5">
                  <span class="h-1.5 w-1.5 rounded-full bg-tertiary"></span>
                  <span
                    class="font-mono text-[10px] font-semibold tracking-[1.5px] text-on-surface-variant"
                    >LIVE ON 4 TESTNETS</span
                  >
                </div>
                <div class="rounded-sm border border-tertiary px-2.5 py-1.5">
                  <span
                    class="font-mono text-[10px] font-semibold uppercase tracking-[1.5px] text-tertiary"
                    >Stellar partner</span
                  >
                </div>
              </div>
              <h1
                class="font-heading text-[40px] font-bold leading-[1.05] tracking-[-2.5px] text-on-surface sm:text-[56px] md:text-[72px]"
              >
                Private payments<br />for every chain.
              </h1>
              <p class="font-body text-[17px] leading-[1.6] text-on-surface-variant">
                A stealth-address toolkit built on ERC-5564 and ERC-6538. Drop it into your app and
                send receiver-unlinkable payments across Horizen, Stellar, Solana, and CKB.
              </p>
              <div class="flex flex-wrap items-center gap-3">
                <a
                  href="https://docs.usewraith.xyz"
                  target="_blank"
                  rel="noopener noreferrer"
                  class="flex h-12 items-center justify-center bg-primary px-7 font-heading text-[13px] font-semibold uppercase tracking-[1.5px] text-surface"
                  >Read the Docs</a
                >
                <a
                  href="https://demo.usewraith.xyz"
                  target="_blank"
                  rel="noopener noreferrer"
                  class="flex h-12 items-center justify-center border border-outline-variant px-7 font-heading text-[13px] font-semibold uppercase tracking-[1.5px] text-primary"
                  >Try the Demo</a
                >
              </div>
            </div>
          </section>
        </main>
      </div>
    </div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>