5892125740
- Vite + React 19 + Tailwind CSS - 4가지 디자인 레퍼런스 통합 (CRT 스크린, 크로스헤어, 노이즈, 인스트루먼트) - 섹션 9개: Hero, Features, HowItWorks, Privacy, Pricing, FAQ, CTA, Header, Footer - 재사용 컴포넌트 8개 (Badge, Container, InstrumentCard, GlowButton 등) - i18n 10개 국어 (en/ko/ja/zh/es/fr/de/pt/ru/vi) - GitHub Pages 자동 배포 워크플로우
97 lines
3.1 KiB
JavaScript
97 lines
3.1 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
export default {
|
|
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
brand: {
|
|
amber: '#f25b29',
|
|
'amber-light': '#ff7a4d',
|
|
'amber-dark': '#c44a22',
|
|
'amber-glow': 'rgba(242,91,41,0.6)',
|
|
'amber-dim': 'rgba(242,91,41,0.15)',
|
|
'amber-muted': 'rgba(242,91,41,0.08)',
|
|
},
|
|
surface: {
|
|
950: '#0a0a0c',
|
|
900: '#0d0d0f',
|
|
800: '#131315',
|
|
700: '#19191b',
|
|
600: '#1e1f21',
|
|
500: '#242427',
|
|
400: '#2a2a2d',
|
|
300: '#333338',
|
|
200: '#3a3b3f',
|
|
100: '#4a4b50',
|
|
},
|
|
neutral: {
|
|
50: '#fafafa',
|
|
100: '#f0f0f1',
|
|
200: '#d4d4d8',
|
|
300: '#a1a1aa',
|
|
400: '#71717a',
|
|
500: '#52525b',
|
|
600: '#3f3f46',
|
|
},
|
|
},
|
|
fontFamily: {
|
|
display: ['"Space Grotesk"', 'sans-serif'],
|
|
sans: [
|
|
'-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto',
|
|
'"Helvetica Neue"', 'Arial', 'sans-serif',
|
|
],
|
|
mono: ['"JetBrains Mono"', '"Fira Code"', 'monospace'],
|
|
},
|
|
fontSize: {
|
|
'hero': ['clamp(3.5rem, 12vw, 10rem)', { lineHeight: '0.9', letterSpacing: '-0.04em' }],
|
|
'display': ['clamp(2.5rem, 6vw, 5rem)', { lineHeight: '1', letterSpacing: '-0.03em' }],
|
|
'micro': ['0.625rem', { lineHeight: '1.2', letterSpacing: '0.1em' }],
|
|
'nano': ['0.5625rem', { lineHeight: '1.2', letterSpacing: '0.12em' }],
|
|
},
|
|
spacing: {
|
|
'18': '4.5rem',
|
|
'22': '5.5rem',
|
|
'26': '6.5rem',
|
|
'30': '7.5rem',
|
|
'34': '8.5rem',
|
|
},
|
|
borderRadius: {
|
|
'instrument': '2px',
|
|
'panel': '6px',
|
|
'card': '12px',
|
|
},
|
|
boxShadow: {
|
|
'inset-panel': 'inset 0 2px 6px rgba(0,0,0,0.6), 0 1px 1px rgba(255,255,255,0.04)',
|
|
'chassis': '0 1px 3px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.04)',
|
|
'glow-sm': '0 0 10px rgba(242,91,41,0.3)',
|
|
'glow-md': '0 0 20px rgba(242,91,41,0.25), 0 0 40px rgba(242,91,41,0.1)',
|
|
'glow-lg': '0 0 30px rgba(242,91,41,0.3), 0 0 60px rgba(242,91,41,0.15), 0 0 90px rgba(242,91,41,0.05)',
|
|
},
|
|
animation: {
|
|
'glow-pulse': 'glow-pulse 2s ease-in-out infinite',
|
|
'scan': 'scan 8s linear infinite',
|
|
'blink': 'blink 1.4s ease-in-out infinite',
|
|
'fade-in-up': 'fade-in-up 0.6s ease-out forwards',
|
|
},
|
|
keyframes: {
|
|
'glow-pulse': {
|
|
'0%, 100%': { opacity: '0.4' },
|
|
'50%': { opacity: '1' },
|
|
},
|
|
'scan': {
|
|
'0%': { transform: 'translateY(-100%)' },
|
|
'100%': { transform: 'translateY(100%)' },
|
|
},
|
|
'blink': {
|
|
'0%, 100%': { opacity: '1' },
|
|
'50%': { opacity: '0.3' },
|
|
},
|
|
'fade-in-up': {
|
|
'0%': { opacity: '0', transform: 'translateY(20px)' },
|
|
'100%': { opacity: '1', transform: 'translateY(0)' },
|
|
},
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
}
|