move progress bar to header, remove landing page and 404 page

frontend/frontend/src/assets/notes.txt

@@ -1,2 +0,0 @@
-2022: Generated laptop mockups using deviceshots.com
-2023: Used https://www.anthonyboyd.graphics/mockups/m2-macbook-air-mockup/ and Adobe Express

frontend/frontend/src/pages/App/AppTrends.js

@@ -1,16 +1,14 @@
 import React, { useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+import { BrowserRouter as Router } from 'react-router-dom';
 import {
   logout as _logout,
   setUserAccess as _setUserAccess,
 } from '../../redux/actions/userActions';
 
 import Header from './Header';
-import LandingScreen from '../Landing';
 import HomeScreen from '../Home';
-import { NoMatchScreen } from '../Misc';
 import { getUserMetadata } from '../../api';
 import {
   useIsAuthenticated,
@@ -44,11 +42,7 @@ function App() {
       <Router basename="/frontend">
         <Header mode="trends" />
         <section className="bg-white text-gray-700 flex-grow">
-          <Routes>
-            <Route path="/user/*" element={<HomeScreen />} />
-            <Route exact path="/" element={<LandingScreen />} />
-            <Route path="*" element={<NoMatchScreen />} />
-          </Routes>
+          <HomeScreen />
         </section>
       </Router>
     </div>

frontend/frontend/src/pages/App/Header.js

@@ -12,6 +12,7 @@ import appIcon from '../../assets/appLogo64.png';
 import { classnames } from '../../utils';
 import { GITHUB_PUBLIC_AUTH_URL } from '../../constants';
 import { FaGithub as GithubIcon } from 'react-icons/fa';
+import { ProgressBar } from '../../components';
 
 const propTypes = {
   to: PropTypes.string.isRequired,
@@ -63,12 +64,13 @@ const Header = ({ mode }) => {
   const [toggle, setToggle] = useState(false);
 
   const isAuthenticated = useIsAuthenticated();
+  const [stage, setStage] = useState(isAuthenticated ? 1 : 0);
 
   const dispatch = useDispatch();
   const logout = () => dispatch(_logout());
 
   return (
-    <div className="text-gray-100 bg-white shadow-md body-font top-0 z-50">
+    <div className="text-gray-100 bg-gray-100 shadow-md body-font top-0 z-50">
       <div className="p-5 flex flex-wrap">
         {/* GitHub Trends Logo */}
         <Link
@@ -151,6 +153,17 @@ const Header = ({ mode }) => {
           </>
         )}
       </div>
+      <ProgressBar
+        items={[
+          'Login',
+          'Select Card',
+          'Modify Parameters',
+          'Customize Theme',
+          'Display Card',
+        ]}
+        currItem={stage}
+        setCurrItem={setStage}
+      />
     </div>
   );
 };

frontend/frontend/src/pages/Home/Home.js

@@ -3,7 +3,6 @@ import { useDispatch } from 'react-redux';
 import BounceLoader from 'react-spinners/BounceLoader';
 
 import { v4 as uuidv4 } from 'uuid';
-import { ProgressBar } from '../../components';
 import {
   CustomizeStage,
   DisplayStage,
@@ -239,17 +238,6 @@ const HomeScreen = () => {
   return (
     <div className="h-full px-2 py-4 lg:p-8 text-gray-600 body-font">
       <div className="flex flex-col">
-        <ProgressBar
-          items={[
-            'Login',
-            'Select Card',
-            'Modify Parameters',
-            'Customize Theme',
-            'Display Card',
-          ]}
-          currItem={stage}
-          setCurrItem={setStage}
-        />
         <div className="m-4 rounded-sm">
           <div className="lg:p-4">
             <div className="text-2xl text-gray-600 font-semibold">

frontend/frontend/src/pages/Landing/Landing.js

@@ -1,171 +0,0 @@
-/* eslint-disable react/jsx-one-expression-per-line */
-
-import React from 'react';
-
-import { Link } from 'react-router-dom';
-import { FaCheck as CheckIcon, FaGithub as GithubIcon } from 'react-icons/fa';
-
-import { Button, Preview } from '../../components';
-
-import mockup from '../../assets/mockup.png';
-import avgupta456Langs from '../../assets/avgupta456_langs.png';
-import tiangoloRepos from '../../assets/tiangolo_repos.png';
-import reininkRepos from '../../assets/reinink_repos.png';
-import dhermesLangs from '../../assets/dhermes_langs.png';
-import { useIsAuthenticated } from '../../redux/selectors/userSelectors';
-
-function LandingScreen() {
-  const isAuthenticated = useIsAuthenticated();
-
-  return (
-    <section>
-      <div className="min-h-screen bg-blue-500 text-gray-100 w-full flex flex-wrap -mt-8 py-16 px-4">
-        <div className="w-full xl:w-1/2 flex flex-col justify-center p-4">
-          <div className="w-full 3xl:w-2/3 mx-auto text-center text-3xl md:text-5xl 3xl:text-6xl font-bold mb-6">
-            Discover and share code contribution insights
-          </div>
-          <div className="w-full 3xl:w-2/3 mx-auto text-center md:text-lg 3xl:text-2xl mb-2">
-            GitHub Trends dives deep into the GitHub API to bring you insightful
-            metrics on your contributions, broken by repository and language.
-          </div>
-          <div className="w-full flex flex-wrap justify-center">
-            <Link to={isAuthenticated ? '/user' : '/signup'} className="w-auto">
-              <Button className="my-4 mr-4 w-auto justify-center bg-gray-700 hover:bg-gray-800 text-xl 3xl:text-2xl">
-                {isAuthenticated ? 'Visit Dashboard' : 'Get Started'}
-              </Button>
-            </Link>
-            <a
-              href="https://www.github.com/avgupta456/github-trends"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="w-auto"
-            >
-              <Button className="my-4 w-auto flex justify-center items-center bg-gray-100 hover:bg-gray-200 text-gray-700 text-xl 3xl:text-2xl">
-                Star on
-                <GithubIcon className="ml-2 w-6 h-6" />
-              </Button>
-            </a>
-          </div>
-        </div>
-        <div className="hidden md:flex w-3/4 xl:w-1/2 mx-auto items-center p-4">
-          <img src={mockup} alt="preview" />
-        </div>
-      </div>
-      <div className="bg-gray-200 text-gray-700 w-full flex flex-wrap items-center py-4 px-4">
-        <div className="w-full lg:w-1/2 p-8 flex justify-center">
-          <Preview
-            pages={[avgupta456Langs, tiangoloRepos, reininkRepos, dhermesLangs]}
-            details={[
-              'Abhijit Gupta (avgupta456): GitHub Trends',
-              'Sebastián Ramírez (tiangolo): FastAPI',
-              'Jonathan Reinink (reinink): TailwindCSS',
-              'Danny Hermes (dhermes): Google PubSub',
-            ]}
-            showArrows
-          />
-        </div>
-        <div className="w-full lg:w-1/2 3xl:w-1/3 mx-auto p-8 flex flex-col">
-          <h1 className="text-4xl text-gray-900 font-medium mb-12">
-            Display your GitHub stats
-            <div>with embeddable cards</div>
-          </h1>
-          <p className="text-lg font-bold">1. Comprehensive</p>
-          <p>
-            GitHub Trends counts each individual commit, across all your
-            open-source contributions. We surface line of code metrics by
-            repository and languages.
-          </p>
-          <br />
-          <p className="text-lg font-bold">2. Customizable</p>
-          <p>
-            Using the online dashboard, easily modify the time range, include
-            private commits, and choose your display theme.
-          </p>
-          <br />
-          <p className="text-lg font-bold">3. Shareable</p>
-          <p>
-            Share your GitHub Trends cards as a PNG on Twitter, or as a dynamic
-            embeddable image on your GitHub profile or personal website.
-          </p>
-          <br />
-          <div>
-            <Link to="/user" className="w-auto">
-              <Button className="my-4 mr-4 w-auto justify-center text-white text-xl 3xl:text-2xl bg-gray-700 hover:bg-gray-800">
-                Visit Dashboard
-              </Button>
-            </Link>
-            {!isAuthenticated && (
-              <Link to="/signup" className="w-auto">
-                <Button className="my-4 mr-4 w-auto justify-center text-white text-xl 3xl:text-2xl bg-blue-500 hover:bg-blue-600">
-                  Get Started
-                </Button>
-              </Link>
-            )}
-          </div>
-        </div>
-      </div>
-      <div className="bg-gray-200 text-gray-700 w-full flex flex-col justify-center items-center pt-16 py-4 px-4">
-        <h1 className="text-4xl font-medium mb-4">GitHub Trends</h1>
-        <h2 className="w-2/3 text-center text-lg">
-          GitHub Trends dives deep into the GitHub API to bring you insightful
-          metrics and visualizations. We access individual commits to compute
-          accurate and granular statistics.
-        </h2>
-        <div className="w-4/5 mx-auto py-8 flex flex-wrap items-center justify-center">
-          {[
-            {
-              header: 'Measures Contribs',
-              text: 'Calculates your stats on a per-contribution level, allowing for deeper insights',
-            },
-            {
-              header: 'LOC Insights',
-              text: 'See aggregate stats on lines of code (LOC) written across all contributions',
-            },
-            {
-              header: 'Language Breakdowns',
-              text: 'Showcase your favorite languages with LOC language breakdowns',
-            },
-            {
-              header: 'Private Mode',
-              text: 'Use a PAT to avoid rate limiting and include private contributions',
-            },
-            {
-              header: 'Exciting Visualizations',
-              text: 'Visualize your contributions with bar graphs, pie charts, and more',
-            },
-            {
-              header: 'Shareable Stats',
-              text: 'Easily add your cards to your GitHub and share them online',
-            },
-          ].map((item, index) => (
-            // eslint-disable-next-line react/no-array-index-key
-            <div className="flex w-full md:w-1/2 lg:w-1/3 p-4" key={index}>
-              <div className="w-4 h-4 mt-1 mr-2">
-                <CheckIcon className="w-full h-full text-green-600" />
-              </div>
-              <div className="w-4/5 flex flex-col justify-top">
-                <p className="text-xl mb-1 font-medium">{item.header}</p>
-                <p>{item.text}</p>
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-      {!isAuthenticated && (
-        <div className="text-gray-700 w-full flex flex-col justify-center items-center py-16 px-4">
-          <p className="text-3xl font-medium">Ready to get started?</p>
-          <p className="text-3xl font-medium">Create an account today.</p>
-          <div className="mt-2">
-            <Link to="/signup" className="w-auto">
-              <Button className="my-4 mr-4 w-auto justify-center text-white text-xl 3xl:text-2xl bg-blue-500 hover:bg-blue-600">
-                Sign Up
-              </Button>
-            </Link>
-          </div>
-        </div>
-      )}
-    </section>
-  );
-}
-
-export default LandingScreen;

frontend/frontend/src/pages/Landing/index.js

@@ -1,3 +0,0 @@
-import LandingScreen from './Landing';
-
-export default LandingScreen;