From 74a98b03bf00c5689d975bb240c37b81488f3e76 Mon Sep 17 00:00:00 2001
From: samriddhitiwary <151003533+samriddhitiwary@users.noreply.github.com>
Date: Fri, 21 Nov 2025 09:19:20 +0530
Subject: [PATCH] UI Update for FAQ and Sessions Page

---
 content/faq/index.md       |  12 +-
 layouts/faq/single.html    | 516 +++++++++++++++++++++++++++++++++++++
 layouts/sessions/list.html | 189 +++++---------
 3 files changed, 591 insertions(+), 126 deletions(-)
 create mode 100644 layouts/faq/single.html

diff --git a/content/faq/index.md b/content/faq/index.md
index 8e21522..4ae6a01 100644
--- a/content/faq/index.md
+++ b/content/faq/index.md
@@ -37,16 +37,26 @@ This is an amazing opportunity to support the Community. To know more about how
 
 ## CFP: Call for Paper
 
+### How do I submit a talk proposal?
+
 The CFP is the official CFP of API Days Paris available <a href="https://forms.gle/zaVhgqdPvja38rVw6" target="_blank" rel="noopener noreferrer">here</a>. Please make sure you select The JSON Schema Conference in the event's list.
 
-Last but not least, selected speakers can opt-in for a 500$ travel stipend. This won't cover all the expenses but we hope to make everything much easier for them.
+### Is there a speaker stipend available?
+
+Yes! Selected speakers can opt-in for a 500$ travel stipend. This won't cover all the expenses but we hope to make everything much easier for them.
 
 ## Accessibility Accommodations
 
+### What accessibility accommodations are available?
+
 We are committed to making the conference inclusive and accessible to everyone—whether you're attending or speaking. If you are Deaf / Hard of Hearing, Blind / Visually Impaired, or have any other accessibility needs, we encourage you to reach out. To request accommodations or ask questions, please contact us at info@json-schema.org. The earlier we hear from you, the better we can ensure a supportive and accessible experience.
 
 ## Ticketing
 
+### How do I purchase tickets?
+
 The tickets should be acquired using the standard <a href="https://ticket.apidays.global/event/apidays-paris-2025/3cccd07f-acb2-466e-8d91-cb1f208ecf42?_gl=1*1i6mx1e*_gcl_au*MTY3OTY0ODcyNS4xNzUwMTA0MzA4" target="_blank" rel="noopener noreferrer">API Days ticketing system</a>.
 
+### Are there any discount codes available?
+
 In the upcoming weeks we'll share a special promo code for community members. More details to be published soon.
