add hero section img & styling

EthanBonsignori · Jun 15, 2024 · bf5ff05 · bf5ff05
1 parent cd3fd2f
commit bf5ff05
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 7 deletions.
diff --git a/client/src/assets/feedback.png b/client/src/assets/feedback.png
diff --git a/client/src/index.css b/client/src/index.css
@@ -17,3 +17,32 @@ body {
 .caution-tape a {
   text-decoration: underline;
 }
+
+.hero-section {
+  height: 600px;
+  margin-left: 40px;
+  margin-right: 40px;
+  flex-direction: row-reverse;
+  background-color: #f9f9f9;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 40px;
+}
+
+.hero-section img {
+  width: 100%;
+  height: 500px;
+}
+
+.hero-text h2 {
+  font-size: 2.5rem;
+  font-weight: 700;
+}
+
+.hero-text p {
+  font-size: 1.2rem;
+  font-weight: 400;
+  margin-top: 15px;
+  margin-bottom: 20px;
+}
diff --git a/client/src/routes/Root.tsx b/client/src/routes/Root.tsx
@@ -1,7 +1,7 @@
 import { Button, Typography } from "@mui/material";
-import Grid from "@mui/material/Grid";
 import { FC, useEffect, useRef } from "react";
 import Typed from "typed.js";
+import feedbackImg from "../assets/feedback.png";
 import Layout from "../components/Layout";
 
 const Root: FC = () => {
@@ -38,19 +38,31 @@ const Root: FC = () => {
   // FIXME: landing page not as early return
   return (
     <Layout>
-      <Grid container spacing={1}>
-        <Grid item xs={12} className="">
+      <div className="hero-section">
+        <img src={feedbackImg} alt="UserVote" className="hero-image" />
+        <div className="hero-text">
           <Typography variant="h2">Collect feedback.</Typography>
           <Typography variant="h2">
             Engage your <span className="" ref={typedRef} />
           </Typography>
-        </Grid>
-        <Grid item>
+          <Typography>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam, quis nostrud exercitation ullamco laboris nisi
+          </Typography>
           <Button variant="contained" color="primary">
             See more
           </Button>
-        </Grid>
-      </Grid>
+          <Button
+            variant="outlined"
+            color="primary"
+            className="plans-pricing"
+            sx={{ ml: "15px" }}
+          >
+            Plans & Pricing
+          </Button>
+        </div>
+      </div>
     </Layout>
   );
 };