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

# Branding

> Oficiální grafické prvky, barvy a pravidla pro vizuální identitu projektu Lion Police Roleplay.

Vítejte v sekci brandingu. V této sekci naleznete všechny důležité informace týkající se vizuální identity projektu **Lion Police Roleplay**. Také zde najdete všechna loga, která se v projektu používají.

## <Icon icon="image" iconType="solid" className="mr-2" /> Logo Projektu

<div className="flex flex-col md:flex-row items-center gap-10 p-10 bg-neutral-900/50 rounded-2xl border border-white/5 mt-8 mb-10">
  <div className="w-full md:w-2/5 flex items-center justify-center p-12 bg-black/20 rounded-xl border border-white/5">
    <img src="https://mintcdn.com/lionpoliceroleplay/BtD-j6OxC9jgAPew/public/lionmain_logo.png?fit=max&auto=format&n=BtD-j6OxC9jgAPew&q=85&s=edc32d6143f31aaeed2c27ec35ad68db" alt="Lion RP Logo" className="h-56 w-auto transition-opacity hover:opacity-80" width="512" height="512" data-path="public/lionmain_logo.png" />
  </div>

  <div className="w-full md:w-3/5 flex flex-col items-start gap-4">
    <h3 className="text-4xl font-bold text-white tracking-tight">
      Primární Logo Projektu
    </h3>

    <p className="text-lg text-white/60 leading-relaxed max-w-lg">
      Hlavní vizuální prvek projektu Lion Police Roleplay. Toto logo reprezentuje celý projekt.
    </p>

    <div className="flex flex-wrap gap-4 mt-2">
      <a href="/public/lionmain_logo.png" download style={{ textDecoration: "none", borderBottom: "none" }} className="inline-flex items-center justify-center gap-2 px-8 py-3 bg-[#ffd000] hover:bg-[#bdad00] text-black font-bold text-sm rounded-lg transition-all no-underline border-none active:scale-95">
        <Icon icon="download" size={16} iconType="solid" /> Stáhnout PNG
      </a>
    </div>
  </div>
</div>

<div className="relative group overflow-hidden p-5 bg-white/[0.03] border border-white/10 border-l-[#ffd000]/50 border-l-4 rounded-r-2xl rounded-l-md transition-all hover:bg-white/[0.05] hover:border-l-[#ffd000] mt-6 mb-10">
  <div className="relative flex items-center gap-4">
    <Icon icon="circle-info" iconType="solid" color="#ffd000" size={26} className="opacity-80 group-hover:opacity-100 transition-opacity shrink-0" />

    <div className="flex flex-col gap-1">
      <span className="text-[#ffd000] text-xs font-bold uppercase tracking-wider">
        Užití
      </span>

      <p className="text-white/60 text-sm m-0 leading-relaxed">
        Zachovejte ochrannou zónu kolem loga a vždy se pokuste použít tento
        formát, pokud je to možné. Vyhněte se úpravám loga do kruhových variant.
      </p>
    </div>
  </div>
</div>

***

### <Icon icon="calendar-star" iconType="solid" className="mr-2" /> Sezónní Varianty

Jedná se o loga, která jsou speciálně upraveny pro dané období nebo event.

