From f039fa7929e7badfb5124bca8a77fa299642fa45 Mon Sep 17 00:00:00 2001 From: Tao Liu Date: Wed, 21 Jun 2023 11:17:11 -0700 Subject: [PATCH] Home page how it works section #311 (#349) --- client/src/assets/HowItWorks/people-flag.svg | 1 + .../src/assets/HowItWorks/people-sharing.svg | 1 + .../src/assets/HowItWorks/people-signup.svg | 1 + .../src/assets/HowItWorks/people-working.svg | 1 + .../DisplayGrids/InstructionGrid.tsx | 10 +- client/src/theme/typography.ts | 4 + client/src/views/Home.tsx | 2 + client/src/views/HowItWorks.tsx | 260 +++++++----------- client/src/views/HowItWorksCard.tsx | 118 ++++++++ client/src/views/HowItWorksCards.tsx | 33 +++ 10 files changed, 269 insertions(+), 162 deletions(-) create mode 100644 client/src/assets/HowItWorks/people-flag.svg create mode 100644 client/src/assets/HowItWorks/people-sharing.svg create mode 100644 client/src/assets/HowItWorks/people-signup.svg create mode 100644 client/src/assets/HowItWorks/people-working.svg create mode 100644 client/src/views/HowItWorksCard.tsx create mode 100644 client/src/views/HowItWorksCards.tsx diff --git a/client/src/assets/HowItWorks/people-flag.svg b/client/src/assets/HowItWorks/people-flag.svg new file mode 100644 index 00000000..d58160be --- /dev/null +++ b/client/src/assets/HowItWorks/people-flag.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/client/src/assets/HowItWorks/people-sharing.svg b/client/src/assets/HowItWorks/people-sharing.svg new file mode 100644 index 00000000..4ae3c6a4 --- /dev/null +++ b/client/src/assets/HowItWorks/people-sharing.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/client/src/assets/HowItWorks/people-signup.svg b/client/src/assets/HowItWorks/people-signup.svg new file mode 100644 index 00000000..938e4122 --- /dev/null +++ b/client/src/assets/HowItWorks/people-signup.svg @@ -0,0 +1 @@ +SIGN UP \ No newline at end of file diff --git a/client/src/assets/HowItWorks/people-working.svg b/client/src/assets/HowItWorks/people-working.svg new file mode 100644 index 00000000..178cd291 --- /dev/null +++ b/client/src/assets/HowItWorks/people-working.svg @@ -0,0 +1 @@ +SIGN UP \ No newline at end of file diff --git a/client/src/components/DisplayGrids/InstructionGrid.tsx b/client/src/components/DisplayGrids/InstructionGrid.tsx index 11d2ff01..c74fde89 100644 --- a/client/src/components/DisplayGrids/InstructionGrid.tsx +++ b/client/src/components/DisplayGrids/InstructionGrid.tsx @@ -28,7 +28,7 @@ const instructionStyles = makeStyles((theme: Theme) => })); type InstructionProps = { - instructionList: { title: string; body: string; image: string }[]; + instructionsArray: { title: string; body: string; image: string }[]; }; function InstructionGrid(props: InstructionProps) { @@ -36,11 +36,11 @@ function InstructionGrid(props: InstructionProps) { return ( - {props.instructionList.map((instructionItem, index) => { - var text = ; - var image = ; + {props.instructionsArray.map((instructions, index) => { + var text = ; + var image = ; return ( - + {/* Set order of the two jsx items - odd number rows have text first, even have image first */} {index % 2 === 0 ? image : text} {index % 2 === 0 ? text : image} diff --git a/client/src/theme/typography.ts b/client/src/theme/typography.ts index e4529e2d..7b8f6a8a 100644 --- a/client/src/theme/typography.ts +++ b/client/src/theme/typography.ts @@ -22,6 +22,10 @@ const typography = { fontSize: '2.2rem', fontWeight: 'bold', }, + h4: { + fontSize: '1.8rem', + fontWeight: 'bold', + }, marginBottom: 0, }; diff --git a/client/src/views/Home.tsx b/client/src/views/Home.tsx index c22f7835..c1847271 100644 --- a/client/src/views/Home.tsx +++ b/client/src/views/Home.tsx @@ -3,6 +3,7 @@ import BannerSection from '../components/BannerSection'; import NeedsCarousel from '../components/NeedsCarousel'; import DonationsCarousel from '../components/DonationsCarousel'; import FAQs from '../components/FAQs'; +import HowItWorks from './HowItWorks'; function Home(): JSX.Element { return ( @@ -11,6 +12,7 @@ function Home(): JSX.Element { + ); diff --git a/client/src/views/HowItWorks.tsx b/client/src/views/HowItWorks.tsx index 2d7fb63a..afa8ab7a 100644 --- a/client/src/views/HowItWorks.tsx +++ b/client/src/views/HowItWorks.tsx @@ -1,133 +1,98 @@ import * as React from 'react'; import Typography from '@mui/material/Typography'; import { makeStyles } from '@mui/styles'; -import { Box, Grid, Container } from '@mui/material'; +import { Box, Grid } from '@mui/material'; import type { Theme } from '@mui/material/styles'; +import HowItWorksCards from './HowItWorksCards'; +import PeopleSignup from '../assets/HowItWorks/people-signup.svg'; +import PeopleSharing from '../assets/HowItWorks/people-sharing.svg'; +import PeopleWorking from '../assets/HowItWorks/people-working.svg'; +import PeopleFlag from '../assets/HowItWorks/people-flag.svg'; -import QuestionList from '../components/QuestionList'; -import { BulletGrid, InstructionGrid } from '../components/DisplayGrids'; +const loremIpsum = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. '; -const loremIpsum = - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Facilisis placerat et, at vel tristique. Ac, gravida in quam gravida. Vel pretium nunc cursus donec enim. Sapien facilisis mauris justo, augue pharetra. Dignissim euismod fermentum sit gravida ut.'; - -const nonprofitInstructionList = [ +const nonprofitinstructionsArray = [ { - title: '1. Post your Need.', - body: loremIpsum, - image: 'https://picsum.photos/seed/nonprofit/600', + title: 'Sign up with Givingful', + body: 'Create a profile to let our community know about your nonprofit.', + image: PeopleSignup, + buttonText: 'View More', }, { - title: '2. Connect with donors.', - body: loremIpsum, - image: 'https://picsum.photos/seed/nonprofit/600', + title: 'Share your nonprofit’s needs', + body: 'Post a description of items and skills that can help your organization.', + image: PeopleSharing, + buttonText: 'Post a Need', }, { - title: '3. Accomplish Goal.', - body: loremIpsum, - image: 'https://picsum.photos/seed/nonprofit/600', + title: 'Claim an offer', + body: 'Coordinate to receive goods offered by those in the community.', + image: PeopleWorking, + buttonText: 'See Offers', }, -]; -const citizenInstructionList = [ { - title: '1. Post your donation', - body: loremIpsum, - image: 'https://picsum.photos/seed/picsum/600', + title: 'Succeed in your goals', + body: 'See your nonprofit thrive with your community’s help.', + image: PeopleFlag, + buttonText: 'Read Testimonials', }, +]; + +const citizeninstructionsArray = [ { - title: '2. Connect with nonprofits', - body: loremIpsum, - image: 'https://picsum.photos/seed/picsum/600', + title: 'Sign up with Givingful', + body: 'Create a profile to let our community know about your nonprofit.', + image: PeopleSignup, + buttonText: 'View More', }, { - title: '3. Make a difference', + title: 'Post your donation', body: loremIpsum, - image: 'https://picsum.photos/seed/picsum/600', + image: PeopleSharing, + buttonText: 'View More', }, -]; - -const nonprofitBulletList = { - title: "Whatever your nonprofit goal, we're here to help.", - list: [ - loremIpsum.slice(0, 97), - loremIpsum.slice(0, 97), - loremIpsum.slice(0, 97), - loremIpsum.slice(0, 97), - ], -}; -const citizenBulletList = { - title: "We're helping you make a difference in your community.", - list: [ - loremIpsum.slice(0, 97), - loremIpsum.slice(0, 97), - loremIpsum.slice(0, 97), - loremIpsum.slice(0, 97), - ], -}; - -const nonprofitQuestions = [ - { question: 'Can we post for volunteer help?', answer: loremIpsum.slice(0, 150) }, { - question: 'Can we keep working with a person we exchanged with?', - answer: loremIpsum.slice(0, 150), + title: 'Connect with nonprofits', + body: loremIpsum, + image: PeopleWorking, + buttonText: 'View More', }, - { question: 'How do we see what has been donated previously?', answer: loremIpsum.slice(0, 150) }, -]; -const citizenQuestions = [ - { question: 'Can I offer to volunteer?', answer: loremIpsum.slice(0, 150) }, { - question: 'Can I keep working with a nonprofit I exchanged with?', - answer: loremIpsum.slice(0, 150), + title: 'Make a difference', + body: loremIpsum, + image: PeopleFlag, + buttonText: 'View More', }, ]; const useStyles = makeStyles((theme: Theme) => ({ - questionSection: { - width: '100%', - padding: '0 10px', - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - justifyContent: 'center', - }, - greySection: { - backgroundColor: '#C4C4C4', - }, columns: { display: 'flex', }, - titleBox: { - height: 200, - backgroundColor: '#C4C4C4', - }, tabs: { - margin: 'auto', padding: '0', - borderBottom: '1px solid #C4C4C4', - '& .MuiContainer-root': { - paddingTop: 0, - paddingBottom: 0, - }, + }, + tabsGrid: { + gridTemplateColumns: 'repeat(2, 3fr)', + justifyItems: 'start', }, tabMenuLink: { - padding: '20px', + padding: '10px', paddingBottom: '0!important', + minWidth: '200px', }, button: { - fontSize: '2rem', - margin: '20px 0 0 0', - borderBottom: '11px solid #FFFFFF', - }, - hidden: { - display: 'none', + fontFamily: 'Poppins', + fontSize: '1.5rem', }, selected: { - borderBottom: `11px solid ${theme.palette.primary.main}`, + fontWeight: 500, + borderRadius: '5px', + borderBottom: `8px solid #EF6A60`, }, - questions: { - alignSelf: 'flex-end', - width: '100%', - maxWidth: '700px', + hidden: { + display: 'none', }, })); @@ -143,78 +108,59 @@ function HowItWorks() { }; return ( - <> - - + - - - handleClickTab('nonprofit')} - className={classes.tabMenuLink} + + handleClickTab('nonprofit')} + className={classes.tabMenuLink} + > + -

