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

feat : uam 추가

remotes/origin/main
이시연 1 month ago
parent
a01508f936
commit
c15d5d1ad5
6 changed files with 374 additions and 594 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/uam-silver.png
  2. 98
      src/components/main/MainCameraTransition.jsx
  3. 194
      src/components/main/MainUam.jsx
  4. 157
      src/components/main/MainUam2.jsx
  5. 495
      src/css/main.css
  6. 4
      src/pages/MainPage.jsx

BIN
public/images/uam-silver.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 MiB

98
src/components/main/MainCameraTransition.jsx
Unescape View File

@ -1,98 +0,0 @@
import { useEffect, useRef } from "react";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);
function MainAirspaceTransition() {
const sectionRef = useRef(null);
const leftRef = useRef(null);
const rightRef = useRef(null);
const lineRef = useRef([]);
const dotRef = useRef(null);
useEffect(() => {
const ctx = gsap.context(() => {
gsap.set(rightRef.current, { xPercent: 100 });
gsap.set(lineRef.current, { scaleX: 0, transformOrigin: "left center" });
gsap.set(dotRef.current, { x: -220, opacity: 0 });
const tl = gsap.timeline({
scrollTrigger: {
trigger: sectionRef.current,
start: "top top",
end: "+=1500",
scrub: 1,
pin: true,
anticipatePin: 1,
},
});
tl.to(lineRef.current, {
scaleX: 1,
stagger: 0.08,
duration: 0.7,
ease: "none",
});
tl.to(
dotRef.current,
{
x: 0,
opacity: 1,
duration: 0.7,
ease: "none",
},
"<0.1",
);
tl.to(leftRef.current, {
xPercent: -100,
duration: 1,
ease: "none",
});
tl.to(
rightRef.current,
{
xPercent: 0,
duration: 1,
ease: "none",
},
"<",
);
}, sectionRef);
return () => ctx.revert();
}, []);
return (
<section className="airspace-transition-section" ref={sectionRef}>
<div className="airspace-panel airspace-panel--utm" ref={leftRef}>
<p>UTM SYSTEM</p>
<h2>드론 하늘길에서</h2>
</div>
<div className="airspace-panel airspace-panel--uam" ref={rightRef}>
<p>UAM SYSTEM</p>
<h2>도심 항공 네트워크로</h2>
</div>
<div className="airspace-lines">
{[0, 1, 2, 3].map((item) => (
<span
key={item}
className={`airspace-line airspace-line--${item + 1}`}
ref={(el) => {
lineRef.current[item] = el;
}}
/>
))}
</div>
<div className="airspace-moving-dot" ref={dotRef} />
</section>
);
}
export default MainAirspaceTransition;

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