<CardGroup cols={2}>
  <Card title="Summer Edition" icon="sun">
    <div className="flex flex-col items-center justify-center p-4 bg-orange-500/10 rounded-xl border border-orange-500/20 mb-4 overflow-hidden group">
      <img src="https://mintcdn.com/lionpoliceroleplay/ofDQU0NmgQx2lRax/logo/summer.png?fit=max&auto=format&n=ofDQU0NmgQx2lRax&q=85&s=9d1f7d5362709b4889d61883f5bc5fff" alt="Summer Logo" className="h-44 w-auto object-contain transition-transform group-hover:scale-110 duration-500" width="1024" height="1024" data-path="logo/summer.png" />
    </div>

    <p className="text-sm opacity-80 mb-4 h-10">
      Varianta, která se využívá v létě.
    </p>

    <a href="/logo/summer.png" download style={{ textDecoration: "none", borderBottom: "none" }} className="inline-flex items-center justify-center gap-1.5 px-4 py-2 bg-orange-500 text-white font-bold text-xs rounded-lg hover:bg-orange-600 transition-all shadow-md shadow-orange-500/20 active:scale-95 no-underline border-none">
      <Icon icon="download" size={14} /> Stáhnout PNG
    </a>
  </Card>

  <Card title="Halloween Edition" icon="ghost">
    <div className="flex flex-col items-center justify-center p-4 bg-purple-600/10 rounded-xl border border-purple-500/20 mb-4 overflow-hidden group">
      <img src="https://mintcdn.com/lionpoliceroleplay/ofDQU0NmgQx2lRax/logo/halloween.png?fit=max&auto=format&n=ofDQU0NmgQx2lRax&q=85&s=69fdb48ba14c7e9748166d8bf22df2cd" alt="Halloween Logo" className="h-44 w-auto object-contain transition-transform group-hover:scale-110 duration-500" width="1024" height="1024" data-path="logo/halloween.png" />
    </div>

    <p className="text-sm opacity-80 mb-4 h-10">
      Varianta, která se využívá na Halloween eventy.
    </p>

    <a href="/logo/halloween.png" download style={{ textDecoration: "none", borderBottom: "none" }} className="inline-flex items-center justify-center gap-1.5 px-4 py-2 bg-purple-600 text-white font-bold text-xs rounded-lg hover:bg-purple-700 transition-all shadow-md shadow-purple-600/20 active:scale-95 no-underline border-none">
      <Icon icon="download" size={14} /> Stáhnout PNG
    </a>
  </Card>

  <Card title="Christmas Edition" icon="snowflake">
    <div className="flex flex-col items-center justify-center p-4 bg-blue-500/10 rounded-xl border border-blue-500/20 mb-4 overflow-hidden group">
      <img src="https://mintcdn.com/lionpoliceroleplay/ofDQU0NmgQx2lRax/logo/christmas.png?fit=max&auto=format&n=ofDQU0NmgQx2lRax&q=85&s=1169b2ee560d879b601fe7d943ca0488" alt="Christmas Logo" className="h-44 w-auto object-contain transition-transform group-hover:scale-110 duration-500" width="1024" height="1024" data-path="logo/christmas.png" />
    </div>

    <p className="text-sm opacity-80 mb-4 h-10">
      Varianta, která se využívá na Vánoce.
    </p>

    <a href="/logo/christmas.png" download style={{ textDecoration: "none", borderBottom: "none" }} className="inline-flex items-center justify-center gap-1.5 px-4 py-2 bg-blue-500 text-white font-bold text-xs rounded-lg hover:bg-blue-600 transition-all shadow-md shadow-blue-500/20 active:scale-95 no-underline border-none">
      <Icon icon="download" size={14} /> Stáhnout PNG
    </a>
  </Card>

  <Card title="Easter Edition" icon="egg">
    <div className="flex flex-col items-center justify-center p-4 bg-green-500/10 rounded-xl border border-green-500/20 mb-4 overflow-hidden group">
      <img src="https://mintcdn.com/lionpoliceroleplay/ofDQU0NmgQx2lRax/logo/easter.png?fit=max&auto=format&n=ofDQU0NmgQx2lRax&q=85&s=6d9bd5550bcc2066576c421d6d780be4" alt="Easter Logo" className="h-44 w-auto object-contain transition-transform group-hover:scale-110 duration-500" width="1024" height="1024" data-path="logo/easter.png" />
    </div>

    <p className="text-sm opacity-80 mb-4 h-10">
      Varianta, která se využívá na Velikonoce.
    </p>

    <a href="/logo/easter.png" download style={{ textDecoration: "none", borderBottom: "none" }} className="inline-flex items-center justify-center gap-1.5 px-4 py-2 bg-green-500 text-white font-bold text-xs rounded-lg hover:bg-green-600 transition-all shadow-md shadow-green-500/20 active:scale-95 no-underline border-none">
      <Icon icon="download" size={14} /> Stáhnout PNG
    </a>
  </Card>
