diff --git a/frontend/src/components/ElectionForm/QuickPoll.tsx b/frontend/src/components/ElectionForm/QuickPoll.tsx index db7a9de4..2c9d617c 100644 --- a/frontend/src/components/ElectionForm/QuickPoll.tsx +++ b/frontend/src/components/ElectionForm/QuickPoll.tsx @@ -5,12 +5,12 @@ import TextField from "@mui/material/TextField"; import { useNavigate } from "react-router" import structuredClone from '@ungap/structured-clone'; import { StyledButton, StyledTextField } from '../styles.js' -import { Button, IconButton } from '@mui/material'; +import { Box, Button, IconButton } from '@mui/material'; import DeleteIcon from '@mui/icons-material/Delete'; -import { useCookie } from '../../hooks/useCookie'; import { useLocalStorage } from '../../hooks/useLocalStorage'; import Typography from '@mui/material/Typography'; import { usePostElection } from '../../hooks/useAPI'; +import { useCookie } from '../../hooks/useCookie'; const QuickPoll = ({ authSession }) => { const [tempID, setTempID] = useCookie('temp_id', '0') @@ -141,24 +141,46 @@ const QuickPoll = ({ authSession }) => { return (
- - + + { + setTitleError(false) + applyElectionUpdate(election => { election.title = e.target.value }) + }} + onKeyPress={(ev) => { + if (ev.key === 'Enter') { + handleEnter(ev) + } + }} + /> + {election.races[0].candidates?.map((candidate, index) => ( { - setTitleError(false) - applyElectionUpdate(election => { election.title = e.target.value }) + onUpdateCandidate(index, e.target.value) }} onKeyPress={(ev) => { if (ev.key === 'Enter') { @@ -166,66 +188,39 @@ const QuickPoll = ({ authSession }) => { } }} /> - - - {election.races[0].candidates?.map((candidate, index) => ( - - { - onUpdateCandidate(index, e.target.value) - }} - onKeyPress={(ev) => { - if (ev.key === 'Enter') { - handleEnter(ev) - } - }} - /> - ))} - + + + Create Quick Poll + + {!authSession.isLoggedIn() ? - - Create Quick Poll + disabled={isPending} + onClick={() => authSession.openLogin()}> + Log in for more settings - - - {!authSession.isLoggedIn() ? - authSession.openLogin()}> - Log in for more settings - - : - - Explore more settings - - } - - - - + : + + Explore more settings + + } + setElectionData(QuickPollTemplate)} > - - + +
) } diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx index f5600aeb..b77df5a5 100644 --- a/frontend/src/components/Footer.tsx +++ b/frontend/src/components/Footer.tsx @@ -10,8 +10,7 @@ export default function Footer() { - theme.palette.grey[200],//Make theme pallete for this + backgroundColor: 'var(--brand-gray-1)', p: 6, width: '100%', mt: 'auto' diff --git a/frontend/src/components/LandingPage.tsx b/frontend/src/components/LandingPage.tsx index 0ffc0523..6c9d5865 100644 --- a/frontend/src/components/LandingPage.tsx +++ b/frontend/src/components/LandingPage.tsx @@ -3,45 +3,63 @@ import Grid from "@mui/material/Grid"; import Typography from '@mui/material/Typography'; import Box from '@mui/material/Box'; import QuickPoll from './ElectionForm/QuickPoll'; +import LandingPageHero from './LandingPage/LandingPageHero'; +import LandingPageFeatureElections from './LandingPage/LandingPageFeaturedElections'; +import LandingPageFeatures from './LandingPage/LandingPageFeatures'; +import LandingPageSignUpBar from './LandingPage/LandingPageSignUpBar'; +import LandingPageTestimonials from './LandingPage/LandingPageTestimonials'; +import { Paper } from '@mui/material'; +import LandingPagePricing from './LandingPage/LandingPagePricing'; const LandingPage = ({ authSession }) => { return ( - - - - STAR Elections - - - Open source election software - - - From quick polls to highly secure elections - - - Voting methods approved by the Equal Vote Coalition - - - - - - + + + + + + $0.00, + description: <>Unlimited voters for Public elections

Private elections up to 100 voters + }, + { + title: 'Professional', + price: <>Contact for quote, + description: <>Private elections over 100 voters

All proceeds go to non-profit use

Discounts are available on request

Email elections@equal.vote + }, + ]}/> ) } diff --git a/frontend/src/components/LandingPage/FeaturedElection.tsx b/frontend/src/components/LandingPage/FeaturedElection.tsx new file mode 100644 index 00000000..2aae9e5c --- /dev/null +++ b/frontend/src/components/LandingPage/FeaturedElection.tsx @@ -0,0 +1,24 @@ +import { Card, CardActionArea, CardContent, Paper, Typography } from "@mui/material"; +import React from 'react'; +import { useNavigate } from "react-router"; + + +export default ({electionId}) => { + const navigate = useNavigate(); + + return navigate(`/Election/${electionId}`)} elevation={8} sx={{ + width: '100%', + maxWidth: '20rem', + display: 'flex', + flexDirection: 'column', + flexShrink: '0', + }}> + + + Election Title + election info + election info + + + +} \ No newline at end of file diff --git a/frontend/src/components/LandingPage/LandingPageFeaturedElections.tsx b/frontend/src/components/LandingPage/LandingPageFeaturedElections.tsx new file mode 100644 index 00000000..58256f7c --- /dev/null +++ b/frontend/src/components/LandingPage/LandingPageFeaturedElections.tsx @@ -0,0 +1,32 @@ +import { Box, Typography } from '@mui/material' +import React from 'react' +import FeaturedElection from './FeaturedElection' + +export default ({electionIds}) => { + return + + Vote in a Featured Public Election + + + {electionIds.map(electionId => )} + + +} \ No newline at end of file diff --git a/frontend/src/components/LandingPage/LandingPageFeatures.tsx b/frontend/src/components/LandingPage/LandingPageFeatures.tsx new file mode 100644 index 00000000..ad3bf8d4 --- /dev/null +++ b/frontend/src/components/LandingPage/LandingPageFeatures.tsx @@ -0,0 +1,74 @@ +import { Box, Grid, Typography } from '@mui/material' +import React from 'react' +import FeaturedElection from './FeaturedElection' + +export default () => { + let rowSxProps = { + paddingLeft: 5, + display: 'flex', + flexDirection: {xs: 'column', lg: 'row'}, + width: '100%', + maxWidth: '110rem', + gap: {xs: '0rem', lg: '8rem'}, + }; + + let itemSxProps= { + flexShrink: '0', + width: {xs: '100%', lg: '35%'}, + }; + + return + Features + + + + Voting Methods + Supports a variety of single and multiwinner voting methods + + +
    +
  • STAR Voting
    • +
  • STAR PR
    • +
  • Ranked Robin
    • +
+ + + + +
    +
  • Direct Link
    great for Open elections
    • +
  • Email List
    ballots will be emailed to voters
    • +
  • Voter ID List
    voters input an id to access ballot
    • +
+ + + Reach your Voters + Lots of ways to share ballots with Voters + + + + + Use Cases + Good for elections of all shapes and sizes + + +
    +
  • Public Polls
    for online opinion polling
    • +
  • Private Polls
    for your club
    • +
  • Official Elections
    for your organization
    • +
+ + + + +} \ No newline at end of file diff --git a/frontend/src/components/LandingPage/LandingPageHero.tsx b/frontend/src/components/LandingPage/LandingPageHero.tsx new file mode 100644 index 00000000..aa5c2be8 --- /dev/null +++ b/frontend/src/components/LandingPage/LandingPageHero.tsx @@ -0,0 +1,70 @@ +import Box from '@mui/material/Box' +import Grid from '@mui/material/Grid' +import Typography from '@mui/material/Typography' +import React from 'react' +import QuickPoll from '../ElectionForm/QuickPoll' + +export default ({authSession}) => { + return ( + + + + + STAR Elections + + + Open source election software + + + From quick polls to highly secure elections + + + Voting methods approved by the Equal Vote Coalition + + + + Elections Created + 10001 + + + Votes Cast + 10001 + + + + + + + + + + + ) +} \ No newline at end of file diff --git a/frontend/src/components/LandingPage/LandingPagePricing.tsx b/frontend/src/components/LandingPage/LandingPagePricing.tsx new file mode 100644 index 00000000..8fd5592c --- /dev/null +++ b/frontend/src/components/LandingPage/LandingPagePricing.tsx @@ -0,0 +1,44 @@ +import { Box, Paper, Typography } from '@mui/material' +import React from 'react' + +export default ({options}) => { + return + + Pricing + + + {options.map(option => + + {option.title} + {option.price} + {option.description} + + )} + + +} \ No newline at end of file diff --git a/frontend/src/components/LandingPage/LandingPageSignUpBar.tsx b/frontend/src/components/LandingPage/LandingPageSignUpBar.tsx new file mode 100644 index 00000000..52bf08b9 --- /dev/null +++ b/frontend/src/components/LandingPage/LandingPageSignUpBar.tsx @@ -0,0 +1,38 @@ +import { Box, Button, Typography } from '@mui/material'; +import React from 'react'; +import { StyledButton } from '../styles'; + +export default ({authSession}) => + + + Sign up to create your first election (It's Free!) + {/*I just copied styled button but removed the full width*/ } + + + \ No newline at end of file diff --git a/frontend/src/components/LandingPage/LandingPageTestimonials.tsx b/frontend/src/components/LandingPage/LandingPageTestimonials.tsx new file mode 100644 index 00000000..dfc67dea --- /dev/null +++ b/frontend/src/components/LandingPage/LandingPageTestimonials.tsx @@ -0,0 +1,46 @@ +import { Box, Typography } from '@mui/material' +import React from 'react' + +export default ({testimonials}) => { + return + + Testimonials + + + {testimonials.map(testimonial => + + + "{testimonial.quote}"
-{testimonial.name} + + + )} + + +} \ No newline at end of file diff --git a/frontend/src/index.css b/frontend/src/index.css index 80b30a07..5fc39811 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -14,7 +14,8 @@ --ltbrand-red: #FF6069FF; --brand-purple: #4D2586; - --brand-ltblue: #2AA2B3; + --brand-ltblue: #2AA2B3; + --brand-ltblue-comma: 42, 162, 179; /* comma version to be used within rgba */ --brand-blue: #02627c; --brand-gold: #FFE156; --brand-red: #EE2C53; @@ -371,4 +372,12 @@ code { .activewinnerResultTab{ border-bottom: 1px solid transparent; background-color: var(--brand-white); +} + +.featuredElection:hover{ + /*Copied from Paper elevation 8, except for color change and doubled opacity*/ + box-shadow: + 0px 5px 5px -3px rgba(var(--brand-ltblue-comma), 0.4), + 0px 8px 10px 1px rgba(var(--brand-ltblue-comma), 0.28), + 0px 3px 14px 2px rgba(var(--brand-ltblue-comma), 0.24); } \ No newline at end of file