64 lines
2.8 KiB
TypeScript
Executable File
64 lines
2.8 KiB
TypeScript
Executable File
|
|
import React from 'react';
|
|
import Header from '../../components/Header';
|
|
|
|
interface DisplaySectionProps {
|
|
onStartClick?: () => void;
|
|
}
|
|
|
|
const DisplaySection: React.FC<DisplaySectionProps> = ({ onStartClick }) => {
|
|
const videoIds = ['dM8_d6Aud68', 'bb8nKmKcT0c', 'dM8_d6Aud68'];
|
|
|
|
return (
|
|
<div className="w-full h-full flex flex-col bg-[#121a1d] text-white relative overflow-hidden">
|
|
<Header />
|
|
|
|
<div className="content-safe-area pt-24 sm:pt-28">
|
|
{/* Main visual frames container */}
|
|
<div className="flex flex-row justify-center items-center gap-2 sm:gap-6 md:gap-10 lg:gap-14 mb-8 md:mb-16 w-full max-w-6xl">
|
|
{videoIds.map((videoId, index) => (
|
|
<div
|
|
key={`${videoId}-${index}`}
|
|
className={`
|
|
${index === 2 ? 'hidden md:flex' : 'flex'}
|
|
w-[135px] sm:w-[190px] md:w-[230px] lg:w-[280px]
|
|
aspect-[9/16] rounded-[24px] sm:rounded-[40px] md:rounded-[48px]
|
|
bg-black border border-white border-opacity-10
|
|
overflow-hidden relative shadow-[0_30px_80px_rgba(0,0,0,0.9)]
|
|
items-center justify-center transition-all
|
|
`}
|
|
>
|
|
{/* YouTube Embed Container - 9:16 ratio */}
|
|
<div className="absolute inset-0 w-full h-full pointer-events-none overflow-hidden">
|
|
<iframe
|
|
className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[180%] h-[100%] object-cover"
|
|
src={`https://www.youtube.com/embed/${videoId}?autoplay=1&mute=1&loop=1&playlist=${videoId}&controls=0&showinfo=0&rel=0&modestbranding=1&iv_load_policy=3&disablekb=1&playsinline=1`}
|
|
title="YouTube video player"
|
|
frameBorder="0"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
allowFullScreen
|
|
></iframe>
|
|
</div>
|
|
|
|
{/* Device Bezel/Frame */}
|
|
<div className="absolute inset-0 border-[6px] sm:border-[10px] border-[#20282b] rounded-[24px] sm:rounded-[40px] md:rounded-[48px] pointer-events-none z-20"></div>
|
|
{/* Notch */}
|
|
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-1/4 h-3 sm:h-5 bg-[#20282b] rounded-b-2xl z-30 opacity-80"></div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Action Button */}
|
|
<button
|
|
onClick={onStartClick}
|
|
className="py-3 px-14 sm:py-3.5 sm:px-16 rounded-full bg-[#a682ff] hover:bg-[#9570f0] transition-all transform active:scale-95 text-white font-bold text-xs sm:text-base tracking-wide shadow-xl shadow-[#a682ff44] mb-8"
|
|
>
|
|
시작하기
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default DisplaySection;
|