feat: adds new eyecatcher

app/components/banner.tsx

@@ -0,0 +1,9 @@
+import type { PropsWithChildren } from "react";
+
+export function Banner(props: PropsWithChildren) {
+  return (
+    <div className="flex flex-col lg:flex-row gap-2 justify-center items-center bg-primary text-white text-sm font-medium py-2 text-center">
+      {props.children}
+    </div>
+  );
+}

app/components/introduction-banner.tsx

@@ -0,0 +1,29 @@
+import { GitHubLogoIcon } from "@radix-ui/react-icons";
+import { Link } from "@remix-run/react";
+import { Banner } from "./banner";
+
+export function IntroductionBanner() {
+  return (
+    <Banner>
+      <span className="relative flex h-3 w-3">
+        <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-white opacity-75">
+          &nbsp;
+        </span>
+        <span className="relative inline-flex h-3 w-3 rounded-full bg-white">
+          &nbsp;
+        </span>
+      </span>{" "}
+      <span className="lg:pl-3.5">
+        Introducing getactions—a community-driven central hub for effortlessly
+        installing GitHub Actions workflows.
+      </span>
+      <Link
+        to="https://github.com/getactions/getactions"
+        target="_blank"
+        className="flex gap-1 items-center mx-2 border rounded-sm px-2 py-1 text-xs"
+      >
+        <GitHubLogoIcon /> Repository
+      </Link>
+    </Banner>
+  );
+}

app/components/logo.tsx

@@ -3,7 +3,7 @@ import { Link } from "@remix-run/react";
 export function Logo() {
   return (
     <Link to="/" prefetch="intent">
-      <h1 className="leading-none text-midnight text-center font-extrabold text-2xl tracking-tight">
+      <h1 className="leading-none text-midnight text-center font-extrabold text-2xl tracking-tighter">
         get<span className="text-primary">actions</span>
       </h1>
     </Link>

app/components/ui/separator.tsx

@@ -0,0 +1,29 @@
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "~/utils/cn"
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }

app/routes/_frontend/route.tsx

@@ -1,31 +1,33 @@
 import { Outlet, type MetaFunction } from "@remix-run/react";
 import { Footer } from "~/components/footer";
+import { IntroductionBanner } from "~/components/introduction-banner";
 import { Logo } from "~/components/logo";
+import { Separator } from "~/components/ui/separator";
 
 export const meta: MetaFunction = () => {
   return [{ title: "GitHub Actions Starter Workflows - getactions.dev" }];
 };
 
 export default function FrontendLayout() {
   return (
-    <div className="h-screen flex flex-col gap-24">
-      <header className="container flex flex-col gap-4 pt-16">
-        <Logo />
+    <>
+      <IntroductionBanner />
 
-        <h2 className="text-midnight text-center text-4xl font-extrabold tracking-tight">
-          Easy to use GitHub Actions Starter Workflows
-        </h2>
+      <div className="h-screen flex flex-col gap-24">
+        <header className="container flex flex-col lg:flex-row justify-center items-center gap-4 pt-16">
+          <Logo />
 
-        <p className="text-center text-2xl text-gray-500 lg:w-1/2 m-auto">
-          Jumpstart your next project effortlessly without the hassle of
-          constructing complex GitHub Actions workflows.
-        </p>
-      </header>
-      <main className="container flex-1 flex flex-col gap-20">
-        <Outlet />
-      </main>
+          <Separator orientation="vertical" className="hidden lg:block" />
 
-      <Footer />
-    </div>
+          <h2 className="text-midnight text-center text-sm font-medium text-muted-foreground tracking-tight">
+            Easy to use GitHub Actions Starter Workflows
+          </h2>
+        </header>
+        <main className="container flex-1 flex flex-col gap-20">
+          <Outlet />
+        </main>
+        <Footer />
+      </div>
+    </>
   );
 }

app/routes/_index/route.tsx

@@ -0,0 +1,81 @@
+import { PlusIcon } from "@radix-ui/react-icons";
+import { json } from "@remix-run/node";
+import { Link, useLoaderData } from "@remix-run/react";
+import { Footer } from "~/components/footer";
+import { IntroductionBanner } from "~/components/introduction-banner";
+import { Logo } from "~/components/logo";
+import { Button } from "~/components/ui/button";
+import { WorkflowCards } from "~/components/workflow-cards";
+import { getWorkflows } from "./query";
+
+export async function loader() {
+  const resultOfGettingWorkflows = await getWorkflows();
+
+  if (resultOfGettingWorkflows.isErr()) {
+    console.error(resultOfGettingWorkflows.error);
+
+    throw new Response("Internal Server Error", { status: 500 });
+  }
+
+  const workflows = resultOfGettingWorkflows.value;
+
+  return json({ workflows });
+}
+
+export default function Index() {
+  const loaderData = useLoaderData<typeof loader>();
+
+  return (
+    <>
+      <IntroductionBanner />
+
+      <div className="h-screen flex flex-col gap-24">
+        <header className="container flex flex-col gap-4 pt-24 py-16">
+          <div className="w-fit">
+            <Logo />
+          </div>
+
+          <h2 className="text-midnight text-4xl lg:text-8xl font-extrabold tracking-tight lg:w-3/4">
+            Don't Copy & Paste. Install GitHub Action Workflows.
+          </h2>
+
+          <p className="text-lg lg:text-2xl text-gray-500 lg:w-3/4 leading-relaxed">
+            We all know that situation: You start a new project and need to
+            configure your GitHub Actions workflows. You could copy and paste
+            from another project, but why not install them instead?
+          </p>
+        </header>
+        <main className="container flex-1 flex flex-col gap-20">
+          <div className="flex flex-col gap-2">
+            <h2 className="text-xl text-primary font-extrabold tracking-tight">
+              Recently added workflows
+            </h2>
+            <p className="text-muted-foreground">
+              We're just getting started. Here are some of the latest workflows
+              added to the collection.
+            </p>
+          </div>
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-10">
+            <WorkflowCards workflows={loaderData.workflows} />
+            <div className="rounded-sm flex flex-col gap-4 justify-center items-center">
+              <p>Don't see the workflow you need?</p>
+              <Link
+                to="https://github.com/getactions/getactions?tab=readme-ov-file#-how-do-i-contribute"
+                target="_blank"
+              >
+                <Button className="flex gap-2 text-primary" variant="outline">
+                  <PlusIcon className="h-4 w-4 text-primary" /> Add Workflow
+                </Button>
+              </Link>
+              <p className="text-xs w-3/4 text-center text-muted-foreground">
+                We're super excited to see your workflows. Share them with the
+                world.
+              </p>
+            </div>
+          </div>
+        </main>
+        <Footer />
+      </div>
+    </>
+  );
+}

package.json

@@ -16,6 +16,7 @@
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-select": "^2.0.0",
+    "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-tabs": "^1.0.4",
     "@remix-run/node": "^2.8.1",