feat : 솔루션 추가

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 (
+    <section className="main-solution-section" ref={sectionRef}>
+      <div className="main-solution-bg-circle" />
+
+      <div className="main-solution-inner">
+        <div className="main-solution-head" ref={headRef}>
+          <p className="main-solution-eyebrow">PAL SOLUTION</p>
+          <h2 className="main-solution-title">
+            미래 항공
+            <br />
+            통합 운영 시스템
+          </h2>
+          <p className="main-solution-desc">
+            드론과 도심항공교통의 운항 흐름을 하나의 플랫폼 안에서 연결하고,
+            실시간 관제와 데이터 기반 운영 환경을 제공합니다.
+          </p>
+        </div>
+
+        <div className="main-solution-grid">
+          {[0, 1, 2, 3].map((_, index) => (
+            <article
+              className="main-solution-card"
+              key={index}
+              ref={(el) => {
+                cardsRef.current[index] = el;
+              }}
+            />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default MainSolution;

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;

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;}}

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() {
       <MainVisual />
       <MainUtm />
       <MainUam />
+      <MainSolution />
     </main>
   );
 }