News articles, privacy/terms, LinkedIn, images, object-contain, dev w…

.github/workflows/dev.yml

@@ -0,0 +1,31 @@
+# Dev build pipeline – run build on push to dev
+name: Dev build
+
+on:
+  push:
+    branches: ["dev"]
+  workflow_dispatch:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "npm"
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build Next.js
+        run: npm run build
+        env:
+          NEXT_PUBLIC_BLOB_URL: ${{ secrets.NEXT_PUBLIC_BLOB_URL }}
+
+      - name: Lint
+        run: npm run lint

src/app/about/page.tsx

@@ -12,9 +12,9 @@ export default function AboutPage() {
       <Navbar items={navigationItems} activeItem="/about" />
 
       {/* Main Content */}
-      <div className="pt-20">
+      <div className="pt-[64px] md:pt-[80px]">
         <Section className="py-20 md:py-32 lg:py-[180px]">
-            <div className="flex flex-col gap-[90px] md:gap-32 lg:gap-[180px] items-start max-w-[1200px] mx-auto px-5 md:px-5 lg:px-0">
+            <div className="flex flex-col gap-[90px] md:gap-32 lg:gap-[180px] items-start max-w-[1200px] mx-auto">
             {/* Header Section */}
             <div className="flex flex-col gap-0 items-start text-[#001f33] w-full">
               <p className="font-mono text-base md:text-lg font-normal uppercase mb-[10px] md:mb-[28px] tracking-[0.32px]">

src/app/contact/page.tsx

@@ -9,7 +9,7 @@ export default function ContactPage() {
       <Navbar items={navigationItems} activeItem="/contact" />
 
       {/* Main Content Section */}
-      <div className="pt-20">
+      <div className="pt-[64px] md:pt-[80px]">
         <Section className="py-12 md:py-24 lg:py-[180px]">
           <div className="flex flex-col lg:flex-row gap-6 lg:gap-[24px] items-start max-w-[1200px] mx-auto">
             {/* Left Column - Contact Information */}

src/app/globals.css

@@ -10,6 +10,7 @@
   /* Layout */
   --max-width: 1440px;
   --horizontal-padding: 120px;
+  --horizontal-padding-mobile: 20px;
 }
 
 @theme inline {

src/app/join-us/[id]/page.tsx

@@ -31,8 +31,8 @@ export default async function OpportunityPage({
     <div className="relative min-h-screen bg-white">
       <Navbar items={navigationItems} activeItem="/join-us" />
 
-      <div className="pt-20">
-        <div className="px-6 md:px-[120px] py-6">
+      <div className="pt-[64px] md:pt-[80px]">
+        <Section className="py-6">
           <Link
             href="/join-us"
             className="inline-flex items-center gap-2 font-mono text-sm font-normal text-[#001f33] uppercase hover:opacity-80 transition-opacity"
@@ -54,7 +54,7 @@ export default async function OpportunityPage({
             </svg>
             Back to Positions
           </Link>
-        </div>
+        </Section>
 
         <Section className="py-12 md:py-20">
           <div className="flex flex-col gap-8 md:gap-12 items-start max-w-[1200px] mx-auto">
@@ -191,7 +191,7 @@ export default async function OpportunityPage({
           </div>
         </Section>
 
-        <div className="px-6 md:px-[120px] py-6 border-t border-[#a3a3a3]">
+        <Section className="py-6 border-t border-[#a3a3a3]">
           <Link
             href="/join-us"
             className="inline-flex items-center gap-2 font-mono text-sm font-normal text-[#001f33] uppercase hover:opacity-80 transition-opacity"
@@ -213,7 +213,7 @@ export default async function OpportunityPage({
             </svg>
             Back to Positions
           </Link>
-        </div>
+        </Section>
       </div>
 
       <Footer />

src/app/join-us/page.tsx

@@ -28,7 +28,7 @@
     <div className="relative min-h-screen bg-white">
       <Navbar items={navigationItems} activeItem="/join-us" />
 
-      <div className="pt-20">
+      <div className="pt-[64px] md:pt-[80px]">
         {!hasOpportunities ? (
           <Section className="py-20 md:py-32">
             <div className="flex flex-col gap-8 items-center text-center max-w-[800px] mx-auto">
@@ -56,7 +56,7 @@
           </Section>
         ) : (
           <>
-            <div className="px-6 md:px-[120px] py-12 md:py-20">
+            <Section className="py-12 md:py-20">
               <div className="flex flex-col gap-8 md:gap-12 items-start w-full">
                 <div className="flex flex-col gap-4 md:gap-[19px] items-start leading-[1.1] text-[#001f33] w-full">
                   <p className="font-mono text-base md:text-lg font-normal uppercase">
@@ -101,10 +101,10 @@
                   </div>
                 )}
               </div>
-            </div>
+            </Section>
 
             {filteredOpportunities.length > 0 ? (
-              <div className="flex flex-col">
+              <div className="mx-auto max-w-[1440px] px-5 lg:px-[120px] flex flex-col">
                 {filteredOpportunities.map((opportunity) => (
                   <OpportunityCard
                     key={opportunity.id}
@@ -123,14 +123,14 @@
             )}
 
             <Section className="py-12 md:py-20">
-              <div className="bg-[#001f33] px-6 md:px-[120px] py-10 md:py-16 max-w-[1200px] mx-auto">
+              <div className="bg-[#001f33] px-5 lg:px-[120px] py-10 md:py-16 max-w-[1200px] mx-auto">
                 <div className="flex flex-col gap-4 md:gap-6 items-start text-white">
                   <h2 className="font-sans text-2xl md:text-[36px] font-normal leading-[1.1] tracking-[-0.72px]">
                     Don't see a position that fits?
                   </h2>
                   <p className="font-sans text-base md:text-lg font-normal leading-[1.4] tracking-[-0.18px] max-w-[600px]">
                     We're always interested in hearing from exceptional
                     candidates. If you're passionate about explainable AI and
                     want to contribute to our mission, feel free to reach out.
                   </p>
                   <a

src/app/news/[id]/page.tsx

@@ -68,7 +68,7 @@ export default async function NewsArticlePage({
                 src={article.heroImage.src}
                 alt={article.heroImage.alt}
                 fill
-                className="object-cover"
+                className="object-contain"
               />
             </div>
 
@@ -92,21 +92,25 @@ export default async function NewsArticlePage({
               )}
 
               {/* Read Publication Button */}
-              <a
-                href="#"
-                className="bg-[#001f33] flex gap-[10px] items-center justify-center w-fit pl-[5px] pr-[7px] py-[3px] hover:bg-opacity-90 transition-colors"
-              >
-                <p className="font-mono text-sm font-normal leading-[1.1] text-white uppercase">
-                  read publication
-                </p>
-                <Image
-                  src="/images/icons/arrow-icon.svg"
-                  alt=""
-                  width={10}
-                  height={10}
-                  className="shrink-0"
-                />
-              </a>
+              {article.paperUrl ? (
+                <a
+                  href={article.paperUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="bg-[#001f33] flex gap-[10px] items-center justify-center w-fit pl-[5px] pr-[7px] py-[3px] hover:bg-opacity-90 transition-colors"
+                >
+                  <p className="font-mono text-sm font-normal leading-[1.1] text-white uppercase">
+                    read publication
+                  </p>
+                  <Image
+                    src="/images/icons/arrow-icon.svg"
+                    alt=""
+                    width={10}
+                    height={10}
+                    className="shrink-0"
+                  />
+                </a>
+              ) : null}
             </div>
           </div>
         </div>
@@ -129,29 +133,33 @@ export default async function NewsArticlePage({
                 </p>
               )}
               {/* Read Publication Button */}
-              <a
-                href="#"
-                className="bg-[#001f33] flex gap-[10px] items-center justify-center pl-[5px] pr-[7px] py-[3px] hover:bg-opacity-90 transition-colors"
-              >
-                <p className="font-mono text-base font-normal leading-[1.1] text-white tracking-[0.32px] uppercase">
-                  read publication
-                </p>
-                <Image
-                  src="/images/icons/arrow-icon.svg"
-                  alt=""
-                  width={10}
-                  height={10}
-                  className="shrink-0"
-                />
-              </a>
+              {article.paperUrl ? (
+                <a
+                  href={article.paperUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="bg-[#001f33] flex gap-[10px] items-center justify-center pl-[5px] pr-[7px] py-[3px] hover:bg-opacity-90 transition-colors"
+                >
+                  <p className="font-mono text-base font-normal leading-[1.1] text-white tracking-[0.32px] uppercase">
+                    read publication
+                  </p>
+                  <Image
+                    src="/images/icons/arrow-icon.svg"
+                    alt=""
+                    width={10}
+                    height={10}
+                    className="shrink-0"
+                  />
+                </a>
+              ) : null}
             </div>
             {/* Hero Image */}
             <div className="relative w-full xl:w-[589px] shrink-0 aspect-[16/9] xl:aspect-auto xl:h-[332px]">
               <Image
                 src={article.heroImage.src}
                 alt={article.heroImage.alt}
                 fill
-                className="object-cover"
+                className="object-contain"
               />
             </div>
           </div>

src/app/news/page.tsx

@@ -25,23 +25,22 @@ export default function NewsPage() {
 
       {/* Main Content */}
       <div className="pt-[64px] md:pt-[80px] min-h-[calc(100vh-200px)]">
-        {/* News List */}
-        <div className="flex flex-col items-center">
-          {displayedNews.map((newsItem) => (
-            <NewsCard key={newsItem.id} news={newsItem} />
-          ))}
-
-          {/* Load More Button - only show if there are more news */}
-          {hasMoreNews && (
-            <button 
-              onClick={handleLoadMore}
-              className="bg-[#001f33] px-4 py-3 flex gap-2 items-center justify-center my-8 md:my-12 hover:bg-[#003355] transition-colors"
-            >
-              <p className="font-mono text-[14px] font-normal leading-[1.1] text-white text-center">
-                LOAD MORE
-              </p>
-            </button>
-          )}
+        <div className="mx-auto max-w-[1440px] px-5 lg:px-[120px]">
+          <div className="flex flex-col items-center">
+            {displayedNews.map((newsItem) => (
+              <NewsCard key={newsItem.id} news={newsItem} />
+            ))}
+            {hasMoreNews && (
+              <button
+                onClick={handleLoadMore}
+                className="bg-[#001f33] px-4 py-3 flex gap-2 items-center justify-center my-8 md:my-12 hover:bg-[#003355] transition-colors"
+              >
+                <p className="font-mono text-[14px] font-normal leading-[1.1] text-white text-center">
+                  LOAD MORE
+                </p>
+              </button>
+            )}
+          </div>
         </div>
       </div>