palnetworks
/
pal-hom-2026
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

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

remotes/origin/main
이시연 4 weeks ago
parent
0204d1837a
commit
dabd7f0c90
9 changed files with 74 additions and 60 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      public/images/aboutIcon1.png
  2. BIN
      public/images/aboutIcon2.png
  3. BIN
      public/images/aboutIcon3.png
  4. BIN
      public/images/aboutIcon4.png
  5. BIN
      public/images/aboutIcon5.png
  6. BIN
      public/images/aboutImg1.png
  7. BIN
      public/images/aboutImg2.png
  8. 112
      src/css/common.css
  9. 22
      src/pages/company/AboutPage.jsx

BIN
public/images/aboutIcon1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
public/images/aboutIcon2.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.3 KiB

BIN
public/images/aboutIcon3.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
public/images/aboutIcon4.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
public/images/aboutIcon5.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
public/images/aboutImg1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 MiB

BIN
public/images/aboutImg2.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

112
src/css/common.css
Unescape View File

@ -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::before { content: ''; display: block; width: 20px; height: 2px; background: #1E2A5E; }
.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--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 .blue { color: #1E2A5E; }
.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-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 img { width: 100%; height: 100%; object-fit: cover; display: block; }
.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-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 { 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-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::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 { 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-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:hover { background: #EEF0F8; }
.about-cta-btn--primary { background: #fff; color: #0d1628; }
.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-company-section { padding: 64px 0 80px; }
  .about-meaning-section { padding: 0 0 80px; }
  .about-mission-section { padding: 64px 0 64px; }
  .about-cert-section { padding: 64px 0 80px; }
  .about-meaning-cards { grid-template-columns: 1fr; }
  .about-mission-inner { flex-direction: column; gap: 48px; }
  .about-mission-left { min-width: unset; }
  .about-cert-cards { grid-template-columns: 1fr 1fr; }
  .about-slogan-line { font-size: 36px; }
  .about-company-inner { flex-direction: column; }
  .about-company-text { min-width: unset; }
  .about-img-group { width: 100%; max-width: unset; }
  .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:last-child { border-bottom: none; padding-bottom: 0; }
  .about-tech-cards { grid-template-columns: 1fr 1fr; }
  .about-cta-section { padding: 80px 24px; }
  .about-cta-title { font-size: 28px; }
  .about-cta-buttons { flex-direction: column; align-items: center; }
.about-img-side-wrap { display: none; }
.about-company-section { padding: 64px 0 80px; }
.about-meaning-section { padding: 0 0 80px; }
.about-mission-section { padding: 64px 0 64px; }
.about-cert-section { padding: 64px 0 80px; }
.about-meaning-cards { grid-template-columns: 1fr; }
.about-mission-inner { flex-direction: column; gap: 48px; }
.about-mission-left { min-width: unset; }
.about-cert-cards { grid-template-columns: 1fr 1fr; }
.about-slogan-line { font-size: 36px; }
.about-company-inner { flex-direction: column; }
.about-company-text { min-width: unset; }
.about-img-group { width: 100%; max-width: unset; }
.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:last-child { border-bottom: none; padding-bottom: 0; }
.about-tech-cards { grid-template-columns: 1fr 1fr; }
.about-cta-section { padding: 80px 24px; }
.about-cta-title { font-size: 28px; }
.about-cta-buttons { flex-direction: column; align-items: center; }
}
@keyframes about-cta-move {
  0% { transform: translate(0%, 0%); }
  50% { transform: translate(-10%, 8%); }
  100% { transform: translate(10%, -8%); }
0% { transform: translate(0%, 0%); }
50% { transform: translate(-10%, 8%); }
100% { transform: translate(10%, -8%); }
}
/* ════════════════════════════════
FlightControlPage — common.css 추가분
════════════════════════════════ */

22
src/pages/company/AboutPage.jsx
Unescape View File

@ -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-side-wrap" ref={imgSideRef} />
<div className="about-img-main-wrap" ref={imgMainRef}>
<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>

Write Preview
Loading…
Cancel
Save