</CardGroup>

## <Icon icon="shapes" iconType="solid" className="mr-2" /> Další Loga

Loga jednotlivých frakcí a doplňkové grafické prvky používané v rámci projektu.

### Departments

Základní loga hlavních složek projektu.

<CardGroup cols={2}>
  <Card title="Los Santos Police Department" icon="building-shield">
    <div className="py-2" />

    <div className="flex flex-col items-center justify-center h-60 p-4 bg-blue-900/10 rounded-2xl border border-blue-500/20 mb-8 overflow-hidden group">
      <img src="https://mintcdn.com/lionpoliceroleplay/ofDQU0NmgQx2lRax/logo/lspd.png?fit=max&auto=format&n=ofDQU0NmgQx2lRax&q=85&s=e87739f05f61bf26d60389952bf85459" alt="LSPD Logo" className="h-52 w-auto object-contain transition-transform group-hover:scale-105 duration-500" width="420" height="420" data-path="logo/lspd.png" />
    </div>

    <div className="px-1">
      <p className="text-sm opacity-70 leading-relaxed mb-6 min-h-[4rem]">
        Oficiální logo Los Santos Police Department.
      </p>
    </div>

    <div className="mt-2">
      <a href="/logo/lspd.png" download style={{ textDecoration: "none", borderBottom: "none" }} className="inline-flex items-center justify-center gap-2 px-4 py-3 bg-blue-600 text-white font-bold text-xs rounded-xl hover:bg-blue-700 transition-all shadow-lg shadow-blue-600/20 active:scale-95 no-underline border-none w-full">
        <Icon icon="download" size={14} /> Stáhnout PNG
      </a>
    </div>

    <div className="py-1" />
  </Card>

  <Card title="San Andreas Highway Patrol" icon="shield">
    <div className="py-2" />

    <div className="flex flex-col items-center justify-center h-60 p-4 bg-amber-600/10 rounded-2xl border border-amber-500/20 mb-8 overflow-hidden group">
      <img src="https://mintcdn.com/lionpoliceroleplay/akce7usfJqW7XxFe/logo/sahp.png?fit=max&auto=format&n=akce7usfJqW7XxFe&q=85&s=a225cd099ac8e47a8475675337d9c1e5" alt="SAHP Logo" className="h-52 w-auto object-contain transition-transform group-hover:scale-105 duration-500" width="1000" height="976" data-path="logo/sahp.png" />
    </div>

    <div className="px-1">
      <p className="text-sm opacity-70 leading-relaxed mb-6 min-h-[4rem]">
        Oficiální logo San Andreas Highway Patrol.
      </p>
    </div>

    <div className="mt-2">
      <a href="/logo/sahp.png" download style={{ textDecoration: "none", borderBottom: "none" }} className="inline-flex items-center justify-center gap-2 px-4 py-3 bg-amber-600 text-white font-bold text-xs rounded-xl hover:bg-amber-700 transition-all shadow-lg shadow-amber-600/20 active:scale-95 no-underline border-none w-full">
        <Icon icon="download" size={14} /> Stáhnout PNG
      </a>
    </div>

    <div className="py-1" />
  </Card>

  <Card title="Los Santos Fire Department" icon="fire-extinguisher">
    <div className="py-2" />

    <div className="flex flex-col items-center justify-center h-60 p-4 bg-red-600/10 rounded-2xl border border-red-500/20 mb-8 overflow-hidden group">
      <img src="https://mintcdn.com/lionpoliceroleplay/ofDQU0NmgQx2lRax/logo/lsfd_logo.png?fit=max&auto=format&n=ofDQU0NmgQx2lRax&q=85&s=af85876484a720f206519fcec09cf0f9" alt="Fire Dept Logo" className="h-52 w-auto object-contain scale-110 transition-transform group-hover:scale-125 duration-500" width="1049" height="976" data-path="logo/lsfd_logo.png" />
    </div>

    <div className="px-1">
      <p className="text-sm opacity-70 leading-relaxed mb-6 min-h-[4rem]">
        Oficiální logo Los Santos Fire Department.
      </p>
    </div>

    <div className="mt-2">
      <a href="/logo/lsfd_logo.png" download style={{ textDecoration: "none", borderBottom: "none" }} className="inline-flex items-center justify-center gap-2 px-4 py-3 bg-red-600 text-white font-bold text-xs rounded-xl hover:bg-red-700 transition-all shadow-lg shadow-red-600/20 active:scale-95 no-underline border-none w-full">
        <Icon icon="download" size={14} /> Stáhnout PNG
      </a>
    </div>

    <div className="py-1" />
  </Card>

  <Card title="SA Emergency Medical Services" icon="kit-medical">
    <div className="py-2" />

    <div className="flex flex-col items-center justify-center h-60 p-4 bg-red-900/10 rounded-2xl border border-red-500/20 mb-8 overflow-hidden group">
      <img src="https://mintcdn.com/lionpoliceroleplay/ofDQU0NmgQx2lRax/logo/ems.png?fit=max&auto=format&n=ofDQU0NmgQx2lRax&q=85&s=a8299f2391ae1b66679a7cbc250f0cfb" alt="EMS Logo" className="h-52 w-auto object-contain transition-transform group-hover:scale-105 duration-500" width="256" height="256" data-path="logo/ems.png" />
    </div>

    <div className="px-1">
      <p className="text-sm opacity-70 leading-relaxed mb-6 min-h-[4rem]">
        Oficiální logo Emergency Medical Services.
      </p>
    </div>

    <div className="mt-2">
      <a href="/logo/ems.png" download style={{ textDecoration: "none", borderBottom: "none" }} className="inline-flex items-center justify-center gap-2 px-4 py-3 bg-red-600 text-white font-bold text-xs rounded-xl hover:bg-red-700 transition-all shadow-lg shadow-red-600/20 active:scale-95 no-underline border-none w-full">
        <Icon icon="download" size={14} /> Stáhnout PNG
      </a>
    </div>

    <div className="py-1" />
  </Card>
