Merge pull request #52 from UoaWDCC/VOL-47/main-page-button-headings

Created Main Page Button Headings

web/src/components/MainPageButtonHeadings.tsx

@@ -0,0 +1,18 @@
+import '../styles/componentStyles/MainPageButtonHeadings.css'
+
+const MainPageButtonHeadings = ({heading = 'defaultText', onClick}) =>{
+    // default onClick function
+    const defaultOnClick = () =>{
+        console.log('default action');
+    };
+    return(
+        <div className='buttonContainer'>
+            <button className = 'buttonHeading' onClick={onClick || defaultOnClick}>
+                {heading}
+            </button>
+        </div>
+    );
+}
+
+
+export default MainPageButtonHeadings

web/src/styles/componentStyles/MainPageButtonHeadings.css

@@ -0,0 +1,29 @@
+.buttonHeading {
+    padding: 10px 20px; 
+    font-size: 25.5px; 
+    font-weight: 500; 
+    color: black; 
+    background-color: white; 
+    border: 1px solid black; 
+    border-radius: 52px; 
+    cursor: pointer; 
+    outline: none; 
+    transition: background-color 0.3s, color 0.3s; 
+    height: 60px;
+    width: 311px;
+  }
+
+  .buttonHeading:hover {
+    background-color: black; 
+    color: white; 
+
+  }
+
+  .buttonHeading:active {
+    background-color: #333; 
+  }
+
+  .buttonContainer {
+    text-align: center; 
+    padding: 20px; 
+  }