feat : 회사소개 수정사항 수정

src/components/TopButton.jsx

@@ -0,0 +1,24 @@
+import { useState, useEffect } from "react";
+
+export default function TopButton() {
+  const [showTop, setShowTop] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => setShowTop(window.scrollY > 400);
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+
+  return (
+    <>
+      {showTop && (
+        <button
+          className="top-btn"
+          onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
+        >
+          ↑
+        </button>
+      )}
+    </>
+  );
+}

src/css/common.css

@@ -449,6 +449,19 @@ body{overflow-x:hidden;}
 }
 
 
+/* top btn */
+
+.top-btn { position: fixed; bottom: 32px; right: 32px; width: 48px; height: 48px; border-radius: 50%; background: #1e2a5e; color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; box-shadow: 0 4px 20px rgba(30,42,94,0.4); transition: all 0.2s; z-index: 9999; animation: top-btn-pulse 2s ease-in-out infinite; }
+.top-btn:hover { background: #2a3a7e; transform: translateY(-4px); animation: none; box-shadow: 0 8px 24px rgba(30,42,94,0.5); }
+
+@media (max-width: 768px) {
+  .top-btn { bottom: 20px; right: 20px; width: 40px; height: 40px; font-size: 14px; }
+}
+@keyframes top-btn-pulse {
+  0% { box-shadow: 0 4px 20px rgba(30,42,94,0.4), 0 0 0 0 rgba(30,42,94,0.3); }
+  70% { box-shadow: 0 4px 20px rgba(30,42,94,0.4), 0 0 0 12px rgba(30,42,94,0); }
+  100% { box-shadow: 0 4px 20px rgba(30,42,94,0.4), 0 0 0 0 rgba(30,42,94,0); }
+}
 /*ab about page*/
 .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);}
