Merge pull request #35 from narbs91/adds-about-section

Adds blurb about what glosseta is

Author: narbs91

public/locales/en/common.json

@@ -1,5 +1,6 @@
 {
     "web3GlossaryHeading": "Web3 Glossary",
+    "glossetaDescription": "Glosseta is an open-source glossary meant to help people explore and learn the terminology behind web3",
 
     "searchInputGroupAriaLabel" : "Search Bar",
     "searchIconAriaLabel" : "Magnifying glass image",

src/pages/index.tsx

@@ -1,9 +1,17 @@
 import type { NextPage } from "next";
-import { HStack, VStack, Image, chakra, Heading } from "@chakra-ui/react";
+import {
+  HStack,
+  VStack,
+  Image,
+  chakra,
+  Heading,
+  Text,
+  Box,
+} from "@chakra-ui/react";
 import PageLayout from "./components/layout/page";
 import SearchBar from "./search/search-bar";
-import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
-import { useTranslation } from 'next-i18next';
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+import { useTranslation } from "next-i18next";
 
 const Home: NextPage = () => {
   const { t } = useTranslation();
@@ -13,11 +21,28 @@ const Home: NextPage = () => {
       <chakra.main>
         <VStack>
           <Image src="/glosseta.png" alt="Glosseta logo" width={300} />
-          <Heading padding={1} color="white">
-            {t('web3GlossaryHeading')}
+          <Heading as="h1" padding={1} color="white">
+            {t("web3GlossaryHeading")}
           </Heading>
           <HStack spacing={3}>
-            <SearchBar baseWidth={"80vw"} smWidth={"30vw"}/>
+            <Box width="100%" letterSpacing="wide">
+              <Text
+              textAlign="center"
+                padding={2}
+                fontSize={{ base: "xs", md: "sm" }}
+                color="white"
+              >
+                {t("glossetaDescription")}
+              </Text>
+            </Box>
+          </HStack>
+          <HStack spacing={3}>
+            <SearchBar
+              baseWidth={"80vw"}
+              smWidth={"50vw"}
+              mdWidth={"50vw"}
+              lgWidth={"30vw"}
+            />
           </HStack>
         </VStack>
       </chakra.main>
@@ -27,7 +52,7 @@ const Home: NextPage = () => {
 
 export const getStaticProps = async ({ locale }: { locale: string }) => ({
   props: {
-    ...(await serverSideTranslations(locale, ['common'])),
+    ...(await serverSideTranslations(locale, ["common"])),
   },
 });
 

src/pages/search/index.tsx

@@ -26,7 +26,7 @@ const SearchResults = ({
   if (isError) {
     return (
       <PageLayout>
-        <SearchBar baseWidth={"80vw"} smWidth={"50vw"} />
+        <SearchBar baseWidth={"80vw"} smWidth={"50vw"} mdWidth={"50vw"} lgWidth={"30vw"} />
         <chakra.main>
           <SimpleGrid
             columns={1}
@@ -47,7 +47,7 @@ const SearchResults = ({
   return (
     <>
       <PageLayout>
-        <SearchBar baseWidth={"80vw"} smWidth={"50vw"} />
+        <SearchBar baseWidth={"80vw"} smWidth={"50vw"} mdWidth={"50vw"} lgWidth={"30vw"} />
         <chakra.main>
           <SimpleGrid
             columns={1}

src/pages/search/search-bar.tsx

@@ -3,7 +3,12 @@ import { Input, InputGroup, InputLeftElement, HStack } from "@chakra-ui/react";
 import { useState, SetStateAction } from "react";
 import { useTranslation } from "next-i18next";
 
-const SearchBar = ({ baseWidth, smWidth }: any): JSX.Element => {
+const SearchBar = ({
+  baseWidth,
+  smWidth,
+  mdWidth,
+  lgWidth,
+}: any): JSX.Element => {
   const [searchTerm, setSearchTerm] = useState("");
   const { t } = useTranslation();
 
@@ -36,9 +41,19 @@ const SearchBar = ({ baseWidth, smWidth }: any): JSX.Element => {
                 color="black"
                 rounded="lg"
                 onChange={handleSearchTermChange}
-                width={{ base: baseWidth, sm: smWidth }}
+                width={{
+                  base: baseWidth,
+                  sm: smWidth,
+                  md: mdWidth,
+                  lg: lgWidth,
+                }}
                 type="search"
                 id="search"
+                placeholder="Search for a word i.e. web3"
+                _placeholder={{
+                  color: "gray.500",
+                  fontSize: { base: "sm", sm: "md" },
+                }}
                 onClick={(event) => {
                   event.currentTarget.scrollIntoView();
                 }}