feat: populate join us page with content and animated buttons

Author: eric15342335

src/app/join-us/page.tsx

@@ -1,14 +1,45 @@
 import { Metadata } from "next";
-import { ComingSoon, comingSoonText } from "@/components/sections/coming-soon";
 import { buildPageMetadata } from "@/lib/config";
+import { AnimatedFillButton } from "@/components/primitives/animated-fill-button";
+import { siteConfig } from "@/lib/config";
 
-const description = comingSoonText;
+const description =
+  "Join The Team at ALPHA University Chapter at HKU, an initiative with great potential.";
 export const metadata: Metadata = buildPageMetadata("/join-us", { description });
 
 export default function JoinUs() {
   return (
-    <>
-      <ComingSoon />
-    </>
+    <section className="flex min-h-[60vh] flex-col items-center justify-center gap-6 text-center">
+      <h1 className="max-w-4xl text-2xl font-bold tracking-tight md:text-4xl">
+        Join The Team at ALPHA University Chapter at HKU, an initiative with great potential.
+      </h1>
+      <p className="text-base text-muted-foreground md:text-lg">
+        We provide opportunities for:
+      </p>
+      <div className="flex flex-wrap items-center justify-center gap-4 pt-2">
+        {[
+          { label: "Full Membership", href: "" },
+          { label: "Research Fellowship", href: "" },
+          { label: "Officers", href: "" },
+        ].map((item) => (
+          <AnimatedFillButton
+            href={item.href}
+            key={item.label}
+          >
+            {item.label}
+          </AnimatedFillButton>
+        ))}
+      </div>
+      <p className="text-sm text-muted-foreground md:text-base pt-3">
+        For more information, contact us at{" "}
+        <a
+          href={`mailto:${siteConfig.email}`}
+          className="text-primary hover:underline"
+        >
+          {siteConfig.email}
+        </a>
+        .
+      </p>
+    </section>
   );
 }

src/components/primitives/animated-fill-button.tsx

@@ -0,0 +1,22 @@
+import type { ReactNode } from "react";
+import { Button } from "@/components/ui/button";
+
+type AnimatedFillButtonProps = {
+  href: string;
+  children: ReactNode;
+};
+
+export function AnimatedFillButton({ href, children }: AnimatedFillButtonProps) {
+  return (
+    <Button
+      asChild
+      variant="outline"
+      size="lg"
+      className="rounded-full bg-gradient-to-r from-primary to-primary bg-no-repeat bg-[length:0%_100%] text-primary transition-[background-size,color] duration-300 hover:bg-[length:100%_100%] hover:text-primary-foreground"
+    >
+      <a href={href} target="_blank" rel="noopener">
+        {children}
+      </a>
+    </Button>
+  );
+}