From 2a3a07e7caa77a8f0b1df971538208b14065826e Mon Sep 17 00:00:00 2001
From: Maximilian Schneider <mail@maximilianschneider.net>
Date: Thu, 29 Jul 2021 15:26:16 +0200
Subject: [PATCH] implement scrolling to modal

---
 components/HeroSection.tsx  | 11 ++++++++++-
 components/ModalSection.tsx |  2 +-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/components/HeroSection.tsx b/components/HeroSection.tsx
index 5ff2869..94c81e8 100644
--- a/components/HeroSection.tsx
+++ b/components/HeroSection.tsx
@@ -2,6 +2,15 @@ import GradientText from './GradientText'
 import Button from './Button'
 import Link from './Link'
 
+function scrollToId(id: string) {
+  const element = document.getElementById(id)
+  const y = element.getBoundingClientRect().top + window.scrollY
+  window.scroll({
+    top: y,
+    behavior: 'smooth',
+  })
+}
+
 const HeroSection = () => {
   return (
     <section className="">
@@ -17,7 +26,7 @@ const HeroSection = () => {
             </p>
           </div>
           <div className="mb-16 flex lg:flex-row md:flex-row lg:justify-center md:justify-center sm:justify-center">
-            <a className="sm:px-1" rel="noreferrer" target="_blank" href="#">
+            <a className="sm:px-1" onClick={() => scrollToId('contribute')}>
               <Button>Contribute now</Button>
             </a>
             <a className="pl-2 " rel="noreferrer" target="_blank" href="#">
diff --git a/components/ModalSection.tsx b/components/ModalSection.tsx
index 4e1544d..e1cbaa0 100644
--- a/components/ModalSection.tsx
+++ b/components/ModalSection.tsx
@@ -4,7 +4,7 @@ import StatsModal from './StatsModal'
 const ModalSection = () => {
   return (
     <>
-      <div className="pt-32 pb-48 px-4">
+      <div id="contribute" className="pt-32 pb-48 px-4">
         <div className="max-w-5xl mx-auto text-center mb-12">
           <h2 className="mb-4 text-3xl md:text-4xl lg:text-4xl text-white font-bold font-heading">
             Ready to contribute?