diff --git a/src/pages/learn.jsx b/src/pages/learn.jsx index 73132ed..8bb7329 100644 --- a/src/pages/learn.jsx +++ b/src/pages/learn.jsx @@ -1,3 +1,5 @@ +import { styled } from '@mui/material' +import Box from '@mui/material/Box' import Head from 'next/head' import Image from 'next/image' import ReactAudioPlayer from 'react-audio-player' @@ -7,14 +9,100 @@ import frequency1 from '../../public/images/frequency2.png' import LearnBanner from '../../public/images/learn.jpg' import organization1 from '../../public/images/partner1.png' import organization2 from '../../public/images/partner2.png' -import roundorca from '../../public/images/roundorca.png' import salishsea from '../../public/images/salishsea.png' +import roundorca from '../../public/images/srkw2-3.jpg' +import ActionButton from '../components/ActionButton' import TopBanner from '../components/TopBanner' import learnStyles from '../styles/Learn.module.css' +const Container = styled(Box)(({ theme }) => ({ + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + padding: '0px 100px', + [theme.breakpoints.down('sm')]: { + padding: '0px 10px', + }, +})) + +const Intro = styled(Box)(({ theme }) => ({ + display: 'flex', + marginTop: '32px', + [theme.breakpoints.down('sm')]: { + flexDirection: 'column', + justifyContent: 'center', + }, +})) + +const IntroCallContainer = styled(Box)(({ theme }) => ({ + display: 'flex', + justifyContent: 'space-around', + marginTop: '5vh', + width: '80vw', + [theme.breakpoints.down('sm')]: { + flexDirection: 'column', + maxWidth: 'none', + marginTop: '0', + }, +})) + +const IntroCallDesc = styled(Box)(({ theme }) => ({ + display: 'flex', + flexDirection: 'column', + maxWidth: '30vw', + marginTop: '20vh', + [theme.breakpoints.down('sm')]: { + flexDirection: 'column', + maxWidth: 'none', + marginTop: '0', + }, +})) + +const CallExampleContainer = styled(Box)(({ theme }) => ({ + display: 'flex', + width: '80vw', + justifyContent: 'space-around', + [theme.breakpoints.down('sm')]: { + flexDirection: 'column', + }, +})) +const CallExampleLeftWrap = styled(Box)(({ theme }) => ({ + display: 'flex', + flexDirection: 'column', + maxWidth: '500px', + [theme.breakpoints.down('sm')]: {}, +})) + +const CallExampleRightWrap = styled(Box)(({ theme }) => ({ + display: 'flex', + flexDirection: 'column', + maxWidth: '500px', + marginTop: '40vh', + [theme.breakpoints.down('sm')]: { + marginTop: '0', + }, +})) +const CallExampleContentContainer = styled(Box)(({ theme }) => ({ + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + marginBottom: '6vh', + [theme.breakpoints.down('sm')]: {}, +})) + +const CallExampleContentWrap = styled(Box)(({ theme }) => ({ + backgroundColor: '#CAE9FF', + maxWidth: '530px', + padding: '5px', + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + [theme.breakpoints.down('sm')]: {}, +})) + export const learn = () => { return ( -
+
Orcasound @@ -26,99 +114,162 @@ export const learn = () => { scrollToId={`learn`} />
-
    -
  • Sounds of the Salish Sea
    • -
  • 3 common calls
    • -
  • Souther Resident Killer Whale Call Catalog
    • -
  • Exhibits
    • -
-

Sounds Of The Salish Sea

-

- Explore common sounds of the Salish Sea by selecting the animals and - other objects in this anoramic soundscape of the inlandwaters of - Washington State(USA) and British Columbia(Canada) -

-
+ + + + + + + + +

Sounds Of The Salish Sea

+

+ Explore common sounds of the Salish Sea by selecting the animals and + other objects in this
+ panoramic soundscape of the inland waters of Washington State (USA) + and British Columbia
+ (Canada). +

Sounds Of The Salish Sea -
-
- OrcaImage -
-

3 Common Calls

-
-
- J pod's call - Frequency and Time -
{`J pod's Favorite call:501`}
-

{`More description goes here`}

-
- -
-
+ + + +

3 Common Calls

+

+ Conveniently, a few calls are used almost exclusively by each + southern resident pod. This means that by memorizing just 3 + calls, you can tell with great certainty that you are hearing a + particular pod of orcas!{' '} +

+ + + OrcaImage + + -
- K pod's call - Frequency and Time -
{`K pod's Favorite call:516`}
-

{`More description goes here`}

-
- -
-
+ + + + + J pod's call - Frequency and Time +

{`J pod's Favorite call:501`}

+

{`More description goes here`}

+
+ +
+ +

+ J pod is the most local of the pods, commonly visiting Seattle + about once a month throughout the year, and is famous for + J2/Granny who may have been the oldest female orca living to + be about 100 years old. +

+ -
- L pod's cal - Frequency and Time -
{`L pod's Favorite call:519`}
-

{`More description goes here`}

-
- -
-
-
-
-

Exhibits

-

- {`Learn About the Marine acoustic landscape and the hydrophone network`} -

- {`by exploring these Orcasound Exhibit screens designed for + + + K pod's call - Frequency and Time +

{`K pod's Favorite call:516`}

+

{`More description goes here`}

+
+ +
+ +

+ L pod travels the furthest each year, often foraging as far + south as San Francisco in wintertime, and is the largest pod + with more than 30 members now (and almost 60 in 1993). +

+ + + + + L pod's cal - Frequency and Time +

{`L pod's Favorite call:519`}

+

{`More description goes here`}

+
+ +
+ +

+ K pod is the smallest pod with less than ~20 members since an + annual census began in the 1970s, but they have the cutest call + which most listeners think sounds like a kitten mewing. +

+ + + +
+

Exhibits

+

+ {`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`} -

-
-
- Seattle aquarium exhibit - - Marine Science Center Logo - -
+

+
+
+ Seattle aquarium exhibit + + Marine Science Center Logo + +
+
) }