Merge pull request #996 from Agoric/pc/home-page-redesign

feat: home page redesign

Author: dckc

main/.vitepress/config.mjs

@@ -443,5 +443,30 @@ export default defineConfig({
         },
       },
     },
+    footer: {
+      copyright: `© ${new Date().getFullYear()} Agoric Systems Operating Company. All Rights Reserved.`,
+    },
+    socialLinks: [
+      {
+        icon: 'discord',
+        ariaLabel: 'Discord',
+        link: 'https://agoric.com/discord',
+      },
+      {
+        icon: 'github',
+        ariaLabel: 'GitHub',
+        link: 'https://github.com/Agoric/agoric-sdk',
+      },
+      {
+        icon: 'twitter',
+        ariaLabel: 'Twitter',
+        link: 'https://twitter.com/agoric',
+      },
+      {
+        icon: 'youtube',
+        ariaLabel: 'YouTube',
+        link: 'https://www.youtube.com/@Agoric',
+      },
+    ],
   },
 });

main/.vitepress/styles/index.styl

@@ -157,36 +157,6 @@ div[class*="language-"].secondary
 div[class*="language-"].secondary.style3 pre
   background-color bisque
 
-.page
-  max-width: 1280px
-  margin: 0 auto
-  padding: 20px 0 100px 0
-
-  h1, h3
-    margin-top: 1em
-    margin-bottom: 0.25em
-    font-weight: 600
-    line-height: 1.25
-  h1
-    color: #2c3e50
-    font-size: 2.2rem
-  h3
-    font-size: 1.35rem
-  a
-    color: #d73252
-
-  @media (max-width: 1280px)
-    padding: 1.5rem
-
-  @media (max-width: 768px)
-    h1
-      font-size: 1.75rem
-    h3
-      font-size: 1.1rem
-    a
-      color: rgb(171, 35, 40)
-      font-weight: 500
-
 .dark
   .page 
     h1

main/index.md

@@ -1,112 +1,85 @@
 ---
-####
-# YAML section setting up the home page
-# run `yarn docs:dev` at any time to start local dev server and access
-# website at localhost:8080 by default
-####
-layout: page
-footer: Apache-2.0 Licensed | Copyright © 2023 - Agoric
----
+layout: home
+
+title: Agoric
+titleTemplate: Secured, Distributed JavaScript
+
+hero:
+  name: Agoric
+  text: JavaScript-Powered Smart Contract Platform
+  tagline: Secure, adaptable, and approachable. Discover the blockchain framework tailored for JavaScript developers.
+  actions:
+    - theme: brand
+      text: Get Started
+      link: /guides/getting-started/
+    - theme: alt
+      text: View on GitHub
+      link: https://github.com/agoric/agoric-sdk
+  image:
+    src: /bld-logo-color.svg
+    alt: Agoric
+
+features:
+  - icon: 🛠️
+    title: Seamless DX
+    details: Develop smart contracts using the world’s most popular programming language.
+    link: /guides/getting-started/
+
+  - icon: ⚙️
+    title: Composable Smart Contracts
+    details: Build smart contracts and create digital assets. Partition risk and leverage safety properties.
+    link: /guides/zoe/
 
-<div class="page">
-  <div class="home-banner">
-    Receive our latest tutorials, webinar invites, and much more! <a href="https://agoric.com/dev-newsletter" style="color: white;text-decoration: underline;">Join our newsletter</a>
-  </div>
+  - icon: 🔒
+    title: Built-In Security
+    details: Express access control using familiar patterns of objects.
+    link: /guides/js-programming/
 
-  <div class="home-section">
-    <HomeButtonHeader
-      title="Agoric documentation"
-      text="The Agoric platform makes it possible to write safer smart contracts with your JavaScript skill set."
-    />
-    <HomeButtonRow
-      title1="What's Agoric"
-      text1="Learn about Agoric and its JavaScript platform"
-      link1="https://www.agoric.com"
-      title2="Getting Started"
-      text2="Set up your environment and start building apps"
-      link2="/guides/getting-started/"
-      title3="Contract Framework"
-      text3="See the safety properties of our Zoe Framework"
-      link3="/guides/zoe/"
-      title4="Token Protocol"
-      text4="Understand the ins and outs of Agoric's Electronic Rights Transfer Protocol (ERTP)"
-      link4="/guides/ertp/"
-      title5="Samples"
-      text5="Look through our smart contract and dapp examples"
-      link5="/guides/zoe/contracts/"
-      title6="Bounties"
-      text6="A rotating list of incentivized bounties to grow our platform"
-      link6="https://components.agoric.com/bounties/open-bounties"
-      />
-  </div>
+  - icon: 🌐
+    title: Interoperable Ecosystem
+    details: Leverage IBC for instant, cross-chain asset interoperability.
+    link: /guides/platform/
 
