Feature: Donate Page Top Banner Revamp Resolved orcasound/product#106

src/components/Donate/DonateOrcasound.tsx

@@ -0,0 +1,138 @@
+import { Box, Button, Typography } from '@mui/material'
+import { styled } from '@mui/material'
+import Image from 'next/image'
+
+import theme from '../../styles/theme'
+
+interface DonateOrcasoundProps {
+  donateOrcasoundImage: string
+  donateOrcasoundTitle: string
+  donateOrcasoundMessage?: string
+  donateVolunteersImage: string
+  donateVolunteersTitle: string
+  donateVolunteersMessage?: string
+}
+
+const DonateContainer = styled(Box)(({ theme }) => ({
+  margin: '2vw 0',
+  flex: 1,
+  borderRadius: '15px',
+  padding: '2vw',
+  border: '1px solid black',
+  boxShadow: '0 4px 8px 0 rgba(185, 210, 225, 1)',
+  display: 'flex',
+  flexDirection: 'column',
+}))
+
+const ImageContainer = styled(Box)(({ theme }) => ({
+  borderRadius: '1em',
+  overflow: 'hidden',
+  margin: '0 10px',
+}))
+
+const DonateOrcasound = (props: DonateOrcasoundProps) => {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        /** Uncheck this two lines if donate cards are too large in */
+        // margin: '0 auto',  wide screen
+        // maxWidth: '1000px',
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'stretch',
+        gap: '2vw',
+        flexWrap: 'wrap',
+        [theme.breakpoints.down('sm')]: {
+          flexDirection: 'column',
+        },
+      }}
+    >
+      <DonateContainer>
+        <Typography
+          fontSize={'1.5rem'}
+          textAlign="center"
+          sx={{ marginBottom: '2vw' }}
+        >
+          {props.donateOrcasoundTitle}
+        </Typography>
+        <ImageContainer>
+          <Image
+            src={props.donateOrcasoundImage}
+            alt="Picture of Donate to Orcasound"
+            quality={100}
+            layout="responsive"
+            objectFit="contain"
+          />
+        </ImageContainer>
+        <Typography sx={{ margin: '10px' }}>
+          {props.donateOrcasoundMessage}
+        </Typography>
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'center',
+            width: '100%',
+            marginTop: 'auto',
+          }}
+        >
+          <Button
+            variant="contained"
+            sx={{
+              backgroundColor: '#1B2B7B',
+              borderRadius: '20px',
+              margin: '10px',
+              // width is not necessary here since the Box is already centering the button
+            }}
+          >
+            Donate
+          </Button>
+        </Box>
+      </DonateContainer>
+      <DonateContainer>
+        <Typography
+          fontSize={'1.5rem'}
+          textAlign="center"
+          sx={{ marginBottom: '2vw' }}
+        >
+          {props.donateVolunteersTitle}
+        </Typography>
+        <ImageContainer>
+          <Image
+            src={props.donateVolunteersImage}
+            alt="Picture of Donate to Volunteers"
+            quality={100}
+            layout="responsive"
+            objectFit="contain"
+          />
+        </ImageContainer>
+        <Typography sx={{ margin: '10px' }}>
+          {props.donateVolunteersMessage}
+        </Typography>
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'center',
+            width: '100%',
+            marginTop: 'auto',
+          }}
+        >
+          <Button
+            variant="contained"
+            sx={{
+              backgroundColor: '#1B2B7B',
+              borderRadius: '20px',
+              margin: '10px',
+              width: 'fit-content',
+            }}
+          >
+            {' '}
+            Support
+          </Button>
+        </Box>
+      </DonateContainer>
+    </Box>
+  )
+}
+
+export default DonateOrcasound

src/components/TopBanner.jsx