@@ -471,10 +484,10 @@ body{overflow-x:hidden;}
 .about-img-group { flex-shrink: 0; width: 42vw; max-width: 580px; display: flex; gap: 16px; align-items: flex-start; }
 
 .about-img-main-wrap { flex: 1; overflow: hidden; height: 480px; background: #f4f5fb; will-change: transform, border-radius; }
-.about-img-main-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: 30% center; display: block; filter: brightness(0.85); }
+.about-img-main-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: 20% center; display: block; }
 
 .about-img-side-wrap { width: 140px; flex-shrink: 0; overflow: hidden; height: 400px; margin-top: 120px; background: #eef0f8; will-change: transform, border-radius; }
-.about-img-side-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; object-position: 90% center; filter: brightness(0.85);}
+.about-img-side-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; object-position: 100% center; }
 
 .about-tech-section { background: #0d1628; padding: 100px 0 120px; }
 
@@ -571,9 +584,11 @@ body{overflow-x:hidden;}
 .about-cert-card-desc { font-size: 13px; color: #888; line-height: 1.7; }
 
 .about-cta-section { position: relative; padding: 120px 48px; text-align: center; width: 100%; overflow: hidden; background: #0d1628; }
-.about-cta-bg { position: absolute; inset: -50%; width: 200%; height: 200%; background: radial-gradient(ellipse at 30% 50%, rgba(55,138,221,0.35) 0%, transparent 50%), radial-gradient(ellipse at 70% 50%, rgba(99,51,180,0.3) 0%, transparent 50%); animation: about-cta-move 8s ease-in-out infinite alternate; will-change: transform; }
+.about-cta-section::after { content: ''; position: absolute; inset: 0; background: rgba(13, 22, 40, 0.6); z-index: 1; }
 
-.about-cta-inner { position: relative; z-index: 1; max-width: 600px; margin: 0 auto; }
+.about-cta-bg { position: absolute; inset: -50%; width: 200%; height: 200%; background: radial-gradient(ellipse at 30% 50%, rgba(55,138,221,0.35) 0%, transparent 50%), radial-gradient(ellipse at 70% 50%, rgba(99,51,180,0.3) 0%, transparent 50%); animation: about-cta-move 8s ease-in-out infinite alternate; will-change: transform; z-index: 2; }
+.about-cta-img { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0.4; mix-blend-mode: normal; }
+.about-cta-inner { position: relative; z-index: 3; max-width: 600px; margin: 0 auto; }
 
 .about-cta-title { font-size: 42px; font-weight: 900; color: #fff; line-height: 1.3; letter-spacing: -0.02em; margin-top: 16px; margin-bottom: 24px; }
 
@@ -592,9 +607,19 @@ body{overflow-x:hidden;}
 @media (max-width: 768px) {
   .about-img-side-wrap { display: none; }
   .about-company-section { padding: 64px 0 80px; }
+  .about-company-heading { font-size: 26px; }
+  .about-company-body { font-size: 14px; }
   .about-meaning-section { padding: 0 0 80px; }
+  .about-meaning-title { font-size: 22px; }
+  .about-meaning-card-title { font-size: 15px; }
+  .about-meaning-card-desc { font-size: 13px; }
   .about-mission-section { padding: 64px 0 64px; }
+  .about-mission-title { font-size: 20px; }
+  .about-mission-desc { font-size: 13px; }
+  .about-mission-item-title { font-size: 15px; }
   .about-cert-section { padding: 64px 0 80px; }
+  .about-cert-title { font-size: 22px; }
+  .about-cert-patents-desc { font-size: 12px; }
   .about-meaning-cards { grid-template-columns: 1fr; }
   .about-mission-inner { flex-direction: column; gap: 48px; }
   .about-mission-left { min-width: unset; }
@@ -604,17 +629,20 @@ body{overflow-x:hidden;}
   .about-company-text { min-width: unset; }
   .about-img-group { width: 100%; max-width: unset; }
   .about-stats-row { flex-direction: column; gap: 32px; }
+  .about-stat-num { font-size: 36px; }
   .about-stat-item { border-right: none; padding: 0 0 32px; border-bottom: 1px solid rgba(255,255,255,0.08); }
   .about-stat-item:last-child { border-bottom: none; padding-bottom: 0; }
   .about-tech-cards { grid-template-columns: 1fr 1fr; }
+  .about-tech-heading { font-size: 26px; }
+  .about-tech-desc { font-size: 13px; }
+  .about-tech-card-title { font-size: 13px; }
   .about-cta-section { padding: 80px 24px; }
-  .about-cta-title { font-size: 28px; }
+  .about-cta-title { font-size: 26px; }
+  .about-cta-desc { font-size: 13px; }
   .about-cta-btn { width: 100%; max-width: 280px; justify-content: center; }
-
   .about-cta-buttons { flex-direction: column; align-items: center; width: 100%; }
-
+  .about-cta-img { background-position: 20% center; background-size: cover; }
 }
-
 @keyframes about-cta-move {
   0% { transform: translate(0%, 0%); }
   50% { transform: translate(-10%, 8%); }
@@ -622,6 +650,7 @@ body{overflow-x:hidden;}
 }
 
 
+
 /* ════════════════════════════════
    FlightControlPage — common.css 추가분
 ════════════════════════════════ */

src/pages/company/AboutPage.jsx

@@ -5,6 +5,7 @@ import FloatingKeywords from "../../components/FloatingKeywords";
 import { useEffect, useRef } from "react";
 import { motion } from "framer-motion";
 import { Link } from "react-router-dom";
+import TopButton from "../../components/TopButton";
 gsap.registerPlugin(ScrollTrigger);
 
 const heroRight = <FloatingKeywords />;
@@ -367,16 +368,6 @@ export default function AboutPage() {
 
             <div className="about-cert-cards">
               {[
-                {
-                  year: "2018. 12",
-                  title: "인천시 항공 유망 기업 인증",
-                  desc: "인천시 항공 유망기업으로 선정",
-                },
-                {
-                  year: "2020. 06",
-                  title: "인천 관광벤처 인증",
-                  desc: "인천 관광벤처 인증",
-                },
                 {
                   year: "2018. 04",
                   title: "관광 사업 등록증",
@@ -387,6 +378,17 @@ export default function AboutPage() {
                   title: "벤처기업 확인서",
                   desc: "벤처기업 인증",
                 },
+                {
+                  year: "2018. 12",
+                  title: "인천시 항공 유망 기업 인증",
+                  desc: "인천시 항공 유망기업으로 선정",
+                },
+                {
+                  year: "2020. 06",
+                  title: "인천 관광벤처 인증",
+                  desc: "인천 관광벤처 인증",
+                },
+
                 {
                   year: "2021. 03",
                   title: "KT 클라우드 총판",
@@ -416,11 +418,11 @@ export default function AboutPage() {
       {/* CTA */}
       <section className="about-cta-section">
         <div className="about-cta-bg" />
-
+        <div
+          className="about-cta-img"
+          style={{ backgroundImage: `url(${basePath}images/about_banner.png)` }}
+        />
         <div className="about-cta-inner">
-          <p className="about-section-label about-section-label--light">
-            Contact
-          </p>
           <h3 className="about-cta-title">
             PAL Networks와
             <br />
@@ -447,6 +449,9 @@ export default function AboutPage() {
           </div>
         </div>
       </section>
+
+      {/* top 버튼 */}
+      <TopButton />
     </article>
   );
 }