@ -1,93 +1,116 @@
import { useEffect, useRef } from "react";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);
function MainUam() {
function MainAirspaceTransition() {
const sectionRef = useRef(null);
const overlayRef = useRef(null);
const titleRef = useRef(null);
const vehicleRef = useRef(null);
const panelsRef = useRef([]);
const items = [
{
label: "UAM NETWORK",
title: "Urban Air Mobility",
desc: "도심 내 버티포트, 운항 경로, 항공 교통 데이터를 연결해 미래형 도심 항공 이동 환경을 구축합니다.",
},
{
label: "VERTIPORT",
title: "Vertiport Connection",
desc: "도심 곳곳의 이착륙 거점을 연결해 사람과 도시의 이동 흐름을 확장합니다.",
},
{
label: "AIR CORRIDOR",
title: "Smart Air Corridor",
desc: "복잡한 도심 상공에서도 안전한 항로를 구성하고 실시간 운항 흐름을 관리합니다.",
},
];
const leftRef = useRef(null);
const rightRef = useRef(null);
const lineRef = useRef([]);
const dotRef = useRef(null);
const uamImageRef = useRef(null);
useEffect(() => {
const ctx = gsap.context(() => {
gsap.set(overlayRef.current, { yPercent: 0 });
gsap.set(titleRef.current, { y: 80, opacity: 0 });
gsap.set(vehicleRef.current, {
xPercent: -120,
yPercent: 80,
gsap.set(rightRef.current, { xPercent: 100 });
gsap.set(lineRef.current, { scaleX: 0, transformOrigin: "left center" });
gsap.set(dotRef.current, {
x: -320,
opacity: 0,
scale: 1,
});
gsap.set(".airspace-uam-content", {
opacity: 0,
y: 36,
});
gsap.set(panelsRef.current, { y: 40, opacity: 0 });
const tl = gsap.timeline({
scrollTrigger: {
trigger: sectionRef.current,
start: "top bottom",
end: "+=1400",
start: "top top",
end: "+=2100",
scrub: 1,
pin: true,
anticipatePin: 1,
},
});
tl.to(overlayRef.current, {
yPercent: -100,
duration: 1,
tl.to(lineRef.current, {
scaleX: 1,
stagger: 0.08,
duration: 0.7,
ease: "none",
});
tl.to(
titleRef.current,
dotRef.current,
{
y: 0,
x: 0,
opacity: 1,
duration: 0.8,
duration: 0.7,
ease: "none",
},
"<0.25",
"<0.1",
);
tl.to(leftRef.current, {
xPercent: -100,
duration: 1,
ease: "none",
});
tl.to(
vehicleRef.current,
rightRef.current,
{
xPercent: 0,
yPercent: 0,
opacity: 1,
duration: 1,
ease: "none",
},
"<0.2",
"<",
);
// /* 마지막: 동그라미 줌 */
// tl.to(dotRef.current, {
// scale: 46,
// duration: 1.2,
// ease: "power2.inOut",
// });
// tl.to(
// ".airspace-uam-content",
// {
// opacity: 1,
// y: 0,
// duration: 0.8,
// ease: "power2.out",
// },
// "-=0.35"
// );
/* 마지막: 내부 점 제거 */
tl.call(() => {
dotRef.current?.classList.add("is-zooming");
});
/* 마지막: 동그라미 줌 */
tl.to(dotRef.current, {
x: 0,
y: 0,
scale: 72,
duration: 1.2,
ease: "power2.inOut",
});
tl.to(
panelsRef.current,
".airspace-uam-content",
{
y: 0,
opacity: 1,
stagger: 0.16,
y: 0,
duration: 0.8,
ease: "none",
ease: "power2.out",
},
"<0.35",
"-=0.35",
);
}, sectionRef);
@ -95,63 +118,44 @@ function MainUam() {
}, []);
return (
<section className="main-uam-section" ref={sectionRef}>
<div className="main-uam-screen-wipe" ref={overlayRef}>
<span>FROM UTM</span>
<strong>TO UAM</strong>
<section className="airspace-transition-section" ref={sectionRef}>
<div className="airspace-panel airspace-panel--utm" ref={leftRef}>
<p>UTM SYSTEM</p>
<h2>드론 하늘길에서</h2>
</div>
<div className="main-uam-bg-grid" />
<div className="main-uam-light main-uam-light--a" />
<div className="main-uam-light main-uam-light--b" />
<div className="main-uam-inner">
<div className="main-uam-visual">
<div className="main-uam-route main-uam-route--a" />
<div className="main-uam-route main-uam-route--b" />
<div className="main-uam-route main-uam-route--c" />
<div className="main-uam-node main-uam-node--a">V</div>
<div className="main-uam-node main-uam-node--b">P</div>
<div className="main-uam-node main-uam-node--c">C</div>
<div className="main-uam-vehicle" ref={vehicleRef}>
<span />
</div>
</div>
<div className="main-uam-content" ref={titleRef}>
<p className="main-uam-eyebrow">UAM SYSTEM</p>
<h2>
도심항공교통
<br />
UAM
</h2>
<p>
드론 관제에서 확장된 하늘길은 이제 도시의 이동 네트워크로
이어집니다. UAM은 버티포트, 항로, 운항 데이터를 하나의 흐름으로
연결합니다.
</p>
<div className="airspace-panel airspace-panel--uam" ref={rightRef}>
<p>UAM SYSTEM</p>
<h2>도심 항공 네트워크로</h2>
</div>
<div className="main-uam-panels">
{items.map((item, index) => (
<article
className="main-uam-panel"
key={item.label}
<div className="airspace-lines">
{[0, 1, 2, 3].map((item) => (
<span
key={item}
className={`airspace-line airspace-line--${item + 1}`}
ref={(el) => {
panelsRef.current[index] = el;
lineRef.current[item] = el;
}}
>
<span>{item.label}</span>
<h3>{item.title}</h3>
<p>{item.desc}</p>
</article>
/>
))}
</div>
<div className="airspace-moving-dot" ref={dotRef} />
<div className="airspace-uam-vehicle" ref={uamImageRef}>
<img src="/images/uam-silver.png" alt="" />
</div>
<div className="airspace-uam-content">
<p>UAM NETWORK</p>
<h2>Urban Air Mobility</h2>
<span>
도심 내 버티포트, 운항 경로, 항공 교통 데이터를 <br />
하나의 네트워크로 연결해 미래형 항공 이동 환경을 구축합니다.
</span>
</div>
</section>
);
}
export default MainUam;
export default MainAirspaceTransition;

157
src/components/main/MainUam2.jsx
Unescape View File

@ -0,0 +1,157 @@
import { useEffect, useRef } from "react";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);
function MainUam() {
const sectionRef = useRef(null);
const overlayRef = useRef(null);
const titleRef = useRef(null);
const vehicleRef = useRef(null);
const panelsRef = useRef([]);
const items = [
{
label: "UAM NETWORK",
title: "Urban Air Mobility",
desc: "도심 내 버티포트, 운항 경로, 항공 교통 데이터를 연결해 미래형 도심 항공 이동 환경을 구축합니다.",
},
{
label: "VERTIPORT",
title: "Vertiport Connection",
desc: "도심 곳곳의 이착륙 거점을 연결해 사람과 도시의 이동 흐름을 확장합니다.",
},
{
label: "AIR CORRIDOR",
title: "Smart Air Corridor",
desc: "복잡한 도심 상공에서도 안전한 항로를 구성하고 실시간 운항 흐름을 관리합니다.",
},
];
useEffect(() => {
const ctx = gsap.context(() => {
gsap.set(overlayRef.current, { yPercent: 0 });
gsap.set(titleRef.current, { y: 80, opacity: 0 });
gsap.set(vehicleRef.current, {
xPercent: -120,
yPercent: 80,
opacity: 0,
});
gsap.set(panelsRef.current, { y: 40, opacity: 0 });
const tl = gsap.timeline({
scrollTrigger: {
trigger: sectionRef.current,
start: "top bottom",
end: "+=1400",
scrub: 1,
},
});
tl.to(overlayRef.current, {
yPercent: -100,
duration: 1,
ease: "none",
});
tl.to(
titleRef.current,
{
y: 0,
opacity: 1,
duration: 0.8,
ease: "none",
},
"<0.25",
);
tl.to(
vehicleRef.current,
{
xPercent: 0,
yPercent: 0,
opacity: 1,
duration: 1,
ease: "none",
},
"<0.2",
);
tl.to(
panelsRef.current,
{
y: 0,
opacity: 1,
stagger: 0.16,
duration: 0.8,
ease: "none",
},
"<0.35",
);
}, sectionRef);
return () => ctx.revert();
}, []);
return (
<section className="main-uam-section" ref={sectionRef}>
<div className="main-uam-screen-wipe" ref={overlayRef}>
<span>FROM UTM</span>
<strong>TO UAM</strong>
</div>
<div className="main-uam-bg-grid" />
<div className="main-uam-light main-uam-light--a" />
<div className="main-uam-light main-uam-light--b" />
<div className="main-uam-inner">
<div className="main-uam-visual">
<div className="main-uam-route main-uam-route--a" />
<div className="main-uam-route main-uam-route--b" />
<div className="main-uam-route main-uam-route--c" />
<div className="main-uam-node main-uam-node--a">V</div>
<div className="main-uam-node main-uam-node--b">P</div>
<div className="main-uam-node main-uam-node--c">C</div>
<div className="main-uam-vehicle" ref={vehicleRef}>
<span />
</div>
</div>
<div className="main-uam-content" ref={titleRef}>
<p className="main-uam-eyebrow">UAM SYSTEM</p>
<h2>
도심항공교통
<br />
UAM
</h2>
<p>
드론 관제에서 확장된 하늘길은 이제 도시의 이동 네트워크로
이어집니다. UAM은 버티포트, 항로, 운항 데이터를 하나의 흐름으로
연결합니다.
</p>
</div>
<div className="main-uam-panels">
{items.map((item, index) => (
<article
className="main-uam-panel"
key={item.label}
ref={(el) => {
panelsRef.current[index] = el;
}}
>
<span>{item.label}</span>
<h3>{item.title}</h3>
<p>{item.desc}</p>
</article>
))}
</div>
</div>
</section>
);
}
export default MainUam;

495
src/css/main.css
Unescape View File

@ -1,15 +1,4 @@
:root{
--header-height:96px;
--color-primary:#3A4081;
--color-primary-hover:#2F5DAA;
--color-primary-light:#6B78B5;
--color-primary-soft:rgba(58,64,129,.08);
--color-primary-soft-strong:rgba(58,64,129,.12);
--color-primary-soft-border:rgba(58,64,129,.16);
--color-primary-border:rgba(58,64,129,.2);
--color-primary-border-strong:rgba(58,64,129,.24);
--color-primary-shadow:rgba(58,64,129,.18);
}
:root{--header-height:96px;--color-primary:#3A4081;--color-primary-hover:#2F5DAA;--color-primary-light:#6B78B5;--color-primary-soft:rgba(58,64,129,.08);--color-primary-soft-strong:rgba(58,64,129,.12);--color-primary-soft-border:rgba(58,64,129,.16);--color-primary-border:rgba(58,64,129,.2);--color-primary-border-strong:rgba(58,64,129,.24);--color-primary-shadow:rgba(58,64,129,.18);}
html{scrollbar-gutter:inherit;}
body{overflow-x:hidden;}
@ -24,7 +13,10 @@ body{overflow-x:hidden;}
.main-bg{position:relative;width:min(1440px,calc(100vw - 80px));height:750px;border-radius:24px;overflow:hidden;transform-origin:center center;will-change:transform,width,height,border-radius;background:#050b17;}
.main-bg-hero1{position:absolute;inset:0;background:url('/images/hero1.png') no-repeat 50% 50%/cover;transform:scale(1.04);}
/* .main-bg-hero2{position:absolute;inset:0;background:url('/images/hero2.png') no-repeat 50% 50%/cover;opacity:0;} */
/* .main-bg-hero2{position:absolute;inset:0;background:url('/images/hero2.png') no-repeat 50% 50%/cover;opacity:0;}
*/
.main-bg-hero2{position:absolute;inset:0;opacity:0;overflow:hidden;}
.hero-video{width:100%;height:100%;object-fit:cover;}
.main-bg-hero3{position:absolute;inset:0;background:url('/images/hero3.png') no-repeat 50% 50%/cover;opacity:0;}
@ -34,8 +26,7 @@ body{overflow-x:hidden;}
.main-visible-atmo{position:absolute;inset:-12%;z-index:2;pointer-events:none;mix-blend-mode:screen;will-change:transform,opacity;}
.main-visible-atmo1{background:radial-gradient(circle at 20% 28%,rgba(142,184,255,.22) 0%,rgba(142,184,255,.12) 16%,rgba(142,184,255,.03) 30%,rgba(142,184,255,0) 44%),radial-gradient(circle at 78% 70%,rgba(112,224,255,.14) 0%,rgba(112,224,255,.08) 16%,rgba(112,224,255,.02) 28%,rgba(112,224,255,0) 40%);filter:blur(24px);opacity:.52;animation:visibleAtmo1 8s ease-in-out infinite;}
.main-visible-atmo2{background:radial-gradient(circle at 72% 22%,rgba(188,214,255,.14) 0%,rgba(188,214,255,.07) 16%,rgba(188,214,255,.02) 30%,rgba(188,214,255,0) 44%),radial-gradient(circle at 28% 74%,rgba(124,202,255,.16) 0%,rgba(124,202,255,.08) 16%,rgba(124,202,255,.02) 30%,rgba(124,202,255,0) 42%);filter:blur(28px);opacity:.34;animation:visibleAtmo2 9.5s ease-in-out infinite;}
.main-visible-atmo2{background:radial-gradient(circle at 72% 22%,rgba(188,214,255,.14) 0%,rgba(55, 63, 77, 0.07) 16%,rgba(188,214,255,.02) 30%,rgba(188,214,255,0) 44%),radial-gradient(circle at 28% 74%,rgba(124,202,255,.16) 0%,rgba(124,202,255,.08) 16%,rgba(124,202,255,.02) 30%,rgba(124,202,255,0) 42%);filter:blur(28px);opacity:.34;animation:visibleAtmo2 9.5s ease-in-out infinite;}
.main-visible-beam{position:absolute;top:-18%;left:-42%;width:72%;height:155%;z-index:2;pointer-events:none;mix-blend-mode:screen;will-change:transform,opacity;}
.main-visible-beam1{background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.02) 22%,rgba(255,255,255,.34) 50%,rgba(255,255,255,.05) 70%,rgba(255,255,255,0) 100%);filter:blur(12px);transform:rotate(-16deg);opacity:.95;animation:visibleBeam1 4.2s linear infinite;}
.main-visible-beam2{background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(182,225,255,.02) 22%,rgba(255,255,255,.22) 50%,rgba(182,225,255,.04) 72%,rgba(255,255,255,0) 100%);filter:blur(16px);transform:rotate(14deg);opacity:.78;animation:visibleBeam2 5.6s linear infinite;animation-delay:.8s;}
@ -57,62 +48,47 @@ body{overflow-x:hidden;}
.main-scroll-line{display:block;width:1px;height:28px;background:linear-gradient(180deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,.95) 100%);animation:scrollLine 1.8s ease-in-out infinite;}
.main-scroll-text{font-size:11px;line-height:1;letter-spacing:.28em;font-weight:600;color:rgba(255,255,255,.78);}
@keyframes scrollLine{
0%{transform:translateY(0);opacity:.35;}
50%{transform:translateY(6px);opacity:1;}
100%{transform:translateY(0);opacity:.35;}
}
@keyframes visibleAtmo1{
0%{transform:translate3d(0,0,0) scale(1);opacity:.46;}
50%{transform:translate3d(2.6%,-1.8%,0) scale(1.08);opacity:.62;}
100%{transform:translate3d(0,0,0) scale(1);opacity:.46;}
@keyframes scrollLine{0%{transform:translateY(0);opacity:.35;}
50%{transform:translateY(6px);opacity:1;}
100%{transform:translateY(0);opacity:.35;}
}
@keyframes visibleAtmo2{
0%{transform:translate3d(0,0,0) scale(1);opacity:.28;}
50%{transform:translate3d(-2.2%,1.6%,0) scale(1.08);opacity:.42;}
100%{transform:translate3d(0,0,0) scale(1);opacity:.28;}
@keyframes visibleAtmo1{0%{transform:translate3d(0,0,0) scale(1);opacity:.46;}
50%{transform:translate3d(2.6%,-1.8%,0) scale(1.08);opacity:.62;}
100%{transform:translate3d(0,0,0) scale(1);opacity:.46;}
}
@keyframes visibleBeam1{
0%{transform:translate3d(-135%,0,0) rotate(-16deg);opacity:0;}
8%{opacity:.32;}
36%{opacity:.95;}
58%{opacity:.48;}
100%{transform:translate3d(235%,0,0) rotate(-16deg);opacity:0;}
@keyframes visibleAtmo2{0%{transform:translate3d(0,0,0) scale(1);opacity:.28;}
50%{transform:translate3d(-2.2%,1.6%,0) scale(1.08);opacity:.42;}
100%{transform:translate3d(0,0,0) scale(1);opacity:.28;}
}
@keyframes visibleBeam2{
0%{transform:translate3d(-135%,0,0) rotate(14deg);opacity:0;}
10%{opacity:.22;}
40%{opacity:.72;}
62%{opacity:.34;}
100%{transform:translate3d(235%,0,0) rotate(14deg);opacity:0;}
@keyframes visibleBeam1{0%{transform:translate3d(-135%,0,0) rotate(-16deg);opacity:0;}
8%{opacity:.32;}
36%{opacity:.95;}
58%{opacity:.48;}
100%{transform:translate3d(235%,0,0) rotate(-16deg);opacity:0;}
}
@keyframes visibleHaze{
0%{transform:translate(-50%,-50%) scale(1);opacity:.46;}
50%{transform:translate(-50%,-50%) scale(1.08);opacity:.7;}
100%{transform:translate(-50%,-50%) scale(1);opacity:.46;}
@keyframes visibleBeam2{0%{transform:translate3d(-135%,0,0) rotate(14deg);opacity:0;}
10%{opacity:.22;}
40%{opacity:.72;}
62%{opacity:.34;}
100%{transform:translate3d(235%,0,0) rotate(14deg);opacity:0;}
}
@keyframes gridShift{
0%{transform:translate3d(0,0,0);}
100%{transform:translate3d(0,18px,0);}
@keyframes visibleHaze{0%{transform:translate(-50%,-50%) scale(1);opacity:.46;}
50%{transform:translate(-50%,-50%) scale(1.08);opacity:.7;}
100%{transform:translate(-50%,-50%) scale(1);opacity:.46;}
}
@media (max-width:1280px){
.main-bg{width:calc(100vw - 48px);height:540px;}
.main-grid{background-size:56px 56px;}
.text-left-bottom{left:56px;bottom:104px;font-size:48px;max-width:640px;}
.text-center-hero{width:min(900px,calc(100% - 96px));font-size:42px;}
.main-visible-haze{width:min(820px,78vw);height:min(380px,36vw);}
.main-visible-beam{width:82%;}
@keyframes gridShift{0%{transform:translate3d(0,0,0);}
100%{transform:translate3d(0,18px,0);}
}
@media (max-width:768px){
.main-bg{width:calc(100vw - 24px);height:72vh;border-radius:20px;}
@media (max-width:1280px){.main-bg{width:calc(100vw - 48px);height:540px;}
.main-grid{background-size:56px 56px;}
.text-left-bottom{left:56px;bottom:104px;font-size:48px;max-width:640px;}
.text-center-hero{width:min(900px,calc(100% - 96px));font-size:42px;}
.main-visible-haze{width:min(820px,78vw);height:min(380px,36vw);}
.main-visible-beam{width:82%;}
}
@media (max-width:768px){.main-bg{width:calc(100vw - 24px);height:72vh;border-radius:20px;}
.main-visible-atmo1{filter:blur(18px);opacity:.44;}
.main-visible-atmo2{filter:blur(20px);opacity:.28;}
.main-visible-beam{width:118%;}
@ -128,32 +104,22 @@ body{overflow-x:hidden;}
.main-scroll-text{font-size:10px;letter-spacing:.22em;}
}
/* ─── utm ─── */
.main-utm-section{position:relative;width:100%;min-height:100vh;padding-top:86px;overflow:hidden;background:radial-gradient(circle at 12% 18%,rgba(58,64,129,.08),transparent 32%),radial-gradient(circle at 88% 18%,rgba(58,64,129,.06),transparent 34%),linear-gradient(180deg,#f7f9ff 0%,#ffffff 100%);}
.main-utm-section::before{content:"";position:absolute;top:0;right:0;width:68%;height:58%;background:url("/images/main-utm-background.png") no-repeat center top/cover;opacity:.5;pointer-events:none;z-index:0;-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 58%,rgba(0,0,0,.45) 78%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 58%,rgba(0,0,0,.45) 78%,transparent 100%);}
.main-utm-section::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(247,249,255,.86) 0%,rgba(247,249,255,.42) 22%,rgba(247,249,255,.08) 52%,rgba(247,249,255,.42) 78%,rgba(247,249,255,.86) 100%);pointer-events:none;z-index:0;}
/* ─── Section ─── */
.main-utm-section{position:relative;width:100%;min-height:100vh;padding-top:86px;overflow:hidden;background:radial-gradient(circle at 12% 18%,rgba(58,64,129,.08),transparent 32%),radial-gradient(circle at 88% 18%,rgba(58,64,129,.06),transparent 34%),linear-gradient(180deg,#f7f9ff 0%,#fff 100%);}
.main-utm-section::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(247,249,255,.82) 0%,rgba(247,249,255,.42) 24%,rgba(247,249,255,.12) 52%,rgba(247,249,255,.42) 78%,rgba(247,249,255,.82) 100%),url("/images/main-utm-background.png") no-repeat 50% 50% / cover;opacity:.52;pointer-events:none;z-index:0;}
/* ─── Glow ─── */
.main-utm-bg-glow{position:absolute;border-radius:999px;filter:blur(90px);pointer-events:none;}
.main-utm-bg-glow--a{width:520px;height:520px;top:-160px;right:-120px;background:rgba(58,64,129,.13);}
.main-utm-bg-glow--b{width:460px;height:460px;left:-140px;bottom:-160px;background:rgba(112,180,255,.12);}
/* ─── Inner ─── */
.main-utm-inner{position:relative;z-index:2;width:min(1440px,calc(100% - 120px));min-height:calc(100vh - 86px);margin:0 auto;padding-top:72px;padding-bottom:64px;}
/* ─── Head ─── */
.main-utm-head{position:relative;z-index:5;max-width:820px;margin-bottom:64px;}
.main-utm-eyebrow{margin:0 0 14px;font-size:12px;font-weight:800;letter-spacing:.24em;color:#3a4081;}
.main-utm-title{
margin:0;
font-size:clamp(40px,4vw,64px);
font-weight:800;
line-height:.92;
letter-spacing:-0.08em;
color:#0e1120;
}.main-utm-desc{margin:22px 0 0;font-size:16px;line-height:1.6;letter-spacing:-.02em;color:#697083;}
.main-utm-title{margin:0;font-size:clamp(40px,4vw,64px);font-weight:800;line-height:.92;letter-spacing:-0.08em;color:#0e1120;}
.main-utm-desc{margin:22px 0 0;font-size:16px;line-height:1.6;letter-spacing:-.02em;color:#697083;}
/* ─── Card Stack ─── */
.main-utm-stack{position:relative;width:100%;height:min(430px,50vh);perspective:1400px;}
.main-utm-card{position:absolute;inset:0;display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:64px;padding:54px 62px;border-radius:34px;overflow:hidden;background:rgba(255,255,255,.86);border:1px solid rgba(58,64,129,.1);box-shadow:0 30px 80px rgba(14,17,32,.1),inset 0 1px 0 rgba(255,255,255,.9);backdrop-filter:blur(22px);will-change:transform,opacity,filter;}
.main-utm-card::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.78),transparent 46%),radial-gradient(circle at 82% 28%,rgba(58,64,129,.11),transparent 34%);pointer-events:none;}
@ -161,54 +127,11 @@ body{overflow-x:hidden;}
.main-utm-step{display:inline-flex;align-items:center;justify-content:center;width:58px;height:32px;margin-bottom:24px;border-radius:999px;background:rgba(58,64,129,.1);color:#3a4081;font-size:13px;font-weight:800;letter-spacing:.1em;}
.main-utm-label{margin:0 0 10px;font-size:12px;font-weight:800;letter-spacing:.18em;color:rgba(58,64,129,.62);}
.main-utm-card h3{margin:0;font-size:clamp(34px,3.2vw,54px);line-height:1.06;letter-spacing:-.055em;color:#101322;}
.main-utm-card-text > p:last-child{max-width:430px;margin:22px 0 0;font-size:17px;line-height:1.72;word-break:keep-all;color:#636b7e;}
/* ─── Card Visual ─── */
.main-utm-card-visual{
position:relative;
height:100%;
min-height:300px;
border-radius:28px;
overflow:hidden;
background:#f7f8fc;
align-items:center;
overflow:hidden;
justify-content:center;
}
.main-utm-card-visual::after{
content:"";
position:absolute;
inset:18px;
border-radius:24px;
background:linear-gradient(180deg,rgba(255,255,255,.12),transparent 30%);
pointer-events:none;
}
.main-utm-img{
width:100%;
height:100%;
.main-utm-card-text>p:last-child{max-width:430px;margin:22px 0 0;font-size:17px;line-height:1.72;word-break:keep-all;color:#636b7e;}
object-fit:cover;
display:block;
border-radius:24px;
box-shadow:
inset 0 0 0 1px rgba(58,64,129,.06),
0 18px 40px rgba(17,22,40,.08),
0 0 0 8px rgba(255,255,255,.42);
background:#fff;
overflow:hidden;
transform:translateZ(0);
}
.main-utm-card-visual{position:relative;height:100%;min-height:300px;border-radius:28px;overflow:hidden;background:#f7f8fc;align-items:center;overflow:hidden;justify-content:center;}
.main-utm-card-visual::after{content:"";position:absolute;inset:18px;border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.12),transparent 30%);pointer-events:none;}
.main-utm-img{width:100%;height:100%;object-fit:cover;display:block;border-radius:24px;box-shadow:inset 0 0 0 1px rgba(58,64,129,.06),0 18px 40px rgba(17,22,40,.08),0 0 0 8px rgba(255,255,255,.42);background:#fff;overflow:hidden;transform:translateZ(0);}
.main-utm-orbit{position:absolute;inset:32px;border-radius:28px;}
.main-utm-orbit span{position:absolute;border:1px solid rgba(58,64,129,.14);border-radius:50%;}
.main-utm-orbit span:nth-child(1){width:340px;height:340px;left:50%;top:50%;transform:translate(-50%,-50%);}
@ -219,8 +142,6 @@ transform:translateZ(0);
.main-utm-route--a{width:62%;left:18%;top:42%;transform:rotate(-18deg);}
.main-utm-route--b{width:48%;right:12%;top:62%;transform:rotate(22deg);}
/* ─── Floating Drones ─── */
.utm-floating-air{position:absolute;top:120px;right:2%;width:42vw;height:210px;pointer-events:none;z-index:1;overflow:visible;animation:utmAirFlow 18s linear infinite;}
.utm-floating-drone{position:absolute;width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.42);backdrop-filter:blur(12px);box-shadow:0 0 0 8px rgba(58,64,129,.04),0 10px 24px rgba(58,64,129,.1);}
.utm-floating-drone svg{position:absolute;inset:9px;width:34px;height:34px;overflow:visible;}
@ -229,282 +150,80 @@ transform:translateZ(0);
.utm-floating-drone svg path{fill:none;stroke:#3a4081;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.utm-floating-drone span{position:absolute;inset:-12px;border-radius:50%;border:1px solid rgba(58,64,129,.2);animation:utmDronePulse 2.8s ease-out infinite;}
.utm-floating-drone--a{left:10%;top:122px;animation:utmDroneMoveB 11s ease-in-out infinite,utmDronePulseFloat 6s ease-in-out infinite;}
.utm-floating-drone--a svg circle,
.utm-floating-drone--a svg path{
stroke:#5B6CFF;
}
.utm-floating-drone--a svg circle:first-child{
filter:drop-shadow(0 0 10px rgba(91,108,255,.34));
}
.utm-floating-drone--b{
left:44%;
top:72px;
box-shadow:
0 0 0 8px rgba(243,199,104,.08),
0 10px 24px rgba(243,199,104,.14);
animation:
utmDroneMoveB 11s ease-in-out infinite,
utmDronePulseFloat 6s ease-in-out infinite;
}
.utm-floating-drone--b svg{
animation:utmDroneColorShift 6s ease-in-out infinite;
}
.utm-floating-drone--b svg circle,
.utm-floating-drone--b svg path{
stroke:#F3C768;
}
.utm-floating-drone--b svg circle:first-child{
filter:drop-shadow(0 0 10px rgba(243,199,104,.34));
}
.utm-floating-drone--c{right:4%;top:138px;animation:utmDroneMoveB 11s ease-in-out infinite,utmDronePulseFloat 6s ease-in-out infinite;animation-delay:-2.4s; box-shadow:
0 0 0 8px rgba(255,123,123,.06),
0 10px 24px rgba(255,123,123,.12);
}
.utm-floating-drone--c svg circle,
.utm-floating-drone--c svg path{
stroke:#FF7B7B;
}
.utm-floating-drone--c svg circle:first-child{
filter:drop-shadow(0 0 10px rgba(255,123,123,.32));
}
.utm-floating-drone--a svg circle,.utm-floating-drone--a svg path{stroke:#5B6CFF;}
.utm-floating-drone--a svg circle:first-child{filter:drop-shadow(0 0 10px rgba(91,108,255,.34));}
.utm-floating-drone--b{left:44%;top:72px;box-shadow:0 0 0 8px rgba(243,199,104,.08),0 10px 24px rgba(243,199,104,.14);animation:utmDroneMoveB 11s ease-in-out infinite,utmDronePulseFloat 6s ease-in-out infinite;}
.utm-floating-drone--b svg{animation:utmDroneColorShift 6s ease-in-out infinite;}
.utm-floating-drone--b svg circle,.utm-floating-drone--b svg path{stroke:#F3C768;}
.utm-floating-drone--b svg circle:first-child{filter:drop-shadow(0 0 10px rgba(243,199,104,.34));}
.utm-floating-drone--c{right:4%;top:138px;animation:utmDroneMoveB 11s ease-in-out infinite,utmDronePulseFloat 6s ease-in-out infinite;animation-delay:-2.4s;box-shadow:0 0 0 8px rgba(255,123,123,.06),0 10px 24px rgba(255,123,123,.12);}
.utm-floating-drone--c svg circle,.utm-floating-drone--c svg path{stroke:#FF7B7B;}
.utm-floating-drone--c svg circle:first-child{filter:drop-shadow(0 0 10px rgba(255,123,123,.32));}
/* ─── Responsive ─── */
@media(max-width:1024px){
.main-utm-section{padding-top:76px;}
.main-utm-inner{width:calc(100% - 56px);min-height:calc(100vh - 76px);padding-top:56px;}
.main-utm-head{margin-bottom:56px;}
.main-utm-card{grid-template-columns:1fr;gap:28px;padding:34px;}
.main-utm-card-visual{min-height:240px;}
.utm-floating-air{width:58vw;top:160px;opacity:.72;}
}
@media(max-width:768px){
.main-utm-inner{width:calc(100% - 32px);padding-top:42px;}
.main-utm-title{font-size:38px;}
.main-utm-desc{font-size:14px;}
.main-utm-stack{height:64vh;}
.main-utm-card{padding:26px 22px;border-radius:24px;}
.main-utm-card h3{font-size:32px;}
.main-utm-card-text > p:last-child{font-size:14px;}
.main-utm-card-visual{min-height:210px;}
.utm-floating-air{display:none;}
@media(max-width:1024px){.main-utm-section{padding-top:76px;}
.main-utm-inner{width:calc(100% - 56px);min-height:calc(100vh - 76px);padding-top:56px;}
.main-utm-head{margin-bottom:56px;}
.main-utm-card{grid-template-columns:1fr;gap:28px;padding:34px;}
.main-utm-card-visual{min-height:240px;}
.utm-floating-air{width:58vw;top:160px;opacity:.72;}
}
@media(max-width:768px){.main-utm-inner{width:calc(100% - 32px);padding-top:42px;}
.main-utm-title{font-size:38px;}
.main-utm-desc{font-size:14px;}
.main-utm-stack{height:64vh;}
.main-utm-card{padding:26px 22px;border-radius:24px;}
.main-utm-card h3{font-size:32px;}
.main-utm-card-text>p:last-child{font-size:14px;}
.main-utm-card-visual{min-height:210px;}
.utm-floating-air{display:none;}
}
/* ─── Keyframes ─── */
@keyframes utmAirFlow{0%,100%{transform:translateX(0);}50%{transform:translateX(-18px);}}
@keyframes utmDroneMoveA{0%,100%{transform:translate3d(0,0,0) scale(1);}50%{transform:translate3d(26px,-12px,0) scale(1.04);}}
@keyframes utmDroneMoveB{0%,100%{transform:translate3d(0,0,0) scale(.82);}50%{transform:translate3d(-20px,10px,0) scale(.88);}}
@keyframes utmDronePulse{0%{transform:scale(.7);opacity:.62;}100%{transform:scale(1.9);opacity:0;}}
@keyframes utmDronePulseFloat{0%,100%{filter:drop-shadow(0 0 0 rgba(58,64,129,0));}50%{filter:drop-shadow(0 0 18px rgba(58,64,129,.18));}}
@keyframes utmDroneColorShift{
0%{
filter:none;
}
45%{
filter:none;
}
50%{
filter:drop-shadow(0 0 10px rgba(243,199,104,.42));
}
55%{
filter:drop-shadow(0 0 10px rgba(243,199,104,.42));
}
100%{
filter:none;
}
@keyframes utmAirFlow{0%,100%{transform:translateX(0);}
50%{transform:translateX(-18px);}
}
.airspace-transition-section {
position: relative;
height: 100vh;
overflow: hidden;
background:
radial-gradient(circle at 12% 18%, rgba(58,64,129,.08), transparent 32%),
radial-gradient(circle at 88% 18%, rgba(58,64,129,.06), transparent 34%),
linear-gradient(180deg, #f7f9ff 0%, #ffffff 100%);
@keyframes utmDroneMoveA{0%,100%{transform:translate3d(0,0,0) scale(1);}
50%{transform:translate3d(26px,-12px,0) scale(1.04);}
}
.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;
@keyframes utmDroneMoveB{0%,100%{transform:translate3d(0,0,0) scale(.82);}
50%{transform:translate3d(-20px,10px,0) scale(.88);}
}
.airspace-panel {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 8vw;
@keyframes utmDronePulse{0%{transform:scale(.7);opacity:.62;}
100%{transform:scale(1.9);opacity:0;}
}
.airspace-panel--utm {
background: transparent;
}
.airspace-panel--uam {
background:
radial-gradient(circle at 72% 34%, rgba(112,180,255,.12), transparent 34%),
radial-gradient(circle at 42% 78%, rgba(58,64,129,.08), transparent 28%);
@keyframes utmDronePulseFloat{0%,100%{filter:drop-shadow(0 0 0 rgba(58,64,129,0));}
50%{filter:drop-shadow(0 0 18px rgba(58,64,129,.18));}
}
.airspace-panel p {
margin: 0 0 18px;
font-size: 12px;
font-weight: 800;
letter-spacing: .26em;
color: #3a4081;
@keyframes utmDroneColorShift{0%{filter:none;}
45%{filter:none;}
50%{filter:drop-shadow(0 0 10px rgba(243,199,104,.42));}
55%{filter:drop-shadow(0 0 10px rgba(243,199,104,.42));}
100%{filter:none;}
}
.airspace-panel h2 {
margin: 0;
max-width: 760px;
font-size: clamp(48px, 6vw, 96px);
font-weight: 800;
line-height: .96;
letter-spacing: -.08em;
color: #0e1120;
}
.airspace-lines {
position: absolute;
inset: 0;
z-index: 5;
pointer-events: none;
}
/* .airspace-line {
position: absolute;
left: 8vw;
height: 1px;
border-radius: 999px;
background:
linear-gradient(
90deg,
rgba(58,64,129,0),
rgba(58,64,129,.06),
rgba(58,64,129,.14),
rgba(58,64,129,.06),
rgba(58,64,129,0)
);
/* ─── uam ─── */
.airspace-transition-section{position:relative;min-height:100vh;overflow:hidden;background:radial-gradient(circle at 12% 8%,rgba(58,64,129,.04),transparent 30%),radial-gradient(circle at 88% 10%,rgba(58,64,129,.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-panel{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:0 8vw;}
.airspace-panel--utm{background:transparent;}
.airspace-panel--uam{background:radial-gradient(circle at 72% 34%,rgba(112,180,255,.12),transparent 34%),radial-gradient(circle at 42% 78%,rgba(58,64,129,.08),transparent 28%);}
.airspace-panel p{margin:0 0 18px;font-size:12px;font-weight:800;letter-spacing:.26em;color:#3a4081;}
.airspace-panel h2{margin:0;max-width:760px;font-size:clamp(48px,6vw,96px);font-weight:800;line-height:.96;letter-spacing:-.08em;color:#0e1120;}
.airspace-lines{position:absolute;inset:0;z-index:5;pointer-events:none;}
.airspace-moving-dot{position:absolute;left:68%;top:49%;z-index:6;width:54px;height:54px;border-radius:50%;background:#3a4081;border:1px solid rgba(58,64,129,.14);box-shadow:0 0 0 12px rgba(58,64,129,.06),0 20px 50px rgba(58,64,129,.18);transform-origin:center center;}
.airspace-moving-dot::before{content:"";position:absolute;inset:20px;border-radius:50%;background:#ffffff;opacity:.9;}
filter: blur(.4px);
opacity: .55;
mix-blend-mode: multiply;
transform-origin: left center;
}
.airspace-line::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(
90deg,
transparent 0%,
rgba(255,255,255,.65) 18%,
rgba(255,255,255,0) 42%
);
mix-blend-mode: screen;
}
.airspace-line--1 {
top: 36%;
width: 62vw;
transform: rotate(-8deg);
}
.airspace-line--2 {
top: 48%;
width: 74vw;
transform: rotate(3deg);
}
.airspace-line--3 {
top: 60%;
width: 58vw;
transform: rotate(10deg);
}
.airspace-line--4 {
top: 70%;
width: 46vw;
transform: rotate(-4deg);
opacity: .52;
} */
.airspace-moving-dot {
position: absolute;
left: 50%;
top: 49%;
z-index: 6;
width: 54px;
height: 54px;
border-radius: 50%;
background: rgba(255,255,255,.78);
border: 1px solid rgba(58,64,129,.14);
box-shadow:
0 0 0 12px rgba(58,64,129,.06),
0 20px 50px rgba(58,64,129,.18);
}
.airspace-moving-dot::before {
content: "";
position: absolute;
inset: 16px;
border-radius: 50%;
background: #3a4081;
box-shadow: 0 0 18px rgba(58,64,129,.42);
}
.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);}
@media (max-width: 768px) {
.airspace-panel {
padding: 0 28px;
}
.airspace-panel h2 {
font-size: 44px;
}
.airspace-line {
left: 28px;
}
@media (max-width:768px){.airspace-panel{padding:0 28px;}
.airspace-panel h2{font-size:44px;}
.airspace-line{left:28px;}
}
@keyframes uamShine{0%,48%{transform:translateX(-120%);opacity:0;}58%{opacity:.75;}76%,100%{transform:translateX(120%);opacity:0;}}

4
src/pages/MainPage.jsx
Unescape View File

@ -1,15 +1,13 @@
import MainVisual from "../components/main/MainVisual";
import MainUtm from "../components/main/MainUtm";
import MainUam from "../components/main/MainUam";
import MainCameraTransition from "../components/main/MainCameraTransition";
function MainPage() {
return (
<main className="main-page">
<MainVisual />
<MainUtm />
<MainCameraTransition />
{/* <MainUam /> */}
<MainUam />
</main>
);
}

Write Preview
Loading…
Cancel
Save