Redesign homepage

UTDNebula · Oct 10, 2024 · bdad3d9 · bdad3d9
1 parent 0f68611
commit bdad3d9
Show file tree

Hide file tree

Showing 10 changed files with 165 additions and 79 deletions.
diff --git a/assets/gradient.png b/assets/gradient.png
diff --git a/assets/tutorial1.png b/assets/tutorial1.png
diff --git a/assets/tutorial2.png b/assets/tutorial2.png
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
diff --git a/src/components/Landing.tsx b/src/components/Landing.tsx
@@ -1,56 +1,147 @@
-import logo from 'data-base64:../../assets/icon-black.svg';
-import React from 'react';
+import { Storage } from '@plasmohq/storage';
+import gradient from 'data-base64:../../assets/gradient.png';
+import tutorial1 from 'data-base64:../../assets/tutorial1.png';
+import tutorial2 from 'data-base64:../../assets/tutorial2.png';
+import React, { useEffect, useState } from 'react';
+import { FaArrowLeft , FaArrowRight } from 'react-icons/fa';
 
-import { Card } from './Card';
-import { Footer } from './Footer';
-
-const SURVEY_URL =
-  'https://docs.google.com/forms/d/e/1FAIpQLScGIXzlYgsx1SxHYTTCwRaMNVYNRe6I67RingPRVzcT1tLwSg/viewform?usp=sf_link';
-const GALAXY_URL = 'https://www.utdallas.edu/galaxy/';
-
-export const Landing = () => {
-  const navigativeToScheduler = (): void => {
-    window.open(GALAXY_URL, '_blank');
-  };
-
-  const navigateToSurvey = (): void => {
-    window.open(SURVEY_URL, '_blank');
-  };
+const STORAGE_KEY = 'page';
 
+const ExplanatoryPage = ({
+  src,
+  title,
+  description,
+  prev,
+  next,
+}: {
+  src: string;
+  title: string;
+  description: string;
+  prev?: number;
+  next?: number;
+}) => {
   return (
-    <Card>
-      <div className="h-auto">
-        <h1 className="font-kallisto">Welcome to Skedge 👋</h1>
-        <h6 className="my-2">
-          your registration assistant by students, for students
-        </h6>
-        <img
-          src={logo}
-          alt="logo"
-          className="w-[100px] h-[100px] float-right"
-        />
-        <p className="mb-2">
-          Log into <b>Schedule Planner</b> and click <b>Options</b> on a course
-          to get started!
-        </p>
-        <p className="mb-2">
-          Got feedback? Let us know{' '}
-          <button
-            className="underline text-blue-600 hover:text-blue-800 visited:text-purple-600"
-            onClick={navigateToSurvey}
-          >
-            here
-          </button>
-          !
-        </p>
-        <button
-          onClick={navigativeToScheduler}
-          className="text-center flex py-2 px-4 mb-4 bg-cornflower-600 hover:bg-cornflower-500 rounded-lg transition duration-250 ease-in-out"
+    <div className="h-full w-full flex flex-col dark:bg-black">
+      <img
+        src={src}
+        alt="tutorial descriptive"
+        className="w-full bg-gray-100"
+      />
+      <div className="grow p-8 flex flex-col gap-4 bg-gray-100 dark:bg-gray-900">
+        <h1 className="text-2xl font-bold">{title}</h1>
+        <p className="text-sm">{description}</p>
+        <a
+          href="https://www.utdallas.edu/galaxy/"
+          target="_blank"
+          className="text-base text-blue-600 hover:text-blue-800 visited:text-purple-600 underline decoration-transparent hover:decoration-inherit transition"
+          rel="noreferrer"
         >
-          <h3 className="text-center text-white">To Galaxy!</h3>
-        </button>
-        <Footer />
+          Go To Schedule Planner
+        </a>
+        <div className="mt-auto">
+          {typeof prev !== 'undefined' && (
+            <button
+              className="float-left cursor-pointer p-4 rounded-full transition-colors hover:bg-black/10 dark:hover:bg-white/10"
+              onClick={() => storage.set(STORAGE_KEY, prev)}
+            >
+              <FaArrowLeft className="h-6 w-6" />
+            </button>
+          )}
+          {typeof next !== 'undefined' && (
+            <button
+              className="float-right cursor-pointer p-4 rounded-full transition-colors hover:bg-black/10 dark:hover:bg-white/10"
+              onClick={() => storage.set(STORAGE_KEY, next)}
+            >
+              <FaArrowRight className="h-6 w-6" />
+            </button>
+          )}
+        </div>
       </div>
-    </Card>
+    </div>
   );
 };
+
+const storage = new Storage({
+  area: 'local',
+});
+
+export const Landing = () => {
+  const [page, setPage] = useState(0);
+  useEffect(() => {
+    storage.get(STORAGE_KEY).then((item) => setPage(item));
+    storage.watch({
+      [STORAGE_KEY]: (c) => {
+        setPage(c.newValue);
+      },
+    });
+  }, []);
+
+  switch (page) {
+    case 0:
+      return (
+        <div className="bg-lighten dark:bg-darken h-full w-full flex justify-center items-center p-8">
+          <img
+            src={gradient}
+            alt="gradient background"
+            className="absolute h-full w-full inset-0 object-cover -z-10"
+          />
+          <div className="max-w-xl">
+            <h2 className="text-sm font-semibold mb-3 text-cornflower-600 dark:text-cornflower-400 tracking-wider">
+              POWERED BY{' '}
+              <a
+                href="https://www.utdnebula.com/"
+                target="_blank"
+                className="underline decoration-transparent hover:decoration-inherit transition"
+                rel="noreferrer"
+              >
+                NEBULA LABS
+              </a>
+            </h2>
+            <h1 className="text-6xl font-extrabold font-kallisto mb-2">
+              SKEDGE
+            </h1>
+            <h3 className="text-sm font-semibold font-kallisto mb-6">
+              FROM{' '}
+              <a
+                href="https://trends.utdnebula.com/"
+                target="_blank"
+                className="underline decoration-transparent hover:decoration-inherit transition"
+                rel="noreferrer"
+              >
+                UTD TRENDS
+              </a>
+            </h3>
+            <p className="mb-6 text-gray-700 dark:text-gray-300 leading-7">
+              Explore and compare past grades, professor ratings, and reviews to
+              find the perfect class.
+            </p>
+            <button
+              className="font-main text-base text-white px-6 py-2 rounded bg-royal hover:bg-royalDark transition"
+              onClick={() => storage.set(STORAGE_KEY, 1)}
+            >
+              Get Started
+            </button>
+          </div>
+        </div>
+      );
+    case 1:
+      return (
+        <ExplanatoryPage
+          src={tutorial1}
+          title="Open Schedule Planner"
+          description="This extension was designed for student at the University of Texas at Dallas and requires the usage of Schedule Planner"
+          prev={0}
+          next={2}
+        />
+      );
+    case 2:
+      return (
+        <ExplanatoryPage
+          src={tutorial2}
+          title="Click Options"
+          description="Find the course you want to take and click options. That’s it! You are done."
+          prev={1}
+        />
+      );
+  }
+};
diff --git a/src/pages/CoursePage.tsx b/src/pages/CoursePage.tsx
@@ -60,14 +60,18 @@ export const CoursePage = () => {
   }, []);
 
   return (
-    <div className="w-[450px] p-4">
-      {onCoursebook &&
-        profiles.map((item, index) => (
-          <div className="mb-4" key={index}>
-            <MiniProfessor profiles={profiles} professorData={item} />
-          </div>
-        ))}
-      {!onCoursebook && <Landing />}
+    <div className="w-[400px] h-[600px] text-haiti dark:text-white">
+      {onCoursebook ? (
+        <div className="p-0 dark:bg-black">
+          {profiles.map((item, index) => (
+            <div className="mb-4" key={index}>
+              <MiniProfessor profiles={profiles} professorData={item} />
+            </div>
+          ))}
+        </div>
+      ) : (
+        <Landing />
+      )}
     </div>
   );
 };
