feat: update website content

.github/workflows/preview-build-deploy.yaml

@@ -2,7 +2,7 @@ name: www.tlip.io Preview Build and Deploy
 
 on:
   pull_request:
-      types: [opened, synchronize, reopened]
+    types: [opened, synchronize, reopened]
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}

package.json

@@ -79,6 +79,7 @@
 		"googleapis": "^133.0.0",
 		"marked": "^12.0.0",
 		"pino": "^8.18.0",
+		"svelte-highlight": "^7.7.0",
 		"swiper": "^11.0.6",
 		"url-metadata": "^3.5.4",
 		"vite-plugin-markdown": "^2.2.0"

src/components/button.svelte

@@ -23,7 +23,7 @@
 		class:plain
 		class={classes}
 	>
-		<span class="flex-shrink-0">{title}</span>
+		<span>{title}</span>
 	</a>
 {/if}
 

src/components/carousel.svelte

@@ -58,7 +58,7 @@
 					>
 						{#if item.src}
 							<div
-								class="flex items-center rounded border p-2"
+								class="flex items-center rounded p-2"
 								style:width={`${itemWidth}px`}
 								style:height={`${itemWidth}px`}
 							>

src/components/header.svelte

@@ -65,7 +65,7 @@
 			<img src="/assets/logo-TLIP.svg" alt="TLIP logo" id="logo" />
 		</a>
 		<div class="order-3 my-auto hidden lg:inline-block">
-			<Button {...mailLink} as="link" />
+			<Button {...mailLink} as="link" classes="[&_span]:shrink-0" />
 		</div>
 		<div class="flex flex-1 flex-row justify-end">
 			<!-- Desktop -->

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}

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>

src/components/index.js

@@ -11,3 +11,4 @@ export { default as ListLoader } from "./list-loader.svelte";
 export { default as Paginator } from "./paginator.svelte";
 export { default as PaginatorPage } from "./paginator-page.svelte";
 export { default as Hero } from "./hero.svelte";
+export { default as Info } from "./info.svelte";

src/components/info.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+</script>
+
+<div class="flex flex-col gap-y-5 [&_a]:text-green-500 [&_a]:underline">
+	<div class="leading-125 tracking-0.02">
+		<slot name="title" />
+	</div>
+	<div class="leading-6 tracking-0.04">
+		<slot name="description" />
+	</div>
+	<div class="[&_ul]:list-disc [&_ul]:pl-5">
+		<slot name="items" />
+	</div>
+	<div class="leading-6 tracking-0.04">
+		<slot name="conclusion" />
+	</div>
+</div>

src/components/menu.svelte

@@ -20,7 +20,7 @@
 
 <ul
 	transition:slide={{ duration: 200 }}
