dropdown

Author: kerv14

docs/src/components/Demos/getGeocode.tsx

@@ -47,7 +47,6 @@ const GetGeocode: React.FC<PostcodeLookupProps> = ({
   return (
     <div className={styles.container}>
       <div className={styles.endpointContainer}>
-        <h3 className={styles.endpointLabel}>{headingText}</h3>
         <div className={styles.requestContainer}>
           <span className={styles.httpMethod}>GET</span>
           <p className={styles.request}>{endpointTemplate}?lon=</p>

docs/src/components/Demos/getPostcode.tsx

@@ -40,7 +40,6 @@ const GetPostcode: React.FC<PostcodeLookupProps> = ({
   return (
     <div className={styles.container}>
       <div className={styles.endpointContainer}>
-        <h3 className={styles.endpointLabel}>{headingText}</h3>
         <div className={styles.requestContainer}>
           <span className={styles.httpMethod}>GET</span>
           <p className={styles.request}>{endpointTemplate}</p>

docs/src/components/Demos/postMethod.tsx

@@ -37,7 +37,6 @@ const PostMethod: React.FC<PostMethodProps> = ({
   return (
     <div className={styles.container}>
       <div className={styles.endpointContainer}>
-        <h3 className={styles.endpointLabel}>{headerText}</h3>
         <div className={styles.requestContainer}>
           <span className={styles.httpMethod}>POST</span>
           <p className={styles.request}>{endpoint}</p>

docs/src/pages/index.module.css

@@ -34,10 +34,46 @@
   margin-bottom: 2rem;
 }
 
+.comparisonTable {
+  width: 100%;
+  margin: 0 auto;
+}
+
+.comparisonTable th {
+  padding: 1rem;
+  text-align: center;
+  font-size: 1.2rem;
+  border: none;
+  }
+
+.comparisonTable td {
+  padding: 1.5rem 1rem;
+  text-align: center;
+  border: none;
+  }
+
+.comparisonTable tr {
+  border: none;
+}
+
+.comparisonTable tr td:first-child {
+  text-align: left;
+  font-weight: bold;
+}
+
 @media screen and (max-width: 996px) {
   .heroBanner {
     padding: 2rem;
   }
+
+  .comparisonTable {
+    font-size: 0.9rem;
+  }
+
+  .comparisonTable td,
+  .comparisonTable th {
+    padding: 1rem 0.5rem;
+  }
 }
 
 .btnContainer {

docs/src/pages/index.tsx

@@ -110,6 +110,69 @@ export default function Home(): JSX.Element {
             </div>
           </div>
         </section>
+        <section className={styles.section}>
+          <div className="container">
+            <div className="row">
+              <div className="col">
+                <h2 className="text--center">
+                  Here&apos;s why developers upgrade
+                </h2>
+              </div>
+            </div>
+            <div className="row">
+              <div className="col">
+                <table className={styles.comparisonTable}>
+                  <thead>
+                    <tr>
+                      <th></th>
+                      <th>Postcodes.io</th>
+                      <th>Ideal Postcodes</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td>Coverage</td>
+                      <td>Mainland UK</td>
+                      <td>Mainland UK + additional British Isles coverage</td>
+                    </tr>
+                    <tr>
+                      <td>Data Updates</td>
+                      <td>Updated periodically as Ordnance Survey & ONS data becomes public</td>
+                      <td>Licensed partner of royal mail and other data sources with daily updates</td>
+                    </tr>
+                    <tr>
+                      <td>Scale</td>
+                      <td>No rate limits. Great for prototypes, small/medium projects</td>
+                      <td>Capacity for high-volume lookups and critical applications</td>
+                    </tr>
+                    <tr>
+                      <td>Reliability</td>
+                      <td>Sporadically maintained</td>
+                      <td>High availability, and 99.99% uptime guarantee</td>
+                    </tr>
+                    <tr>
+                      <td>Support</td>
+                      <td>Self-serve docs and community support</td>
+                      <td>Account access, priority technical support and SLAs available</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+            <div className="row" style={{ marginTop: '3rem' }}>
+              <div className="col text--center">
+                <a
+                  className="button button--primary button--lg"
+                  href="https://ideal-postcodes.co.uk"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  Explore Ideal Postcodes
+                </a>
+              </div>
+            </div>
+          </div>
+        </section>
       </main>
     </Layout>
   );