The following fixes to fonts should be made:

• Increase the smallest font size in the technical specifications section by one size
• Increase the smallest font size in the "why use Raster Vision" section by one size
• The bolded text in the "Why Use Raster Vision" and header are too chunky. We should experiment with the imported Poppins font weights to get those to look closer to the designs. This is a "nice to have" fix.

This issue is to complete the easy fixes for accessibility and SEO and come up with a plan for the more difficult tasks. These tasks include:

• Make internal buttons (like those for the repeatable configurations section) buttons
• Make the external buttons (like the "Explore documentation" button in "How it Works") links, not buttons
• All images should have descriptive alt tags
• Add description meta tag to the head tag
• Any other issues listed here

The more difficult task involves rearranging for a well-structured and logical dom. This issue includes exploring how this restructure would work with Tailwind, getting a sense of what will be involved, and writing another issue to complete it.

We should make the following edits based on feedback from the Raster Vision team:

• "Build your custom pipeline" has a link to Groundwork. I think https://docs.rastervision.io/en/latest/framework/index.html would be a better choice.
• "Based on open source data" has a link to Groundwork. I think https://docs.rastervision.io/en/latest/framework/examples.html might be a better choice because the examples page mentions the different open source datasets used to generate the images on the website.
• "Start training with Groundwork" should be replaced with "Start labeling with Groundwork"

This section can largely be built off of the existing responsive structure; however, this will need to include the addition of the icons. This can either be done by integrating Font Awesome or by using the icons available with the other assets in Google Drive. It will also likely include some edits to spacing.

The majority of the site is screen reader friendly, except that the hero component has two issues:

• The typewriter effect makes the experience of selecting the hero title unpleasant; for a example, the title "forecasting rip currents" sounds like "f-f-f-f-forecasting rip currents". We should hide the typewritten title from screen readers and add a screen reader only version.
• The buttons to move back and forth among the slides currently can't be used via keyboard controls.

Both of these sections can be built off of the existing responsive structure, though they will both need edits to spacing. The "How it Works" section will require the incorporation of the "data input" and "deployment" gifs. This will also require the addition of the "Start training with GroundWork" and "Explore documentation" linked buttons.

About

How it Works

The following revisions need to be made to the hero component:

• We should add a new first slide that says "deep learning on satellite and aerial imagery" and is paired with the second slider image of crops
• Make typing effect slightly faster
• The hero text box should be increased to full width on mobile

Blocked until all other Phase 4 issues are complete. This issue is to look through the app and fix any lingering places where the site doesn't match the designs, as well as work out funkiness in the screen sizes that are not represented in the designs. A few such tasks:

• The linked buttons on the hero component are too far from the navigation buttons on mobile
• Shrink the "Why Use Raster Vision" headline on mobile and possibly small screens
• h4 always appears in the same color so that color should be defined in the class instead of applied individually
• text-lightGray and text-black opacity-60 are the same thing; we should pick one and standardize
• The various gray text colors should be renamed and reorganized as gray-100, gray-200, etc.
• The header is currently bg-background-off-white but should be bg-white
• The background colors of the "why use Raster Vision" and industry sections should be switched because the background of the gifs is white and looks weird on monitors that show difference between the white vs. off-white coloration. This should include an update to the color of opacity bars on the rolodex animation so they match the new background color
• Add the following industries to the rolodex: Agriculture, Oceans & Water, Artificial intelligence, Climate adaptation, Energy transition, Supply Chain
• The content of the header should stay within the max content width container like the rest of the site
• Move any hover:cursor-pointer classes applied individually into a button class if possible
• We should optimize Tailwind for production by removing all unused CSS classes, which should just involve a quick edit to ci.yml. See more details here
• As explained in PR #35, test the contact form once its Hubspot counterpart has been completed

Depends on task #1. Once a framework and UI library have been chosen, we should implement them and install any other relevant dependencies to set up the basis of the app. If we will be using Docker and STRTA, this example will be a helpful resource.

