feat : 소개 페이지 아이콘 및 이미지 추가

src/css/common.css

@@ -452,8 +452,8 @@ body{overflow-x:hidden;}
 /*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);}
-.about-section-label { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: #8895C0; font-weight: 500; margin-bottom: 20px; display: flex; align-items: center; gap: 8px; }
+.about-section-label { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: #8895c0; font-weight: 500; margin-bottom: 20px; display: flex; align-items: center; gap: 8px; }
-.about-section-label::before { content: ''; display: block; width: 20px; height: 2px; background: #1E2A5E; }
+.about-section-label::before { content: ''; display: block; width: 20px; height: 2px; background: #1e2a5e; }
 .about-section-label--light { color: rgba(255,255,255,0.4); }
 .about-section-label--light::before { background: rgba(255,255,255,0.4); }
 
@@ -463,20 +463,20 @@ body{overflow-x:hidden;}
 
 .about-company-text { flex: 1; min-width: 420px; }
 
-.about-company-heading { font-size: 42px; font-weight: 700; line-height: 1.5; color: #1A1A2E; margin-bottom: 32px; }
+.about-company-heading { font-size: 42px; font-weight: 700; line-height: 1.5; color: #1a1a2e; margin-bottom: 32px; }
-.about-company-heading .blue { color: #1E2A5E; }
+.about-company-heading .blue { color: #1e2a5e; }
 
 .about-company-body { font-size: 16px; color: #555; line-height: 2.1; margin-bottom: 20px; }
 
 .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 { 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; display: block; }
+.about-img-main-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: 30% center; display: block; filter: brightness(0.85); }
 
-.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 { 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; }
+.about-img-side-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; object-position: 90% center; filter: brightness(0.85);}
 
-.about-tech-section { background: #0D1628; padding: 100px 0 120px; }
+.about-tech-section { background: #0d1628; padding: 100px 0 120px; }
 
 .about-stats-row { display: flex; gap: 0; border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 72px; margin-bottom: 80px; }
 
@@ -509,67 +509,68 @@ body{overflow-x:hidden;}
 
 .about-tech-card-desc { font-size: 13px; color: rgba(255,255,255,0.45); line-height: 1.8; }
 
-.about-meaning-section { padding: 0 0 120px; border-bottom: 1px solid #F0F0F0; }
+.about-meaning-section { padding: 0 0 120px; border-bottom: 1px solid #f0f0f0; }
 
-.about-meaning-title { font-size: 32px; font-weight: 700; color: #1A1A2E; margin-bottom: 36px; }
+.about-meaning-title { font-size: 32px; font-weight: 700; color: #1a1a2e; margin-bottom: 36px; }
 
 .about-meaning-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
-.about-meaning-card { border: 1px solid #E8EAF3; border-radius: 16px; padding: 36px 32px; position: relative; overflow: hidden; }
+.about-meaning-card { border: 1px solid #e8eaf3; border-radius: 16px; padding: 36px 32px; position: relative; overflow: hidden; }
-.about-meaning-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: #1E2A5E; }
+.about-meaning-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: #1e2a5e; }
-.about-meaning-card-keyword { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: #1E2A5E; background: #EEF0F8; border-radius: 4px; padding: 4px 10px; margin-bottom: 20px; }
+.about-meaning-card-keyword { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: #1e2a5e; background: #eef0f8; border-radius: 4px; padding: 4px 10px; margin-bottom: 20px; }
 
-.about-meaning-card-icon { width: 40px; height: 40px; border-radius: 8px; background: #EEF0F8; display: flex; align-items: center; justify-content: center; color: #1E2A5E; font-size: 20px; margin-bottom: 14px; }
+.about-meaning-card-icon { width: 40px; height: 40px; border-radius: 8px; background: #eef0f8; display: flex; align-items: center; justify-content: center; color: #1e2a5e; font-size: 20px; margin-bottom: 14px; }
 
-.about-meaning-card-title { font-size: 18px; font-weight: 700; color: #1A1A2E; margin-bottom: 12px; }
+.about-meaning-card-title { font-size: 18px; font-weight: 700; color: #1a1a2e; margin-bottom: 12px; }
 
 .about-meaning-card-desc { font-size: 15px; color: #777; line-height: 1.9; }
-.about-mission-section { padding: 100px 0 100px; border-top: 1px solid #F0F0F0; }
+.about-mission-section { padding: 100px 0 100px; border-top: 1px solid #f0f0f0; }
 
 .about-mission-inner { display: flex; gap: 100px; align-items: flex-start; }
 
 .about-mission-left { flex: 1; min-width: 360px; padding-top: 8px; }
 
-.about-mission-title { font-size: 30px; font-weight: 700; color: #1A1A2E; line-height: 1.5; margin-bottom: 24px; }
+.about-mission-title { font-size: 30px; font-weight: 700; color: #1a1a2e; line-height: 1.5; margin-bottom: 24px; }
 
 .about-mission-desc { font-size: 15px; color: #555; line-height: 2.2; }
 
 .about-mission-right { flex: 1; display: flex; flex-direction: column; gap: 0; }
 
-.about-mission-item { display: flex; gap: 24px; align-items: flex-start; padding: 32px 0; border-bottom: 1px solid #F0F0F0; }
+.about-mission-item { display: flex; gap: 24px; align-items: flex-start; padding: 32px 0; border-bottom: 1px solid #f0f0f0; }
 .about-mission-item:first-child { border-top: none; }
 .about-mission-item:last-child { border-bottom: none; }
-.about-mission-item-num { font-size: 13px; font-weight: 700; color: #D0D4E8; letter-spacing: 0.05em; flex-shrink: 0; padding-top: 2px; width: 28px; }
+.about-mission-item-num { font-size: 13px; font-weight: 700; color: #d0d4e8; letter-spacing: 0.05em; flex-shrink: 0; padding-top: 2px; width: 28px; }
 
 .about-mission-item-body { flex: 1; }
 
 .about-mission-item-top { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
 
-.about-mission-item-title { font-size: 18px; font-weight: 700; color: #1A1A2E; }
+.about-mission-item-title { font-size: 18px; font-weight: 700; color: #1a1a2e; }
 
-.about-mission-item-keyword { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; color: #1E2A5E; background: #EEF0F8; border-radius: 4px; padding: 3px 8px; }
+.about-mission-item-keyword { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; color: #1e2a5e; background: #eef0f8; border-radius: 4px; padding: 3px 8px; }
 
 .about-mission-item-desc { font-size: 14px; color: #777; line-height: 1.8; }
 
-.about-cert-section { padding: 100px 0 100px; border-top: 1px solid #F0F0F0; }
+.about-cert-section { padding: 100px 0 100px; border-top: 1px solid #f0f0f0; }
 
-.about-cert-title { font-size: 32px; font-weight: 700; color: #1A1A2E; margin-bottom: 28px; }
+.about-cert-title { font-size: 32px; font-weight: 700; color: #1a1a2e; margin-bottom: 28px; }
 
-.about-cert-patents { background: #F8F9FC; border-radius: 12px; padding: 20px 24px; margin-bottom: 48px; }
+.about-cert-patents { background: #f8f9fc; border-radius: 12px; padding: 20px 24px; margin-bottom: 48px; }
 
 .about-cert-patents-desc { font-size: 14px; color: #666; line-height: 1.9; }
 .about-cert-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
 
-.about-cert-card { border: 1px solid #E8EAF3; border-radius: 14px; padding: 28px 24px; display: flex; flex-direction: column; gap: 10px; }
+.about-cert-card { border: 1px solid #e8eaf3; border-radius: 14px; padding: 28px 24px; display: flex; flex-direction: column; gap: 10px; }
 
-.about-cert-card-icon { width: 48px; height: 48px; border-radius: 12px; background: #EEF0F8; margin-bottom: 8px; }
+.about-cert-card-icon { width: 48px; height: 48px; border-radius: 12px; background: #eef0f8; margin-bottom: 8px; padding: 8px; }
 
-.about-cert-card-year { font-size: 11px; font-weight: 600; color: #8895C0; letter-spacing: 0.05em; }
+.about-cert-card-icon img { width: 100%; height: 100%; object-fit: contain; }
+.about-cert-card-year { font-size: 11px; font-weight: 600; color: #8895c0; letter-spacing: 0.05em; }
 
-.about-cert-card-title { font-size: 14px; font-weight: 700; color: #1A1A2E; line-height: 1.4; }
+.about-cert-card-title { font-size: 14px; font-weight: 700; color: #1a1a2e; line-height: 1.4; }
 
 .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-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-inner { position: relative; z-index: 1; max-width: 600px; margin: 0 auto; }
@@ -582,43 +583,42 @@ body{overflow-x:hidden;}
 
 .about-cta-btn { display: inline-flex; align-items: center; padding: 14px 32px; border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none; transition: all 0.2s; }
 
-.about-cta-btn--primary { background: #fff; color: #0D1628; }
+.about-cta-btn--primary { background: #fff; color: #0d1628; }
-.about-cta-btn--primary:hover { background: #EEF0F8; }
+.about-cta-btn--primary:hover { background: #eef0f8; }
 
 .about-cta-btn--outline { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.3); }
 .about-cta-btn--outline:hover { border-color: #fff; background: rgba(255,255,255,0.05); }
 
 @media (max-width: 768px) {
-  .about-img-side-wrap { display: none; }
+  .about-img-side-wrap { display: none; }
-  .about-company-section { padding: 64px 0 80px; }
+  .about-company-section { padding: 64px 0 80px; }
-  .about-meaning-section { padding: 0 0 80px; }
+  .about-meaning-section { padding: 0 0 80px; }
-  .about-mission-section { padding: 64px 0 64px; }
+  .about-mission-section { padding: 64px 0 64px; }
-  .about-cert-section { padding: 64px 0 80px; }
+  .about-cert-section { padding: 64px 0 80px; }
-  .about-meaning-cards { grid-template-columns: 1fr; }
+  .about-meaning-cards { grid-template-columns: 1fr; }
-  .about-mission-inner { flex-direction: column; gap: 48px; }
+  .about-mission-inner { flex-direction: column; gap: 48px; }
-  .about-mission-left { min-width: unset; }
+  .about-mission-left { min-width: unset; }
-  .about-cert-cards { grid-template-columns: 1fr 1fr; }
+  .about-cert-cards { grid-template-columns: 1fr 1fr; }
-  .about-slogan-line { font-size: 36px; }
+  .about-slogan-line { font-size: 36px; }
-  .about-company-inner { flex-direction: column; }
+  .about-company-inner { flex-direction: column; }
-  .about-company-text { min-width: unset; }
+  .about-company-text { min-width: unset; }
-  .about-img-group { width: 100%; max-width: unset; }
+  .about-img-group { width: 100%; max-width: unset; }
-  .about-stats-row { flex-direction: column; gap: 32px; }
+  .about-stats-row { flex-direction: column; gap: 32px; }
-  .about-stat-item { border-right: none; padding: 0 0 32px; border-bottom: 1px solid rgba(255,255,255,0.08); }
+  .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-stat-item:last-child { border-bottom: none; padding-bottom: 0; }
-  .about-tech-cards { grid-template-columns: 1fr 1fr; }
+  .about-tech-cards { grid-template-columns: 1fr 1fr; }
-  .about-cta-section { padding: 80px 24px; }
+  .about-cta-section { padding: 80px 24px; }
-  .about-cta-title { font-size: 28px; }
+  .about-cta-title { font-size: 28px; }
-  .about-cta-buttons { flex-direction: column; align-items: center; }
+  .about-cta-buttons { flex-direction: column; align-items: center; }
 }
 
 @keyframes about-cta-move {
-  0% { transform: translate(0%, 0%); }
+  0% { transform: translate(0%, 0%); }
-  50% { transform: translate(-10%, 8%); }
+  50% { transform: translate(-10%, 8%); }
-  100% { transform: translate(10%, -8%); }
+  100% { transform: translate(10%, -8%); }
 }
 
 
-
 /* ════════════════════════════════
    FlightControlPage — common.css 추가분
 ════════════════════════════════ */

