[Bug] JSX not triggering outline

[ran-codes]

check jsx why not working?

shadow-lg p-8 sm:p-12 mb-8">
      {/*  First Row: Intro + First 3 Domains */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
        {/* Intro Content (no card) */}
        <div className="flex flex-col justify-between">
          <div>
            <h2 className="text-3xl lg:text-4xl font-normal text-salurbal-navy mb-1">
              Explore
            </h2>
            <h2 className="text-3xl lg:text-4xl font-bold text-salurbal-sage mb-2">
              SALURBAL&apos;s
            </h2>
            <p className="text-2xl lg:text-3xl text-salurbal-navy mb-4">data catalog</p>
            <div className="mb-4 ">
              <p className="text-xl lg:text-2xl font-normal text-salurbal-sage">
                7 Domains &
              </p>
              <p className="text-xl lg:text-2xl font-normal text-salurbal-sage">
                35 Subdomains
              </p>
            </div>
            <p className="text-sm text-gray-700 mb-4 leading-relaxed">
              SALURBAL has compiled and harmonized data across multiple domains to study urban environments, climate change, and health in Latin American cities.
            </p>
          </div>
          <Link
            href="/data/catalog"
            className="inline-block bg-salurbal-navy text-white px-6 py-2.5 rounded-md hover:bg-opacity-90 font-semibold transition text-center text-sm"
          >
            Data Catalog
          </Link>
        </div>

        {/* First 3 Domains */}
        {sortedDomains.slice(0, 3).map((domain) => {
          const domainSubdomains = (subdomains as Subdomain[]).filter(
            (s) => s.domain === domain.name
          )

          return (
            <div
              key={domain.name}
              className="bg-white rounded-2xl shadow-md hover:shadow-xl transition-shadow p-6"
            >
              {/* Icon Circle */}
              <div className="flex justify-center mb-4">
                <div className="w-20 h-20 rounded-full bg-salurbal-navy flex items-center justify-center p-3">
                  <Image
                    src={`/${domain.icon}`}
                    alt={`${domain.name} icon`}
                    width={80}
                    height={80}
                    className="w-full h-full object-contain brightness-0 invert"
                  />
                </div>
              </div>

              {/* Domain Name */}
              <h3 className="text-xl font-bold text-salurbal-sage text-center mb-2">
                {domain.name}
              </h3>

              {/* Variable Count */}
              <p className="text-center text-sm text-gray-600 mb-3">
                {domain.n_vars} variables
              </p>

              {/* Description */}
              <p className="text-sm text-gray-700 mb-4 text-center">
                {domain.desc}
              </p>

              {/* Subdomains */}
              {domainSubdomains.length > 0 && (
                <div className="border-t pt-3">
                  <p className="text-xs font-semibold text-gray-600 mb-2">
                    {domainSubdomains.length} subdomains:
                  </p>
                  <ul className="text-xs text-gray-600 space-y-1">
                    {domainSubdomains.slice(0, 4).map((subdomain) => (
                      <li key={`${subdomain.domain}-${subdomain.subdomain}`}>
                        • {subdomain.subdomain}
                      </li>
                    ))}
                    {domainSubdomains.length > 4 && (
                      <li className="text-salurbal-sage italic">
                        + {domainSubdomains.length - 4} more...
                      </li>
                    )}
                  </ul>
                </div>
              )}
            </div>
          )
        })}
      </div>