This card includes pairing with the UX designer on the implementation of the frameworks and dependencies and seeking feedback from a senior engineer.

This task is to create the header and footer components and add responsive behavior, as seen below. While the footer can just be built using the existing footer that was added as a part of #5, the header will be a bit trickier, as it appears conditionally either when the user is on mobile or on desktop scrolled below the hero component.

Header, Desktop

Header, Mobile

Footer, Desktop

Footer, Mobile

Paste this code as high in the of the page as possible:

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-PS9MX6L');</script>
<!-- End Google Tag Manager -->

Additionally, paste this code immediately after the opening tag:

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PS9MX6L"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

There are 3 important decisions that need to be made as a part of this task:

• Decide on a framework, such as NextJS, Jekyll, Gatsby, etc.
• Decide on a UI library, such as Tailwind CSS, Chakra UI, etc.
• Decide whether we would like to add Docker and use any STRTA

This task should include finding and researching examples of other projects that use these tools to determine which would be the best fit.

This task is to build the base hero component, including the images and slider cycle buttons, and add the carousel effect to cycle through the relevant header images and matching text. This should involve researching third-party libraries or CSS code snippets to achieve the carousel. It does not include adding in any of the other visual elements, external linked buttons, or typewriting animation.

This task can be built off of the existing responsive structure. It should include constructing and figuring out where/how to connect the contact form, building out the "how can we help?" linked sections, and adding in the background "let's chat" graphic.

Follow up to #43. Right now the hierarchy of heading tags is ordered according to style, rather than in an hierarchical fashion. This issue is to reorganize these in a way that makes them screen reader accessible. This includes moving the current definitions of h1, h2, h3, and h4 as declared in input.css and into new, separate classes and then replacing the current header values with those outlined in the designs and applying the new classes made above to keep the style as is.

We should build the base page structure on which the individual sections can be built. This includes setting a max content width and verifying the mobile responsiveness of the page elements.

Tailwind supports providing alternatives to animations when the user has the reduced motion setting on. We should utilize that by providing alternatives to the hero typewriting and industry section rolodex effects. @gatesgodin will also provide a static alternative to the gifs in the "How it Works" section.

Depends on task #6. This task is to add in remaining hero component visuals, including:

• Raster Vision logo
• Cut out overlay over image
• External linked buttons to documentation, discussions, and repo

We need to set up CI via GitHub Actions to deploy the production site to GitHub pages. This project will not include a staging environment. This task should include adding deployment information and/or instructions to the project README and seeking feedback from a senior engineer.

Potentially helpful resources:

• https://medium.com/front-end-weekly/ci-cd-with-github-actions-to-deploy-on-github-pages-73e225f8f131
• https://docs.github.com/en/actions/learn-github-actions/understanding-github-actions

The following revisions need to be made to the industry section:

• Add a line break after "beyond" in the headline
• Make the rolodex spin faster
• Investigate methods of making the rolodex larger on medium and small screens. They currently shrink on those screens because the longer industry names like "Climate Adaptation" overflow into the text box and it can't wrap without breaking the animation. While it doesn't seem worth putting in the time to implement the animation in another way that would allow for wrapping, we should consider alternative methods of keeping the rolodex the same size without breaking on smaller screens. This is a "nice to have" fix, so depending on the time involved, we may need to make a new issue for addressing later if we have the time.

The "chip classification" image in the "quick and repeatable configurations" section currently looks like it jumps on selection because it is slightly smaller than the other 2 images. We should try to fix it so that the images all stay a static distance from the section below and there is no jumping effect.

Depends on task #2 . We should update the repo README to include more information about the project and reflect spin up instructions and any STRTA we’ve chosen to include.

We need to add a banner announcing the acquisition to the top and update the references to Azavea and links to Azavea's website to Element84, instead. All updates listed in this Google Doc.

This section can be built off of the existing responsive structure, though will likely include edits to spacing. The icons will not be separate from their boxes and will just be imported as normal pictures; these are available with all the other assets in Google Drive.

