component.html

<!--
// v0 by Vercel.
// https://v0.dev/t/ziQM9L6atoV
-->

<div class="w-full max-w-4xl mx-auto py-12 md:py-16 lg:py-20">
  <div class="mb-8 md:mb-10 lg:mb-12">
    <h2 class="text-2xl md:text-3xl lg:text-4xl font-bold text-center">探索我们的精选信息</h2>
    <div class="mt-4 flex justify-center">
      <input
        class="flex h-10 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 max-w-md w-full"
        placeholder="按工作类型搜索..."
        type="search"
        value=""
      />
    </div>
    <div class="mt-4 flex justify-center gap-2">
      <button class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2 text-sm">
        计算机软件
      </button>
      <button class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2 text-sm">
        电子商务
      </button>
      <button class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2 text-sm">
        金融
      </button>
      <button class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2 text-sm">
        医疗保健
      </button>
      <button class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2 text-sm">
        教育
      </button>
    </div>
  </div>
  <div class="grid grid-cols-1 gap-6 md:gap-8 lg:gap-10">
    <div class="bg-background rounded-lg shadow-lg overflow-hidden grid grid-cols-1 md:grid-cols-2">
      <div class="relative">
        <img
          src="/placeholder.svg"
          alt="软件工程师"
          width="600"
          height="400"
          class="w-full h-full object-cover"
          style="aspect-ratio: 600 / 400; object-fit: cover;"
        />
      </div>
      <div class="p-4 md:p-6 flex flex-col justify-between">
        <div>
          <h3 class="text-lg md:text-xl font-semibold mb-2 cursor-pointer">软件工程师</h3>
          <p class="text-muted-foreground text-sm md:text-base">寻求具有丰富JavaScript技能的有经验软件工程师。</p>
        </div>
        <div class="mt-4 flex items-center justify-between">
          <div class="text-primary font-semibold">80,000 - 120,000</div>
          <div class="text-muted-foreground text-sm">3年以上 | 计算机科学或相关领域的学士学位</div>
        </div>
        <div class="mt-4 text-sm text-muted-foreground">
          <a class="hover:underline flex items-center gap-2" href="#">
            <button class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-10 w-10">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="h-4 w-4"
                data-darkreader-inline-stroke=""
                style="--darkreader-inline-stroke: currentColor;"
              >
                <rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
                <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path>
              </svg>
              <span class="sr-only">Copy link</span>
            </button>
          </a>
        </div>
      </div>
    </div>
    <div class="bg-background rounded-lg shadow-lg overflow-hidden grid grid-cols-1 md:grid-cols-2">
      <div class="relative">
        <img
          src="/placeholder.svg"
          alt="营销协调员"
          width="600"
          height="400"
          class="w-full h-full object-cover"
          style="aspect-ratio: 600 / 400; object-fit: cover;"
        />
      </div>
      <div class="p-4 md:p-6 flex flex-col justify-between">
        <div>
          <h3 class="text-lg md:text-xl font-semibold mb-2 cursor-pointer">营销协调员</h3>
          <p class="text-muted-foreground text-sm md:text-base">加入我们充满活力的营销团队,助力业务增长。</p>
        </div>
        <div class="mt-4 flex items-center justify-between">
          <div class="text-primary font-semibold">45,000 - 55,000</div>
          <div class="text-muted-foreground text-sm">1-2年 | 营销或传播学士学位</div>
        </div>
        <div class="mt-4 text-sm text-muted-foreground">
          <a class="hover:underline flex items-center gap-2" href="#">
            <button class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-10 w-10">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="h-4 w-4"
                data-darkreader-inline-stroke=""
                style="--darkreader-inline-stroke: currentColor;"
              >
                <rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
                <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path>
              </svg>
              <span class="sr-only">Copy link</span>
            </button>
          </a>
        </div>
      </div>
    </div>
    <div class="bg-background rounded-lg shadow-lg overflow-hidden grid grid-cols-1 md:grid-cols-2">
      <div class="relative">
        <img
          src="/placeholder.svg"
          alt="平面设计师"
          width="600"
          height="400"
          class="w-full h-full object-cover"
          style="aspect-ratio: 600 / 400; object-fit: cover;"
        />
      </div>
      <div class="p-4 md:p-6 flex flex-col justify-between">
        <div>
          <h3 class="text-lg md:text-xl font-semibold mb-2 cursor-pointer">平面设计师</h3>
          <p class="text-muted-foreground text-sm md:text-base">
            寻求一位才华横溢的平面设计师,创造出视觉震撼的设计。
          </p>
        </div>
        <div class="mt-4 flex items-center justify-between">
          <div class="text-primary font-semibold">55,000 - 70,000</div>
          <div class="text-muted-foreground text-sm">2-4年 | 平面设计或相关领域的学士学位</div>
        </div>
        <div class="mt-4 text-sm text-muted-foreground">
          <a class="hover:underline flex items-center gap-2" href="#">
            <button class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-10 w-10">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="h-4 w-4"
                data-darkreader-inline-stroke=""
                style="--darkreader-inline-stroke: currentColor;"
              >
                <rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
                <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path>
              </svg>
              <span class="sr-only">Copy link</span>
            </button>
          </a>
        </div>
      </div>
    </div>
    <div class="bg-background rounded-lg shadow-lg overflow-hidden grid grid-cols-1 md:grid-cols-2">
      <div class="relative">
        <img
          src="/placeholder.svg"
          alt="产品经理"
          width="600"
          height="400"
          class="w-full h-full object-cover"
          style="aspect-ratio: 600 / 400; object-fit: cover;"
        />
      </div>
      <div class="p-4 md:p-6 flex flex-col justify-between">
        <div>
          <h3 class="text-lg md:text-xl font-semibold mb-2 cursor-pointer">产品经理</h3>
          <p class="text-muted-foreground text-sm md:text-base">寻求一位出色的产品经理,推动产品创新与发展。</p>
        </div>
        <div class="mt-4 flex items-center justify-between">
          <div class="text-primary font-semibold">70,000 - 100,000</div>
          <div class="text-muted-foreground text-sm">3-5年 | 工商管理或相关领域的学士学位</div>
        </div>
        <div class="mt-4 text-sm text-muted-foreground">
          <a class="hover:underline flex items-center gap-2" href="#">
            <button class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-10 w-10">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="h-4 w-4"
                data-darkreader-inline-stroke=""
                style="--darkreader-inline-stroke: currentColor;"
              >
                <rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
                <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path>
              </svg>
              <span class="sr-only">Copy link</span>
            </button>
          </a>
        </div>
      </div>
    </div>
    <div class="bg-background rounded-lg shadow-lg overflow-hidden grid grid-cols-1 md:grid-cols-2">
      <div class="relative">
        <img
          src="/placeholder.svg"
          alt="数据分析师"
          width="600"
          height="400"
          class="w-full h-full object-cover"
          style="aspect-ratio: 600 / 400; object-fit: cover;"
        />
      </div>
      <div class="p-4 md:p-6 flex flex-col justify-between">
        <div>
          <h3 class="text-lg md:text-xl font-semibold mb-2 cursor-pointer">数据分析师</h3>
          <p class="text-muted-foreground text-sm md:text-base">
            寻求一位精通数据分析的专业人士,为业务提供数据支持。
          </p>
        </div>
        <div class="mt-4 flex items-center justify-between">
          <div class="text-primary font-semibold">60,000 - 80,000</div>
          <div class="text-muted-foreground text-sm">2-4年 | 统计学或相关领域的学士学位</div>
        </div>
        <div class="mt-4 text-sm text-muted-foreground">
          <a class="hover:underline flex items-center gap-2" href="#">
            <button class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-10 w-10">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="h-4 w-4"
                data-darkreader-inline-stroke=""
                style="--darkreader-inline-stroke: currentColor;"
              >
                <rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
                <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path>
              </svg>
              <span class="sr-only">Copy link</span>
            </button>
          </a>
        </div>
      </div>
    </div>
    <div class="bg-background rounded-lg shadow-lg overflow-hidden grid grid-cols-1 md:grid-cols-2">
      <div class="relative">
        <img
          src="/placeholder.svg"
          alt="内容编辑"
          width="600"
          height="400"
          class="w-full h-full object-cover"
          style="aspect-ratio: 600 / 400; object-fit: cover;"
        />
      </div>
      <div class="p-4 md:p-6 flex flex-col justify-between">
        <div>
          <h3 class="text-lg md:text-xl font-semibold mb-2 cursor-pointer">内容编辑</h3>
          <p class="text-muted-foreground text-sm md:text-base">
            寻求一位出色的内容编辑,为我们的网站创作优质内容。
          </p>
        </div>
        <div class="mt-4 flex items-center justify-between">
          <div class="text-primary font-semibold">45,000 - 55,000</div>
          <div class="text-muted-foreground text-sm">1-3年 | 新闻传播或相关领域的学士学位</div>
        </div>
        <div class="mt-4 text-sm text-muted-foreground">
          <a class="hover:underline flex items-center gap-2" href="#">
            <button class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-10 w-10">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="h-4 w-4"
                data-darkreader-inline-stroke=""
                style="--darkreader-inline-stroke: currentColor;"
              >
                <rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
                <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path>
              </svg>
              <span class="sr-only">Copy link</span>
            </button>
          </a>
        </div>
      </div>
    </div>
    <div class="bg-background rounded-lg shadow-lg overflow-hidden grid grid-cols-1 md:grid-cols-2">
      <div class="relative">
        <img
          src="/placeholder.svg"
          alt="项目经理"
          width="600"
          height="400"
          class="w-full h-full object-cover"
          style="aspect-ratio: 600 / 400; object-fit: cover;"
        />
      </div>
      <div class="p-4 md:p-6 flex flex-col justify-between">
        <div>
          <h3 class="text-lg md:text-xl font-semibold mb-2 cursor-pointer">项目经理</h3>
          <p class="text-muted-foreground text-sm md:text-base">
            寻求一位富有经验的项目经理,带领团队高效交付项目。
          </p>
        </div>
        <div class="mt-4 flex items-center justify-between">
          <div class="text-primary font-semibold">70,000 - 90,000</div>
          <div class="text-muted-foreground text-sm">4-6年 | 工程管理或相关领域的学士学位</div>
        </div>
        <div class="mt-4 text-sm text-muted-foreground">
          <a class="hover:underline flex items-center gap-2" href="#">
            <button class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-10 w-10">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="h-4 w-4"
                data-darkreader-inline-stroke=""
                style="--darkreader-inline-stroke: currentColor;"
              >
                <rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
                <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path>
              </svg>
              <span class="sr-only">Copy link</span>
            </button>
          </a>
        </div>
      </div>
    </div>
    <div class="bg-background rounded-lg shadow-lg overflow-hidden grid grid-cols-1 md:grid-cols-2">
      <div class="relative">
        <img
          src="/placeholder.svg"
          alt="市场营销专员"
          width="600"
          height="400"
          class="w-full h-full object-cover"
          style="aspect-ratio: 600 / 400; object-fit: cover;"
        />
      </div>
      <div class="p-4 md:p-6 flex flex-col justify-between">
        <div>
          <h3 class="text-lg md:text-xl font-semibold mb-2 cursor-pointer">市场营销专员</h3>
          <p class="text-muted-foreground text-sm md:text-base">寻求一位热情洋溢的市场营销专员,推动产品销售。</p>
        </div>
        <div class="mt-4 flex items-center justify-between">
          <div class="text-primary font-semibold">40,000 - 50,000</div>
          <div class="text-muted-foreground text-sm">1-2年 | 营销或相关领域的学士学位</div>
        </div>
        <div class="mt-4 text-sm text-muted-foreground">
          <a class="hover:underline flex items-center gap-2" href="#">
            <button class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-10 w-10">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="h-4 w-4"
                data-darkreader-inline-stroke=""
                style="--darkreader-inline-stroke: currentColor;"
              >
                <rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
                <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path>
              </svg>
              <span class="sr-only">Copy link</span>
            </button>
          </a>
        </div>
      </div>
    </div>
    <div class="bg-background rounded-lg shadow-lg overflow-hidden grid grid-cols-1 md:grid-cols-2">
      <div class="relative">
        <img
          src="/placeholder.svg"
          alt="用户体验设计师"
          width="600"
          height="400"
          class="w-full h-full object-cover"
          style="aspect-ratio: 600 / 400; object-fit: cover;"
        />
      </div>
      <div class="p-4 md:p-6 flex flex-col justify-between">
        <div>
          <h3 class="text-lg md:text-xl font-semibold mb-2 cursor-pointer">用户体验设计师</h3>
          <p class="text-muted-foreground text-sm md:text-base">
            寻求一位出色的用户体验设计师,打造优秀的产品交互体验。
          </p>
        </div>
        <div class="mt-4 flex items-center justify-between">
          <div class="text-primary font-semibold">60,000 - 80,000</div>
          <div class="text-muted-foreground text-sm">2-4年 | 交互设计或相关领域的学士学位</div>
        </div>
        <div class="mt-4 text-sm text-muted-foreground">
          <a class="hover:underline flex items-center gap-2" href="#">
            <button class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-10 w-10">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="h-4 w-4"
                data-darkreader-inline-stroke=""
                style="--darkreader-inline-stroke: currentColor;"
              >
                <rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
                <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path>
              </svg>
              <span class="sr-only">Copy link</span>
            </button>
          </a>
        </div>
      </div>
    </div>
    <div class="bg-background rounded-lg shadow-lg overflow-hidden grid grid-cols-1 md:grid-cols-2">
      <div class="relative">
        <img
          src="/placeholder.svg"
          alt="数据科学家"
          width="600"
          height="400"
          class="w-full h-full object-cover"
          style="aspect-ratio: 600 / 400; object-fit: cover;"
        />
      </div>
      <div class="p-4 md:p-6 flex flex-col justify-between">
        <div>
          <h3 class="text-lg md:text-xl font-semibold mb-2 cursor-pointer">数据科学家</h3>
          <p class="text-muted-foreground text-sm md:text-base">
            寻求一位精通数据科学的专业人士,为业务提供数据驱动的洞见。
          </p>
        </div>
        <div class="mt-4 flex items-center justify-between">
          <div class="text-primary font-semibold">80,000 - 100,000</div>
          <div class="text-muted-foreground text-sm">3-5年 | 统计学或相关领域的硕士学位</div>
        </div>
        <div class="mt-4 text-sm text-muted-foreground">
          <a class="hover:underline flex items-center gap-2" href="#">
            <button class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-10 w-10">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="h-4 w-4"
                data-darkreader-inline-stroke=""
                style="--darkreader-inline-stroke: currentColor;"
              >
                <rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
                <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path>
              </svg>
              <span class="sr-only">Copy link</span>
            </button>
          </a>
        </div>
      </div>
    </div>
  </div>
  <div class="mt-8 flex justify-center">
    <nav aria-label="pagination" class="mx-auto flex w-full justify-center" role="navigation">
      <ul class="flex flex-row items-center gap-1">
        <li class="">
          <li class="">
            <a
              aria-current="page"
              class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 w-10"
              href="#"
            >
              1
            </a>
          </li>
        </li>
        <li class="">
          <li class="">
            <a
              class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-10 w-10"
              href="#"
            >
              2
            </a>
          </li>
        </li>
      </ul>
    </nav>
  </div>
  <div class="mt-8 flex justify-center">
    <div class="rounded-lg border bg-card text-card-foreground shadow-sm w-full max-w-md" data-v0-t="card">
      <div class="flex flex-col space-y-1.5 p-6">
        <h3 class="whitespace-nowrap text-2xl font-semibold leading-none tracking-tight">Add New Ad</h3>
      </div>
      <div class="p-6">
        <div class="grid gap-4">
          <div class="grid gap-2">
            <label
              class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
              for="title"
            >
              Title
            </label>
            <input
              class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
              id="title"
              value=""
              name="title"
            />
          </div>
          <div class="grid gap-2">
            <label
              class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
              for="description"
            >
              Description
            </label>
            <textarea
              class="flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 min-h-[100px]"
              id="description"
              name="description"
            ></textarea>
          </div>
          <div class="grid gap-2">
            <label
              class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
              for="type"
            >
              Type
            </label>
            <input
              class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
              id="type"
              value=""
              name="type"
            />
          </div>
          <div class="grid gap-2">
            <label
              class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
              for="salary"
            >
              Salary
            </label>
            <input
              class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
              id="salary"
              value=""
              name="salary"
            />
          </div>
          <div class="grid gap-2">
            <label
              class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
              for="experience"
            >
              Experience
            </label>
            <input
              class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
              id="experience"
              value=""
              name="experience"
            />
          </div>
          <div class="grid gap-2">
            <label
              class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
              for="education"
            >
              Education
            </label>
            <input
              class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
              id="education"
              value=""
              name="education"
            />
          </div>
          <div class="grid gap-2">
            <label
              class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
              for="skills"
            >
              Skills
            </label>
            <div class="grid gap-2"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>