frontend/src/routes/list/+page.svelte

<!--Start Market Cap Group-->

<div class="container mx-auto pt-3 pl-2">
  <div class="grid grid-cols-1 sm:grid-cols-2">
    <!-- Column 1 -->
    <div class="mb-4">
      <h2 class="text-xl sm:text-2xl text-white font-bold mb-3">
        Market Cap Groups
      </h2>
      <ul class="list-disc space-y-4 sm:space-y-1 pl-5">
        <li class="mb-2 cursor-pointer">
          <a
            href="/list/market-cap/mega-cap-stocks"
            class="sm:hover:text-white text-blue-400 text-lg">Mega-Cap Stocks</a
          >
        </li>
        <li class="mb-2 cursor-pointer">
          <a
            href="/list/market-cap/large-cap-stocks"
            class="sm:hover:text-white text-blue-400 text-lg"
            >Large-Cap Stocks</a
          >
        </li>
        <li class="mb-2 cursor-pointer">
          <a
            href="/list/market-cap/mid-cap-stocks"
            class="sm:hover:text-white text-blue-400 text-lg">Mid-Cap Stocks</a
          >
        </li>

        <li class="mb-2 cursor-pointer sm:hidden">
          <a
            href="/list/market-cap/small-cap-stocks"
            class="sm:hover:text-white text-blue-400 text-lg"
            >Small-Cap Stocks</a
          >
        </li>
        <li class="mb-2 cursor-pointer sm:hidden">
          <a
            href="/list/market-cap/micro-cap-stocks"
            class="sm:hover:text-white text-blue-400 text-lg"
            >Micro-Cap Stocks</a
          >
        </li>
        <li class="mb-2 cursor-pointer sm:hidden">
          <a
            href="/list/market-cap/nano-cap-stocks"
            class="sm:hover:text-white text-blue-400 text-lg">Nano-Cap Stocks</a
          >
        </li>
      </ul>
    </div>

    <!-- Column 2 -->
    <div class="mt-10 hidden sm:block">
      <ul class="list-disc space-y-1 pl-5">
        <li class="mb-2 cursor-pointer">
          <a
            href="/list/market-cap/small-cap-stocks"
            class="sm:hover:text-white text-blue-400 text-lg"
            >Small-Cap Stocks</a
          >
        </li>
        <li class="mb-2 cursor-pointer">
          <a
            href="/list/market-cap/micro-cap-stocks"
            class="sm:hover:text-white text-blue-400 text-lg"
            >Micro-Cap Stocks</a
          >
        </li>
        <li class="mb-2 cursor-pointer">
          <a
            href="/list/market-cap/nano-cap-stocks"
            class="sm:hover:text-white text-blue-400 text-lg">Nano-Cap Stocks</a
          >
        </li>
        <!-- ...other list items -->
      </ul>
    </div>
  </div>
</div>

<!--End Market Cap Group-->

<!--Start Exchange Group-->

<div class="container mx-auto pt-10 pl-4">
  <div class="grid grid-cols-1 sm:grid-cols-2">
    <div class="mb-4">
      <h2 class="text-xl sm:text-2xl text-white font-bold mb-3">
        Exchange Groups
      </h2>
      <ul class="list-disc space-y-1 pl-3">
        <li class="mb-2 cursor-pointer">
          <a
            href="/list/nasdaq-stocks"
            class="sm:hover:text-white text-blue-400 text-lg"
            >Listed on NASDAQ</a
          >
        </li>
        <li class="mb-2 cursor-pointer">
          <a
            href="/list/nyse-stocks"
            class="sm:hover:text-white text-blue-400 text-lg">Listed on NYSE</a
          >
        </li>
        <li class="mb-2 cursor-pointer sm:hidden">
          <a
            href="/list/amex-stocks"
            class="sm:hover:text-white text-blue-400 text-lg">Listed on AMEX</a
          >
        </li>
        <li class="mb-2 cursor-pointer sm:hidden">
          <a
            href="/list/xetra-stocks"
            class="sm:hover:text-white text-blue-400 text-lg">Listed on XETRA</a
          >
        </li>
      </ul>
    </div>

    <!-- Column 2 -->
    <div class="mt-10 hidden sm:block">
      <ul class="list-disc space-y-1 pl-5">
        <li class="mb-2 cursor-pointer">
          <a
            href="/list/amex-stocks"
            class="sm:hover:text-white text-blue-400 text-lg">Listed on AMEX</a
          >
        </li>
        <li class="mb-2 cursor-pointer">
          <a
            href="/list/xetra-stocks"
            class="sm:hover:text-white text-blue-400 text-lg">Listed on XETRA</a
          >
        </li>
        <!-- ...other list items -->
      </ul>
    </div>
  </div>
