index.html

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<link rel="stylesheet" type="text/css" href="css/slider.css">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@3.6.9/dist/css/splide.min.css">
	<script>
		tailwind.config = {
			theme: {
				extend: {
					colors: {
						blue: {
							500: '#2042B6',
							400: '#90B8F0'
						},
						white: {
							500: '#FFFFFF',
							400: "#F3F3F3",
							300: '#EFF3F6',
							200: '#DADADA',
							100: '#E6E6E6',
							50: '#7D7F81',
							25: '#9FA0A1',
							20: '#647888',
						},
						light: '#D9D9D9',
						black: '#191618',
						semiGreen: " #AFCD80",
					}
				}
			}
		}
	</script>

</head>

<body class="bg-white-200">

	<!-- navigation -->
	<nav class="flex lg:px-[45px] pt-[20px] fixed z-50 top-0 left-0 right-0 ">
		<div id="navbar" class="h-[58px] px-[20px] w-full flex justify-between items-center rounded-md">
			<img id="logo_white" src="assets/logo.png" />
			<img id="logo_black" src="assets/logoBlack.png" />
			<ul class="flex items-center gap-[10px]">
				<button id="share_btn"
					class=" flex justify-center items-center lg:w-[42px] w-[30px] lg:h-[42px] h-[30px] rounded-full border border-1 border-black">
					<img id="share_icon_white" src="assets/icons/shareIcon.png" alt="">
					<img id="share_icon_black" src="assets/icons/shareBalck.png" alt="">
				</button>
				<button id="download_btn"
					class="lg:w-[182px] w-[150px] lg:h-[42px] h-[30px] lg:text-[12px] text-[10px] flex justify-center items-center font-normal border border-1 border-black rounded-full">
					Download the 2024 Report
				</button>
				<button id="open_toggol_menu" class="pl-[8px] lg:pl-[15px]">
					<img id="menu_icon_white" src="assets/icons/menuWhite.png" alt="">
					<img id="menu_icon_black" src="assets/icons/menuBlack.png" alt="">
				</button>

			</ul>
		</div>
		<div id="menuList" class="w-[340px] h-[500px] bg-white-500 !z-50 absolute  right-0 top-0 mr-1 mt-1 rounded-[18px]">

			<div class="flex justify-center pt-[48px]">
				<ul class="flex items-center gap-[10px]">
					<li id="share_btn"
						class=" flex justify-center items-center w-[42px] h-[42px] rounded-full border border-1 border-0 bg-semiGreen">
						<img class="w-[10px] h-[10px]" src="assets/icons/shareIcon.png" />
					</li>
					<button id="_btn" class="w-[182px] h-[42px] text-[12px]">
						Download the 2024 Report</button>
					<button id="close_toggol_menu">
						<img class="pl-[15px]" src="assets/icons/close.png" />
					</button>
				</ul>
			</div>

			<ul id="manu_items" class="pl-[34px] text-[18px] pt-6 ">
				<li>The WPPOOL Index</li>
				<li>All Companies</li>
				<li>Potential Future Listings</li>
				<li>State of USA</li>
				<li>Stories & Ideas</li>
				<li>About WPPOOL</li>
				<li>WPPOOL Portfolio Companies</li>
				<li href="" class="mt-6">
					<a href="" class="underline text-blue-500 text-[21px]">Visit WPPOOL</a>
				</li>
			</ul>
		</div>
	</nav>
	<!-- scroll btn  -->
	<button id="quck_nav_btn" class="bg-white-500 w-[32px] fixed z-40 md:w-[48px] lg:w-[64px] h-[32px] md:h-[48px] lg:h-[64px]  right-6 md:right-10 lg:right-16 bottom-10 transform shadow-2xl -rotate-90  rounded-full flex justify-center items-center">
		<img id="quck_nav_icon" class="" src="assets/icons/arrow_right.png" alt="">
	</button>
	<!-- hero section  -->
	<section id="hero" class="section reletive bg-blue-500 h-[100vh] w-full  flex  justify-center items-center">
		<img id="hero_dot_blob" class="opacity-85 text-blue-500 bg-blue-500" src="assets/dot.svg" alt="">
		<div id="hero_info"
			class="hero_title w-[350px] md:w-[550px] lg:w-[1145px] absolute flex flex-col justify-center items-center text-center text-white-500">
			<h1 class="lg:text-[78px] md:text-[40px] text-[30px]">The WPPOOL Index</h1>
			<p class="text-[10px] md:text-[15px] lg:text-[21px]">Monitor the performance of emerging, publicly traded,
				financial technology companies</p>
		</div>
		<div
			class="hero_summery absolute lg:w-[319px] lg:h-[418px] lg:top-[190px] lg:left-[29px] z-0 bottom-5 lg:block flex justify-center">
			<p class="flex flex-col text-[10px] ">
				60
				<span>Companies</span>
			</p>
			<p class="flex flex-col">
				$100B
				<span>Market cap</span>
			</p>
			<p class="flex flex-col">
				3.5x
				<span>Revenue multiple</span>
			</p>
			<p class="flex flex-col">
				60%
				<span>LTM avg. revenue growth rate</span>
			</p>
		</div>
		<!-- <div class=" "> -->
		<!-- </div> -->
	</section>

	<!-- //wppool index chart  -->

	<section id="index_table"
		class="section grid lg:grid-cols-12 w-full h-[100vh] bg-white-500 px-4  lg:px-0 lg:pl-[25px] py-10 ">
		<div id="table_nav" class="bg-white-300 w-full h-full col-span-2 flex flex-col rounded-[14px] pr-4 lg:px-[9px] ">
			<div
				class="w-full lg:w-[200px] drop-shadow-lg h-[36px] bg-blue-500  rounded-md px-4 mt-2 flex  justify-between items-center">
				<p class="!text-white-400">The Index</p>
				<img class="w-[3.84px] h-[0.96px]" src="assets/icons/-.png" alt="">
			</div>
			<div class="w-full lg:w-[200px] h-[36px]  rounded-md px-4 flex justify-between items-center">
				<p class="text-white-20">The Index Tab Two</p>
				<svg width="8" height="7" viewBox="0 0 8 7" fill="none" xmlns="http://www.w3.org/2000/svg">
					<path d="M7.13856 3.936H4.40256V6.912H3.63456V3.936H0.866563V3.216H3.63456V0.352H4.40256V3.216H7.13856V3.936Z"
						fill="#647888" />
				</svg>
			</div>
			<div class="w-full lg:w-[200px] h-[36px] rounded-md px-4 flex justify-between items-center">
				<p class="text-white-20">The Index Tab Three</p>
				<svg width="8" height="7" viewBox="0 0 8 7" fill="none" xmlns="http://www.w3.org/2000/svg">
					<path d="M7.13856 3.936H4.40256V6.912H3.63456V3.936H0.866563V3.216H3.63456V0.352H4.40256V3.216H7.13856V3.936Z"
						fill="#647888" />
				</svg>
			</div>
			<div class="w-full lg:w-[200px] h-[36px]    rounded-md px-4 flex justify-between items-center">
				<p class="text-white-20">The Index Tab Four</p>
				<svg width="8" height="7" viewBox="0 0 8 7" fill="none" xmlns="http://www.w3.org/2000/svg">
					<path d="M7.13856 3.936H4.40256V6.912H3.63456V3.936H0.866563V3.216H3.63456V0.352H4.40256V3.216H7.13856V3.936Z"
						fill="#647888" />
				</svg>
			</div>
			<div class="w-full lg:w-[200px] h-[36px]    rounded-md px-4 flex justify-between items-center">
				<p class="text-white-20">The Index Tab Five</p>
				<svg width="8" height="7" viewBox="0 0 8 7" fill="none" xmlns="http://www.w3.org/2000/svg">
					<path d="M7.13856 3.936H4.40256V6.912H3.63456V3.936H0.866563V3.216H3.63456V0.352H4.40256V3.216H7.13856V3.936Z"
						fill="#647888" />
				</svg>

			</div>
		</div>

		<div class=" lg:h-[40vh] lg:col-span-10 pt-6 lg:pt-0  lg:ml-2 lg:mr-[70px]">
			<div id="index_graph" class="">
				<div id="index_header" class="">
					<div id="index_title" class="flex items-center">
						<svg width="46" height="41" viewBox="0 0 46 41" fill="none" xmlns="http://www.w3.org/2000/svg">
							<path d="M0.914491 40.5L26.5591 0.5H45.0855L19.4409 40.5H0.914491Z" stroke="#191618" />
						</svg>
						<h1 id="section_title" class="!text-[30px] !md:text-[38px] !lg:text-[36px]">The WPPOOL Index</h1>
					</div>
					<div id="index_overview" class="grid lg:grid-cols-4  gap-4 lg:gap-0">
						<div id="overview"
							class=" lg:w-[230px] h-[50px] grid grid-cols-3 bg-white-400 items-center px-2 rounded-md">
							<h2 id="overview_title" class="col-span-1 text-[#FC714D] text-[30px]">+66.2%</h1>
							<div class=" items-center col-span-2 flex justify-end border-r-4 border-[#FC714D] pr-2  ">
								<div id="overviewOf" class=" grid justify-end items-center w-[55px] text-[12px] ">WPPOOL Index</div>
							</div>
						</div>
						<div id="overview" class="lg:w-[230px] h-[50px] grid grid-cols-3 bg-white-400 items-center px-2 rounded-md">
							<h1 class="col-span-1 text-[#615DE3] text-[30px]">+26.6%</h1>
							<div class=" items-center col-span-2 flex justify-end border-r-4 border-[#615DE3] pr-2  ">
								<div id="overviewOf" class=" grid justify-end items-center w-[55px] text-[12px] ">Goolge Index</div>
							</div>
						</div>
						<div id="overview" class="lg:w-[230px] h-[50px] grid grid-cols-3 bg-white-400 items-center px-2 rounded-md">
							<h1 class="col-span-1 text-[#7CA63A] text-[30px]">+66.2%</h1>
							<div class=" items-center col-span-2 flex justify-end border-r-4 border-[#7CA63A] pr-2  ">
								<div id="overviewOf" class=" grid justify-end items-center w-[55px] text-[12px] ">Microsoft Index</div>
							</div>
						</div>
						<div id="overview" class="lg:w-[230px] h-[50px] grid grid-cols-3 bg-white-400 items-center px-2 rounded-md">
							<h1 class="col-span-1 text-[#6F34A1] text-[30px]">+17%</h1>
							<div class=" items-center col-span-2 flex justify-end border-r-4 border-[#6F34A1] pr-2  ">
								<div id="overviewOf" class=" grid justify-end items-center w-[55px] text-[12px] ">Twitter Index</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div id="index_filter"
				class="flex flex-col lg:flex-row justify-center md:justify-around  lg:justify-between pt-5 pb-2">
				<div id="select_options" class="flex flex-row  gap-2 lg:gap-10">
					<div id="primary_button"
						class="w-[178px] md:w-full lg:w-[178px] h-[26px] text-[12px] !flex !justify-between !px-4 !items-center !drop-shadow-none">
						<p>Sectors</p>
						<svg width="6" height="5" viewBox="0 0 6 5" fill="none" xmlns="http://www.w3.org/2000/svg">
							<path
								d="M2.4177 3.91732L0.251037 1.75065C-0.0128516 1.48676 -0.0718794 1.18468 0.0739539 0.844401C0.219787 0.504123 0.480204 0.333984 0.855204 0.333984H5.14687C5.52187 0.333984 5.78229 0.504123 5.92812 0.844401C6.07395 1.18468 6.01493 1.48676 5.75104 1.75065L3.58437 3.91732C3.50104 4.00065 3.41076 4.06315 3.31354 4.10482C3.21632 4.14648 3.11215 4.16732 3.00104 4.16732C2.88993 4.16732 2.78576 4.14648 2.68854 4.10482C2.59132 4.06315 2.50104 4.00065 2.4177 3.91732Z"
								fill="white" />
						</svg>
					</div>
					<div id="primary_button"
						class="w-[175px] md:w-full lg:w-[178px] h-[26px] text-[12px] !flex !justify-between !px-4 !items-center !drop-shadow-none !shadow-transparent">
						<p>Types of IPO</p>
						<svg width="6" height="5" viewBox="0 0 6 5" fill="none" xmlns="http://www.w3.org/2000/svg">
							<path
								d="M2.4177 3.91732L0.251037 1.75065C-0.0128516 1.48676 -0.0718794 1.18468 0.0739539 0.844401C0.219787 0.504123 0.480204 0.333984 0.855204 0.333984H5.14687C5.52187 0.333984 5.78229 0.504123 5.92812 0.844401C6.07395 1.18468 6.01493 1.48676 5.75104 1.75065L3.58437 3.91732C3.50104 4.00065 3.41076 4.06315 3.31354 4.10482C3.21632 4.14648 3.11215 4.16732 3.00104 4.16732C2.88993 4.16732 2.78576 4.14648 2.68854 4.10482C2.59132 4.06315 2.50104 4.00065 2.4177 3.91732Z"
								fill="white" />
						</svg>
					</div>
				</div>
				<div id="select_date"
					class="lg:w-[232px] h-[30px] bg-white-300 flex justify-center gap-5 md:gap-20 lg:gap-[2px] items-center rounded-full mt-4 lg:mt-0 lg:mr-[20px]">
					<p class="text-white-20 w-[36px] h-[24px]">1Y</p>
					<p class="text-white-20 w-[36px] h-[24px]">YTD</p>
					<p id="primary_button" class="w-[36px] h-[24px] ">6M</p>
					<p class="text-white-20 w-[36px] h-[24px]">1M</p>
					<p class="text-white-20 w-[36px] h-[24px]">1W</p>
				</div>
			</div>


			<div id="graph" class="h-[60vh] w-[357px]  md:w-full lg:w-full">
				<canvas id="chart" class="w-full lg:w-[400px] h-[400px]"></canvas>
			</div>
		</div>

	</section>

	<!-- companies info  -->
	<section id="wppool_index" class="section   w-full pt-10 bg-white-500">
		<div class="section_header px-[20px] md:px[20px] lg:px-[40px]   flex justify-between items-center">
			<p id="table_section_tile" class="text-[20px] md:text-[25px] lg:text-[48px]">All Companies</p>
			<!-- <search> -->
				<form class="flex items-center ">
					<input
						class="h-[40px] lg:h-[58px] w-[200px] md:w-[300px]  lg:w-[588px] text-[15px] lg:text-[24px] bg-white-400 border-2 border-white-200 rounded-md outline-blue-500 placeholder-black"
						name="search" id="search" placeholder="Search Companies">
				</form>
			<!-- </search> -->
		</div>
		<div
			class="table_container flex justify-center px-[20px] md:px-[20px] lg:px-[40px] pt-[40px] !h-[70vh] overflow-y-auto">
			<table id="companyTable" class=" ">
				<thead>
					<tr>
						<th>Company</th>
						<th class=" gap-4">
							<p class="flex items-center align-center">
								Ticker
								<img class="px-2" src="assets/icons/arrow_drop_down.png" alt="">
							</p>
						</th>
						<th>Vertical</th>
						<th>Price</th>
						<th>Market Cap ($B)</th>
						<th>Revenue Growth</th>
						<th>Gross Margin</th>
						<th>EV/Revenue</th>
						<th>YTD Performance</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>Adyen</td>
						<td>AFRM</td>
						<td>Payments</td>
						<td>$17.15</td>
						<td>$50.5</td>
						<td>49.0%</td>
						<td>15.8%</td>
						<td>6.3</td>
						<td>24.3%</td>
					</tr>
					<tr>
						<td>Affirm</td>
						<td>AFRM</td>
						<td>Lending</td>
						<td>$16.12</td>
						<td>$4.7</td>
						<td>32.0%</td>
						<td>48.7%</td>
						<td>4.9</td>
						<td>77.1%</td>
					</tr>
					<tr>
						<td>Alkami Technology</td>
						<td>ALKT</td>
						<td>B2B SaaS</td>
						<td>$16.27</td>
						<td>$1.5</td>
						<td>34.0%</td>
						<td>53.0%</td>
						<td>7.0</td>
						<td>10.0%</td>
					</tr>
					<tr>
						<td>AvidXchange</td>
						<td>AVDX</td>
						<td>Payments</td>
						<td>$10.21</td>
						<td>$2.0</td>
						<td>27.0%</td>
						<td>61.5%</td>
						<td>6.0</td>
						<td>10.5%</td>
					</tr>
					<tr>
						<td>Bakkt Holdings</td>
						<td>BKKT</td>
						<td>Wealth</td>
						<td>$1.32</td>
						<td>$0.1</td>
						<td>38.0%</td>
						<td>--</td>
						<td>0.4</td>
						<td>13.8%</td>
					</tr>
					<tr>
						<td>Virtu Financial Inc</td>
						<td>VIRT</td>
						<td>Wealth</td>
						<td>$17.00</td>
						<td>$3.1</td>
						<td>-22.0%</td>
						<td>38.2%</td>
						<td>2.6</td>
						<td>-17.8%</td>
					</tr>
					<tr>
						<td>Adyen</td>
						<td>AFRM</td>
						<td>Payments</td>
						<td>$17.15</td>
						<td>$50.5</td>
						<td>49.0%</td>
						<td>15.8%</td>
						<td>6.3</td>
						<td>24.3%</td>
					</tr>
					<tr>
						<td>Affirm</td>
						<td>AFRM</td>
						<td>Lending</td>
						<td>$16.12</td>
						<td>$4.7</td>
						<td>32.0%</td>
						<td>48.7%</td>
						<td>4.9</td>
						<td>77.1%</td>
					</tr>
					<tr>
						<td>Alkami Technology</td>
						<td>ALKT</td>
						<td>B2B SaaS</td>
						<td>$16.27</td>
						<td>$1.5</td>
						<td>34.0%</td>
						<td>53.0%</td>
						<td>7.0</td>
						<td>10.0%</td>
					</tr>
					<tr>
						<td>AvidXchange</td>
						<td>AVDX</td>
						<td>Payments</td>
						<td>$10.21</td>
						<td>$2.0</td>
						<td>27.0%</td>
						<td>61.5%</td>
						<td>6.0</td>
						<td>10.5%</td>
					</tr>
					<tr>
						<td>AvidXchange</td>
						<td>AVDX</td>
						<td>Payments</td>
						<td>$10.21</td>
						<td>$2.0</td>
						<td>27.0%</td>
						<td>61.5%</td>
						<td>6.0</td>
						<td>10.5%</td>
					</tr>
					<tr>
						<td>AvidXchange</td>
						<td>AVDX</td>
						<td>Payments</td>
						<td>$10.21</td>
						<td>$2.0</td>
						<td>27.0%</td>
						<td>61.5%</td>
						<td>6.0</td>
						<td>10.5%</td>
					</tr>
					<tr>
						<td>AvidXchange</td>
						<td>AVDX</td>
						<td>Payments</td>
						<td>$10.21</td>
						<td>$2.0</td>
						<td>27.0%</td>
						<td>61.5%</td>
						<td>6.0</td>
						<td>10.5%</td>
					</tr>
				</tbody>
			</table>
		</div>
		<div class="table_btn py-10 flex bg-white-200 justify-center gap-10 left-0 top-0">
			<button id="_btn" class="lg:w-[250px] w-[150px] lg:h-[42px] h-[30px] lg:text-[16px] text-[10px]">
				Download the 2024 Report
			</button>
			<button id="_btn" class="lg:w-[182px] w-[150px] lg:h-[42px] h-[30px] lg:text-[16px] text-[10px]">
				View Methodology
			</button>
		</div>

	</section>

	<!-- Potential Future Listings -->
	<section id="future_listings" class="section pt-14 px-[20px] lg:pl-[93px] w-full">
		<div id="section_header" class="">
			<h1 id="section_title" class="text-[30px]">Potential Future Listings</h1>
			<p id="section_subtitle" class="lg:w-[880px]">Porem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
				vulputate libero et velit interdum, ac aliquet odio mattis. Class aptent taciti sociosqu ad litora torquent per
				conubia nostra, per inceptos himenaeos. </p>
		</div>
		<div class="future_list pt-4  lg:pr-16 grid grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-[20px]">
			<div class="list_card">
				<img id="card_img" src="assets/company/strip.png" alt="">
			</div>
			<div class="list_card">
				<img class="" src="assets/company/klarna.png" alt="">
			</div>
			<div class="list_card">
				<img class="" src="assets/company/plaid.png" alt="">
			</div>
			<div class="list_card">
				<img class="" src="assets/company/checkout.png" alt="">
			</div>
			<div class="list_card">
				<img class="" src="assets/company/revolut.png" alt="">
			</div>
			<div class="list_card">
				<img class="" src="assets/company/chime.png" alt="">
			</div>
			<div class="list_card">
				<img class="" src="assets/company/n26.png" alt="">
			</div>
			<div class="list_card">
				<img class="" src="assets/company/brex.png" alt="">
			</div>
			<div class="list_card">
				<img class="" src="assets/company/deel.png" alt="">
			</div>
			<div class="list_card">
				<img class="" src="assets/company/gusto.png" alt="">
			</div>
		</div>
	</section>

	<!-- State of USA -->
	<div id="state_of_USA" class="section h-screen relative overflow-hidden pt-10 md:pt-0 lg:pt-0">
		<div class="section_header flex flex-col gap-3 px-4 lg:px-0 lg:pl-[93px] pb-4">
			<h1 id="section_title">State of USA</h1>
			<button id="primary_button" class="w-[140px] lg:w-[200px] lg:h-[58px]  !flex !justify-around">
				<p id="section_title" class="text-[25px] !lg:text-[42px] !text-white-500">2024</p>
				<svg width="6" height="5" viewBox="0 0 6 5" fill="none" xmlns="http://www.w3.org/2000/svg">
					<path d="M2.4177 3.91732L0.251037 1.75065C-0.0128516 1.48676 -0.0718794 1.18468 0.0739539 0.844401C0.219787 0.504123 0.480204 0.333984 0.855204 0.333984H5.14687C5.52187 0.333984 5.78229 0.504123 5.92812 0.844401C6.07395 1.18468 6.01493 1.48676 5.75104 1.75065L3.58437 3.91732C3.50104 4.00065 3.41076 4.06315 3.31354 4.10482C3.21632 4.14648 3.11215 4.16732 3.00104 4.16732C2.88993 4.16732 2.78576 4.14648 2.68854 4.10482C2.59132 4.06315 2.50104 4.00065 2.4177 3.91732Z" fill="white"/>
					</svg>
					
			</button>
			<p id="section_subtitle">Click through the slides or download the report to view natively on your device.</p>
		</div>
		<img class="absolute top-32 md:top-0 lg:top-0 right-[5%]" src="assets/icons/usaHologram.png" alt="">
		<div id="slider" class="lg:pl-[60px]  h-[80vh] lg:h-fit">
			<div id="image-slider" class="splide absolute h-fit pb-6 lg:mr-[-35%] overflow-hidden ">
				<div class="splide__track">
					<ul class="splide__list">
						<li class="splide__slide"><img src="assets/rgegdg.png" alt="Slide 1"></li>
						<li class="splide__slide"><img src="assets/rhrdgd.png" alt="Slide 2"></li>
						<li class="splide__slide"><img src="assets/dehjtfgd.png" alt="Slide 3"></li>
					</ul>
				</div>
			</div>

		</div>
		<div id="slider_buttons_sections">
			<button id="primary_button" class="lg:w-[240px] h-[56px] text-[16px] px-4 absolute right-[10%] left-[10%]   lg:left-0 md:right-[14%] lg:left-[69%] bottom-10  lg:bottom-24">Download the 2023 Report</button>
			<div class="absolute flex items-center gap-2 left-[50%] lg:left-[18%] bottom-28  md:bottom-[24%] lg:bottom-24 ">Pages <div class="w-[120px] h-[56px] rounded-full bg-white-500 text-black flex items-center justify-around"><span>1 and 2</span> <svg width="6" height="5" viewBox="0 0 6 5" fill="none" xmlns="http://www.w3.org/2000/svg">
				<path d="M2.4177 3.91732L0.251037 1.75065C-0.0128516 1.48676 -0.0718794 1.18468 0.0739539 0.844401C0.219787 0.504123 0.480204 0.333984 0.855204 0.333984H5.14687C5.52187 0.333984 5.78229 0.504123 5.92812 0.844401C6.07395 1.18468 6.01493 1.48676 5.75104 1.75065L3.58437 3.91732C3.50104 4.00065 3.41076 4.06315 3.31354 4.10482C3.21632 4.14648 3.11215 4.16732 3.00104 4.16732C2.88993 4.16732 2.78576 4.14648 2.68854 4.10482C2.59132 4.06315 2.50104 4.00065 2.4177 3.91732Z" fill="blue"/>
				</svg>
				</div> <span class="invisible md:visible lg:visible">of 37</span></div>
		</div>
	</div>


	<!-- Stories & Ideas -->
	<section id="stories_ideas" class="section px-4 md:px-[10px] lg:px-[20px] lg:pl-[93px] w-fit ">
		<div id="section_header" class="">
			<h1 id="section_title" class="">Stories & Ideas</h1>
			<p id="section_subtitle" class="lg:w-[880px]">The latest news and updates </p>
		</div>
		<div class="storie_list grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-14 lg:gap-20 py-20 lg:pr-32  ">
			<div id="stories" class="">
				<img id="avatar" src="assets/persons/image 97.png" alt="">
				<div id="avatar_info">
					<h5>By: Sahabuddin Sagor</h5>
					<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia.</p>
				</div>
				<div id="more_info_btn">
					<button id="_btn" class="w-[93px] px-[10px] py-[12px] h-[30px] text-[14px]">Read More</button>
				</div>
			</div>
			<div id="stories" class="">
				<img id="avatar" src="assets/persons/image 98.png" alt="">
				<div id="avatar_info">
					<h5>By: Nayem Khan</h5>
					<p>Lorem ipsum dolor sit amet </p>
				</div>
				<div id="more_info_btn">
					<button id="_btn" class="w-[93px] px-[10px] py-[12px] h-[30px] text-[14px]">Read More</button>
				</div>
			</div>
			<div id="stories" class="">
				<img id="avatar" src="assets/persons/image 97.png" alt="">
				<div id="avatar2">
					<img src="assets/persons/image 100.png" alt="">
				</div>
				<div id="avatar_info">
					<h5>By: Sahabuddin Sagor</h5>
					<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia.</p>
				</div>
				<div id="more_info_btn">
					<button id="_btn" class="w-[93px] px-[10px] py-[12px] h-[30px] text-[14px]">Read More</button>
				</div>
			</div>
			<div id="stories" class="">
				<img id="avatar" src="assets/persons/image 97.png" alt="">
				<div id="avatar_info">
					<h5>By: Sahabuddin Sagor</h5>
					<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia.</p>
				</div>
				<div id="more_info_btn">
					<button id="_btn" class="w-[93px] px-[10px] py-[12px] h-[30px] text-[14px]">Read More</button>
				</div>
			</div>
			<div id="stories" class="">
				<img id="avatar" src="assets/persons/image 98.png" alt="">
				<div id="avatar_info">
					<h5>By: Nayem Khan</h5>
					<p>Lorem ipsum dolor sit amet.</p>
				</div>
				<div id="more_info_btn">
					<button id="_btn" class="w-[93px] px-[10px] py-[12px] h-[30px] text-[14px]">Read More</button>
				</div>
			</div>
			<div id="stories" class="">
				<img id="avatar" src="assets/persons/image 97.png" alt="">
				<div id="avatar2">
					<img src="assets/persons/image 100.png" alt="">
				</div>

				<div id="avatar_info">
					<h5>By: Sahabuddin Sagor</h5>
					<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia.</p>
				</div>
				<div id="more_info_btn">
					<button id="_btn" class="w-[93px] px-[10px] py-[12px] h-[30px] text-[14px]">Read More</button>
				</div>
			</div>
		</div>
	</section>

	<!-- about WPPOOL -->
	<section id="about_wppool" class="section px-[20px] lg:pl-[93px] lg:pr-20    w-full ">
		<div class="py-14 border-y-2 border-blue-400  ">
			<div class="bg-white-500  rounded-lg lg:h-[420px] flex flex-col flex-col lg:flex-row  lg:py-20   ">
				<div id="" class="lg:pl-[70px] mx-4 lg:mx-0  pb-12 pt-4 pb:py-0 lg:pt-0">
					<h5 id="section_title">About WPPOOL</h5>
					<h6 id="section_title_light" class="text-white-50 text-[30px]">Investing in wppool for over 50 years</h6>
					<p id="section_subtitle">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia,molestiae
						quas
						vel sint commodi repudiandae consequuntur voluptatum laborumnumquam blanditiis harum quisquam eius sed odit
						fugiat iusto fuga praesentiumoptio, eaque rerum! Provident similique accusantium nemo autem.</p>
					<div class="pt-5">
						<button id="primary_button" class="w-[167px] px-[10px] lg:py-[12px] h-[47px] text-[14px]">Contact
							WPPOOL</button>
					</div>
				</div>
				<img class="w-[523px] h-[250px] md:h-[340px] lg:h-[340px] md:ml-20" src="assets/about_wppool.png" alt="">
			</div>
		</div>
	</section>

	<!-- Selected WPPOOL Portfolio Companies -->
	<section id="wppool_portfolio" class="section px-[20px] lg:pl-[93px]  pt-10 md:pt-0 lg:pt-0 w-full ">
		<h5 id="section_title" class="lg:mb-8">Selected WPPOOL Portfolio Companies</h5>
		<div class="portfolio_companies pt-4  lg:pr-16 grid grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-[20px]">
			<div class="list_card">
				<img id="card_img" src="assets/company/alibaba.png" alt="">
			</div>
			<div class="list_card">
				<img class="" src="assets/company/vendr.png" alt="">
			</div>
			<div class="list_card">
				<img class="" src="assets/company/vestwell.png" alt="">
			</div>
			<div class="list_card">
				<img class="" src="assets/company/snapdocs.png" alt="">
			</div>
			<div class="list_card">
				<img class="" src="assets/company/vendr.png" alt="">
			</div>
			<div class="list_card">
				<img class="" src="assets/company/snapdocs.png" alt="">
			</div>
			<div class="list_card">
				<img class="" src="assets/company/toast.png" alt="">
			</div>
			<div class="list_card">
				<img class="" src="assets/company/connepay.png" alt="">
			</div>
			<div class="list_card">
				<img class="" src="assets/company/connepay.png" alt="">
			</div>
			<div class="list_card">
				<img class="" src="assets/company/mineralltee.png" alt="">
			</div>
			<div class="list_card">
				<img id="card_img" src="assets/company/flywire.png" alt="">
			</div>
			<div class="list_card">
				<img class="" src="assets/company/quovo_logo.png" alt="">
			</div>
			<div class="list_card">
				<img class="" src="assets/company/Vector.png" alt="">
			</div>
			<div class="list_card">
				<img class="" src="assets/company/nota_bene_logo 1.png" alt="">
			</div>
			<div class="list_card">
				<img class="" src="assets/company/Recurly_Logo_Purple 1.png" alt="">
			</div>
			<div class="list_card">
				<img class="" src="assets/company/Group 169.png" alt="">
			</div>
			<div class="list_card">
				<img class="" src="assets/company/toast.png" alt="">
			</div>
			<div class="list_card">
				<img class="" src="assets/company/advisor.png" alt="">
			</div>
			<div class="list_card">
				<img class="" src="assets/company/argyle-black-l 2.png" alt="">
			</div>
			<div class="list_card">
				<img class="" src="assets/company/ss-logo-2color-black 1.png" alt="">
			</div>
		</div>
	</section>

	<!-- footer  -->
	<section id="footer" class="section  lg:pr-20  pt-10     w-full ">
		<div
			class="footer_content bg-white-100 rounded-lg  grid grid-cols-0 md:grid-cols-1 lg:grid-cols-4 px-5 lg:px-[94px] pt-20 pb-10">

			<div class="md:col-span-2 lg:col-span-2 grid lg:grid-row-4">
				<div class="fotter_pra lg:w-[354px]  lg:h-[296px] row-span-0 lg:row-span-3">
					<h6 class="text-[20px] lg:text-[26px] ">Experience remarkable WordPress products with a
						new level of power, beauty, and human-centered designs.
					</h6>
				</div>
				<div class="fotter_pra lg:h-[296px] flex flex-col justify-end pt-10 lg:pt-0 ">
					<div class="text-white-25 flex gap-10 pb-5">
						<p>@2024</p>
						<a href="/">Terms of Use</a>
						<a href="/">Privacy Policy</a>
					</div>
					<p id="" class="text-[14px]">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime
						mollitia,molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis
						harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum! Provident similique
						accusantium nemo autem. Veritatis obcaecati tenetur iure eius earum ut molestias architecto voluptate
						aliquam nihil, eveniet aliquid culpa officia aut! Impedit sit sunt quaera
					</p>
				</div>

			</div>

			<div id="footer_url" class="flex flex-col pt-10 md:pt-10 lg:pt-0 gap-3">
				<p class="text-white-25">Jump to</p>
				<a href="/">About Us</a>
				<a href="/">News</a>
				<a href="/">Stories</a>
				<a href="/">Jobs</a>
				<a href="/">About Us</a>
			</div>

			<div id="location" class="pt-10 md:pt-10 lg:pt-0">
				<div id="location_1" class="pb-5 border-b-2 border-white-25">
					<h6>Cambridge</h6>
					<p>70728 Yost Burg,
						North Magdaleneview,
						UT 97952-2814</p>
				</div>
				<div id="location_1" class="py-5 border-b-2 border-white-25">
					<h6>London</h6>
					<p>Suite 292 903 Stehr Streets,
						Langworthtown, SC 94577-9465
					</p>
				</div>
				<div id="location_1" class="py-5 border-b-2 border-white-25">
					<h6>Sen Francisco</h6>
					<p>19837 Gilberto Lodge,
						Lake Kendallville,
						Colorado - 97392, Bhutan</p>
				</div>
				<div id="social_url" class="pt-5 flex gap-5">
					<img src="assets/icons/linkedin.png" alt="">
					<img src="assets/icons/twitter.png" alt="">
				</div>
			</div>

		</div>

	</section>


	<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@3.6.9/dist/js/splide.min.js"></script>
	<script src="Javascript/chart.js"></script>
	<script src="Javascript/main.js"></script>
</body>

</html>