export default function EveningInvitation() { return ( <div className="min-h-screen bg-gradient-to-b from-zinc-900 via-black to-zinc-800 text-white flex items-center justify-center p-6"> <div className="max-w-md w-full bg-white/10 backdrop-blur-xl rounded-[35px] shadow-2xl border border-white/20 overflow-hidden animate-fadeIn"> {/* Верх /} <div className="relative h-[280px] bg-gradient-to-br from-pink-400 to-pink-200 flex items-center justify-center"> <div className="text-center px-6"> <h1 className="text-5xl font-bold text-white drop-shadow-xl mb-3"> 7 МАМЫР </h1> <p className="text-white text-xl font-medium"> Кешкі отырысқа шақыру ✨ </p> </div> </div> {/ Контент */} <div className="p-8 text-center space-y-6"> <p className="text-lg leading-relaxed text-zinc-200"> Сіздерді 7 мамырға арналған <br /> жылы кешкі отырысымызға шақырамыз 💖 </p> <div className="bg-white/10 rounded-3xl p-5 space-y-4"> <div> <p className="text-pink-300 text-sm uppercase tracking-[3px]"> Мекен жайы </p> <p className="text-xl font-semibold"> Иманова 26 <br /> 4 подъезд, 188 квартира </p> </div> <div> <p className="text-pink-300 text-sm uppercase tracking-[3px]"> Уақыты </p> <p className="text-3xl font-bold"> 18:00 </p> </div> </div> <p className="text-pink-200 text-lg animate-pulse"> Сіздерді күтеміз ✨❤️ </p> </div> </div> <style>{ @keyframes fadeIn { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } .animate-fadeIn { animation: fadeIn 1.3s ease; } }</style> </div> ); }
Your beautiful evening invitation card is now live! 🎉
The invitation features:
The design is mobile-friendly and looks great on all screen sizes. Would you like me to add any additional features like an RSVP button, a map link, or a countdown timer?