Merge pull request #538 from cornell-dti/rj353/landing_page

New Landing Page

.github/workflows/ci-check.yml

@@ -1,6 +1,5 @@
 name: CI Check
 on: push
-
 jobs:
   check:
     runs-on: ubuntu-latest
@@ -10,11 +9,25 @@ jobs:
         uses: actions/setup-node@v1
         with:
           node-version: '20.x'
-      - name: Install Dependencies
-        run: npm install
+      - name: Clean Install
+        run: |
+          rm -rf node_modules
+          rm -rf package-lock.json
+          npm cache clean --force
+          npm install
+          echo "Prettier version:"
+          npx prettier --version
+      - name: Debug Prettier
+        run: |
+          echo "Files to be checked:"
+          npx prettier --list-different "**/*.{ts,js,tsx,jsx,css}"
+          echo "Checking specific file:"
+          npx prettier --check "frontend/src/pages/Landing/Landing.tsx"
+          echo "Running full check:"
+          ls -la frontend/src/pages/Landing/
+          cat frontend/src/pages/Landing/Landing.tsx | od -c
+          npm run format:check
       - name: Run Linter
         run: npm run lint
-      - name: Run Prettier
-        run: npm run format:check
       - name: Run Type Check
-        run: npm run type-check
+        run: npm run type-check

frontend/src/pages/Landing/Landing.tsx

@@ -3,6 +3,16 @@ import styles from './landing.module.css';
 import Footer from '../../components/Footer/Footer';
 import { logo } from '../../icons/other';
 import dti from './dti.png';
