Browse Source

fix : 고객 협력사 수정

remotes/origin/main
이시연 4 weeks ago
parent
commit
e01a1605a8
  1. BIN
      public/images/partner/banner01.png
  2. BIN
      public/images/partner/banner09.png
  3. BIN
      public/images/partner/banner13.png
  4. BIN
      public/images/partner/banner15.png
  5. BIN
      public/images/partner/banner20.png
  6. BIN
      public/images/partner/banner21.png
  7. 18
      src/css/common.css
  8. 53
      src/pages/company/PartnersPage.jsx

BIN
public/images/partner/banner01.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.5 KiB

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
public/images/partner/banner09.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 66 KiB

BIN
public/images/partner/banner13.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
public/images/partner/banner15.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.9 KiB

After

Width:  |  Height:  |  Size: 13 KiB

BIN
public/images/partner/banner20.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 28 KiB

BIN
public/images/partner/banner21.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 15 KiB

18
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);}}
@keyframes orbitSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

53
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"
>
<circle
ref={orbitRef}
cx={CX}
cy={CY}
r={ORBIT_R}
@ -137,14 +153,22 @@ function ClientHub({ basePath }) {
})}
<g className="hub-center">
<circle cx={CX} cy={CY} r={44} fill="#0f1628" />
<circle cx={CX} cy={CY} r={44} fill="#1e2d4f" opacity="1" />
<circle
cx={CX}
cy={CY}
r={44}
fill="none"
stroke="#3a4f7a"
strokeWidth="1.2"
/>
<text
x={CX}
y={CY - 9}
textAnchor="middle"
fill="#fff"
fontSize="13"
fontWeight="600"
fill="#e8eaf0"
fontSize="12"
fontWeight="500"
letterSpacing="0.04em"
>
주요
@ -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
</text>
@ -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"
/>
<image
href={imgSrc}
x={pos.x - 20}
y={pos.y - 20}
width="40"
height="40"
x={pos.x - 22}
y={pos.y - 22}
width="44"
height="44"
preserveAspectRatio="xMidYMid meet"
/>
</g>

Loading…
Cancel
Save