diff --git a/layouts/faq/single.html b/layouts/faq/single.html
new file mode 100644
index 0000000..2d2b08d
--- /dev/null
+++ b/layouts/faq/single.html
@@ -0,0 +1,516 @@
+{{ define "main" }}
+
+<style>
+/* FAQ Layout Styles */
+.faq-hero {
+	/* display: flex;
+	align-items: center;
+	justify-content: center; */
+	/* text-align: center; */
+	padding: 10px 20px;
+	/* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
+	/* color: white; */
+	color: black;
+	margin-bottom: 0;
+}
+
+.faq-hero h1 {
+	margin: 0;
+	font-size: 1.5rem;
+}
+
+.faq-container {
+	display: flex;
+	max-width: 1400px;
+	margin: 0 auto;
+	/* padding: 40px 20px; */
+	gap: 40px;
+	position: relative;
+}
+
+/* Fixed Sidebar */
+.faq-sidebar {
+	width: 280px;
+	flex-shrink: 0;
+	position: absolute;
+	top: 0;
+	left: 0;
+	max-height: calc(100vh - 140px);
+	overflow-y: auto;
+	background: #f8f9fa;
+	border-radius: 12px;
+	padding: 32px 24px 24px 24px;
+	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+	z-index: 1;
+	transition: position 0.1s ease;
+}
+
+.faq-sidebar.is-fixed {
+	position: fixed;
+	top: 100px;
+	/* left: max(20px, calc((100vw - 1400px) / 2 + 20px)); */
+	left: 20px;
+	z-index: 1;
+}
+.faq-nav h3 {
+	margin-top: 0;
+	margin-bottom: 8px;
+	font-size: 1.1rem;
+	color: #333;
+	border-bottom: 2px solid #667eea;
+	padding-top: 0;
+	padding-bottom: 8px;
+}
+
+.faq-nav h3::before,
+.faq-nav h3::after {
+	content: none !important;
+	display: none !important;
+}
+
+.faq-nav .faq-topics {
+	list-style: none;
+	padding-left: 0;
+	margin: 0;
+	margin-top: 0;
+}
+
+.faq-nav .faq-topics::before,
+.faq-nav .faq-topics::after {
+	content: none !important;
+	display: none !important;
+}
+
+.faq-nav .faq-topics li {
+	margin-bottom: 8px;
+}
+
+.faq-nav .faq-topics li::before,
+.faq-nav .faq-topics li::after {
+	content: none !important;
+	display: none !important;
+}
+
+.faq-nav .faq-topics a {
+	display: block;
+	padding: 8px 12px;
+	color: #555;
+	text-decoration: none;
+	border-radius: 6px;
+	transition: all 0.2s ease;
+	line-height: 1.4;
+}
+
+.faq-nav .faq-topics a:hover {
+	background: #e9ecef;
+	color: #667eea;
+	transform: translateX(4px);
+}
+
+.faq-nav .faq-topics a.active {
+	background: #667eea;
+	color: white;
+	font-weight: 600;
+}
+
+/* Custom scrollbar for sidebar */
+.faq-sidebar::-webkit-scrollbar {
+	width: 6px;
+}
+
+.faq-sidebar::-webkit-scrollbar-track {
+	background: #f1f1f1;
+	border-radius: 10px;
+}
+
+.faq-sidebar::-webkit-scrollbar-thumb {
+	background: #667eea;
+	border-radius: 10px;
+}
+
+.faq-sidebar::-webkit-scrollbar-thumb:hover {
+	background: #764ba2;
+}
+
+/* Main Content Area */
+.faq-content {
+	flex: 1;
+	min-width: 0;
+	margin-left: 320px;
+	background: white;
+	border-radius: 12px;
+	padding: 32px;
+	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
+}
+
+.faq-content h2 {
+	color: #667eea;
+	margin-top: 48px;
+	margin-bottom: 24px;
+	padding-bottom: 12px;
+	border-bottom: 2px solid #e9ecef;
+	font-size: 1.8rem;
+}
+
+.faq-content h2::before,
+.faq-content h2::after {
+	content: none !important;
+	display: none !important;
+}
+
+.faq-content h2:first-child {
+	margin-top: 0;
+}
+
+.faq-content h3 {
+	color: #333;
+	margin-top: 16px;
+	margin-bottom: 0;
+	font-size: 1.3rem;
+	cursor: pointer;
+	position: relative;
+	padding: 20px;
+	padding-right: 50px;
+	transition: all 0.2s ease;
+	user-select: none;
+	background: white;
+	border: 1px solid #e0e0e0;
+	border-radius: 8px;
+}
+
+.faq-content h3::before {
+	content: none !important;
+	display: none !important;
+}
+
+.faq-content h3:hover {
+	color: #667eea;
+	border-color: #667eea;
+	background: #f8f9ff;
+}
+
+.faq-content h3:hover + .faq-answer.open {
+	border-color: #667eea;
+}
+
+.faq-content h3::after {
+	content: '+' !important;
+	position: absolute;
+	right: 20px;
+	font-size: 1.5rem;
+	font-weight: bold;
+	color: #667eea;
+}
+
+.faq-content h3.expanded::after {
+	content: '−' !important;
+	transform: rotate(180deg);
+}
+
+.faq-content h3.expanded {
+	border-bottom-left-radius: 0;
+	border-bottom-right-radius: 0;
+	border-bottom: none;
+	border-color: #667eea;
+	color: #667eea;
+	background: #f8f9ff;
+}
+.faq-answer {
+	max-height: 0;
+	overflow: hidden;
+	margin-bottom: 0;
+	opacity: 0;
+	border: 1px solid #e0e0e0;
+	border-top: none;
+	border-bottom-left-radius: 8px;
+	border-bottom-right-radius: 8px;
+	background: white;
+	transition: border-color 0.2s ease;
+}
+
+.faq-answer.open {
+	max-height: 2000px;
+	margin-bottom: 16px;
+	opacity: 1;
+	padding: 20px;
+	padding-top: 0;
+	border-color: #667eea;
+}
+
+.faq-answer.open:hover {
+	border-color: #667eea;
+}
+
+.faq-content h3.expanded:has(+ .faq-answer.open:hover) {
+	border-color: #667eea;
+	color: #667eea;
+	background: #f8f9ff;
+}
+
+.faq-answer p:first-child {
+	margin-top: 16px;
+}
+
+.faq-answer p:last-child {
+	margin-bottom: 0;
+}
+
+.faq-content p {
+	line-height: 1.7;
+	color: #555;
+	margin-bottom: 8px;
+	margin-top: 8px;
+}
+
+.faq-content p::before,
+.faq-content p::after {
+	content: none !important;
+	display: none !important;
+}
+
+.faq-content a {
+	color: #667eea;
+	text-decoration: none;
+	border-bottom: 1px solid transparent;
+	transition: border-color 0.2s ease;
+}
+
+.faq-content a:hover {
+	border-bottom-color: #667eea;
+}
+
+/* Responsive Design */
+@media (max-width: 1024px) {
+	.faq-sidebar {
+		width: 240px;
+	}
+	
+	.faq-content {
+		margin-left: 0;
+	}
+	
+	.faq-container {
+		gap: 30px;
+		padding: 30px 15px;
+	}
+}
+
+@media (max-width: 768px) {
+	.faq-container {
+		flex-direction: column;
+		gap: 20px;
+	}
+	
+	.faq-sidebar {
+		position: sticky !important;
+		left: auto !important;
+		top: 100px !important;
+		width: 100%;
+		max-height: 50vh;
+		order: -1;
+		z-index: 10;
+	}
+	
+	.faq-sidebar.is-fixed {
+		position: sticky !important;
+		left: auto !important;
+		top: 100px !important;
+	}
+	
+	.faq-nav nav {
+		max-height: 300px;
+		overflow-y: auto;
+	}
+	
+	.faq-content {
+		margin-left: 0;
+		margin-top: 0;
+		padding: 24px 20px;
+	}
+	
+	.faq-hero h1 {
+		font-size: 2rem;
+	}
+}
+</style>
+
+<div class="hero faq-hero">
+	<h1>{{ .Title }}</h1>
+</div>
+
+<div class="faq-container">
+	<!-- Fixed Side Menu -->
+	<aside class="faq-sidebar">
+		<nav class="faq-nav">
+			<h3>Quick Navigation</h3>
+			<ul class="faq-topics" id="faq-nav-list">
+				<!-- Navigation will be populated by JavaScript -->
+			</ul>
+		</nav>
+	</aside>
+
+	<!-- Main FAQ Content -->
+	<section class="faq-content">
+		{{ .Content }}
+	</section>
+
+</div>
+
+<!-- Empty spacing section -->
+<div style="height: 300px;"></div>	
+
+<script>
+	// Build navigation from h2 headings only (main topics)
+	document.addEventListener('DOMContentLoaded', function() {
+		const navList = document.getElementById('faq-nav-list');
+		const faqContent = document.querySelector('.faq-content');
+		const sidebar = document.querySelector('.faq-sidebar');
+		const container = document.querySelector('.faq-container');
+		
+		// Calculate initial sidebar position
+		const sidebarInitialTop = sidebar.offsetTop;
+		const menuBarHeight = 100; // Distance from top where sidebar should become fixed
+		
+		// Handle scroll to make sidebar sticky
+		function handleSidebarScroll() {
+			const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+			const containerTop = container.offsetTop;
+			const sidebarShouldStick = scrollTop >= (containerTop - menuBarHeight);
+			
+			if (sidebarShouldStick) {
+				sidebar.classList.add('is-fixed');
+			} else {
+				sidebar.classList.remove('is-fixed');
+			}
+		}
+		
+		// Listen to scroll events
+		window.addEventListener('scroll', handleSidebarScroll);
+		handleSidebarScroll(); // Initial check
+		
+		// Get all headings
+		const allHeadings = faqContent.querySelectorAll('h2, h3');
+		
+		// Track which h2s are actually main sections (## in markdown)
+		// Main sections are h2s that are NOT preceded by another h2 without content between
+		const mainH2s = [];
+		let lastH2 = null;
+		
+		allHeadings.forEach((heading, index) => {
+			if (heading.tagName === 'H2') {
+				// Check if there's an h3 between this h2 and the next h2
+				let nextSibling = heading.nextElementSibling;
+				let hasH3OrContent = false;
+				
+				while (nextSibling && nextSibling.tagName !== 'H2') {
+					if (nextSibling.tagName === 'H3' || 
+					    (nextSibling.tagName === 'P' && nextSibling.textContent.trim().length > 0)) {
+						hasH3OrContent = true;
+						break;
+					}
+					nextSibling = nextSibling.nextElementSibling;
+				}
+				
+				// This is a main section if it has h3 children or paragraph content
+				if (hasH3OrContent) {
+					mainH2s.push(heading);
+				}
+			}
+		});
+		
+		// Create navigation items for main sections only
+		mainH2s.forEach(heading => {
+			const li = document.createElement('li');
+			const a = document.createElement('a');
+			a.href = '#' + heading.id;
+			a.textContent = heading.textContent;
+			li.appendChild(a);
+			navList.appendChild(li);
+		});
+		
+		// Make FAQ questions collapsible
+		const h3Questions = faqContent.querySelectorAll('h3');
+		h3Questions.forEach(h3 => {
+			// Wrap content after h3 until next heading
+			const answerContent = [];
+			let nextElement = h3.nextElementSibling;
+			
+			while (nextElement && nextElement.tagName !== 'H2' && nextElement.tagName !== 'H3') {
+				answerContent.push(nextElement);
+				nextElement = nextElement.nextElementSibling;
+			}
+			
+			// Create wrapper for answer content
+			if (answerContent.length > 0) {
+				const wrapper = document.createElement('div');
+				wrapper.className = 'faq-answer';
+				
+				answerContent.forEach(element => {
+					wrapper.appendChild(element.cloneNode(true));
+					element.remove();
+				});
+				
+				h3.parentNode.insertBefore(wrapper, h3.nextSibling);
+				
+				// Add click handler
+				h3.addEventListener('click', function() {
+					this.classList.toggle('expanded');
+					wrapper.classList.toggle('open');
+				});
+			}
+		});
+		
+		// Now set up smooth scrolling
+		const sidebarLinks = document.querySelectorAll('.faq-sidebar a[href^="#"]');
+		
+		sidebarLinks.forEach(link => {
+			link.addEventListener('click', function(e) {
+				e.preventDefault();
+				const targetId = this.getAttribute('href');
+				const targetElement = document.querySelector(targetId);
+				
+				if (targetElement) {
+					// Offset for fixed header
+					const headerOffset = 100;
+					const elementPosition = targetElement.getBoundingClientRect().top;
+					const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
+					
+					window.scrollTo({
+						top: offsetPosition,
+						behavior: 'smooth'
+					});
+					
+					// Update active link
+					sidebarLinks.forEach(l => l.classList.remove('active'));
+					this.classList.add('active');
+				}
+			});
+		});
+		
+		// Highlight active section on scroll (only observe main sections)
+		const observer = new IntersectionObserver((entries) => {
+			entries.forEach(entry => {
+				if (entry.isIntersecting) {
+					const id = entry.target.getAttribute('id');
+					if (id) {
+						sidebarLinks.forEach(link => {
+							link.classList.remove('active');
+							if (link.getAttribute('href') === `#${id}`) {
+								link.classList.add('active');
+							}
+						});
+					}
+				}
+			});
+		}, {
+			rootMargin: '-100px 0px -70% 0px'
+		});
+		
+		// Observe only the main section headings
+		mainH2s.forEach((heading) => {
+			observer.observe(heading);
+		});
+	});
+</script>
+
+{{ end }}
diff --git a/layouts/sessions/list.html b/layouts/sessions/list.html
index 54a9344..80a337d 100644
--- a/layouts/sessions/list.html
+++ b/layouts/sessions/list.html
@@ -23,32 +23,30 @@ <h1 class="heading">Sessions</h1>
 	{{ else }}
 		<div class="coming-soon">
 			<div class="coming-soon-box">
