Dynebolic 4.0 beta banner (#147)

* remove redundant class (see https://t.me/c/1682572031/14041) * add d:b splash close to hero commiting for reference; spent way too much time only to realize it doesn't work on mobile. :'( wanted the svg is inline to follow the color changeing on page-load, which comes at the cost of the text size on small screens... Probably the text needs to be separate from the image, but that means formatting the whole thing in this magic non-CSS, CSS language that i don't know. * adds text to banner, removes background image * feat: add software banner --------- Co-authored-by: Giovanni Abbatepaolo <[email protected]>
dyne · Mar 19, 2024 · 21adaea · 21adaea
1 parent b0fac21
commit 21adaea
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 3 deletions.
diff --git a/src/assets/dynebolic-banner.svg b/src/assets/dynebolic-banner.svg
diff --git a/src/components/SoftwareAnnouncement.astro b/src/components/SoftwareAnnouncement.astro
@@ -0,0 +1,24 @@
+---
+interface Props {
+	intro?: string;
+	href: string;
+}
+
+const { intro, href } = Astro.props;
+---
+
+<a href={href}>
+	<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"
+			>
+				{intro && <p class="text-3xl text-inter !text-saccent">{intro}</p>}
+
+				<div>
+					<slot />
+				</div>
+			</div>
+		</div>
+	</div>
+</a>
diff --git a/src/components/Svg.astro b/src/components/Svg.astro
@@ -0,0 +1,9 @@
+---
+interface Props {
+	content: string;
+}
+
+const { content } = Astro.props;
+---
+
+<Fragment set:html={content} />
diff --git a/src/components/homepage/Stats.astro b/src/components/homepage/Stats.astro
@@ -9,7 +9,7 @@ const { description, CTA, href, title, secondaryCTA, secondaryHref, feature1, fe
 <div class="grid grid-cols-1 md:grid-cols-3 items-center p-8">
 	<div class="flex flex-col col-span-2 space-y-12 md:space-y-8 tracking-tight text-left">
 		<h1 class="text-4xl md:text-5xl lg:text-6xl !text-saccent text-semibold">{title}</h1>
-		<p class="max-w-2 text-2xl text-inter !text-saccent">{description}</p>
+		<p class="text-2xl text-inter !text-saccent">{description}</p>
 		<ButtonsGroup>
 			<Button href={secondaryHref} text={secondaryCTA} inverted={true} />
 			<Button href={href} text={CTA} />

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -6,10 +6,13 @@ import Hero from '~/components/homepage/Hero.astro';
 import Stats from '~/components/homepage/Stats.astro';
 import Projects from '~/components/homepage/Projects.astro';
 import Testimonials from '~/components/homepage/Testimonials.astro';
-import BannerMerch from '~/components/homepage/BannerMerch.astro';
 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 Banner from '~/assets/dynebolic-banner.svg?raw';
+import Svg from '~/components/Svg.astro';
 ---
 
 <Layout title="Dyne.org">
@@ -27,6 +30,13 @@ import Button from '~/components/Button.astro';
 
 		<Stats />
 
+		<SoftwareAnnouncement
+			intro="Dyne.org foundation is proud to announce a new RASTASOFT production:"
+			href="https://dynebolic.org"
+		>
+			<Svg content={Banner} />
+		</SoftwareAnnouncement>
+
 		<Projects />
 
 		<Testimonials />
@@ -41,6 +51,5 @@ import Button from '~/components/Button.astro';
 				</div>
 			</Section>
 		</div>
-
 	</main>
 </Layout>