chore: Working button links navigations

.vscode/settings.json

@@ -4,8 +4,8 @@
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
     "source.organizeImports": "explicit",
-    "source.fixAll": true,
-    "source.fixAll.eslint": true
+    "source.fixAll": "explicit",
+    "source.fixAll.eslint": "explicit"
   },
   "files.eol": "\n",
   "editor.formatOnSaveMode": "file",

src/common/components/footer/Footer.jsx

@@ -96,6 +96,14 @@ const whiteButton = {
 };
 
 export default function Footer() {
+  const handleConnect = () => {
+    window.open('https://calendly.com/sokanacollective/lets-connect', '_blank');
+  };
+
+  const handleRequest = () => {
+    window.open('https://app.edoula.biz/private/form/df49ef9a', '_blank');
+  };
+
   return (
     <FooterContainer>
       <VerticallyAligned style={{ '--footer-width': '360px' }}>
@@ -115,19 +123,44 @@ export default function Footer() {
         <Img src='https://images.squarespace-cdn.com/content/v1/623f9fd83fd2075fe4f672b0/bed05e10-b16d-47ed-8c82-8ab961b9701c/BCBS+Logo.png' />
       </VerticallyAligned>
       <VerticallyAligned style={{ '--footer-width': '250px' }}>
-        <GenericButton {...whiteButton} text="LET'S CONNECT" />
-        <GenericButton {...whiteButton} text='REQUEST SERVICES' />
+        <GenericButton
+          {...whiteButton}
+          text="LET'S CONNECT"
+          onClick={handleConnect}
+        />
+        <GenericButton
+          {...whiteButton}
+          text='REQUEST SERVICES'
+          onClick={handleRequest}
+        />
         <HorizontallyAligned gap='16px'>
-          <SmallButton>
+          <SmallButton
+            onClick={() =>
+              window.open('https://facebook.com/sokanacollective', '_blank')
+            }
+          >
             <FaFacebookF />
           </SmallButton>
-          <SmallButton>
+          <SmallButton
+            onClick={() =>
+              window.open('https://instagram.com/sokanacollective', '_blank')
+            }
+          >
             <FaInstagram />
           </SmallButton>
-          <SmallButton>
+          <SmallButton
+            onClick={() => window.open('mailto:info@sokanacollective.org')}
+          >
             <FaRegEnvelope />
           </SmallButton>
-          <SmallButton>
+          <SmallButton
+            onClick={() =>
+              window.open(
+                'https://linkedin.com/company/sokanacollective',
+                '_blank'
+              )
+            }
+          >
             <FaLinkedinIn />
           </SmallButton>
         </HorizontallyAligned>
@@ -139,11 +172,22 @@ export default function Footer() {
           Sokana Collective is a 501c3 non profit organization EIN: 93-4646850
         </Text>
       </VerticallyAligned>
-      <Img
-        dimension='180px'
-        src='https://widgets.guidestar.org/prod/v1/pdp/transparency-seal/15248996/svg'
-        alt='logo'
-      />
+      <div style={{ marginTop: '60px' }}>
+        <SmallButton
+          onClick={() =>
+            window.open('https://app.candid.org/profile/15248996', '_blank')
+          }
+        >
+          <Img
+            dimension='180px'
+            src='https://widgets.guidestar.org/prod/v1/pdp/transparency-seal/15248996/svg'
+            alt='logo'
+            onClick={() =>
+              window.open('https://app.candid.org/profile/15248996', '_blank')
+            }
+          />
+        </SmallButton>
+      </div>
     </FooterContainer>
   );
 }

src/pages/home/components/HomeDoulaProgram.jsx

@@ -14,6 +14,17 @@ const TealButton = {
 };
 
 export default function HomeDoulaProgram() {
+  const handleLearnMore = () => {
+    window.open(
+      'https://www.siumed.edu/fcm/illinois-medicaid-certified-doula-program',
+      '_blank'
+    );
+  };
+
+  const handleRequiredTrainings = () => {
+    window.open('https://sokanacollective.as.me/schedule/2268a87e', '_blank');
+  };
+
   return (
     <div>
       <div className='text-container'>
@@ -33,8 +44,16 @@ export default function HomeDoulaProgram() {
         </div>
       </div>
       <div className='buttondiv'>
-        <GenericButton {...TealButton} text='LEARN MORE' />
-        <GenericButton {...TealButton} text='REQUIRED TRAININGS' />
+        <GenericButton
+          {...TealButton}
+          text='LEARN MORE'
+          onClick={handleLearnMore}
+        />
+        <GenericButton
+          {...TealButton}
+          text='REQUIRED TRAININGS'
+          onClick={handleRequiredTrainings}
+        />
       </div>
     </div>
   );

src/pages/home/components/HomeIntro.css

@@ -12,10 +12,8 @@
 
 .buttondiv {
   padding-top: 72px;
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  grid-template-rows: 1fr 1fr;
-  gap: 48px 72px;
+  display: flex;
+  gap: 72px;
 
   @media screen and (max-width: 768px) {
     padding-top: 32px;

src/pages/home/components/HomeIntro.jsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { useNavigate } from 'react-router-dom';
+
 import GenericButton from 'common/components/GenericButton';
 
 import './HomeIntro.css';
@@ -13,6 +15,19 @@ const TealButton = {
 };
 
 export default function HomeIntro() {
+  const navigate = useNavigate();
+
+  const handleCertification = () => {
+    window.open(
+      'https://www.sokanacollective.com/what-you-will-lean',
+      '_blank'
+    );
+  };
+
+  const handleAllCourses = () => {
+    navigate('/courses');
+  };
+
   return (
     <div className='homeintro'>
       <p className='greytext'>
@@ -26,13 +41,13 @@ export default function HomeIntro() {
         <GenericButton
           {...TealButton}
           text='FULL SPECTRUM DOULA CERTIFICATION'
+          onClick={handleCertification}
         />
-        <GenericButton {...TealButton} text='CREATE AN ACCOUNT' />
         <GenericButton
           {...TealButton}
-          text='LABOR SUPPORT CERTIFICATION FOR POSTPARTUM DOULAS'
+          text='ALL COURSES'
+          onClick={handleAllCourses}
         />
-        <GenericButton {...TealButton} text='ALL COURSES' />
       </div>
     </div>
   );