Migrated pitch-deck from breakpilot-pwa to breakpilot-core. Container: bp-core-pitch-deck on port 3012. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
94 lines
3.1 KiB
TypeScript
94 lines
3.1 KiB
TypeScript
'use client'
|
|
|
|
import { motion } from 'framer-motion'
|
|
import { Language } from '@/lib/types'
|
|
import { t } from '@/lib/i18n'
|
|
import { ArrowRight } from 'lucide-react'
|
|
import GradientText from '../ui/GradientText'
|
|
import BrandName from '../ui/BrandName'
|
|
|
|
interface CoverSlideProps {
|
|
lang: Language
|
|
onNext: () => void
|
|
}
|
|
|
|
export default function CoverSlide({ lang, onNext }: CoverSlideProps) {
|
|
const i = t(lang)
|
|
|
|
return (
|
|
<div className="flex flex-col items-center justify-center text-center min-h-[70vh]">
|
|
{/* Logo / Brand */}
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.5 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 0.8, ease: [0.22, 1, 0.36, 1] }}
|
|
className="mb-8"
|
|
>
|
|
<div className="w-20 h-20 mx-auto mb-6 rounded-2xl bg-gradient-to-br from-indigo-500 to-purple-600
|
|
flex items-center justify-center shadow-lg shadow-indigo-500/30">
|
|
<svg width="40" height="40" viewBox="0 0 40 40" fill="none">
|
|
<path d="M8 12L20 6L32 12V28L20 34L8 28V12Z" stroke="white" strokeWidth="2" fill="none" />
|
|
<path d="M20 6V34" stroke="white" strokeWidth="1.5" opacity="0.5" />
|
|
<path d="M8 12L32 28" stroke="white" strokeWidth="1.5" opacity="0.3" />
|
|
<path d="M32 12L8 28" stroke="white" strokeWidth="1.5" opacity="0.3" />
|
|
<circle cx="20" cy="20" r="4" fill="white" opacity="0.8" />
|
|
</svg>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Company Name */}
|
|
<motion.h1
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6, delay: 0.3 }}
|
|
className="text-5xl md:text-7xl font-bold mb-4 tracking-tight"
|
|
>
|
|
BreakPilot{' '}
|
|
<motion.span
|
|
initial={{ opacity: 0, y: 10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6, delay: 0.5 }}
|
|
>
|
|
<BrandName className="text-5xl md:text-7xl font-bold" />
|
|
</motion.span>
|
|
</motion.h1>
|
|
|
|
{/* Tagline */}
|
|
<motion.p
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ duration: 0.8, delay: 0.6 }}
|
|
className="text-xl md:text-2xl text-white/60 mb-2 max-w-2xl"
|
|
>
|
|
{i.cover.tagline}
|
|
</motion.p>
|
|
|
|
{/* Subtitle */}
|
|
<motion.p
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ duration: 0.5, delay: 0.8 }}
|
|
className="text-sm text-white/30 font-mono tracking-wider mb-12"
|
|
>
|
|
{i.cover.subtitle}
|
|
</motion.p>
|
|
|
|
{/* CTA */}
|
|
<motion.button
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 1.2 }}
|
|
whileHover={{ scale: 1.05 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
onClick={onNext}
|
|
className="group flex items-center gap-2 px-8 py-3 rounded-full
|
|
bg-indigo-500 hover:bg-indigo-600 transition-colors text-white font-medium
|
|
shadow-lg shadow-indigo-500/30"
|
|
>
|
|
{i.cover.cta}
|
|
<ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
|
|
</motion.button>
|
|
</div>
|
|
)
|
|
}
|