From cb72858779882efc81129e0e610be1ac9e909294 Mon Sep 17 00:00:00 2001
From: yasuaki-kumazaki <yasuaki.kumazaki@haw-hamburg.de>
Date: Mon, 1 Jul 2024 18:56:04 +0200
Subject: [PATCH] modified landing page button

---
 frontend/src/Components/LandingPage.tsx   | 82 ++++++++++++++++-------
 frontend/src/Components/Navbar/Navbar.tsx |  2 +-
 2 files changed, 60 insertions(+), 24 deletions(-)

diff --git a/frontend/src/Components/LandingPage.tsx b/frontend/src/Components/LandingPage.tsx
index 8c5c3b07..2e315d69 100644
--- a/frontend/src/Components/LandingPage.tsx
+++ b/frontend/src/Components/LandingPage.tsx
@@ -1,30 +1,66 @@
-import React from 'react';
-import 'bootstrap/dist/css/bootstrap.min.css';
-import backgroundImage from '../Misc/compute-ea4c57a4.png';
-import Navbar from './Navbar/Navbar';
+import React from "react";
+import "bootstrap/dist/css/bootstrap.min.css";
+import backgroundImage from "../Misc/compute-ea4c57a4.png";
+import Navbar from "./Navbar/Navbar";
+import { Link } from "react-router-dom";
+import { useAuth } from "react-oidc-context";
 
 const LandingPage = () => {
-    React.useEffect(() => {
-        document.body.style.overflow = 'hidden';
-        return () => {
-            document.body.style.overflow = 'auto';
-        };
-    }, []);
+  const auth = useAuth();
+  React.useEffect(() => {
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = "auto";
+    };
+  }, []);
 
-    return (
-        <div>
-            <div className="vh-100 vw-100 d-flex justify-content-center align-items-center" style={{ backgroundImage: `url(${backgroundImage})`, backgroundSize: 'cover', backgroundPosition: 'center', backgroundRepeat: 'no-repeat' }}>
-                <div className="text-white p-4 rounded text-center">
-                    <main role="main">
-                        <h1 className="font-weight-bold" style={{ fontSize: '4rem', textShadow: '2px 2px 4px rgba(0, 0, 0, 0.8)' }}>TEAMAGOCHI</h1>
-                        <p className="lead pt-4 pb-2" style={{ fontSize: '1.75rem', textShadow: '1px 1px 2px rgba(0, 0, 0, 0.8)' }}>Teamagochi is more than just a toy, it's a pet.<br></br> Customize it the way you want it and complete fun challenges to earn rewards.<br>
-                        </br>Take care of your pet and you will make it happy and thankful!</p>
-                        <button type='button' className='btn btn-lg btn-success py-3' style={{ fontSize: '2rem' }}>Get started!</button>
-                    </main>
-                </div>
-            </div>
+  return (
+    <div>
+      <div
+        className="vh-100 vw-100 d-flex justify-content-center align-items-center"
+        style={{
+          backgroundImage: `url(${backgroundImage})`,
+          backgroundSize: "cover",
+          backgroundPosition: "center",
+          backgroundRepeat: "no-repeat",
+        }}
+      >
+        <div className="text-white p-4 rounded text-center">
+          <main role="main">
+            <h1
+              className="font-weight-bold"
+              style={{
+                fontSize: "4rem",
+                textShadow: "2px 2px 4px rgba(0, 0, 0, 0.8)",
+              }}
+            >
+              TEAMAGOCHI
+            </h1>
+            <p
+              className="lead pt-4 pb-2"
+              style={{
+                fontSize: "1.75rem",
+                textShadow: "1px 1px 2px rgba(0, 0, 0, 0.8)",
+              }}
+            >
+              Teamagochi is more than just a toy, it's a pet.<br></br> Customize
+              it the way you want it and complete fun challenges to earn
+              rewards.<br></br>Take care of your pet and you will make it happy
+              and thankful!
+            </p>
+            {/* <button type='button' className='btn btn-lg btn-success py-3' style={{ fontSize: '2rem' }}>Get started!</button> */}
+            <a
+              className="btn btn-lg btn-success py-3"
+              href="#"
+              onClick={() => auth.signinRedirect()}
+            >
+              Get started!
+            </a>
+          </main>
         </div>
-    );
+      </div>
+    </div>
+  );
 };
 
 export default LandingPage;
diff --git a/frontend/src/Components/Navbar/Navbar.tsx b/frontend/src/Components/Navbar/Navbar.tsx
index 2ac2ae59..75e6e63d 100644
--- a/frontend/src/Components/Navbar/Navbar.tsx
+++ b/frontend/src/Components/Navbar/Navbar.tsx
@@ -58,7 +58,7 @@ const Navbar = () => {
               {auth.isAuthenticated ? (
                 <>
                   <li
-                  className={`nav-item ${
+                    className={`nav-item ${
                       activePage === "Pet Page" ? "active" : ""
                     }`}
                   >