latest updates on hero section

site/components/Layout.js

@@ -15,6 +15,12 @@ export default function Layout({ children, title='' }) {
         <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🚀</text></svg>" />
         <meta charSet="utf-8" />
         <meta name="viewport" content="initial-scale=1.0, width=device-width" />
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
+        <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans&display=swap" rel="stylesheet" />
+        <link rel="preload" href="/fonts/Restora/Restora.ttf" as="font" crossOrigin="" />
+        <link rel="preload" href="/fonts/Restora/RestoraBold.ttf" as="font" crossOrigin="" />
+        <link rel="preload" href="/fonts/Restora/RestoraExtraLight.otf" as="font" crossOrigin="" />
       </Head>
       <Nav />
       <main>

site/components/Nav.js

@@ -12,7 +12,7 @@ function classNames(...classes) {
 
 export default function Nav() {
   return (
-    <Disclosure as="nav" className="bg-white shadow">
+    <Disclosure as="nav" className="bg-[#4a4e7d] shadow">
       {({ open }) => (
         <>
           <div className="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
@@ -29,15 +29,15 @@ export default function Nav() {
                 </Disclosure.Button>
               </div>
               <div className="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
-                <div className="flex-shrink-0 flex items-center">
+                <div className="flex-shrink-0 flex items-center text-[#d0d9dc]">
                   <Link href="/">
                     <a>{siteConfig.title}</a>
                   </Link>
                 </div>
                 <div className="hidden sm:ml-6 sm:flex sm:space-x-8">
                   {/* Current: "border-indigo-500 text-gray-900", Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" */}
-                  {navLinks.map((item) => (
-                    <Link href={item.href}>
+                  {navLinks.map((item,i) => (
+                    <Link key={i} href={item.href}>
                       <a
                         key={item.name}
                         href={item.href}
@@ -59,8 +59,8 @@ export default function Nav() {
           <Disclosure.Panel className="sm:hidden">
             <div className="pt-2 pb-4 space-y-1">
               {/* Current: "bg-indigo-50 border-indigo-500 text-indigo-700", Default: "border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700" */}
-              {navLinks.map((item) => (
-                <Link href={item.href}>
+              {navLinks.map((item,i) => (
+                <Link key={i} href={item.href}>
                   <a
                     key={item.name}
                     href={item.href}

site/pages/home.js

@@ -7,9 +7,9 @@ export default function Home(props) {
           <div className="lg:py-24">
             <h1 className="mt-4 text-4xl tracking-tight font-extrabold text-white sm:mt-5 sm:text-6xl lg:mt-6 xl:text-6xl">
               <span className="block">Making Sense of</span>
-              <span className="block text-indigo-400">Web3 (&amp; Crypto)</span>
+              <span className="block text-[#0cca4a]">Web3 (&amp; Crypto)</span>
             </h1>
-            <p className="mt-3 text-base text-gray-300 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
+            <p className="mt-3 font-serif text-base text-gray-300 sm:mt-5 sm:text-xl lg:text-lg xl:text-xl">
               Web3 is a huge phenomenon but it can be hard to make sense of. We're here to help with introductions to key concepts and in-depth exploration of the claims for its concrete social and economic impact.
             </p>
             <div className="mt-10 sm:mt-12">
@@ -29,7 +29,7 @@ export default function Home(props) {
                   <div className="mt-3 sm:mt-0 sm:ml-3">
                     <button
                       type="submit"
-                      className="block w-full py-3 px-4 rounded-md shadow bg-indigo-500 text-white font-medium hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-300 focus:ring-offset-gray-900"
+                      className="block w-full py-3 px-4 rounded-md shadow bg-[#0aae41] text-white font-medium hover:bg-[#0cca4a] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-300 focus:ring-offset-gray-900"
                     >
                       Get Updates
                     </button>
@@ -44,7 +44,7 @@ export default function Home(props) {
             {/* Illustration taken from Lucid Illustrations: https://lucid.pixsellz.io/ */}
             <img
               className="w-full lg:absolute lg:inset-y-0 lg:left-0 lg:h-full lg:w-auto lg:max-w-none"
-              src="/img/undraw_digital_currency_qpak.svg"
+              src="/img/skribbl.svg"
               alt=""
             />
           </div>

site/tailwind.config.js

@@ -1,14 +1,22 @@
+const defaultTheme = require("tailwindcss/defaultTheme");
+
 module.exports = {
-  mode: 'jit',
-  purge: ['./pages/**/*.{js,ts,jsx,tsx,md,mdx}', './components/**/*.{js,ts,jsx,tsx}'],
+  mode: "jit",
+  purge: [
+    "./pages/**/*.{js,ts,jsx,tsx,md,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
+  ],
   darkMode: false, // or 'media' or 'class'
   theme: {
-    extend: {},
+    extend: {
+      fontFamily: {
+        nunito: ["Nunito Sans", ...defaultTheme.fontFamily.sans],
+        serif: ["Restora", ...defaultTheme.fontFamily.serif],
+      },
+    },
   },
   variants: {
     extend: {},
   },
-  plugins: [
-    require('@tailwindcss/typography')
-  ],
-}
+  plugins: [require("@tailwindcss/typography")],
+};