Refactored project cards and adopt in software page

src/components/ProjectCard.astro

@@ -0,0 +1,45 @@
+---
+import Button from './Button.astro';
+
+const { logo, title, url, tagline, download } = Astro.props;
+---
+
+<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-xl p-7"
+>
+	<div class="w-full p-4 h-full flex gap-8">
+		{
+			logo && (
+				<div
+					class="flex-none hidden md:block bg-origin-content bg-contain bg-center bg-no-repeat w-32 h-32 lg:w-20 lg:h-20 rounded-full ring-2 ring-saccent"
+					style={`background-image: url(${logo})`}
+				/>
+			)
+		}
+		<div>
+			<div class="flex flex-row items-center gap-4">
+				<a href={url} class="text-2xl font-bold font-sans no-underline">{title}</a>
+
+				{
+					logo && (
+						<div
+							class="block md:hidden bg-origin-content bg-contain bg-center bg-no-repeat w-12 h-12 rounded-full border-[0.5px] border-accent"
+							style={`background-image: url(${logo})`}
+						/>
+					)
+				}
+			</div>
+			<div class="py-4">
+				<span class="font-medium">{tagline}</span>
+			</div>
+
+			<p class="text-gray-800 text-sm font-medium mb-2 text-clip overflow-hidden max-h-20">
+				<slot />
+			</p>
+			<div class="flex flex-row flex-wrap space-x-3 mt-4">
+				<Button href={url} text="Learn more..." inverted={true} cls="text-sm" />
+				{download && <Button href={download} text="Download" cls={`text-sm`} />}
+			</div>
+		</div>
+	</div>
+</div>

src/components/Awards.astro → src/components/homepage/Awards.astro

@@ -1,7 +1,7 @@
 ---
 import * as copy from '~/content/awards/index.md';
 import Button from '~/components/Button.astro';
-import ButtonsGroup from './ButtonsGroup.astro';
+import ButtonsGroup from '../ButtonsGroup.astro';
 const { description, CTA, href, CTA2, href2 } = copy.frontmatter;
 ---
 

src/components/Hero.astro → src/components/homepage/Hero.astro

@@ -1,8 +1,8 @@
 ---
-import * as copy from '../content/hero/index.md';
+import * as copy from '../../content/hero/index.md';
 import Button from '~/components/Button.astro';
-import Caffuda from './Caffuda.astro';
-import ButtonsGroup from './ButtonsGroup.astro';
+import Caffuda from '../Caffuda.astro';
+import ButtonsGroup from '../ButtonsGroup.astro';
 ---
 
 <div class="flex flex-col lg:flex-row items-center space-y-20 lg:space-y-0 px-10 lg:py-36">

src/components/homepage/Projects.astro

@@ -0,0 +1,24 @@
+---
+import Button from '~/components/Button.astro';
+import ProjectCard from '../ProjectCard.astro';
+
+const projects = await Astro.glob('~/content/what-we-do/*.md');
+---
+
+<div class="flex flex-col gap-y-8">
+	<div class="grid grid-cols lg:grid-cols-2 gap-6 px-8">
+		{
+			projects.map((p) => {
+				const { logo, name, link, download } = p.frontmatter;
+				return (
+						<ProjectCard logo={logo} title={name} url={link} download={download}}>
+							<div set:html={p.compiledContent()} />
+						</ProjectCard>
+				);
+			})
+		}
+	</div>
+	<div class="text-center">
+		<Button href="/software" text="Load more..." />
+	</div>
+</div>

src/components/homepage/Stats.astro

@@ -0,0 +1,22 @@
+---
+import * as copy from '~/content/heritage/index.md';
+import Button from '~/components/Button.astro';
+import ButtonsGroup from '../ButtonsGroup.astro';
+const { description, CTA, href, title, secondaryCTA, secondaryHref, feature1, feature1Value, feature2, feature2Value } =
+	copy.frontmatter;
+---
+
+<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>
+		<ButtonsGroup>
+			<Button href={secondaryHref} text={secondaryCTA} inverted={true} />
+			<Button href={href} text={CTA} />
+		</ButtonsGroup>
+	</div>
+	<div
+		class="bg-[url('/images/illustrations/manincula.png')] opacity-40 bg-contain bg-no-repeat h-full w-full hidden md:block"
+	>
+	</div>
+</div>

