From 87cfe09b08da7f9a7c7e32836305269929667e7b Mon Sep 17 00:00:00 2001
From: Settoshi Tonami <public@sakrecoer.com>
Date: Fri, 1 Nov 2024 09:43:43 +0100
Subject: [PATCH] Newsletter button (#172)

* add a newsletter section to homepage

* fix typos

* signup instead of subscribe on the button

* formulation change

* typo

* typo
---
 src/components/Newsletter.astro | 29 +++++++++++++++++++++++++++++
 src/pages/index.astro           |  6 ++++++
 2 files changed, 35 insertions(+)
 create mode 100644 src/components/Newsletter.astro

diff --git a/src/components/Newsletter.astro b/src/components/Newsletter.astro
new file mode 100644
index 0000000..e281341
--- /dev/null
+++ b/src/components/Newsletter.astro
@@ -0,0 +1,29 @@
+---
+interface Props {
+	intro?: string;
+	href: string;
+}
+
+const { intro, href } = Astro.props;
+---
+
+
+	<div class="flex flex-col gap-y-8 py-8">
+		<div class="grid grid-cols lg:grid-cols-1 gap-6 px-8">
+			<div
+				class="transition duration-500 ease-in-out transform shadow-2xl border-4 border-baccent hover:border-accent hover:shadow-none hover:bg-white hover:bg-opacity-50 rounded-[40px] p-7 space-y-4"
+			>
+				<div class="text-4xl md:text-5xl lg:text-6xl text-saccent">
+					<p><strong>Newsletter</strong></p>
+				</div>
+				{intro && <p class="text-3xl text-inter !text-saccent">{intro}</p>}
+					<div class="flex flex-wrap gap-4">
+					<a href={href} class="text-white cursor-pointer bg-accent border-2 border-accent hover:bg-saccent hover:text-white hover:border-saccent py-2 px-4 rounded-full w-fit text-2xl whitespace-nowrap ">Sign up</a>
+					</div>
+				<div>
+					<slot />
+				</div>
+			</div>
+		</div>
+	</div>
+</a>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 875c524..6532c27 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -10,6 +10,7 @@ import Timeline from '~/components/timeline/home/TimelineHome.svelte';
 import Supports from '~/components/homepage/Supports.astro';
 import Button from '~/components/Button.astro';
 import SoftwareAnnouncement from '~/components/SoftwareAnnouncement.astro';
+import Newsletter from '~/components/Newsletter.astro';
 
 import Banner from '~/assets/dynebolic-banner.svg?raw';
 import Svg from '~/components/Svg.astro';
@@ -27,6 +28,11 @@ We focus on developing software that benefits society, rather than generate prof
 		</Section>
 
 		<Stats />
+		<Newsletter
+		  intro="Subscribe to Planet Dyne to stay updated about the latest Sustainable Tech, Hacker Lore and Original Internet Culture."
+		  href="https://news.dyne.org/#/portal/signup"
+		>
+		</Newsletter>
 
 		<SoftwareAnnouncement
 			intro="Dyne.org foundation is proud to announce a new RASTASOFT production:"