chpark/slot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

V4 cinematic Hero + glass + hover contrast fix; verify 3050/3050

Browse Source 
Hero V4:
- Full-bleed mesh-cinematic background (4 radial color blobs + grid + animated conic aurora)
- Headline: 64px black weight, hue-sliding gradient text (8s loop)
- 3 floating glow orbs animated at 7s intervals
- 4 CTA pills: 보증 (white), 먹튀 (rose), 슬생TV (glass), 슬생복권 (gradient amber)
- KICK status card → glass panel with tilt-on-hover + green CTA glow

Header hover:
- top-level menu: explicit color:#fff + textShadow + z-10 (so the conic aurora can't bleed over text)
- hover:bg-black/25 (was bg-white/10) + yellow underline shadow indicator
- font-extrabold instead of font-semibold

CSS additions (globals.css):
- .bg-mesh-cinematic, .glass, .text-hue, .tilt, .orb classes
- new keyframes: orb-float, hue-slide

Verify: 50 iter × 61 = 3050/3050 PASS (already with all 38 admin walks)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
chpark
2026-04-29 12:20:09 +09:00
parent ce98dcaf27
commit 2e4f07442a
3 changed files with 141 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
next-app/apps/web/src/app/globals.css
+62
View File
@@ -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 {
next-app/apps/web/src/components/Chrome/Header.tsx
+2 -1
View File
@@ -195,7 +195,8 @@ function MegaNav({ menus, isDark: _isDark }: { menus: MenuItem[]; isDark: boolea
>
<Link
href={m.href || '#'}
className="flex items-center gap-1.5 whitespace-nowrap px-4 py-3.5 text-[14.5px] font-bold tracking-tight text-white transition hover:bg-white/20 hover:shadow-[inset_0_-3px_0_0_rgba(255,255,255,0.85)]"
style={{ color: '#ffffff', textShadow: '0 1px 2px rgba(0,0,0,0.35)' }}
className="relative z-10 flex items-center gap-1.5 whitespace-nowrap px-4 py-3.5 text-[14.5px] font-extrabold tracking-tight transition hover:bg-black/25 hover:shadow-[inset_0_-3px_0_0_#fde047]"
>
{m.icon && <span aria-hidden>{m.icon}</span>}
<span>{m.label}</span>
next-app/apps/web/src/components/home/Hero.tsx
+77 -54
View File
@@ -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 (
<section className="relative overflow-hidden rounded-3xl bg-brand-radial p-8 text-white shadow-[0_18px_38px_rgba(60,30,120,0.25)]">
{/* Decorative blur orbs */}
<div className="pointer-events-none absolute -top-20 -right-20 h-72 w-72 rounded-full bg-brand-400/40 blur-3xl" />
<div className="pointer-events-none absolute -bottom-32 -left-10 h-72 w-72 rounded-full bg-fuchsia-500/30 blur-3xl" />
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시' };
<div className="grid gap-8 md:grid-cols-[1.4fr_1fr]">
<div className="relative">
<span className="inline-flex items-center gap-1 rounded-full bg-white/10 px-3 py-1 text-[11px] font-bold tracking-wider backdrop-blur">
<Megaphone size={12} /> 슬생닷컴 ✕ 안전 슬롯 커뮤니티
</span>
<motion.h1
initial={{ opacity: 0, y: 18 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }}
className="mt-4 text-4xl font-extrabold leading-tight tracking-tight md:text-5xl"
return (
<section className="bg-mesh-cinematic relative overflow-hidden rounded-[36px] p-10 text-white shadow-[0_30px_70px_rgba(40,15,80,0.45)] md:p-14">
{/* Floating glow orbs */}
<div className="orb pointer-events-none absolute -top-32 -left-24 h-80 w-80 rounded-full bg-pink-500/40 blur-3xl" />
<div className="orb pointer-events-none absolute -bottom-32 -right-24 h-96 w-96 rounded-full bg-cyan-400/30 blur-3xl" style={{ animationDelay: '2s' }} />
<div className="orb pointer-events-none absolute top-1/2 left-1/3 h-64 w-64 rounded-full bg-violet-500/30 blur-3xl" style={{ animationDelay: '4s' }} />
<div className="relative grid gap-10 md:grid-cols-[1.4fr_1fr] md:items-center">
<div>
<motion.div
initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }}
className="inline-flex items-center gap-2 rounded-full bg-white/10 px-4 py-1.5 text-[12px] font-bold tracking-[0.18em] backdrop-blur-md ring-1 ring-white/15"
>
진짜 후기로 검증된<br />
<span className="bg-gradient-to-r from-amber-300 via-pink-300 to-violet-300 bg-clip-text text-transparent">안전한 슬롯사이트</span>를 한눈에.
<Megaphone size={13} /> SLOT-LIFE · 슬롯/카지노 No.1 커뮤니티
</motion.div>
<motion.h1
initial={{ opacity: 0, y: 32 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.6, delay: 0.1 }}
className="mt-5 text-[44px] font-black leading-[1.05] tracking-tight md:text-[64px] md:leading-[1.02]"
>
진짜 후기로<br />
<span className="text-hue">검증된 슬롯</span>을<br />
한 곳에서.
</motion.h1>
<p className="mt-4 max-w-xl text-[15px] leading-relaxed text-white/85">
보증업체 검수, 먹튀신고, 게임 포인트, 회원랭킹, 슬생TV 방송까지 — 슬롯/카지노에 필요한 모든 도구를 한 곳에서 만나보세요.
</p>
<motion.p
initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 0.3, duration: 0.6 }}
className="mt-5 max-w-xl text-[15.5px] leading-relaxed text-white/85 md:text-[17px]"
>
보증업체 검수·먹튀신고·포인트 게임·슬생TV — 슬롯/카지노에 필요한 모든 도구가 한 화면에.
</motion.p>
{/* Headline ticker */}
<div className="mt-5 overflow-hidden rounded-2xl border border-white/10 bg-black/20 backdrop-blur-sm">
<div className="flex items-center gap-2 px-3 py-2 text-[12px]">
<span className="rounded-md bg-amber-300 px-2 py-0.5 font-bold text-amber-900">📢 헤드라인</span>
<motion.div
initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 0.4 }}
className="glass marquee mt-6 overflow-hidden rounded-2xl"
>
<div className="flex items-center gap-3 px-4 py-2.5 text-[13px]">
<span className="rounded-md bg-amber-300 px-2.5 py-1 font-extrabold text-amber-900">📢 헤드라인</span>
<div className="marquee flex-1">
<div className="ticker-track">
{[...headlines, ...headlines].map((h, i) => (
<Link key={i} href={h.href} className="text-white/90 hover:text-white">● {h.subject}</Link>
<Link key={i} href={h.href} className="text-white/95 hover:text-amber-300">● {h.subject}</Link>
))}
</div>
</div>
</div>
</div>
</motion.div>
<div className="mt-5 flex flex-wrap gap-2">
<Link href="/guarantee" className="inline-flex items-center gap-1 rounded-full bg-white px-4 py-2 text-[13px] font-bold text-brand-700 hover:bg-brand-50">
보증사이트 보기 <ChevronRight size={14} />
<motion.div
initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.5 }}
className="mt-6 flex flex-wrap gap-2.5"
>
<Link href="/guarantee" className="group inline-flex items-center gap-1.5 rounded-full bg-white px-5 py-2.5 text-[13.5px] font-extrabold text-violet-900 shadow-[0_8px_24px_rgba(255,255,255,0.25)] hover:shadow-[0_12px_32px_rgba(255,255,255,0.40)]">
<ShieldCheck size={15} /> 보증사이트
<ChevronRight size={14} className="transition group-hover:translate-x-0.5" />
</Link>
<Link href="/mukti" className="inline-flex items-center gap-1 rounded-full bg-white/10 px-4 py-2 text-[13px] font-bold text-white hover:bg-white/20">
먹튀사이트 검수
<Link href="/mukti" className="inline-flex items-center gap-1.5 rounded-full bg-rose-600/90 px-5 py-2.5 text-[13.5px] font-extrabold text-white ring-1 ring-rose-400/50 hover:bg-rose-600">
<Flame size={15} /> 먹튀 신고
</Link>
<Link href="/lottery_ticket" className="inline-flex items-center gap-1 rounded-full bg-white/10 px-4 py-2 text-[13px] font-bold text-white hover:bg-white/20">
<Link href="/tv" className="inline-flex items-center gap-1.5 rounded-full bg-white/10 px-5 py-2.5 text-[13.5px] font-extrabold text-white ring-1 ring-white/20 backdrop-blur hover:bg-white/15">
<Tv size={15} /> 슬생TV
</Link>
<Link href="/lottery_ticket" className="inline-flex items-center gap-1.5 rounded-full bg-gradient-to-r from-amber-400 to-orange-500 px-5 py-2.5 text-[13.5px] font-extrabold text-amber-950 shadow-[0_8px_22px_rgba(251,146,60,0.45)] hover:shadow-[0_12px_30px_rgba(251,146,60,0.60)]">
🎟 슬생복권
</Link>
</div>
</div>
{/* KICK 방송 상태 박스 */}
<div className="relative grid place-items-center">
<motion.div
initial={{ opacity: 0, scale: 0.96 }} animate={{ opacity: 1, scale: 1 }} transition={{ delay: 0.1 }}
className="w-full max-w-sm rounded-3xl bg-white/10 p-6 text-center backdrop-blur-md ring-1 ring-white/15"
>
<span className={`inline-flex items-center gap-2 rounded-full bg-black/30 px-3 py-1 text-[12px] font-bold ${kickStatus === 'live' ? 'text-rose-300' : 'text-amber-200'}`}>
<span className={`h-2 w-2 rounded-full ${status.dot}`} /> 큰손형 방송
</span>
<h3 className="mt-3 text-2xl font-extrabold tracking-tight">{status.label}</h3>
<p className="mt-1 text-[13px] text-white/80">{status.sub}</p>
<a
href="https://kick.com/bighandbro" target="_blank" rel="noreferrer"
className="mt-5 inline-flex items-center gap-1.5 rounded-full bg-[#53fc18] px-5 py-2.5 text-[13px] font-extrabold text-black shadow-[0_8px_22px_rgba(83,252,24,0.45)] hover:bg-[#5cff20]"
>
KICK 채널 바로가기 →
</a>
<p className="mt-3 text-[11px] text-white/60">평일 14:00 ~ 22:00 (KST)</p>
</motion.div>
</div>
{/* KICK glass card */}
<motion.aside
initial={{ opacity: 0, scale: 0.94 }} animate={{ opacity: 1, scale: 1 }} transition={{ delay: 0.2, type: 'spring', stiffness: 140, damping: 16 }}
className="glass tilt relative grid place-items-center rounded-3xl p-7"
>
<span className={`inline-flex items-center gap-2 rounded-full bg-black/40 px-3 py-1 text-[11.5px] font-extrabold tracking-widest ${kickStatus === 'live' ? 'text-rose-300' : 'text-amber-200'}`}>
<span className={`h-2 w-2 rounded-full ${status.dot}`} /> 큰손형 방송
</span>
<h3 className="mt-3 text-center text-[26px] font-black tracking-tight">{status.label}</h3>
<p className="mt-1 text-center text-[13px] text-white/75">{status.sub}</p>
<a
href="https://kick.com/bighandbro" target="_blank" rel="noreferrer"
className="mt-5 inline-flex items-center gap-1.5 rounded-full bg-[#53fc18] px-7 py-3 text-[14px] font-black text-black shadow-[0_8px_28px_rgba(83,252,24,0.55)] hover:bg-[#5cff20] hover:shadow-[0_14px_38px_rgba(83,252,24,0.75)]"
>
KICK 채널 바로가기 →
</a>
<div className="mt-3 grid grid-cols-3 gap-1 text-[10.5px] text-white/60">
<div className="rounded-md bg-white/5 px-2 py-1.5 text-center">평일</div>
<div className="rounded-md bg-white/5 px-2 py-1.5 text-center">14–22시</div>
<div className="rounded-md bg-white/5 px-2 py-1.5 text-center">KST</div>
</div>
</motion.aside>
</div>
</section>
);