Add About and Careers pages

bluedotimpact · Jan 20, 2025 · 245c2e1 · 245c2e1
1 parent c9d86f2
commit 245c2e1
Show file tree

Hide file tree

Showing 6 changed files with 157 additions and 3 deletions.
diff --git a/apps/website-25/src/pages/_app.tsx b/apps/website-25/src/pages/_app.tsx
@@ -11,7 +11,10 @@ const App: React.FC<AppProps> = ({ Component, pageProps }: AppProps) => {
       <Head>
         <title>BlueDot Impact</title>
       </Head>
-      <Nav logo="/BlueDot_Impact_Logo.svg" />
+      <Nav logo="/BlueDot_Impact_Logo.svg">
+        <a href="/about">About</a>
+        <a href="/careers">Join us</a>
+      </Nav>
       <main className="bluedot-base">
         <Component {...pageProps} />
       </main>

diff --git a/apps/website-25/src/pages/about.tsx b/apps/website-25/src/pages/about.tsx
@@ -0,0 +1,15 @@
+import {
+  HeroSection,
+} from '@bluedot/ui';
+
+const AboutPage = () => {
+  return (
+    <div>
+      <HeroSection
+        title="Our mission is to ensure humanity safely navigates the transition to transformative AI."
+      />
+    </div>
+  );
+};
+
+export default AboutPage;
diff --git a/apps/website-25/src/pages/careers.tsx b/apps/website-25/src/pages/careers.tsx
@@ -0,0 +1,15 @@
+import {
+  HeroSection,
+} from '@bluedot/ui';
+
+const CareersPage = () => {
+  return (
+    <div>
+      <HeroSection
+        title="Join us in our mission to ensure humanity safely navigates the transition to transformative AI."
+      />
+    </div>
+  );
+};
+
+export default CareersPage;
diff --git a/libraries/ui/src/Nav.test.tsx b/libraries/ui/src/Nav.test.tsx
@@ -0,0 +1,28 @@
+import { describe, expect, test } from 'vitest';
+import { render } from '@testing-library/react';
+import { Nav } from './Nav';
+
+describe('Footer', () => {
+  test('renders default as expected', () => {
+    const { container } = render(<Nav />);
+    expect(container).toMatchSnapshot();
+  });
+
+  test('renders with optional args', () => {
+    const { container } = render(
+      <Nav
+        logo="logo.png"
+      />,
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  test('renders with optional yield', () => {
+    const { container } = render(
+      <Nav>
+        <p>This is the yield</p>
+      </Nav>,
+    );
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/libraries/ui/src/Nav.tsx b/libraries/ui/src/Nav.tsx
@@ -11,8 +11,12 @@ type NavButtonProps = LinkOrButtonProps;
 export const Nav: React.FC<NavProps> = ({ children, className, logo }) => {
   return (
     <nav className={clsx('border rounded-full px-8 py-4 flex items-center gap-4 my-4 mx-8 shadow-md fixed top-0 left-0 right-0 z-50 bg-white', className)}>
-      {logo ? <img src={logo} alt="BlueDot Impact Logo" className="h-6 mr-auto" /> : <p className="h-8 mr-auto text-xl">BlueDot Impact</p>}
-      {children}
+      <a href="/">
+        {logo ? <img src={logo} alt="BlueDot Impact Logo" className="h-6 mr-auto" /> : <p className="h-8 mr-auto text-xl">BlueDot Impact</p>}
+      </a>
+      <div className="flex flex-grow justify-center items-center gap-4">
+        {children}
+      </div>
       <NavButton.CTA href="/signup">Get started for Free</NavButton.CTA>
     </nav>
   );

diff --git a/libraries/ui/src/__snapshots__/Nav.test.tsx.snap b/libraries/ui/src/__snapshots__/Nav.test.tsx.snap
@@ -0,0 +1,89 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Footer > renders default as expected 1`] = `
+<div>
+  <nav
+    class="border rounded-full px-8 py-4 flex items-center gap-4 my-4 mx-8 shadow-md fixed top-0 left-0 right-0 z-50 bg-white"
+  >
+    <a
+      href="/"
+    >
+      <p
+        class="h-8 mr-auto text-xl"
+      >
+        BlueDot Impact
+      </p>
+    </a>
+    <div
+      class="flex flex-grow justify-center items-center gap-4"
+    />
+    <a
+      class="bg-bluedot-lighter text-bluedot-normal font-medium border border-bluedot-lighter rounded-full px-6 py-2 transition-all duration-200 hover:bg-bluedot-normal hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-bluedot-normal"
+      data-rac=""
+      href="/signup"
+    >
+      Get started for Free
+    </a>
+  </nav>
+</div>
+`;
+
+exports[`Footer > renders with optional args 1`] = `
+<div>
+  <nav
+    class="border rounded-full px-8 py-4 flex items-center gap-4 my-4 mx-8 shadow-md fixed top-0 left-0 right-0 z-50 bg-white"
+  >
+    <a
+      href="/"
+    >
+      <img
+        alt="BlueDot Impact Logo"
+        class="h-6 mr-auto"
+        src="logo.png"
+      />
+    </a>
+    <div
+      class="flex flex-grow justify-center items-center gap-4"
+    />
+    <a
+      class="bg-bluedot-lighter text-bluedot-normal font-medium border border-bluedot-lighter rounded-full px-6 py-2 transition-all duration-200 hover:bg-bluedot-normal hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-bluedot-normal"
+      data-rac=""
+      href="/signup"
+    >
+      Get started for Free
+    </a>
+  </nav>
+</div>
+`;
+
+exports[`Footer > renders with optional yield 1`] = `
+<div>
+  <nav
+    class="border rounded-full px-8 py-4 flex items-center gap-4 my-4 mx-8 shadow-md fixed top-0 left-0 right-0 z-50 bg-white"
+  >
+    <a
+      href="/"
+    >
+      <p
+        class="h-8 mr-auto text-xl"
+      >
+        BlueDot Impact
+      </p>
+    </a>
+    <div
+      class="flex flex-grow justify-center items-center gap-4"
+    >
+      <p>
+        This is the yield
+      </p>
+    </div>
+    <a
+      class="bg-bluedot-lighter text-bluedot-normal font-medium border border-bluedot-lighter rounded-full px-6 py-2 transition-all duration-200 hover:bg-bluedot-normal hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-bluedot-normal"
+      data-rac=""
+      href="/signup"
+    >
+      Get started for Free
+    </a>
+  </nav>
+</div>
+`;