</CardGroup>

<div className="mt-10" />

<Accordion title="Zobrazit divize LSPD" icon="users-gear">
  <CardGroup cols={2}>
    <Card title="Special Weapons and Tactics" icon="gun">
      <div className="py-2" />

      <div className="flex flex-col items-center justify-center h-60 p-4 bg-neutral-900/40 rounded-2xl border border-neutral-500/20 mb-8 overflow-hidden group">
        <img src="https://mintcdn.com/lionpoliceroleplay/akce7usfJqW7XxFe/logo/swat.png?fit=max&auto=format&n=akce7usfJqW7XxFe&q=85&s=18e85151100a94c1c2ab261c819d74f2" alt="SWAT Logo" className="h-52 w-auto object-contain transition-transform group-hover:scale-105 duration-500" width="695" height="695" data-path="logo/swat.png" />
      </div>

      <div className="px-1">
        <p className="text-sm opacity-70 leading-relaxed mb-6 min-h-[4rem]">
          Oficiální logo divize Special Weapons and Tactics, zkráceně SWAT.
        </p>
      </div>

      <div className="mt-2">
        <a href="/logo/swat.png" download style={{ textDecoration: "none", borderBottom: "none" }} className="inline-flex items-center justify-center gap-2 px-4 py-3 bg-neutral-800 text-white font-bold text-xs rounded-xl hover:bg-neutral-700 transition-all shadow-lg shadow-neutral-600/20 active:scale-95 no-underline border-none w-full">
          <Icon icon="download" size={14} /> Stáhnout PNG
        </a>
      </div>

      <div className="py-1" />
    </Card>

    <Card title="Metropolitan Division" icon="shield-halved">
      <div className="py-2" />

      <div className="flex flex-col items-center justify-center h-60 p-4 bg-neutral-600/10 rounded-2xl border border-neutral-500/20 mb-8 overflow-hidden group">
        <img src="https://mintcdn.com/lionpoliceroleplay/ofDQU0NmgQx2lRax/logo/metro.png?fit=max&auto=format&n=ofDQU0NmgQx2lRax&q=85&s=f410d0a4ad7fa4d9e21d0d3b4bc8f27a" alt="Metro Logo" className="h-52 w-auto object-contain transition-transform group-hover:scale-110 duration-500" width="480" height="360" data-path="logo/metro.png" />
      </div>

      <div className="px-1">
        <p className="text-sm opacity-70 leading-relaxed mb-6 min-h-[4rem]">
          Oficiální logo divize Metropolitan Division.
        </p>
      </div>

      <div className="mt-2">
        <a href="/logo/metro.png" download style={{ textDecoration: "none", borderBottom: "none" }} className="inline-flex items-center justify-center gap-2 px-4 py-3 bg-neutral-600 text-white font-bold text-xs rounded-xl hover:bg-neutral-700 transition-all shadow-lg shadow-neutral-600/20 active:scale-95 no-underline border-none w-full">
          <Icon icon="download" size={14} /> Stáhnout PNG
        </a>
      </div>

      <div className="py-1" />
    </Card>

    <Card title="Detective Bureau" icon="user-secret">
      <div className="py-2" />

      <div className="flex flex-col items-center justify-center h-60 p-4 bg-yellow-600/10 rounded-2xl border border-yellow-500/20 mb-8 overflow-hidden group">
        <img src="https://mintcdn.com/lionpoliceroleplay/ofDQU0NmgQx2lRax/logo/detectivebureau_logo.png?fit=max&auto=format&n=ofDQU0NmgQx2lRax&q=85&s=bb62e872ba86d8955289a1e31b4ddcf2" alt="Detective Bureau Logo" className="h-52 w-auto object-contain transition-transform group-hover:scale-105 duration-500" width="337" height="334" data-path="logo/detectivebureau_logo.png" />
      </div>

      <div className="px-1">
        <p className="text-sm opacity-70 leading-relaxed mb-6 min-h-[4rem]">
          Oficiální logo Detective Bureau.
        </p>
      </div>

      <div className="mt-2">
        <a href="/logo/detectivebureau_logo.png" download style={{ textDecoration: "none", borderBottom: "none" }} className="inline-flex items-center justify-center gap-2 px-4 py-3 bg-yellow-600 text-white font-bold text-xs rounded-xl hover:bg-yellow-700 transition-all shadow-lg shadow-yellow-600/20 active:scale-95 no-underline border-none w-full">
          <Icon icon="download" size={14} /> Stáhnout PNG
        </a>
      </div>

      <div className="py-1" />
    </Card>

    <Card title="Air & Water Support Division" icon="helicopter">
      <div className="py-2" />

      <div className="flex flex-col items-center justify-center h-60 p-4 bg-blue-500/10 rounded-2xl border border-blue-500/20 mb-8 overflow-hidden group">
        <img src="https://mintcdn.com/lionpoliceroleplay/Hi2mYV4rYYbc_LlC/logo/asdwaterlogo.png?fit=max&auto=format&n=Hi2mYV4rYYbc_LlC&q=85&s=373121e8d0ed980e25c847d0e06c6877" alt="ASD Logo" className="h-52 w-auto object-contain transition-transform group-hover:scale-105 duration-500" width="500" height="500" data-path="logo/asdwaterlogo.png" />
      </div>

      <div className="px-1">
        <p className="text-sm opacity-70 leading-relaxed mb-6 min-h-[4rem]">
          Oficiální logo Air & Water Support Division.
        </p>
      </div>

      <div className="mt-2">
        <a href="/logo/asdwaterlogo.png" download style={{ textDecoration: "none", borderBottom: "none" }} className="inline-flex items-center justify-center gap-2 px-4 py-3 bg-blue-500 text-white font-bold text-xs rounded-xl hover:bg-blue-600 transition-all shadow-lg shadow-blue-500/20 active:scale-95 no-underline border-none w-full">
          <Icon icon="download" size={14} /> Stáhnout PNG
        </a>
      </div>

      <div className="py-1" />
    </Card>

    <Card title="Canine Division" icon="dog">
      <div className="py-2" />

      <div className="flex flex-col items-center justify-center h-60 p-4 bg-amber-700/10 rounded-2xl border border-amber-700/20 mb-8 overflow-hidden group">
        <img src="https://mintcdn.com/lionpoliceroleplay/c_GNipbwp8a8NmAC/logo/canine_logo.png?fit=max&auto=format&n=c_GNipbwp8a8NmAC&q=85&s=45faf098f7d6f1a4bea8fe355f502760" alt="Canine Logo" className="h-52 w-auto object-contain transition-transform group-hover:scale-105 duration-500" width="1024" height="1024" data-path="logo/canine_logo.png" />
      </div>

      <div className="px-1">
        <p className="text-sm opacity-70 leading-relaxed mb-6 min-h-[4rem]">
          Oficiální logo Canine divize.
        </p>
      </div>

      <div className="mt-2">
        <a href="/logo/canine_logo.png" download style={{ textDecoration: "none", borderBottom: "none" }} className="inline-flex items-center justify-center gap-2 px-4 py-3 bg-amber-700 text-white font-bold text-xs rounded-xl hover:bg-amber-800 transition-all shadow-lg shadow-amber-700/20 active:scale-95 no-underline border-none w-full">
          <Icon icon="download" size={14} /> Stáhnout PNG
        </a>
      </div>

      <div className="py-1" />
    </Card>

    <Card title="Traffic Enforcement Division" icon="car-side">
      <div className="py-2" />

      <div className="flex flex-col items-center justify-center h-60 p-4 bg-red-600/10 rounded-2xl border border-red-500/20 mb-8 overflow-hidden group">
        <img src="https://mintcdn.com/lionpoliceroleplay/ofDQU0NmgQx2lRax/logo/ted.png?fit=max&auto=format&n=ofDQU0NmgQx2lRax&q=85&s=1ac07d2068e7abf7241826c3616879c1" alt="TED Logo" className="h-52 w-auto object-contain transition-transform group-hover:scale-105 duration-500" width="500" height="500" data-path="logo/ted.png" />
      </div>

      <div className="px-1">
        <p className="text-sm opacity-70 leading-relaxed mb-6 min-h-[4rem]">
          Oficiální logo Traffic Enforcement Division.
        </p>
      </div>

      <div className="mt-2">
        <a href="/logo/ted.png" download style={{ textDecoration: "none", borderBottom: "none" }} className="inline-flex items-center justify-center gap-2 px-4 py-3 bg-red-600 text-white font-bold text-xs rounded-xl hover:bg-red-700 transition-all shadow-lg shadow-red-600/20 active:scale-95 no-underline border-none w-full">
          <Icon icon="download" size={14} /> Stáhnout PNG
        </a>
      </div>

      <div className="py-1" />
    </Card>
  </CardGroup>
