diff --git a/src/components/main/MainSolution.jsx b/src/components/main/MainSolution.jsx new file mode 100644 index 0000000..5dbad03 --- /dev/null +++ b/src/components/main/MainSolution.jsx @@ -0,0 +1,95 @@ +import { useEffect, useRef } from "react"; +import { gsap } from "gsap"; +import { ScrollTrigger } from "gsap/ScrollTrigger"; + +gsap.registerPlugin(ScrollTrigger); + +function MainSolution() { + const sectionRef = useRef(null); + const headRef = useRef(null); + const cardsRef = useRef([]); + + useEffect(() => { + const ctx = gsap.context(() => { + gsap.set(headRef.current, { opacity: 0, y: 42 }); + gsap.set(cardsRef.current, { opacity: 0, y: 64, scale: 0.96 }); + + gsap + .timeline({ + scrollTrigger: { + trigger: sectionRef.current, + start: "top 72%", + end: "top 28%", + scrub: 1, + }, + }) + .to(headRef.current, { + opacity: 1, + y: 0, + duration: 0.8, + ease: "power2.out", + }) + .to( + cardsRef.current, + { + opacity: 1, + y: 0, + scale: 1, + stagger: 0.12, + duration: 0.9, + ease: "power2.out", + }, + "-=0.35", + ); + + gsap.to(".main-solution-bg-circle", { + y: 120, + scale: 1.08, + ease: "none", + scrollTrigger: { + trigger: sectionRef.current, + start: "top bottom", + end: "bottom top", + scrub: 1, + }, + }); + }, sectionRef); + + return () => ctx.revert(); + }, []); + + return ( +
+
+ +
+
+

PAL SOLUTION

+

+ 미래 항공 +
+ 통합 운영 시스템 +

+

+ 드론과 도심항공교통의 운항 흐름을 하나의 플랫폼 안에서 연결하고, + 실시간 관제와 데이터 기반 운영 환경을 제공합니다. +

+
+ +
+ {[0, 1, 2, 3].map((_, index) => ( +
{ + cardsRef.current[index] = el; + }} + /> + ))} +
+
+
+ ); +} + +export default MainSolution; diff --git a/src/components/main/MainUam.jsx b/src/components/main/MainUam.jsx index 8985766..039cb2e 100644 --- a/src/components/main/MainUam.jsx +++ b/src/components/main/MainUam.jsx @@ -4,7 +4,7 @@ import { ScrollTrigger } from "gsap/ScrollTrigger"; import uamImg from "../../../public/images/uam-silver.png"; gsap.registerPlugin(ScrollTrigger); -function MainAirspaceTransition() { +function MainUam() { const sectionRef = useRef(null); const leftRef = useRef(null); const rightRef = useRef(null); @@ -145,4 +145,4 @@ function MainAirspaceTransition() { ); } -export default MainAirspaceTransition; +export default MainUam; diff --git a/src/css/main.css b/src/css/main.css index 528464f..80c6204 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -245,3 +245,33 @@ body{overflow-x:hidden;} @keyframes uamShine{0%,48%{transform:translateX(-120%);opacity:0;}58%{opacity:.75;}76%,100%{transform:translateX(120%);opacity:0;}} @keyframes float-uam{0%{transform:translateY(0px);}48%{transform:translateY(-1px);}100%{transform:translateY(0px);}} + +/* solution */ +.main-solution-section{position:relative;height:100dvh;min-height:100dvh;overflow:hidden;padding:120px 8vw 110px;background:linear-gradient(180deg,#ffffff 0%,#f7f9ff 52%,#ffffff 100%);} +.main-solution-section::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 8% 10%,rgba(58,64,129,.045),transparent 30%),radial-gradient(circle at 86% 76%,rgba(112,180,255,.08),transparent 34%);pointer-events:none;} + +.main-solution-inner{position:relative;z-index:2;max-width:1440px;margin:0 auto;} + +.main-solution-arrow{width:42px;height:42px;margin:0 auto 46px;display:flex;align-items:center;justify-content:center;font-size:34px;line-height:1;color:#3a4081;opacity:.82;} + +.main-solution-head{max-width:760px;margin-bottom:54px;will-change:transform,opacity;} + +.main-solution-eyebrow{margin:0 0 16px;font-size:12px;font-weight:800;letter-spacing:.24em;color:#3a4081;} + +.main-solution-title{margin:0;font-size:clamp(42px,5vw,76px);font-weight:800;line-height:1.02;letter-spacing:-.07em;color:#10142b;} + +.main-solution-desc{margin:24px 0 0;max-width:620px;font-size:17px;line-height:1.8;font-weight:500;color:rgba(16,20,43,.62);word-break:keep-all;} + +.main-solution-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;} + +.main-solution-card{position:relative;min-height:250px;padding:28px 26px;border-radius:28px;background:rgba(255,255,255,.78);border:1px solid rgba(58,64,129,.1);box-shadow:0 24px 70px rgba(58,64,129,.1);backdrop-filter:blur(18px);transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;will-change:transform,opacity;} + +.main-solution-card::before{content:"";position:absolute;left:26px;top:28px;width:58px;height:58px;border-radius:50%;background:linear-gradient(145deg,rgba(58,64,129,.12),rgba(112,180,255,.16));box-shadow:inset 0 0 0 1px rgba(58,64,129,.08);} + +.main-solution-card::after{content:"";position:absolute;left:26px;right:26px;bottom:30px;height:84px;border-radius:18px;background:linear-gradient(180deg,rgba(58,64,129,.075),rgba(58,64,129,.035));} + +.main-solution-card:hover{transform:translateY(-8px);box-shadow:0 34px 90px rgba(58,64,129,.16);border-color:rgba(58,64,129,.2);} + +@media (max-width:1024px){.main-solution-section{padding:110px 6vw 96px;}.main-solution-bg-circle{right:-32vw;top:-28vw;width:90vw;height:90vw;}.main-solution-grid{grid-template-columns:repeat(2,1fr);}.main-solution-card{min-height:220px;}} + +@media (max-width:768px){.main-solution-section{padding:88px 6vw 80px;}.main-solution-bg-circle{right:-48vw;top:-30vw;width:110vw;height:110vw;opacity:.88;}.main-solution-arrow{margin-bottom:34px;font-size:30px;}.main-solution-head{margin-bottom:38px;}.main-solution-title{font-size:clamp(36px,10vw,54px);line-height:1.02;}.main-solution-desc{font-size:14px;line-height:1.75;}.main-solution-grid{grid-template-columns:1fr;gap:14px;}.main-solution-card{min-height:190px;padding:24px 22px;border-radius:24px;}.main-solution-card::before{left:22px;top:24px;width:52px;height:52px;}.main-solution-card::after{left:22px;right:22px;bottom:24px;height:72px;}} \ No newline at end of file diff --git a/src/pages/MainPage.jsx b/src/pages/MainPage.jsx index 852d254..e98fb28 100644 --- a/src/pages/MainPage.jsx +++ b/src/pages/MainPage.jsx @@ -1,6 +1,7 @@ import MainVisual from "../components/main/MainVisual"; import MainUtm from "../components/main/MainUtm"; import MainUam from "../components/main/MainUam"; +import MainSolution from "../components/main/MainSolution"; function MainPage() { return ( @@ -8,6 +9,7 @@ function MainPage() { + ); }