fix[Modified] UI Text Style Changed for Professional Look

public/index.html

@@ -57,7 +57,7 @@
     <!-- Open Graph / Facebook -->
     <meta property="og:type" content="website" />
     <meta property="og:url" content="https://react-native-elements.js.org/" />
-    <meta property="og:title" content="Playground 🚀 | React Native Elements" />
+    <meta property="og:title" content="Playground | React Native Elements" />
     <meta
       property="og:description"
       content="Exploring possibilities with React Native Elements"

src/containers/Drawer/index.jsx

@@ -17,7 +17,6 @@ import Toolbar from "@material-ui/core/Toolbar";
 import Typography from "@material-ui/core/Typography";
 import { Button, Container } from "@material-ui/core";
 import { makeStyles, useTheme } from "@material-ui/core/styles";
-
 import Navigation from "../Navigation";
 import { Link } from "react-router-dom";
 import { Components_Index } from "../Navigation";
@@ -92,7 +91,7 @@ function ResponsiveDrawer(props) {
     <div>
       <div style={{ padding: "0.5rem" }}>
         <Link to="/" onClick={() => handleDrawerToggle(false)}>
-          <Typography variant="h5">Playground <span role="img" aria-label="playground" >🚀</span></Typography>
+          <Typography variant="h5" style={{ fontStyle: "bold",'font-family': "aerial"}}>Playground</Typography>
         </Link>
       </div>
       <List>
@@ -126,20 +125,29 @@ function ResponsiveDrawer(props) {
       <AppBar position="fixed" className={classes.appBar}>
         <Toolbar>
           <IconButton
-            color="inherit"
+            color="primary"
             aria-label="open drawer"
             edge="start"
             onClick={handleDrawerToggle}
             className={classes.menuButton}
           >
-            <MenuIcon />
+            <MenuIcon style={{ color: "white" }}/>
           </IconButton>
           <Link to="/">
-            <Typography variant="h6" noWrap>
+            <Typography variant="h4" noWrap
+            //  style={{ fontStyle: "bold",'font-family': "Aerial"}}
+             style={{
+              marginLeft: "auto",
+              fontSize: "calc(1rem + 6 * ((100vw - 320px) / 680))",
+              fontStyle : "Bold",
+              marginLeft:"auto",
+              'font-family': "Palatino"
+            }}
+             >
               React Native Elements
             </Typography>
           </Link>
-          <div style={{ marginLeft: "auto" }}>
+          <div style={{ marginLeft: "auto" ,fontSize: "calc(1rem + 6 * ((100vw - 320px) / 680))"}}>
             <a href="https://reactnativeelements.com/" target="_blank" rel="noopener noreferrer">
               <Button color="inherit">Docs</Button>
             </a>

src/containers/Navigation/index.jsx

@@ -186,7 +186,7 @@ export default function App() {
         })}
         <Route exact path="/explore">
           <Helmet>
-            <title>Explore | Playground <span role="img" aria-label="playground">🚀</span> - React Native Elements</title>
+            <title>Explore Now| Playground <span role="img" aria-label="playground">🚀</span> - React Native Elements</title>
           </Helmet>
           <ExplorePage />
         </Route>

src/index.css

@@ -1,6 +1,6 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+  font-family: "Palatino",-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
     "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   -webkit-font-smoothing: antialiased;

src/pages/home/index.jsx

@@ -10,16 +10,19 @@ function HomePage() {
       <Grid container spacing={5} justify="center" alignItems="center">
         <Grid item md={6} sm={12}>
           <Typography
-            variant="h2"
+            variant="h1"
             style={{
-              fontSize: "calc(2rem + 6 * ((100vw - 320px) / 680))",
+              fontSize: "calc(4rem + 6 * ((100vw - 320px) / 680))",
+              fontStyle : "Bold",
+              'font-family': "Palatino"
             }}
           >
-            Exploring possibilities
+            Exploring 
+            Possibilities 
           </Typography>
           <Typography
-            variant="h6"
-            style={{ fontWeight: "200", fontStyle: "italic" }}
+            variant="h4"
+            style={{ fontWeight: "25", fontStyle: "bold",'font-family': "Palatino"}}
           >
             with React Native Elements
           </Typography>
@@ -32,12 +35,12 @@ function HomePage() {
       </Grid>
       <div style={{ width: "100%", textAlign: "center", marginBottom: "2rem" }}>
         <Link to="/explore">
-          <Button variant="outlined" color="secondary">
-            <Typography variant="h6">Explore Now <span role="img" aria-label="explore">🌇</span></Typography>
+          <Button variant="outlined" color="Primary">
+            <Typography variant="h6"> Explore Now</Typography>
           </Button>
         </Link>
       </div>
-      <Grid container spacing={1} justify="center">
+      <Grid clasname={'image'} container spacing={1} justify="center">
         {FEATURES_LIST.map((feature, idx) => {
           return (
             <Grid item xs={6} md={4} lg={3} key={idx}>
@@ -55,21 +58,40 @@ function HomePage() {
         style={{ justifyContent: "space-evenly" }}
       >
         <Grid item xs={12} md={7} lg={6}>
-          <Typography variant="h5">Why?</Typography>
-          <Typography>
+          <Typography variant="h5"
+           style={{
+            textAlign : "centre",
+            fontFamily: "Palatino"
+          }}>
+            Why?
+            </Typography>
+          <Typography
+          style={{
+            textAlign : "centre",
+            fontFamily: "Palatino"
+          }}>
             React Native Elements houses a lot of components, and these
             components come with a lot of customisation and tweaks via props.
             Sometimes the user gets confused and wastes a lot of time in
             achieving the desired result.
             <br />
             We came across a lot of such questions every day and sometimes user
-            reports bugs which aren't bugs but just improper
+            reports bugs which aren't bugs but just improper 
             implementation/usage of the components.
+
           </Typography>
         </Grid>
         <Grid item xs={12} md={5} lg={5}>
-          <Typography variant="h5">How it solves the problem?</Typography>
-          <Typography>
+          <Typography variant="h5"
+           style={{
+            textAlign : "centre",
+            fontFamily: "Palatino"
+          }}>How it solves the problem?</Typography>
+          <Typography  
+          style={{
+            textAlign : "centre",
+            fontFamily: "Palatino"
+          }}>
             With Playground, users can explore components and tweak them as per
             their use-case and generate production-ready code. Or they can
             explore new possibilities with the components and improve the