improve website

src/App.tsx

@@ -76,10 +76,12 @@ function App() {
                     showing={showing === "equatives"}
                     handleChange={() => handleHiderClick("equatives")}
                 >
-                    <EPExplorer
-                        opts={textOptions}
-                        entryFeeder={entryFeeder}
-                    />
+                    <div className="mt-4" style={{ paddingBottom: "20px" }}>
+                        <EPExplorer
+                            opts={textOptions}
+                            entryFeeder={entryFeeder}
+                        />
+                    </div>
                 </Hider>
                 <Hider
                     label="Inflection Engine"

src/demo-components/InflectionDemo.tsx

@@ -94,7 +94,7 @@ function InflectionDemo({ opts }: {
             return false;
         }
     })();
-    return <div>
+    return <div style={{ paddingBottom: "20px" }}>
         <p>
             Produces the inflections and plural forms (Pashto and Arabic plurals where applicable) for words
         </p>

src/demo-components/SpellingDemo.tsx

@@ -41,12 +41,12 @@ function SpellingDemo({ opts, onChange }: {
     opts: T.TextOptions,
     onChange: (opts: T.TextOptions) => void,
 }) {
-    return <div>
+    return <div style={{ marginBottom: "100px" }}>
         <ul>
             <li>Converts text between Afghan and Pakistani spelling conventions</li>
             <li>Generates diacritics for Pashto script when given phonetic script along with Pashto script</li>   
         </ul>
-        <div className="d-block mx-auto card mb-3" style={{ maxWidth: "700px", background: "var(--closer)"}}>
+        <div className="d-block mx-auto card mb-3" style={{ maxWidth: "500px", background: "var(--closer)"}}>
             <div className="card-body">
                 <div className="row">
                     <div className="col-sm-6 mb-2">
@@ -141,17 +141,22 @@ function SpellingDemo({ opts, onChange }: {
                 </div>
             </div>
         </div>
-
-        <Examples opts={opts}>{[
-            {
-                p: "زما زوی مکتب ته ځي",
-                f: "zmaa zooy maktab ta dzee",
-            },
-            {
-                p: "دا ښه سړی دی",
-                f: "daa xu saRey dey",
-            },
-        ]}</Examples>
+        <div className="mt-4 text-center">
+            <Examples opts={opts}>{[
+                {
+                    p: "زما زوی مکتب ته ځي",
+                    f: "zmaa zooy maktab ta dzee",
+                },
+                {
+                    p: "دا ښه سړی دی",
+                    f: "daa xu saRey dey",
+                },
+                {
+                    p: "په دکان کې مې ډېر خلک لیدلي دي",
+                    f: "pu dUkaan ke me Der khalk leedulee dee",
+                },
+            ]}</Examples>
+        </div>
     </div>;
 }
 

src/demo-components/VPBuilderDemo.tsx

@@ -105,7 +105,7 @@ function VPBuilderDemo({ opts }: {
     const makeVerbLabel = (entry: T.DictionaryEntry): string => (
         `${entry.p} - ${clamp(entry.e, 20)}`
     );
-    return <>
+    return <div className="mt-4">
         <div className="d-block mx-auto card" style={{ maxWidth: "700px", background: "var(--closer)"}}>
             <div className="card-body">
                 <div className="row">
@@ -189,7 +189,7 @@ function VPBuilderDemo({ opts }: {
                 </div>
             </div>
         </div>
-        {v?.verb.entry && <div style={{ paddingBottom: "100px" }}>
+        {v?.verb.entry && <div style={{ paddingBottom: "20px" }}>
             <PhraseBuilder
                 handleLinkClick="none"
                 verb={v.verb as T.VerbEntry}
@@ -197,7 +197,7 @@ function VPBuilderDemo({ opts }: {
                 opts={opts}
             />
         </div>}
-    </>;
+    </div>;
 }
 
 export default VPBuilderDemo;