> ## Documentation Index
> Fetch the complete documentation index at: https://guide.smsu.in.th/llms.txt
> Use this file to discover all available pages before exploring further.

# Home

> SMSU One Stop Guide สโมสรนักศึกษาแพทย์ศิริราช (สพศ.)

export const HeroCard = ({filename, title, description, href, span}) => {
  return <a className="group cursor-pointer rounded-2xl border border-[#0FA461]/25 bg-[#0FA461]/15 p-6 backdrop-blur transition-colors hover:border-[#0FA461] hover:bg-[#0FA461]/25 sm:col-span-1" style={{
    gridColumn: span ? '1 / -1' : 'span 1'
  }} href={href}>
      {filename && <>
          <img src={`https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/hero/${filename}.png`} className="pointer-events-none block transition-all duration-100 group-hover:scale-105 dark:hidden" />
          <img src={`https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/hero/${filename}-dark.png`} className="pointer-events-none hidden transition-all duration-100 group-hover:scale-105 dark:block" />
        </>}
      <h3 className="font-medium text-gray-900 dark:text-zinc-50">{title}</h3>
      <p className="mt-1.5 group-hover:text-[#0FA461]">{description}</p>
    </a>;
};

export const HeroCardGroup = ({title, description, href, children}) => {
  return <div className="flex flex-col">
      <a className="group flex flex-col" href={href || '#'}>
        <div className="flex items-center gap-1">
          <h2 className="text-2xl font-semibold text-gray-900 dark:text-zinc-50">{title}</h2>
          <div className="flex items-center justify-center transition-transform group-hover:translate-x-1">
            <Icon icon="chevron-right" />
          </div>
        </div>
        {description && <span className="mt-1 text-gray-500 dark:text-zinc-500">{description}</span>}
      </a>
      <div className="mt-6 grid grid-cols-1 gap-6 sm:grid-cols-2">{children}</div>
    </div>;
};

<div className="relative">
  <div className="absolute top-0 left-0 right-0 -z-10">
    <img src="https://assets.smsu.in.th/guide/home/header_light.webp" className="w-full block dark:hidden pointer-events-none opacity-80" />

    <img src="https://assets.smsu.in.th/guide/home/header_dark.webp" className="w-full hidden dark:block pointer-events-none opacity-60" />

    <div className="absolute inset-0 -bottom-20 bg-gradient-to-b from-sky-100/50 to-transparent dark:from-amber-950/50 dark:to-transparent" />
  </div>

  <div className="px-4 pt-16 sm:pt-20 max-w-3xl mx-auto">
    <h1 data-text="SMSU One Stop Guide" className="text-4xl font-semibold text-center text-gray-900 dark:text-zinc-50 tracking-tight webtitle">
      SMSU One Stop Guide
    </h1>

    <p className="mx-auto mt-4 max-w-xl px-4 text-center text-lg text-gray-500 dark:text-zinc-500">
      แหล่งรวบรวมแนวทางและข้อมูลจากทุกฝ่ายในสโมสรนักศึกษาแพทย์ศิริราช (สพศ.)
      ให้สะดวกต่อการค้นหาและใช้งาน
    </p>

    <div className="px-6 lg:px-0 mt-12 lg:mt-16 flex flex-col gap-10">
      <HeroCardGroup title="SOP" description="Standard Operating Procedures" href="/sop">
        <HeroCard title="Quick Links" description="รวมลิงก์ใน SOP สำหรับใช้งานอย่างรวดเร็ว" href="/sop/quicklinks" span />

        <HeroCard title="โครงการ" description="การทำโครงการ เขียนเอกสารเปิด/ปิด" href="/sop/project" />

        <HeroCard title="การเงิน" description="เบิกเงิน เขียนใบเสร็จ อัตราราคากลาง" href="/sop/project/finance" />

        <HeroCard title="จดหมาย" description="การเขียนจดหมาย และ Flow ส่งจดหมาย" href="/sop/sec/letter" />

        <HeroCard title="PR" description="จองข่าว ขอทำกราฟิก ช่วยทำ Content" href="/sop/pr" />

        <HeroCard title="Assets" description="จองห้อง จอง Zoom ยืม/ฝากอุปกรณ์ สพศ." href="/sop/assets" />

        <HeroCard title="HR" description="ระบบดูแลสมาชิกสพศ." href="/sop/hr" />
      </HeroCardGroup>

      <HeroCardGroup title="การใช้งาน" href={"/it/guide"}>
        <HeroCard title="แนะนำการใช้งาน" description="เริ่มต้นใช้งาน One Stop Guide ฉบับนี้" href="/it/guide/usage" />

        <HeroCard title="แก้ไขเนื้อหา" description="วิธีการแก้ไขหน้าเนื้อหา สำหรับสมาชิก สพศ." href="/it/guide/edit" />
      </HeroCardGroup>
    </div>
  </div>

  <div className="relative">
    <img src="https://assets.smsu.in.th/guide/home/footer_light.webp" className="pointer-events-none block w-full opacity-80 dark:hidden" />

    <img src="https://assets.smsu.in.th/guide/home/footer_dark.webp" className="pointer-events-none hidden w-full opacity-60 dark:block" />
  </div>
</div>