From 6c66baa0f7aa724def8e91b4b940b0322e7a9cd0 Mon Sep 17 00:00:00 2001
From: Andrei Tan <73627326+andreisito@users.noreply.github.com>
Date: Tue, 7 May 2024 16:52:27 -0700
Subject: [PATCH] feat + fix: web design system set up, fixed lato font

---
 src/app/layout.tsx                            |  8 +++--
 src/app/page.tsx                              |  2 +-
 src/app/testing/page.tsx                      | 10 ++++++
 .../WelcomeGraphic/WelcomeGraphic.tsx         |  9 +++--
 .../VisitorResources/AdmissionButton.tsx      | 35 +++++++++++++++++++
 5 files changed, 58 insertions(+), 6 deletions(-)
 create mode 100644 src/app/testing/page.tsx
 create mode 100644 src/components/userComponents/VisitorResources/AdmissionButton.tsx
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index a37fa108..e5f2f4e8 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -27,19 +27,23 @@ export default function RootLayout({
   return (
     <html lang="en">
       <head>
+        <style>
+          @import
+          url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
+        </style>
         <link
           rel="stylesheet"
           href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
           integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
           crossOrigin=""
         />
-        <link
+        {/* <link
           href="https://fonts.googleapis.com/css?family=Lato:400,700"
           rel="stylesheet"
           integrity="sha384-DelNu+PL/74bL4pHGH8gPG8J5Q6wrLpZiiVttBSvpOibBVQf3EOXerhZlmHcnZsI"
           type="text/css"
           crossOrigin=""
-        />
+        /> */}
         <script
           src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
           integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 40422605..a84f4498 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -31,7 +31,7 @@ function Home() {
       <WelcomeGraphic />
       <div className="IntroInfo web:w-full web:h-72 bg-ivory web:bg-mint-cream inline-flex flex-col justify-center items-center">
         {!isWebDevice && (
-          <p className="b3 w-full px-4 py-10 text-night text-center text-base gap-4">
+          <p className="b3 w-full px-4 py-10 text-night text-center gap-4">
             The Peninsula Humane Society & SPCA (PHS/SPCA) is a local, private,
             non-profit charitable organization dedicated to animal welfare.
             PHS/SPCA is truly an open admission shelter, not only accepting many
diff --git a/src/app/testing/page.tsx b/src/app/testing/page.tsx
new file mode 100644
index 00000000..3866541a
--- /dev/null
+++ b/src/app/testing/page.tsx
@@ -0,0 +1,10 @@
+// @ts-nocheck
+'use client';
+
+/* eslint-disable */
+
+import React from 'react';
+
+export default function Test() {
+  return <div />;
+}
diff --git a/src/components/userComponents/HomePageComponents/WelcomeGraphic/WelcomeGraphic.tsx b/src/components/userComponents/HomePageComponents/WelcomeGraphic/WelcomeGraphic.tsx
index 94d51b33..725668f4 100644
--- a/src/components/userComponents/HomePageComponents/WelcomeGraphic/WelcomeGraphic.tsx
+++ b/src/components/userComponents/HomePageComponents/WelcomeGraphic/WelcomeGraphic.tsx
@@ -17,11 +17,14 @@ function WelcomeGraphic() {
     >
       <div className="w-80 h-38 flex-col justify-start items-center gap-1 inline-flex">
         <p className=" font-light text-center">WELCOME TO</p>
-        <h1 className="text-center w-80">The Peninsula Humane</h1>
+        <h1 className="text-center w-80 web:w-[46.938rem]">
+          The Peninsula Humane Society & SPCA Wildlife Care Center
+        </h1>
+        {/* <h1 className="text-center w-80">The Peninsula Humane</h1>
         <h1 className="text-center w-80">Society & SPCA</h1>
-        <h1 className="text-center w-80">Wildlife Care Center</h1>
+        <h1 className="text-center w-80">Wildlife Care Center</h1> */}
         {isWebDevice && (
-          <p className="b3 font-light mt-7 w-96 text-center">
+          <p className="b3 font-light mt-7 w-[33.563rem] text-center">
             Peninsula Humane Society & SPCA (PHS & SPCA) is a local, private,
             non-profit charitable organization dedicated to animal welfare.
           </p>
diff --git a/src/components/userComponents/VisitorResources/AdmissionButton.tsx b/src/components/userComponents/VisitorResources/AdmissionButton.tsx
new file mode 100644
index 00000000..b296d31b
--- /dev/null
+++ b/src/components/userComponents/VisitorResources/AdmissionButton.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import Link from 'next/link';
+import { MdOutlineCalendarMonth } from 'react-icons/md';
+
+/**
+ * @returns - Button for the user to view the hours and location of the wildlife care center
+ * This button is part of the Visitor Resources section of the home page
+ */
+function AdmissionButton() {
+  return (
+    <Link
+      className="AdmissionButton bg-ivory w-full py-5 rounded-md shadow 
+        justify-center items-center inline-flex z-10
+        px-5 web:px-8 web:py-6"
+      href="/hoursAdmissionPage"
+    >
+      <div
+        className="GreenCircle w-10 h-10 relative bg-mint-cream 
+        rounded-full flex justify-center items-center"
+      >
+        <MdOutlineCalendarMonth className="w-7 h-7 text-scary-forest" />
+      </div>
+      <div
+        className="flex-col justify-start
+        items-start gap-0.5 inline-flex"
+      >
+        <p className="b1 text-night whitespace-normal web:text-nowrap">
+          Hours & Location
+        </p>
+      </div>
+    </Link>
+  );
+}
+
+export default AdmissionButton;
