File size: 1,699 Bytes
59c3ada |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
import type React from "react";
import { Sparkles } from "lucide-react";
import NeoButton from "./NeoButton";
interface LandingScreenProps {
isVisible: boolean;
onLoad: () => void;
playHoverSound?: () => void;
}
const LandingScreen: React.FC<LandingScreenProps> = ({ isVisible, onLoad, playHoverSound }) => {
const transitionClass = isVisible ? "opacity-100" : "opacity-0 -translate-y-10 pointer-events-none";
return (
<div
className={`absolute inset-0 flex flex-col items-center justify-center transition-all duration-700 ease-in-out ${transitionClass}`}
>
<div className="text-center p-4">
<h1 className="text-6xl md:text-8xl font-black tracking-tighter mb-6 animate-sway">
✨ Bedtime Story ✨<br />
Generator
</h1>
<p className="text-2xl md:text-3xl mb-10">Craft magical tales in seconds.</p>
<NeoButton
onClick={onLoad}
className="text-2xl px-8 py-4 mb-4 animate-pulse-grow"
playHoverSound={playHoverSound}
>
<Sparkles className="mr-1" /> Start Creating
</NeoButton>
</div>
<footer className="absolute bottom-5 left-0 right-0">
<div className="flex items-center justify-center text-gray-500 text-sm">
<span>Built with </span>
<a
href="https://github.com/huggingface/transformers.js"
target="_blank"
rel="noopener noreferrer"
className="ml-1 font-semibold text-gray-600 hover:text-black transition-colors flex items-center"
>
🤗 Transformers.js
</a>
</div>
</footer>
</div>
);
};
export default LandingScreen;
|