This task is to build the text and image piece of the repeatable configurations section. The existing responsive structure will provide a very basic foundation; beyond that, this should include setting up the text-to-image relationship and buttons with which to select a scenario. It does not include the dynamic code snippet and "view full documentation" button, which will be addressed in issue #21.

Right now the copyright at the bottom of the page still says 2022 but should have updated automatically to 2023. We should make that update automatic.

Right now the hero images look great with good internet, but do not load well on slow internet. This is worsened by the fact that the images keep changing, resulting in the carousel text getting out of sync with the loading pictures. To start, we should replace all the hero images with progressive JPG versions, exporting at around 50% quality (though it might be possible to go even lower).

The above fix will help but will likely not be enough, so we should also experiment with further ways of increasing the load speed. Some possibilities include:

• Try to preload the hero images up front so that they're at least partially loaded before they're displayed
• Since the hero component is the first thing users see, those images are more important than the others. We may be able to increase speed a bit by lazy-loading on all other images on the webpage.
• Add smaller versions of images for smaller screens to minimize image compression (punted from issue #8)

During the process of deployment, @BryanQuigley noticed that the Last Name field in the contact form overflows onto the text (see screenshot). This is a problem on at least Firefox, but not Chrome.

This task is to implement the typewriting animation on the hero component's header text. This should include researching third-party libraries or CSS code snippets that can achieve this effect.

This section can be built off of the existing responsive structure, though it will also include the addition of the "Build your custom pipeline" linked button. The tricky part of this task is to implement the "rolodex" effect on the industry list animation. This task should include researching third-party libraries or CSS code snippets that can achieve this effect.

Relies on task #20. We need to somehow add a code snippet that changes with the scenario selection to the repeatable configurations section. The snippet does not need to expand, but we should clarify whether we want it to be copy-and-paste-able. If it should allow for interaction, this task should either include researching third-party libraries or code snippets that can achieve this effect. This should also include adding the "view full documentation" button.

EDIT: These do not need to be copy-and-paste-able and should just be images. Code snippets are here:

• semantic segmentation: https://docs.rastervision.io/en/latest/usage/overview.html#as-a-framework
• object detection: https://github.com/azavea/raster-vision/blob/master/rastervision_pytorch_backend/rastervision/pytorch_backend/examples/object_detection/xview.py
• chip classification: https://github.com/azavea/raster-vision/blob/master/rastervision_pytorch_backend/rastervision/pytorch_backend/examples/chip_classification/spacenet_rio.py

This is a card for tracking the tasks that should be accomplished as a part of the final deployment (credit for task list to @BryanQuigley). Additional cards may be added if necessary.

• Alert the Raster Vision team about possible downtime
• Switch DNS to point to GitHub pages, see reference here
• Enable GitHub pages to serve site from custom domain
• Wait for certs to be generated
• Fix anything that breaks
• Turn off old Netlify site
• Archive old site's repo

We should make sure the hero component is mobile responsive. This task is to add this responsiveness by adding the following adjustments on small screens:

• Rotate the cut out overlay
• Stack all elements
• Shrink header text
• Remove the Raster Vision logo (this will be added back in via the header in a later issue)
• Add in smaller version of header images to minimize the need for image compression

The following links/on click behavior should be added:

• The following links should be added to their respective library names in the technical specifications section:
  • https://aws.amazon.com/s3/
  • https://aws.amazon.com/batch/
  • https://pytorch.org/
  • https://pytorch.org/vision/stable/index.html
  • https://albumentations.ai/
  • https://rasterio.readthedocs.io/en/latest/
  • https://shapely.readthedocs.io/en/stable/index.html
  • https://gdal.org/
  • https://numpy.org/
• Link "open source data" to https://docs.rastervision.io/en/0.20/index.html in the "quick and repeatable configurations" section
• Clicking the Raster Vision logo in the header should return to the top of the page

Right now the site rebuilds and deploys to the live version when a new PR is created, a test branch is pushed, or a branch is merged into master. This task is to better protect the live version by limiting the rebuild only to test branches and merges.