@@ -1,45 +1,44 @@
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
-import { Box, IconButton, Slide, Typography } from '@mui/material'
+import ExpandMoreOutlinedIcon from '@mui/icons-material/ExpandMoreOutlined'
+import { Box, IconButton, Slide } from '@mui/material'
 import { styled } from '@mui/material'
 import Image from 'next/image'
 import React, { useEffect, useState } from 'react'
 import { Link as ScrollElement } from 'react-scroll'
 
 const TopScreen = styled(Box)(({ theme }) => ({
   position: 'relative',
-  overflow: 'hidden',
-  height: '90vh',
+  overflow: 'clip',
+  aspectRatio: '2.9',
+  width: '100%',
   [theme.breakpoints.down('sm')]: {
-    height: '68vh',
+    minHeight: '26vh',
+    aspectRatio: '2.03',
   },
 }))
 
 const TitleScreen = styled(Box)(({ theme }) => ({
   position: 'relative',
-  minHeight: '85vh',
-  maxHeight: '85vh',
+  height: '100%',
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'center',
   justifyContent: 'center',
   color: '#fff',
-  paddingBottom: '100px',
-  [theme.breakpoints.down('sm')]: {
-    minHeight: '68vh',
-    maxHeight: '68vh',
-    paddingBottom: '200px',
-  },
 }))
 
 const ScrollDownButton = styled(IconButton)(({ theme }) => ({
   position: 'absolute',
-  bottom: '0',
-  padding: '0',
+  margin: '0 auto',
+  left: 0,
+  right: 0,
+  height: '15px',
+  width: '15px',
   display: 'flex',
+  bottom: '0',
   flexDirection: 'column',
   alignItems: 'center',
   justifyContent: 'center',
-  height: '15px',
   transition: 'all 0.5s ease-in-out',
   '&:hover': {
     transform: 'translateY(5px)',
@@ -51,19 +50,37 @@ const ScrollDownButton = styled(IconButton)(({ theme }) => ({
 
 const PageDesc = styled(Box)(({ theme }) => ({
   position: 'absolute',
-  bottom: '0',
-  left: '10px',
-  backgroundColor: '#080d26',
+  borderRadius: '10px',
+  marginBottom: '10%',
+  fontSize: '1.25em',
+  right: '0px',
+  backgroundColor: '#1b2b7bcf',
   width: '40vw',
   maxWidth: '450px',
-  margin: '10px 25px',
-  padding: '20px',
+  padding: '1em',
   letterSpacing: '0.75px',
   [theme.breakpoints.down('sm')]: {
-    left: '0',
-    margin: '0',
-    width: '100%',
-    maxWidth: '100vw',
+    right: '0',
+    width: '68vw',
+    maxWidth: '70vw',
+    maxHeight: '230px',
+    fontSize: '1em',
+  },
+}))
+
+const ImageContainer = styled(Box)(({ theme }) => ({
+  position: 'absolute',
+  marginLeft: '0',
+  marginRight: '0',
+  left: 0,
+  right: 0,
+  width: '100%',
+  height: '150%',
+  minHeight: '250px',
+  top: '-50%',
+  [theme.breakpoints.down('sm')]: {
+    top: '-60%',
+    height: '180%',
   },
 }))
 
@@ -76,33 +93,42 @@ const TopBanner = ({ bannerImg, pageTitle, pageDesc, scrollToId }) => {
 
   return (
     <TopScreen>
-      <Image
-        alt={pageTitle ?? ''}
-        src={bannerImg}
-        layout="fill"
-        objectFit="cover"
-        quality={100}
-      />
+      <ImageContainer>
+        <Image
+          alt={pageTitle ?? ''}
+          src={bannerImg}
+          layout="fill"
+          objectFit="cover"
+          quality={100}
+        />
+      </ImageContainer>
       <Slide
         in={checked}
         direction="up"
         {...(checked ? { timeout: 1000 } : {})}
       >
         <TitleScreen>
-          <Typography
-            variant="h1"
-            sx={{ fontSize: '10vw', marginBottom: '2vw', fontWeight: '500' }}
-          >
-            {pageTitle}
-          </Typography>
           <ScrollElement to={scrollToId} smooth={true} spy={true}>
             <ScrollDownButton>
-              <ExpandMoreIcon sx={{ fontSize: '5vw', color: '#ffffff' }} />
+              <ExpandMoreOutlinedIcon
+                sx={{
+                  fontSize: '5vw',
+                  '& path': {
+                    stroke: 'black',
+                    strokeWidth: '0.3',
+                    fill: 'white',
+                  },
+                }}
+              />
               <ExpandMoreIcon
                 sx={{
                   fontSize: '5vw',
-                  color: '#ffffff',
                   transform: 'translateY(-3.5vw)',
+                  '& path': {
+                    stroke: 'black',
+                    strokeWidth: '0.3',
+                    fill: 'white',
+                  },
                 }}
               />
             </ScrollDownButton>