diff --git a/src/components/about/about.module.css b/src/components/about/about.module.css index 3df2e3b..072a72a 100644 --- a/src/components/about/about.module.css +++ b/src/components/about/about.module.css @@ -17,6 +17,10 @@ transparent ); + &:last-of-type { + padding-bottom: 0; + } + & .counter { width: max-content; padding: 6px 16px; @@ -45,4 +49,42 @@ color: var(--color-foreground-subtle); } } + + .button { + position: relative; + display: flex; + align-items: center; + justify-content: center; + padding: 12px 16px; + margin-top: 20px; + font-size: var(--font-sm); + font-weight: 500; + color: var(--color-foreground); + cursor: pointer; + background-color: transparent; + border: 1px solid var(--color-neutral-200); + border-radius: 50px; + outline: none; + transition: 0.2s; + + &::before { + position: absolute; + top: -1px; + left: 50%; + width: 70%; + height: 1px; + content: ''; + background: linear-gradient( + 90deg, + transparent, + var(--color-neutral-300), + transparent + ); + transform: translateX(-50%); + } + + &:hover { + background-color: var(--color-neutral-100); + } + } } diff --git a/src/components/about/about.tsx b/src/components/about/about.tsx index 3624825..4111842 100644 --- a/src/components/about/about.tsx +++ b/src/components/about/about.tsx @@ -29,6 +29,12 @@ export function About() { }, ]; + const handleClick = () => { + const app = document.getElementById('app'); + + app?.scrollIntoView(); + }; + return (
@@ -44,6 +50,10 @@ export function About() {

{paragraph.body}

))} + +
); diff --git a/src/components/source/source.module.css b/src/components/source/source.module.css index 944f980..b35830e 100644 --- a/src/components/source/source.module.css +++ b/src/components/source/source.module.css @@ -1,7 +1,7 @@ .source { /* margin-top: 80px; */ - margin-top: 20px; + margin-top: 40px; & .wrapper { position: relative;