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
Unified 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 { useEffect, useRef } from "react";
import { gsap } from "gsap"; import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger"; import { ScrollTrigger } from "gsap/ScrollTrigger";
import UTMImg from "../../../public/images/UTM-silver.png"; import uamImg from "../../../public/images/uam-silver.png";
gsap.registerPlugin(ScrollTrigger); gsap.registerPlugin(ScrollTrigger);
function MainUTM() { function MainUam() {
const sectionRef = useRef(null); const sectionRef = useRef(null);
const leftRef = useRef(null); const leftRef = useRef(null);
const rightRef = useRef(null); const rightRef = useRef(null);
const lineRef = useRef([]); const lineRef = useRef([]);
const dotRef = useRef(null); const dotRef = useRef(null);
const UTMImageRef = useRef(null); const uamImageRef = useRef(null);
const canvasRef = useRef(null); const canvasRef = useRef(null);
const isMobile = window.innerWidth <= 768; const isMobile = window.innerWidth <= 768;
@ -130,8 +130,8 @@ function MainUTM() {
opacity: 0, opacity: 0,
scale: 1, scale: 1,
}); });
gsap.set(".airspace-UTM-content", { opacity: 0, y: 36 }); gsap.set(".airspace-uam-content", { opacity: 0, y: 36 });
gsap.set(UTMImageRef.current, { opacity: 0 }); gsap.set(uamImageRef.current, { opacity: 0 });
const tl = gsap.timeline({ const tl = gsap.timeline({
scrollTrigger: { scrollTrigger: {
@ -168,7 +168,7 @@ function MainUTM() {
ease: "power2.inOut", 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); }, sectionRef);
return () => { return () => {
@ -189,8 +189,8 @@ function MainUTM() {
<h2>드론 하늘길에서</h2> <h2>드론 하늘길에서</h2>
</div> </div>
<div className="airspace-panel airspace-panel--UTM" ref={rightRef}> <div className="airspace-panel airspace-panel--uam" ref={rightRef}>
<p>UTM SYSTEM</p> <p>UAM SYSTEM</p>
<h2> <h2>
도심 항공 도심 항공
<span className="airspace-mobile-br"> </span> <span className="airspace-mobile-br"> </span>
@ -211,13 +211,13 @@ function MainUTM() {
</div> </div>
<div className="airspace-moving-dot" ref={dotRef}> <div className="airspace-moving-dot" ref={dotRef}>
<div className="airspace-dot-image" ref={UTMImageRef}> <div className="airspace-dot-image" ref={uamImageRef}>
<img src={UTMImg} alt="UTM Aircraft" /> <img src={uamImg} alt="UAM Aircraft" />
</div> </div>
</div> </div>
<div className="airspace-UTM-content"> <div className="airspace-uam-content">
<p>UTM NETWORK</p> <p>UAM NETWORK</p>
<h2>Urban Air Mobility</h2> <h2>Urban Air Mobility</h2>
<span> <span>
도심 내 버티포트, 운항 경로, 항공 교통 데이터를 <br /> 도심 내 버티포트, 운항 경로, 항공 교통 데이터를 <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-panel,
.airspace-lines, .airspace-lines,
.airspace-moving-dot, .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{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;} .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{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-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-uam-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-uam-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-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-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 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{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;} .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){ @media (max-width:768px){
.airspace-moving-dot{left:88%;top:43%;transform:translate(-50%,-50%);} .airspace-moving-dot{left:88%;top:43%;transform:translate(-50%,-50%);}
.airspace-dot-UTM{width:110px;} .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-uam-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-uam-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 span{font-size:14px;line-height:1.7;word-break:keep-all;}
.airspace-dot-image img{width: 16px;height:16%} .airspace-dot-image img{width: 16px;height:16%}
.airspace-dot-image{transform:translateX(-5%);} .airspace-dot-image{transform:translateX(-5%);}
} }
@ -265,9 +265,9 @@ body{overflow-x:hidden;}
@media (min-width:769px) and (max-width:1024px){ @media (min-width:769px) and (max-width:1024px){
.airspace-moving-dot{left:82%;top:50%;transform:translate(-50%,-50%);} .airspace-moving-dot{left:82%;top:50%;transform:translate(-50%,-50%);}
.airspace-dot-UTM{width:280px;} .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-uam-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-uam-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 span{font-size:15px;line-height:1.7;word-break:keep-all;}
.airspace-dot-image img{width:16px;height:auto;} .airspace-dot-image img{width:16px;height:auto;}
.airspace-dot-image{transform:translateX(-6%);} .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 MainVisual from "../components/main/MainVisual";
import MainUtm from "../components/main/MainUtm"; 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 MainSolution from "../components/main/MainSolution";
import MainNews from "../components/main/MainNews"; import MainNews from "../components/main/MainNews";
import MainContact from "../components/main/MainContact"; import MainContact from "../components/main/MainContact";
@ -10,7 +10,7 @@ function MainPage() {
<main className="main-page"> <main className="main-page">
<MainVisual /> <MainVisual />
<MainUtm /> <MainUtm />
<MainUTM /> <MainUam />
<MainSolution /> <MainSolution />
<MainNews /> <MainNews />
<MainContact /> <MainContact />

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

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

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

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

Write Preview
Loading…
Cancel
Save