src/components/Testimonials.astro → src/components/homepage/Testimonials.astro

@@ -10,9 +10,7 @@ const testimonials = await Astro.glob('~/content/testimonial/*.md');
 			testimonials.map((t) => {
 				const { pic } = t.frontmatter;
 				return (
-					<div
-						class={`swiper-slide bg-baccent mx-auto lg:max-w-none rounded-4xl p-20 lg:p-28 my-24 max-w-[450px]`}
-					>
+					<div class={`swiper-slide bg-baccent mx-auto lg:max-w-none rounded-4xl p-20 lg:p-28 my-24 max-w-[450px]`}>
 						<div class="flex-col flex lg:flex-row gap-20 items-center justify-between">
 							<img src={pic} class="w-64 rounded-full" />
 							<div set:html={t.compiledContent()} class="text-saccent text-xl lg:text-3xl" />

src/content/what-we-do/01_zenroom.md

@@ -2,7 +2,7 @@
 name: Zenroom
 logo: https://zenroom.org/wp-content/uploads/2020/09/zenroom_only-logo_padding.png
 link: http://dev.zenroom.org
-donwload: https://zenroom.org/#downloads
+download: https://zenroom.org/#downloads
 ---
 
 Zenroom is a small, portable and **secure language interpreter** of a domain specific language called zencode, able to **execute cryptographic operations** and smart contracts in a multiplatform environment.

src/pages/index.astro

@@ -1,14 +1,14 @@
 ---
 import Layout from '~/layouts/HomepageLayout.astro';
 import Section from '~/components/Section.svelte';
-import WhoWeAre from '~/components/WhoWeAre.astro';
-import Hero from '~/components/Hero.astro';
-import Stats from '~/components/Stats.astro';
-import Projects from '~/components/Projects.astro';
-import Testimonials from '~/components/Testimonials.astro';
-import BannerMerch from '~/components/BannerMerch.astro';
+import WhoWeAre from '~/components/homepage/WhoWeAre.astro';
+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/Supports.astro';
+import Supports from '~/components/homepage/Supports.astro';
 import Button from '~/components/Button.astro';
 ---
 

src/pages/software/decodeos.md

@@ -3,5 +3,5 @@ layout: ~/layouts/embed.astro
 title: "DecodeOS :: Private and Anonymous Computation Clusters"
 description: "The DECODE operating system is a brand new GNU+Linux distribution designed to run on servers, embedded computers and virtual machines to automatically connect micro-services to a private and anonymous peer-to-peer network cluster."
 destination: "https://raw.githubusercontent.com/DECODEproject/decode-os/master/README.md"
-logo: "software/decode-os_only-logo-150x150.png"
+logo: "/software/decode-os_only-logo-150x150.png"
 ---

src/pages/software/index.astro

@@ -1,5 +1,5 @@
 ---
-import MiniCard from '~/components/MiniCard.astro';
+import ProjectCard from '~/components/ProjectCard.astro';
 import Layout from '~/layouts/Layout.astro';
 const softwares = await Astro.glob('~/pages/software/*.md');
 ---
@@ -10,15 +10,12 @@ const softwares = await Astro.glob('~/pages/software/*.md');
 		description: "Dive into the code ocean<br/>Dyne's collective toolbox for hackers, makers, and dreamers",
 	}}
 >
-	<div class="grid grid-cols-2 gap-8">
+	<div class="grid md:grid-cols-2 gap-8">
 		{
 			softwares.map((software) => (
-				<MiniCard
-					body={software.frontmatter.description}
-					href={software.url}
-					title={software.frontmatter.title}
-					cn={{ body: 'text-sm', title: 'no-underline' }}
-				/>
+				<ProjectCard url={software.url} title={software.frontmatter.title}>
+					{software.frontmatter.description}
+				</ProjectCard>
 			))
 		}
 	</div>