---
import Code from 'astro/components/Code.astro'

import Confettis from '../widgets/ConfettiLauncher.astro'

import AstroLogo from '../assets/astro-icon.svg?raw'
import FlowbiteLogo from '../assets/flowbite-logo.svg?raw'

import * as readMe from '../../README.md'
import { SITE_TITLE } from '../app/constants.js'
---

<div
	class="bg-gradient-to-r from-slate-100 to-slate-200 dark:from-slate-900 dark:to-slate-800 text-slate-800 dark:text-slate-100 mb-20 p-4 lg:p-16 shadow-xl shadow-slate-200 dark:shadow-slate-900"
>
	<header
		class="p-8 flex justify-center items-center flex-wrap flex-col w-full mt-16"
	>
		<div class="flex justify-center w-full">
			<div
				set:html={AstroLogo}
				class="svg-inline w-16 h-16 text-violet-700 dark:text-violet-100"
			/>
		</div>

		<div class="format dark:format-invert lg:format-lg mt-32">
			<p
				class="text-4xl lg:text-8xl dark:text-slate-200 text-slate-600 leading-tight"
			>
				Hello <a
					rel="noopener nofollow"
					href="https://astro.build"
					class="font-bold text-transparent bg-clip-text bg-gradient-to-br from-pink-400 to-violet-800 dark:from-pink-300 dark:to-violet-700 no-underline"
					>Astro</a
				>…
				<br />meet <a
					rel="noopener nofollow"
					href="https://flowbite.com"
					class="font-bold text-blue-600 dark:text-blue-500 no-underline"
					>Flowbite</a
				>!
			</p>

			<div class="flex justify-center w-full">
				<Confettis>
					<button
						type="button"
						class="text-blue-800 hover:text-white border border-blue-700 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2 dark:border-blue-500 dark:text-blue-100 dark:hover:text-white dark:hover:bg-blue-600 dark:focus:ring-blue-800"
						>Click me!</button
					>
				</Confettis>
			</div>
		</div>

		<div class="flex justify-center w-full my-16">
			<div set:html={FlowbiteLogo} class="svg-inline w-16 h-16" />
		</div>
	</header>

	<section class="flex justify-center w-full pb-24">
		<div class="w-full format dark:format-invert">
			<Code
				lang={'powershell' /* Looks cool */}
				code={`git clone \\
https://github.com/themesberg/flowbite-astro-admin-dashboard.git`}
			/>
		</div>
	</section>

	<article class="flex justify-center pt-32 pb-32">
		<div class="w-full readme format dark:format-invert lg:format-lg">
			<h1 class="text-center">
				<!-- {readMe.getHeadings()[0].text} -->
				{SITE_TITLE}
			</h1>
			<readMe.Content />
		</div>
	</article>
</div>

<style>
	/* Override in Markdown H1 title */
	.readme :global(h1:nth-of-type(2)) {
		display: none;
	}

	.svg-inline :global(svg) {
		height: 100%;
		width: 100%;
	}
</style>