Add cards to usage landing pages (#97)

# Description

Adds cards to landing pages under the usage section. Organization,
wording and the order of the cards can be changed according to the
review.

## Type of change
- [x] Fixes or improves existing content

# References
Closes #87

## Final checklist:
- [x] My PR is the minimum possible work for the desired functionality

Author: melissawm

.circleci/config.yml

@@ -0,0 +1,64 @@
+# Use the latest 2.1 version of CircleCI pipeline process engine.
+# See: https://circleci.com/docs/2.0/configuration-reference
+version: 2.1
+
+# Orbs are reusable packages of CircleCI configuration that you may share across projects, enabling you to create encapsulated, parameterized commands, jobs, and executors that can be used across multiple projects.
+# See: https://circleci.com/docs/2.0/orb-intro/
+orbs:
+  # The python orb contains a set of prepackaged CircleCI configuration you can use repeatedly in your configuration files
+  # Orb commands and jobs help you with common scripting around a language/tool
+  # so you dont have to copy and paste it everywhere.
+  # See the orb documentation here: https://circleci.com/developer/orbs/orb/circleci/python
+  python: circleci/python@1.5.0
+
+# Define a job to be invoked later in a workflow.
+# See: https://circleci.com/docs/2.0/configuration-reference/#jobs
+jobs:
+  build-docs: # This is the name of the job, feel free to change it to better match what you're trying to do!
+    # These next lines defines a Docker executors: https://circleci.com/docs/2.0/executor-types/
+    # You can specify an image from Dockerhub or use one of the convenience images from CircleCI's Developer Hub
+    # A list of available CircleCI Docker convenience images are available here: https://circleci.com/developer/images/image/cimg/python
+    # The executor is the environment in which the steps below will be executed - below will use a python 3.10.2 container
+    # Change the version below to your required version of python
+    docker:
+      - image: cimg/python:3.10.2
+    # Checkout the code as the first step. This is a dedicated CircleCI step.
+    # The python orb's install-packages step will install the dependencies from a Pipfile via Pipenv by default.
+    # Here we're making sure we use just use the system-wide pip. By default it uses the project root's requirements.txt.
+    # Then run your tests!
+    # CircleCI will report the results back to your VCS provider.
+    steps:
+      - checkout
+      - run:
+          name: Install qt libs + xvfb
+          command: sudo apt-get update && sudo apt-get install -y xvfb libegl1 libdbus-1-3 libxkbcommon-x11-0 libxcb-icccm4 libxcb-image0 libxcb-keysyms1 libxcb-randr0 libxcb-render-util0 libxcb-xinerama0 libxcb-xinput0 libxcb-xfixes0 x11-utils
+
+      - run:
+          name: Install python dependencies
+          # app-dir: ~/project/package-directory/  # If you're requirements.txt isn't in the root directory.
+          command: |
+            python -m venv venv
+            . venv/bin/activate
+            python -m pip install --upgrade pip
+            python -m pip install -r requirements.txt
+      - run:
+          name: Clone main repo
+          command: git clone git@github.com:napari/napari.git napari
+      - run:
+          name: Install napari-dev
+          command: |
+            . venv/bin/activate
+            python -m pip install -e napari/".[pyqt,dev]"
+      - run:
+          name: Build docs
+          command: |
+            . venv/bin/activate
+            xvfb-run --auto-servernum make docs-build GALLERY_PATH=../napari/examples/
+
+# Invoke jobs via workflows
+# See: https://circleci.com/docs/2.0/configuration-reference/#workflows
+workflows:
+  sample: # This is the name of the workflow, feel free to change it to better match your workflow.
+    # Inside the workflow, you define the jobs you want to run.
+    jobs:
+      - build-docs

.gitpod.yml

@@ -0,0 +1,10 @@
+# This configuration file was automatically generated by Gitpod.
+# Please adjust to your needs (see https://www.gitpod.io/docs/introduction/learn-gitpod/gitpod-yaml)
+# and commit this file to your remote git repository to share the goodness with others.
+
+# Learn more from ready-to-use templates: https://www.gitpod.io/docs/introduction/getting-started/quickstart
+
+tasks:
+  - init: make
+
+

docs/guides/layers.md

@@ -1,3 +1,4 @@
+(layers-glance)=
 # Layers at a glance
 
 [Layers](napari.layers) are the basic viewable objects that can be added to a

docs/tutorials/annotation/index.md

@@ -1,5 +1,6 @@
+(annotation)=
 # Annotation
 
-This section contains tutorials showing how to annoate images and videos using the napari points, labels, or shapes layers.
+This section contains tutorials showing how to annotate images and videos using the napari points, labels, or shapes layers.
 
 * [Annotating videos with napari](annotate_points)

docs/tutorials/fundamentals/getting_started.md

@@ -1,3 +1,4 @@
+(getting-started)=
 # Getting started with napari
 
 Welcome to the getting started with **napari** tutorial!

docs/tutorials/fundamentals/viewer.md

@@ -11,6 +11,7 @@ kernelspec:
   name: python3
 ---
 
+(viewer-tutorial)=
 # napari viewer tutorial
 
 +++

docs/tutorials/index.md

@@ -5,6 +5,38 @@ These tutorials will help you explore the main usage modes and methods of
 napari, and target people who want to use napari. If you are also interested
 in contributing to napari then please check out [the Community page](../community/index).
 
+::::{grid}
+:::{grid-item-card} Annotation
+:link: annotation
+:link-type: ref
+
+How to annotate images and videos using the napari points, labels, or shapes layers
+:::
+
+:::{grid-item-card} Processing
+:link: processing
+:link-type: ref
+
+Data processing with napari
+:::
+::::
+
+::::{grid}
+:::{grid-item-card} Segmentation
+:link: segmentation
+:link-type: ref
+
+Segmentation labeling with napari
+:::
+
+:::{grid-item-card} Tracking
+:link: tracking
+:link-type: ref
+
+How to work with object tracking data and how to format it for display as a napari tracks layer.
+:::
+::::
+
 ## Improving the tutorials
 
 Our tutorials are hosted on [the napari Github repository](https://github.com/napari/napari).

docs/tutorials/processing/index.md

@@ -1,3 +1,4 @@
+(processing)=
 # Processing
 
 This section contains tutorials for data processing.

docs/tutorials/segmentation/index.md

@@ -1,3 +1,4 @@
+(segmentation)=
 # Segmentation
 
 This section contains tutorials for segmentation [labeling](../../howtos/layers/labels).

docs/tutorials/start_index.md

@@ -4,15 +4,44 @@ The following documents will give you an overview of how to install and use
 napari. For more detailed use-cases, check out the [napari tutorials](./index)
 or [How-to guides](../howtos/index).
 
-- [napari quick start](./fundamentals/quick_start): This tutorial is for napari
-first-timers, to give them a quick glance of what napari does, and give it a try
-right away.
-- [How to install napari on your machine](./fundamentals/installation): This
-guide will teach you how to do a clean install of napari and launch the viewer.
-- [Getting started with napari](./fundamentals/getting_started): This tutorial
-will teach you all the different ways to launch napari.
-- [napari viewer tutorial](./fundamentals/viewer): This tutorial will teach you
-about the napari viewer, including how to use its graphical user interface (GUI)
+::::{grid}
+:::{grid-item-card} napari quick start
+:link: napari-quick-start
+:link-type: ref
+
+A quick glance of what napari does aimed at first-timers.
+:::
+::::
+
+::::{grid}
+:::{grid-item-card} How to install napari
+:link: installation
+:link-type: ref
+
+How to do a clean install of napari and launch the viewer.
+:::
+
+:::{grid-item-card} Getting started
+:link: getting-started
+:link-type: ref
+
+This tutorial will teach you all the different ways to launch napari.
+:::
+::::
+
+::::{grid}
+:::{grid-item-card} napari viewer tutorial
+:link: viewer-tutorial
+:link-type: ref
+
+This tutorial will teach you about the napari viewer, including how to use its graphical user interface (GUI)
 and how the data within it is organized.
-- [Layers at a glance](../guides/layers): An overview of the napari *Layers*,
-the basic viewable objects that can be added to a viewer.
+:::
+
+:::{grid-item-card} Layers at a glance
+:link: layers-glance
+:link-type: ref
+
+An overview of the napari *Layers*, the basic viewable objects that can be displayed on the canvas.
+:::
+::::