Add: 방문 크리에이터 사인 마키 섹션 추가

- 메인페이지 클라이언트 섹션 위에 방문 크리에이터 섹션 추가
- 10명 크리에이터 사인 이미지 무한 스크롤 마키
- 이미지 아래 크리에이터 이름 표시
- 다크모드 및 모바일 반응형 지원

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
68893236+KINDNICK@users.noreply.github.com 2026-02-03 22:27:31 +09:00
parent e1d2796f5c
commit 9bf88cb44e
12 changed files with 129 additions and 0 deletions

View File

@ -1568,3 +1568,96 @@ body {
flex-wrap: wrap;
}
}
/* ========================================
방문 크리에이터 사인 섹션
======================================== */
.creator-signs-section {
background: var(--bg-white);
overflow: hidden;
}
.signs-marquee {
position: relative;
overflow: hidden;
mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
-webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.signs-marquee-track {
display: flex;
gap: var(--spacing-xl);
animation: signsScroll 40s linear infinite;
}
.signs-marquee:hover .signs-marquee-track {
animation-play-state: paused;
}
@keyframes signsScroll {
0% { transform: translateX(0); }
100% { transform: translateX(calc(-50% - var(--spacing-xl) / 2)); }
}
.sign-item {
flex-shrink: 0;
display: flex;
flex-direction: column;
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--bg-light);
box-shadow: var(--shadow-sm);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.sign-item:hover {
transform: scale(1.05);
box-shadow: var(--shadow-md);
}
.sign-item img {
height: 280px;
width: auto;
display: block;
}
.sign-name {
display: block;
padding: 8px 12px;
font-size: var(--font-sm);
font-weight: 500;
color: var(--text-primary);
text-align: center;
background: var(--bg-white);
}
/* 방문 크리에이터 다크모드 */
[data-theme="dark"] .creator-signs-section {
background: transparent;
}
[data-theme="dark"] .sign-item {
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--glass-border);
}
[data-theme="dark"] .sign-item:hover {
border-color: rgba(255, 136, 0, 0.3);
}
[data-theme="dark"] .sign-name {
background: rgba(255, 255, 255, 0.05);
color: var(--dark-text-primary);
}
/* 방문 크리에이터 반응형 */
@media (max-width: 768px) {
.sign-item img {
height: 200px;
}
.sign-name {
padding: 6px 10px;
font-size: var(--font-xs);
}
}

BIN
images/sign/김마늘.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 301 KiB

BIN
images/sign/만타.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 377 KiB

BIN
images/sign/문모모.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 340 KiB

BIN
images/sign/베니.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 374 KiB

BIN
images/sign/시에.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 472 KiB

BIN
images/sign/요나카.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 411 KiB

BIN
images/sign/이무지.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 294 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 303 KiB

BIN
images/sign/최또.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 256 KiB

BIN
images/sign/치요.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 331 KiB

View File

@ -667,6 +667,42 @@
</div>
</section>
<!-- 방문 크리에이터 사인 -->
<section class="creator-signs-section section">
<div class="container">
<div class="section-header reveal" data-reveal="fade">
<h2>방문 크리에이터</h2>
<p>밍글 스튜디오를 방문한 크리에이터들의 사인</p>
</div>
<div class="signs-marquee">
<div class="signs-marquee-track">
<div class="sign-item"><img src="images/sign/김마늘.jpg" alt="김마늘 사인" loading="lazy"><span class="sign-name">김마늘</span></div>
<div class="sign-item"><img src="images/sign/만타.jpg" alt="만타 사인" loading="lazy"><span class="sign-name">만타</span></div>
<div class="sign-item"><img src="images/sign/문모모.jpg" alt="문모모 사인" loading="lazy"><span class="sign-name">문모모</span></div>
<div class="sign-item"><img src="images/sign/베니.jpg" alt="베니 사인" loading="lazy"><span class="sign-name">베니</span></div>
<div class="sign-item"><img src="images/sign/시에.jpg" alt="시에 사인" loading="lazy"><span class="sign-name">시에</span></div>
<div class="sign-item"><img src="images/sign/요나카.jpg" alt="요나카 사인" loading="lazy"><span class="sign-name">요나카</span></div>
<div class="sign-item"><img src="images/sign/이무지.jpg" alt="이무지 사인" loading="lazy"><span class="sign-name">이무지</span></div>
<div class="sign-item"><img src="images/sign/지한이또.jpg" alt="지한이또 사인" loading="lazy"><span class="sign-name">지한이또</span></div>
<div class="sign-item"><img src="images/sign/최또.jpg" alt="최또 사인" loading="lazy"><span class="sign-name">최또</span></div>
<div class="sign-item"><img src="images/sign/치요.jpg" alt="치요 사인" loading="lazy"><span class="sign-name">치요</span></div>
<!-- 무한 루프용 복제 -->
<div class="sign-item"><img src="images/sign/김마늘.jpg" alt="김마늘 사인" loading="lazy"><span class="sign-name">김마늘</span></div>
<div class="sign-item"><img src="images/sign/만타.jpg" alt="만타 사인" loading="lazy"><span class="sign-name">만타</span></div>
<div class="sign-item"><img src="images/sign/문모모.jpg" alt="문모모 사인" loading="lazy"><span class="sign-name">문모모</span></div>
<div class="sign-item"><img src="images/sign/베니.jpg" alt="베니 사인" loading="lazy"><span class="sign-name">베니</span></div>
<div class="sign-item"><img src="images/sign/시에.jpg" alt="시에 사인" loading="lazy"><span class="sign-name">시에</span></div>
<div class="sign-item"><img src="images/sign/요나카.jpg" alt="요나카 사인" loading="lazy"><span class="sign-name">요나카</span></div>
<div class="sign-item"><img src="images/sign/이무지.jpg" alt="이무지 사인" loading="lazy"><span class="sign-name">이무지</span></div>
<div class="sign-item"><img src="images/sign/지한이또.jpg" alt="지한이또 사인" loading="lazy"><span class="sign-name">지한이또</span></div>
<div class="sign-item"><img src="images/sign/최또.jpg" alt="최또 사인" loading="lazy"><span class="sign-name">최또</span></div>
<div class="sign-item"><img src="images/sign/치요.jpg" alt="치요 사인" loading="lazy"><span class="sign-name">치요</span></div>
</div>
</div>
</div>
</section>
<!-- 기업 클라이언트 섹션 -->
<section class="partners-section section">
<div class="container">