Feat Create Callout Component for Careers page

apps/website-25/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.

apps/website-25/src/components/careers/CareerCallout.test.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+import { describe, expect, test } from 'vitest';
+import Callout from './CareersCallout';
+
+describe('Callout', () => {
+  test('renders default as expected', () => {
+    const { container } = render(<Callout />);
+    expect(container).toMatchSnapshot();
+  });
+});

apps/website-25/src/components/careers/CareersCallout.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+const Callout: React.FC = () => {
+  const title = 'Join us in our mission to ensure humanity safely navigates the transition to transformative AI.';
+  const ctaLabel = 'View our careers';
+  const ctaLink = '/careers';
+
+  return (
+    <div className="callout bg-[radial-gradient(ellipse_at_30%,_#fff_0%,_#6687ff_100%)] rounded-lg py-16 px-8 m-8 flex flex-col items-center">
+      <h2 className="callout__title mb-4 text-center">{title}</h2>
+      <button
+        type="button"
+        className="callout__cta bg-bluedot-normal text-white rounded-lg px-4 py-2 font-semibold text-base hover:bg-bluedot-darker flex items-center"
+        onClick={() => window.open(ctaLink, '_blank')}
+      >
+        <span>{ctaLabel}</span>
+        <img
+          src="/icons/chevron_white.svg"
+          alt="→"
+          className="ml-3 w-2 h-2"
+        />
+      </button>
+    </div>
+  );
+};
+
+export default Callout;

apps/website-25/src/components/careers/__snapshots__/CareerCallout.test.tsx.snap

@@ -0,0 +1,35 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Callout > renders default as expected 1`] = `
+<div>
+  <div
+    class="callout bg-[radial-gradient(ellipse_at_30%,_#fff_0%,_#6687ff_100%)] rounded-lg py-16 px-8 m-8 flex flex-col items-center"
+  >
+    <h2
+      class="callout__title mb-4 text-center"
+    >
+      Join us in our mission to ensure humanity safely navigates the transition to transformative AI.
+    </h2>
+    <button
+      class="cta-button flex items-center justify-center rounded-lg transition-all duration-200 font-semibold text-base cta-button--primary bg-bluedot-normal text-white hover:bg-bluedot-normal px-4 py-2 callout__cta"
+      data-testid="cta-button"
+      type="button"
+    >
+      <span
+        class="cta-button__text"
+      >
+        View our careers
+      </span>
+      <span
+        class="cta-button__chevron ml-3"
+      >
+        <img
+          alt="→"
+          class="cta-button__chevron-icon w-2 h-2"
+          src="/icons/chevron_white.svg"
+        />
+      </span>
+    </button>
+  </div>
+</div>
+`;