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

메인 uam

remotes/origin/main
김지은 4 weeks ago
parent
e7e01e5aea
commit
642dc29a85
5 changed files with 28 additions and 28 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. 26
      src/components/main/MainUam.jsx
  2. 22
      src/css/main.css
  3. 4
      src/pages/MainPage.jsx
  4. 2
      src/pages/contact/InquiryPage.jsx
  5. 2
      src/pages/contact/RecruitPage.jsx

26
src/components/main/MainUam.jsx
Unescape View File

@ -1,16 +1,16 @@
import { useEffect, useRef } from "react";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import UTMImg from "../../../public/images/UTM-silver.png";
import uamImg from "../../../public/images/uam-silver.png";
gsap.registerPlugin(ScrollTrigger);
function MainUTM() {
function MainUam() {
const sectionRef = useRef(null);
const leftRef = useRef(null);
const rightRef = useRef(null);
const lineRef = useRef([]);
const dotRef = useRef(null);
const UTMImageRef = useRef(null);
const uamImageRef = useRef(null);
const canvasRef = useRef(null);
const isMobile = window.innerWidth <= 768;
@ -130,8 +130,8 @@ function MainUTM() {
opacity: 0,
scale: 1,
});
gsap.set(".airspace-UTM-content", { opacity: 0, y: 36 });
gsap.set(UTMImageRef.current, { opacity: 0 });
gsap.set(".airspace-uam-content", { opacity: 0, y: 36 });
gsap.set(uamImageRef.current, { opacity: 0 });
const tl = gsap.timeline({
scrollTrigger: {
@ -168,7 +168,7 @@ function MainUTM() {
ease: "power2.inOut",
});
tl.to([".airspace-UTM-content", UTMImageRef.current], { opacity: 1, y: 0, duration: 0.8, ease: "power2.out" }, "-=0.35");
tl.to([".airspace-uam-content", uamImageRef.current], { opacity: 1, y: 0, duration: 0.8, ease: "power2.out" }, "-=0.35");
}, sectionRef);
return () => {
@ -189,8 +189,8 @@ function MainUTM() {
<h2>드론 하늘길에서</h2>
</div>
<div className="airspace-panel airspace-panel--UTM" ref={rightRef}>
<p>UTM SYSTEM</p>
<div className="airspace-panel airspace-panel--uam" ref={rightRef}>
<p>UAM SYSTEM</p>
<h2>
도심 항공
<span className="airspace-mobile-br"> </span>
@ -211,13 +211,13 @@ function MainUTM() {
</div>
<div className="airspace-moving-dot" ref={dotRef}>
<div className="airspace-dot-image" ref={UTMImageRef}>
<img src={UTMImg} alt="UTM Aircraft" />
<div className="airspace-dot-image" ref={uamImageRef}>
<img src={uamImg} alt="UAM Aircraft" />
</div>
</div>
<div className="airspace-UTM-content">
<p>UTM NETWORK</p>
<div className="airspace-uam-content">
<p>UAM NETWORK</p>
<h2>Urban Air Mobility</h2>
<span>
도심 내 버티포트, 운항 경로, 항공 교통 데이터를 <br />
@ -228,4 +228,4 @@ function MainUTM() {
);
}
export default MainUTM;
export default MainUam;

22
src/css/main.css
Unescape View File

@ -230,7 +230,7 @@ body{overflow-x:hidden;}
.airspace-panel,
.airspace-lines,
.airspace-moving-dot,
.airspace-UTM-content {position: relative; z-index: 1; }
.airspace-uam-content {position: relative; z-index: 1; }
.airspace-transition-section{position:relative;min-height:100vh;overflow:hidden;background:radial-gradient(circle at 12% 8%,rgba(26,31,94,.04),transparent 30%),radial-gradient(circle at 88% 10%,rgba(26,31,94,.035),transparent 32%),linear-gradient(180deg,#ffffff 0%,#f7f9ff 48%,#ffffff 100%);}
.airspace-transition-section::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.24) 20%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.24) 80%,rgba(255,255,255,.72) 100%);pointer-events:none;}
@ -243,10 +243,10 @@ body{overflow-x:hidden;}
.airspace-moving-dot{position:absolute;left:68%;top:49%;z-index:6;width:54px;height:54px;border-radius:50%;background:#1a1f5e;border:1px solid rgba(26,31,94,.14);box-shadow:0 0 0 12px rgba(26,31,94,.06),0 20px 50px rgba(26,31,94,.18);transform-origin:center center;}
.airspace-moving-dot::before{content:"";position:absolute;inset:20px;border-radius:50%;background:#ffffff;opacity:.9;}
.airspace-UTM-content{position:absolute;left:8vw;top:50%;transform:translateY(-50%);z-index:20;max-width:760px;color:#ffffff;pointer-events:none;}
.airspace-UTM-content p{margin:0 0 18px;font-size:12px;font-weight:800;letter-spacing:.28em;color:rgba(255,255,255,.72);}
.airspace-UTM-content h2{margin:0 0 24px;font-size:clamp(54px,7vw,104px);font-weight:800;line-height:.92;letter-spacing:-.07em;color:#ffffff;}
.airspace-UTM-content span{display:block;max-width:560px;font-size:18px;line-height:1.8;font-weight:500;color:rgba(255,255,255,.72);}
.airspace-uam-content{position:absolute;left:8vw;top:50%;transform:translateY(-50%);z-index:20;max-width:760px;color:#ffffff;pointer-events:none;}
.airspace-uam-content p{margin:0 0 18px;font-size:12px;font-weight:800;letter-spacing:.28em;color:rgba(255,255,255,.72);}
.airspace-uam-content h2{margin:0 0 24px;font-size:clamp(54px,7vw,104px);font-weight:800;line-height:.92;letter-spacing:-.07em;color:#ffffff;}
.airspace-uam-content span{display:block;max-width:560px;font-size:18px;line-height:1.8;font-weight:500;color:rgba(255,255,255,.72);}
.airspace-dot-image{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;z-index:2;pointer-events:none;}
.airspace-dot-image img{width:32%;height:32%;object-fit:contain;filter:drop-shadow(0 8px 32px rgba(26,31,94,.28));animation:float-UTM 5s ease-in-out infinite;will-change:transform;}
@ -255,9 +255,9 @@ body{overflow-x:hidden;}
@media (max-width:768px){
.airspace-moving-dot{left:88%;top:43%;transform:translate(-50%,-50%);}
.airspace-dot-UTM{width:110px;}
.airspace-UTM-content{left:0;right:0;top:auto;bottom:7%;transform:none;padding:0 6vw;max-width:100%;}
.airspace-UTM-content h2{font-size:clamp(38px,10vw,58px);line-height:.95;letter-spacing:-.07em;word-break:keep-all;}
.airspace-UTM-content span{font-size:14px;line-height:1.7;word-break:keep-all;}
.airspace-uam-content{left:0;right:0;top:auto;bottom:7%;transform:none;padding:0 6vw;max-width:100%;}
.airspace-uam-content h2{font-size:clamp(38px,10vw,58px);line-height:.95;letter-spacing:-.07em;word-break:keep-all;}
.airspace-uam-content span{font-size:14px;line-height:1.7;word-break:keep-all;}
.airspace-dot-image img{width: 16px;height:16%}
.airspace-dot-image{transform:translateX(-5%);}
}
@ -265,9 +265,9 @@ body{overflow-x:hidden;}
@media (min-width:769px) and (max-width:1024px){
.airspace-moving-dot{left:82%;top:50%;transform:translate(-50%,-50%);}
.airspace-dot-UTM{width:280px;}
.airspace-UTM-content{left:4%;right:auto;top:auto;bottom:10%;transform:none;padding:0 4vw;max-width:60%;}
.airspace-UTM-content h2{font-size:clamp(44px,7vw,72px);line-height:.95;letter-spacing:-.07em;word-break:keep-all;}
.airspace-UTM-content span{font-size:15px;line-height:1.7;word-break:keep-all;}
.airspace-uam-content{left:4%;right:auto;top:auto;bottom:10%;transform:none;padding:0 4vw;max-width:60%;}
.airspace-uam-content h2{font-size:clamp(44px,7vw,72px);line-height:.95;letter-spacing:-.07em;word-break:keep-all;}
.airspace-uam-content span{font-size:15px;line-height:1.7;word-break:keep-all;}
.airspace-dot-image img{width:16px;height:auto;}
.airspace-dot-image{transform:translateX(-6%);}
}

4
src/pages/MainPage.jsx
Unescape View File

@ -1,6 +1,6 @@
import MainVisual from "../components/main/MainVisual";
import MainUtm from "../components/main/MainUtm";
import MainUTM from "../components/main/MainUTM";
import MainUam from "../components/main/MainUam";
import MainSolution from "../components/main/MainSolution";
import MainNews from "../components/main/MainNews";
import MainContact from "../components/main/MainContact";
@ -10,7 +10,7 @@ function MainPage() {
<main className="main-page">
<MainVisual />
<MainUtm />
<MainUTM />
<MainUam />
<MainSolution />
<MainNews />
<MainContact />

2
src/pages/contact/InquiryPage.jsx
Unescape View File

@ -5,7 +5,7 @@ function InquiryPage() {
const ref = useFadeIn();
const CONTACT_NAV = [
{ label: "문의하기", to: "/contact/inquiry" },
{ label: "채용정보", to: "/contact/inquiry" },
{ label: "채용정보", to: "/contact/recruit" },
];
return (
<article ref={ref}>

2
src/pages/contact/RecruitPage.jsx
Unescape View File

@ -5,7 +5,7 @@ function RecruitPage() {
const ref = useFadeIn();
const CONTACT_NAV = [
{ label: "문의하기", to: "/contact/inquiry" },
{ label: "채용정보", to: "/contact/inquiry" },
{ label: "채용정보", to: "/contact/recruit" },
];
return (
<article ref={ref}>

Write Preview
Loading…
Cancel
Save