</Accordion>

***

## <Icon icon="palette" iconType="solid" className="mr-2" /> Barevná Paleta

Základní barvy, které na projektu používáme.

<div className="flex flex-col sm:flex-row gap-4 mt-6 mb-10">
  <div className="flex-1 p-4 bg-neutral-900/50 rounded-2xl border border-white/5 flex items-center gap-4">
    <div className="w-16 h-16 rounded-xl bg-[#ffd000] shrink-0 shadow-lg shadow-[#ffd000]/10" />

    <div className="flex flex-col">
      <span className="text-sm font-bold text-white">Lion Yellow</span>
      <code className="text-xs text-[#ffd000] mt-1">#ffd000</code>
    </div>
  </div>

  <div className="flex-1 p-4 bg-neutral-900/50 rounded-2xl border border-white/5 flex items-center gap-4">
    <div className="w-16 h-16 rounded-xl bg-[#1e1f24] shrink-0 border border-white/10" />

    <div className="flex flex-col">
      <span className="text-sm font-bold text-white">Deep Dark</span>
      <code className="text-xs text-white/40 mt-1">#1e1f24</code>
    </div>
  </div>

  <div className="flex-1 p-4 bg-neutral-900/50 rounded-2xl border border-white/5 flex items-center gap-4">
    <div className="w-16 h-16 rounded-xl bg-[#00b809] shrink-0 shadow-lg shadow-[#00b809]/10" />

    <div className="flex flex-col">
      <span className="text-sm font-bold text-white">Light Green</span>
      <code className="text-xs text-[#00b809] mt-1">#00b809</code>
    </div>
  </div>
