From 11466ba5e0c7d63ef788f6957779eaae7289502b Mon Sep 17 00:00:00 2001 From: Dedaldino3D Date: Sun, 8 Nov 2020 01:03:15 +0100 Subject: [PATCH] Add common components --- src/components/Header/index.js | 100 +++++++++++++++++++++++++++ src/components/Styles/index.js | 1 + src/components/UpTop/index.js | 34 ++++----- src/components/common/Card.js | 39 +++++++++++ src/components/common/HomeContact.js | 44 ++++++++++++ src/components/common/Info.js | 18 +++++ src/components/common/MainHeader.js | 77 +++++++++++++++++++++ src/components/common/index.js | 4 ++ src/routes/routes.ts | 16 ++++- 9 files changed, 313 insertions(+), 20 deletions(-) create mode 100644 src/components/Header/index.js create mode 100644 src/components/common/Card.js create mode 100644 src/components/common/HomeContact.js create mode 100644 src/components/common/Info.js create mode 100644 src/components/common/MainHeader.js create mode 100644 src/components/common/index.js diff --git a/src/components/Header/index.js b/src/components/Header/index.js new file mode 100644 index 0000000..ae00386 --- /dev/null +++ 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 ( + + + Skyline Logo + + Skyline + + + + + + Home + + + + Serviços + + + + Sobre nós + + + + Contacto + + + + ); +}; + +export default Header; diff --git a/src/components/Styles/index.js b/src/components/Styles/index.js index b1cecb7..21816e1 100644 --- 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 index bea0206..a974ec0 100644 --- 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 ( - -
Up
- - ) -} +const UpTop = (props) => { + return ( + +
Up
+ + ); +}; -export default UpTop +export default UpTop; diff --git a/src/components/common/Card.js b/src/components/common/Card.js new file mode 100644 index 0000000..2063214 --- /dev/null +++ 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 {children}; +} diff --git a/src/components/common/HomeContact.js b/src/components/common/HomeContact.js new file mode 100644 index 0000000..5623ac5 --- /dev/null +++ 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 ( + +

PRONTO PARA DAR UM IMPULSO AO SEU NEGÓCIO?

+

Vamos começar e ajudá-lo a realizar seus sonhos.

+ Ligue para 946334642 +

Ou ligue para +244 946334643, adoraríamos conversar!

+ + ); +} diff --git a/src/components/common/Info.js b/src/components/common/Info.js new file mode 100644 index 0000000..30bb77e --- /dev/null +++ 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 }) => {children}; + +export default Info; diff --git a/src/components/common/MainHeader.js b/src/components/common/MainHeader.js new file mode 100644 index 0000000..430f47d --- /dev/null +++ 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 ( + + {header && ( + +

{header}

+

{description}

+ + )} + + +
+ bigstock +
+
+ bigstock +
+
+ bigstock +
+ + + + ); +} + +MainHeader.propTypes = { + header: string.isRequired, + description: string, +}; diff --git a/src/components/common/index.js b/src/components/common/index.js new file mode 100644 index 0000000..cf27bd1 --- /dev/null +++ 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 index 693da49..5873511 100644 --- a/src/routes/routes.ts +++ b/src/routes/routes.ts @@ -1 +1,15 @@ -export {} \ No newline at end of file +// 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 {};