src/pages/company/AboutPage.jsx

@@ -5,7 +5,6 @@ import FloatingKeywords from "../../components/FloatingKeywords";
 import { useEffect, useRef } from "react";
 import { motion } from "framer-motion";
 import { Link } from "react-router-dom";
-
 gsap.registerPlugin(ScrollTrigger);
 
 const heroRight = <FloatingKeywords />;
@@ -47,6 +46,8 @@ const TECH_CARDS = [
 ];
 
 export default function AboutPage() {
+  const basePath = import.meta.env.BASE_URL;
+
   const ref = useRef(null);
   const meaningCardsRef = useRef([]);
   const missionItemsRef = useRef([]);
@@ -242,8 +243,18 @@ export default function AboutPage() {
               </div>
 
               <div className="about-img-group">
-                <div className="about-img-main-wrap" ref={imgMainRef} />
+                <div className="about-img-main-wrap" ref={imgMainRef}>
-                <div className="about-img-side-wrap" ref={imgSideRef} />
+                  <img
+                    src={`${basePath}images/aboutImg1.png`}
+                    alt="PAL Networks 소개"
+                  />{" "}
+                </div>
+                <div className="about-img-side-wrap" ref={imgSideRef}>
+                  <img
+                    src={`${basePath}images/aboutImg1.png`}
+                    alt="PAL Networks 소개"
+                  />
+                </div>
               </div>
             </div>
           </section>
@@ -388,7 +399,10 @@ export default function AboutPage() {
                   ref={(el) => (certCardsRef.current[i] = el)}
                 >
                   <div className="about-cert-card-icon">
-                    {/* 아이콘 자리 */}
+                    <img
+                      src={`${basePath}images/aboutIcon${i + 1}.png`}
+                      alt=""
+                    />
                   </div>
                   <span className="about-cert-card-year">{item.year}</span>
                   <h4 className="about-cert-card-title">{item.title}</h4>