Feat/venue

package.json

@@ -28,5 +28,5 @@
 		"prettier-plugin-organize-imports": "^4.3.0",
 		"prettier-plugin-packagejson": "^2.5.20"
 	},
-	"packageManager": "pnpm@10.25.0+sha512.5e82639027af37cf832061bcc6d639c219634488e0f2baebe785028a793de7b525ffcd3f7ff574f5e9860654e098fe852ba8ac5dd5cefe1767d23a020a92f501"
+	"packageManager": "pnpm@10.26.2+sha512.0e308ff2005fc7410366f154f625f6631ab2b16b1d2e70238444dd6ae9d630a8482d92a451144debc492416896ed16f7b114a86ec68b8404b2443869e68ffda6"
 }

src/components/index/DemoShow.astro

@@ -0,0 +1,247 @@
+<section class="hero-section">
+	<div class="bg-gallery-custom">
+		<img src="/2026/img/DemoShow/a.jpg" class="clip-shape shape-a active" data-index="0" alt="" />
+		<img src="/2026/img/DemoShow/b.jpg" class="clip-shape shape-b" data-index="1" alt="" />
+		<img src="/2026/img/DemoShow/c.jpg" class="clip-shape shape-c" data-index="2" alt="" />
+		<img src="/2026/img/DemoShow/d.jpg" class="clip-shape shape-d" data-index="3" alt="" />
+	</div>
+
+	<div class="overlay"></div>
+
+	<div class="title-group">
+		<h3>2026 全新</h3>
+		<h1>Demo 展</h1>
+		<div class="cta-btn">
+			<a href="#" class="btn">查看議程表</a>
+		</div>
+	</div>
+
+	<div class="desc-group">
+		<p>
+			Demo 展投稿以現場專案展示為核心，<br />
+			輔以靜態海報與短影音呈現學生個人或團隊的專案。
+		</p>
+	</div>
+</section>
+
+<style>
+	.hero-section {
+		position: relative;
+		width: 100%;
+		min-height: 55rem;
+		overflow: hidden;
+		display: flex;
+		align-items: center;
+		isolation: isolate;
+	}
+
+	.bg-gallery-custom {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		z-index: 1;
+	}
+
+	.clip-shape {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		filter: brightness(0.4);
+		transition: all 0.6s ease-in-out;
+		cursor: pointer;
+		pointer-events: auto;
+	}
+
+	.clip-shape.active {
+		filter: brightness(1.1);
+		z-index: 10;
+		transform: scale(1.05);
+	}
+
+	.shape-a {
+		clip-path: polygon(0 0, 25% 0, 20% 100%, 0% 100%);
+		object-position: -60rem 0;
+	}
+	.shape-b {
+		clip-path: polygon(25% 0, 45% 0, 45% 100%, 20% 100%);
+		object-position: -25rem 0;
+	}
+	.shape-c {
+		clip-path: polygon(45% 0, 70% 0, 75% 100%, 45% 100%);
+		object-position: 10rem 0;
+	}
+	.shape-d {
+		clip-path: polygon(70% 0, 100% 0, 100% 100%, 75% 100%);
+		object-position: 25rem 0;
+	}
+
+	.overlay {
+		position: absolute;
+		inset: 0;
+		background: linear-gradient(to right, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.6) 100%);
+		z-index: 2;
+		pointer-events: none;
+	}
+
+	.title-group {
+		position: absolute;
+		z-index: 3;
+		top: 20%;
+		right: 10%;
+		text-align: right;
+		color: white;
+		pointer-events: auto;
+	}
+
+	.title-group h3 {
+		font-size: 3rem;
+		margin-bottom: 0.5rem;
+		font-weight: 500;
+	}
+
+	.title-group h1 {
+		font-size: 6rem;
+		margin: 0;
+		font-weight: bold;
+		line-height: 1.1;
+		margin-bottom: 2rem;
+	}
+
+	.desc-group {
+		position: absolute;
+		z-index: 3;
+		bottom: 10%;
+		right: 3%;
+		text-align: right;
+		color: white;
+		pointer-events: auto;
+		font-weight: bold;
+	}
+
+	.desc-group p {
+		font-size: 1rem;
+		line-height: 1.6;
+		opacity: 0.9;
+		margin: 0;
+	}
+
+	.btn {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		background-color: #ffd172;
+		color: #634a15;
+		text-decoration: none;
+		font-weight: bold;
+		width: 11rem;
+		height: 3rem;
+		border-radius: 50px;
+		font-size: 1.1rem;
+		transition: transform 0.2s;
+		margin-top: 1rem;
+		cursor: pointer;
+	}
+
+	.btn:hover {
+		transform: scale(1.05);
+	}
+
+	@media screen and (max-width: 768px) {
+		.shape-c,
+		.shape-d {
+			display: none;
+		}
+
+		.shape-a {
+			clip-path: polygon(0 0, 60% 0, 40% 100%, 0% 100%);
+			object-position: 75% center;
+		}
+
+		.shape-b {
+			clip-path: polygon(60% 0, 100% 0, 100% 100%, 40% 100%);
+			object-position: 40% center;
+		}
+
+		.title-group h1 {
+			font-size: 3.5rem;
+		}
+
+		.title-group h3 {
+			font-size: 1.5rem;
+		}
+
+		.title-group {
+			top: 15%;
+			right: 5%;
+		}
+
+		.desc-group {
+			width: 90%;
+			right: 5%;
+			bottom: 5%;
+		}
+	}
+</style>
+
+<script is:inline>
+	document.addEventListener("DOMContentLoaded", () => {
+		const allImages = document.querySelectorAll(".clip-shape");
+		if (allImages.length === 0) return;
+
+		let intervalId = null;
+
+		function getVisibleImages() {
+			return Array.from(allImages).filter(img => {
+				return getComputedStyle(img).display !== "none";
+			});
+		}
+
+		function activateImage(targetImg) {
+			allImages.forEach(img => img.classList.remove("active"));
+			if (targetImg) {
+				targetImg.classList.add("active");
+			}
+		}
+
+		function startAutoPlay() {
+			if (intervalId) clearInterval(intervalId);
+			intervalId = setInterval(() => {
+				const visibleImages = getVisibleImages();
+				const activeNow = document.querySelector(".clip-shape.active");
+				let listIndex = visibleImages.indexOf(activeNow);
+
+				if (listIndex === -1) listIndex = -1;
+
+				let nextListIndex = (listIndex + 1) % visibleImages.length;
+				activateImage(visibleImages[nextListIndex]);
+			}, 3000);
+		}
+
+		function stopAutoPlay() {
+			if (intervalId) {
+				clearInterval(intervalId);
+				intervalId = null;
+			}
+		}
+
+		allImages.forEach(img => {
+			img.addEventListener("mouseenter", () => {
+				stopAutoPlay();
+				activateImage(img);
+			});
+			img.addEventListener("mouseleave", () => {
+				startAutoPlay();
+			});
+		});
+
+		window.addEventListener("resize", () => {
+			startAutoPlay();
+		});
+
+		startAutoPlay();
+	});
+</script>