start

src/widgets/LandingReadme.astro

@@ -0,0 +1,91 @@
+---
+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>