Merge pull request #54 from HybridPlanner/jv/refactor-home-page

refactor: home page and error page

src/components/ErrorComponent.tsx

@@ -1,14 +1,27 @@
-import { Link } from "react-router-dom";
-import { Button } from "./base/button/button";
-
-export function ErrorComponent({ error }: { error: string }): JSX.Element {
-  return (
-    <div className="container px-4 mx-auto flex flex-col gap-4 items-center my-5">
-      <p className="uppercase tracking-wide text-slate-600">Error</p>
-      <h1 className="text-2xl font-bold text-center">{error}</h1>
-      <Link to="/">
-        <Button>Back to homepage</Button>
-      </Link>
-    </div>
-  );
-}
+import { Link } from "react-router-dom";
+import { Button } from "./base/button/button";
+import Navbar from "@/pages/Navbar";
+import logoImg from "@/assets/img/logo.png";
+
+export function ErrorComponent({ error }: { error: string }): JSX.Element {
+  return (
+    <div className="container px-4 mx-auto flex flex-col gap-3">
+      <Navbar />
+      <div className="mt-12 mx-6 xl:ml-36 lg:w-2/3 xl:w-1/2 flex flex-col gap-2 items-start">
+        <img src={logoImg} alt="logo" className="w-24 h-24 md:w-40 md:h-40" />
+        <div className="w-full text-red-500 text-3xl md:text-5xl font-normal leading-tight break-words tracking-tight">
+          Oops! Something went wrong
+        </div>
+        <p className="text-slate-600 mt-3 text-lg">{error}</p>
+        <Link to="/">
+          <Button>Return to the home page</Button>
+        </Link>
+
+        <div className="fixed w-full h-full overflow-hidden top-0 left-0 -z-20">
+        <div className="-z-50 absolute top-1/2 -left-1/2 w-full rounded-3xl h-full bg-red-500 bg-opacity-30 transform-gpu -rotate-12 blur-3xl"></div>
+        <div className="-z-50 absolute -top-1/2 -right-1/2 w-full rounded-3xl h-full bg-indigo-500 bg-opacity-30 transform-gpu -rotate-12 blur-3xl"></div>
+      </div>
+      </div>
+    </div>
+  );
+}

src/pages/Error.tsx

@@ -1,5 +1,5 @@
-import { ErrorComponent } from "@/components/ErrorComponent";
-
-export default function ErrorPage() {
-  return <ErrorComponent error={"404 Not found"} />;
-}
+import { ErrorComponent } from "@/components/ErrorComponent";
+
+export default function ErrorPage() {
+  return <ErrorComponent error={"Page not found. Please check the URL and try again."} />;
+}

src/pages/Home.tsx

@@ -1,36 +1,29 @@
-import { useNavigate } from "react-router-dom";
-import Navbar from "./Navbar";
-import { Button } from "../components/base/button/button";
-import { useState } from "react";
-import logoImg from "@/assets/img/logo.png";
-import avatarImg from "@/assets/img/avatar.png";
-
-export default function HomePage() {
-  const [name, setName] = useState("Louis DePierre");
-  const [email, setEmail] = useState("[email protected]");
-  const [avatar, setAvatar] = useState(avatarImg);
-
-  return (
-    <div className="container px-4 mx-auto flex flex-col gap-3">
-      <Navbar user={{ name, email, avatar }} />
-      <div className="mt-12 mx-6 xl:ml-36 lg:w-2/3 xl:w-1/2 flex flex-col gap-2 items-start">
-        <img src={logoImg} alt="logo" className="w-24 h-24 md:w-40 md:h-40" />
-        <div className="w-full text-blue-500 text-3xl md:text-5xl font-normal leading-tight break-words tracking-tight">
-          Rainbow Meetings with external participants made easy.
-        </div>
-        <p className="text-slate-600 mt-3 text-lg">
-          HybridPlanner let you plan meetings with external participants easily.
-          It’s free.
-        </p>
-        <Button className="mt-4" to="/dashboard">
-          Try HybridPlanner
-        </Button>
-      </div>
-
-      <div className="fixed w-full h-full overflow-hidden top-0 left-0 -z-20">
-        <div className="-z-50 absolute top-1/2 -left-1/2 w-full rounded-3xl h-full bg-blue-500 bg-opacity-30 transform-gpu -rotate-12 blur-3xl"></div>
-        <div className="-z-50 absolute -top-1/2 -right-1/2 w-full rounded-3xl h-full bg-indigo-500 bg-opacity-30 transform-gpu -rotate-12 blur-3xl"></div>
-      </div>
-    </div>
-  );
-}
+import Navbar from "./Navbar";
+import { Button } from "../components/base/button/button";
+import logoImg from "@/assets/img/logo.png";
+
+export default function HomePage() {
+  return (
+    <div className="container px-4 mx-auto flex flex-col gap-3">
+      <Navbar />
+      <div className="mt-12 mx-6 xl:ml-36 lg:w-2/3 xl:w-1/2 flex flex-col gap-2 items-start">
+        <img src={logoImg} alt="logo" className="w-24 h-24 md:w-40 md:h-40" />
+        <div className="w-full text-blue-500 text-3xl md:text-5xl font-normal leading-tight break-words tracking-tight">
+          Rainbow Meetings with external participants made easy.
+        </div>
+        <p className="text-slate-600 mt-3 text-lg">
+          HybridPlanner let you plan meetings with external participants easily.
+          It’s free.
+        </p>
+        <Button className="mt-4" to="/dashboard">
+          Try HybridPlanner
+        </Button>
+      </div>
+
+      <div className="fixed w-full h-full overflow-hidden top-0 left-0 -z-20">
+        <div className="-z-50 absolute top-1/2 -left-1/2 w-full rounded-3xl h-full bg-blue-500 bg-opacity-30 transform-gpu -rotate-12 blur-3xl"></div>
+        <div className="-z-50 absolute -top-1/2 -right-1/2 w-full rounded-3xl h-full bg-indigo-500 bg-opacity-30 transform-gpu -rotate-12 blur-3xl"></div>
+      </div>
+    </div>
+  );
+}