tugasnisa/app/routes/about.tsx

import { useState } from "react";

export default function About() {

    const [hearts, setHearts] = useState([]);

    const createHearts = () => {
        const newHearts = [];
        for (let i = 0; i < 8; i++) {
            newHearts.push({
                id: Math.random(),
                left: Math.random() * 100,
                delay: Math.random() * 0.5
            });
        }
        setHearts([...hearts, ...newHearts]);

        // hapus setelah animasi selesai
        setTimeout(() => {
            setHearts([]);
        }, 1000);
    };

    const styles = {
        container: {
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            minHeight: "100vh",
            background: "linear-gradient(to bottom, #ffc0cb, #ffffff)",
            fontFamily: "Arial, sans-serif",
            position: "relative",
            overflow: "hidden"
        },
        card: {
            backgroundColor: "#ffffff",
            padding: "30px",
            borderRadius: "20px",
            boxShadow: "0 4px 15px rgba(0,0,0,0.2)",
            maxWidth: "500px",
            width: "100%",
            textAlign: "center",
            zIndex: 2,

            opacity: 0,
            transform: "translateY(30px)",
            animation: "fadeInUp 1s ease forwards",
            transition: "all 0.3s ease",
            cursor: "pointer"
        },
        heartClick: {
            position: "absolute",
            fontSize: "20px",
            animation: "popLove 1s ease forwards"
        },
        love: {
            position: "absolute",
            color: "pink",
            fontSize: "20px",
            animation: "floatUp 5s linear infinite"
        },
        star: {
            position: "absolute",
            color: "#fff",
            fontSize: "15px",
            animation: "fallDown 6s linear infinite"
        }
    };

    return(
        <div style={styles.container}>

            <style>
                {`
                @keyframes fadeInUp {
                    to { opacity: 1; transform: translateY(0); }
                }

                @keyframes floatUp {
                    0% { transform: translateY(100vh); opacity: 0; }
                    50% { opacity: 1; }
                    100% { transform: translateY(-10vh); opacity: 0; }
                }

                @keyframes fallDown {
                    0% { transform: translateY(-10vh); opacity: 0; }
                    50% { opacity: 1; }
                    100% { transform: translateY(100vh); opacity: 0; }
                }

                @keyframes popLove {
                    0% { transform: scale(0) translateY(0); opacity: 1; }
                    100% { transform: scale(1.5) translateY(-80px); opacity: 0; }
                }

                .card-hover:hover {
                    transform: scale(1.05);
                    box-shadow: 0 0 25px rgba(255, 105, 180, 0.8),
                                0 0 50px rgba(255, 182, 193, 0.6);
                }
                `}
            </style>

            {/* LOVE TERBANG */}
            <span style={{...styles.love, left: "10%", animationDelay: "0s"}}>💗</span>
            <span style={{...styles.love, left: "30%", animationDelay: "2s"}}>💖</span>
            <span style={{...styles.love, left: "70%", animationDelay: "4s"}}>💞</span>

            {/* BINTANG */}
            <span style={{...styles.star, left: "20%", animationDelay: "1s"}}>⭐</span>
            <span style={{...styles.star, left: "50%", animationDelay: "3s"}}>✨</span>
            <span style={{...styles.star, left: "80%", animationDelay: "5s"}}>⭐</span>

            {/* LOVE SAAT DIKLIK */}
            {hearts.map((h) => (
                <span
                    key={h.id}
                    style={{
                        ...styles.heartClick,
                        left: h.left + "%",
                        bottom: "40%"
                    }}
                >
                    💖
                </span>
            ))}

            {/* CARD */}
            <div 
                style={styles.card} 
                className="card-hover"
                onClick={createHearts}
            >
                <h1 style={{fontSize: "40px", marginBottom: "20px", color: "#ff4d88"}}>ABOUT</h1>

                <h2 style={{fontSize: "24px", marginBottom: "10px", color: "#ff66a3"}}>tentang saya</h2>
                <p style={{fontSize: "18px"}}>nama saya nisa sahwa afipah, bisa di panggil ica</p>
                <p style={{fontSize: "18px"}}>saya sekolah di smk guna cipta</p>
                <p style={{fontSize: "18px"}}>saya di sekolah mempunyai kegiatan tambahan</p>
                <p style={{fontSize: "18px"}}>yaitu saya mengikuti kegiatan anggota OSIS,</p> 
                <p style={{fontSize: "18px"}}>tapi saya kini naik jabatan menjadi anggota MPK</p>
                <p style={{fontSize: "18px"}}>nah saya di kls juga menjadi wakil ketua kelas</p>
                <p style={{fontSize: "18px"}}>dan saya juga mengikuti eksul paskibra,karawitan dan badminton</p>
                <p style={{fontSize: "18px"}}>dan kegiatan di luar sekolah juga saya mengikuti sanggar tari seni</p>
                <p style={{fontSize: "18px"}}>hobi saya menari dan menyanyi</p>
            </div>
        </div>
    );
}