From c1389166b8251337c0565cb17f2a03108bbf9838 Mon Sep 17 00:00:00 2001
From: Jewgeni Lewash <j.lewash@gmail.com>
Date: Fri, 4 Oct 2024 22:07:20 +0200
Subject: [PATCH] feat: add interactive components

---
 src/components/Modal.astro   | 68 +++++++++++++++++++++++++++
 src/components/Tooltip.astro | 26 +++++++++++
 src/pages/index.astro        | 90 ++++++++++++++++++++++++++----------
 3 files changed, 160 insertions(+), 24 deletions(-)
 create mode 100644 src/components/Modal.astro
 create mode 100644 src/components/Tooltip.astro

diff --git a/src/components/Modal.astro b/src/components/Modal.astro
new file mode 100644
index 0000000..4f7ddc4
--- /dev/null
+++ b/src/components/Modal.astro
@@ -0,0 +1,68 @@
+---
+interface Props {
+	id: string;
+	title: string;
+}
+
+const { id, title } = Astro.props;
+---
+
+<div
+	id={id}
+	class="fixed inset-0 z-50 hidden items-center justify-center bg-black/50 backdrop-blur-sm">
+	<div
+		class="w-full max-w-lg transform rounded-2xl bg-white p-6 shadow-xl transition-all dark:bg-gray-800">
+		<div class="flex items-center justify-between">
+			<h3 class="text-2xl font-semibold text-gray-900 dark:text-white">
+				{title}
+			</h3>
+			<button
+				type="button"
+				class="rounded-lg bg-transparent p-1.5 text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white"
+				onclick={`window.closeModal('${id}')`}>
+				<svg
+					class="h-6 w-6"
+					fill="currentColor"
+					viewBox="0 0 20 20"
+					xmlns="http://www.w3.org/2000/svg">
+					<path
+						fill-rule="evenodd"
+						d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+						clip-rule="evenodd">
+					</path>
+				</svg>
+			</button>
+		</div>
+		<div class="mt-4 space-y-6">
+			<slot />
+		</div>
+	</div>
+</div>
+
+<script>
+	interface CustomWindow extends Window {
+		closeModal: (id: string) => void;
+		openModal: (id: string) => void;
+	}
+
+	declare let window: CustomWindow;
+
+	function closeModal(id: string) {
+		const modal = document.getElementById(id);
+		if (modal) {
+			modal.classList.add('hidden');
+			document.body.classList.remove('overflow-hidden');
+		}
+	}
+
+	function openModal(id: string) {
+		const modal = document.getElementById(id);
+		if (modal) {
+			modal.classList.remove('hidden');
+			document.body.classList.add('overflow-hidden');
+		}
+	}
+
+	window.closeModal = closeModal;
+	window.openModal = openModal;
+</script>
diff --git a/src/components/Tooltip.astro b/src/components/Tooltip.astro
new file mode 100644
index 0000000..30649b4
--- /dev/null
+++ b/src/components/Tooltip.astro
@@ -0,0 +1,26 @@
+---
+interface Props {
+	text: string;
+	position?: 'top' | 'right' | 'bottom' | 'left';
+}
+
+const { text, position = 'top' } = Astro.props;
+
+const positionClasses = {
+	top: 'bottom-full left-1/2 mb-2 -translate-x-1/2',
+	right: 'left-full top-1/2 ml-2 -translate-y-1/2',
+	bottom: 'top-full left-1/2 mt-2 -translate-x-1/2',
+	left: 'right-full top-1/2 mr-2 -translate-y-1/2',
+};
+---
+
+<div class="group relative inline-block">
+	<slot />
+	<div
+		class={`invisible absolute ${positionClasses[position]} z-10 whitespace-nowrap rounded-lg bg-gray-800 px-3 py-2 text-sm text-white opacity-0 shadow-lg transition-all duration-300 ease-in-out group-hover:visible group-hover:opacity-100`}>
+		{text}
+		<div
+			class="absolute left-1/2 top-full -translate-x-1/2 border-4 border-transparent border-t-gray-800">
+		</div>
+	</div>
+</div>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 74bd9d7..2e823ee 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -3,6 +3,8 @@ import { Icon } from 'astro-icon/components';
 import BaseLayout from '@/layouts/BaseLayout.astro';
 import Heading from '@/components/ui/Heading.astro';
 import FeatureSection from '@/components/FeatureSection.astro';
+import Modal from '@/components/Modal.astro';
+import Tooltip from '@/components/Tooltip.astro';
 
 import index1 from '@/assets/images/index-1.png';
 import index2 from '@/assets/images/index-2.png';
