updated the listing page layout

assets/js/script.js

+(function ($) {
+	$(function () {
+		const observer = new IntersectionObserver(
+			function (entries) {
+				entries.forEach((entry) => {
+					if (entry.isIntersecting) {
+						$(entry.target).addClass("animate");
+						observer.unobserve(entry.target);
+					}
+				});
+			},
+			{
+				threshold: 0.1,
+				root: null,
+				rootMargin: "150px",
+			},
+		);
+		$(".slide-up").each(function (e) {
+			observer.observe(this);
+		});
+	});
+
+	$(function () {
+		const resourceListObserver = new IntersectionObserver(function () {}, {});
+	});
+})(jQuery);

dev/sass/base/_makura-new.scss

+.makura-new {
+	h6 {
+		font-size: 18px !important;
+		line-height: 24px;
+		letter-spacing: -0.294px;
+	}
+	ul,
+	ol {
+		margin: 0;
+		li {
+			list-style-type: none;
+		}
+	}
+
+	p {
+		margin: 0;
+	}
+
+	a {
+		&:has(img) {
+			height: 100%;
+		}
+	}
+
+	.mc-btn-underlined {
+		font-weight: 600;
+		text-decoration: underline;
+		text-underline-offset: 2px;
+	}
+
+	.sm-text {
+		font-size: 1.125rem !important;
+		line-height: 22px;
+	}
+
+	.section-title {
+		h2 {
+			+ p {
+				margin-top: 1rem;
+			}
+		}
+	}
+
+	.slide-up {
+		transform: translateY(150px);
+		transition: all 0.5s ease-in-out;
+
+		&.animate {
+			transform: translateY(0);
+		}
+	}
+}
+
+@media (min-width: 768px) {
+	.makura-new {
+		.section-title {
+			margin-bottom: 40px;
+		}
+	}
+}
+
+@media (max-width: 991px) {
+	.makura-new {
+	}
+}

dev/sass/pages/resources/_resource-listing.scss

