feat(site): content

packages/site/app/components/Header.tsx

@@ -0,0 +1,34 @@
+import { League } from "~/types/league";
+import { Link } from "@remix-run/react";
+import { twMerge } from "tailwind-merge";
+
+const LeagueLink: React.FC<{ league: League; name: string }> = ({
+  league,
+  name,
+}) => {
+  return (
+    <Link to={`/league/${league}`} className="flex">
+      <img
+        src={`/logos/${league}.svg`}
+        className="w-8 sm:w-6 my-auto mr-1"
+        alt={`${name} Logo`}
+      />
+      <p className={twMerge(league === "pwhl" ? "font-pwhl font-bold" : "", "hidden sm:block")}>
+        {name}
+      </p>
+    </Link>
+  );
+};
+
+export const Header: React.FC<{ league?: League }> = ({ league }) => {
+  return (
+    <div className="rounded-xl p-2 pr-4 shadow-lg bg-[#553788] text-slate-50 flex">
+      <Link to="/" className="w-fit shrink-0">
+        <img src="/logos/logo.svg" className="h-10 rounded-xl" alt="Logo" />
+      </Link>
+      {/* <div className="ml-auto my-auto">
+        <LeagueLink league="pwhl" name="PWHL" />
+      </div> */}
+    </div>
+  );
+};

packages/site/app/routes/_index.tsx

@@ -1,15 +1,58 @@
 import type { MetaFunction } from "@remix-run/cloudflare";
+import { Link } from "@remix-run/react";
+import { Header } from "~/components/Header";
 
 export const meta: MetaFunction = () => {
   return [
-    { title: "New Remix App" },
-    { name: "description", content: "Welcome to Remix!" },
+    { title: "Puckway" },
+    { name: "description", content: "Watch time. Saved." },
+    { name: "theme-color", content: "#553788" },
+    { property: "og:image", content: "https://puckway.shay.cat/logos/512.png" },
   ];
 };
 
 export default function Index() {
   return (
-    <div>
+    <div className="max-w-4xl mx-auto p-4 sm:p-6 transition-[padding]">
+      <Header />
+      <div className="mt-6 space-y-4 font-pwhl">
+        <div className="">
+          <h1 className="font-bold uppercase text-5xl text-slate-900 dark:text-slate-200">
+            Puckway
+          </h1>
+          <p className="text-lg">
+            Watch time. Saved. Now in your Discord server.
+          </p>
+        </div>
+        <div className="rounded-xl bg-slate-900 text-slate-100 dark:bg-slate-800 p-4 shadow-lg flex">
+          <div className="w-1/2 mr-4 hidden sm:block">
+            <img src="/preview-threads.png" className="rounded-xl" alt="" />
+          </div>
+          <div className="w-full sm:w-2/3">
+            <h1 className="font-bold uppercase text-3xl">Features</h1>
+            <ul className="list-disc list-inside">
+              <li>Live score updates in a designated channel</li>
+              <li>Gameday threads</li>
+              <li>Commands for game schedules and player info</li>
+              <li>Partial French support</li>
+            </ul>
+          </div>
+        </div>
+        <div className="flex uppercase font-bold text-slate-200">
+          {/* <Link
+            to="/scores"
+            className="rounded-xl bg-pwhl-tor p-2 shadow-lg text-center w-1/2 mr-2"
+          >
+            Scores
+          </Link> */}
+          <Link
+            to="/invite"
+            className="rounded-xl bg-pwhl-ny p-2 shadow-lg text-center w-full"
+          >
+            Invite bot
+          </Link>
+        </div>
+      </div>
     </div>
   );
 }

packages/site/app/routes/invite.ts

@@ -0,0 +1,6 @@
+import { redirect } from "@remix-run/cloudflare";
+
+export const loader = () =>
+  redirect(
+    "https://discord.com/oauth2/authorize?client_id=1191423677397475428&scope=bot&permissions=60129987584",
+  );

packages/site/app/routes/scores.tsx

@@ -0,0 +1,20 @@
+import type { MetaFunction } from "@remix-run/cloudflare";
+import { Link, useSearchParams } from "@remix-run/react";
+import { Header } from "~/components/Header";
+
+export const meta: MetaFunction = () => {
+  return [
+    { title: "Scores - Puckway" },
+  ];
+};
+
+export default function Scores() {
+  const [params, setParams] = useSearchParams();
+
+  return (
+    <div className="max-w-4xl mx-auto p-4 sm:p-6 transition-[padding]">
+      <Header />
+      <div className="mt-6 space-y-4 font-pwhl">x</div>
+    </div>
+  );
+}

packages/site/app/types/league.ts

@@ -0,0 +1 @@
+export type League = "khl" | "pwhl";

packages/site/package.json

@@ -26,6 +26,7 @@
     "@remix-run/dev": "^2.4.0",
     "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
+    "tailwind-merge": "^2.2.1",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.1.0",
     "wrangler": "^3.8.0"