Finished redesigning Issue 5 Exhibit

package.json

@@ -22,17 +22,17 @@
     "@emotion/styled": "^11.6.0",
     "@mui/icons-material": "^5.3.1",
     "@mui/material": "^5.3.1",
-    "next": "^12.0.9",
-    "react": "17.0.2",
+    "next": "^13.3.0",
+    "react": "^18.2.0",
     "react-audio-player": "^0.17.0",
-    "react-dom": "17.0.2",
+    "react-dom": "^18.2.0",
     "react-scroll": "^1.8.4"
   },
   "devDependencies": {
     "@types/node": "^16.11.22",
     "@types/react": "^17.0.38",
     "eslint": "8.8.0",
-    "eslint-config-next": "^12.0.9",
+    "eslint-config-next": "^13.3.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-config-react-app": "^7.0.0",
     "eslint-plugin-simple-import-sort": "^7.0.0",

src/pages/learn.jsx

@@ -1,3 +1,4 @@
+import Typography from '@mui/material/Typography'
 import Head from 'next/head'
 import Image from 'next/image'
 import ReactAudioPlayer from 'react-audio-player'
@@ -49,7 +50,7 @@ export const learn = () => {
           quality={65}
         />
       </div>
-      <div className={learnStyles.orca}>
+      {/* <div className={learnStyles.orca}>
         <Image
           src={roundorca}
           alt="OrcaImage"
@@ -58,8 +59,8 @@ export const learn = () => {
           layout="intrinsic"
           quality={65}
         />
-      </div>
-      <h2 className={learnStyles.calls}>3 Common Calls</h2>
+      </div> */}
+      {/* <h2 className={learnStyles.calls}>3 Common Calls</h2>
       <div>
         <div className={learnStyles.gallery}>
           <Image src={frequency1} alt="J pod's call - Frequency and Time" />
@@ -103,18 +104,23 @@ export const learn = () => {
             />
           </div>
         </div>
-      </div>
+      </div> */}
       <div className={learnStyles.property}>
-        <h2 className={learnStyles.exhibits}>Exhibits</h2>
-        <p className={learnStyles.exhibit}>
-          {`Learn About the Marine acoustic landscape and the hydrophone network`}
-          <br></br>
-          {`by exploring these Orcasound Exhibit screens designed for
-          educational organizations in the Pudget Sound regions`}
-        </p>
+        <Typography variant="h2" fontSize="40px" align="left" mt={5} mb={2}>
+          Exhibit
+        </Typography>
+        <Typography variant="p" fontSize="18px" align="left">
+          Learn About the Marine acoustic landscape and the hydrophone network
+          by exploring these Orcasound Exhibit screens designed for educational
+          organizations in the Pudget Sound regions
+        </Typography>
       </div>
+
       <div className={learnStyles.org}>
-        <Image src={organization1} alt="Seattle aquarium exhibit" />
+        <a href="https://www.seattleaquarium.org/">
+          <Image src={organization1} alt="Seattle aquarium exhibit" />
+        </a>
+
         <a href="https://killerwhaletales.org/">
           <Image src={organization2} alt="Marine Science Center Logo" />
         </a>

src/styles/Learn.module.css

@@ -55,7 +55,7 @@
 .gallery2 {
   float: left;
   background-color: rgba(190, 255, 246, 0.76);
-  margin: 295px 30px;
+  margin: 270px 30px;
 }
 .audio {
   top: 0;
@@ -82,12 +82,15 @@
 
 .pods {
   text-align: center;
-
   align-items: center;
 }
 
 .property {
-  text-align: left;
+  justify-content: left;
+  width: 100%;
+  /* flex-wrap: wrap; */
+  /* margin: 1200px 0; */
+  padding: 40px 10px 100px 100px;
 }
 
 .exhibits {
@@ -101,13 +104,20 @@
   margin-left: 40px;
   text-align: left;
 }
-
+/* This is selecting the row container holding the two images. */
 .org {
   width: 100%;
   height: auto;
   display: flex;
-  margin-top: 80px;
+  margin: 0 30px 50px 30px;
   text-align: center;
-  margin-left: 300px;
-  padding: 5px 5px;
+  padding: 0 5px 30px 5px;
+  justify-content: space-evenly;
+}
+.org :nth-of-type(1) {
+  border-radius: 10%;
+}
+.org :nth-of-type(2) {
+  /* border: solid 1px; */
+  border-radius: 10%;
 }