</div>

<!--End Exchange Group-->

<!--Start Index Group-->

<div class="container mx-auto pt-10 pl-4">
  <div class="grid grid-cols-1 sm:grid-cols-2">
    <div class="mb-4">
      <h2 class="text-xl sm:text-2xl text-white font-bold mb-3">
        Index Groups
      </h2>
      <ul class="list-disc space-y-1 pl-3">
        <li class="mb-2 cursor-pointer">
          <a
            href="/list/dow-jones-stocks"
            class="sm:hover:text-white text-blue-400 text-lg"
          >
            Listed on Dow Jones
          </a>
        </li>
        <li class="mb-2 cursor-pointer">
          <a
            href="/list/nasdaq-100-stocks"
            class="sm:hover:text-white text-blue-400 text-lg"
          >
            Listed on NASDAQ 100
          </a>
        </li>
        <li class="mb-2 cursor-pointer sm:hidden">
          <a
            href="/list/sp-500-stocks"
            class="sm:hover:text-white text-blue-400 text-lg"
          >
            Listed on S&P 500
          </a>
        </li>
      </ul>
    </div>

    <!-- Column 2 -->
    <div class="mt-10 hidden sm:block">
      <ul class="list-disc space-y-1 pl-5">
        <li class="mb-2 cursor-pointer">
          <a
            href="/list/sp-500-stocks"
            class="sm:hover:text-white text-blue-400 text-lg"
          >
            Listed on S&P 500
          </a>
        </li>
        <!-- ...other list items -->
      </ul>
    </div>
  </div>
</div>

<!--End Index Group-->

<!--Start Non-US Stocks Listed on US Exchanges-->

<div class="container mx-auto pt-10 pl-4">
  <div class="grid grid-cols-1 sm:grid-cols-2">
    <div class="mb-4">
      <h2 class="text-xl sm:text-2xl text-white font-bold mb-3">
        Non-US Stocks Listed on US Exchangess
      </h2>
      <ul class="list-disc space-y-1 pl-3">
        <li class="mb-2 cursor-pointer">
          <a
            href="/list/canadian-stocks-us"
            class="sm:hover:text-white text-blue-400 text-lg"
          >
            Canada
          </a>
        </li>
        <li class="mb-2 cursor-pointer">
          <a
            href="/list/chinese-stocks-us"
            class="sm:hover:text-white text-blue-400 text-lg"
          >
            China
          </a>
        </li>
        <li class="mb-2 cursor-pointer">
          <a
            href="/list/indian-stocks-us"
            class="sm:hover:text-white text-blue-400 text-lg"
          >
            India
          </a>
        </li>
        <li class="mb-2 cursor-pointer">
          <a
            href="/list/japanese-stocks-us"
            class="sm:hover:text-white text-blue-400 text-lg"
          >
            Japan
          </a>
        </li>

        <li class="mb-2 cursor-pointer sm:hidden">
          <a
            href="/list/german-stocks-us"
            class="sm:hover:text-white text-blue-400 text-lg"
          >
            Germany
          </a>
        </li>
        <li class="mb-2 cursor-pointer sm:hidden">
          <a
            href="/list/israeli-stocks-us"
            class="sm:hover:text-white text-blue-400 text-lg"
          >
            Israel
          </a>
        </li>
        <li class="mb-2 cursor-pointer sm:hidden">
          <a
            href="/list/uk-stocks-us"
            class="sm:hover:text-white text-blue-400 text-lg"
          >
            United Kingdom
          </a>
        </li>
      </ul>
    </div>

    <div class="mt-[75px] hidden sm:block">
      <ul class="list-disc space-y-1 pl-5">
        <li class="mb-2 cursor-pointer">
          <a
            href="/list/german-stocks-us"
            class="sm:hover:text-white text-blue-400 text-lg"
          >
            Germany
          </a>
        </li>
        <li class="mb-2 cursor-pointer">
          <a
            href="/list/israeli-stocks-us"
            class="sm:hover:text-white text-blue-400 text-lg"
          >
            Israel
          </a>
        </li>
        <li class="mb-2 cursor-pointer">
          <a
            href="/list/uk-stocks-us"
            class="sm:hover:text-white text-blue-400 text-lg"
          >
            United Kingdom
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

