use dioxus::prelude::*;

#[component]
pub fn IntroductionCard() -> Element {
    rsx! {
        div { class: "items-center justify-center w-full p-8 space-y-4 text-lg text-center overflow-wrap text-alice-werefox-red-dark dark:text-alice-werefox-red-light",
            div { class: "relative inline-block object-contain w-8 h-8 mb-1 align-middle",
                img {
                    src: "/emoji/:alicecoolmlem:.png",
                    alt: "Alice with sunglasses and her tongue out"
                }
            }
            div { p { "\"A pop punk dragon on the Internet\"" } }
            div { p { "\"Somewhere between a hot date and a hot mess\"" } }
            div { p { "\"A poetic disaster, and owns it\"" } }
            div {
                p {
                    "Down below, I've got some more neat little pages and useful info you can look at. "
                }
            }
            div { class: "relative inline-block object-contain w-8 h-8 mb-1 align-middle",
                img {
                    src: "/emoji/:aliceheartblack:.png",
                    alt: "Alice chomping on black heart"
                }
            }
        }
    }
}
