diff --git a/public/images/aboutImg1.png b/public/images/aboutImg1.png index d80b1f3..9456db8 100644 Binary files a/public/images/aboutImg1.png and b/public/images/aboutImg1.png differ diff --git a/public/images/about_banner.png b/public/images/about_banner.png new file mode 100644 index 0000000..5a7c688 Binary files /dev/null and b/public/images/about_banner.png differ diff --git a/src/components/TopButton.jsx b/src/components/TopButton.jsx new file mode 100644 index 0000000..7507e67 --- /dev/null +++ b/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 && ( + + )} + + ); +} diff --git a/src/css/common.css b/src/css/common.css index cdb53ba..9b48073 100644 --- a/src/css/common.css +++ b/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-btn { width: 100%; max-width: 280px; justify-content: center; } - - .about-cta-buttons { flex-direction: column; align-items: center; width: 100%; } - + .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 추가분 ════════════════════════════════ */ diff --git a/src/pages/company/AboutPage.jsx b/src/pages/company/AboutPage.jsx index 7d7127f..b32c298 100644 --- a/src/pages/company/AboutPage.jsx +++ b/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 = ; @@ -367,16 +368,6 @@ export default function AboutPage() {
{[ - { - 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 */}
- +
-

- Contact -

PAL Networks와
@@ -447,6 +449,9 @@ export default function AboutPage() {

+ + {/* top 버튼 */} + ); }