good_looking_job_cards.tsx

import React from 'react';
// import { ArrowRightIcon } from '@heroicons/react/24/solid';

type JobPosting = {
  title: string;
  subtitle: string;
  href: string;
};

/* One job card component */
const JobCard: React.FC<{ posting: JobPosting }> = ({ posting }) => (
  <a
    href={posting.href}
    className="
      block
      bg-[#faf6ed]                  /* warm ivory background                */
      border-[3px] border-black     /* thick black stroke                   */
      rounded-lg
      px-6 py-8
      shadow-[4px_4px_0_0_#000]     /* offset “drop‑shadow” mimic           */
      transition-transform          /* small click feedback                 */
      hover:-translate-y-[2px] hover:shadow-[6px_6px_0_0_#000]
      focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black
    "
  >
    <div className="flex items-start justify-between gap-4">
      {/* Left block: title + subtitle */}
      <div className="flex-1">
        <h3 className="text-2xl font-semibold leading-snug">
          {posting.title}
        </h3>
        <p className="mt-2 text-base text-gray-700">{posting.subtitle}</p>
      </div>

      {/* Right CTA block */}
      <span className="flex items-center gap-2 text-primary-blue font-medium shrink-0">
        Apply Now
        {/* <ArrowRightIcon className="w-5 h-5" /> */}
      </span>
    </div>
  </a>
);

/* Whole “Open Positions” section component */
const JobCards: React.FC<{ postings: JobPosting[] }> = ({
  postings,
}) => (
  <section className="max-w-4xl mx-auto px-4">
    <h2 className="text-4xl font-bold mb-8">Open Positions</h2>
    <div className="space-y-6">
      {postings.map((p) => (
        <JobCard key={p.title} posting={p} />
      ))}
    </div>
  </section>
);

// Main App component
export default function App(props : any) {
  const jobListings: JobPosting[] = [
    {
      title: 'Founding Engineer – Full Stack',
      subtitle: 'New York City • Full Time',
      href: '/careers/full-stack',
    },
    {
      title: 'Founding Member – Ops & GTM',
      subtitle: 'New York City • Full Time',
      href: '/careers/ops-gtm',
    },
  ];

  return (
    <JobCards postings={jobListings} />
  );
}