</div>

***

## <Icon icon="icons" iconType="solid" className="mr-2" /> Ikony

Využíváme ikony ze sady **FontAwesome Free**. Ikony by měly být vždy v "Solid" nebo "Regular" stylu, aby ladily s čistým designem projektu. Všechny ikony jsou k dispozici na oficiálních stránkách FontAwesome. Prozkoumat ikony můžete [zde](https://fontawesome.com/search?ic=free-collection).

Níže můžete vidět příklady ikon, které se v FontAwesome Free nacházejí:

<div className="flex flex-wrap gap-x-2 gap-y-6 justify-center items-center p-6 bg-[#ffd000]/5 rounded-2xl border border-[#ffd000]/20 mt-6">
  <div className="w-10 h-10 flex items-center justify-center">
    <Icon icon="shield-halved" size={30} color="#ffd000" />
  </div>

  <div className="w-10 h-10 flex items-center justify-center">
    <Icon icon="handcuffs" size={30} color="#ffd000" />
  </div>

  <div className="w-10 h-10 flex items-center justify-center">
    <Icon icon="radio" size={30} color="#ffd000" />
  </div>

  <div className="w-10 h-10 flex items-center justify-center">
    <Icon icon="helicopter" size={30} color="#ffd000" />
  </div>

  <div className="w-10 h-10 flex items-center justify-center">
    <Icon icon="gun" size={30} color="#ffd000" />
  </div>

  <div className="w-10 h-10 flex items-center justify-center">
    <Icon icon="kit-medical" size={30} color="#ffd000" />
  </div>

  <div className="w-10 h-10 flex items-center justify-center">
    <Icon icon="user-shield" size={30} color="#ffd000" />
  </div>

  <div className="w-10 h-10 flex items-center justify-center">
    <Icon icon="siren" size={30} color="#ffd000" />
  </div>

  <div className="w-10 h-10 flex items-center justify-center">
    <Icon icon="building-shield" size={30} color="#ffd000" />
  </div>

  <div className="w-10 h-10 flex items-center justify-center">
    <Icon icon="user-police" size={30} color="#ffd000" />
  </div>

  <div className="w-10 h-10 flex items-center justify-center">
    <Icon icon="id-card" size={30} color="#ffd000" />
  </div>

  <div className="w-10 h-10 flex items-center justify-center">
    <Icon icon="bullhorn" size={30} color="#ffd000" />
  </div>

  <div className="w-10 h-10 flex items-center justify-center">
    <Icon icon="magnifying-glass" size={30} color="#ffd000" />
  </div>

  <div className="w-10 h-10 flex items-center justify-center">
    <Icon icon="folder-open" size={30} color="#ffd000" />
  </div>

  <div className="w-10 h-10 flex items-center justify-center">
    <Icon icon="briefcase" size={30} color="#ffd000" />
  </div>

  <div className="w-10 h-10 flex items-center justify-center">
    <Icon icon="car-side" size={30} color="#ffd000" />
  </div>

  <div className="w-10 h-10 flex items-center justify-center">
    <Icon icon="truck-medical" size={30} color="#ffd000" />
  </div>

  <div className="w-10 h-10 flex items-center justify-center">
    <Icon icon="fire-extinguisher" size={30} color="#ffd000" />
  </div>

  <div className="w-10 h-10 flex items-center justify-center">
    <Icon icon="camera" size={30} color="#ffd000" />
  </div>

  <div className="w-10 h-10 flex items-center justify-center">
    <Icon icon="microchip" size={30} color="#ffd000" />
  </div>

  <div className="w-10 h-10 flex items-center justify-center">
    <Icon icon="key" size={30} color="#ffd000" />
  </div>

  <div className="w-10 h-10 flex items-center justify-center">
    <Icon icon="lock" size={30} color="#ffd000" />
  </div>

  <div className="w-10 h-10 flex items-center justify-center">
    <Icon icon="map-location-dot" size={30} color="#ffd000" />
  </div>

  <div className="w-10 h-10 flex items-center justify-center">
    <Icon icon="mobile-screen-button" size={30} color="#ffd000" />
  </div>

  <div className="w-10 h-10 flex items-center justify-center">
    <Icon icon="headset" size={30} color="#ffd000" />
  </div>

  <div className="w-10 h-10 flex items-center justify-center">
    <Icon icon="comments" size={30} color="#ffd000" />
  </div>

  <div className="w-10 h-10 flex items-center justify-center">
    <Icon icon="bell" size={30} color="#ffd000" />
  </div>

  <div className="w-10 h-10 flex items-center justify-center">
    <Icon icon="clock" size={30} color="#ffd000" />
  </div>

  <div className="w-10 h-10 flex items-center justify-center">
    <Icon icon="user-group" size={30} color="#ffd000" />
  </div>

  <div className="w-10 h-10 flex items-center justify-center">
    <Icon icon="handshake" size={30} color="#ffd000" />
  </div>

  <div className="w-10 h-10 flex items-center justify-center">
    <Icon icon="heart" size={30} color="#ffd000" />
  </div>

  <div className="w-10 h-10 flex items-center justify-center">
    <Icon icon="star" size={30} color="#ffd000" />
  </div>

  <div className="w-10 h-10 flex items-center justify-center">
    <Icon icon="scale-balanced" size={30} color="#ffd000" />
  </div>

  <div className="w-10 h-10 flex items-center justify-center">
    <Icon icon="gavel" size={30} color="#ffd000" />
  </div>

  <div className="w-10 h-10 flex items-center justify-center">
    <Icon icon="file-lines" size={30} color="#ffd000" />
  </div>

  <div className="w-10 h-10 flex items-center justify-center">
    <Icon icon="pen-nib" size={30} color="#ffd000" />
  </div>

  <div className="w-10 h-10 flex items-center justify-center">
    <Icon icon="bolt" size={30} color="#ffd000" />
  </div>

  <div className="w-10 h-10 flex items-center justify-center">
    <Icon icon="gear" size={30} color="#ffd000" />
  </div>

  <div className="w-10 h-10 flex items-center justify-center">
    <Icon icon="wrench" size={30} color="#ffd000" />
  </div>

  <div className="w-10 h-10 flex items-center justify-center">
    <Icon icon="toolbox" size={30} color="#ffd000" />
  </div>

  <div className="w-10 h-10 flex items-center justify-center">
    <Icon icon="dna" size={30} color="#ffd000" />
  </div>

  <div className="w-10 h-10 flex items-center justify-center">
    <Icon icon="fingerprint" size={30} color="#ffd000" />
  </div>

  <div className="w-10 h-10 flex items-center justify-center">
    <Icon icon="vial" size={30} color="#ffd000" />
  </div>

  <div className="w-10 h-10 flex items-center justify-center">
    <Icon icon="mask" size={30} color="#ffd000" />
  </div>

  <div className="w-10 h-10 flex items-center justify-center">
    <Icon icon="skull" size={30} color="#ffd000" />
  </div>

  <div className="w-10 h-10 flex items-center justify-center">
    <Icon icon="biohazard" size={30} color="#ffd000" />
  </div>

  <div className="w-10 h-10 flex items-center justify-center">
    <Icon icon="warning" size={30} color="#ffd000" />
  </div>
</div>