-				<h1> JSON Schema Conference <br>Sessions 2025</h1>
-				<span>Join the community that's shaping the future of the structure data.</span>
+				<h1>JSON Schema Conference <br>Sessions 2025</h1>
+				<span>Join the community that's shaping the future of structured data.</span>
 				<p>Our team is preparing an exciting lineup of talks for {{ .Params.year | default "this year" }}.<br/>
 				Stay tuned — big ideas are on the way!</p>
-				<div class="highlights-section">
-					<h2 class="highlights-title">2024 Highlights</h2>
-					
-					<div class="image-container">
-						<div class="moving-images" id="imageCarousel">
-							<img src="/images/conferences/2024/1000004657.jpg" alt="Conference 1">
-							<img src="/images/conferences/2024/1000004739.jpg" alt="Conference 2">
-							<img src="/images/conferences/2024/1000004747.jpg" alt="Conference 3">
-							<img src="/images/conferences/2024/1000004748.jpg" alt="Conference 4">
-							<img src="/images/conferences/2024/1000004751.jpg" alt="Conference 5">
-							<img src="/images/conferences/2024/1000004752.jpg" alt="Conference 6">
-							<img src="/images/conferences/2024/1000004765.jpg" alt="Conference 7">
-							<img src="/images/conferences/2024/1000004766.jpg" alt="Conference 8">
-							<img src="/images/conferences/2024/IMG_20241205_095631801_HDR.jpg" alt="Conference 9">
-							<img src="/images/conferences/2024/IMG_20241205_110532582_HDR.jpg" alt="Conference 10">
-						</div>
+
+				<!-- 3D Image Slider -->
+				<div class="slider-wrapper">
+					<div class="slider" style="--quantity: 10">
+						<div class="item" style="--position: 1"><img src="/images/conferences/2024/1000004657.jpg" alt="Conference 1"></div>
+						<div class="item" style="--position: 2"><img src="/images/conferences/2024/1000004739.jpg" alt="Conference 2"></div>
+						<div class="item" style="--position: 3"><img src="/images/conferences/2024/1000004747.jpg" alt="Conference 3"></div>
+						<div class="item" style="--position: 4"><img src="/images/conferences/2024/1000004748.jpg" alt="Conference 4"></div>
+						<div class="item" style="--position: 5"><img src="/images/conferences/2024/1000004751.jpg" alt="Conference 5"></div>
+						<div class="item" style="--position: 6"><img src="/images/conferences/2024/1000004752.jpg" alt="Conference 6"></div>
+						<div class="item" style="--position: 7"><img src="/images/conferences/2024/1000004765.jpg" alt="Conference 7"></div>
+						<div class="item" style="--position: 8"><img src="/images/conferences/2024/1000004766.jpg" alt="Conference 8"></div>
+						<div class="item" style="--position: 9"><img src="/images/conferences/2024/IMG_20241205_095631801_HDR.jpg" alt="Conference 9"></div>
+						<div class="item" style="--position: 10"><img src="/images/conferences/2024/IMG_20241205_110532582_HDR.jpg" alt="Conference 10"></div>
 					</div>
 				</div>