<!--End Non-US Stocks Listed on US Exchanges-->

<!--Start Sector Group-->
<div class="container mx-auto pt-10 pl-4">
  <div class="grid grid-cols-1 sm:grid-cols-2">
    <div class="mb-4">
      <h2 class="text-xl sm:text-2xl text-white font-bold mb-3">
        Sector Groups
      </h2>
      <ul class="list-disc space-y-1 pl-3">
        <li class="mb-2 cursor-pointer">
          <a
            href="/list/sector/financial"
            class="sm:hover:text-white text-blue-400 text-lg"
          >
            Financials
          </a>
        </li>
        <li class="mb-2 cursor-pointer">
          <a
            href="/list/sector/healthcare"
            class="sm:hover:text-white text-blue-400 text-lg"
          >
            Healthcare
          </a>
        </li>
        <li class="mb-2 cursor-pointer">
          <a
            href="/list/sector/technology"
            class="sm:hover:text-white text-blue-400 text-lg"
          >
            Technology
          </a>
        </li>
        <li class="mb-2 cursor-pointer">
          <a
            href="/list/sector/industrials"
            class="sm:hover:text-white text-blue-400 text-lg"
          >
            Industrials
          </a>
        </li>
        <li class="mb-2 cursor-pointer">
          <a
            href="/list/sector/energy"
            class="sm:hover:text-white text-blue-400 text-lg"
          >
            Energy
          </a>
        </li>
        <li class="mb-2 cursor-pointer">
          <a
            href="/list/sector/utilities"
            class="sm:hover:text-white text-blue-400 text-lg"
          >
            Utilities
          </a>
        </li>

        <li class="mb-2 cursor-pointer sm:hidden">
          <a
            href="/list/sector/consumer-cyclical"
            class="sm:hover:text-white text-blue-400 text-lg"
          >
            Consumer Cyclical
          </a>
        </li>
        <li class="mb-2 cursor-pointer sm:hidden">
          <a
            href="/list/sector/real-estate"
            class="sm:hover:text-white text-blue-400 text-lg"
          >
            Real Estate
          </a>
        </li>
        <li class="mb-2 cursor-pointer sm:hidden">
          <a
            href="/list/sector/basic-materials"
            class="sm:hover:text-white text-blue-400 text-lg"
          >
            Basic Materials
          </a>
        </li>
        <li class="mb-2 cursor-pointer sm:hidden">
          <a
            href="/list/sector/communication-services"
            class="sm:hover:text-white text-blue-400 text-lg"
          >
            Communication Services
          </a>
        </li>
        <li class="mb-2 cursor-pointer sm:hidden">
          <a
            href="/list/sector/consumer-defensive"
            class="sm:hover:text-white text-blue-400 text-lg"
          >
            Consumer Defensive
          </a>
        </li>
      </ul>
    </div>

    <!-- Column 2 -->
    <div class="mt-11 hidden sm:block">
      <ul class="list-disc space-y-1 pl-5">
        <li class="mb-2 cursor-pointer">
          <a
            href="/list/sector/consumer-cyclical"
            class="sm:hover:text-white text-blue-400 text-lg"
          >
            Consumer Cyclical
          </a>
        </li>
        <li class="mb-2 cursor-pointer">
          <a
            href="/list/sector/real-estate"
            class="sm:hover:text-white text-blue-400 text-lg"
          >
            Real Estate
          </a>
        </li>
        <li class="mb-2 cursor-pointer">
          <a
            href="/list/sector/basic-materials"
            class="sm:hover:text-white text-blue-400 text-lg"
          >
            Basic Materials
          </a>
        </li>
        <li class="mb-2 cursor-pointer">
          <a
            href="/list/sector/communication-services"
            class="sm:hover:text-white text-blue-400 text-lg"
          >
            Communication Services
          </a>
        </li>
        <li class="mb-2 cursor-pointer">
          <a
            href="/list/sector/consumer-defensive"
            class="sm:hover:text-white text-blue-400 text-lg"
          >
            Consumer Defensive
          </a>
        </li>
        <!-- ...other list items -->
      </ul>
    </div>
  </div>
