change styling and add new section

Author: kerv14

docs/docusaurus.config.ts

@@ -4,7 +4,7 @@ import type * as Preset from '@docusaurus/preset-classic';
 
 const config: Config = {
   title: 'Postcodes.io',
-  tagline: 'Postcode & geolocation API for the UK',
+  tagline: 'Free, Open Source and based solely on Open Data',
   favicon: 'img/favicon.ico',
 
   // Set the production url of your site here

docs/src/components/Demos/index.tsx

@@ -135,7 +135,7 @@ export default function HomepageDemos(): JSX.Element {
     <section className={styles.features}>
       <div className={styles.container}>
         <div className={styles.header}>
-          <h2>API Endpoint & Methods</h2>
+          <h3>API Endpoint & Methods</h3>
           <select
             value={selectedDemo}
             onChange={(e) => setSelectedDemo(e.target.value)}

docs/src/components/Demos/styles.module.css

@@ -1,7 +1,6 @@
 .features {
   padding: 2rem 0;
   width: 100%;
-  margin-top: 100px;
 }
 
 .container {
@@ -43,8 +42,6 @@
   justify-content: center;
   align-items: center;
   margin: 50px 0 50px 0;
-  padding-bottom: 50px;
-  border-bottom: 1px solid #888;
 }
 
 .endpointContainer {
@@ -88,6 +85,11 @@
   margin-left: -10px;
 }
 
+.payload,
+.result {
+  text-align: left;
+}
+
 button {
   margin-left: auto;
   font-size: 1em;

docs/src/components/HomepageFeatures/index.tsx

@@ -65,6 +65,14 @@ export default function HomepageFeatures(): JSX.Element {
   return (
     <section className={styles.features}>
       <div className="container">
+        <div className={clsx(styles.intro, "row")}>
+          <p>
+            A short paragraph about postcodes.io and something like built by
+            developers for developers. e.g Postcodes.io is an open-source
+            project maintained by Ideal Postcodes, offering a free resource for
+            developers to query UK postcode data via a JSON HTTP API.{" "}
+          </p>
+        </div>
         <div className="row">
           {FeatureList.map((props, idx) => (
             <Feature key={idx} {...props} />

docs/src/components/HomepageFeatures/styles.module.css

@@ -1,9 +1,15 @@
+.intro {
+  padding: 0 100px 0 100px;
+  margin-bottom: 80px;
+  text-align: center;
+}
+
 .features {
   display: flex;
   align-items: center;
   padding: 2rem 0;
   width: 100%;
-  margin-top: 100px;
+  margin: 180px 0;
 }
 
 .featureSvg {

docs/src/pages/index.module.css

@@ -10,6 +10,30 @@
   overflow: hidden;
 }
 
+.section {
+  margin: 180px 0;
+  text-align: center;
+}
+
+.sectionAlt {
+  margin: 180px 0;
+  text-align: center;
+  background-color: var(--ifm-color-emphasis-100);
+  padding: 80px 100px;
+}
+
+.section h2,
+.sectionAlt h2 {
+  font-size: 2.5rem;
+  margin-bottom: 5rem;
+}
+
+.section h3,
+.sectionAlt h3 {
+  font-size: 1.5rem;
+  margin-bottom: 2rem;
+}
+
 @media screen and (max-width: 996px) {
   .heroBanner {
     padding: 2rem;

docs/src/pages/index.tsx

@@ -50,7 +50,66 @@ export default function Home(): JSX.Element {
       <HomepageHeader />
       <main>
         <HomepageFeatures />
-        <HomepageDemos />
+        <section className={styles.section}>
+          <div className="container">
+            <div className="row">
+              <div className="col">
+                <h2 className="text--center">How to use Postcodes.io</h2>
+              </div>
+            </div>
+            <div className="row">
+              <div className="col">
+                <h3 className="text--center">Use Our Endpoints </h3>
+                <p className="text--center">
+                  Easiest and quickest way to get started is to use our public,
+                  hosted endpoints to query data directly. No installation
+                  required
+                </p>
+              </div>
+              <div className="col">
+                <h3 className="text--center">Self-host the Service </h3>
+                <p className="text--center">
+                  For complete control over the data and environment, just clone
+                  the repository and run it on your own servers. SQL?
+                </p>
+              </div>
+              <div className="col">
+                <h3 className="text--center">Contribute or Fork </h3>
+                <p className="text--center">
+                  We love community input! Tailor Postcodes.io to your needs by
+                  adding features or modify the functionality.
+                </p>
+              </div>
+            </div>
+            <div className="row" style={{ marginTop: "3rem" }}>
+              <div className="col text--center">
+                <HomepageDemos />
+                <Link
+                  className="button button--primary button--lg"
+                  to="/docs/overview"
+                >
+                  View the Documentation
+                </Link>
+              </div>
+            </div>
+          </div>
+        </section>
+        <section className={styles.sectionAlt}>
+          <div className="container">
+            <div className="row">
+              <div className="col col--6 col--offset-3">
+                <h3 className="text--center">
+                  When You Need More Than Open Data
+                </h3>
+                <p className="text--center">
+                  Postcodes.io is a free, open source API for postcode data.
+                  It's a great way to get started with postcode data, but if you
+                  need more, we recommend using a commercial postcode service.
+                </p>
+              </div>
+            </div>
+          </div>
+        </section>
       </main>
     </Layout>
   );