Merge pull request #68 from leo-paz/CreatingSetting

Creating Home Page

frontend/grad-admissions-hub-app/src/Components/Clock.js

@@ -0,0 +1,25 @@
+import React, { useEffect, useRef, useState } from 'react';
+import lottie from 'lottie-web';
+
+function Clock(props) {
+  const [date, setDate] = useState(new Date());
+
+ useEffect(() => {
+  var timerID = setInterval( () => tick(), 1000 );
+
+  return function cleanup() {
+      clearInterval(timerID);
+    };
+ });
+
+   function tick() {
+    setDate(new Date());
+   }
+
+   return (
+      <div>
+        <h4>The local time is {date.toLocaleTimeString()}.</h4>
+      </div>
+    );
+}
+export default Clock;

frontend/grad-admissions-hub-app/src/Components/Navbar/Navbar.js

@@ -107,7 +107,7 @@ const Navbar = () => {
                     onMouseEnter={() => lottie.play('settings')}
                     onMouseLeave={() => lottie.stop('settings')}
                 >
-                    <Link className="nav-link">
+                    <Link className="nav-link" to="/settings">
                         <div className="standard-nav-animation" ref={settingsContainer}/>
                         {/* <CogIcon /> */}
                         <span className="link-text">Settings</span>

frontend/grad-admissions-hub-app/src/Components/SignUpLogIn/HomeSetUp.js

@@ -0,0 +1,36 @@
+import React, { useEffect, useRef, useState } from 'react';
+import lottie from 'lottie-web';
+
+import { Link } from "react-router-dom";
+import { Auth } from 'aws-amplify';
+
+function HomeSetUp() {
+     const goHomeContainer = useRef(null);
+
+ useEffect(() => {
+      lottie.loadAnimation({
+            container: goHomeContainer.current,
+            renderer: 'svg',
+            loop: false,
+            autoplay: false,
+            animationData: require('../../animations/go-arrow.json'),
+            name: 'Home'
+        })})
+
+    return (
+        <div className="Homesetup-card">
+            <div className="goHomeContainer"
+                        onMouseEnter={() => lottie.play('Home')}
+                        onMouseLeave={() => lottie.stop('Home')}
+                    >
+
+            <img className="GradPhoto" src="GradHomePhoto.jpg" height={350} width ={585} />
+
+            </div>
+           <div className="center-card">
+
+            </div>
+        </div>
+
+    )}
+export default HomeSetUp;

frontend/grad-admissions-hub-app/src/Pages/Home.js

@@ -1,11 +1,18 @@
 import React, { useState, useEffect, useRef } from "react";
-import GetApplicant1 from "./../Components/GetApplicant1";
+import HomeSetUp from '../Components/SignUpLogIn/HomeSetUp'
+import Clock from '../Components/Clock'
+import { Link } from "react-router-dom";
 
 const Home = () => {
   return (
     <div className="page">
-      <h1>Home</h1>
-      <GetApplicant1></GetApplicant1>
+    <h1>Welcome to the Graduate Admission Program</h1>
+      <div className="login-container">
+        <HomeSetUp></HomeSetUp> 
+        <h2>A portal for students applying to a graduate program</h2>
+        <h2>Go to "Profile" to login to get started!</h2>
+        <Clock></Clock> 
+      </div>
     </div>
   );
 };

frontend/grad-admissions-hub-app/src/Pages/Settings.js

@@ -0,0 +1,11 @@
+import React, { useState, useEffect, useRef } from 'react';
+
+const Settings = () => {
+  return ( 
+    <div className="page">
+      <h1>Settings</h1>
+    </div>
+  );
+};
+
+export default Settings;