Something went wrong. Try again.
Website hub for the atmosphere community, aggregating posts, events, regional, and more
Something went wrong. Try again.
2.6 kB · 99 lines
Astro
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100---const highlights = [ { title: "Discourse Forum", description: "Discuss ideas, proposals, and community projects with fellow builders.", href: "https://discourse.atprotocol.community", linkText: "Join the conversation →", }, { title: "Community Fund", description: "Supporting projects, events, and infrastructure across the Atmosphere.", href: "https://opencollective.com/atprotocoldev/", linkText: "Learn more →", }, { title: "ATmosphereConf", description: "The community conference for people building on AT Protocol.", href: "https://atmosphereconf.org", linkText: "See the schedule →", }, { title: "Discord", description: "Chat with community members, ask questions, and share what you're building.", href: "https://discord.atprotocol.dev/", linkText: "Join the Discord →", },];---
<section class="section section--alt" aria-labelledby="involved-heading"> <div class="container"> <h2 id="involved-heading" class="section__title">Get involved</h2> <div class="grid-2 highlights-grid"> { highlights.map((highlight) => ( <a class="highlight-card card" href={highlight.href} rel="noopener noreferrer" target="_blank" > <h3>{highlight.title}</h3> <p>{highlight.description}</p> <span class="highlight-card__cta">{highlight.linkText}</span> </a> )) } </div> </div></section>
<style> .section--alt { background: var(--muted); }
.highlight-card { display: flex; flex-direction: column; gap: var(--space-sm); color: inherit; text-decoration: none; transition: border-color 0.15s ease, transform 0.15s ease; } .highlight-card:hover { border-color: var(--card-border-hover, var(--primary)); } .highlight-card:hover .highlight-card__cta { text-decoration: underline; text-underline-offset: 2px; } .highlight-card:focus-visible { outline: 2px solid var(--ring, var(--primary)); outline-offset: 2px; } .highlight-card h3 { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; } .highlight-card p { font-size: var(--text-xs); color: var(--foreground-muted); line-height: var(--leading-normal); } .highlight-card__cta { margin-top: auto; color: var(--primary); font-size: var(--text-xs); font-weight: 500; }
.highlights-grid { margin-top: var(--space-xl); }</style>