72 lines
2.7 KiB
XML
72 lines
2.7 KiB
XML
import Head from "next/head";
|
|
import Image from "next/image";
|
|
|
|
function MakePoem() {
|
|
return (
|
|
<div className="flex flex-col space-y-4 mx-4 py-4">
|
|
<div>
|
|
<p>
|
|
You are important. I wrote a small poem I hope will help you today.
|
|
</p>
|
|
<p>
|
|
It's not very long, but I'm doing my best, and so are you.
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<p>You are the moon, you are the stars</p>
|
|
<p>Im glad you're here, whomever you are.</p>
|
|
<p>We've been through much; in this life it's true,</p>
|
|
<p>But in the end, you will come through.</p>
|
|
</div>
|
|
<div>
|
|
<p>Much like life, this poem is short</p>
|
|
<p>It doesn't always rhyme, or have a nice beat;</p>
|
|
<p>It might seem wrong, or incomplete;</p>
|
|
<p>It might go on, or so it seems;</p>
|
|
<p>It might feel like you're in a dream.</p>
|
|
</div>
|
|
<div>
|
|
<p>That's not the point, I know in my heart</p>
|
|
<p>I'm glad you're here, whomever you are.</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function Letter() {
|
|
return (
|
|
<div className="min-h-screen font-nerd bg-alice-werefox-grey-light dark:bg-alice-werefox-grey">
|
|
<Head>
|
|
<title>Happy Valentine's Day</title>
|
|
<link rel="icon" href="/favicon.ico" />
|
|
</Head>
|
|
<div className="container space-y-4 mx-auto p-4">
|
|
<div className="flex justify-center py-8">
|
|
<div className="animate-growshrink">
|
|
<div className="relative h-48 w-48">
|
|
<Image
|
|
src="/images/heart-icon.png"
|
|
className=""
|
|
alt="logo"
|
|
fill
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex-col space-y-4">
|
|
<p className="mx-auto max-w-fit flex justify-center bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark border-4 border-alice-werefox-red-dark dark:border-alice-werefox-red text-alice-werefox-red-dark dark:text-alice-werefox-red-light p-4">
|
|
You are important and loved
|
|
</p>
|
|
|
|
<details className="mx-auto max-w-fit space-y-4 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark border-4 border-alice-werefox-red-dark dark:border-alice-werefox-red text-alice-werefox-red-dark dark:text-alice-werefox-red-light p-4">
|
|
<summary className="flex justify-center border-4 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark border-4 border-alice-werefox-red-dark dark:border-alice-werefox-red text-alice-werefox-red-dark dark:text-alice-werefox-red-light p-4">
|
|
Tell Me More
|
|
</summary>
|
|
<MakePoem />
|
|
</details>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|