<div class="w-full flex flex-col">
<js-component src="general/quicklinks" class="w-full flex"></js-component>
<js-component src="ecommerce/nav-cart" class="w-full flex"></js-component>
<js-component src="nav/menu-dropdown" class="w-full flex"></js-component>
</div>
<div class=" mx-auto container max-w-screen-xl ">
<div class="w-full flex ">
<div class="w-3/12">
<div class="w-full md:w-10/12 ">
<js-component src="nav/sidebar"></js-component>
<js-component src="general/advert-dark"></js-component>
<js-component src="general/advert-newsletter"></js-component>
</div>
</div>
<div class="w-9/12 min-h-screen">
<div class="flex mb-8 ">
<div class="w-full mx-auto">
<js-component src="nav/breadcrumb"></js-component>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
<js-component src="ecommerce/category-card" data-name="Camera & Photo" data-image="camera.jpg"></js-component>
<js-component src="ecommerce/category-card" data-name="TV & Home Cinema" data-image="tv.jpg"></js-component>
<js-component src="ecommerce/category-card" data-name="Audio & HiFi" data-image="audio.jpg"></js-component>
<js-component src="ecommerce/category-card" data-name="Headphones" data-image="headphones.jpg"></js-component>
<js-component src="ecommerce/category-card" data-name="Sat Nav & Car Electronics" data-image="sat-nav.jpg"></js-component>
<js-component src="ecommerce/category-card" data-name="Electronics Accessories" data-image="electronic-accessories.jpg"></js-component>
<js-component src="ecommerce/category-card" data-name="Phones & Accessories" data-image="phones.jpg"></js-component>
<js-component src="ecommerce/category-card" data-name="All Computers & Accessories" data-image="all-computers.jpg"></js-component>
<js-component src="ecommerce/category-card" data-name="Stationery & Office Supplies" data-image="stationery.jpg"></js-component>
</div>
</div>
</div>
</div>
</div>
</div>
<js-component src="footer/columns" class="w-full flex"></js-component>