|
|
|
|
@ -26,12 +26,32 @@ const CLIENTS = [
|
|
|
|
|
{ id: "molit", logo: "24" }, |
|
|
|
|
]; |
|
|
|
|
|
|
|
|
|
const PARTNERS = ["02", "03", "04", "05", "06", "07", "08", "10", "11", "12", "13", "14", "18", "19", "22"]; |
|
|
|
|
const PARTNERS = [ |
|
|
|
|
"02", |
|
|
|
|
"03", |
|
|
|
|
"04", |
|
|
|
|
"05", |
|
|
|
|
"06", |
|
|
|
|
"07", |
|
|
|
|
"08", |
|
|
|
|
"10", |
|
|
|
|
"11", |
|
|
|
|
"12", |
|
|
|
|
"13", |
|
|
|
|
"14", |
|
|
|
|
"18", |
|
|
|
|
"19", |
|
|
|
|
"22", |
|
|
|
|
]; |
|
|
|
|
|
|
|
|
|
function LogoCard({ logo, basePath }) { |
|
|
|
|
return ( |
|
|
|
|
<div className="partners-logo-cell"> |
|
|
|
|
<img src={`${basePath}images/partner/banner${logo}.png`} alt="" loading="lazy" /> |
|
|
|
|
<img |
|
|
|
|
src={`${basePath}images/partner/banner${logo}.png`} |
|
|
|
|
alt="" |
|
|
|
|
loading="lazy" |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
@ -43,6 +63,32 @@ export default function PartnersPage() {
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
const ctx = gsap.context(() => { |
|
|
|
|
// 모든 섹션 요소 — 아래에서 위로 |
|
|
|
|
gsap.utils |
|
|
|
|
.toArray([ |
|
|
|
|
".partners-section-row", |
|
|
|
|
".partners-sidebar", |
|
|
|
|
".partners-grid", |
|
|
|
|
".sub-fade-in", |
|
|
|
|
]) |
|
|
|
|
.forEach((el) => { |
|
|
|
|
gsap.fromTo( |
|
|
|
|
el, |
|
|
|
|
{ opacity: 0, y: 48 }, |
|
|
|
|
{ |
|
|
|
|
opacity: 1, |
|
|
|
|
y: 0, |
|
|
|
|
duration: 0.7, |
|
|
|
|
ease: "power3.out", |
|
|
|
|
scrollTrigger: { |
|
|
|
|
trigger: el, |
|
|
|
|
start: "top 88%", |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
// 로고 셀 stagger (기존 유지) |
|
|
|
|
gsap.fromTo( |
|
|
|
|
".partners-logo-cell", |
|
|
|
|
{ opacity: 0, y: 16 }, |
|
|
|
|
@ -59,9 +105,9 @@ export default function PartnersPage() {
|
|
|
|
|
}, |
|
|
|
|
); |
|
|
|
|
}, wrapRef); |
|
|
|
|
|
|
|
|
|
return () => ctx.revert(); |
|
|
|
|
}, []); |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<article ref={ref}> |
|
|
|
|
<SubHero |
|
|
|
|
@ -80,7 +126,13 @@ export default function PartnersPage() {
|
|
|
|
|
<div className="sub-content"> |
|
|
|
|
<div className="inner-wrap"> |
|
|
|
|
{/* 상단 타이틀 */} |
|
|
|
|
<motion.div className="ht-header" initial={{ opacity: 0, y: 32 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true, margin: "-80px" }} transition={{ duration: 0.6, ease: [0.4, 0, 0.2, 1] }}> |
|
|
|
|
<motion.div |
|
|
|
|
className="ht-header" |
|
|
|
|
initial={{ opacity: 0, y: 32 }} |
|
|
|
|
whileInView={{ opacity: 1, y: 0 }} |
|
|
|
|
viewport={{ once: true, margin: "-80px" }} |
|
|
|
|
transition={{ duration: 0.6, ease: [0.4, 0, 0.2, 1] }} |
|
|
|
|
> |
|
|
|
|
<p className="ht-header-title"> |
|
|
|
|
Trusted by Many, |
|
|
|
|
<br /> |
|
|
|
|
@ -88,7 +140,9 @@ export default function PartnersPage() {
|
|
|
|
|
<span>Built</span> <b>for the Future</b> |
|
|
|
|
</em> |
|
|
|
|
</p> |
|
|
|
|
<em className="ht-header-sub">오랜 신뢰, 깊은 협력 함께하는 기관과 파트너</em> |
|
|
|
|
<em className="ht-header-sub"> |
|
|
|
|
오랜 신뢰, 깊은 협력 함께하는 기관과 파트너 |
|
|
|
|
</em> |
|
|
|
|
</motion.div> |
|
|
|
|
|
|
|
|
|
<div className="partners-wrap" ref={wrapRef}> |
|
|
|
|
@ -129,19 +183,69 @@ export default function PartnersPage() {
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
{/* CTA */} |
|
|
|
|
<div className="partners-cta"> |
|
|
|
|
<div className="partners-cta-left"> |
|
|
|
|
<p className="partners-eyebrow">Become a Partner</p> |
|
|
|
|
<p className="partners-cta-title"> |
|
|
|
|
팔네트웍스와 함께 성장할 |
|
|
|
|
<br /> |
|
|
|
|
파트너를 찾습니다 |
|
|
|
|
</p> |
|
|
|
|
<section className="sub-section sub-fade-in"> |
|
|
|
|
<div |
|
|
|
|
style={{ |
|
|
|
|
display: "flex", |
|
|
|
|
alignItems: "center", |
|
|
|
|
justifyContent: "space-between", |
|
|
|
|
flexWrap: "wrap", |
|
|
|
|
gap: "24px", |
|
|
|
|
padding: "48px 56px", |
|
|
|
|
background: "var(--color-primary)", |
|
|
|
|
borderRadius: "24px", |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
<div> |
|
|
|
|
<p |
|
|
|
|
style={{ |
|
|
|
|
margin: "0 0 8px", |
|
|
|
|
fontSize: "13px", |
|
|
|
|
fontWeight: 700, |
|
|
|
|
letterSpacing: ".12em", |
|
|
|
|
textTransform: "uppercase", |
|
|
|
|
color: "rgba(255,255,255,.65)", |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
Become a Partner |
|
|
|
|
</p> |
|
|
|
|
<h3 |
|
|
|
|
style={{ |
|
|
|
|
margin: 0, |
|
|
|
|
fontSize: "clamp(22px,2.2vw,30px)", |
|
|
|
|
fontWeight: 800, |
|
|
|
|
color: "#fff", |
|
|
|
|
letterSpacing: "-.03em", |
|
|
|
|
lineHeight: 1.25, |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
팔네트웍스와 함께 성장할 |
|
|
|
|
<br /> |
|
|
|
|
파트너를 찾습니다 |
|
|
|
|
</h3> |
|
|
|
|
</div> |
|
|
|
|
<a |
|
|
|
|
href="/contact/inquiry" |
|
|
|
|
style={{ |
|
|
|
|
display: "inline-flex", |
|
|
|
|
alignItems: "center", |
|
|
|
|
height: "52px", |
|
|
|
|
padding: "0 28px", |
|
|
|
|
background: "#fff", |
|
|
|
|
borderRadius: "999px", |
|
|
|
|
fontSize: "15px", |
|
|
|
|
fontWeight: 700, |
|
|
|
|
color: "var(--color-primary)", |
|
|
|
|
textDecoration: "none", |
|
|
|
|
whiteSpace: "nowrap", |
|
|
|
|
letterSpacing: "-.01em", |
|
|
|
|
flexShrink: 0, |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
협력 문의하기 |
|
|
|
|
</a> |
|
|
|
|
</div> |
|
|
|
|
<a href="/contact/inquiry" className="partners-cta-btn"> |
|
|
|
|
협력 문의하기 → |
|
|
|
|
</a> |
|
|
|
|
</div> |
|
|
|
|
</section> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
