feat: add /oss-friends

app/footer.tsx

@@ -44,6 +44,7 @@ export const AppFooter: React.FC = () => (
 
         <FooterSection>
           <FooterSectionTitle>Community</FooterSectionTitle>
+          <FooterLink href="/oss-friends">OSS Friends</FooterLink>
           <FooterLink href="https://github.com/argos-ci/argos">
             GitHub
           </FooterLink>

app/oss-friends/page.tsx

@@ -0,0 +1,62 @@
+/* eslint-disable @next/next/no-img-element */
+import { Metadata } from "next";
+
+import { Container } from "@/components/Container";
+import { H2 } from "@/components/H2";
+import { StaticPage } from "@/components/StaticPage";
+import { getMetadata } from "@/lib/metadata";
+
+export const metadata: Metadata = getMetadata({
+  title: "OSS Friends",
+  description: "Open-source projects and tools for an open world.",
+  pathname: "/oss-friends",
+});
+
+type Friend = {
+  name: string;
+  description: string;
+  href: string;
+};
+
+export default async function Page() {
+  const res = await fetch("https://formbricks.com/api/oss-friends");
+  const { data: friends } = (await res.json()) as { data: Friend[] };
+  return (
+    <Container className="py-16 md:py-24">
+      <h1 className="text-center font-accent text-5xl md:text-7xl md:leading-[1.1]">
+        Our Open-source Friends
+      </h1>
+      <p className="text-balance mx-auto mt-4 text-center text-lg text-low">
+        In Argos, we are proud to collaborate with a diverse group of partners
+        to promote open-source software and the values of transparency,
+        collaboration, and community that it represents.
+      </p>
+      <ul className="mt-16 grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-2 lg:grid-cols-3">
+        {friends.map(({ name, description, href }, index) => {
+          const url = new URL(href);
+          return (
+            <li key={index}>
+              <article className="flex h-full flex-col justify-between rounded border border-violet-6 bg-subtle p-8 lg:rounded-2xl lg:px-5 lg:pb-6 lg:pt-5">
+                <div>
+                  <header>
+                    <h3 className="text-2xl">{name}</h3>
+                  </header>
+                  <p className="mt-4 font-light text-low">{description}</p>
+                </div>
+                <div className="mt-6">
+                  <a
+                    className="text-sm font-medium underline hover:no-underline"
+                    href={href}
+                    target="_blank"
+                  >
+                    Visit {name}
+                  </a>
+                </div>
+              </article>
+            </li>
+          );
+        })}
+      </ul>
+    </Container>
+  );
+}

package.json

@@ -14,54 +14,54 @@
   "dependencies": {
     "@mdx-js/loader": "^3.0.0",
     "@mdx-js/react": "^3.0.0",
-    "@next/mdx": "^14.0.1",
+    "@next/mdx": "^14.0.4",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@types/mdx": "^2.0.10",
-    "clsx": "^2.0.0",
+    "clsx": "^2.1.0",
     "fast-glob": "^3.3.2",
-    "framer-motion": "^10.16.4",
+    "framer-motion": "^10.16.16",
     "gray-matter": "^4.0.3",
-    "lucide-react": "^0.292.0",
-    "next": "^14.0.1",
+    "lucide-react": "^0.303.0",
+    "next": "^14.0.4",
     "next-mdx-remote": "^4.4.1",
-    "next-plausible": "^3.11.3",
+    "next-plausible": "^3.12.0",
     "next-sitemap": "^4.2.3",
     "next-themes": "^0.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-syntax-highlighter": "^15.5.0",
-    "react-twc": "^1.2.1",
+    "react-twc": "^1.3.0",
     "react-tweet": "^3.2.0",
     "rehype-highlight": "^6.0.0",
     "remark-frontmatter": "^4.0.1",
     "remark-gfm": "^3.0.1",
-    "shiki": "^0.14.5",
+    "shiki": "^0.14.7",
     "zod": "^3.22.4"
   },
   "devDependencies": {
     "@argos-ci/cli": "^1.0.5",
     "@argos-ci/cypress": "^1.3.0",
-    "@babel/core": "^7.23.2",
+    "@babel/core": "^7.23.7",
     "@radix-ui/colors": "^3.0.0",
     "@tailwindcss/typography": "^0.5.10",
-    "@trivago/prettier-plugin-sort-imports": "^4.2.1",
-    "@types/node": "^20.8.10",
-    "@types/react": "^18.2.36",
-    "@types/react-dom": "^18.2.14",
+    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
+    "@types/node": "^20.10.6",
+    "@types/react": "^18.2.46",
+    "@types/react-dom": "^18.2.18",
     "autoprefixer": "^10.4.16",
-    "cypress": "^13.4.0",
-    "eslint": "^8.53.0",
-    "eslint-config-next": "^14.0.1",
-    "postcss": "^8.4.31",
-    "postcss-nesting": "^12.0.1",
-    "prettier": "^3.0.3",
-    "prettier-plugin-tailwindcss": "^0.5.6",
-    "tailwindcss": "^3.3.5",
+    "cypress": "^13.6.2",
+    "eslint": "^8.56.0",
+    "eslint-config-next": "^14.0.4",
+    "postcss": "^8.4.32",
+    "postcss-nesting": "^12.0.2",
+    "prettier": "^3.1.1",
+    "prettier-plugin-tailwindcss": "^0.5.10",
+    "tailwindcss": "^3.4.0",
     "tailwindcss-animate": "^1.0.7",
-    "typescript": "^5.2.2",
+    "typescript": "^5.3.3",
     "windy-radix-palette": "2.0.0-beta.7"
   }
 }