feat: update DevCard design

[zeucapua]

Description

Implements a new DevCard design that showcases OSCR and the user's contribution activity

Related Tickets & Documents

Closes #3872

Mobile & Desktop Screenshots/Recordings

Area.mp4

Arc.mp4

Arc2.mp4

Steps to QA

1. Go to a user's page and click the pizza icon beside their avatar
2. See the new design, pressing arrow keys or clicking to go to other DevCards

Tier (staff will fill in)

• Tier 1
• Tier 2
• Tier 3
• Tier 4

[optional] What gif best describes this PR or how it makes you feel?

[netlify]

✅ Deploy Preview for oss-insights ready!

Name	Link
🔨 Latest commit	0882f4d
🔍 Latest deploy log	https://app.netlify.com/sites/oss-insights/deploys/66ba371ae7e34c0008121aa4
😎 Deploy Preview	https://deploy-preview-3879--oss-insights.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for design-insights ready!

Name	Link
🔨 Latest commit	0882f4d
🔍 Latest deploy log	https://app.netlify.com/sites/design-insights/deploys/66ba371aad1e3000084abe3f
😎 Deploy Preview	https://deploy-preview-3879--design-insights.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[nickytonline]

It looks like your test fails as part of the regular test suite, not the E2E tests. The unit/component tests aren't aware of the env vars that the Supabase client is looking for.

I don't think the tests ever passed locally. I made them stop failing by adding the following to the vitest.config.ts.

import { fileURLToPath } from "url";
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      components: fileURLToPath(new URL("./components", import.meta.url)),
      lib: fileURLToPath(new URL("./lib", import.meta.url)),
      helpers: fileURLToPath(new URL("./helpers", import.meta.url)),
      img: fileURLToPath(new URL("./img", import.meta.url)),
    },
  },
  test: {
    include: ["./**/*.test.ts", "./**/*.test.tsx"],
    globals: true,
    environment: "jsdom",
+    env: {
+      NEXT_PUBLIC_SUPABASE_URL: "https://test.supabase.co",
+      NEXT_PUBLIC_SUPABASE_ANON_KEY: "test-anon-key",
+    },
  },
});

Right now with the fix above, the tests run now, but fail with

AssertionError: expected "spy" to be called with arguments: [ undefined ]

Received: 

  1st spy call:

  Array [
-   undefined,
+   "zeucapua",
  ]


Number of calls: 1

 ❯ components/organisms/DevCardCarousel/dev-card-carousel.test.tsx:28:26


⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[2/3]⎯

 FAIL  components/organisms/DevCardCarousel/dev-card-carousel.test.tsx > DevCardCarousel > when the user uses the arrow keys > when the user presses the left arrow key > should select the second card
AssertionError: expected "spy" to be called with arguments: [ undefined ]

Received: 

  1st spy call:

  Array [
-   undefined,
+   "zeucapua",
  ]


Number of calls: 1

 ❯ components/organisms/DevCardCarousel/dev-card-carousel.test.tsx:36:26

I think a component test for a single DevCard makes more sense (shouldn't be calling supabaseClient) and test the dev card page which has the dev card carousel in an E2E test.

Anyway, we can chat about it Monday.

[jpmcb]

If we can move this forward as "good enough ™️ " to not block launch and fast follow with small style fixes or code cleanup, I'd say that'd be ideal.

[nickytonline]

If we can move this forward as "good enough ™️ " to not block launch and fast follow with small style fixes or code cleanup, I'd say that'd be ideal.

I'm going to go ahead and approve based on ☝🏻. Just have a fast follow for change requests that weren't made.

[nickytonline]

Approving to get this into the launch.

[BekahHW]