Khixsite

apps/khix/next.config.js

@@ -1,16 +1,7 @@
 /** @type {import("next").NextConfig} */
 const config = {
   reactStrictMode: true,
-  images: {
-    formats: ["image/avif", "image/webp"],
-    minimumCacheTTL: 60 * 60 * 24 * 30,
-    remotePatterns: [
-      {
-        protocol: "https",
-        hostname: "assets.knighthacks.org",
-      },
-    ],
-  },
+  allowedDevOrigins: ["127.0.0.1"],
 
   /** We already do linting and typechecking as separate tasks in CI */
   typescript: { ignoreBuildErrors: true },

apps/khix/package.json

@@ -15,12 +15,12 @@
     "with-env": "dotenv -e ../../.env --"
   },
   "dependencies": {
+    "@gsap/react": "^2.1.2",
     "framer-motion": "^12.34.3",
-    "lucide-react": "^0.575.0",
+    "gsap": "^3.14.2",
     "next": "^16.2.7",
     "react": "^19.2.4",
-    "react-dom": "^19.2.4",
-    "react-icons": "^5.5.0"
+    "react-dom": "^19.2.4"
   },
   "devDependencies": {
     "@forge/eslint-config": "workspace:*",
@@ -35,7 +35,6 @@
     "eslint": "catalog:",
     "prettier": "catalog:",
     "tailwindcss": "catalog:",
-    "tw-animate-css": "^1.4.0",
     "typescript": "catalog:"
   },
   "prettier": "@forge/prettier-config"

apps/khix/src/app/_components/assets/AssetCredit.module.css

@@ -0,0 +1,76 @@
+.assetCredit {
+  position: relative;
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  pointer-events: auto;
+}
+
+.creditText {
+  position: absolute;
+  right: 0;
+  bottom: -0.15rem;
+  z-index: 2;
+  max-width: min(24rem, calc(100vw - 2rem));
+  border: 0;
+  color: rgba(255, 255, 255, 0.68);
+  background: transparent;
+  box-shadow: none;
+  font-size: clamp(0.62rem, 1.2vw, 0.72rem);
+  font-weight: 700;
+  letter-spacing: 0;
+  line-height: 1.15;
+  text-align: right;
+  text-shadow:
+    0 1px 0.45rem rgba(0, 0, 0, 0.34),
+    0 0 0.7rem rgba(255, 255, 255, 0.1);
+  opacity: 0;
+  pointer-events: none;
+  transform: translate3d(0, 0.16rem, 0);
+  transform-origin: 100% 100%;
+  transition:
+    opacity 180ms ease,
+    transform 220ms ease;
+}
+
+.creditLabel {
+  color: rgba(255, 255, 255, 0.44);
+  font-weight: 600;
+}
+
+.creditName,
+.creditLink {
+  color: inherit;
+}
+
+.creditLink {
+  text-decoration: none;
+  text-underline-offset: 0.18em;
+  transition: color 160ms ease;
+}
+
+.creditLink:hover,
+.creditLink:focus-visible {
+  color: rgba(255, 255, 255, 0.9);
+  text-decoration: underline;
+  outline: none;
+}
+
+.creditSeparator {
+  margin: 0 0.32rem;
+  color: rgba(255, 255, 255, 0.34);
+}
+
+.assetCredit:hover .creditText,
+.assetCredit:focus-within .creditText {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translate3d(0, 0, 0);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .creditText,
+  .creditLink {
+    transition: none;
+  }
+}

apps/khix/src/app/_components/assets/AssetCredit.tsx

@@ -0,0 +1,62 @@
+import type { ReactNode } from "react";
+import { Fragment } from "react";
+
+import styles from "./AssetCredit.module.css";
+
+export interface AssetCreditEntry {
+  name: string;
+  href?: string;
+  newTab?: boolean;
+}
+
+interface AssetCreditProps {
+  credits: readonly AssetCreditEntry[];
+  children: ReactNode;
+  className?: string;
+  label?: string;
+}
+
+export function AssetCredit({
+  credits,
+  children,
+  className,
+  label = "Made by",
+}: AssetCreditProps) {
+  const rootClassName = className
+    ? `${styles.assetCredit} ${className}`
+    : styles.assetCredit;
+  const visibleCredits = credits.filter((credit) => credit.name.trim());
+
+  if (visibleCredits.length === 0) {
+    return <span className={rootClassName}>{children}</span>;
+  }
+
+  return (
+    <span className={rootClassName}>
+      {children}
+      <span className={styles.creditText}>
+        <span className={styles.creditLabel}>{label}</span>{" "}
+        {visibleCredits.map((credit, index) => (
+          <Fragment key={`${credit.name}-${credit.href ?? index}`}>
+            {index > 0 ? (
+              <span className={styles.creditSeparator}>/</span>
+            ) : null}
+            {credit.href ? (
+              <a
+                className={styles.creditLink}
+                href={credit.href}
+                {...(credit.newTab === false
+                  ? {}
+                  : { target: "_blank", rel: "noopener noreferrer" })}
+              >
+                {credit.name}
+              </a>
+            ) : (
+              <span className={styles.creditName}>{credit.name}</span>
+            )}
+          </Fragment>
+        ))}
+      </span>
+    </span>
+  );
+}

apps/khix/src/app/_components/assets/index.ts

@@ -0,0 +1 @@
+export { AssetCredit } from "./AssetCredit";