diff --git a/public/images/partner/banner02.png b/public/images/partner/banner02.png index c7dc8bb..f599525 100644 Binary files a/public/images/partner/banner02.png and b/public/images/partner/banner02.png differ diff --git a/public/images/partner/banner03.png b/public/images/partner/banner03.png index 02a98bb..ce214ef 100644 Binary files a/public/images/partner/banner03.png and b/public/images/partner/banner03.png differ diff --git a/public/images/partner/banner04.png b/public/images/partner/banner04.png index b6bf549..32056b2 100644 Binary files a/public/images/partner/banner04.png and b/public/images/partner/banner04.png differ diff --git a/public/images/partner/banner07.png b/public/images/partner/banner07.png index e809106..6630b7c 100644 Binary files a/public/images/partner/banner07.png and b/public/images/partner/banner07.png differ diff --git a/public/images/partner/banner14.png b/public/images/partner/banner14.png index 5b8ae7f..a44db71 100644 Binary files a/public/images/partner/banner14.png and b/public/images/partner/banner14.png differ diff --git a/public/images/partner/banner23.png b/public/images/partner/banner23.png index 44f948b..95ca9ad 100644 Binary files a/public/images/partner/banner23.png and b/public/images/partner/banner23.png differ diff --git a/public/images/partner/banner24.png b/public/images/partner/banner24.png index 990f24a..9e3c5e0 100644 Binary files a/public/images/partner/banner24.png and b/public/images/partner/banner24.png differ diff --git a/src/css/common.css b/src/css/common.css index 95d24cd..5b88041 100644 --- a/src/css/common.css +++ b/src/css/common.css @@ -104,141 +104,48 @@ body{overflow-x:hidden;} .ab-eyebrow{display:block;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(26,31,94,.35);margin-bottom:40px;} .ab-eyebrow--light{color:rgba(255,255,255,.3);} -/* ── 공통 섹션 헤딩 — 가운데 정렬 ── */ -/* ── Partners Page ── */ -.partners-wrap { - padding: 48px 0px; - display: flex; - flex-direction: column; - gap: 40px; - max-width: 1440px; - margin: 0 auto; -} - - -.partners-eyebrow { - font-size: 11px; - font-weight: 700; - letter-spacing: .16em; - text-transform: uppercase; - color: rgba(26,31,94,.38); - margin-bottom: 10px; -} - -.partners-title { - font-size: 22px; - font-weight: 800; - color: #0a0f1e; - margin-bottom: 16px; - letter-spacing: -.03em; -} - -.partners-divider { - height: 1px; - background: rgba(26,31,94,.08); - margin-bottom: 16px; -} -/* 고객사 8개 — 4열 */ -.partners-grid-8 { - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 8px; -} - -/* 협력사 15개 — 5열 */ -.partners-grid-15 { - display: grid; - grid-template-columns: repeat(5, 1fr); - gap: 8px; -} - -.partner-card { - background: #fff; - border: 1px solid rgba(26,31,94,.09); - border-radius: 10px; - padding: 0 20px; - display: flex; - align-items: center; - justify-content: center; - height: 88px; /* 고정 높이 */ - transition: border-color .2s, background .2s; -} - - -.partner-card:hover { - border-color: rgba(26,31,94,.2); - background: #fafbff; -} - -.partner-card img { - width: 120px; /* 고정 너비 */ - height: 48px; /* 고정 높이 */ - object-fit: contain; -} -/* CTA */ -.partners-cta { - background: var(--color-primary); - border-radius: 16px; - padding: 32px 40px; - display: flex; - align-items: center; - justify-content: space-between; - gap: 24px; - flex-wrap: wrap; -} - -.partners-cta-label { - font-size: 11px; - font-weight: 700; - letter-spacing: .12em; - text-transform: uppercase; - color: rgba(255,255,255,.5); - margin-bottom: 8px; -} - -.partners-cta-title { - font-size: clamp(18px, 2vw, 24px); - font-weight: 800; - color: #fff; - letter-spacing: -.03em; - line-height: 1.3; -} - -.partners-cta-btn { - display: inline-flex; - align-items: center; - height: 48px; - padding: 0 28px; - background: #fff; - border-radius: 999px; - font-size: 14px; - font-weight: 700; - color: var(--color-primary); - text-decoration: none; - white-space: nowrap; - flex-shrink: 0; - transition: opacity .2s; -} - -.partners-cta-btn:hover { - opacity: .88; -} - -/* 반응형 */ -@media (max-width: 1280px) { - .partners-wrap { padding: 48px 48px; } -} -@media (max-width: 1024px) { - .partners-wrap { padding: 40px 32px; } - .partners-grid-8 { grid-template-columns: repeat(4, 1fr); } - .partners-grid-15 { grid-template-columns: repeat(4, 1fr); } -} +/* ── Partners Page ── */ +.partners-wrap { max-width: 1200px; margin: 0 auto; padding: 0 2.5rem 6rem; } +.partners-title-block { padding: 5rem 0 3.5rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; } +.partners-title-main { font-size: clamp(18px, 2vw, 24px); font-weight: 700; color: #333; letter-spacing: -0.01em; line-height: 1.5; } +.partners-title-main em { font-style: normal; font-weight: 700; color: #333; background: none; } +.partners-title-desc { font-size: 13px; color: #bbb; line-height: 1.8; letter-spacing: 0.02em; } +.partners-section-row { display: grid; grid-template-columns: 180px 1fr; gap: 3rem; align-items: start; padding: 4rem 0; border-top: 1px solid #e8e8e8; } +.partners-sidebar { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; position: sticky; top: 100px; } +.partners-eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: #aaa; } +.partners-heading { font-size: 22px; font-weight: 600; color: #111; letter-spacing: -0.03em; line-height: 1.2; margin-top: 4px; } +.partners-count { font-size: 12px; color: #bbb; margin-top: 6px; } +.partners-grid { display: grid; border: 1px solid #e8e8e8; border-radius: 16px; overflow: hidden; } +.partners-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } +.partners-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } +.partners-logo-cell { display: flex; align-items: center; justify-content: center; padding: 1.75rem 1.5rem; min-height: 100px; border-right: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8; transition: background 0.15s ease; } +.partners-grid--4 .partners-logo-cell:nth-child(4n) { border-right: none; } +.partners-grid--4 .partners-logo-cell:nth-last-child(-n+4) { border-bottom: none; } +.partners-grid--5 .partners-logo-cell:nth-child(5n) { border-right: none; } +.partners-grid--5 .partners-logo-cell:nth-last-child(-n+5) { border-bottom: none; } +.partners-logo-cell img { max-width: 75%; max-height: 28px; width: auto; height: auto; object-fit: contain; } +.partners-cta { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 4rem 0 0; border-top: 1px solid #e8e8e8; } +.partners-cta-left { display: flex; flex-direction: column; gap: 8px; } +.partners-cta-title { font-size: 22px; font-weight: 600; color: #111; letter-spacing: -0.03em; line-height: 1.4; } +.partners-cta-btn { display: inline-flex; align-items: center; gap: 8px; padding: 0.85rem 2rem; border: 1px solid #222; border-radius: 100px; font-size: 14px; font-weight: 500; color: #111; background: transparent; text-decoration: none; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease; flex-shrink: 0; } +.partners-cta-btn:hover { background: #111; color: #fff; } @media (max-width: 768px) { - .partners-wrap { padding: 32px 20px; } - .partners-grid-8 { grid-template-columns: repeat(2, 1fr); } - .partners-grid-15 { grid-template-columns: repeat(3, 1fr); } -} -@media (max-width: 480px) { - .partners-grid-15 { grid-template-columns: repeat(2, 1fr); } +.partners-wrap { padding: 0 1.25rem 4rem; } +.partners-title-block { padding: 3rem 0 2rem; text-align: left; align-items: flex-start; } +.partners-section-row { grid-template-columns: 1fr; gap: 1.5rem; padding: 2.5rem 0; } +.partners-sidebar { position: static; flex-direction: row; align-items: baseline; gap: 12px; } +.partners-heading { font-size: 18px; } +.partners-heading br { display: none; } +.partners-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } +.partners-grid--4 .partners-logo-cell:nth-child(4n) { border-right: 1px solid #e8e8e8; } +.partners-grid--4 .partners-logo-cell:nth-last-child(-n+4) { border-bottom: 1px solid #e8e8e8; } +.partners-grid--4 .partners-logo-cell:nth-child(2n) { border-right: none; } +.partners-grid--4 .partners-logo-cell:nth-last-child(-n+2) { border-bottom: none; } +.partners-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } +.partners-grid--5 .partners-logo-cell:nth-child(5n) { border-right: 1px solid #e8e8e8; } +.partners-grid--5 .partners-logo-cell:nth-last-child(-n+5) { border-bottom: 1px solid #e8e8e8; } +.partners-grid--5 .partners-logo-cell:nth-child(3n) { border-right: none; } +.partners-grid--5 .partners-logo-cell:nth-last-child(-n+3) { border-bottom: none; } +.partners-cta { flex-direction: column; align-items: flex-start; gap: 1.5rem; } } \ No newline at end of file diff --git a/src/pages/company/PartnersPage.jsx b/src/pages/company/PartnersPage.jsx index f359600..d61e25b 100644 --- a/src/pages/company/PartnersPage.jsx +++ b/src/pages/company/PartnersPage.jsx @@ -43,21 +43,9 @@ const PARTNERS = [ "22", ]; -function ClientCard({ logo, basePath }) { +function LogoCard({ logo, basePath }) { return ( -
-
{
const ctx = gsap.context(() => {
gsap.fromTo(
- ".partner-card",
- { opacity: 0, y: 20, scale: 0.97 },
+ ".partners-logo-cell",
+ { opacity: 0, y: 16 },
{
opacity: 1,
y: 0,
- scale: 1,
- duration: 0.6,
- stagger: { each: 0.04, from: "start" },
+ duration: 0.5,
+ stagger: { each: 0.03, from: "start" },
ease: "power3.out",
- scrollTrigger: { trigger: ".partners-wrap", start: "top 80%" },
+ scrollTrigger: {
+ trigger: ".partners-wrap",
+ start: "top 80%",
+ },
},
);
- }, editorialRef);
+ }, wrapRef);
return () => ctx.revert();
}, []);
@@ -106,45 +96,68 @@ export default function PartnersPage() {
navItems={COMPANY_NAV}
/>
- + 공공·항공·국방 분야의 주요 기관 및 기술 협력사와 함께 더 나은 미래를 + 만들어갑니다. +
+Clients
-Clients
+{CLIENTS.length}개사
+Partners
-Partners
+{PARTNERS.length}개사
+Become a Partner
-Become a Partner
+
팔네트웍스와 함께 성장할
파트너를 찾습니다
-
+