</div>
<!--End Sector Group-->

<!--Start ETF Lists-->

<div class="container mx-auto pt-10 pl-4">
  <div class="grid grid-cols-1 sm:grid-cols-2">
    <div class="mb-4">
      <h2 class="text-xl sm:text-2xl text-white font-bold mb-3">ETF Lists</h2>
      <ul class="list-disc space-y-1 pl-3">
        <li class="mb-2 cursor-pointer">
          <a
            href="/etf/new-launches"
            class="sm:hover:text-white text-blue-400 text-lg"
          >
            New Launches
          </a>
        </li>
        <li class="mb-2 cursor-pointer">
          <a
            href="/etf/etf-providers"
            class="sm:hover:text-white text-blue-400 text-lg"
          >
            ETF Providers
          </a>
        </li>
        <li class="mb-2 cursor-pointer sm:hidden">
          <a
            href="/list/bitcoin-etfs"
            class="sm:hover:text-white text-blue-400 text-lg"
          >
            Bitcoin ETFs
          </a>
        </li>
      </ul>
    </div>

    <!-- Column 2 -->
    <div class="mt-11 hidden sm:block">
      <ul class="list-disc space-y-1 pl-5">
        <li class="mb-2 cursor-pointer">
          <a
            href="/list/bitcoin-etfs"
            class="sm:hover:text-white text-blue-400 text-lg"
          >
            Bitcoin ETFs
          </a>
        </li>
        <!-- ...other list items -->
      </ul>
    </div>
  </div>
</div>

<!--End ETF Lists-->

<!--Start Other Lists-->

<div class="container mx-auto pt-10 pl-4">
  <div class="grid grid-cols-1 sm:grid-cols-2">
    <div class="mb-4">
      <h2 class="text-xl sm:text-2xl text-white font-bold mb-3">Other Lists</h2>
      <ul class="list-disc space-y-1 pl-3">
        <li class="mb-2 cursor-pointer">
          <a
            href="/list/magnificent-seven"
            class="sm:hover:text-white text-blue-400 text-lg"
          >
            Magnificent Seven
          </a>
        </li>
        <li class="mb-2 cursor-pointer">
          <a
            href="/list/dividend-kings"
            class="sm:hover:text-white text-blue-400 text-lg"
          >
            Dividend Kings
          </a>
        </li>
        <li class="mb-2 cursor-pointer">
          <a
            href="/list/dividend-aristocrats"
            class="sm:hover:text-white text-blue-400 text-lg"
          >
            Dividend Aristocrats
          </a>
        </li>
        <li class="mb-2 cursor-pointer sm:hidden">
          <a
            href="/list/reit-stocks"
            class="sm:hover:text-white text-blue-400 text-lg"
          >
            All REITs
          </a>
        </li>
        <li class="mb-2 cursor-pointer sm:hidden">
          <a
            href="/list/delisted-stocks"
            class="sm:hover:text-white text-blue-400 text-lg"
          >
            Delisted Companies
          </a>
        </li>
      </ul>
    </div>

    <!-- Column 2 -->
    <div class="mt-10 hidden sm:block">
      <ul class="list-disc space-y-1 pl-5">
        <li class="mb-2 cursor-pointer">
          <a
            href="/list/reit-stocks"
            class="sm:hover:text-white text-blue-400 text-lg"
          >
            All REITs
          </a>
        </li>
        <li class="mb-2 cursor-pointer">
          <a
            href="/list/delisted-stocks"
            class="sm:hover:text-white text-blue-400 text-lg"
          >
            Delisted Companies
          </a>
        </li>
        <!-- ...other list items -->
      </ul>
    </div>
  </div>
</div>

<!--End Other Lists-->