wip

8 files changed, 501 insertions, 0 deletions

diff --git a/packages/bun-landing/index.css b/packages/bun-landing/index.css
new file mode 100644
index 000000000..2b8b1727c
--- /dev/null
+++ b/packages/bun-landing/index.css
@@ -0,0 +1,356 @@
+:root {
+  --black: #0b0a08;
+  --blue: #00a6e1;
+  --orange: #f89b4b;
+  --orange-light: #d4d3d2;
+  --monospace-font: "Fira Code", "Hack", "Source Code Pro", monospace;
+}
+* {
+  box-sizing: border-box;
+}
+head,
+body,
+:root {
+  margin: 0 auto;
+  padding: 0;
+  font-family: Helvetica, Arial, sans-serif;
+}
+a {
+  color: inherit;
+  text-decoration: none;
+  transition: transform 0.1s linear;
+}
+a:visited {
+  color: inherit;
+}
+a:hover {
+  text-decoration: underline;
+  transform: scale(1.06, 1.06);
+  transform-origin: middle center;
+}
+#header-wrap,
+#pitch {
+  background-color: var(--black);
+  color: #fbf0df;
+  width: 100%;
+}
+
+#logo-link {
+  width: fit-content;
+  display: flex;
+  gap: 24px;
+  align-items: center;
+}
+main {
+  width: auto;
+
+  margin: 0 auto;
+  max-width: 1152px;
+  display: grid;
+  grid-template-columns: auto auto;
+}
+
+main,
+header {
+  padding: 4rem 3rem;
+  margin: 0 auto;
+  max-width: 1152px;
+}
+
+#pitch-content {
+  max-width: 600px;
+}
+
+.tagline {
+  margin-top: 0;
+  line-height: 1;
+  font-size: 36pt;
+}
+
+.subtitle {
+  font-size: 1.2rem;
+}
+nav {
+  white-space: nowrap;
+  display: flex;
+  gap: 2rem;
+  list-style: none;
+}
+
+.NavText {
+  color: #fbf0df;
+  display: block;
+  font-weight: 500;
+  font-size: 1.2rem;
+}
+
+#HeaderInstallButton {
+  margin-left: 2.4rem;
+}
+
+#pitch main {
+  gap: 2rem;
+}
+
+#logo {
+  max-width: 70px;
+  margin: auto 0;
+}
+
+#logo-text {
+  max-width: 96px;
+}
+
+header {
+  display: grid;
+  grid-template-columns: auto max-content min-content;
+  background-color: var(--black);
+  padding: 1rem 3rem;
+  align-items: center;
+  color: white;
+}
+
+#HeaderInstallButton:hover {
+  cursor: pointer;
+  transform: scale(1.06);
+}
+#HeaderInstallButton {
+  transition: transform 0.1s linear;
+  background: #00a6e1;
+  padding: 8px 16px;
+  border-radius: 100px;
+  color: black;
+  font-weight: 500;
+}
+
+#install {
+  margin-top: 2rem;
+  background: #15140e;
+  padding: 24px 24px;
+  border-radius: 24px;
+}
+
+#install-label-heading {
+  font-size: 1.4rem;
+  margin-bottom: 1rem;
+  font-weight: 500;
+  font-weight: 500;
+}
+
+#install-label-subtitle {
+  font-size: 0.9rem;
+  color: var(--orange-light);
+}
+
+.unselectable {
+  user-select: none;
+  -webkit-user-select: none;
+  -webkit-user-drag: none;
+  -moz-user-select: none;
+}
+
+#code-box {
+  background-color: rgb(37, 36, 32);
+  padding: 4px 16px;
+  position: relative;
+  border-radius: 8px;
+  text-align: center;
+  align-items: center;
+  border: 1px solid var(--orange);
+  margin-top: 1rem;
+  display: grid;
+  align-content: center;
+  white-space: nowrap;
+  margin-bottom: 1rem;
+}
+
+#code-box {
+  font-family: var(--monospace-font);
+}
+
+#curl:hover {
+  cursor: text;
+  pointer-events: auto;
+}
+
+#curl::before {
+  display: block;
+  content: "$";
+  color: var(--orange);
+  pointer-events: none;
+  width: 1ch;
+  height: 1ch;
+}
+
+#curl {
+  user-select: all;
+  -webkit-user-select: text;
+  pointer-events: auto;
+  white-space: nowrap;
+  cursor: text;
+  display: inline-flex;
+  padding: 12px 8px;
+  gap: 2ch;
+}
+
+#view-source-link {
+  color: var(--orange-light);
+}
+
+#code-box-copy {
+  position: absolute;
+  right: 16px;
+  top: 0;
+  bottom: 0;
+  height: 100%;
+
+  display: flex;
+  align-items: center;
+  z-index: 5;
+
+  color: var(--orange-light);
+  transition: transform 0.05s linear;
+  transition-property: color, transform;
+  transform-origin: center center;
+  cursor: pointer;
+}
+
+#code-box-copy:hover {
+  color: var(--blue);
+  transform: scale(1.06);
+}
+
+#code-box-copy:active {
+  transform: scale(1.12);
+}
+
+.Tabs {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  margin-left: auto;
+  margin-right: auto;
+  justify-content: center;
+  align-items: center;
+  width: min-content;
+  white-space: nowrap;
+  gap: 2rem;
+}
+
+.Tab {
+  width: min-content;
+  font-family: var(--monospace-font);
+  text-align: center;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #ccc;
+}
+
+.Tab--active {
+  border-bottom-color: aquamarine;
+}
+
+.BarGraph {
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+}
+.BarGraph-heading {
+  font-weight: 500;
+  font-size: 1.5rem;
+}
+
+.BarGraphList {
+  flex: 1;
+  position: relative;
+}
+.BarGraph,
+.ActiveTab,
+.Graphs {
+  height: auto;
+}
+
+.BarGraph-subheading {
+  font-size: 0.9rem;
+  color: rgb(135, 134, 134);
+}
+
+.BarGraphList {
+  margin-top: 1rem;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  font-variant-numeric: tabular-nums;
+  font-family: var(--monospace-font);
+  justify-content: center;
+  align-items: flex-start;
+  height: 100%;
+  background-color: #080808;
+}
+
+.BarGraphKey {
+  display: grid;
+  text-align: center;
+  margin-top: 1rem;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.BarGraph,
+.BarGraphBar-label,
+.BarGraphItem {
+  --level: calc(var(--amount) / 50000);
+  --inverse: calc(1 / var(--level));
+}
+
+.BarGraphBar {
+  margin: 0 auto;
+
+  width: 70px;
+  height: 100%;
+  min-height: 200px;
+  background-color: pink;
+  transform-origin: bottom center;
+  transform: scaleY(var(--level));
+  position: relative;
+}
+
+.BarGraphItem {
+  border-right: 1px dashed rgba(200, 200, 25, 0.2);
+  border-top: 1px dashed rgba(200, 200, 25, 0.2);
+  border-bottom: 1px dashed rgba(200, 200, 25, 0.2);
+}
+
+.BarGraphItem--deno {
+  border-right-color: transparent;
+}
+
+.BarGraphBar-label {
+  color: white;
+  font-variant-numeric: tabular-nums;
+  font-family: var(--monospace-font);
+  width: 100%;
+  text-align: center;
+  transform: scaleY(var(--inverse));
+  position: relative;
+
+  top: calc(-20px * var(--inverse));
+}
+
+.BarGraphItem--bun .BarGraphBar {
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
+  background-color: rgb(249, 241, 225);
+  box-shadow: inset 1px 1px 3px rgb(204, 198, 187);
+  background-image: url("/public/logo.png");
+  background-repeat: no-repeat;
+  background-size: 56px 48.8px;
+  background-position: 6px 20%;
+}
+
+.BarGraphBar {
+}
+
+.BarGraphKeyItem-label {
+  color: white;
+}
+.BarGraphKeyItem-value {
+  color: #666;
+  margin-top: 0.5rem;
+}
diff --git a/packages/bun-landing/index.js b/packages/bun-landing/index.js
new file mode 100644
index 000000000..3a29aed15
--- /dev/null
+++ b/packages/bun-landing/index.js
@@ -0,0 +1 @@
+import "./index.css";
diff --git a/packages/bun-landing/package.json b/packages/bun-landing/package.json
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/packages/bun-landing/package.json
diff --git a/packages/bun-landing/public/Bun.png b/packages/bun-landing/public/Bun.png
new file mode 100644
index 000000000..759b156a3
--- /dev/null
+++ b/packages/bun-landing/public/Bun.png
diff --git a/packages/bun-landing/public/Bun@2x.png b/packages/bun-landing/public/Bun@2x.png
new file mode 100644
index 000000000..34072c3c6
--- /dev/null
+++ b/packages/bun-landing/public/Bun@2x.png
diff --git a/packages/bun-landing/public/index.html b/packages/bun-landing/public/index.html
new file mode 100644
index 000000000..980431715
--- /dev/null
+++ b/packages/bun-landing/public/index.html
@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" href="/index.css" />
+    <script type="module" src="/index.js"></script>
+  </head>
+
+  <body>
+    <div id="header-wrap">
+      <header>
+        <a href="/" id="logo-link">
+          <img src="/public/logo@2x.png" alt="Bun" id="logo" />
+          <img src="/public/Bun@2x.png" alt="Bun" id="logo-text" />
+        </a>
+
+        <nav class="Navigation">
+          <li>
+            <a class="NavText" href="/docs">Docs</a>
+          </li>
+          <li>
+            <a class="NavText" href="/discord">Discord</a>
+          </li>
+          <li>
+            <a class="NavText" href="/github">GitHub</a>
+          </li>
+        </nav>
+        <div id="HeaderInstallButton">Install</div>
+      </header>
+    </div>
+    <div id="pitch">
+      <main>
+        <div id="pitch-content">
+          <h1 class="tagline">Build &amp; Run JavaScript 100x faster</h1>
+          <p class="subtitle">
+            Bundle, transpile, install and run JavaScript & TypeScript projects
+            &mdash; all in Bun. Bun is a new JavaScript runtime with a native
+            bundler, transpiler, and npm client built-in.
+          </p>
+
+          <div id="install">
+            <div id="install-label">
+              <div class="unselectable" id="install-label-heading">
+                Install Bun CLI
+              </div>
+              <div class="unselectable" id="install-label-subtitle">
+                macOS x64 &amp; Silicon, Linux x64, Windows Subsystem for Linux
+              </div>
+            </div>
+            <div id="code-box">
+              <div id="curl">curl https://bun.sh/install | bash</div>
+              <div class="unselectable" id="code-box-copy">copy</div>
+            </div>
+            <a
+              class="unselectable"
+              id="view-source-link"
+              target="_blank"
+              href="https://bun.sh/install"
+              >Show script source</a
+            >
+          </div>
+        </div>
+        <div class="Graphs">
+          <div class="Tabs">
+            <div class="Tab Tab--active">bun.js</div>
+            <div class="Tab">bun run</div>
+            <div class="Tab">bun install</div>
+          </div>
+          <div class="ActiveTab">
+            <div class="BarGraph">
+              <div class="BarGraph-heading">HTTP requests per second</div>
+              <div class="BarGraph-subheading">
+                Serving a 47 KB file * Bigger is better
+              </div>
+
+              <div class="BarGraphList">
+                <div
+                  class="BarGraphItem BarGraphItem--bun"
+                  style="--amount: 41829"
+                >
+                  <div
+                    style="--amount: 41829"
+                    title="41829 requests per second"
+                    class="BarGraphBar"
+                  >
+                    <div style="--amount: 41829" class="BarGraphBar-label">
+                      41,829
+                    </div>
+                  </div>
+                </div>
+
+                <div
+                  style="--amount: 2584"
+                  class="BarGraphItem BarGraphItem--node"
+                >
+                  <div
+                    title="1,843 requests per second"
+                    style="--amount: 2584"
+                    class="BarGraphBar"
+                  >
+                    <div style="--amount: 2584" class="BarGraphBar-label">
+                      2,584
+                    </div>
+                  </div>
+                </div>
+
+                <div
+                  class="BarGraphItem BarGraphItem--deno"
+                  style="--amount: 365"
+                >
+                  <div
+                    style="--amount: 365"
+                    title="365 requests per second"
+                    class="BarGraphBar"
+                  >
+                    <div style="--amount: 365" class="BarGraphBar-label">
+                      365
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div class="BarGraphKey">
+                <div class="BarGraphKeyItem">
+                  <div class="BarGraphKeyItem-label">bun.js</div>
+                  <div class="BarGraphKeyItem-value">v0.0.78</div>
+                </div>
+
+                <div class="BarGraphKeyItem">
+                  <div class="BarGraphKeyItem-label">node.js</div>
+                  <div class="BarGraphKeyItem-value">v17.7.1</div>
+                </div>
+
+                <div class="BarGraphKeyItem">
+                  <div class="BarGraphKeyItem-label">deno</div>
+                  <div class="BarGraphKeyItem-value">v1.20.5</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  </body>
+</html>
diff --git a/packages/bun-landing/public/logo.png b/packages/bun-landing/public/logo.png
new file mode 100644
index 000000000..ea9eb97dc
--- /dev/null
+++ b/packages/bun-landing/public/logo.png
diff --git a/packages/bun-landing/public/logo@2x.png b/packages/bun-landing/public/logo@2x.png
new file mode 100644
index 000000000..d232243e5
--- /dev/null
+++ b/packages/bun-landing/public/logo@2x.png