diff --git a/public/images/partner/banner01.png b/public/images/partner/banner01.png index b6d7d68..b13ec90 100644 Binary files a/public/images/partner/banner01.png and b/public/images/partner/banner01.png differ diff --git a/public/images/partner/banner09.png b/public/images/partner/banner09.png index 47594be..058089f 100644 Binary files a/public/images/partner/banner09.png and b/public/images/partner/banner09.png differ diff --git a/public/images/partner/banner13.png b/public/images/partner/banner13.png index f80f7de..b13ec90 100644 Binary files a/public/images/partner/banner13.png and b/public/images/partner/banner13.png differ diff --git a/public/images/partner/banner15.png b/public/images/partner/banner15.png index dd44b28..11378e4 100644 Binary files a/public/images/partner/banner15.png and b/public/images/partner/banner15.png differ diff --git a/public/images/partner/banner20.png b/public/images/partner/banner20.png index cb9aefe..1a53bd5 100644 Binary files a/public/images/partner/banner20.png and b/public/images/partner/banner20.png differ diff --git a/public/images/partner/banner21.png b/public/images/partner/banner21.png index 6c8dd7c..3a8aa7e 100644 Binary files a/public/images/partner/banner21.png and b/public/images/partner/banner21.png differ diff --git a/src/css/common.css b/src/css/common.css index 8a70260..5c53199 100644 --- a/src/css/common.css +++ b/src/css/common.css @@ -105,19 +105,23 @@ body{overflow-x:hidden;} .ab-eyebrow--light{color:rgba(255,255,255,.3);} /* ── 공통 섹션 헤딩 — 가운데 정렬 ── */ -.partner-section-heading{text-align:center;margin-bottom:24px;} -.partner-section-title{font-size:clamp(28px,4vw,52px);font-weight:700;color:#0f1628;line-height:1.25;margin-bottom:24px;} -.partner-section-sub{font-size:clamp(13px,1.4vw,16px);color:#9499b0;letter-spacing:-0.01em;} -.partner-hub-section{padding:40px 0 0;} +.partner-section-heading{text-align:center;margin-bottom:20px;} +.partner-section-title{font-size:clamp(32px,4.5vw,60px);font-weight:800;color:#0a0f1e;line-height:1.08;letter-spacing:-0.04em;margin-bottom:14px;} +.partner-section-sub{font-size:clamp(13px,1.2vw,16px);color:rgba(26,31,94,.42);letter-spacing:-0.01em;} +.partner-hub-section{padding:72px 0 0;} .client-hub-svg{display:block;width:100%;height:auto;} .partner-logo-section{padding:40px 0 60px;background:#f7f8fc;} .partner-logo-top{display:flex;justify-content:space-between;align-items:flex-end;max-width:1440px;margin:0 auto 24px;padding:0 40px;} -.partner-logo-kicker{display:block;font-size:11px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--navy);margin-bottom:6px;} +.partner-logo-kicker{display:block;font-size:11px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:#1a1f5e;margin-bottom:6px;} .partner-logo-stat{display:flex;flex-direction:column;align-items:flex-end;} .partner-logo-stat__num{font-size:48px;font-weight:700;color:#0f1628;line-height:1;} .partner-logo-stat__label{font-size:12px;color:#9499b0;margin-top:4px;} -.partner-logo-grid--partners{display:grid;grid-template-columns:repeat(5,1fr);max-width:1440px;margin:0 auto;background-color:#fff;border-top:1px solid #ebebf0;border-left:1px solid #ebebf0;} -.partner-logo-card{display:flex;align-items:center;justify-content:center;padding:32px 24px;border-right:1px solid #ebebf0;border-bottom:1px solid #ebebf0;background:#fff;} +.partner-logo-grid--partners{display:grid;grid-template-columns:repeat(5,1fr);max-width:1440px;margin:0 auto;background-color:#fff;border-top:1px solid #e0e0eb;border-left:1px solid #e0e0eb;} +.partner-logo-card{display:flex;align-items:center;justify-content:center;padding:32px 24px;border-right:1px solid #e0e0eb;border-bottom:1px solid #e0e0eb;background:#fff;} .partner-logo-card img{max-width:120px;max-height:52px;width:100%;object-fit:contain;} @media(max-width:768px){.partner-logo-grid--partners{grid-template-columns:repeat(3,1fr);}} -@media(max-width:480px){.partner-logo-grid--partners{grid-template-columns:repeat(2,1fr);}} \ No newline at end of file +@media(max-width:480px){.partner-logo-grid--partners{grid-template-columns:repeat(2,1fr);}} +@keyframes orbitSpin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} \ No newline at end of file diff --git a/src/pages/company/PartnersPage.jsx b/src/pages/company/PartnersPage.jsx index 42e83cb..96f77d1 100644 --- a/src/pages/company/PartnersPage.jsx +++ b/src/pages/company/PartnersPage.jsx @@ -59,6 +59,7 @@ function nodePos(angle) { function ClientHub({ basePath }) { const svgRef = useRef(null); + const orbitRef = useRef(null); useEffect(() => { const ctx = gsap.context(() => { @@ -98,6 +99,20 @@ function ClientHub({ basePath }) { delay: 0.35, }, ); + + gsap.to(orbitRef.current, { + rotation: 360, + svgOrigin: `${CX} ${CY}`, + duration: 30, + ease: "none", + repeat: -1, + paused: true, // 추가 + scrollTrigger: { + trigger: svgRef.current, + start: "top 75%", + toggleActions: "play pause resume pause", + }, + }); }, svgRef); return () => ctx.revert(); }, []); @@ -110,6 +125,7 @@ function ClientHub({ basePath }) { xmlns="http://www.w3.org/2000/svg" > - + + 주요 @@ -153,9 +177,9 @@ function ClientHub({ basePath }) { x={CX} y={CY + 7} textAnchor="middle" - fill="#fff" - fontSize="13" - fontWeight="600" + fill="#e8eaf0" + fontSize="12" + fontWeight="500" letterSpacing="0.04em" > 고객사 @@ -166,6 +190,7 @@ function ClientHub({ basePath }) { textAnchor="middle" fill="#8892b0" fontSize="10" + fontWeight="500" > 8 clients @@ -184,16 +209,16 @@ function ClientHub({ basePath }) { cx={pos.x} cy={pos.y} r={30} - fill="#fff" - stroke="#e2e2ea" - strokeWidth="1" + fill="#f4f5f9" + stroke="#B8BCCF" + strokeWidth="1.5" />