docs: update website style and examples

Author: usefulthink

examples/basic-map/src/app.tsx

@@ -1,4 +1,4 @@
-import React, {FunctionComponent} from 'react';
+import React from 'react';
 import {createRoot} from 'react-dom/client';
 
 import {APIProvider, Map} from '@vis.gl/react-google-maps';
@@ -9,9 +9,10 @@ const API_KEY = process.env.GOOGLE_MAPS_API_KEY as string;
 const App = () => (
   <APIProvider apiKey={API_KEY}>
     <Map
-      zoom={10}
-      center={{lat: 53.54992, lng: 10.00678}}
+      zoom={3}
+      center={{lat: 22.54992, lng: 0}}
       gestureHandling={'greedy'}
+      disableDefaultUI={true}
     />
     <ControlPanel />
   </APIProvider>

examples/basic-map/src/control-panel.tsx

@@ -3,9 +3,10 @@ import * as React from 'react';
 function ControlPanel() {
   return (
     <div className="control-panel">
-      <h3>Example Template</h3>
+      <h3>Basic Map</h3>
       <p>
-        Add a brief description of the example here and update the link below
+        The simplest example possible, just rendering a google map with some
+        settings adjusted.
       </p>
       <div className="source-link">
         <a

website/src/components/home/styled.js

@@ -63,18 +63,12 @@ export const GetStartedLink = styled.a`
   font-weight: bold;
   margin: 24px 0;
   padding: 0 4rem;
-  pointer-events: all;
   display: inline-block;
   text-decoration: none;
   transition: background-color 250ms ease-in, color 250ms ease-in;
   border: solid 2px var(--ifm-color-primary);
   color: var(--ifm-color-gray-200);
-  border-image: linear-gradient(
-    to right,
-    var(--ifm-color-gray-700) 0%,
-    var(--ifm-color-gray-400) 100%
-  );
-  border-image-slice: 2;
+
   &:visited {
     color: var(--ifm-color-gray-200);
   }

website/src/pages/index.jsx

@@ -7,7 +7,7 @@ import Layout from '@theme/Layout';
 const HeroExample = styled.div`
   background-image: url(images/hero.jpg);
   background-size: cover;
-  background-position: center;
+  background-position: top center;
   height: 100%;
 `;
 
@@ -36,7 +36,6 @@ const TextContainer = styled.div`
   hr {
     border: none;
     background: #e1e8f0;
-    height: 1px;
     margin: 24px 0 0;
     width: 32px;
     height: 2px;

website/src/styles.css

@@ -22,7 +22,7 @@
   --ifm-color-gray-700: #6F8196;
   --ifm-color-gray-800: #485668;
   --ifm-color-gray-900: #2B3848;
-  --ifm-color-black: #19202C
+  --ifm-color-black: #19202C;
   --code-font-size: 95%;
 }
 main .container {