Merge branch 'main' of https://github.com/life-itself/web3 into main

site/components/Home/Features.js

@@ -26,7 +26,7 @@ export default function Features() {
           <div className="mt-12 sm:mt-16 lg:mt-0">
             <div className="pl-4 -mr-48 sm:pl-6 md:-mr-16 lg:px-0 lg:m-0 lg:relative lg:h-full">
               <img
-                className="w-full rounded-xl shadow-xl ring-1 ring-black ring-opacity-5 lg:absolute lg:left-0 lg:h-full lg:w-auto lg:max-w-none"
+                className="w-full lg:absolute lg:left-0 lg:h-full lg:w-auto lg:max-w-none"
                 src="https://res.cloudinary.com/ds7qslkd0/image/upload/v1646739494/Web3/undraw_mind_map_re_nlb6_qh0jel.svg"
                 alt="Discover"
               />

site/components/Home/Hero.js

@@ -24,8 +24,9 @@ export function Hero() {
                       <input
                         name="email"
                         type="email"
+                        required="required"
                         placeholder="Enter your email"
-                        className="block w-full px-4 py-3 rounded-md border-0 text-base text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-300 focus:ring-offset-gray-900"
+                        className="block w-full px-4 py-3 rounded-md border-0 text-base dark:text-white dark:placeholder-gray-200 text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-300 focus:ring-offset-gray-900"
                       />
                       <input type="hidden" name="form-name" value="get-updates" />
                     </div>
@@ -69,4 +70,4 @@ export function Hero() {
       </div>
     </div>
   )
-}
+}

site/pages/_app.js

@@ -11,9 +11,9 @@ import MdxPage from '../components/MDX'
 import * as gtag from '../lib/gtag'
 
 function MyApp({ Component, pageProps }) {
+  const router = useRouter()
   // Google Analytics
   if (siteConfig.analytics) {
-    const router = useRouter()
     useEffect(() => {
       const handleRouteChange = (url) => {
         gtag.pageview(url)
@@ -25,23 +25,31 @@ function MyApp({ Component, pageProps }) {
     }, [router.events])
   }
   // end Google Analytics
+
+  const pageTitle = (
+    router.pathname == "/"
+      ? "home"
+        // convert slug to title
+      : router.pathname.split("/").pop().replace(/-/g, " ")
+  ) // capitalize first char of each word
+    .replace(/(^\w{1})|(\s{1}\w{1})/g, (str) => str.toUpperCase());
   
   return (
     <ThemeProvider attribute="class" defaultTheme="dark">
       <DefaultSeo
-        titleTemplate={'%s | ' + siteConfig.title}
+        titleTemplate={"%s | " + siteConfig.title}
         defaultTitle={siteConfig.title}
         description={siteConfig.description}
         {...siteConfig.nextSeo}
       />
       {/* Global Site Tag (gtag.js) - Google Analytics */}
-      {siteConfig.analytics &&
+      {siteConfig.analytics && (
         <Script
           strategy="afterInteractive"
           src={`https://www.googletagmanager.com/gtag/js?id=${siteConfig.analytics}`}
         />
-      }
-      {siteConfig.analytics &&
+      )}
+      {siteConfig.analytics && (
         <Script
           id="gtag-init"
           strategy="afterInteractive"
@@ -56,16 +64,16 @@ function MyApp({ Component, pageProps }) {
             `,
           }}
         />
-      }
-      <Layout title={pageProps.title ?? siteConfig.title}>
-        { 
-          Component.layout == 'js'
-            ? <Component {...pageProps} />
-            : <MdxPage children={{ Component, pageProps }} />
-        }
+      )}
+      <Layout title={pageTitle}>
+        {Component.layout == "js" ? (
+          <Component {...pageProps} />
+        ) : (
+          <MdxPage children={{ Component, pageProps }} />
+        )}
       </Layout>
     </ThemeProvider>
-  )
+  );
 }
 
       // if this is a markdown page use this layout by default ...