-  <div class="home-section">
-    <HomeButtonHeader
-      title="Blockchain resources"
-      text="The tools your need to get the job done."
-    />
-    <HomeButtonRow
-      title1="Block Explorer"
-      text1="View transactions across the Agoric chain"
-      link1="https://bigdipper.live/agoric"
-      title2="Keplr Wallet"
-      text2="Sign transactions with the most popular wallet in Cosmos"
-      link2="https://www.keplr.app/download"
-      title3="Component Library"
-      text3="Pre-built smart contracts for DeFi, NFTs, and cross-chain!"
-      link3="https://components.agoric.com/"
-      title4="Cosmos SDK"
-      text4="Our battle-tested consensus mechanism"
-      link4="https://docs.cosmos.network/"
-      title5="IBC"
-      text5="The protocol ensuring Agoric is interoperable with 60+ chains"
-      link5="https://ibc.cosmos.network/main"
-      title6="Integrations"
-      text6="Browse through our catalogue of integrations"
-      link6="/guides/integration/chain-integration"
-      />
-    </div>
+  - icon: 💬
+    title: Discord
+    details: Meet our developer community and make friends.
+    link: https://agoric.com/discord
+
+  - icon: 💡
+    title: Github Discussions
+    details: Ask questions. Share ideas.
+    link: https://github.com/Agoric/agoric-sdk/discussions
+
+  - icon: 🕘
+    title: Office Hours
+    details: Join us for open discussion, whether you're just getting started or deep into the details.
+    link: https://github.com/Agoric/agoric-sdk/wiki/Office-Hours
+
+  - icon: 🐦
+    title: Twitter
+    details: Catch up on all things Agoric product, events, and more.
+    link: https://twitter.com/agoric
+---
 
-  <div class="home-section">
-    <HomeButtonHeader
-        title="Ready to learn more?"
-        text="Once you've completed the Getting Started, here are a few next steps."
-      />
-    <h3 style="margin-top: 0em;">
-      <a href="/guides/js-programming/hardened-js">Learn the basics of HardenedJS</a>
-    </h3>
-    It's JavaScript with the safety you expect - see why MetaMask uses it to safely run their Snaps technology for 30M+ customers.
-    <h3>
-      <a href="/guides/zoe/">See the safety properties of our Zoe Framework</a>
-    </h3>
-    From Offer Safety to the POLA, the Zoe Framework protects devs (and users) while writing your smart contract logic.
-  </div>
+<style>
+:root {
+  --vp-home-hero-name-color: var(--vp-c-brand-1);
+  --vp-home-hero-image-background-image: linear-gradient(-45deg, #e84b62 50%, #464646 50%);
+  --vp-home-hero-image-filter: blur(44px);
+  .dark {
+    --vp-home-hero-image-background-image: linear-gradient(-45deg, #f7aab1 50%, #7c7c7c 50%);
+  }
+}
 
-  <div class="home-section">
-    <HomeButtonHeader
-        title="Videos"
-        text="Check out our primer on writing programmable smart contracts in JavaScript!"
-      />
-    <div>
-  <iframe class="youtube-embed" src="https://www.youtube-nocookie.com/embed/Em32hztid_k?si=3bfO6P4vEWV-qoKd&amp;controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
-    </div>
-  </div>
+@media (min-width: 640px) {
+  :root {
+    --vp-home-hero-image-filter: blur(56px);
+  }
+}
 
-  <div class="home-section">
-    <HomeButtonHeader
-        title="Connect with us"
-        text=""
-      />
-    <HomeButtonRow
-      title1="Office Hours"
-      text1="Workshop ideas with our engineers every Wednesday!"
-      link1="https://agoric.com/office-hours"
-      title2="Discord"
-      text2="Meet our developer community and make friend <3"
-      link2="https://agoric.com/discord"
-      title3="Twitter"
-      text3="Catch up on all things Agoric product, events, and more"
-      link3="https://twitter.com/agoric"
-    />
-  </div>
-</div>
+@media (min-width: 960px) {
+  :root {
+    --vp-home-hero-image-filter: blur(68px);
+  }
+}
+</style>