Block out landing page elements

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,91 +141,86 @@ const QuickPoll = ({ authSession }) => {
 
     return (
         <form onSubmit={onSubmit} >
-            <Grid container>
-                <Grid item xs={12} sx={{ p: 1, pt: 2 }}>
+            <Box sx={{
+                display: 'flex',
+                gap: 2,
+                flexDirection: 'column',
+            }}>
+                <StyledTextField
+                    autoFocus
+                    error={titleError}
+                    helperText={titleError ? "Election name is required" : ""}
+                    id="election-name"
+                    name="name"
+                    type="text"
+                    value={election.title}
+                    label="What is your poll question?"
+                    sx={{
+                        label: {fontWeight: 600, fontSize: 18}
+                    }}
+                    required
+                    onChange={(e) => {
+                        setTitleError(false)
+                        applyElectionUpdate(election => { election.title = e.target.value })
+                    }}
+                    onKeyPress={(ev) => {
+                        if (ev.key === 'Enter') {
+                            handleEnter(ev)
+                        }
+                    }}
+                />
+                {election.races[0].candidates?.map((candidate, index) => (
                     <StyledTextField
-                        autoFocus
-                        error={titleError}
-                        helperText={titleError ? "Election name is required" : ""}
-                        id="election-name"
-                        name="name"
+                        id={`candidate-name-${String(index)}`}
+                        name="candidate-name"
                         type="text"
-                        value={election.title}
-                        label="What is your poll question?"
+                        value={candidate.candidate_name}
+                        label={`Option ${index + 1}`}
                         sx={{
                             label: {fontWeight: 600, fontSize: 18}
                         }}
-                        required
                         onChange={(e) => {
-                            setTitleError(false)
-                            applyElectionUpdate(election => { election.title = e.target.value })
+                            onUpdateCandidate(index, e.target.value)
                         }}
                         onKeyPress={(ev) => {
                             if (ev.key === 'Enter') {
                                 handleEnter(ev)
                             }
                         }}
                     />
-                </Grid>
-
-                {election.races[0].candidates?.map((candidate, index) => (
-                    <Grid item xs={12} sx={{ p: 1 }}>
-                        <StyledTextField
-                            id={`candidate-name-${String(index)}`}
-                            name="candidate-name"
-                            type="text"
-                            value={candidate.candidate_name}
-                            label={`Option ${index + 1}`}
-                            sx={{
-                                label: {fontWeight: 600, fontSize: 18}
-                            }}
-                            onChange={(e) => {
-                                onUpdateCandidate(index, e.target.value)
-                            }}
-                            onKeyPress={(ev) => {
-                                if (ev.key === 'Enter') {
-                                    handleEnter(ev)
-                                }
-                            }}
-                        />
-                    </Grid>
                 ))}
-                <Grid item xs={12} sx={{ p: 1 }}>
+                <StyledButton
+                    type='submit'
+                    variant="contained"
+                    disabled={isPending} >
+
+                    Create Quick Poll
+                </StyledButton>
+                {!authSession.isLoggedIn() ?
                     <StyledButton
-                        type='submit'
                         variant="contained"
-                        disabled={isPending} >
-
-                        Create Quick Poll
+                        disabled={isPending}
+                        onClick={() => authSession.openLogin()}>
+                        Log in for more settings
                     </StyledButton>
-                </Grid>
-                <Grid item xs={12} sx={{ p: 1 }}>
-                    {!authSession.isLoggedIn() ?
-                        <StyledButton
-                            variant="contained"
-                            disabled={isPending}
-                            onClick={() => authSession.openLogin()}>
-                            Log in for more settings
-                        </StyledButton>
-                        :
-                        <StyledButton
-                            variant="contained"
-                            disabled={isPending}
-                            href='/CreateElection'>
-                            Explore more settings
-                        </StyledButton>
-                    }
-                </Grid>
-                <Grid item xs={11}>
-                </Grid>
-                <Grid item xs={1} sx={{ p: 1 }}>
+                    :
+                    <StyledButton
+                        variant="contained"
+                        disabled={isPending}
+                        href='/CreateElection'>
+                        Explore more settings
+                    </StyledButton>
+                }
+                <Box sx={{
+                    marginLeft: 'auto'
+                }}>
                     <IconButton
                         type="button"
                         onClick={() => setElectionData(QuickPollTemplate)} >
                         <DeleteIcon />
                     </IconButton>
-                </Grid>
-            </Grid>
+                </Box>
+            </Box>
         </form >
     )
 }

frontend/src/components/Footer.tsx

@@ -10,8 +10,7 @@ export default function Footer() {
     <Box
       component="footer"
       sx={{
-        backgroundColor: (theme) =>
-          theme.palette.grey[200],//Make theme pallete for this
+        backgroundColor: 'var(--brand-gray-1)',
         p: 6,
         width: '100%',
         mt: 'auto'

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 (
         <Box sx={{
             width: '100%',
             display: 'flex',
+            flexDirection: 'column',
+            gap: '15rem',
             minHeight: '600px',
-            justifyContent: 'center',
-            pt: { xs: 0, md: 0 },
+            margin: 'auto',
+            paddingTop: '8rem',
+            paddingBottom: '8rem',
         }}>
-            <Grid container sx={{
-                maxWidth: '1300px',
-                p: { xs: 2, md: 2 },
-            }}>
-                <Grid item xs={12} md={7}>
-                    <Typography variant="h3" style={{ fontWeight: 700 }} >
-                        STAR Elections
-                    </Typography>
-                    <Typography variant="h5" style={{
-                        opacity: '0.7',
-                    }}>
-                        Open source election software
-                    </Typography>
-                    <Typography variant="h5" style={{
-                        opacity: '0.7',
-                    }}>
-                        From quick polls to highly secure elections
-                    </Typography>
-                    <Typography variant="h5" style={{
-                        opacity: '0.7',
-                        paddingBottom: '30px',
-                    }}>
-                        Voting methods approved by the <a target="_blank" href={'https://www.equal.vote'} style={{ color: 'inherit', textDecoration: 'underline' }}>Equal Vote Coalition</a>
-                    </Typography>
-                </Grid>
-                <Grid item xs={12} md={5}>
-                    <QuickPoll authSession={authSession} />
-                </Grid>
-            </Grid>
+            <LandingPageHero authSession={authSession}/>
+            <LandingPageFeatureElections electionIds={[
+                '52c2b793-bdfe-49e8-b4cf-f448108c39af',
+                'e45e93b1-9e4e-4a87-bb80-e7dbbd6e4721',
+                '5c84e93b-b01c-4ab0-82ee-7181cb7ac995'
+            ]}/>
+            <LandingPageFeatures/>
+            <LandingPageSignUpBar authSession={authSession}/>
+            <LandingPageTestimonials testimonials={[
+                {
+                    quote: 'STAR Voting is Awesome!',
+                    name: 'John Doe',
+                    url: 'https://yt3.googleusercontent.com/el7OsIUIJVHjHIwsNXgrBVft0Ht3RSfJ3wO94MQivXaa_IK0JMGlHrPIbvt8fYtXvjJfErcdG-Y=s176-c-k-c0x00ffffff-no-rj'
+                },
+                {
+                    quote: 'STAR Voting is Awesome!',
+                    name: 'Jane Doe',
+                    url: 'https://yt3.googleusercontent.com/el7OsIUIJVHjHIwsNXgrBVft0Ht3RSfJ3wO94MQivXaa_IK0JMGlHrPIbvt8fYtXvjJfErcdG-Y=s176-c-k-c0x00ffffff-no-rj'
+                },
+                {
+                    quote: 'STAR Voting is Awesome!',
+                    name: 'Equal Vote',
+                    url: 'https://yt3.googleusercontent.com/el7OsIUIJVHjHIwsNXgrBVft0Ht3RSfJ3wO94MQivXaa_IK0JMGlHrPIbvt8fYtXvjJfErcdG-Y=s176-c-k-c0x00ffffff-no-rj'
+                },
+            ]}/>
+            <LandingPagePricing options={[
+                {
+                    title: 'Free Tier',
+                    price: <b>$0.00</b>,
+                    description: <>Unlimited voters for Public elections<br/><br/>Private elections up to 100 voters</>
+                },
+                {
+                    title: 'Professional',
+                    price: <><b>Contact for quote</b></>,
+                    description: <>Private elections over 100 voters<br/><br/>All proceeds go to non-profit use<br/><br/>Discounts are available on request<br/><br/>Email [email protected]</>
+                },
+            ]}/>
         </Box>
     )
 }

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 <Card className='featuredElection' onClick={() => navigate(`/Election/${electionId}`)} elevation={8} sx={{
+        width: '100%',
+        maxWidth: '20rem',
+        display: 'flex',
+        flexDirection: 'column',
+        flexShrink: '0',
+    }}>
+        <CardActionArea sx={{p: { xs: 2, md: 2 }}}>
+            <CardContent>
+                <Typography variant='h5'>Election Title</Typography>
+                <Typography variant='h6'>election info</Typography>
+                <Typography variant='h6'>election info</Typography>
+            </CardContent>
+        </CardActionArea>
+    </Card>
+}

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 <Box sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        background: 'var(--brand-gray-1)',
+        clip: 'unset',
+        width: '100%',
+        p: { xs: 2},
+    }}>
+        <Box sx={{
+            width: '100%',
+            maxWidth: '1300px',
+            margin: 'auto',
+        }}>
+            <Typography variant='h4' sx={{textAlign: 'left'}}>Vote in a Featured Public Election</Typography>
+        </Box>
+        <Box sx={{
+            display: 'flex',
+            flexDirection: 'row',
+            gap: '2rem',
+            p: { xs: 4},
+            justifyContent: 'center',
+            flexWrap: 'wrap',
+        }}>
+            {electionIds.map(electionId => <FeaturedElection electionId={electionId}/>)}
+        </Box>
+    </Box>
+}