+.resource-listing {
+	.section-title {
+		max-width: 864px;
+	}
+	.resource-wrapper {
+		.resource-block {
+			.resource-item {
+				border: 1px solid rgba(0, 0, 0, 0.1);
+				.resource-image {
+					height: 220px;
+					overflow: hidden;
+
+					img {
+						width: 100%;
+						height: 100%;
+						object-fit: cover;
+					}
+				}
+
+				.resource-content {
+					padding: 16px;
+
+					h4,
+					h5,
+					h6 {
+						margin-bottom: 0.5rem;
+						a {
+							color: $background-dark;
+						}
+					}
+
+					> p {
+						margin-bottom: 1.25rem;
+					}
+					h4,
+					h5,
+					h6,
+					p {
+						display: -webkit-box;
+						overflow: hidden;
+						-webkit-line-clamp: 2;
+						-webkit-box-orient: vertical;
+					}
+
+					.format-and-btn-wrapper {
+						p {
+							color: $background-dark;
+						}
+					}
+				}
+
+				&:hover {
+					.resource-content {
+						h3,
+						h4,
+						h5,
+						h6 {
+							a {
+								color: $primary;
+							}
+						}
+					}
+				}
+			}
+			.row {
+				> div {
+					&:not(:last-child) {
+						.resource-item {
+							margin-bottom: 1.25rem;
+						}
+					}
+				}
+			}
+
+			&:not(:last-child) {
+				margin-bottom: 40px;
+			}
+		}
+	}
+	.toc {
+		ul {
+			li {
+				a {
+					font-size: 14px !important;
+				}
+				&.active {
+					a {
+						color: $primary !important;
+					}
+				}
+			}
+		}
+	}
+}
+
+@media (min-width: 576px) {
+	.resource-listing {
+		.resource-wrapper {
+			.resource-block {
+				.row {
+					--bs-gutter-y: 20px;
+					> div {
+						&:not(:last-child) {
+							.resource-item {
+								margin-bottom: 0;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
+
+@media (min-width: 992px) {
+	.resource-listing {
+		.resource-wrapper {
+			position: relative;
+			&::before {
+				content: "";
+				position: absolute;
+				top: 0;
+				left: -24px;
+				bottom: 0;
+				width: 1px;
+				background-color: rgba(0, 0, 0, 0.1);
+			}
+
+			.resource-block {
+				&:not(:last-child) {
+					margin-bottom: 60px;
+				}
+			}
+		}
+
+		.toc {
+			position: sticky;
+			top: 80px;
+		}
+	}
+}
+
+@media (min-width: 1200px) {
+	.resource-listing {
+		.toc {
+			max-width: 78.5%;
+		}
+
+		.resource-wrapper {
+			&::before {
+				left: -32px;
+			}
+			.resource-block {
+				.row {
+					--bs-gutter-y: 16px;
+				}
+				.resource-item {
+					.resource-image {
+						height: unset;
+						max-width: 30%;
+					}
+					.resource-content {
+						padding: 16px 12px 16px 20px;
+						a.mc-btn-underlined {
+							opacity: 0;
+							visibility: hidden;
+							transform: translateY(20px);
+							transition: all 0.3s ease-in-out;
+						}
+					}
+					&:hover {
+						.resource-content {
+							a.mc-btn-underlined {
+								opacity: 1;
+								visibility: visible;
+								transform: translateY(0);
+							}
+						}
+					}
+				}
+
+				&:not(:last-child) {
+					margin-bottom: 104px;
+				}
+			}
+		}
+	}
+}
+
+@media (min-width: 1440px) {
+	.resource-listing {
+		.resource-wrapper {
+			.resource-block {
+				.resource-item {
+					.resource-content {
+						display: flex;
+						flex-direction: column;
+						justify-content: center;
+					}
+				}
+			}
+		}
+	}
+}

dev/sass/style.scss

@@ -37,6 +37,7 @@ $body-font: "Sora", sans-serif;
 @import "pages/course-detail";
 @import "pages/responsive";
 @import "base/global";
+@import "base/makura-new";
 @import "pages/service-detail/service-lisiting";
 @import "pages/service-detail/service-plans";
 @import "pages/service-detail/service-detail-form";
@@ -55,3 +56,4 @@ $body-font: "Sora", sans-serif;
 @import "pages/seo-audit/audit-quote";
 @import "pages/site-comparision/inner-banner";
 @import "pages/site-comparision/comparison-form";
+@import "pages/resources/resource-listing";

includes/enqueuer.php

@@ -12,7 +12,7 @@ function conserve_register_styles()
     wp_enqueue_style('magnific-popup', 'https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css', null, $theme_version);
     wp_enqueue_style('slick', 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css', null, $theme_version);
     wp_enqueue_style('flatpicker', 'https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.css', null, $theme_version);
-    wp_enqueue_style('custom-css', get_template_directory_uri() . '/assets/css/style.css', null, '6.4.4');
+    wp_enqueue_style('custom-css', get_template_directory_uri() . '/assets/css/style.css', null, '6.4.5');
 
     
 
@@ -42,5 +42,8 @@ function conserve_register_styles()
             'ajaxurl' => admin_url('admin-ajax.php'),
         )
     );
+
+    /** CUSTOM JS */
+     wp_enqueue_script('custom-JS', get_template_directory_uri() . '/assets/js/script.js', array('jquery'), null, true);
 }
 add_action('wp_enqueue_scripts', 'conserve_register_styles');
\ No newline at end of file

page-templates/resource-listing.php

+<?php
+
+/**
+ * Template Name: Resource Listing
+ */
+
+get_header();
+
+the_content();
+
+get_template_part("/template-parts/resource-page/resource-list",null);
+
+get_footer();
+?>
\ No newline at end of file