guildxyz / agora-landing Goto Github PK

This section will contain a Three.js "bubble" animation (similar to the one on the top of the page), and possibly some mouse interactions. The final design will be available in Figma soon.

We should update the text animation in the Hero section, and also tweak the UI on smaller screen sizes.

I analyzed the website in terms of SEO, and made a list of areas where we could improve it:

SEO

• robots.txt is invalid (actually we don't even have one), actually this is the biggest issue with the site right now
• There's no H1 tag, we should have one on every page
• We have a proper title and meta description on the page, but it's the same for all pages (/, /explorer, /tools, and /about)
• The links on the footer are a little bit small on mobile (not the text, but the "tap area" - so we could just apply a little bit padding on them, or something like that)

Performance

• Set an explicit width and height on image elements (and later on animations).
• We can optionally compress a little bit the images for better performance.
  Note: will apply these changes in the animations PR!

Accessibility

• We should add an alt name for the logo

Best practices

• Add rel="noopener" or rel="noreferrer" to external links (like the links to app.agora.space on the hero section, the links in the Future Plans section, and the links on the footer

Optional - Note: will add an analytics tool in a separate PR.

• Add Google Analytics & Microsoft Clarity or maybe Plausible (?) to the site, so we can analyze how users interact with our website

We should use webp image format if possible, and provide properly sized images for different screen sizes on the landing page. It would improve the performance, and search engines "will love our website".

Resources:

• https://www.w3schools.com/tags/tag_picture.asp
• https://web.dev/uses-webp-images
• https://medium.com/front-end-weekly/html-picture-tag-in-practice-png-and-webp-formats-5a3fc51b5998

We could add or generate a sitemap.xml file for the landing page, so the bots can index our pages more easily.

Resources:

• https://developers.google.com/search/docs/advanced/sitemaps/overview
• https://developers.google.com/search/docs/advanced/sitemaps/build-sitemap
• https://r-bt.com/learning/sveltekit-sitemap/ (Note: we might not need to do it this way, since we only have a couple of pages under our main domain)

Create custom 4xx and 5xx error pages, as designed in Figma.

Update the landing page & add new sections (as designed in Figma)

• Completely remove "Explorer" page
• "Tools" page redesign
• Update "Team" section & add "Advisors" section