diff --git a/next-app/apps/web/src/app/globals.css b/next-app/apps/web/src/app/globals.css index 42cd137..cf82786 100644 --- a/next-app/apps/web/src/app/globals.css +++ b/next-app/apps/web/src/app/globals.css @@ -112,6 +112,68 @@ details > summary::-webkit-details-marker { display: none; } .tile-glow { animation: float-y 3.5s ease-in-out infinite; } .live-pulse { animation: pulse-ring 1.5s ease-out infinite; } +/* V4 Cinematic mesh background — used behind Hero */ +.bg-mesh-cinematic { + position: relative; + background: + radial-gradient(ellipse 1200px 600px at 20% 0%, #ff6dc7 0%, transparent 55%), + radial-gradient(ellipse 1000px 700px at 100% 30%, #6dd6ff 0%, transparent 50%), + radial-gradient(ellipse 1100px 600px at 50% 110%, #ffaf7b 0%, transparent 55%), + radial-gradient(ellipse 700px 700px at 90% 100%, #a78bfa 0%, transparent 60%), + linear-gradient(135deg, #0a0218 0%, #150529 35%, #1a0635 70%, #0a0218 100%); + isolation: isolate; +} +.bg-mesh-cinematic::before { + content: ""; position: absolute; inset: 0; z-index: -1; + background-image: + repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 60px), + repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 60px); + mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 30%, transparent 90%); +} +.bg-mesh-cinematic::after { + content: ""; position: absolute; inset: -25%; z-index: -1; + background: conic-gradient(from 0deg, transparent 0deg, rgba(255,109,199,0.18) 50deg, transparent 110deg, rgba(109,214,255,0.18) 200deg, transparent 260deg, rgba(255,175,123,0.20) 320deg, transparent 360deg); + animation: aurora-rotate 22s linear infinite; + mask-image: radial-gradient(closest-side, black 25%, transparent 70%); +} + +/* Glass panel */ +.glass { + background: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04)); + backdrop-filter: blur(20px) saturate(180%); + -webkit-backdrop-filter: blur(20px) saturate(180%); + border: 1px solid rgba(255,255,255,0.18); + box-shadow: 0 22px 50px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.20); +} + +/* Glow orbs that float */ +@keyframes orb-float { + 0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.55; } + 50% { transform: translate(20px, -30px) scale(1.08); opacity: 0.85; } +} +.orb { animation: orb-float 7s ease-in-out infinite; will-change: transform; } + +/* Headline gradient text shimmer */ +@keyframes hue-slide { + 0% { background-position: 0% 50%; } + 100% { background-position: 200% 50%; } +} +.text-hue { + background: linear-gradient(90deg, #ffd56b, #ff6dc7, #6dd6ff, #a78bfa, #ffd56b); + background-size: 200% 100%; + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; + animation: hue-slide 8s linear infinite; +} + +/* Tilted card hover */ +.tilt { + transition: transform 240ms cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 240ms; + transform-style: preserve-3d; +} +.tilt:hover { transform: perspective(900px) rotateX(2.5deg) rotateY(-3deg) translateY(-3px); } + /* Numeric counters */ .tabular { font-variant-numeric: tabular-nums; } @keyframes count-up { diff --git a/next-app/apps/web/src/components/Chrome/Header.tsx b/next-app/apps/web/src/components/Chrome/Header.tsx index 6a677fc..d338a81 100644 --- a/next-app/apps/web/src/components/Chrome/Header.tsx +++ b/next-app/apps/web/src/components/Chrome/Header.tsx @@ -195,7 +195,8 @@ function MegaNav({ menus, isDark: _isDark }: { menus: MenuItem[]; isDark: boolea > {m.icon && {m.icon}} {m.label} diff --git a/next-app/apps/web/src/components/home/Hero.tsx b/next-app/apps/web/src/components/home/Hero.tsx index 212ae94..5cf534e 100644 --- a/next-app/apps/web/src/components/home/Hero.tsx +++ b/next-app/apps/web/src/components/home/Hero.tsx @@ -1,85 +1,108 @@ 'use client'; import { motion } from 'framer-motion'; import Link from 'next/link'; -import { Megaphone, ChevronRight } from 'lucide-react'; +import { Megaphone, ChevronRight, Flame, ShieldCheck, Tv } from 'lucide-react'; export default function Hero({ headlines, kickStatus }: { headlines: { id: string; subject: string; href: string }[]; kickStatus: 'live' | 'break' | 'offline'; }) { const status = - kickStatus === 'live' ? { dot: 'bg-rose-500 animate-pulse', label: 'LIVE 방송 중', sub: '큰손형 라이브가 진행 중입니다' } : - kickStatus === 'break' ? { dot: 'bg-amber-400', label: '잠시 쉬는시간입니다', sub: '큰손형 방송이 곧 돌아옵니다' } : - { dot: 'bg-zinc-400', label: '오늘은 휴방입니다', sub: '평일 오후 2시 ~ 10시 방송' }; - return ( -
- {/* Decorative blur orbs */} -
-
+ kickStatus === 'live' ? { dot: 'bg-rose-500 live-pulse', label: 'LIVE 방송 중', sub: '큰손형 라이브 진행 중' } : + kickStatus === 'break' ? { dot: 'bg-amber-400', label: '잠시 쉬는 시간', sub: '곧 돌아옵니다' } : + { dot: 'bg-zinc-400', label: '오늘은 휴방', sub: '평일 오후 2~10시' }; -
-
- - 슬생닷컴 ✕ 안전 슬롯 커뮤니티 - - + {/* Floating glow orbs */} +
+
+
+ +
+
+ - 진짜 후기로 검증된
- 안전한 슬롯사이트를 한눈에. + SLOT-LIFE · 슬롯/카지노 No.1 커뮤니티 +
+ + + 진짜 후기로
+ 검증된 슬롯
+ 한 곳에서.
-

- 보증업체 검수, 먹튀신고, 게임 포인트, 회원랭킹, 슬생TV 방송까지 — 슬롯/카지노에 필요한 모든 도구를 한 곳에서 만나보세요. -

+ + + 보증업체 검수·먹튀신고·포인트 게임·슬생TV — 슬롯/카지노에 필요한 모든 도구가 한 화면에. + {/* Headline ticker */} -
-
- 📢 헤드라인 + +
+ 📢 헤드라인
{[...headlines, ...headlines].map((h, i) => ( - ● {h.subject} + ● {h.subject} ))}
-
+ -
- - 보증사이트 보기 + + + 보증사이트 + - - 먹튀사이트 검수 + + 먹튀 신고 - + + 슬생TV + + 🎟 슬생복권 -
-
- - {/* KICK 방송 상태 박스 */} -
- - - 큰손형 방송 - -

{status.label}

-

{status.sub}

- - KICK 채널 바로가기 → - -

평일 14:00 ~ 22:00 (KST)

+ + {/* KICK glass card */} + + + 큰손형 방송 + +

{status.label}

+

{status.sub}

+ + KICK 채널 바로가기 → + +
+
평일
+
14–22시
+
KST
+
+
);