diff --git a/src/pages/ProfessorProfile.tsx b/src/pages/ProfessorProfile.tsx
@@ -26,7 +26,7 @@ export const ProfessorProfile = () => {
   };
 
   return (
-    <div className="w-[400px] p-4">
+    <div className="w-[400px] h-[600px] p-4 text-haiti dark:text-white dark:bg-black">
       <ProfileHeader
         name={professorData.name}
         profilePicUrl={professorData.profilePicUrl}

diff --git a/src/popup.tsx b/src/popup.tsx
@@ -19,8 +19,8 @@ async function checkPermissions() {
     realBrowser.windows.create({
       url: popupURL,
       type: 'popup',
-      width: 550,
-      height: 250,
+      width: 400,
+      height: 600,
     });
   }
 }

diff --git a/src/style.css b/src/style.css
@@ -93,6 +93,15 @@
   }
 }
 
+@layer utilities {
+  .bg-lighten {
+    background-color: rgba(255, 255, 255, 0.6);
+  }
+  .bg-darken {
+    background-color: rgba(0, 0, 0, 0.6);
+  }
+}
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -18,6 +18,7 @@ module.exports = {
           900: '#51231b',
         },
         royal: '#573dff', // brand secondary (dark)
+        royalDark: '#3c2ab2',
         cornflower: {
           50: '#eae4ff',
           100: '#d3caff', // ~periwinkle