diff --git a/.vscode/settings.json b/.vscode/settings.json index c416519..42ebc09 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -5,7 +5,7 @@ "**/.hg": true, "**/CVS": true, "**/.DS_Store": true, - "**/Thumbs.db": false + "**/Thumbs.db": true }, "explorerExclude.backup": {} } diff --git a/src/components/M3Logo/M3Logo.tsx b/src/components/M3Logo/M3Logo.tsx new file mode 100644 index 0000000..f402bfc --- /dev/null +++ b/src/components/M3Logo/M3Logo.tsx @@ -0,0 +1,8 @@ +import React from "react"; +import m3LogoImg from "./assets/image/Logo-M3Academy.svg"; + +const M3Logo = () => { + return M3 Academy logo; +}; + +export { M3Logo }; diff --git a/src/components/M3Logo/assets/image/Logo-M3Academy.svg b/src/components/M3Logo/assets/image/Logo-M3Academy.svg new file mode 100644 index 0000000..f57d95b --- /dev/null +++ b/src/components/M3Logo/assets/image/Logo-M3Academy.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/components/SearchBox/SearchBox.tsx b/src/components/SearchBox/SearchBox.tsx new file mode 100644 index 0000000..de90d0b --- /dev/null +++ b/src/components/SearchBox/SearchBox.tsx @@ -0,0 +1,26 @@ +import React from "react"; +import styles from "./searchBox.module.scss"; +import searchImg from "./assets/image/search_2.png"; +const SearchBox = () => { + return ( +
+ + +
+ ); +}; + +export { SearchBox }; diff --git a/src/components/SearchBox/assets/image/search_2.png b/src/components/SearchBox/assets/image/search_2.png new file mode 100644 index 0000000..9bd1214 Binary files /dev/null and b/src/components/SearchBox/assets/image/search_2.png differ diff --git a/src/components/SearchBox/searchBox.module.scss b/src/components/SearchBox/searchBox.module.scss new file mode 100644 index 0000000..256e116 --- /dev/null +++ b/src/components/SearchBox/searchBox.module.scss @@ -0,0 +1,63 @@ +.search-wrapper { + display: flex; + flex-direction: row; +} +.search-input { + display: flex; + flex-direction: row; + align-items: center; + padding: 7px 16px; + gap: 10px; + width: 264px; + height: 32px; + /* + position: absolute; + + left: 508px; + top: 22px; + */ + /* white */ + + background: #ffffff; + /* primary-700 */ + + border: 2px solid #f2f2f2; + border-radius: 5px; + @media screen and (min-width: 2500px) { + width: 515.62px; + height: 57px; + } +} +.buscaBtn { + position: relative; + width: 18px; + height: 18px; + border-color: transparent; + border-radius: 5px; + background-color: white; + right: 30px; + top: 5px; + &::placeholder { + color: #c4c4c4; + font-weight: 400; + font-size: 14px; + } + @media screen and (min-width: 2500px) { + width: 35.15px; + height: 35.15px; + &::placeholder { + font-size: 28px; + } + } +} + +.searchImg { + width: 18px; + height: 18px; + + border-radius: 5px; + @media screen and (min-width: 2500px) { + width: 35.15px; + height: 35.15px; + } +} diff --git a/src/components/Socials/Socials.tsx b/src/components/Socials/Socials.tsx index 5ee3c7a..aee8b92 100644 --- a/src/components/Socials/Socials.tsx +++ b/src/components/Socials/Socials.tsx @@ -5,7 +5,6 @@ import instagramImg from "./assets/images/Instagram.png"; import twitterImg from "./assets/images/Twitter.png"; import youtubeImg from "./assets/images/Youtube.png"; import linkedinImg from "./assets/images/Linkedin.png"; -import whatsappImg from "./assets/images/whatsapp.png"; const Socials = () => { return ( @@ -26,9 +25,6 @@ const Socials = () => {
  • Linkedin
    • -
  • - Whatsapp -
    • www.loremipsum.com diff --git a/src/components/Whatsapp/Whatsapp.tsx b/src/components/Whatsapp/Whatsapp.tsx index e69de29..4fa35e9 100644 --- a/src/components/Whatsapp/Whatsapp.tsx +++ b/src/components/Whatsapp/Whatsapp.tsx @@ -0,0 +1,12 @@ +import React from "react"; +import whatsappImg from "./assets/image/whatsapp.png"; + +const Whatsapp = () => { + return ( +
    + Whatsapp +
    + ); +}; + +export { Whatsapp }; diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 39c8137..45505e6 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -1,10 +1,11 @@ import React from "react"; -import { FormInput } from "../components/FormInput/FormInput"; +import { SearchBox } from "../components/SearchBox/SearchBox"; const Home = () => { + const style = { background: "white" }; return ( -
    - +
    +
    ); }; diff --git a/src/sectors/Header/TopHeader/styles.module.scss b/src/sectors/Header/TopHeader/styles.module.scss index 2b1971a..3276d0c 100644 --- a/src/sectors/Header/TopHeader/styles.module.scss +++ b/src/sectors/Header/TopHeader/styles.module.scss @@ -1,4 +1,4 @@ -.TopHeader { +/*.TopHeader { width: 100%; display: flex; flex-direction: row; @@ -59,3 +59,4 @@ } } } +/* \ No newline at end of file