Hmt 115 add discord link after registration (#189)

Author: skand088

src/app/register/team/(pending)/remind/page.tsx

@@ -1,19 +1,31 @@
-import Link from "next/link";
-
 import PurpleButton from "@/components/PurpleButton";
 
 export default function page() {
   // TODO: Add a reminder to join a team in two days
   return (
-    <div className="flex w-full flex-col justify-center gap-6 rounded-3xl bg-white p-4 md:p-8">
-      <div className=" py-24 text-center text-3xl font-bold">
-        {/* TODO: Update "two" to be dynamic */}
-        We will remind you to join a team in two days!
+    <div className="flex w-full flex-col items-center justify-center rounded-3xl p-4 md:p-8">
+      <div className="flex w-full flex-col justify-center rounded-3xl bg-white p-4 md:p-8">
+        <div className=" pb-8 text-center text-4xl font-bold">
+          {/* TODO: Update "two" to be dynamic */}
+          We will remind you to join a team in two days!
+        </div>
+        <div className="p-4 text-center text-3xl font-bold">
+          In the meantime, join the official Discord!
+        </div>
+        <div className="flex items-center justify-center p-2">
+          <a
+            target="_blank"
+            rel="noreferrer"
+            href={process.env.NEXT_PUBLIC_DISCORD_LINK}
+          >
+            <PurpleButton>Official Hackathon Discord</PurpleButton>
+          </a>
+        </div>
       </div>
-      <div className="flex justify-end">
-        <Link href={"/"}>
-          <PurpleButton>Close</PurpleButton>
-        </Link>
+      <div className="pt-8">
+        <a href="/">
+          <PurpleButton>Go Home</PurpleButton>
+        </a>
       </div>
     </div>
   );

src/app/register/team/discord/layout.tsx

@@ -0,0 +1,5 @@
+import RegistrationLayout from "@/components/layouts/RegistrationLayout";
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return <RegistrationLayout>{children}</RegistrationLayout>;
+}

src/app/register/team/discord/page.tsx

@@ -0,0 +1,39 @@
+import Link from "next/link";
+
+import PurpleButton from "@/components/PurpleButton";
+import { Underline } from "@/utils/text-utils";
+
+export default function page() {
+  return (
+    <div className="flex w-full flex-col justify-center rounded-xl bg-white p-4 md:p-8">
+      <div className="gap-6 p-8 text-center font-bold">
+        <h1 className="flex justify-start pb-4 text-4xl">But First...</h1>
+        <div className="flex w-full flex-col items-center gap-3 rounded-3xl bg-pastel-green p-8 text-xl">
+          <div className="w-1/2 rounded-3xl bg-white p-8">
+            <div className="relative inline-block text-3xl">
+              <Underline>Join the official Discord!</Underline>
+            </div>
+            <div className="pt-8">
+              <a
+                target="_blank"
+                rel="noreferrer"
+                href={process.env.NEXT_PUBLIC_DISCORD_LINK}
+              >
+                <PurpleButton>Hackathon Discord</PurpleButton>
+              </a>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex justify-between pt-8">
+          <Link href={"/register/team"}>
+            <PurpleButton>Back</PurpleButton>
+          </Link>
+          <Link href={"/register/team/ready"}>
+            <PurpleButton>Next</PurpleButton>
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/register/team/page.tsx

@@ -26,7 +26,7 @@ export default function page() {
           <Link href={"/register/team/remind"}>
             <PurpleButton>Remind me later</PurpleButton>
           </Link>
-          <Link href={"/register/team/ready"}>
+          <Link href={"/register/team/discord"}>
             <PurpleButton>Yes!</PurpleButton>
           </Link>
         </div>

src/components/teamRegistration/JoinTeamInstructions.tsx

@@ -1,13 +1,19 @@
-import Link from "next/link";
-
 export default function JoinTeamInstructions() {
   return (
     <ol className="flex list-inside list-decimal flex-col gap-4 px-6 text-lg font-medium">
       <li>
         Join the
-        <Link href="https://discord.com/" target="_blank">
-          <span className=" font-bold"> Code the Change YYC Discord </span>
-        </Link>
+        <span className=" font-bold">
+          <a
+            className="hover:text-awesomer-purple"
+            target="_blank"
+            rel="noreferrer"
+            href={process.env.NEXT_PUBLIC_DISCORD_LINK}
+          >
+            {" "}
+            Code the Change YYC Discord{" "}
+          </a>
+        </span>
         and navigate to the
         <span className="font-bold"> #looking-for-a-team </span> channel.
       </li>