Hero component

src/components/Drawer.jsx

@@ -14,8 +14,8 @@ import PeopleOutlineRoundedIcon from "@mui/icons-material/PeopleOutlineRounded"
 import LocalMallRoundedIcon from "@mui/icons-material/LocalMallRounded"
 import ArticleRoundedIcon from "@mui/icons-material/ArticleRounded"
 
-import { NavLink } from "./styled"
-import theme from "./palette"
+import { NavLink } from "../assets/styles/styled"
+import theme from "../assets/styles/myTheme"
 
 const myPalette = theme.palette
 

src/components/Footer.jsx

@@ -11,8 +11,8 @@ import ListItem from "@mui/material/ListItem"
 import ListItemText from "@mui/material/ListItemText"
 
 import FormFooter from "./FormFooter"
-import { FooterContainer, NavLinkFooter } from "./styled"
-import myTheme from "./palette"
+import { FooterContainer, NavLinkFooter } from "../assets/styles/styled"
+import myTheme from "../assets/styles/myTheme"
 
 const myPalette = myTheme.palette
 

src/components/FormFooter.jsx

@@ -6,7 +6,7 @@ import { withStyles } from "@material-ui/core"
 
 import ContactButton from "./ContactButton"
 
-import theme from "./palette"
+import theme from "../assets/styles/myTheme"
 
 const myPalette = theme.palette
 

src/components/Hero.jsx

+import React from "react"
+
+import Box from "@mui/material/Box"
+import Typography from "@mui/material/Typography"
+import { makeStyles } from "@material-ui/core"
+
+import HeroBg from "../assets/images/hero-bg.png"
+import myTheme from "../assets/styles/myTheme"
+
+import ContactButton from "./ContactButton"
+
+const myPalette = myTheme.palette
+
+const useStyles = makeStyles((theme) => ({
+  container: {
+    height: "80vh",
+    width: "100%",
+    paddingRight: "25px",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "flex-end",
+    color: "#ffffff",
+    backgroundImage: `url(${HeroBg})`,
+    position: "relative",
+    backgroundSize: "cover",
+    backgroundRepeat: "no-repeat",
+    backgroundPosition: "center center"
+  },
+  highlighter: {
+    color: myPalette.secondary.main
+  }
+}))
+
+function Banner() {
+  const classes = useStyles()
+
+  return(
+    <>
+      <Box className={classes.container}>
+        <Typography
+          variant="h4"
+          component="h2"
+          align="right"
+          sx={{
+            width: "50%",
+            mb: 4
+          }}
+        >
+          Ayudamos a que las Empresas operen <span className={classes.highlighter}>digitalmente</span>, cumplan con las regulaciones, y <span className={classes.highlighter}>crezcan</span> sin aumentar personal
+        </Typography>
+        <ContactButton>
+          Contactar
+        </ContactButton>
+      </Box>
+    </>
+  )
+}
+
+export default Banner

src/components/Navbar.jsx

@@ -13,8 +13,8 @@ import {
 
 
 import Drawer from "./Drawer"
-import { NavLink } from "./styled"
-import theme from "./palette"
+import { NavLink } from "../assets/styles/styled"
+import theme from "../assets/styles/myTheme"
 
 const myPalette = theme.palette
 

src/layouts/MainLayout.jsx

 import * as React from "react"
+
 import Toolbar from "@mui/material/Toolbar"
 import CssBaseline from "@mui/material/CssBaseline"
-import Container from "@mui/material/Container"
+import Box from "@mui/material/Box"
 import PropTypes from "prop-types"
 
 import Navbar from "../components/Navbar"
@@ -17,15 +18,15 @@ export default function MainLayout({ children }) {
       <CssBaseline />
       <Navbar  />
       <Toolbar />
-      <Container 
+      <Box 
         sx={{
           display: "flex",
           flexDirection: "column",
-          minHeight: "100vh",
+          minHeight: "100vh"
         }}
       >
         { children }
-      </Container>
+      </Box>
       <Footer />
     </React.Fragment>
   )

src/views/Home.jsx

 import React from "react"
 
+import Hero from "../components/Hero"
+
 const Home = () => {
   return (
-    <div>Listo</div>
+    <div>
+      <Hero />
+    </div>
   )
 }