wipjarred/land

4 files changed, 342 insertions, 15 deletions

diff --git a/packages/bun-landing/index.css b/packages/bun-landing/index.css
index 2b8b1727c..6720e994e 100644
--- a/packages/bun-landing/index.css
+++ b/packages/bun-landing/index.css
@@ -3,7 +3,10 @@
   --blue: #00a6e1;
   --orange: #f89b4b;
   --orange-light: #d4d3d2;
+
   --monospace-font: "Fira Code", "Hack", "Source Code Pro", monospace;
+
+  --dark-border: rgba(200, 200, 25, 0.2);
 }
 * {
   box-sizing: border-box;
@@ -15,6 +18,11 @@ body,
   padding: 0;
   font-family: Helvetica, Arial, sans-serif;
 }
+
+body {
+  background-color: #fbf0df;
+}
+
 a {
   color: inherit;
   text-decoration: none;
@@ -50,6 +58,10 @@ main {
   grid-template-columns: auto auto;
 }
 
+#cards-wrap {
+}
+#cards-wrap,
+#usecases,
 main,
 header {
   padding: 4rem 3rem;
@@ -149,6 +161,49 @@ header {
   -moz-user-select: none;
 }
 
+#usecases-section {
+  background: linear-gradient(12deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.2)),
+    conic-gradient(
+      from 6.27deg at 46.95% 50.05%,
+      #ff8181 0deg,
+      #e5f067 75deg,
+      #6dd9ba 155.62deg,
+      #67f0ae 168.75deg,
+      #8b67f0 243.75deg,
+      #f067e2 300deg,
+      #e967e3 334.49deg,
+      #f06767 348.9deg,
+      #ff8181 360deg
+    );
+  color: white;
+  font-family: var(--monospace-font);
+  contain: paint;
+
+  font-size: 24pt;
+  font-weight: bold;
+}
+
+#usecases-section {
+  padding: 0;
+  margin: 0;
+}
+
+#usecases {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+#usecases-section h1 {
+  background: linear-gradient(90deg, #ff0000 0%, #faff00 50.52%, #0500ff 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  font-family: Helvetica;
+  margin: 0;
+  padding: 0;
+}
+
 #code-box {
   background-color: rgb(37, 36, 32);
   padding: 4px 16px;
@@ -166,6 +221,7 @@ header {
 
 #code-box {
   font-family: var(--monospace-font);
+  position: relative;
 }
 
 #curl:hover {
@@ -253,6 +309,7 @@ header {
   display: flex;
   flex-direction: column;
 }
