diff --git a/components/Button.js b/components/Button.js index a205d47..996e65d 100644 --- a/components/Button.js +++ b/components/Button.js @@ -4,7 +4,7 @@ import styles from "./modules/Button.module.css"; export default function Example(props) { return ( - ); diff --git a/components/HomeSection.js b/components/HomeSection.js index d563ea8..74be566 100644 --- a/components/HomeSection.js +++ b/components/HomeSection.js @@ -5,6 +5,8 @@ import Infos from "../components/Infos"; import Presentation from "../components/Presentation"; import styles from "./modules/HomeSection.module.css"; import Section from "./Section"; +import Button from "./Button"; +import DownIcon from "../public/icons/arrow-down.svg"; export default function HomeSection(props) { const person = props.person; @@ -23,6 +25,14 @@ export default function HomeSection(props) { + +
+
); diff --git a/components/modules/Button.module.css b/components/modules/Button.module.css index 9df9c6a..90fd5b5 100644 --- a/components/modules/Button.module.css +++ b/components/modules/Button.module.css @@ -1,6 +1,32 @@ .container { - background: #fafafa; + position: relative; + z-index: 1; + + cursor: pointer; + + outline: none; + border: none; + + margin: 0 auto; + + width: fit-content; + + background-color: var(--quinary); border-radius: 5px; padding: 0.75rem; - font-size: 1.1rem; + + font-family: var(--fontFamily); + font-weight: 900; + line-height: 23px; + + letter-spacing: 0.05em; + text-transform: uppercase; + + transform: translateY(0); + transition: background-color 0.3s ease-out, transform 0.3s ease-out; +} + +.container:hover { + background-color: var(--quaternary); + transform: translateY(-15%); } diff --git a/components/modules/HomeSection.module.css b/components/modules/HomeSection.module.css index bd6a4b2..cc41518 100644 --- a/components/modules/HomeSection.module.css +++ b/components/modules/HomeSection.module.css @@ -1,7 +1,7 @@ .bg { position: absolute; right: 0%; - width: 50vw; + width: 50%; height: 100%; background-color: var(--lightDark); } @@ -22,3 +22,23 @@ justify-content: space-evenly; align-items: center; } + +.icon { + width: 1.25rem; + height: 1.25rem; + + margin: 1rem auto; +} + +.buttonContainer { + position: absolute; + bottom: 0%; + + padding: 1rem; + width: 100%; + + display: flex; + flex-direction: column; + align-content: center; + justify-content: center; +} diff --git a/pages/index.js b/pages/index.js index 9917b89..c81dce4 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,8 +1,18 @@ import Head from "next/head"; -import HomeSection from "../components/HomeSection"; import CaseSection from "../components/CaseSection"; +import HomeSection from "../components/HomeSection"; export default function Home({ person, caseStudies }) { + const caseSectionRef = React.useRef(); + + function scrollToRef() { + console.log(caseSectionRef.current.offsetTop); + if (typeof window !== "undefined") { + console.log(caseSectionRef.current.offsetTop); + window.scrollTo(0, caseSectionRef.current.offsetTop); + } + } + return (
@@ -10,9 +20,11 @@ export default function Home({ person, caseStudies }) { - + - +
+ +
); } diff --git a/styles/global.css b/styles/global.css index 275b11f..231ac22 100644 --- a/styles/global.css +++ b/styles/global.css @@ -28,6 +28,7 @@ body { background: var(--dark); color: var(--light); font-family: var(--fontFamily); + scroll-behavior: smooth; } .wrapper {