Add common components

dedaldino3d · Nov 8, 2020 · 11466ba · 11466ba
1 parent d71627f
commit 11466ba
Show file tree

Hide file tree

Showing 9 changed files with 313 additions and 20 deletions.
diff --git a/src/components/Header/index.js b/src/components/Header/index.js
@@ -0,0 +1,100 @@
+import React from "react";
+import { FaHome, FaInfo, FaPhoneAlt, FaServer } from "react-icons/fa";
+import { Link } from "react-router-dom";
+import styled from "styled-components";
+
+const Container = styled.header`
+  display: flex;
+  overflow: hidden;
+  justify-content: space-between;
+  align-items: center;
+  height: 80px;
+  z-index: 1000;
+  position: fixed;
+  background: var(--white);
+  width: 100%;
+  padding: 0px 20px;
+  top: 0;
+  box-shadow: var(--bs-ud);
+  font-weight: 600;
+
+  & > a:first-of-type {
+    color: var(--blue-bolder);
+    font-weight: 600;
+    max-width: 100px;
+    display: flex;
+    align-items: center;
+    & img {
+      width: 40px;
+    }
+    & > span {
+      font-size: 1.5em;
+      font-weight: 600;
+      line-spacing: 1.4;
+      margin-left: 5px;
+      color: var(--blue-60);
+      span {
+        color: var(--green-500);
+      }
+    }
+  }
+`;
+
+const SubHeader = styled.div`
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  align-contnet: center;
+  max-width: 400px;
+  flex: 1 1 auto;
+  height: 100%;
+  & > a {
+    padding: 10px;
+    height: 100%;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    svg {
+      margin-right: 8px;
+    }
+    :hover {
+      background: var(--blue-bolder);
+      transition: all 500ms ease-in-out;
+      color: var(--white);
+      cursor: pointer;
+    }
+  }
+`;
+
+const Header = (props) => {
+  return (
+    <Container>
+      <Link to="/">
+        <img src={require("../../images/sky-logo.jpg")} alt="Skyline Logo" />
+        <span>
+          Sky<span>line</span>
+        </span>
+      </Link>
+      <SubHeader>
+        <Link to="/">
+          <FaHome />
+          Home
+        </Link>
+        <Link to="/services">
+          <FaServer />
+          Serviços
+        </Link>
+        <Link to="/about">
+          <FaInfo />
+          Sobre nós
+        </Link>
+        <Link to="/info">
+          <FaPhoneAlt />
+          Contacto
+        </Link>
+      </SubHeader>
+    </Container>
+  );
+};
+
+export default Header;
diff --git a/src/components/Styles/index.js b/src/components/Styles/index.js
@@ -196,6 +196,7 @@ export default createGlobalStyle`
 		--bs-post: 0 1px 3px 0 rgba(60, 64, 67, 0.05), 0 4px 8px 3px rgba(60, 64, 67, 0.15);
 		--bs-ud: 0 0 1px 1px rgba(20,23,28,.1), 0 3px 1px 0 rgba(20,23,28,.1);
 		--border: #dadce0;
+		--font-streched: "MatterSQ", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	}
 
 	ul {

diff --git a/src/components/UpTop/index.js b/src/components/UpTop/index.js
@@ -1,25 +1,21 @@
-import React from 'react'
-import { BackTop } from 'antd'
-
+import React from "react";
+import { BackTop } from "antd";
 
 const style = {
-  height: 50,
-  width: 50,
-  lineHeight: '40px',
-  borderRadius: 50%,
-  backgroundColor: 'var(--blue)',
-  color: 'var(--white)',
-  textAlign: 'center',
+  lineHeight: "40px",
+  borderRadius: "50%",
+  backgroundColor: "var(--blue)",
+  color: "var(--white)",
+  textAlign: "center",
   fontSize: 14,
 };
 
-const UpTop = props => {
-
-    return (
-        <BackTop>
-            <div style={style}>Up</div>
-        </BackTop>
-    )
-}
+const UpTop = (props) => {
+  return (
+    <BackTop>
+      <div style={style}>Up</div>
+    </BackTop>
+  );
+};
 
-export default UpTop
+export default UpTop;
diff --git a/src/components/common/Card.js b/src/components/common/Card.js
@@ -0,0 +1,39 @@
+import React from "react";
+import styled, { css } from "styled-components";
+
+const Container = styled.div`
+  border-radius: 4px;
+  background: var(--white);
+  max-width: 25em;
+  min-height: 15em;
+  box-shadow: 0 6px 20px rgb(0 0 0 /4%), 0 0 10px rgb(0 0 0 /3%);
+  border-radius: 8px;
+  padding: 30px 20px 20px;
+  background: var(--white);
+  text-align: center;
+  font-weight: 600;
+
+  & > :first-child {
+    font-size: 2em;
+    color: var(--blue-bold);
+    font-weight: 600;
+  }
+  & p {
+    word-wrap: break-word;
+    font-size: 0.965934em;
+    font-weight: 400;
+  }
+  :hover {
+    transition: 0.15s ease-in-out;
+    box-shadow: var(--bs-post);
+  }
+  ${(props) =>
+    props.noshadow &&
+    css`
+      box-shadow: none;
+    `}
+`;
+
+export default function Card({ children, noshadow }) {
+  return <Container noshadow={noshadow}>{children}</Container>;
+}
diff --git a/src/components/common/HomeContact.js b/src/components/common/HomeContact.js
@@ -0,0 +1,44 @@
+import React from "react";
+import styled from "styled-components";
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-width: 100%;
+  min-height: 200px;
+  padding: 60px 20px;
+  color: var(--white-100);
+  background: var(--blue-bolder);
+  h3 {
+    font-size: 1.4em;
+    margin-bottom: 20px;
+    color: var(--white-100);
+  }
+  p:first-of-type {
+    font-size: 14px;
+  }
+  p:last-of-type {
+    font-size: 12px;
+  }
+`;
+
+const ButtonContact = styled.button`
+  border: none;
+  border-radius: 8px;
+  background: var(--green);
+  padding: 10px 15px;
+  font-weight: 600;
+  color: var(--blue-bold);
+`;
+
+export default function HomeContact(props) {
+  return (
+    <Container>
+      <h3>PRONTO PARA DAR UM IMPULSO AO SEU NEGÓCIO?</h3>
+      <p>Vamos começar e ajudá-lo a realizar seus sonhos.</p>
+      <ButtonContact>Ligue para 946334642</ButtonContact>
+      <p>Ou ligue para +244 946334643, adoraríamos conversar!</p>
+    </Container>
+  );
+}
diff --git a/src/components/common/Info.js b/src/components/common/Info.js
@@ -0,0 +1,18 @@
+import React from "react";
+import styled from "styled-components";
+
+const Container = styled.div`
+  padding: 40px 3em;
+  text-align: center;
+  max-width: 100%;
+  display: block;
+  @media screen and (max-width: 640px) {
+    padding: 0.8em;
+    margin-bottom: 1em;
+  }
+  background: #f5f6f6 !important;
+`;
+
+const Info = ({ children }) => <Container>{children}</Container>;
+
+export default Info;
diff --git a/src/components/common/MainHeader.js b/src/components/common/MainHeader.js
@@ -0,0 +1,77 @@
+import React from "react";
+import { Carousel } from "antd";
+import styled from "styled-components";
+import { string } from "prop-types";
+
+const CarouselContainer = styled.div`
+  max-width: 100%;
+  max-height: 30em;
+  margin: 0 auto;
+
+  & img {
+    max-height: 30em;
+    width: 100%;
+  }
+`;
+
+const Container = styled.div`
+  background-color: var(--blue-bold);
+  padding: 0 5em;
+  margin-top: 50px;
+  position: relative;
+
+  @media screen and (max-width: 640px) {
+    padding: 0;
+  }
+`;
+
+const Overflowed = styled.div`
+  position: absolute:
+  margin-left: 0;
+  padding-left: 10px;
+  z-index: 5;
+  color: var(--white);
+  font-weight: 500;
+
+  h1 {
+      font-size: 1em;
+      font-weight: 700;
+      margin-bottom: 20px;
+  }
+
+  p {
+      font-size: 1.5em;
+      font-weight: 400;
+  }
+`;
+
+export default function MainHeader({ header, description }) {
+  return (
+    <Container>
+      {header && (
+        <Overflowed>
+          <h1>{header}</h1>
+          <p>{description}</p>
+        </Overflowed>
+      )}
+      <CarouselContainer>
+        <Carousel bordered={false} autoplay>
+          <div>
+            <img src={require("../../images/1.jpg")} alt="bigstock" />
+          </div>
+          <div>
+            <img src={require("../../images/2.jpg")} alt="bigstock" />
+          </div>
+          <div>
+            <img src={require("../../images/3.jpg")} alt="bigstock" />
+          </div>
+        </Carousel>
+      </CarouselContainer>
+    </Container>
+  );
+}
+
+MainHeader.propTypes = {
+  header: string.isRequired,
+  description: string,
+};
diff --git a/src/components/common/index.js b/src/components/common/index.js
@@ -0,0 +1,4 @@
+export { default as Card } from "./Card";
+export { default as MainHeader } from "./MainHeader";
+export { default as Info } from "./Info";
+export { default as HomeContact } from "./HomeContact";
diff --git a/src/routes/routes.ts b/src/routes/routes.ts
@@ -1 +1,15 @@
-export {}
+// import React, { lazy } from 'react'
+
+// const Home = () => lazy(import("../components/Home"))
+// const Contact = () => lazy(import("../components/Contact"))
+// const About_Us = () => lazy(import("../components/About_Us"))
+
+// const Routes = [
+//     {
+//         path: "/",
+//         exact: true
+//     },
+//     {path: "/about", component: About_Us},
+//     {path: "/info", compo}
+// ]
+export {};