diff --git a/package-lock.json b/package-lock.json
index 646ae0f..ea04592 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
 				"pinia": "^2.0.32",
 				"pinia-persistedstate-plugin": "^0.1.0",
 				"pinia-plugin-persistedstate": "^3.1.0",
+				"swiper": "^12.1.3",
 				"vue": "^3.2.47",
 				"vue-i18n": "^11.2.8",
 				"vue-router": "^4.1.6"
@@ -7611,6 +7612,25 @@
 				"node": ">= 10"
 			}
 		},
+		"node_modules/swiper": {
+			"version": "12.1.3",
+			"resolved": "https://registry.npmmirror.com/swiper/-/swiper-12.1.3.tgz",
+			"integrity": "sha512-XcWlVmkHFICI4fuoJKgbp8PscDcS4i7pBH8nwJRBi3dpQvhCySwsWRYm4bOf/BzKVWkHOYaFw7qz9uBSrY3oug==",
+			"funding": [
+				{
+					"type": "patreon",
+					"url": "https://www.patreon.com/swiperjs"
+				},
+				{
+					"type": "open_collective",
+					"url": "http://opencollective.com/swiper"
+				}
+			],
+			"license": "MIT",
+			"engines": {
+				"node": ">= 4.7.0"
+			}
+		},
 		"node_modules/text-table": {
 			"version": "0.2.0",
 			"resolved": "https://registry.npmmirror.com/text-table/-/text-table-0.2.0.tgz",
@@ -14245,6 +14265,11 @@
 				}
 			}
 		},
+		"swiper": {
+			"version": "12.1.3",
+			"resolved": "https://registry.npmmirror.com/swiper/-/swiper-12.1.3.tgz",
+			"integrity": "sha512-XcWlVmkHFICI4fuoJKgbp8PscDcS4i7pBH8nwJRBi3dpQvhCySwsWRYm4bOf/BzKVWkHOYaFw7qz9uBSrY3oug=="
+		},
 		"text-table": {
 			"version": "0.2.0",
 			"resolved": "https://registry.npmmirror.com/text-table/-/text-table-0.2.0.tgz",
diff --git a/package.json b/package.json
index 7af1ef2..67c6294 100644
--- a/package.json
+++ b/package.json
@@ -17,14 +17,15 @@
 		"crypto-js": "^4.2.0",
 		"element-plus": "^2.13.2",
 		"gsap": "^3.13.0",
-		"vue-i18n": "^11.2.8",
 		"markdown-it": "^14.1.0",
 		"md5": "^2.3.0",
 		"normalize.css": "^8.0.1",
 		"pinia": "^2.0.32",
 		"pinia-persistedstate-plugin": "^0.1.0",
 		"pinia-plugin-persistedstate": "^3.1.0",
+		"swiper": "^12.1.3",
 		"vue": "^3.2.47",
+		"vue-i18n": "^11.2.8",
 		"vue-router": "^4.1.6"
 	},
 	"devDependencies": {
@@ -57,4 +58,4 @@
 			"npm run lint"
 		]
 	}
-}
\ No newline at end of file
+}
diff --git a/src/App.vue b/src/App.vue
index ffa4d86..0fa7a1e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -35,6 +35,10 @@
 	}
 </style>
 <style lang="less" scoped>
