feature: refresh "marketing" pages with new copy and design (#438)

* New landing page interim exploration

* WIP

* Refactor and new landing page prototype

* Update social image and bump dependencies

* Bump dependencies to latest version

astro.config.mjs

@@ -12,7 +12,7 @@ export default defineConfig({
       description:
         "Web Monetization allows websites to automatically receive payments from users, facilitated by the user agent and a user's preferred monetization provider.",
       customCss: [
-        './node_modules/@interledger/docs-design-system/src/styles/green-theme.css',
+        './node_modules/@interledger/docs-design-system/src/styles/teal-theme.css',
         './node_modules/@interledger/docs-design-system/src/styles/ilf-docs.css',
       ],
       expressiveCode: {

package.json

@@ -9,11 +9,11 @@
   },
   "dependencies": {
     "@astrojs/react": "^3.0.10",
-    "@astrojs/starlight": "^0.18.0",
-    "@interledger/docs-design-system": "^0.2.1",
+    "@astrojs/starlight": "^0.18.1",
+    "@interledger/docs-design-system": "^0.3.0",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19",
-    "astro": "4.3.6",
+    "astro": "4.4.0",
     "astro-i18next": "^1.0.0-beta.21",
     "prettier": "^3.2.5",
     "prism-react-renderer": "^2.3.1",
@@ -24,4 +24,4 @@
     "respec": "^34.4.0",
     "sharp": "^0.33.2"
   }
-}
+}

src/pages/specification/respec.sh → scripts/respec.sh

@@ -17,11 +17,11 @@ RESPEC_SOURCE="$SPEC_PATH/specification-respec.html"
 RESPEC_STATIC="$SPEC_PATH/index.html"
 
 # "$PRETTIER_PATH" "$SPEC_PATH/includes" --write
-"$TIDY_PATH" -config "$SPEC_PATH/tidyconfig.txt" -m "$RESPEC_SOURCE"
+"$TIDY_PATH" -config "$REPO_ROOT/scripts/tidyconfig.txt" -m "$RESPEC_SOURCE"
 
 pushd $SPEC_PATH
 # respec doesn't support absolute paths
 npx respec --localhost specification-respec.html index.html
 popd
 
-"$TIDY_PATH" -config "$SPEC_PATH/tidyconfig.txt" --hide-comments yes -m "$RESPEC_STATIC"
+"$TIDY_PATH" -config "$REPO_ROOT/scripts/tidyconfig.txt" --hide-comments yes -m "$RESPEC_STATIC"

src/components/docs/BrowserCompat.astro

@@ -208,8 +208,7 @@ tbody td {
 }
 
 tbody td img {
-  margin-left: auto;
-  margin-right: auto;
+  margin-inline: auto;
 }
 
 .platforms {
@@ -221,8 +220,7 @@ tbody td img {
 }
 
 .platforms th img {
-  margin-left: auto;
-  margin-right: auto;
+  margin-inline: auto;
 }
 
 .browserLabel {
@@ -231,8 +229,8 @@ tbody td img {
   white-space: nowrap;
   line-height: 1;
   position: relative;
-  padding-top: 0.5rem;
-  margin-left: 2px;
+  padding-block-start: 0.5rem;
+  margin-inline-start: 2px;
 }
 
 .browser::after {
@@ -292,8 +290,8 @@ tbody td img {
   align-items: center;
   display: flex;
   font-size: 0.75rem;
-  margin-top: 0;
-  margin-right: var(--space-s);
+  margin-block-start: 0;
+  margin-inline-end: var(--space-s);
 }
 
 .legendItem dd {
@@ -302,7 +300,7 @@ tbody td img {
 
 .legendItem.legendItem.legendItem,
 .legendItem.legendItem.legendItem dd {
-  margin-top: 0;
+  margin-block-start: 0;
 }
 
 .iconGreen {

src/components/docs/Header.astro

@@ -33,7 +33,7 @@ import LanguageSelect from "@astrojs/starlight/components/LanguageSelect.astro";
   }
 
   .secondary-wrap {
-    margin-left: auto;
+    margin-inline-start: auto;
     display: flex;
     align-items: center;
     gap: var(--sl-nav-gap);

src/components/docs/Specification.astro

@@ -28,7 +28,7 @@ const { anchor } = Astro.props;
 <style>
 table {
   border-collapse: collapse;
-  margin-top: var(--space-m);
+  margin-block-start: var(--space-m);
 }
 
 tr:nth-child(even) td {

src/components/pages/CardList.astro

@@ -99,11 +99,11 @@ const { cards } = Astro.props;
 }
 
 .cardContent h3 {
-  margin-bottom: var(--space-3xs);
+  margin-block-end: var(--space-3xs);
 }
 
 .cardContent p {
   font-size: var(--step-0);
-  margin-bottom: 0;
+  margin-block-end: 0;
 }
 </style>

src/components/pages/CodeBlock/CodeBlock.module.css

@@ -1,6 +1,6 @@
 .codeBlock {
   position: relative;
-  margin-bottom: var(--space-s);
+  margin-block-end: var(--space-s);
 }
 
 .pre {
@@ -56,7 +56,7 @@
   opacity: 0;
   top: 50%;
   transform: translate(-50%, -50%) scale(0.33);
-  margin-top: 0;
+  margin-block-start: 0;
 }
 
 .copied .btnSuccessIcon {

src/components/pages/Footer.astro

@@ -35,8 +35,8 @@
     display: flex;
     gap: var(--space-l);
     flex-direction: column;
-    padding-top:var(--space-s);
-    padding-bottom: var(--space-m);
+    padding-block-start:var(--space-s);
+    padding-block-end: var(--space-m);
   }
 
   @media screen and (min-width: 500px) {
@@ -51,7 +51,7 @@
   }
 
   li {
-    margin-bottom: var(--space-xs);
+    margin-block-end: var(--space-xs);
   }
 
   a {

src/components/pages/LinkTagGenerator/LinkTagGenerator.module.css

@@ -1,10 +1,9 @@
 .form {
-  margin-bottom: var(--space-s);
-  margin-top: var(--space-s);
+  margin-block: var(--space-s);
 }
 
 .text {
-  margin-bottom: var(--space-s);
+  margin-block-end: var(--space-s);
 }
 
 .inputWrapper {

src/components/pages/PrCta.astro

@@ -20,7 +20,7 @@ const { label } = Astro.props;
   display: flex;
   align-items: center;
   gap: var(--space-2xs);
-  margin-bottom: var(--space-s);
+  margin-block-end: var(--space-s);
   justify-content: center;
 }
 

src/components/pages/ProbRevshare/styles.module.css

@@ -1,14 +1,14 @@
 .tableWrapper {
   overflow-x: auto;
-  margin-bottom: var(--space-xs);
+  margin-block-end: var(--space-xs);
   box-shadow: var(--sl-shadow-sm);
   border-radius: var(--border-radius);
 }
 
 .revShareTable .input.input {
   border: 0;
   border-radius: 0;
-  border-bottom: 1px solid;
+  border-block-end: 1px solid;
   padding: var(--space-3xs);
   transition: box-shadow 200ms ease-in;
   width: 100%;
@@ -17,7 +17,7 @@
 .revShareTable input[disabled].input.input {
   border: 0;
   border-radius: 0;
-  border-bottom: 1px dotted;
+  border-block-end: 1px dotted;
   cursor: not-allowed;
 }
 
@@ -30,7 +30,7 @@
 .percentCell input[type='number'].input {
   border: 0;
   border-radius: 0;
-  border-bottom: 1px solid;
+  border-block-end: 1px solid;
   width: 4em;
 }
 
@@ -52,7 +52,7 @@
 }
 
 .shareInputBtns {
-  margin-bottom: var(--space-m);
+  margin-block-end: var(--space-m);
 }
 
 .btn {
@@ -72,15 +72,15 @@
 }
 
 .importControls {
-  margin-top: var(--space-xs);
+  margin-block-start: var(--space-xs);
 }
 
 .importSharesButton.importSharesButton {
-  margin-left: var(--space-xs);
+  margin-inline-start: var(--space-xs);
 }
 
 .text {
-  margin-bottom: var(--space-s);
+  margin-block-end: var(--space-s);
 }
 
 .importWrapper textarea {
@@ -96,5 +96,5 @@
 }
 
 .revShareChart {
-  margin-bottom: var(--space-m);
+  margin-block-end: var(--space-m);
 }

src/components/pages/TopNav.astro

@@ -31,12 +31,10 @@
   .site-nav {
     display: flex;
     align-items: center;
-    padding-left: var(--space-s);
-    padding-right: var(--space-s);
+    padding-inline: var(--space-s);
     position: relative;
     max-width: 95rem;
-    margin-left: auto;
-    margin-right: auto;
+    margin-inline: auto;
   }
 
   .site-title {
@@ -58,15 +56,14 @@
   a {
     text-decoration: none;
     color: var(--sl-color-text);
-    padding-top: var(--space-xs);
-    padding-bottom: var(--space-xs);
+    padding-block: var(--space-xs);
   }
 
   .menu-toggle {
     border: 0;
     background: initial;
     padding: var(--space-xs) 0;
-    margin-left: auto;
+    margin-inline-start: auto;
   }
 
   .menu-icon {
@@ -119,7 +116,7 @@
     transform: rotate(-45deg);
   }
   .nav-link__github {
-    margin-left: auto;
+    margin-inline-start: auto;
     flex: none;
   }
 
@@ -146,8 +143,7 @@
 
     .nav-menu a {
       display: block;
-      padding-left: var(--space-xs);
-      padding-right: var(--space-xs);
+      padding-inline: var(--space-xs);
     }
   }
 

src/layouts/Base.astro

@@ -3,7 +3,7 @@ import i18next, { t, changeLanguage } from "i18next";
 import { HeadHrefLangs } from "astro-i18next/components";
 import TopNav from "../components/pages/TopNav.astro";
 import Footer from "../components/pages/Footer.astro";
-import '/node_modules/@interledger/docs-design-system/src/styles/green-theme.css';
+import '/node_modules/@interledger/docs-design-system/src/styles/teal-theme.css';
 import '../styles/webm.css';
 
 interface Props {
@@ -13,7 +13,7 @@ interface Props {
 }
 
 const canonicalURL = new URL(Astro.url.pathname, Astro.site);
-const { title = t("site.title"), description = t("site.description"), image = '/img/placeholder-social.png' } = Astro.props;
+const { title = t("site.title"), description = t("site.description"), image = '/img/wm-social.png' } = Astro.props;
 changeLanguage("en");
 ---
 <html lang={i18next.language} data-theme="light">

src/pages/index-beta_t8apO3.astro

@@ -0,0 +1,50 @@
+---
+import i18next, { t, changeLanguage } from "i18next";
+import Base from "../layouts/Base.astro";
+
+changeLanguage("en");
+
+const title = t("site.title");
+const description = t("site.description");
+---
+<Base title={title} description={description}>
+  <section class="hero">
+    <div class="heroContent">
+      <img
+        alt="Web Monetization Logo"
+        class="heroLogo"
+        src="/img/wm-logo--animated.svg"
+      />
+      <h2 class="heroHeading">Pay the Web forward</h2>
+    </div>
+  </section>
+</Base>
+
+<style>
+  /* Hero section styles */
+  .hero {
+    background-image: url("/img/bg-lines.svg"), url("/img/bg-tile.svg");
+    background-repeat: repeat-x, repeat;
+    background-size: 25em, 40%;
+    background-position: bottom, center;
+    padding-block-end: 0;
+    height: 50vh;
+    display: flex;
+  }
+
+  .heroContent {
+    margin: auto;
+    text-align: center;
+  }
+
+  .heroLogo {
+    max-width: 16em;
+    margin-block-end: var(--space-l);
+  }
+
+  .heroHeading {
+    font-size: var(--step-6);
+    line-height: 1.2;
+    color: var(--wm-accent);
+  }
+</style>