changes to home page

Author: basicavisual

src/components/Cards/ContentCard.svelte

@@ -7,8 +7,8 @@
 
 
 <div class="Card w-full min-h-[519px] bg-zinc-100 flex-col justify-start items-start inline-flex">
-  <img class="Image4 self-stretch h-[250px]" src={image} />
-  <div class="Frame5 self-stretch min-h-[269px] h-full p-8 flex-col justify-end items-start gap-4 flex">
+  <img class="Image4 self-stretch h-[238px] object-cover" src={image} />
+  <div class="Frame5 self-stretch min-h-[281px] p-8 flex-col justify-between items-start gap-4 flex">
     <div class="Heading self-stretch min-h-[41px] flex-col justify-end items-start gap-8 flex">
       <div class="Heading self-stretch text-black text-[31.25px] font-bold font-['Albert Sans'] leading-10">
         {title}
@@ -19,11 +19,10 @@
         {description}
       </div>
     </div>
-    <div class="Button justify-start items-center gap-2 inline-flex">
-      <!-- <div class="ConoceMS text-black text-base font-bold font-['Albert Sans'] uppercase leading-normal">
+    <div class="Button justify-start items-center gap-2 inline-flex ">
+      <a href="{link}" target="_blank" rel="noopener noreferrer" class="ConoceMS text-black text-base font-bold font-['Albert Sans'] uppercase leading-normal hover:underline">
         Conoce más
-      </div> -->
-      <div class="ExternalLink w-6 h-6 relative"></div>
+      <img class="ExternalLink w-5 h-5 inline align-sub ml-1" src="/Vector.svg" alt="flecha"></a>
     </div>
   </div>
 </div>

src/components/Hero.svelte

@@ -19,7 +19,7 @@
 		<div class="flex-col-reverse md:flex-row flex items-center gap-10 columns-2">
 			<div class="md:w-1/2 md:p-5">
 				<h1 class="text-6xl font-bold text-white leading-tight">{title}</h1>
-				<p class="md:py-6 text-2xl leading-loose" 
+				<p class="md:py-6 text-2xl leading-normal" 
 				style={`color: ${contrastedColor}`}
 				>
 					{subtitle}

src/components/IconTextAction.svelte

@@ -11,13 +11,18 @@
 <div class="space-y-5">
 	<img src={icon} alt="Icon" class="" />
 
-	<h2 class="text-2xl font-bold">{title}</h2>
+	<h2 class="text-3xl font-bold">{title}</h2>
 	{#if description }
-	<p class="max-w-[550px]">
+	<p class="max-w-[550px] min-h-[90px] text-xl">
 		{description}
 	</p>
 	{/if }
 	{#if action }
-	<Button action={action} action_label={action_label} />
+	<div class="my-3">
+
+		<a href={action}>
+			<Button action_label={action_label} />
+		</a>
+	</div>
 	{/if }
 </div>

src/components/TitleDescription.svelte

@@ -6,7 +6,7 @@
 <div class="">
 	<h1 class="text-5xl font-bold">{title}</h1>
 	{#if description }
-	<p class="py-6">
+	<p class="py-6 text-2xl">
 		{description}
 	</p>
 	{/if }

src/routes/+page.svelte

@@ -8,6 +8,7 @@
 	import SubscribeBox from '@/components/SubscribeBox.svelte';
 	import ArticleCard from '@/components/Cards/ArticleCard.svelte';
 	import Button from '@/components/Button.svelte';
+	import ContentCard from '@/components/Cards/ContentCard.svelte';
 	export let data
   const { home, posts, projects } = data
 </script>
@@ -20,39 +21,38 @@
 <div id="quienes-somos" class="container px-5 mx-auto my-8">
 	<div class="flex-col md:flex-row flex my-10 gap-20 items-center">
 		<ShadowImage />
-		<TitleDescription title="Trabajamos de manera abierta y colaborativa" description="con gobiernos, activistas, periodistas, diseñadoras, desarrolladoras y más. Nos enfocamos en la parte tecnológica que acompaña al impacto cívico y social." />
+		<div class="w-5/6 p-6">
+
+			<TitleDescription title={home.about_title} description={home.about_subtitle} />
+		</div>
 	</div>
 </div>
 
 <section id="con-quien-trabajamos" class="bg-[#E6F8EE] py-8 w-full mx-auto my-8">
 	<div class="container m-auto">
 		<div class="flex flex-col md:flex-row my-10 gap-20 p-10 justify-center">
-			<IconTextAction icon="/who_1.png" title="Organizaciones" description="Construimos herramientas digitales, abrimos conocimiento y acompañamos a equipos técnicos y no técnicos." action="/organizaciones" action_label="Hablemos"/>
+			<IconTextAction icon="/who_1.png" title="Organizaciones" description="Construimos herramientas digitales, abrimos conocimiento y acompañamos a equipos técnicos y no técnicos." action="/proyectos" action_label="Colaboremos"/>
 			<IconTextAction icon="/who_2.png" title="Personas" description="Colaboramos con personas de todos los perfiles, cualquiera que comparta nuestros principios, valores y código de conducta puede ser parte de esta comunidad." action="/comunidad" action_label="Súmate"/>
 		</div>
 	</div>
 </section>
 
-<section id="en-que-estamos-trabajando" class="p-8 mx-auto my-8">
-	<div class="text-center">
+<section id="en-que-estamos-trabajando" class="p-8 mx-auto my-8 container">
+	<div class="text-center my-6 w-2/3 mx-auto">
 		<TitleDescription title="En qué estamos trabajando" description="Todos nuestros proyectos son open source, esto significa que cualquiera es libre de utilizar el código, datos y otros materiales de acuerdo a la licencia que contenga." />
 	</div>
 
 	<div id="nuestros-proyectos" class="md:grid grid-cols-3  container m-auto gap-5">
 		{#each projects as project}
-		<ProjectCard
+		<ContentCard
 			title={project.title}
 			description={project.short_description}
-			tags={project.tags || []}
 			image={`https://content.codeandomexico.org/assets/${project.image}`}
-			website={project.website}
-			maker={project.maker}
-			repository={project.repository}
-		/>
+			link={project.website} />
 	{/each}
 
 	</div>
-	<div class="text-center my-8">
+	<div class="text-center my-8 max-w-1/2">
 		<a href="/proyectos" >	
 			<Button  action_label="Ver todos los proyectos" />
 		</a>
@@ -66,7 +66,7 @@
 
 <section id="blog" class="p-8 mx-auto my-8 container">
 	<div class="text-center my-12">
-		<TitleDescription title="Blog" />
+		<TitleDescription title="Hablemos de tecnología cívica" />
 	</div>
 	<div class="md:grid grid-cols-3 gap-5 mb-5">
 		{#each posts as post}