+	* {
+		--header-height: 8rem;
+		--footer-height: 7rem;
+	}
 	.view {
 		flex: 1;
 		overflow: hidden;
diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index 93fc772..59eb23e 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -19,6 +19,7 @@ body,
   width: 100%;
   height: 100%;
   overflow: hidden;
+  font-family: 'KaiseiOpti-Medium';
 }
 @keyframes loading {
   0% {
diff --git a/src/assets/css/style.less b/src/assets/css/style.less
index 7aeebd6..9aad643 100644
--- a/src/assets/css/style.less
+++ b/src/assets/css/style.less
@@ -21,7 +21,7 @@ body,
 	width: 100%;
 	height: 100%;
 	overflow: hidden;
-	// font-family: 'Medium';
+	font-family: 'KaiseiOpti-Medium';
 }
 
 @keyframes loading {
diff --git a/src/assets/icons/add.svg b/src/assets/icons/add.svg
new file mode 100644
index 0000000..ab52ba6
--- /dev/null
+++ b/src/assets/icons/add.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.5433 11.5224H3.45666C3.20445 11.5224 3 11.7269 3 11.9791C3 12.2313 3.20445 12.4357 3.45666 12.4357H20.5433C20.7955 12.4357 21 12.2313 21 11.9791C21 11.7269 20.7955 11.5224 20.5433 11.5224Z" fill="black"/>
+<path d="M12.4688 20.5433V3.45666C12.4688 3.20445 12.2643 3 12.0121 3C11.7599 3 11.5554 3.20445 11.5554 3.45666V20.5433C11.5554 20.7955 11.7599 21 12.0121 21C12.2643 21 12.4688 20.7955 12.4688 20.5433Z" fill="black"/>
+</svg>
diff --git a/src/assets/icons/brand/call.svg b/src/assets/icons/brand/call.svg
new file mode 100644
index 0000000..1ed9370
--- /dev/null
+++ b/src/assets/icons/brand/call.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.29289 7.20711L8.09256 8.40744C7.74975 8.75025 7.7025 9.29107 7.98245 9.68688C10.3435 13.025 11.3355 14.027 14.32 16.045C14.7142 16.3115 15.2419 16.2581 15.5783 15.9217L17.2929 14.2071C17.6834 13.8166 18.3166 13.8166 18.7071 14.2071L20.5144 16.0144C20.8069 16.3069 20.8892 16.7492 20.686 17.1096C20.2788 17.8317 19.5007 18.9997 18.5 19.5C17.2062 20.1469 15.9123 20.0498 15.5811 20.0109C15.5264 20.0045 15.4735 20.0001 15.4185 19.9972C14.8712 19.9681 11.6429 19.643 8 16C4 12 4 8.5 4 8.5C4 8.5 4 7.5 4.5 6C4.81932 5.04205 5.75042 4.28802 6.38166 3.86816C6.74005 3.62978 7.20529 3.70529 7.50965 4.00965L9.29289 5.79289C9.68342 6.18342 9.68342 6.81658 9.29289 7.20711Z" stroke="#232323" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/icons/brand/email.svg b/src/assets/icons/brand/email.svg
new file mode 100644
index 0000000..abeead9
--- /dev/null
+++ b/src/assets/icons/brand/email.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.1571 5H4.84294C3.82753 5 3 5.82753 3 6.84294V17.5785C3 18.5939 3.82753 19.4215 4.84294 19.4215H19.1571C20.1725 19.4215 21 18.5939 21 17.5785V6.84742C21 5.83201 20.1725 5.00447 19.1571 5.00447V5ZM4.00199 7.6168L11.6421 15.257C11.83 15.4493 12.1655 15.4448 12.3534 15.257L19.9935 7.6168V17.583C19.9935 18.0437 19.6178 18.424 19.1526 18.424H4.84294C4.38221 18.424 4.00199 18.0482 4.00199 17.583V7.6168ZM19.5507 6.63718L12.2773 13.9105C12.1297 14.0582 11.8703 14.0582 11.7227 13.9105L4.4493 6.63718C4.36431 6.55219 4.32406 6.41799 4.35089 6.29722C4.37326 6.18539 4.4493 6.1004 4.54771 6.06014C4.64165 6.02435 4.74006 6.00646 4.83847 6.00646H19.1526C19.251 6.00646 19.3494 6.02435 19.4433 6.06014C19.5462 6.1004 19.6178 6.18539 19.6446 6.29722C19.6715 6.41799 19.6312 6.54771 19.5462 6.63718H19.5507Z" fill="#232323"/>
+</svg>
diff --git a/src/assets/icons/brand/link.svg b/src/assets/icons/brand/link.svg
new file mode 100644
index 0000000..5da7743
--- /dev/null
+++ b/src/assets/icons/brand/link.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.93 17.1099L10.07 18.9699C9.4 19.6399 8.5 20.0199 7.55 20.0199C6.6 20.0199 5.7 19.6499 5.03 18.9699C4.36 18.2999 3.98 17.3999 3.98 16.4499C3.98 15.4999 4.35 14.5999 5.03 13.9299L8.74 10.2199C9.41 9.54994 10.31 9.16994 11.26 9.16994C12.21 9.16994 13.11 9.53994 13.78 10.2199C14.21 10.6499 14.53 11.1899 14.69 11.7699C14.73 11.8999 14.81 11.9999 14.92 12.0699C15.03 12.1399 15.17 12.1499 15.29 12.1099C15.55 12.0399 15.71 11.7599 15.63 11.4999C15.42 10.7499 15.02 10.0699 14.47 9.51994C13.61 8.65994 12.47 8.18994 11.25 8.18994C10.03 8.18994 8.89 8.65994 8.03 9.51994L4.32 13.2299C3.47 14.0799 3 15.2299 3 16.4499C3 17.6699 3.47 18.8099 4.33 19.6699C5.19 20.5299 6.33 20.9999 7.55 20.9999C8.77 20.9999 9.91 20.5299 10.77 19.6699L12.63 17.8099C12.72 17.7199 12.77 17.5899 12.77 17.4599C12.77 17.3299 12.72 17.1999 12.63 17.1099C12.44 16.9199 12.12 16.9199 11.93 17.1099Z" fill="#232323"/>
+<path d="M19.6687 4.33C18.7987 3.47 17.6587 3 16.4487 3C15.2387 3 14.0887 3.47 13.2287 4.33L11.3787 6.18C11.2887 6.27 11.2387 6.4 11.2387 6.53C11.2387 6.66 11.2887 6.79 11.3787 6.88C11.5687 7.07 11.8787 7.07 12.0787 6.88L13.9387 5.03C14.6087 4.36 15.5087 3.98 16.4587 3.98C17.4087 3.98 18.3087 4.35 18.9787 5.03C19.6487 5.7 20.0287 6.6 20.0287 7.55C20.0287 8.5 19.6587 9.4 18.9787 10.07L15.2687 13.78C14.5987 14.45 13.6987 14.83 12.7487 14.83C11.7987 14.83 10.8987 14.46 10.2287 13.78C9.79874 13.35 9.47874 12.81 9.31874 12.23C9.27874 12.1 9.19874 12 9.07874 11.93C8.96874 11.87 8.82874 11.85 8.70874 11.89C8.44874 11.96 8.29874 12.24 8.36874 12.5C8.57874 13.25 8.97874 13.93 9.52874 14.48C10.3887 15.34 11.5287 15.81 12.7487 15.81C13.9687 15.81 15.1087 15.34 15.9687 14.48L19.6787 10.77C20.5387 9.91 21.0087 8.77 21.0087 7.55C21.0087 6.33 20.5387 5.19 19.6787 4.33H19.6687Z" fill="#232323"/>
+</svg>
diff --git a/src/assets/icons/collectionStory/back.svg b/src/assets/icons/collectionStory/back.svg
new file mode 100644
index 0000000..f8c01bc
--- /dev/null
+++ b/src/assets/icons/collectionStory/back.svg
@@ -0,0 +1,3 @@
+<svg width="13" height="22" viewBox="0 0 13 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.6387 20.0371C11.9849 20.3836 11.985 20.9436 11.6387 21.29C11.2922 21.6365 10.7313 21.6365 10.3848 21.29L0.430664 11.335L0.426758 11.3311C0.196025 11.0898 0.19053 10.705 0.430664 10.4648L10.3848 0.509766C10.7313 0.163262 11.2922 0.163262 11.6387 0.509766C11.9852 0.856269 11.9852 1.41717 11.6387 1.76367L2.66309 10.7383V10.748L2.59375 10.8203C2.5437 10.8726 2.5492 10.9476 2.58984 10.9883L11.6387 20.0371Z" fill="white" stroke="white" stroke-width="0.5"/>
+</svg>
diff --git a/src/assets/icons/collectionStory/scrollingLearnMore.svg b/src/assets/icons/collectionStory/scrollingLearnMore.svg
new file mode 100644
index 0000000..ec490ba
--- /dev/null
+++ b/src/assets/icons/collectionStory/scrollingLearnMore.svg
@@ -0,0 +1,3 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.5416 31.9844L7.88035 16.3231C7.44961 15.8923 6.7538 15.8923 6.32306 16.3231C5.89231 16.7538 5.89231 17.4496 6.32306 17.8803L23.5527 35.11C23.7957 35.353 24.1933 35.353 24.4473 35.11L41.6769 17.8803C42.1077 17.4496 42.1077 16.7538 41.6769 16.3231C41.2462 15.8923 40.5504 15.8923 40.1196 16.3231L24.4584 31.9844C24.2154 32.2273 23.8178 32.2273 23.5637 31.9844H23.5416Z" fill="white"/>
+</svg>
diff --git a/src/assets/icons/collectionStory/swiperRight.svg b/src/assets/icons/collectionStory/swiperRight.svg
new file mode 100644
index 0000000..5aac38f
--- /dev/null
+++ b/src/assets/icons/collectionStory/swiperRight.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" id="Bold" viewBox="0 0 24 24" width="512" height="512"><path d="M6.079,22.5a1.5,1.5,0,0,1,.44-1.06l7.672-7.672a2.5,2.5,0,0,0,0-3.536L6.529,2.565A1.5,1.5,0,0,1,8.65.444l7.662,7.661a5.506,5.506,0,0,1,0,7.779L8.64,23.556A1.5,1.5,0,0,1,6.079,22.5Z"/></svg>
diff --git a/src/assets/icons/share.svg b/src/assets/icons/share.svg
new file mode 100644
index 0000000..9f4fb4b
--- /dev/null
+++ b/src/assets/icons/share.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 16.1998L15.85 8.34981" stroke="#585858" stroke-width="1.375" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.70312 7.99995H16.3031L16.2031 15.55" stroke="#585858" stroke-width="1.375" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/images/brand/brandBg.png b/src/assets/images/brand/brandBg.png
new file mode 100644
index 0000000..d5b004b
Binary files /dev/null and b/src/assets/images/brand/brandBg.png differ
diff --git a/src/assets/images/collectionStory/Rectangle.png b/src/assets/images/collectionStory/Rectangle.png
new file mode 100644
index 0000000..0085be0
Binary files /dev/null and b/src/assets/images/collectionStory/Rectangle.png differ
diff --git a/src/assets/images/collectionStory/collection_story_banner.png b/src/assets/images/collectionStory/collection_story_banner.png
new file mode 100644
index 0000000..5dee32c
Binary files /dev/null and b/src/assets/images/collectionStory/collection_story_banner.png differ
diff --git a/src/assets/images/collectionStory/coreconcept_1.png b/src/assets/images/collectionStory/coreconcept_1.png
new file mode 100644
index 0000000..311cffc
Binary files /dev/null and b/src/assets/images/collectionStory/coreconcept_1.png differ
diff --git a/src/assets/images/collectionStory/coreconcept_2.png b/src/assets/images/collectionStory/coreconcept_2.png
new file mode 100644
index 0000000..387674a
Binary files /dev/null and b/src/assets/images/collectionStory/coreconcept_2.png differ
diff --git a/src/assets/images/collectionStory/coreconcept_3.png b/src/assets/images/collectionStory/coreconcept_3.png
new file mode 100644
index 0000000..c1f576b
Binary files /dev/null and b/src/assets/images/collectionStory/coreconcept_3.png differ
diff --git a/src/assets/images/collectionStory/coreconcept_4.png b/src/assets/images/collectionStory/coreconcept_4.png
new file mode 100644
index 0000000..66b4ff5
Binary files /dev/null and b/src/assets/images/collectionStory/coreconcept_4.png differ
diff --git a/src/assets/images/collectionStory/coreconcept_5.png b/src/assets/images/collectionStory/coreconcept_5.png
new file mode 100644
index 0000000..214084c
Binary files /dev/null and b/src/assets/images/collectionStory/coreconcept_5.png differ
diff --git a/src/assets/images/collectionStory/feeling_1.png b/src/assets/images/collectionStory/feeling_1.png
new file mode 100644
index 0000000..2546586
Binary files /dev/null and b/src/assets/images/collectionStory/feeling_1.png differ
diff --git a/src/assets/images/collectionStory/feeling_2.png b/src/assets/images/collectionStory/feeling_2.png
new file mode 100644
index 0000000..321a1ff
Binary files /dev/null and b/src/assets/images/collectionStory/feeling_2.png differ
diff --git a/src/assets/images/collectionStory/inspiration_1.png b/src/assets/images/collectionStory/inspiration_1.png
new file mode 100644
index 0000000..62bb861
Binary files /dev/null and b/src/assets/images/collectionStory/inspiration_1.png differ
diff --git a/src/assets/images/collectionStory/inspiration_2.png b/src/assets/images/collectionStory/inspiration_2.png
new file mode 100644
index 0000000..6f780ed
Binary files /dev/null and b/src/assets/images/collectionStory/inspiration_2.png differ
diff --git a/src/components/CommodityItem.vue b/src/components/CommodityItem.vue
new file mode 100644
index 0000000..55eb813
--- /dev/null
+++ b/src/components/CommodityItem.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
+const props = defineProps({
+	url: {
+		type: String,
+		default: ''
+	},
+	name: {
+		type: String,
+		default: 'aaa'
+	},
+	price: {
+		type: String,
+		default: '111'
+	}
+})
+const emit = defineEmits([
+	'addShopping'
+])
+let data = reactive({
+})
+const addShopping = () => {
+	emit('addShopping')
+}
+ 
+onMounted(()=>{
+})
+onUnmounted(()=>{
+})
+defineExpose({})
+const {} = toRefs(data);
+</script>
+<template>
+	<div class="commodity-item">
+		<img :src="props.url" alt="">
+		<div class="detail">
+			<div calss="text">
+				<div class="name">
+					{{ props.name }}
+				</div>
+				<div class="price">
+					{{ props.price }}
+				</div>
+			</div>
+			<div class="btn" @click="addShopping">
+				<div class="text">
+					<SvgIcon name="add" size="24"></SvgIcon>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+<style lang="less" scoped>
+	.commodity-item{
+		width: var(--commodity-width,100%);
+		> img{
+			width: 100%;
+			height: var(--commodity-height,auto);
+			margin-bottom: var(--commodity-marginBottom,1rem);
+		}
+		> .detail{
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			.text{
+				color: #232323;
+				> .name{
+					font-family: "KaiseiOpti-Regular";
+					font-weight: 400;
+					font-size: var(--commodity-name-fontSize,1.6rem);
+					line-height: var(--commodity-name-lineHeight,2.3rem);
+				}
+				> .price{
+					font-family: "KaiseiOpti-Regular";
+					font-weight: 400;
+					font-size: var(--commodity-price-fontSize,1.4rem);
+					line-height: var(--commodity-price-lineHeight,2.3rem);
+				}
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
new file mode 100644
index 0000000..9f693f5
--- /dev/null
+++ b/src/components/Footer.vue
@@ -0,0 +1,62 @@
+<template>
+	<section class="section-footer">
+		<div class="footer">
+			<div class="left">
+				<div>About</div>
+				<div>Privacy Policy</div>
+				<div>Terms of Use</div>
+				<div>Disclaimer</div>
+				<div>Site Map</div>
+			</div>
+			<div class="right">
+				<img src="@/assets/images/icons/xiaohongshu.png" />
+				<img src="@/assets/images/icons/linkedin.png" />
+				<img src="@/assets/images/icons/instagram.png" />
+				<img src="@/assets/images/icons/facebook.png" />
+				<img src="@/assets/images/icons/douyin.png" />
+				<img src="@/assets/images/icons/wechat.png" />
+				<div class="text">© Code-Create 2026</div>
+			</div>
+		</div>
+	</section>
+</template>
+
+<script setup lang="ts">
+	import { computed, ref } from 'vue'
+</script>
+
+<style lang="less">
+	.section-footer {
+		background-color: #f6f6f6;
+		border-top: 0.1rem solid #232323;
+		> .footer {
+			padding: 0 9rem;
+			height: var(--footer-height);
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			> .left {
+				font-family: KaiseiOpti-Regular;
+				font-size: 1.4rem;
+				color: #585858;
+				display: flex;
+				gap: 4.5rem;
+			}
+			> .right {
+				display: flex;
+				align-items: center;
+				> img {
+					width: 2rem;
+					height: 2rem;
+					margin-left: 2rem;
+				}
+				.text{
+					margin-left: 4rem;
+					font-family: KaiseiOpti-Regular;
+					font-size: 1.2rem;
+					color: #585858;
+				}
+			}
+		}
+	}
+</style>
diff --git a/src/router/index.ts b/src/router/index.ts
index 126da21..7858deb 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -20,6 +20,11 @@ const router = createRouter({
 			name: 'collectionStory',
 			component: () => import('../views/collectionStory/index.vue'),
 		},
+		{
+			path: '/brand',
+			name: 'brand',
+			component: () => import('../views/brand/index.vue'),
+		},
 		{
 			path: '/:pathMatch(.*)',
 			name: '404',
diff --git a/src/views/brand/commodity-list.vue b/src/views/brand/commodity-list.vue
new file mode 100644
index 0000000..012e2da
--- /dev/null
+++ b/src/views/brand/commodity-list.vue
@@ -0,0 +1,169 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
+import img from "@/assets/images/collectionStory/Rectangle.png";
+//const props = defineProps({
+//})
+const emit = defineEmits([
+	'addShopping'
+])
+let data = reactive({
+})
+const list = ref([
+	{
+		url: img,
+		title: "Windswept Burden",
+		price: "$100.00",
+	},{
+		url: img,
+		title: "Windswept Burden",
+		price: "$100.00",
+	},{
+		url: img,
+		title: "Windswept Burden",
+		price: "$100.00",
+	},{
+		url: img,
+		title: "Windswept Burden",
+		price: "$100.00",
+	},{
+		url: img,
+		title: "Windswept Burden",
+		price: "$100.00",
+	},{
+		url: img,
+		title: "Windswept Burden",
+		price: "$100.00",
+	},{
+		url: img,
+		title: "Windswept Burden",
+		price: "$100.00",
+	},{
+		url: img,
+		title: "Windswept Burden",
+		price: "$100.00",
+	},
+])
+const type = ref('All')
+const addShopping = (item) => {
+	emit('addShopping', item)
+}
+onMounted(()=>{
+})
+onUnmounted(()=>{
+})
+defineExpose({})
+const {} = toRefs(data);
+</script>
+<template>
+	<div class="commodityList">
+		<div class="header">
+			<div class="title">
+				Items
+			</div>
+			<div class="menu">
+				<div :class="{'active': type === 'All'}" @click="type = 'All'">All</div>
+				<div :class="{'active': type === 'Male'}" @click="type = 'Male'">Male</div>
+				<div :class="{'active': type === 'Female'}" @click="type = 'Female'">Female</div>	
+			</div>
+		</div>
+		<div class="list">
+			<div class="item" v-for="item in list" :key="item.url">
+				<CommodityItem :url="item.url" :name="item.title" :price="item.price" @addShopping="addShopping(item)"></CommodityItem>
+			</div>
+		</div>
+	</div>
+</template>
+<style lang="less" scoped>
+	.commodityList{
+		width: 100%;
+		height: 100%;
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		.header{
+			position: sticky;
+			top: 0;
+			z-index: 2;
+			background-color: #fff;
+			.title{
+				font-family: "KaiseiOpti-Bold";
+				font-weight: 700;
+				font-size: 3.6rem;
+				line-height: 6rem;
+				color: #121212;
+				padding: 4rem 0 3.6rem 1.2rem;
+			}
+			.menu{
+				padding: 0 1.2rem;
+				display: flex;
+				gap: 2rem;
+				margin-bottom: 6rem;
+				> div{
+					min-width: 6rem;
+					text-align: center;
+					font-family: "KaiseiOpti-Bold";
+					font-weight: 700;
+					font-size: 1.98rem;
+					line-height: 100%;
+					position: relative;
+					color: #7B7B7B;
+					cursor: pointer;
+					&::after{
+						content: '';
+						position: absolute;
+						bottom: -5px;
+						left: 0;
+						display: block;
+						width: 100%;
+						border-bottom: 1px solid #232323;
+						display: none;
+					}
+					&.active{
+						color: #232323;
+						&::after{
+							display: block;
+						}
+					}
+				}
+			}
+		}
+		.list{
+			border-top: 0.5px solid #585858;
+			width: 100%;
+			flex: 1;
+			display: grid;
+			align-content: start;
+			grid-template-columns: repeat(3, 1fr);
+			overflow-y: auto;
+			/* 垂直线（右边框） */
+			.item{
+				position: relative;
+				padding: 1.2rem;
+			}
+			.item::before {
+				content: '';
+				position: absolute;
+				right: 0;
+				top: 0;
+				height: 100%;
+				border-right: 0.5px solid #585858;
+				z-index: 1;
+			}
+
+				/* 水平线（下边框） */
+			.item::after {
+				content: '';
+				position: absolute;
+				bottom: 0;
+				left: 0;
+				width: 100%;
+				border-bottom: 0.5px solid #585858;
+				z-index: 1;
+			}
+				/* 移除最后一列的右边框 */
+			.item:nth-child(3n)::before {
+				display: none;
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/views/brand/index.vue b/src/views/brand/index.vue
new file mode 100644
index 0000000..43540a1
--- /dev/null
+++ b/src/views/brand/index.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
+import CommodityList from "./commodity-list.vue";
+import MerchantInfo from "./merchant-info.vue";
+//const props = defineProps({
+//})
+//const emit = defineEmits([
+//])
+let data = reactive({
+})
+const addShopping = (item) => {}
+onMounted(()=>{
+})
+onUnmounted(()=>{
+})
+defineExpose({})
+const {} = toRefs(data);
+</script>
+<template>
+	<div class="brand">
+		<div class="header-img">
+			<img src="@/assets/images/brand/brandBg.png" alt="">
+		</div>
+		<div class="content">
+			<div class="merchant-info">
+				<MerchantInfo></MerchantInfo>
+			</div>
+			<div class="commodity-list">
+				<CommodityList @addShopping="addShopping"></CommodityList>
+			</div>
+		</div>
+		<Footer></Footer>
+	</div>
+</template>
+<style lang="less" scoped>
+	.brand{
+		width: 100%;
+		height: 100%;
+		position: relative;
+		overflow-y: auto;
+		.header-img{
+			width: 100%;
+			>img{
+				width: 100%;
+			}
+		}
+		.content{
+			display: flex;
+			height: auto;
+			align-items: flex-start;
+			.merchant-info{
+				width: 40rem;
+				padding-left: 12.7rem;
+				padding-right: 2.7rem;
+			}
+			.commodity-list{
+				flex: 1;
+				border-left: 0.5px solid #585858;
+				border-right: 0.5px solid #585858;
+				margin-right: 9rem;
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/views/brand/merchant-info.vue b/src/views/brand/merchant-info.vue
new file mode 100644
index 0000000..674b516
--- /dev/null
+++ b/src/views/brand/merchant-info.vue
@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
+//const props = defineProps({
+//})
+//const emit = defineEmits([
+//])
+let data = reactive({
+})
+onMounted(()=>{
+})
+onUnmounted(()=>{
+})
+defineExpose({})
+const {} = toRefs(data);
+</script>
+<template>
+	<div class="merchantInfo">
+		<div class="profile">
+			<img src="@/assets/images/collectionStory/Rectangle.png" alt="">
+		</div>
+		<div class="info">
+			<div class="detail">
+				<div class="name">Lian Su</div>
+				<div class="title">Roaming Clouds</div>
+			</div>
+			<div class="contact">
+				<div class="title">Contact</div>
+				<div class="email label">
+					<div class="icon">
+						<svg-icon name="brand-email" size="24" />
+					</div>
+					<div>lian.su@urieworweoo.com</div>
+				</div>
+				<div class="phone label">
+					<div class="icon">
+						<svg-icon name="brand-call" size="24" />
+					</div>
+					<div>+86 139 4829 7710</div>
+				</div>
+				<div class="address label">
+					<div class="icon">
+						<svg-icon name="brand-link" size="24" />
+					</div>
+					<div>746312432</div>
+				</div>
+				<div class="website label">
+					<div class="icon">
+						<svg-icon name="brand-link" size="24" />
+					</div>
+					<div>https://urieworweoo.com</div>
+				</div>
+			</div>
+			<div class="about">
+				<div class="title">About</div>
+				<div class="content">Lian Su’s work weaves understated ethnic influences into contemporary minimalism. She explores materials and silhouettes that bridge heritage and modern sensibilities. Her designs reflect a quiet dialogue between cultural memory and forward-looking innovation.</div>
+			</div>
+		</div>
+	</div>
+</template>
+<style lang="less" scoped>
+	.merchantInfo{
+		width: 100%;
+		height: auto;
+		position: relative;
+		padding-top: 4rem;
+		padding-bottom: 4rem;
+		.profile{
+			width: 20rem;
+			height: 20rem;
+			margin-left: 1.8rem;
+			>img{
+				width: 100%;
+				height: 100%;
+				object-fit: cover;
+			}
+		}
+		.info{
+			display: flex;
+			flex-direction: column;
+			gap: 6rem;
+			margin-top: 4rem;
+			.title{
+				font-family: "KaiseiOpti-Bold";
+				font-weight: 700;
+				font-size: 3.4rem;
+				line-height: 3.6rem;
+			}
+			> .detail{
+				.name{
+					margin-bottom: .8rem;
+					font-weight: 500;
+					font-size: 1.8rem;
+					line-height: 100%;
+					color: #232323;
+				}
+			}
+			> .contact{
+				.title{
+					margin-bottom: 2rem;
+				}
+				.label{
+					display: flex;
+					gap: 2rem;
+					margin-bottom: .6rem;
+					font-family: "KaiseiOpti-Regular";
+					font-weight: 400;
+					font-size: 1.4rem;
+					line-height: 100%;
+					color: #585858;
+					&:last-child{
+						margin-bottom: 0;
+					}
+				}
+			}
+			> .about{
+				.title{
+					margin-bottom: 2rem;
+				}
+				.content{
+					font-family: "KaiseiOpti-Regular";
+					font-weight: 400;
+					font-size: 1.6rem;
+					line-height: 2.3rem;
+					color: #585858;
+				}
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/views/collectionStory/detail/coreConcept.vue b/src/views/collectionStory/detail/coreConcept.vue
new file mode 100644
index 0000000..807180e
--- /dev/null
+++ b/src/views/collectionStory/detail/coreConcept.vue
@@ -0,0 +1,142 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
+import { Swiper, SwiperSlide } from 'swiper/vue';
+import 'swiper/css';
+import 'swiper/css/pagination';
+import 'swiper/css/navigation';
+import { Navigation, Pagination, Autoplay } from 'swiper/modules'
+import coreconcept_1 from "@/assets/images/collectionStory/coreconcept_1.png";
+import coreconcept_2 from "@/assets/images/collectionStory/coreconcept_2.png";
+import coreconcept_3 from "@/assets/images/collectionStory/coreconcept_3.png";
+import coreconcept_4 from "@/assets/images/collectionStory/coreconcept_4.png";
+import coreconcept_5 from "@/assets/images/collectionStory/coreconcept_5.png";
+
+//const props = defineProps({
+//})
+//const emit = defineEmits([
+//])
+const modules = [Navigation, Pagination, Autoplay]
+let data = reactive({
+})
+let slides = [
+	{ image: coreconcept_1, text: 'Layered Heritage, Coastal Stillness' },
+	{ image: coreconcept_2, text: 'Nomadic Silhouettes, Golden Wandering' },
+	{ image: coreconcept_3, text: 'Pastoral Communion, Woven Earth' },
+	{ image: coreconcept_4, text: 'Layered winter silhouettes' },
+	{ image: coreconcept_5, text: 'Insulated winterwear inspired by high-altitude traditions' },
+]
+onMounted(()=>{
+})
+onUnmounted(()=>{
+})
+defineExpose({})
+const {} = toRefs(data);
+</script>
+<template>
+	<div class="core-concept">
+		<div class="title">Core Concept</div>
+		<div class="info">
+			<div>
+				We are spiritual nomads carrying what wind cannot take. This collection honors those who knew home is not a place, but what you wear. Earthy palettes of terracotta, ochre, and natural beige evoke pastoral landscapes, while layered textiles and handwoven fabrics embody portable heritage. Each garment balances burden and beauty—sustainable materials and artisanal craftsmanship create timeless pieces that travel with the wearer, transforming clothing into sanctuary and memory woven into fabric.
+			</div>
+			<br />
+			<div>
+				This winterwear series reinterprets high-altitude nomadic clothing through modern, refined construction. Layered silhouettes, tactile wools, and structured draping create warmth while preserving fluid movement. Textural contrasts and sculptural volumes evoke the surrounding snowy landscapes and monastic architecture. The collection balances cultural references with contemporary tailoring, presenting outerwear that feels protective, grounded, and quietly elegant within its harsh winter environment.
+			</div>
+		</div>
+		<div class="swiper">
+			<swiper
+				:modules="modules"
+				:slides-per-view="'auto'"
+				space-between="24"
+				:navigation="{
+					prevEl: '.custom-prev',
+					nextEl: '.custom-next'
+				}"
+				>
+				<div class="custom-prev">
+					<div style="transform: rotate(180deg);">
+						<svg-icon name="collectionStory-swiperRight" size="24" />
+					</div>
+				</div>
+				<div class="custom-next">
+					<div>
+						<svg-icon name="collectionStory-swiperRight" size="24" />
+					</div>
+				</div>
+				<swiper-slide v-for="item in slides" :key="item.id">
+					<div class="slide-content">
+						<img :src="item.image" :alt="item.text" />
+						<div class="text">{{ item.text }}</div>
+					</div>
+				</swiper-slide>
+   			 </swiper>
+		</div>
+	</div>
+</template>
+<style lang="less" scoped>
+	.core-concept{
+		width: 100%;
+		height: auto;
+		position: relative;
+		padding: 6rem 0;
+		> .title{
+			padding: 0 2.4rem;
+			font-family: "KaiseiOpti-Bold";
+			font-weight: 700;
+			font-size: 3rem;
+			line-height: 100%;
+			margin-bottom: 6rem;
+		}
+		> .info{
+			width: 70.7rem;
+			margin: 0 auto;
+			margin-bottom: 4rem;
+			> div{
+				font-family: "KaiseiOpti-Regular";
+				font-weight: 400;
+				font-size: 1.6rem;
+				line-height: 2.3rem;
+			}
+		}
+		> .swiper{
+			width: 100%;
+			padding: 0 2.4rem;
+			padding-top: 1rem;
+			position: relative;
+			.custom-prev,.custom-next{
+				position: absolute;
+				top: 16rem;
+				z-index: 2;
+				cursor: pointer;
+				color: #fff;
+				filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, .5));
+			}
+			.custom-prev{
+				left: 0;
+			}
+			.custom-next{
+				left: auto;
+				right: 0;
+			}
+			.slide-content{
+				width: min-content;
+				> img{
+					height: 34.2rem;
+					width: auto;
+				}
+				> .text{
+					margin-top: 1rem;
+					font-family: "KaiseiOpti-Regular";
+					font-weight: 400;
+					font-size: 1.4rem;
+					line-height: 2.3rem;
+				}
+			}
+			:deep(.swiper-slide){
+				width: auto;
+				
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/views/collectionStory/detail/feelingWithAiDA.vue b/src/views/collectionStory/detail/feelingWithAiDA.vue
new file mode 100644
index 0000000..e0686d8
--- /dev/null
+++ b/src/views/collectionStory/detail/feelingWithAiDA.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
+import feeling_1 from "@/assets/images/collectionStory/feeling_1.png";
+import feeling_2 from "@/assets/images/collectionStory/feeling_2.png";
+//const props = defineProps({
+//})
+//const emit = defineEmits([
+//])
+let data = reactive({
+})
+let slides = [
+	{ image: feeling_1, text: 'Web interface in AiDA - the process of apparel edit' },
+	{ image: feeling_2, text: 'Web interface in AiDA-Sketchboard' },
+]
+onMounted(()=>{
+})
+onUnmounted(()=>{
+})
+defineExpose({})
+const {} = toRefs(data);
+</script>
+<template>
+	<div class="feeling-with-AiDA">
+		<div class="title">Feeling with AiDA</div>
+		<div class="info">
+			<div>
+				AiDA significantly enhances the creative latitude for cross-disciplinary creators like myself. Its functionalities, particularly the robust line-art extraction and the ability to edit the front and back garment panels, have been a major source of inspiration. This allows me to rapidly prototype by extracting traditional ethnic wear and conduct detailed style modifications directly on the canvas. As an integrated creation platform, AiDA enables a deeper focus on the design process. For seasoned designers, AI serves as a powerful source of inspiration, and AiDA is an exemplary manifestation of this principle.
+			</div>
+		</div>
+		<div class="img-box">
+			<div class="img-item" v-for="item in slides" :key="item.text">
+				<img :src="item.image" alt="">
+				<div class="text">{{ item.text }}</div>
+			</div>
+		</div>
+	</div>
+</template>
+<style lang="less" scoped>
+	.feeling-with-AiDA{
+		width: 100%;
+		height: auto;
+		position: relative;
+		padding: 6rem 0;
+		padding-bottom: 18rem;
+		> .title{
+			padding: 0 2.4rem;
+			font-family: "KaiseiOpti-Bold";
+			font-weight: 700;
+			font-size: 3rem;
+			line-height: 100%;
+			margin-bottom: 6rem;
+		}
+		> .info{
+			width: 70.7rem;
+			margin: 0 auto;
+			margin-bottom: 4rem;
+			> div{
+				font-family: "KaiseiOpti-Regular";
+				font-weight: 400;
+				font-size: 1.6rem;
+				line-height: 2.3rem;
+			}
+		}
+		> .img-box{
+			width: 100%;
+			margin-top: 4rem;
+			display: flex;
+			gap: 2.3rem;
+			justify-content: center;
+			> .img-item{
+				width: min-content;
+				> img{
+					margin-bottom: .9rem;
+					height: 34.3rem;
+				}
+				> .text{
+					font-family: "KaiseiOpti-Regular";
+					font-weight: 400;
+					font-size: 1.4rem;
+					line-height: 2.3rem;
+				}
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/views/collectionStory/detail/index.vue b/src/views/collectionStory/detail/index.vue
new file mode 100644
index 0000000..9633a5f
--- /dev/null
+++ b/src/views/collectionStory/detail/index.vue
@@ -0,0 +1,142 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
+import img from "@/assets/images/collectionStory/Rectangle.png";
+import coreConcept from "./coreConcept.vue";
+import inspiration from "./inspiration.vue";
+import feelingWithAiDA from "./feelingWithAiDA.vue";
+import CommodityItem from "@/components/CommodityItem.vue";
+//const props = defineProps({
+//})
+//const emit = defineEmits([
+//])
+let data = reactive({
+})
+const list = ref([
+	{
+		url: img,
+		title: "Windswept Burden",
+		price: "$100.00",
+	},{
+		url: img,
+		title: "Windswept Burden",
+		price: "$100.00",
+	},{
+		url: img,
+		title: "Windswept Burden",
+		price: "$100.00",
+	},
+])
+const addShopping = (item) => {
+	console.log(item);
+}
+onMounted(()=>{
+})
+onUnmounted(()=>{
+}) 
+defineExpose({})
+const {} = toRefs(data);
+</script>
+<template>
+	<div class="detail">
+		<div class="left">
+			<div class="personal">
+				<img :src="img" alt="">
+				<div class="name">
+					<span>Lian Su</span>
+					<div class="icon">
+						<SvgIcon name="share" size="24" />
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="center">
+			<coreConcept ></coreConcept>
+			<div class="line"></div>
+			<inspiration ></inspiration>
+			<div class="line"></div>
+			<feelingWithAiDA ></feelingWithAiDA>
+		</div>
+		<div class="right">
+			<div class="item" v-for="item in list" :key="item.url">
+				<CommodityItem :url="item.url" :name="item.title" :price="item.price" @addShopping="addShopping(item)"></CommodityItem>
+			</div>
+		</div>
+	</div>
+</template>
+<style lang="less" scoped>
+	.detail{
+		width: 100%;
+		height: auto;
+		position: relative;
+		display: flex;
+		align-items: flex-start;
+		> div{
+			// height: 100%;
+		}
+		> .left{
+			width: 23rem;
+			padding-top: 6.3rem;
+			padding-left: 3rem;
+			position: sticky;
+			top: 0;
+			> .personal{
+				display: flex;
+				flex-direction: column;
+				> img{
+					width: 10rem;
+					height: 10rem;
+					object-fit: cover;
+					margin-bottom: 1.1rem;
+				}
+				> .name{
+					display: flex;
+					gap: .4rem;
+					align-items: center;
+					> span{
+						font-family: 'KaiseiOpti-Bold';
+						font-weight: 700;
+						font-size: 1.8rem;
+						line-height: 100%;
+						vertical-align: bottom;
+					}
+				}
+			}
+			
+		}
+		> .center{
+			flex: 1;
+			border-left: 0.5px solid #585858;
+			border-right: 0.5px solid #585858;
+			// overflow-y: auto;
+			overflow: hidden;
+			// height: 100%;
+			height: auto;
+			.line{
+				border: 0.5px solid #58585899;
+				width: 100%;
+			}
+			&::-webkit-scrollbar{
+				display: none;
+			}
+		}
+		> .right{
+			width: 25.4rem;
+			padding-top: 6rem;
+			position: sticky;
+			top: 0;
+			height: calc(100vh - var(--header-height));
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			gap: 4rem;
+			overflow-y: auto;
+			&::-webkit-scrollbar{
+				display: none;
+			}
+			> .item{
+				margin-bottom: 2.3rem;
+				width: 20rem;
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/views/collectionStory/detail/inspiration.vue b/src/views/collectionStory/detail/inspiration.vue
new file mode 100644
index 0000000..158fe4d
--- /dev/null
+++ b/src/views/collectionStory/detail/inspiration.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
+import inspiration_1 from "@/assets/images/collectionStory/inspiration_1.png";
+import inspiration_2 from "@/assets/images/collectionStory/inspiration_1.png";
+//const props = defineProps({
+//})
+//const emit = defineEmits([
+//])
+let data = reactive({
+})
+let slides = [
+	{ image: inspiration_1, text: 'Moodboard 1 for this Collection' },
+	{ image: inspiration_2, text: 'Moodboard 2 for this Collection' },
+]
+onMounted(()=>{
+})
+onUnmounted(()=>{
+})
+defineExpose({})
+const {} = toRefs(data);
+</script>
+<template>
+	<div class="inspiration">
+		<div class="title">Inspiration</div>
+		<div class="info">
+			<div>
+				This project is inspired by the enduring traditions and unique material culture of high-altitude nomadic communities, particularly those found across Central Asia and the Himalayan plateau.
+			</div>
+			<div>
+				The moodboard now balances rugged, natural fibers and dramatic, layered silhouettes with vibrant color and refined pattern work. Key visual elements include the strength of traditional nomadic crafts like falconry and the warmth of textured knitwear. The palette expands from earthy browns to striking accents of lime green, teal, and gold, often expressed through intricate geometric ornamental motifs. The silhouettes emphasize functional draping (scarves and outerwear) and structured, high-collar layering, translating ancient heritage into a bold, contemporary aesthetic.
+			</div>
+		</div>
+		<div class="img-box">
+			<div class="img-item" v-for="item in slides" :key="item.text">
+				<img :src="item.image" alt="">
+				<div class="text">{{ item.text }}</div>
+			</div>
+		</div>
+	</div>
+</template>
+<style lang="less" scoped>
+	.inspiration{
+		width: 100%;
+		height: auto;
+		position: relative;
+		padding: 6rem 0;
+		> .title{
+			padding: 0 2.4rem;
+			font-family: "KaiseiOpti-Bold";
+			font-weight: 700;
+			font-size: 3rem;
+			line-height: 100%;
+			margin-bottom: 6rem;
+		}
+		> .info{
+			width: 70.7rem;
+			margin: 0 auto;
+			margin-bottom: 4rem;
+			> div{
+				font-family: "KaiseiOpti-Regular";
+				font-weight: 400;
+				font-size: 1.6rem;
+				line-height: 2.3rem;
+			}
+		}
+		> .img-box{
+			width: 100%;
+			margin-top: 4rem;
+			display: flex;
+			gap: 2.3rem;
+			justify-content: center;
+			> .img-item{
+				width: min-content;
+				> img{
+					margin-bottom: .9rem;
+					height: 34.3rem;
+				}
+				> .text{
+					font-family: "KaiseiOpti-Regular";
+					font-weight: 400;
+					font-size: 1.4rem;
+					line-height: 2.3rem;
+				}
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/views/collectionStory/index.vue b/src/views/collectionStory/index.vue
index e29ef80..3fc0a59 100644
--- a/src/views/collectionStory/index.vue
+++ b/src/views/collectionStory/index.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
+import Detail from "./detail/index.vue";
 //const props = defineProps({
 //})
 //const emit = defineEmits([
 //])
 let data = reactive({
 })
+
 onMounted(()=>{
 })
 onUnmounted(()=>{
@@ -15,9 +17,39 @@ const {} = toRefs(data);
 </script>
 <template>
 	<div class="collectionStory">
-		<div class="title">
-			collection Story
+		<div class="first-screen">
+			<img class="banner" src="@/assets/images/collectionStory/collection_story_banner.png" alt="">
+			<div class="back">
+				<SvgIcon name="collectionStory-back" size="20" />
+				<div class="text">Back to Home</div>
+			</div>
+			<div class="title-content">
+				<div class="title-box">
+					<div class="left">
+						<div class="title">
+							Windswept Burden
+						</div>
+						<div class="info">
+							Publish Date: 24th Nov 2025
+						</div>
+					</div>
+					<div class="right">
+						<div class="info">
+							“We are spiritual nomads carrying what wind cannot take. <br />
+							Inspired by those who knew home is not a place, but what you wear.”
+						</div>
+					</div>
+				</div>
+				<div class="scrolling-learn-more">
+					<div>Scrolling Learn More</div>
+					<SvgIcon name="collectionStory-scrollingLearnMore" size="48" />
+				</div>
+			</div>
 		</div>
+		<div class="content">
+			<Detail></Detail>
+		</div>
+		<Footer></Footer>
 	</div>
 </template>
 <style lang="less" scoped>
@@ -25,5 +57,104 @@ const {} = toRefs(data);
 		width: 100%;
 		height: 100%;
 		position: relative;
+		overflow-y: auto;
+		.first-screen{
+			position: relative;
+			height: auto;
+			display: flex;
+			overflow: hidden;
+			> .back{
+				position: absolute;
+				top: 2.4rem;
+				left: 2.4rem;
+				display: flex;
+				align-items: center;
+				gap: .8rem;
+				color: #fff;
+				cursor: pointer;
+				> .text{
+					font-size: 2rem;
+					font-weight: 500;
+					white-space: nowrap;
+				}
+			}
+			> .title-content{
+				width: 100%;
+				height: 63.2rem;
+				margin-top: 24.8rem;
+				background: linear-gradient(180deg, rgba(0, 0, 0, 0) 38.37%, rgba(0, 0, 0, 0.192) 90.74%);
+				padding: 0 4rem;
+				> .title-box{
+					margin-top: 36.7rem;
+					color: #fff;
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+					> .left{
+						font-family: 'KaiseiOpti-Bold';
+						font-weight: 700;
+						> .title{
+							font-size: 6rem;
+							line-height: 6rem;
+						}
+						> .info{
+							margin-top: 1.7rem;
+							font-size: 1.8rem;
+							line-height: 100%;
+							vertical-align: bottom;
+						}
+					}
+					> .right{
+						> .info{
+							font-weight: 500;
+							font-size: 1.8rem;
+							line-height: 100%;
+							text-align: right;
+						}
+					}
+				}	
+			}
+			.scrolling-learn-more{
+				position: absolute;
+				bottom: 2.1rem;
+				left: 50%;
+				transform: translateX(-50%);
+				display: flex;
+				flex-direction: column;
+				color: #fff;
+				animation: scroll 3s linear infinite;
+				@keyframes scroll {
+					0% {
+						transform: translateY(0);
+					}
+					50% {
+						transform: translateY(-20%);
+					}
+					100% {
+						transform: translateY(0%);
+					}
+				}
+				> div{
+					font-family: 'KaiseiOpti-Regular';
+					font-weight: 400;
+					font-size: 1.4rem;	
+					line-height: 100%;
+					text-align: center;
+					margin-bottom: 1.5rem;
+					white-space: nowrap;
+				}
+			}
+			.banner{
+				width: 100%;
+				position: absolute;
+				z-index: -1;
+			}
+		}
+		.content{
+			width: 100%;
+			// min-height: 100%;
+			// height: 100%;
+		}
+		
 	}
 </style>
\ No newline at end of file
diff --git a/src/views/main-header.vue b/src/views/main-header.vue
index 70880bd..406d949 100644
--- a/src/views/main-header.vue
+++ b/src/views/main-header.vue
@@ -134,7 +134,7 @@
 
 <style lang="less">
 	#main-header {
-		height: 8rem;
+		height: var(--header-height);
 		display: flex;
 		align-items: center;
 		justify-content: space-between;