Skip to content

feat: home page redesign #996

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Mar 21, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 25 additions & 0 deletions main/.vitepress/config.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -443,5 +443,30 @@ export default defineConfig({
},
},
},
footer: {
copyright: `© ${new Date().getFullYear()} Agoric Systems Operating Company. All Rights Reserved.`,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is this copyright year computed at build time? or does it rely on the client to compute it?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe this happens at build time

},
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',
},
],
},
});
30 changes: 0 additions & 30 deletions main/.vitepress/styles/index.styl
Original file line number Diff line number Diff line change
Expand Up @@ -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

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was a light pass - seems there's more to remove like .home-section, .youtube-embed

.dark
.page
h1
Expand Down
183 changes: 78 additions & 105 deletions main/index.md
Original file line number Diff line number Diff line change
@@ -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>
13 changes: 13 additions & 0 deletions main/public/bld-logo-color.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading