Converted pngs -> jpeg

demo/client/App.tsx

@@ -4,13 +4,16 @@ import {
   createStyles, makeStyles, Typography, Container,
 } from '@material-ui/core';
 import { Element } from 'react-scroll';
+import { sizing } from '@material-ui/system';
 import MainContainer from './containers/MainContainer';
 import { BackdropProvider } from './context/BackDropContext';
 import GlobalNavBar from './components/GlobalNavBar';
 import LandingBody from './components/LandingBody';
 import TeamContainer from './containers/TeamContainer';
 import GettingStarted from './components/GettingStarted';
 import ParticlesBackdrop from './components/ParticlesBackdrop';
+import Footer from './components/Footer';
+
 
 const useStyles = makeStyles(() => createStyles({
   container: {
@@ -53,7 +56,7 @@ const App: FC = () => {
           >
             kafka-penguin
           </Typography>
-          <img alt="mainLogo" style={{ height: '30vh', paddingBottom: '5vh' }} src="/assets/penguin.svg" />
+          <img alt="mainLogo" style={{ height: '30vh', paddingBottom: '5vh' }} src="/assets/penguinCompressed.svg" />
           <Typography
             variant="h6"
             align="center"
@@ -77,6 +80,7 @@ const App: FC = () => {
         <Container className={classes.segment} component={Element} name="team">
           <TeamContainer />
         </Container>
+        <Footer height="25%" />
       </Container>
     </>
   );

demo/client/components/Footer.tsx

@@ -0,0 +1,126 @@
+import * as React from 'react';
+import { FC } from 'react';
+import {
+  createStyles, makeStyles, withStyles, AppBar, Toolbar, IconButton, Button, Icon,
+} from '@material-ui/core';
+import { Link } from 'react-scroll';
+import { sizing } from '@material-ui/system';
+
+const useStyles = makeStyles(() => createStyles({
+  root: {
+    width: '100vw',
+    padding: 0,
+    bottom: '0',
+  },
+  landingButtons: {
+    display: 'flex',
+    justifyContent: 'flex-end',
+  },
+  logo: {
+    alignSelf: 'flex-start',
+  },
+  button: {
+    margin: '1rem 1rem 1rem 1rem',
+  },
+  toolbarStyle: {
+    display: 'flex',
+    justifyContent: 'flex-end',
+    marginTop: '70px',
+  },
+}));
+
+const toolbarStyle = {
+  minHeight: '200px',
+};
+
+const Footer: FC = () => {
+  const classes = useStyles();
+  return (
+    <div className={classes.root}>
+      {/* <GlobalCss /> */}
+      {/* className={classes.toolbarStyle} */}
+      <AppBar position="sticky" style={toolbarStyle}>
+        <Toolbar
+          className={classes.toolbarStyle}
+       // style={classes.toolbarStyle}
+        >
+          <IconButton className={classes.button}>
+            <Icon
+              component={Link}
+              to="top"
+              activeClass="active"
+              spy
+              smooth
+            >
+              <img alt="navLogo" src="assets/penguinCompressed.svg" />
+            </Icon>
+          </IconButton>
+          <Button
+            className={classes.button}
+            component={Link}
+            to="features"
+            activeClass="active"
+            spy
+            offset={-75}
+            smooth
+            color="inherit"
+          >
+            Features
+          </Button>
+          <Button
+            className={classes.button}
+            component={Link}
+            to="demo"
+            activeClass="active"
+            spy
+            offset={-75}
+            smooth
+            color="inherit"
+          >
+            Demo
+          </Button>
+          <Button
+            className={classes.button}
+            component={Link}
+            to="getting started"
+            activeClass="active"
+            spy
+            offset={-75}
+            smooth
+            color="inherit"
+          >
+            Getting Started
+          </Button>
+          <Button
+            className={classes.button}
+            component={Link}
+            to="team"
+            activeClass="active"
+            spy
+            offset={-75}
+            smooth
+            color="inherit"
+          >
+            Team
+          </Button>
+          {/* <Button
+            className={classes.button}
+            color="inherit"
+            href="https://app.gitbook.com/@kafka-penguin-1/s/kafka-penguin/"
+          >
+            Docs
+          </Button>
+          <Button
+            className={classes.button}
+            color="inherit"
+            href="https://github.com/oslabs-beta/kafka-penguin"
+          >
+            Github
+          </Button> */}
+        </Toolbar>
+      </AppBar>
+    </div>
+  );
+};
+
+export default Footer;

demo/client/components/GlobalNavBar.tsx

@@ -36,7 +36,7 @@ const GlobalNavBar: FC = () => {
   return (
     <div className={classes.root}>
       <GlobalCss />
-      <AppBar>
+      <AppBar position="sticky">
         <Toolbar className={classes.landingButtons}>
           <IconButton className={classes.button}>
             <Icon
@@ -46,7 +46,7 @@ const GlobalNavBar: FC = () => {
               spy
               smooth
             >
-              <img alt="navLogo" src="/assets/penguin.svg" />
+              <img alt="navLogo" src="assets/penguinCompressed.svg" />
             </Icon>
           </IconButton>
           <Button

demo/client/containers/TeamContainer.tsx

@@ -22,6 +22,8 @@ const TeamContainer: FC = () => {
 
     },
   }));
+
+  //Add alt tags for images
   const timeo = {
     name: 'Timeo Williams',
     linkedIn: 'https://www.linkedin.com/in/timeowilliams/',
@@ -38,7 +40,7 @@ const TeamContainer: FC = () => {
     name: 'Ziyad Elbaz',
     linkedIn: 'https://www.linkedin.com/in/ziyadelbaz/',
     github: 'https://github.com/zelbaz946',
-    photo: '/assets/ziyad.png',
+    photo: '/assets/ziyad.jpeg',
   };
   const kushal = {
     name: 'Kushal Talele',

demo/client/index.html

@@ -4,10 +4,11 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="icon" type="image/svg+xml" href="/assets/penguin.svg">
-    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap" rel="stylesheet">
-    <link rel="stylesheet"
-    href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/atom-one-dark.min.css"/>
+    <link rel="icon" type="image/svg+xml" href="assets/penguinCompressed.svg">
+    <!-- <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap" rel="stylesheet"> -->
+
+    <link href="http://fonts.cdnfonts.com/css/nexa-bold" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/atom-one-dark.min.css"/>
     <title>kafka-penguin</title>
 </head>
 <body>

demo/client/kafka-penguin.xml

@@ -0,0 +1,18 @@
+//Add key: event-driven, all our names
+
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset
+      xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
+      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
+            http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
+<!-- created with Free Online Sitemap Generator www.xml-sitemaps.com -->
+
+
+<url>
+  <loc>https://www.kafka-penguin.io:443/</loc>
+  <lastmod>2021-04-15T02:55:01+00:00</lastmod>
+</url>
+
+
+</urlset>

demo/client/theme.ts

@@ -1,6 +1,6 @@
-import { createMuiTheme } from '@material-ui/core/styles';
-
-const theme = createMuiTheme({
+import { createTheme } from '@material-ui/core/styles';
+//import {createMuiTheme} to {createTheme}
+const theme = createTheme({
   // spacing: factor => `${0.25 * factor}rem`,
   palette: {
     primary: {
@@ -28,7 +28,8 @@ const theme = createMuiTheme({
   typography: {
     fontSize: 14,
     fontFamily: [
-      'Montserrat',
+      // 'Montserrat', 'Gotham',
+      'Nexa', 'sans-serif',
     ].join(','),
   },
 });

demo/package.json

@@ -13,7 +13,7 @@
     "lint": "tsc --noEmit && eslint src/**/*.ts{,x}",
     "tsc": "tsc -p tsconfig.json",
     "build": "tsc",
-    "dev": "concurrently \"cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js --hot --mode development\" \"nodemon server/server.ts\"",
+    "dev": "concurrently \"cross-env NODE_ENV=development webpack serve --config webpack.config.js --hot --mode development\" \"nodemon server/server.ts\"",
     "test": "jest --detectOpenHandles --testTimeout=20000"
   },
   "jest": {