feat: polishment (#48)

* feat: update content and refine styles * feat: add new partner * feat: add new section * feat: update colors * feat: refine section * feat: update assets * style: update homepage hero * content: update launch with ease * content: update video & hero max widths --------- Co-authored-by: Begoña Alvarez <[email protected]>
tmea-tlip · Sep 6, 2024 · 49f08ac · 49f08ac
1 parent 4e34081
commit 49f08ac
Show file tree

Hide file tree

Showing 27 changed files with 107 additions and 118 deletions.
diff --git a/src/components/hero.svelte b/src/components/hero.svelte
@@ -26,19 +26,19 @@
 	<div
 		class={`container z-10 flex h-full w-full flex-col items-center ${hasSlots ? "justify-center" : ""} lg:flex-row lg:gap-5`}
 	>
-		<div class={`w-full flex-1 text-center ${hasSlots ? "w-full lg:w-2/5" : "text-left"} lg:text-left`}>
+		<div class={`w-full flex-1 text-center ${hasSlots ? "w-full lg:w-3/5" : "text-left"} lg:text-left`}>
 			{#if heading?.section}
 				<h6 class="lgtext-20 mb-2 text-16 {color} metropolis-700">{heading.section}</h6>
 			{/if}
 			{#if heading?.title}
 				<h1 class="mb-6 text-28 lg:text-48 {color} metropolis-600">{heading.title}</h1>
 			{/if}
 			{#if heading?.subtitle}
-				<h6 class="mb-6 text-18 lg:text-24 {color} metropolis-700">{heading.subtitle}</h6>
+				<h6 class="mb-6 text-18 lg:text-24 lg:max-w-lg {color} metropolis-700">{heading.subtitle}</h6>
 			{/if}
 			{#if heading?.description}
 				<h4
-					class={`${color} lg:max-w-md ${heading.description.length > 200 ? "text-16" : "text-16 lg:text-24"} metropolis-400 whitespace-pre-line`}
+					class={`${color} lg:max-w-lg ${heading.description.length > 200 ? "text-16" : "text-16 lg:text-24"} metropolis-400 whitespace-pre-line`}
 				>
 					{@html heading.description}
 				</h4>
@@ -54,7 +54,7 @@
 			{/if}
 		</div>
 		{#if hasSlots}
-			<div class="flex w-auto items-center justify-center lg:w-3/5 lg:justify-end">
+			<div class="flex w-auto items-center justify-center lg:w-2/5 lg:justify-end">
 				<slot />
 			</div>
 		{/if}

diff --git a/src/components/icons/upgrade.svelte b/src/components/icons/upgrade.svelte
@@ -1,4 +1,10 @@
-<svg width="68" height="69" viewBox="0 0 68 69" fill="none" xmlns="http://www.w3.org/2000/svg">
-	<circle cx="34" cy="36" r="29.5" stroke="#00874C" stroke-width="5" />
-	<path d="M34 25L46 38M34 25L22 38M34 25V51.5" stroke="#00874C" stroke-width="5" />
+<script lang="ts">
+	export let fill: string = "#00874C";
+	export let width: number = 68;
+	export let height: number = 68;
+</script>
+
+<svg {width} {height} viewBox="0 0 68 69" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<circle cx="34" cy="36" r="29.5" stroke={fill} stroke-width="5" />
+	<path d="M34 25L46 38M34 25L22 38M34 25V51.5" stroke={fill} stroke-width="5" />
 </svg>
diff --git a/src/lib/constants/partners.constants.ts b/src/lib/constants/partners.constants.ts
@@ -35,6 +35,9 @@ export const COMMERCIAL_PARTNERS: CarouselEntry[] = [
 	},
 	{
 		src: "/assets/partners/airflo.png"
+	},
+	{
+		src: "/assets/partners/dfg-kenya.png"
 	}
 ];
 

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -22,14 +22,14 @@
 			]
 		},
 		{
-			label: "How TLIP works",
+			label: "How TLIP Works",
 			entries: [
 				{
-					label: "Launch with ease",
+					label: "Launch with Ease",
 					url: "/#launch-with-ease"
 				},
 				{
-					label: "Built for developers",
+					label: "Built for Developers",
 					url: "/#built-for-developers"
 				},
 				{

diff --git a/src/routes/why/+page.svelte b/src/routes/why/+page.svelte
@@ -2,7 +2,7 @@
 	import { ObservedRoute } from "$components";
 	import type { Section } from "$lib";
 	import { HaveAnyQuestions } from "$sections/shared";
-	import { Hero, Reasons, Challenges } from "$sections/why";
+	import { Hero, Reasons, Digitalising } from "$sections/why";
 
 	const sections: Section[] = [
 		{
@@ -14,8 +14,8 @@
 			id: "reasons"
 		},
 		{
-			component: Challenges,
-			id: "challenges"
+			component: Digitalising,
+			id: "digitalising"
 		},
 		{
 			component: HaveAnyQuestions,

diff --git a/src/sections/about-us/about-us.svelte b/src/sections/about-us/about-us.svelte
@@ -5,13 +5,13 @@
 			title: "Streamlining Global Trade",
 			description:
 				"TLIP's main focus is to facilitate the smooth exchange of data and trade documents across borders, involving government agencies, traders, and logistics providers. In an industry burdened by paper-based and manual processes, TLIP aims to modernise and streamline operations, overcoming the hurdles associated with traditional methods of data exchange.",
-			src: "https://placecats.com/millie/400/300"
+			src: "/assets/about-us/streamlining.png"
 		},
 		{
 			title: "Our Technology",
 			description:
 				"At TLIP's core lies the robust foundation of <a href='https://www.iota.org' target='_blank' class='text-green-500 underline'>IOTA</a>’s open-source distributed ledger technology (DLT). Leveraging DLT’s inherent qualities  – transparency, traceability, and immutability – TLIP is designed to foster trust and integrity in shared data.",
-			src: "https://placecats.com/millie/400/300"
+			src: "/assets/about-us/collaboration.png"
 		},
 		{
 			title: "Pilot Programs and Trials",
@@ -23,7 +23,7 @@
 			title: "The Consortium",
 			description:
 				"The TLIP platform was developed by TradeMark Africa in partnership with the IOTA Foundation, drawing on insights gained from implementations in Kenya and the United Kingdom. Recognising the need for a global consortium to ensure widespread adoption, <a href='https://www.trademarkafrica.com' target='_blank' class='text-green-500 underline'>TradeMark Africa</a>, the <a href='https://www.iota.org' target='_blank' class='text-green-500 underline'>IOTA Foundation</a>, the <a href='https://www.weforum.org' target='_blank' class='text-green-500 underline'>World Economic Forum</a>, the <a href='https://www.export.org.uk' target='_blank' class='text-green-500 underline'>Chartered Institute of Export & International Trade</a>, the <a href='https://www.tradefacilitation.org' target='_blank' class='text-green-500 underline'>Global Alliance for Trade Facilitation</a>, and the <a href='https://institute.global' target='_blank' class='text-green-500 underline'>Tony Blair Institute for Global Change</a> signed a Collaboration Agreement to jointly develop and expand the TLIP infrastructure and governance framework.",
-			src: "https://placecats.com/millie/400/300"
+			src: "/assets/about-us/signing.jpg"
 		}
 	];
 </script>
@@ -54,7 +54,7 @@
 						<p>{@html item.description}</p>
 					</div>
 				</div>
-				<div class="flex flex-1 items-center overflow-hidden rounded-lg">
+				<div class="flex flex-1 items-center overflow-hidden rounded-lg max-h-96">
 					<img src={item.src} alt={item.title} class="w-full object-contain" />
 				</div>
 			</div>

diff --git a/src/sections/about-us/videos.svelte b/src/sections/about-us/videos.svelte
@@ -4,9 +4,10 @@
 	const items = {
 		cards: [
 			{
-				title: "Video Title",
-				video: "https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.mp4",
-				description: "Cat ipsum dolor sit amet, run at 3am for get scared by doggo."
+				title: "Flowers from Kenya to Holland",
+				video: "https://files.iota.org/media/TLIP_Documentary_2020.mp4",
+				description: "The benefits of TLIP are demonstrated by a shipment of flowers from Nairobi, Kenya, to Royal FloraHolland in the Netherlands.",
+				poster: "/assets/posters/TLIP_Documentary_2020_poster.png"
 			},
 			{
 				title: "Video Title",
@@ -20,10 +21,10 @@
 <section {id} class="flex flex-col gap-20 pb-16 pt-24 lg:py-28">
 	<h2 class="mb-9 text-center text-36">Videos</h2>
 	<div class="lg:items-left container flex flex-col items-center gap-10 lg:flex-row">
-		{#each items.cards as { video, description, title }}
+		{#each items.cards as { video, description, title, poster }}
 			<div class="flex aspect-video h-full w-full flex-col gap-y-8 last:mr-0 lg:mb-0 lg:mr-20 lg:w-1/2">
 				{#if video}
-					<video class="image-shadow h-full w-full object-cover" muted controls preload="metadata">
+					<video class="image-shadow h-full w-full object-cover" muted controls preload="metadata" {poster}>
 						<source src={video} type="video/mp4" />
 						<track kind="captions" />
 					</video>

diff --git a/src/sections/homepage/benefits.svelte b/src/sections/homepage/benefits.svelte
@@ -135,29 +135,29 @@
 	};
 </script>
 
-<section {id}>
+<section {id} class="bg-green-500 text-white">
 	<div class="container flex flex-col gap-10 py-20 lg:py-28">
-		<h2 class="text-center text-36 lg:text-left">{SECTIONS.title}</h2>
+		<h2 class="text-center text-48">{SECTIONS.title}</h2>
 		<div class="flex flex-col gap-5 lg:grid lg:grid-cols-3">
 			<!-- Mobile Section -->
 			<div class="space-y-8 lg:hidden">
 				{#each SECTIONS.subsections as subsection}
-					<div class="space-y-6 rounded-lg border border-blue-200/30 p-6 lg:hidden">
+					<div class="space-y-6 rounded-lg border border-green-200/20 p-6 lg:hidden">
 						<div class="flex items-start gap-x-2">
-							<Icon {...subsection.icon} />
+							<Icon {...subsection.icon} fill="#DBE4DA"/>
 							<div class="text-start">
 								<h3 class="text-xl font-bold">{subsection.title}</h3>
 								<p>{subsection.description}</p>
 							</div>
 						</div>
-						<hr class="border border-blue-200/30" />
+						<hr class="border border-green-200/20" />
 						<div class="space-y-4">
 							{#each subsection.cards as card}
 								<div class="flex flex-col gap-2">
 									<h4 class="leading-110 tracking-0.02">
 										{card.title}
 									</h4>
-									<p class="leading-150 tracking-0.02 text-grey-500">
+									<p class="leading-150 tracking-0.02 text-grey-100">
 										{card.description}
 									</p>
 								</div>
@@ -167,16 +167,16 @@
 				{/each}
 			</div>
 			<!-- Desktop Section -->
-			<div class="hidden grow flex-col space-y-4 lg:flex">
+			<div class="hidden flex-col space-y-4 lg:flex">
 				{#each SECTIONS.subsections as card}
 					<button
-						class={`flex w-full grow cursor-pointer flex-row justify-start rounded-lg p-4 ${
-							selectedCard.id === card.id ? "bg-blue-200/30" : "border border-blue-200/30"
+						class={`flex w-full cursor-pointer flex-row justify-start rounded-lg p-4 ${
+							selectedCard.id === card.id ? "border border-green-200/20 bg-green-200/20" : "border border-green-200/20"
 						}`}
 						on:click={() => handleCardClick(card)}
 					>
-						<div class="flex w-full flex-row items-start justify-start gap-x-4">
-							<Icon {...card.icon} />
+						<div class="flex w-full flex-row items-center justify-start gap-x-4">
+							<Icon {...card.icon} fill="#DBE4DA"/>
 							<div class="flex flex-col gap-1 text-start">
 								<h4 class="font-bold">{card.title}</h4>
 								<p>{card.description}</p>
@@ -185,12 +185,12 @@
 					</button>
 				{/each}
 			</div>
-			<div class="col-span-2 hidden rounded-lg border border-blue-200/30 p-8 lg:block">
-				<div class="flex flex-col gap-10">
+			<div class="col-span-2 hidden rounded-lg border border-green-200/20 p-6 lg:block">
+				<div class="flex flex-col gap-8">
 					{#each selectedCard.cards as card}
 						<div class="flex flex-col gap-2">
 							<h4 class="text-28 leading-110 tracking-0.02">{card.title}</h4>
-							<div class="leading-150 tracking-0.02 text-grey-500">{card.description}</div>
+							<div class="leading-150 tracking-0.02 text-grey-100">{card.description}</div>
 						</div>
 					{/each}
 				</div>

diff --git a/src/sections/homepage/builtForDevelopers.svelte b/src/sections/homepage/builtForDevelopers.svelte
@@ -4,7 +4,7 @@
 
 <section class="h-full w-full bg-[#56ccf233] py-20 md:pb-36 md:pt-32" {id}>
 	<div class="container">
-		<h2 class="mb-9 text-center text-36">Built for developers</h2>
+		<h2 class="mb-9 text-center text-36">Built for Developers</h2>
 		<div class="mx-auto mb-8 flex max-w-2xl flex-col gap-5 text-center leading-6 tracking-0.04">
 			<p>
 				TLIP is designed with developers in mind, utilising open-source technology that seamlessly integrates

diff --git a/src/sections/homepage/hero.svelte b/src/sections/homepage/hero.svelte
@@ -6,10 +6,10 @@
 
 <Hero
 	heading={{
-		title: "Digital Trade Docs",
-		subtitle: "Digital trade docs from government agencies within seconds",
+		title: "Digital trade docs from government in seconds",
+		subtitle: "Access documents instantly via TLIP’s integration with the Kenya Revenue Authority, KenTrade, and KEPHIS",
 		description:
-			"Access documents instantly via TLIP’s integration with the Kenya Revenue Authority, KenTrade, and KEPHIS. Supported documents: Export Declaration, Certificate of Export, Phytosanitary Certificate, Export Certificate."
+			"Supported documents: Export Declaration, Certificate of Export, Phytosanitary Certificate, Export Certificate."
 	}}
 	buttons={[
 		{

diff --git a/src/sections/homepage/launchWithEase.svelte b/src/sections/homepage/launchWithEase.svelte
@@ -1,16 +1,26 @@
 <script lang="ts">
+	import { Button } from "$components";
+
 	export let id: string;
 </script>
 
 <section class="container py-20 md:pb-36 md:pt-32" {id}>
-	<h2 class="mb-9 text-center text-36">Launch with ease</h2>
-	<p class="mx-auto mb-16 max-w-2xl text-center leading-6 tracking-0.04">
-		TLIP offers supply chain businesses the tools to create quick, effective client experiences without designing
-		consignment data sharing flows from scratch. TLIP UI provides a sleek consignment creation and sharing flow that
-		works seamlessly across browsers, keeping you up-to-date with no extra coding needed.
+	<h2 class="mb-9 text-center text-36">Launch with Ease</h2>
+	<p class="mx-auto mb-8 max-w-2xl text-center leading-6 tracking-0.04">
+		TLIP App provides supply chain businesses easy access via the web browser. All functions can be seamlessly
+		integrated into corporate or government systems via TLIP API.
 	</p>
-	<video class="image-shadow aspect-video h-full w-full object-cover" muted controls preload="metadata">
-		<source src="https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.mp4" type="video/mp4" />
+	<div class="flex justify-center">
+		<Button classes="mb-16" title="TLIP Wiki" url="https://docs.tlip.io/" isExternal />
+	</div>
+	<video
+		class="image-shadow aspect-video h-full w-full object-cover"
+		muted
+		controls
+		preload="metadata"
+		poster="/assets/posters/TLIP_Documentary_2020_poster.png"
+	>
+		<source src="https://files.iota.org/media/TLIP_Documentary_2020.mp4" type="video/mp4" />
 		<track kind="captions" />
 	</video>
 </section>
diff --git a/src/sections/homepage/standardsCompliance.svelte b/src/sections/homepage/standardsCompliance.svelte
@@ -5,7 +5,7 @@
 </script>
 
 <section class="container py-20 md:pb-36 md:pt-32" {id}>
-	<h2 class="mb-9 text-center text-36">Standards compliance</h2>
+	<h2 class="mb-9 text-center text-36">Standards Compliance</h2>
 	<div class="flex flex-col items-center justify-center gap-10 text-center">
 		<p class="max-w-4xl leading-6 tracking-0.04">
 			TLIP exposes APIs that conform to core data standards such as UN/CEFACT and GS1 EPCIS 2.0, enabling any

diff --git a/src/sections/standard-compliance/standards.svelte b/src/sections/standard-compliance/standards.svelte
@@ -101,8 +101,6 @@
 				>.
 			</li>
 		</ul>
-
-		<p slot="conclusion">Read our whitepaper for more details.</p>
 	</Info>
 	<Info>
 		<h3 slot="title">Legal Standards</h3>

diff --git a/src/sections/why/challenges.svelte b/src/sections/why/challenges.svelte
-Original file line number
+Diff line change
@@ Expand Up / @@ -35,6 +35,9 @@ export const COMMERCIAL_PARTNERS: CarouselEntry[] = [ @@
     	},
     	{
     		src: "/assets/partners/airflo.png"
+    	},
+    	{
+    		src: "/assets/partners/dfg-kenya.png"
     	}
     ];
@@ Expand Down @@