+
 				<a href="https://ticket.apidays.global/event/apidays-paris-2025/3cccd07f-acb2-466e-8d91-cb1f208ecf42?_gl=1*1i6mx1e*_gcl_au*MTY3OTY0ODcyNS4xNzUwMTA0MzA4"
-				 target="_blank"
-				 rel="noopener">
-                  	<button >Get Your Ticket!</button>
+				 target="_blank" rel="noopener">
+                  	<button>Get Your Ticket!</button>
 				</a>
 	        </div>
 		</div>
@@ -74,140 +72,81 @@ <h2 class="highlights-title">2024 Highlights</h2>
 		text-align: center;
 	}
 
-	.coming-soon h1{
+	.coming-soon h1 {
 		font-size: 3.5rem;
-        font-weight: 400;
-        margin-bottom: 1rem;
-        text-align: center;
+		font-weight: 400;
+		margin-bottom: 1rem;
 	}
 
-	.coming-soon span{
+	.coming-soon span {
 		font-size: 1.2rem;
 		font-weight: 500;
-		letter-spacing: 0.5px;
-        margin : 20px 0;
-		text-align: center;
 		color: #667eea;
 		display: block;
+		margin-bottom: 20px;
 	}
-    
+
 	.coming-soon p {
 		font-size: 1.1rem;
-		font-weight: 400;
 		opacity: 0.85;
-		margin: 20px 0;
-		text-align: center;
-		display: block;
-	}
-
-	.highlights-section {
-        margin: 50px 0;
-    }
-
-	.highlights-title {
-		font-size: 1em;
-		font-weight:  600;
-		color: #fff;
-		margin :  20px 0;
-		background: #0071BC;
-		padding: 0.5rem 1rem;
-		border-radius: 20px;
-		width: fit-content;
-	
+		margin: 20px 0 40px 0;
 	}
 
-	/* Image container styles */
-	.image-container {
-		width: 100%;
-		height: 300px; 
-		overflow: hidden;
-		position: relative;
-		margin: 20px 0;
-		border-radius: 10px;
-	}
-
-    /* Moving images wrapper */
-	.moving-images {
+	.slider-wrapper {
 		display: flex;
-		width: calc(300px * 10); /* Width based on number of images */
-		height: 100%;
-		animation: moveRightToLeft 20s linear infinite;
-		gap: 15px;
+		justify-content: center;
 		align-items: center;
-		
+		height: 100vh;
+		transform: translateY(-80px); /* Lifts the slider slightly upward */
+		overflow: hidden;
 	}
 
-	/* Individual image styles */
-	.moving-images img {
+	.slider {
+		position: relative;
 		width: 250px;
-		height: 300px;
-		object-fit: cover;
-		border-radius: 4px;
-		transition: transform 0.3s ease;
-		flex-shrink: 0;
-	}
-
-	.moving-images img:hover {
-		transform: scale(1.05);
+		height: 240px;
+		transform-style: preserve-3d;
+		transform: perspective(1500px);
+		animation: autoRotate 70s linear infinite; /* Slower rotation */
 	}
 
-	/* Animation for right to left movement */
-	@keyframes moveRightToLeft {
-		0% {
-			transform: translateX(10%);
+	@keyframes autoRotate {
+		from {
+			transform: perspective(1500px) rotateX(-10deg) rotateY(0deg);
 		}
-		100% {
-			transform: translateX(-70%);
+		to {
+			transform: perspective(1500px) rotateX(-10deg) rotateY(360deg);
 		}
 	}
 
-	/* Pause animation on hover */
-	.image-container:hover .moving-images {
+	.slider:hover {
 		animation-play-state: paused;
 	}
 
-	@media (max-width: 768px) {
-		.coming-soon-box h1{
-			font-size: 1.2rem;
-			font-weight: 500;
-	    }
-		
-		.image-container {
-			height: 200px;
-		}
-		
-		.moving-images img {
-			width: 180px;
-			height: 200px;
-		}
-		
-		.conference-title {
-			font-size: 2em;
-		}
+	.slider .item {
+		position: absolute;
+		inset: 0;
+		transform: rotateY(calc((var(--position) - 1) * (360 / var(--quantity)) * 1deg)) translateZ(450px);
 	}
-    
-	.coming-soon button {
-		border-radius: 50px;
-		border: none;
-		letter-spacing: 1px;
-		font-size: 1.2rem;
-		font-weight:  700;
-		background: #0071BC;
-		padding: 0.5rem 1rem;
-		color: #fff;
-		transition: all 0.3s ease;
-		
-    }
-
-	.coming-soon button:hover {
-		transform: scale(1.05);
-    }
-
-	@keyframes float {
-		0%, 100% { transform: translateY(0); }
-		50% { transform: translateY(-4px); }
+
+	.slider .item img {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		border-radius: 20px;
+		border: 4px solid #fff;
+		box-shadow: 0 10px 30px rgba(0,0,0,0.25);
 	}
 
+	@media (max-width: 568px) {
+		.slider {
+			width: 200px;
+			height: 260px;
+		}
+		.slider .item {
+			transform: rotateY(calc((var(--position) - 1) * (360 / var(--quantity)) * 1deg)) translateZ(400px);
+		}
+	}
 </style>
 
 {{ end }}