Browse Source

feat : cta 백그라운드 이미지 추가

remotes/origin/main
이시연 4 weeks ago
parent
commit
d09964192b
  1. BIN
      public/images/ctabackground.png
  2. 3
      src/css/common.css
  3. 46
      src/pages/company/PartnersPage.jsx

BIN
public/images/ctabackground.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 MiB

3
src/css/common.css

@ -113,7 +113,8 @@ body{overflow-x:hidden;}
.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-section-row { display: grid; grid-template-columns: 180px 1fr; gap: 3rem; align-items: start; padding: 80px 0; border-top: 1px solid #e8e8e8; }
.partners-section-row:first-of-type { border-top: none; }
.partners-sidebar { display: flex; flex-direction: column; gap: 6px; padding-top: 4px;}
.partners-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: #888; }
.partners-heading { font-size: 32px; font-weight: 700; color: #111; letter-spacing: -0.04em; line-height: 1.15; margin-top: 6px; }

46
src/pages/company/PartnersPage.jsx

@ -2,6 +2,7 @@ import { useEffect, useRef } from "react";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { motion } from "framer-motion";
import { Link } from "react-router-dom";
import SubHero from "../../components/SubHero";
import useFadeIn from "../../hooks/useFadeIn";
@ -144,6 +145,19 @@ export default function PartnersPage() {
오랜 신뢰, 깊은 협력 함께하는 기관과 파트너
</em>
</motion.div>
<motion.div
initial={{ scaleY: 0, opacity: 0 }}
whileInView={{ scaleY: 1, opacity: 1 }}
viewport={{ once: true }}
transition={{ duration: 0.6, ease: [0.4, 0, 0.2, 1], delay: 0.3 }}
style={{
width: "1px",
height: "48px",
background: "#ddd",
margin: "1rem auto 1rem",
transformOrigin: "top",
}}
/>
<div className="partners-wrap" ref={wrapRef}>
{/* 주요 고객사 */}
@ -186,17 +200,36 @@ export default function PartnersPage() {
<section className="sub-section sub-fade-in">
<div
style={{
position: "relative",
display: "flex",
alignItems: "center",
justifyContent: "space-between",
flexWrap: "wrap",
gap: "24px",
padding: "48px 56px",
background: "var(--color-primary)",
borderRadius: "24px",
overflow: "hidden",
background: "var(--color-primary)",
}}
>
<div>
{/* 배경 이미지 — 오른쪽에만 페이드인 */}
<div
style={{
position: "absolute",
inset: 0,
backgroundImage: `url(${basePath}images/ctabackground.png)`,
backgroundSize: "75%",
backgroundPosition: "right 100%",
opacity: 0.28,
maskImage:
"linear-gradient(to right, transparent 20%, black 70%)",
WebkitMaskImage:
"linear-gradient(to right, transparent 20%, black 70%)",
}}
/>
{/* 콘텐츠 */}
<div style={{ position: "relative", zIndex: 1 }}>
<p
style={{
margin: "0 0 8px",
@ -224,9 +257,12 @@ export default function PartnersPage() {
파트너를 찾습니다
</h3>
</div>
<a
href="/contact/inquiry"
<Link
to="/contact/inquiry"
style={{
position: "relative",
zIndex: 1,
display: "inline-flex",
alignItems: "center",
height: "52px",
@ -243,7 +279,7 @@ export default function PartnersPage() {
}}
>
협력 문의하기
</a>
</Link>
</div>
</section>
</div>

Loading…
Cancel
Save