- I'm on a nonprofit team -

- - handleClickTab('citizen')} - className={classes.tabMenuLink} + For Nonprofits + + + handleClickTab('citizen')} + className={classes.tabMenuLink} + > + -

- I'm a citizen -

- + For Individuals + - + - - - - - - - - - {tabSelected === 'nonprofit' ? nonprofitBulletList.title : citizenBulletList.title} - - - - - - - - - Still have questions? - - - - - - - + + How it Works + + + ); } diff --git a/client/src/views/HowItWorksCard.tsx b/client/src/views/HowItWorksCard.tsx new file mode 100644 index 00000000..4f7f8292 --- /dev/null +++ b/client/src/views/HowItWorksCard.tsx @@ -0,0 +1,118 @@ +import Typography from '@mui/material/Typography'; +import { Box, Button } from '@mui/material'; + +type HowItWorksCardProps = { + instructions: { title: string; body: string; image: string; buttonText: string }; +}; + +function HowItWorksCard(props: HowItWorksCardProps) { + return ( + + + How It Works + + + + {props.instructions.title} + + + {props.instructions.body} + + + + + + + ); +} + +export default HowItWorksCard; diff --git a/client/src/views/HowItWorksCards.tsx b/client/src/views/HowItWorksCards.tsx new file mode 100644 index 00000000..b800b472 --- /dev/null +++ b/client/src/views/HowItWorksCards.tsx @@ -0,0 +1,33 @@ +import * as React from 'react'; +import { Box } from '@mui/material'; +import HowItWorksCard from './HowItWorksCard'; + +type HowItWorksCardsProps = { + instructionsArray: { title: string; body: string; image: string; buttonText: string }[]; +}; + +function HowItWorksCards(props: HowItWorksCardsProps) { + return ( + + {props.instructionsArray.map((instructions, i) => { + return ; + })} + + ); +} + +export default HowItWorksCards;