style(help): apply updated design to Docs landing page

cl/api/templates/v2_docs.html

@@ -0,0 +1,124 @@
+{% extends "new_base.html" %}
+{% load extras %}
+
+{% block title %}APIs and Bulk Data – CourtListener.com{% endblock %}
+{% block og_title %}APIs and Bulk Data – CourtListener.com{% endblock %}
+{% block description %}Legal APIs and Bulk Data from Free Law Project, a 501(c)(3) nonprofit.{% endblock %}
+{% block og_description %}Legal APIs and Bulk Data from Free Law Project, a 501(c)(3) nonprofit.{% endblock %}
+
+{% block content %}
+<c-layout-without-navigation>
+  <c-layout-without-navigation.section id="about">
+    <h1>CourtListener APIs, Webhooks, and Bulk Legal&nbsp;Data</h1>
+    <p>We currently have five major services available on CourtListener:</p>
+    <ul class="list-decimal space-y-2 ml-4">
+      <li>If you need the fastest and most granular form of our data, we <a class="underline" href="{% url "replication_docs" %}">recommend our database replication service</a>. This unique service provides an isolated logical replica of our PostgreSQL database that you can query with SQL.</li>
+      <li>If you are interested in obtaining large quantities of our data, we <a class="underline" href="{% url "bulk_data_index" %}">recommend using bulk data files</a>. These provide CSV files of our case law, people, and financial disclosures databases.</li>
+      <li>If you require less data or if you want to crawl PACER, we <a class="underline" href="{% url "rest_docs" %}">recommend using our REST APIs</a>.</li>
+      <li>If you want to subscribe to events on CourtListener, we recommend our <a class="underline" href="{% url "webhooks_docs" %}">webhooks service</a>, which works as a bi-directional API &mdash; It can push data to you.</li>
+      <li>Finally, we also <a class="underline" href="https://free.law/data-consulting/">offer custom data services</a> and custom bulk file creation, with hourly and project-based rates.</li>
+    </ul>
+  </c-layout-without-navigation.section>
+
+  <c-layout-without-navigation.section id="comparison">
+      <c-data-table
+      safe
+      caption="Comparison of different methods for accessing CourtListener data."
+      :columns="[
+        {
+          'label': 'Learn More About…',
+          'field': 'learn_more',
+        },
+        {
+          'label': 'Update Speed',
+          'field': 'update_speed',
+        },
+        {
+          'label': 'Data Fidelity',
+          'field': 'data_fidelity',
+        },
+        {
+          'label': 'Query Flexibility',
+          'field': 'query_flexibility',
+        },
+        {
+          'label': 'Learning Curve',
+          'field': 'learning_curve',
+        },
+        {
+          'label': 'Setup',
+          'field': 'setup',
+        },
+      ]"
+      :rows="[
+        {
+          'learn_more': '<a href=\'{% url "replication_docs" %}\' class=\'btn btn-outline\'>Replication</a>',
+          'update_speed': 'Instant',
+          'data_fidelity': 'Complete',
+          'query_flexibility': 'Unlimited<br>SQL Queries',
+          'learning_curve': 'Short',
+          'setup': 'Complex',
+        },
+        {
+          'learn_more': '<a href=\'{% url "bulk_data_index" %}\' class=\'btn btn-outline\'>Bulk Data</a>',
+          'update_speed': 'Slow',
+          'data_fidelity': 'Great',
+          'query_flexibility': 'None',
+          'learning_curve': 'Short',
+          'setup': 'None',
+        },
+        {
+          'learn_more': '<a href=\'{% url "rest_docs" %}\' class=\'btn btn-outline\'>REST APIs</a>',
+          'update_speed': 'Fast',
+          'data_fidelity': 'Good',
+          'query_flexibility': 'Filters &amp;<br> Joins',
+          'learning_curve': 'Longer',
+          'setup': 'None',
+        },
+        {
+          'learn_more': '<a href=\'{% url "webhooks_docs" %}\' class=\'btn btn-outline\'>Webhooks</a>',
+          'update_speed': 'Instant',
+          'data_fidelity': 'Good',
+          'query_flexibility': 'Subscribe to Events',
+          'learning_curve': 'Medium',
+          'setup': 'Complex',
+        },
+        {
+          'learn_more': '<a href=\'https://free.law/data-consulting/\' class=\'btn btn-outline\'>Data Services</a>',
+          'update_speed': 'Engage with Free Law Project, the non-profit behind CourtListener and RECAP, for the most flexibility.',
+          'data_fidelity': '',
+          'query_flexibility': '',
+          'learning_curve': '',
+          'setup': '',
+        },
+      ]"
+    ></c-data-table>
+  </c-layout-without-navigation.section>
+
+  <c-layout-without-navigation.section id="pricing">
+    <h2>Pricing</h2>
+    <p>We make these services available according to means-based pricing. This allows a variety of researchers, journalists, and organizations to access this information.</p>
+    <p>The goal of these charges is to provide ongoing support for these APIs and for <a href="https://free.law" target="_blank" class="underline">Free Law Project</a>, the 501(c)(3) non-profit supporting CourtListener and RECAP. We hope you'll agree that that is an important cause.</p>
+    <p>Depending on what makes sense for the organization and the project, support for Free Law Project can take the form of monthly subscriptions, one time fees for service, or revenue share agreements.</p>
+  </c-layout-without-navigation.section>
+
+  <c-layout-without-navigation.section id="pride">
+    <h2>We're Proud of our Data</h2>
+    <p>For over a decade, we have worked to make the data in CourtListener the best on the open Web.</p>
+    <p>Among the minor enhancements we make on a regular basis, we've made significant improvements to our data that you won't find in other sources:</p>
+    <ul class="list-decimal space-y-2 ml-4">
+      <li>When we import other data sources, we clean them up. For example, we <a class="underline" href="https://free.law/2011/08/25/second-series-of-federal-reporter-from-1950-to-1993-now-on-courtlistener/">manually corrected</a> more than ten thousand items from Public.Resource.Org, and we have cleaned up or fixed more than one-million items in <a class="underline" href="https://case.law/">Harvard's Caselaw Access Project</a>.</li>
+      <li>We've <a class="underline" href="https://free.law/2011/05/25/updated-scotus-dates/">added exact dates from the library of congress</a> to our collection of older Supreme Court cases, enhancing thousands of cases beyond what's available anywhere else.</li>
+      <li>We use open records requests and manual data entry to build our datasets of judges and financial disclosures.</li>
+    </ul>
+    <p>You can learn more about the data that we have on our coverage pages.</p>
+    <p><a href="{% url "coverage" %}" class="btn btn-primary">Coverage Details</a></p>
+  </c-layout-without-navigation.section>
+
+  <c-layout-without-navigation.section id="privacy">
+    <h2>Privacy of Court Materials</h2>
+    <p>As is <a class="underline" href="{% url "terms" %}#removal">explained in our removal policy</a>, we block public search engines from indexing many of the cases available on our website. We do this to protect vulnerable people.</p>
+    <p>If you plan to use this data on the Internet, carefully consider how you will protect these people and their privacy wishes. The simplest way to do that is to use the <code>blocked</code> flag that's available on most objects.</p>
+  </c-layout-without-navigation.section>
+</c-layout-without-navigation>
+{% endblock %}

cl/assets/templates/cotton/layout_without_navigation/index.html

@@ -0,0 +1,13 @@
+<div
+  {{ attrs }}
+  x-data="intersect"
+  class="w-full flex max-md:flex-wrap md:gap-5 relative"
+  data-intersect-id-attr="intersectTarget"
+  data-active-item-classes="font-semibold border-l-2 border-l-primary-600 text-primary-600"
+  data-inactive-item-classes="font-normal border-l border-l-greyscale-200"
+>
+
+  <article id="article" class="flex flex-col gap-11 items-start max-md:pt-4 max-w-full md:max-w-[calc(100%)] [&_section]:flex [&_section]:flex-col [&_section]:gap-4">
+    {{ slot }}
+  </article>
+</div>

cl/assets/templates/cotton/layout_without_navigation/section.html

@@ -0,0 +1,9 @@
+<c-vars id class="" ></c-vars>
+
+<section
+    x-intersect.margin.-20%.0.-65%.0="show"
+    id="{{ id }}"
+    class="max-w-[--padded-full-width] w-full {{ class }}"
+>
+    {{ slot }}
+</section>