-	class={`${classes} flex flex-col items-stretch justify-stretch lg:border lg:border-gray-300 lg:shadow-lg`}
+	class={`${classes} flex w-fit flex-col items-stretch justify-stretch lg:border lg:border-gray-300 lg:shadow-lg`}
 	use:clickOutside={() => {
 		if (Date.now() - visibleTime > 300) {
 			dispatchClick();
@@ -51,6 +51,20 @@
 					{item.label}
 				</a>
 			{/if}
+			{#if item.entries}
+				<div class="flex flex-col gap-2">
+					{#each item.entries as entry}
+						<a
+							class=" w-full rounded px-6 py-3 hover:bg-gray-100 hover:text-green-400"
+							href={entry.url}
+							on:click|preventDefault={e => {
+								dispatchClick(e);
+								scrollIntoView(e.currentTarget);
+							}}>- {entry.label}</a
+						>
+					{/each}
+				</div>
+			{/if}
 		</li>
 	{/each}
 </ul>
@@ -64,6 +78,6 @@
 		@apply list-none;
 		@apply bg-white;
 		@apply rounded;
-		width: 200px;
+		@apply min-w-[200px];
 	}
 </style>

src/lib/constants/partners.constants.ts

@@ -24,86 +24,35 @@ export const GOVERNMENT_PARTNERS: CarouselEntry[] = [
 ];
 
 export const COMMERCIAL_PARTNERS: CarouselEntry[] = [
-	{
-		src: "/assets/partners/mcp.png"
-	},
 	{
 		src: "/assets/partners/royal-flora-holland.png"
 	},
-	{
-		src: "/assets/partners/dfds.png"
-	},
 	{
 		src: "/assets/partners/kenya-airways.png"
 	},
 	{
-		src: "/assets/partners/mansys.png"
-	},
-	{
-		src: "/assets/partners/sct.png"
-	},
-	{
-		src: "/assets/partners/tapa.png"
-	},
-	{
-		src: "/assets/partners/coriolis.png"
-	},
-	{
-		src: "/assets/partners/dpworld.png"
-	},
-	{
-		src: "/assets/partners/beyond-now.png"
-	},
-	{
-		src: "/assets/partners/katlas.png"
-	},
-	{
-		src: "/assets/partners/premier-nutrition.png"
+		src: "/assets/partners/sian-flowers.png"
 	},
 	{
-		src: "/assets/partners/cns.png"
-	},
-	{
-		src: "/assets/partners/geodis.png"
-	},
-	{
-		src: "/assets/partners/university-of-surrey.png"
-	},
-	{
-		src: "/assets/partners/british-coffee-association.png"
-	},
-	{
-		src: "/assets/partners/ras.png"
+		src: "/assets/partners/airflo.png"
 	},
 	{
-		src: "/assets/partners/airflo.png"
+		src: "/assets/partners/dfg-kenya.png"
 	}
 ];
 
-export const CONSORTIUM_MEMBERS: CarouselEntry[] = [
-	{
-		label: "Trademark Africa",
-		src: "/assets/consortium/trademark-africa.png"
-	},
-	{
-		label: "IOTA Foundation",
-		src: "/assets/consortium/iota-foundation.png"
-	},
+export const INTEGRATED_WITH: CarouselEntry[] = [
 	{
-		label: "Global Alliance for Trade Facilitation",
-		src: "/assets/consortium/global-alliance-for-trade-facilitation.png"
+		src: "/assets/government/kra.png"
 	},
 	{
-		label: "Chartered Institute of Export and International Trade",
-		src: "/assets/consortium/chartered-institute-of-export.png"
+		src: "/assets/government/kentrade.png"
 	},
 	{
-		label: "Tony Blair Institute for Global Change",
-		src: "/assets/consortium/tony-blair-institute.png"
+		src: "/assets/government/kephis.png"
 	},
 	{
-		label: "World Economic Forum",
-		src: "/assets/consortium/world-economic-forum.png"
+		src: "/assets/government/afa.png"
 	}
 ];
 

src/lib/utils.ts

@@ -59,9 +59,13 @@ export function scrollIntoView(target: HTMLAnchorElement) {
 			sideMenuOpen.set(false);
 			document.body.classList.remove("overflow-y-hidden");
 
-			const parts = href.split("#");
-			if (parts.length === 2) {
-				const targetId = `#${parts[1]}`;
+			const url = new URL(href, window.location.href);
+			const urlHash = url.hash;
+			const [sectionId] = urlHash.includes("?") ? urlHash.split("?") : [urlHash, ""];
+
+			const sectionIdParts = sectionId.split("#");
+			if (sectionId && sectionIdParts.length === 2) {
+				const targetId = `#${sectionIdParts[1]}`;
 				goto(target.href, { noScroll: true })
 					.then(() => {
 						scrollTimeout = window.setTimeout(() => {

src/routes/+layout.svelte

@@ -1,66 +1,61 @@
 <script lang="ts">
 	import { Footer, Header } from "$components";
 	import type { NavigationMenu } from "$lib";
-	// import { scrollIntoView } from "$lib/utils";
 	import "../scss/index.scss";
 
 	const navigationMenu: NavigationMenu[] = [
 		{
 			label: "About Us",
+			url: "/about-us"
+		},
+		{
+			label: "Understand TLIP",
 			entries: [
 				{
-					label: "The Consortium",
-					url: "/consortium"
+					label: "Why TLIP?",
+					url: "/why"
 				},
 				{
-					label: "Our Ecosystem",
-					url: "/ecosystem"
+					label: "Benefits",
+					url: "/#benefits"
 				}
 			]
 		},
 		{
-			label: "Understand TLIP",
+			label: "How TLIP Works",
 			entries: [
 				{
-					label: "What is TLIP?",
-					url: "/what-is"
+					label: "Launch with Ease",
+					url: "/#launch-with-ease"
 				},
 				{
-					label: "Why TLIP?",
-					url: "/why"
-				},
-				{
-					label: "How TLIP Works",
-					url: "/#how-does-it-work"
-				},
-				{
-					label: "TLIP In Action",
-					url: "/#in-action"
+					label: "Standard compliance",
+					url: "/standard-compliance"
 				}
 			]
 		},
 		{
 			label: "Resources",
 			entries: [
 				{
-					label: "FAQ",
-					url: "/faq"
+					label: "News",
+					url: "/news"
 				},
 				{
-					label: "Wiki",
-					url: "https://wiki.tlip.io/",
+					label: "Blog",
+					url: "https://medium.com/@tlip.io",
 					external: true
 				},
 				{
-					label: "News",
-					url: "/news"
+					label: "Videos",
+					url: "/about-us#videos"
+				},
+				{
+					label: "TLIP Wiki",
+					url: "https://docs.tlip.io/",
+					external: true
 				}
 			]
-		},
-		{
-			label: "Blog",
-			url: "https://medium.com/@tlip.io",
-			external: true
 		}
 	];
 </script>