+
 .BarGraph-heading {
   font-weight: 500;
   font-size: 1.5rem;
@@ -276,7 +333,7 @@ header {
 .BarGraphList {
   margin-top: 1rem;
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(var(--count), 1fr);
   font-variant-numeric: tabular-nums;
   font-family: var(--monospace-font);
   justify-content: center;
@@ -289,7 +346,12 @@ header {
   display: grid;
   text-align: center;
   margin-top: 1rem;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(var(--count), 1fr);
+}
+
+.BarGraphBar {
+  --primary: 70px;
+  --opposite: 100%;
 }
 
 .BarGraph,
@@ -302,9 +364,9 @@ header {
 .BarGraphBar {
   margin: 0 auto;
 
-  width: 70px;
-  height: 100%;
-  min-height: 200px;
+  width: var(--primary);
+  height: var(--opposite);
+
   background-color: pink;
   transform-origin: bottom center;
   transform: scaleY(var(--level));
@@ -312,30 +374,49 @@ header {
 }
 
 .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);
+  border-right: 1px dashed var(--dark-border);
+  border-top: 1px dashed var(--dark-border);
+  border-bottom: 1px dashed var(--dark-border);
 }
 
 .BarGraphItem--deno {
   border-right-color: transparent;
 }
 
+.BarGraph--horizontal .BarGraphBar {
+  min-height: 200px;
+}
+
+.BarGraph--vertical .BarGraphBar {
+  max-width: 90%;
+}
+
 .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;
+}
 
+.CardContent {
+  position: relative;
+}
+
+.BarGraph--vertical .BarGraphBar-label {
+  transform: scaleX(var(--inverse));
+  bottom: 0;
+  right: 0;
+}
+
+.BarGraph--horizontal .BarGraphBar-label {
+  transform: scaleY(var(--inverse));
   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");
@@ -344,7 +425,36 @@ header {
   background-position: 6px 20%;
 }
 
-.BarGraphBar {
+.BarGraph--vertical .BarGraphItem--bun {
+  border-top-right-radius: 12px;
+  border-bottom-right-radius: 12px;
+}
+
+.BarGraph--horizontal .BarGraphItem--bun {
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
+}
+
+.BarGraph--vertical .BarGraphBar {
+  height: var(--primary);
+  width: var(--opposite);
+
+  transform: scaleX(var(--level));
+  transform-origin: bottom left;
+
+  max-height: 40px;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+.BarGraph--vertical .BarGraphList,
+.BarGraph--vertical .BarGraphKey--vertical {
+  grid-template-columns: 1fr;
+  grid-template-rows: repeat(var(--count), 1fr);
+}
+
+.BarGraph--vertical .BarGraphList {
+  direction: rtl;
 }
 
 .BarGraphKeyItem-label {
@@ -354,3 +464,34 @@ header {
   color: #666;
   margin-top: 0.5rem;
 }
+
+.DemphasizedLabel {
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+#frameworks {
+  display: flex;
+}
+
+.FrameworksGroup {
+  display: grid;
+  grid-template-rows: auto 40px;
+  gap: 0.5rem;
+}
+
+.DemphasizedLabel {
+  color: #666;
+  font-weight: 300;
+}
+
+.FrameworksList {
+  display: grid;
+  grid-template-columns: repeat(2, 40px);
+  gap: 3.5rem;
+  align-items: center;
+}
+
+#cards {
+  display: grid;
+}
diff --git a/packages/bun-landing/public/index.html b/packages/bun-landing/public/index.html
index 980431715..e4dc7a196 100644
--- a/packages/bun-landing/public/index.html
+++ b/packages/bun-landing/public/index.html
@@ -66,13 +66,13 @@
             <div class="Tab">bun install</div>
           </div>
           <div class="ActiveTab">
-            <div class="BarGraph">
+            <div class="BarGraph BarGraph--horizontal BarGraph--dark">
               <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 style="--count: 3" class="BarGraphList">
                 <div
                   class="BarGraphItem BarGraphItem--bun"
                   style="--amount: 41829"
@@ -119,7 +119,7 @@
                 </div>
               </div>
 
-              <div class="BarGraphKey">
+              <div style="--count: 3" class="BarGraphKey">
                 <div class="BarGraphKeyItem">
                   <div class="BarGraphKeyItem-label">bun.js</div>
                   <div class="BarGraphKeyItem-value">v0.0.78</div>
@@ -138,7 +138,177 @@
             </div>
           </div>
         </div>
+
+        <div id="frameworks">
+          <div class="FrameworksGroup">
+            <div class="DemphasizedLabel">Supported frameworks</div>
+            <div class="FrameworksList">
+              <a
+                referrerpolicy="no-referrer"
+                class="Framework"
+                href="https://nextjs.org"
+                target="_blank"
+                ><img
+                  src="/public/next.svg"
+                  height="40"
+                  alt="Next.js"
+                  decoding="async"
+              /></a>
+              <a
+                class="Framework"
+                referrerpolicy="no-referrer"
+                href="https://remix.run"
+                target="_blank"
+              >
+                <img
+                  src="/public/remix.svg"
+                  alt="Remix"
+                  height="26"
+                  decoding="async"
+                />
+              </a>
+            </div>
+          </div>
+        </div>
       </main>
     </div>
+    <section id="explain-section">
+      <div id="explain">
+        <h1>Getting started</h1>
+
+        <p>A simple HTTP</p>
+      </div>
+    </section>
+
+    <section id="usecases-section">
+      <div id="usecases">
+        <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>
+
+        <h1>Usecases</h1>
+        <div class="UsecaseGroup">
+          <div class="UsecaseGroupTitle">bun run</div>
+          <div className="UseCase"></div>
+        </div>
+
+        <div class="UsecaseGroup">
+          <div class="UsecaseGroupTitle">bun.js</div>
+        </div>
+
+        <div class="UsecaseGroup">
+          <div class="UsecaseGroupTitle">bun dev</div>
+        </div>
+
+        <div class="UsecaseGroup">
+          <div class="UsecaseGroupTitle">bun install</div>
+        </div>
+
+        <div class="UsecaseGroup">
+          <div class="UsecaseGroupTitle">bun build</div>
+        </div>
+      </div>
+    </section>
+    <section id="cards-wrap">
+      <div id="cards">
+        <div class="Card">
+          <div class="Badge CardBadge">Bun.Transpiler</div>
+          <div class="CardHeader"></div>
+          <div class="CardContent">
+            <div class="BarGraph BarGraph--vertical BarGraph--light">
+              <div class="BarGraph-heading">
+                Transpiling JSX via JavaScript API (MB/s)
+              </div>
+              <div class="BarGraph-subheading">This runs</div>
+
+              <div style="--count: 4" 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--esbuild"
+                >
+                  <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--swc"
+                  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
+                  class="BarGraphItem BarGraphItem--babel"
+                  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 style="--count: 4" 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">babel</div>
+                  <div class="BarGraphKeyItem-value">v17.7.1</div>
+                </div>
+
+                <div class="BarGraphKeyItem">
+                  <div class="BarGraphKeyItem-label">swc</div>
+                  <div class="BarGraphKeyItem-value">v1.20.5</div>
+                </div>
+
+                <div class="BarGraphKeyItem">
+                  <div class="BarGraphKeyItem-label">esbuild</div>
+                  <div class="BarGraphKeyItem-value">v1.20.5</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
   </body>
 </html>
diff --git a/packages/bun-landing/public/next.svg b/packages/bun-landing/public/next.svg
new file mode 100644
index 000000000..c7ce692a7
--- /dev/null
+++ b/packages/bun-landing/public/next.svg
@@ -0,0 +1,12 @@
+<svg width="81" height="48" viewBox="0 0 81 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_450_101)">
+<path d="M19.0273 12.6317H34.0839V13.8246H20.4075V22.8027H33.2684V23.9956H20.4075V33.8527H34.2408V35.0456H19.0273V12.6317ZM35.4328 12.6317H37.0325L44.1217 22.4888L51.3677 12.6317L61.2234 0.111023L45.0314 23.5247L53.3752 35.0456H51.7127L44.1217 24.5607L36.4993 35.0456H34.8681L43.2747 23.5247L35.4328 12.6317ZM53.9712 13.8246V12.6317H71.1295V13.8246H63.2247V35.0456H61.8446V13.8246H53.9712Z" fill="#4B5563"/>
+<path d="M0.19043 12.6317H1.91567L25.7057 48.1173L15.8744 35.0455L1.63335 14.3269L1.57062 35.0455H0.19043V12.6317Z" fill="#4B5563"/>
+<path d="M70.9896 33.4927C71.2749 33.4927 71.483 33.2749 71.483 32.9934C71.483 32.712 71.2749 32.4942 70.9896 32.4942C70.7076 32.4942 70.4961 32.712 70.4961 32.9934C70.4961 33.2749 70.7076 33.4927 70.9896 33.4927ZM72.3458 32.1792C72.3458 33.0102 72.9467 33.553 73.8228 33.553C74.756 33.553 75.32 32.9934 75.32 32.0218V28.6009H74.5681V32.0184C74.5681 32.5579 74.2961 32.846 73.8161 32.846C73.3864 32.846 73.0944 32.578 73.0843 32.1792H72.3458ZM76.3036 32.1357C76.3573 33.0001 77.079 33.553 78.1533 33.553C79.3013 33.553 80.0197 32.9733 80.0197 32.0486C80.0197 31.3215 79.6102 30.9194 78.6165 30.6882L78.0828 30.5576C77.4517 30.4102 77.1965 30.2125 77.1965 29.8674C77.1965 29.4318 77.5926 29.147 78.1868 29.147C78.7508 29.147 79.1402 29.4251 79.2107 29.8707H79.9425C79.8989 29.0565 79.1805 28.4836 78.1969 28.4836C77.1395 28.4836 76.4345 29.0565 76.4345 29.9176C76.4345 30.6279 76.834 31.0501 77.7101 31.2545L78.3345 31.4053C78.9757 31.556 79.2577 31.7772 79.2577 32.1457C79.2577 32.5746 78.8146 32.8862 78.2103 32.8862C77.5624 32.8862 77.1126 32.5947 77.0488 32.1357H76.3036Z" fill="#4B5563"/>
+</g>
+<defs>
+<clipPath id="clip0_450_101">
+<rect width="80" height="48" fill="white" transform="translate(0.112305)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/bun-landing/public/remix.svg b/packages/bun-landing/public/remix.svg
new file mode 100644
index 000000000..86dd2f1e1
--- /dev/null
+++ b/packages/bun-landing/public/remix.svg
@@ -0,0 +1,4 @@
+<svg width="28" height="32" viewBox="0 0 28 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M26.1614 24.5649C25.9906 22.7985 25.4478 21.5069 24.5868 20.5805L24.5868 20.5805C23.8406 19.7774 22.8311 19.2222 21.5486 18.8828L21.5744 17.91C24.931 17.2093 27.3665 14.4499 27.3665 10.2733C27.3665 7.28162 26.3804 4.89134 24.436 3.24179C22.4825 1.58457 19.5125 0.633057 15.4674 0.633057H0.633789V6.31314H13.9593C15.8136 6.31314 17.2629 6.70825 18.2561 7.48269L18.2561 7.48271C19.2633 8.26814 19.7546 9.40713 19.7546 10.7783C19.7546 12.313 19.2701 13.4421 18.2416 14.1659C17.2423 14.8692 15.7906 15.1434 13.9593 15.1434H0.633789V20.9642H11.0186H13.5571C15.0067 20.9642 16.226 21.1624 17.1094 21.8999M26.1614 24.5649L17.1094 21.8999M26.1614 24.5649C26.4258 27.9461 26.4431 29.6469 26.4443 31.3669H18.7292C18.7318 31.1029 18.7367 30.8486 18.7418 30.5899L18.7419 30.5899V30.5833C18.7649 29.4127 18.7883 28.1848 18.5988 25.7252V25.7128L18.5966 25.6948M26.1614 24.5649L18.5966 25.6948M17.1094 21.8999C17.9993 22.6428 18.4667 23.8616 18.5966 25.6948M17.1094 21.8999L18.5966 25.6948" stroke="#4B5563"/>
+<path d="M10.6519 31.3669H0.633789V27.2145H9.20185C9.84554 27.2145 10.1855 27.4454 10.3765 27.7007C10.5814 27.9746 10.6519 28.3277 10.6519 28.6067V31.3669Z" stroke="#4B5563"/>
+</svg>