New landing page

frontend/package.json

@@ -11,6 +11,7 @@
     "react": "^18.3.1",
     "react-bootstrap": "^2.10.0",
     "react-dom": "^18.3.1",
+    "react-router-dom": "^7.14.0",
     "react-treeview": "^0.4.7",
     "styled-components": "^6.1.0",
     "uuid": "^8.2.0"

frontend/src/components/Landing.jsx

@@ -0,0 +1,58 @@
+import React from 'react'
+import 'styles/landing.css'
+import tigerImg from '../assets/TigerPath Landing Graphic.svg'
+import waveImg from '../assets/TigerPath Waves.svg'
+
+
+function Landing() {
+  return (
+    <div className="landing-container">
+        <svg className="landing-filter" width="0" height="0" aria-hidden="true">
+        <defs>
+            <filter id="sketchy">
+            <feTurbulence type="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" />
+            <feDisplacementMap in="SourceGraphic" in2="noise" scale="2.5" />
+            </filter>
+        </defs>
+        </svg>
+
+        <div className="upper-bar">
+            <a href="https://docs.google.com/forms/d/e/1FAIpQLSdjBwHsURKujVqfnUk7nyocAMnFDFI6fyubDmqYMgLElpm_Nw/viewform"
+                className="feedback-link hyperlink"
+                target="_blank"
+                rel="noopener noreferrer">
+                feedback
+            </a>
+        </div>
+    <main className="body">
+        <div className="landing-left">
+            <div className="landing-left-graphics">
+                <img src={tigerImg} className="tiger-illustration"
+                alt="Tiger on a ship" />
+            </div>
+        </div>
+
+        <div className="landing-right">
+            <div className="landing-header">
+                <h1 className="landing-title">TigerPath</h1>
+                <h2 className="landing-subtitle">
+                    Plan your entire Princeton journey with TigerPath.</h2>
+            </div>
+                <a href="/login" className="sign-in-button">SIGN IN</a>
+            <p className="landing-credit">Made by <a href="https://tigerapps.org/" className="hyperlink">TigerApps</a>
+            </p>
+        </div>
+    </main>
+
+    <div className="wave-wrapper" aria-hidden="true">
+      <div className="wave-carousel">
+        <img src={waveImg} className="wave-illustration" alt=""/>
+        <img src={waveImg} className="wave-illustration" alt=""/>
+        <img src={waveImg} className="wave-illustration" alt=""/>
+      </div>
+    </div>
+    </div>
+  )
+}
+
+export default Landing

frontend/src/index.jsx

@@ -7,7 +7,9 @@ import './legacy/tutorial';
 
 import React from 'react';
 import { createRoot } from 'react-dom/client';
+import { BrowserRouter, Routes, Route } from 'react-router-dom'; // landing page
 import App from 'components/App';
+import Landing from 'components/Landing';
 import 'styles/app-style.css';
 import 'styles/messages.css';
 import 'styles/Courses.css';

frontend/src/landing.jsx

@@ -0,0 +1,9 @@
+import './bootstrap-init';
+
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import Landing from 'components/Landing';
+
+const container = document.getElementById('app');
+const root = createRoot(container);
+root.render(<Landing />);

frontend/src/styles/app-style.css

@@ -95,6 +95,7 @@ h6 {
   margin-left: 0;
 }
 
+/* account for navbar, 56 px*/
 #app {
   height: calc(100vh - 78px);
   overflow: hidden;