@@ -47,37 +49,44 @@ const features = [
 <BaseLayout
 	title="Astro Deploy"
 	description="Launch your site with Astro Deploy: A cutting-edge solution featuring Astro.js, Docker, and Tailwind CSS for seamless, scalable web development.">
-	<header class="mx-auto px-4 pb-20 pt-28 sm:px-6 lg:px-8">
-		<Heading level={1} classes="text-center text-zinc-900 dark:text-zinc-200">
-			Deploy Your
-			<span
-				class="bg-gradient-to-r from-accent-600 via-accent-600 to-zinc-900 bg-clip-text text-transparent dark:from-accent dark:to-zinc-200">
-				Astro.js
-			</span>
-			Site!
-		</Heading>
-		<p class="mx-auto mt-6 max-w-3xl text-center text-lg text-zinc-900/70 dark:text-zinc-400">
-			Supercharge your website with the Astro Deploy boilerplate with Docker support for
-			out-of-this-world web experiences. Launch today!
-		</p>
-		<div class="mt-8 flex justify-center">
-			<a
-				href="https://github.com/deployn/astro-deploy"
-				class="inline-flex items-center justify-center gap-x-3 rounded-full bg-primary-600 px-8 py-4 text-center text-base text-sm font-medium ring-4 ring-transparent focus:outline-none focus:ring-2 focus:ring-primary-700 focus:ring-offset-base-50 dark:focus:ring-offset-zinc-800">
-				<span>Get started!</span>
-				<Icon name="line-md:chevron-right" class="size-3" />
-			</a>
+	<header class="relative mx-auto px-4 pb-32 pt-40 sm:px-6 lg:px-8">
+		<div
+			class="absolute inset-0 bg-gradient-to-br from-primary-100 to-primary-50 dark:from-primary-900 dark:to-primary-800">
+		</div>
+		<div class="relative">
+			<Heading
+				level={1}
+				classes="text-center text-4xl sm:text-5xl lg:text-6xl font-bold text-primary-900 dark:text-primary-100">
+				Deploy Your
+				<span class="bg-gradient-to-r from-accent-600 to-primary-600 bg-clip-text text-transparent">
+					Astro.js
+				</span>
+				Site!
+			</Heading>
+			<p
+				class="mx-auto mt-6 max-w-3xl text-center text-lg text-primary-800/80 dark:text-primary-200/80 sm:text-xl">
+				Supercharge your website with the Astro Deploy boilerplate with Docker support for
+				out-of-this-world web experiences. Launch today!
+			</p>
+			<div class="mt-10 flex justify-center">
+				<a
+					href="https://github.com/deployn/astro-deploy"
+					class="inline-flex items-center justify-center gap-x-3 rounded-full bg-primary-600 px-8 py-4 text-base font-medium text-white shadow-lg transition-all hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-primary-800 sm:text-lg">
+					<span>Get started!</span>
+					<Icon name="line-md:chevron-right" class="size-5" />
+				</a>
+			</div>
 		</div>
 	</header>
 
-	<section
-		class="mx-auto max-w-6xl px-8 py-12 text-base-900 dark:text-base-100 sm:px-6 lg:px-8 lg:py-16">
+	<section class="mx-auto max-w-6xl px-8 py-16 sm:py-24 lg:px-8 lg:py-32">
 		<Heading
 			level={2}
-			classes="max-w-3xl text-center mx-auto pb-2 bg-clip-text bg-gradient-to-r from-primary-700 to-primary-500 dark:from-primary-500 dark:to-primary-300 text-transparent">
+			classes="max-w-3xl text-center mx-auto pb-2 text-3xl sm:text-4xl lg:text-5xl font-bold bg-clip-text bg-gradient-to-r from-primary-700 to-primary-500 dark:from-primary-400 dark:to-primary-200 text-transparent">
 			Launch Stunning Websites Effortlessly with Astro Deploy
 		</Heading>
-		<p class="mx-auto mt-4 max-w-4xl text-center text-xl text-zinc-900/80 dark:text-zinc-400">
+		<p
+			class="mx-auto mt-6 max-w-4xl text-center text-lg text-gray-700 dark:text-gray-300 sm:text-xl">
 			Empower your success with Astro Deploy. Leverage cutting-edge technologies for seamless
 			experiences.
 		</p>
@@ -94,6 +103,39 @@ const features = [
 		))
 	}
 
+	<section class="bg-gray-100 py-16 dark:bg-gray-800 dark:text-gray-100 sm:py-24">
+		<div class="container mx-auto px-4 sm:px-6 lg:px-8">
+			<Heading level={2} classes="text-3xl sm:text-4xl font-bold text-center mb-8">
+				Interactive Components
+			</Heading>
+			<div class="flex flex-col items-center justify-center gap-8 sm:flex-row">
+				<Modal id="myModal" title="Example Modal">
+					<p class="text-gray-700 dark:text-gray-300">
+						This is the content of a modal. It can include any HTML content.
+					</p>
+					<button
+						class="mt-4 rounded bg-primary-600 px-4 py-2 text-white transition-colors hover:bg-primary-700"
+						onclick="closeModal('myModal')">
+						Close Modal
+					</button>
+				</Modal>
+
+				<Tooltip text="This is a tooltip">
+					<button
+						class="rounded bg-accent-500 px-4 py-2 text-white transition-colors hover:bg-accent-600">
+						Hover me
+					</button>
+				</Tooltip>
+
+				<button
+					onclick="openModal('myModal')"
+					class="rounded-lg bg-primary-600 px-6 py-3 text-white shadow-md transition-colors hover:bg-primary-700">
+					Open modal
+				</button>
+			</div>
+		</div>
+	</section>
+
 	<section class="container relative mx-auto px-4 py-16 lg:px-8 lg:py-32 xl:max-w-6xl">
 		<div
 			class="absolute inset-0 my-6 rounded bg-gray-800 lg:-skew-y-1 xl:-mx-2 xl:my-20 xl:rotate-2">