+import topLaptop from './landing-images/laptop1.svg';
+import bottomLaptop from './landing-images/laptop2.svg';
+import phone from './landing-images/iPhone.svg';
+
+const cuLiftTerms = `https://sds.cornell.edu/accommodations-services
+/transportation/culift-guidelines`;
+
+const wavePath = `M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,
+168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,
+26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z`;
 
 type LandingPropType = {
   students: ReactElement;
@@ -16,6 +26,11 @@ const Landing = ({ students, admins }: LandingPropType) => {
   return (
     <main id="main">
       <div className={styles.home}>
+        <div className={styles.tosButtonContainer}>
+          <a href={cuLiftTerms} target="_blank">
+            <button className={styles.tosButton}>Terms of Service</button>
+          </a>
+        </div>
         <div className={styles.main}>
           <div className={styles.left}>
             <img src={logo} className={styles.badge} alt="Carriage logo" />
@@ -29,11 +44,52 @@ const Landing = ({ students, admins }: LandingPropType) => {
                 <div className={styles.container_item_right}>{admins}</div>
               </div>
             </div>
-            <div className={styles.dti_container}>
-              <img src={dti} className={styles.dti_logo} alt="DTI Logo" />
-            </div>
           </div>
         </div>
+
+        <div className={styles.customShape}>
+          <svg
+            data-name="Layer 1"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 1200 120"
+            preserveAspectRatio="none"
+          >
+            <path d={wavePath.trim()} className={styles.shapeFill}></path>
+          </svg>
+        </div>
+      </div>
+
+      <div className={styles.information}>
+        <div className={styles.adminInfo}>
+          <p>
+            Administrators add students and employees and assign rides on Admin
+            Web.
+          </p>
+          <img src={topLaptop} alt="top laptop" className={styles.topLaptop} />
+        </div>
+      </div>
+
+      <div className={styles.studentInfo}>
+        <div className={styles.studentImgContainer}>
+          <img
+            src={bottomLaptop}
+            alt="bottom laptop"
+            className={styles.bottomLaptop}
+          />
+          <img src={phone} alt="phone" className={styles.phone} />
+        </div>
+
+        <p>
+          Students Schedule, Edit, and Cancel rides on Rider Web and Mobile.
+        </p>
+      </div>
+
+      <div className={styles.footer}>
+        <div className={styles.dti_container}>
+          <a href="https://www.cornelldti.org/" target="_blank">
+            <img src={dti} className={styles.dti_logo} alt="DTI Logo" />
+          </a>
+        </div>
       </div>
     </main>
   );

frontend/src/pages/Landing/landing.module.css

@@ -1,4 +1,5 @@
 .home {
+  position: relative;
   background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
     url(./campus.jpg) no-repeat center center fixed;
   -webkit-background-size: cover;
@@ -7,18 +8,41 @@
   background-size: cover;
   height: 100vh;
   display: flex;
+  flex-direction: row;
   justify-content: center;
-  align-items: center;
-  text-align: center;
+  align-items: flex-start;
   padding: 0 1.25rem;
 }
+
 .main {
   border: 1px solid black;
   border-radius: 16px;
   max-width: 850px;
-  min-height: 550px;
+  height: 550px;
   display: flex;
   flex-grow: 1;
+  margin-top: 7.5rem;
+}
+
+.tosButtonContainer {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+}
+
+.tosButton {
+  width: 11rem;
+  height: 2.5rem;
+  border: 0;
+  background-color: white;
+  color: black;
+  border-radius: 0.625rem;
+  cursor: pointer;
+  font-size: 1rem;
+}
+
+.tosButton:hover {
+  background-color: #e1e1e1;
 }
 
 .left {
@@ -89,6 +113,92 @@
   position: relative;
 }
 
+.loginContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.customShape {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  overflow: hidden;
+  line-height: 0;
+  transform: rotate(180deg);
+  height: 15%;
+  z-index: 10;
+}
+
+.customShape svg {
+  position: absolute;
+  display: block;
+  width: calc(142% + 1.3px);
+}
+
+.shapeFill {
+  fill: white;
+}
+
+.information {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: flex-start;
+}
+
+.adminInfo {
+  padding: 9rem 8rem 9rem 8rem;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  column-gap: 13rem;
+  justify-content: center;
+}
+
+.adminInfo p {
+  font-size: 40px;
+  min-width: 30%;
+}
+
+.studentInfo {
+  background: rgb(25, 25, 25);
+  padding: 5rem 8rem 9rem 8rem;
+  display: flex;
+  flex-direction: row;
+  column-gap: 9rem;
+  align-items: center;
+  justify-content: center;
+}
+
+.studentInfo p {
+  color: white;
+  font-size: 40px;
+  min-width: 30%;
+}
+
+.studentImgContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: row;
+  column-gap: 4rem;
+}
+
+.bottomLaptop {
+  width: 670px;
+  height: auto;
+}
+
+.phone {
+  width: 220px;
+  height: 100%;
+}
+
+/* Landing page is almost fully responsive. It still needs to vertical media queries. */
+
 @media (max-width: 400px) {
   .container {
     flex-direction: column;
@@ -107,16 +217,75 @@
   }
 }
 
-@media (max-height: 600px) {
+@media (max-width: 600px) {
   .main {
     min-height: 0px;
   }
 }
 
-.heading {
-  width: 100%;
-  font-size: 32;
-  font-weight: bold;
+@media (max-width: 1425px) {
+  .studentInfo {
+    flex-direction: column;
+    row-gap: 3rem;
+    padding: 5rem 6rem 5rem 6rem;
+  }
+
+  .studentInfo p {
+    margin-top: 5rem;
+  }
+}
+
+@media (max-width: 1230px) {
+  .adminInfo {
+    flex-direction: column;
+    row-gap: 3rem;
+    padding: 6rem 6rem 6rem 6rem;
+  }
+
+  .adminInfo p {
+    max-width: 70%;
+  }
+}
+
+@media (max-width: 1000px) {
+  .studentInfo {
+    padding: 6rem 3rem 6rem 3rem;
+  }
+
+  .studentImgContainer {
+    column-gap: 1rem;
+  }
+
+  .studentInfo p {
+    font-size: 20px;
+    max-width: 80%;
+  }
+
+  .bottomLaptop {
+    width: 320px;
+    height: auto;
+  }
+
+  .phone {
+    width: 120px;
+    height: auto;
+  }
+
+  .studentInfo p {
+    font-size: 30px;
+    margin-top: 2rem;
+  }
+
+  .topLaptop {
+    width: 470px;
+    height: auto;
+  }
+}
+
+@media (max-height: 600px) {
+  .main {
+    min-height: 0px;
+  }
 }
 
 .input {
@@ -128,5 +297,15 @@
 }
 
 .footer {
-  max-width: 400px;
+  background: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1px;
+  padding: 0.8% 0% 0.8% 0%;
+}
+
+.dti {
+  width: 14rem;
+  height: auto;
 }