Add postgsail content

2025-09-17 11:17:46 +00:00 · 2024-02-24 18:32:26 +00:00
parent d8e50bc456
commit 462b0ae0f0
17 changed files with 664 additions and 192 deletions
--- a/package.json
+++ b/package.json
@@ -49,5 +49,5 @@
    "@types/react-dom": "^18.0.0",
    "typescript": "^4.7.4"
  },
-  "homepage": "https://xbgmsharp.github.io/postgsail/"
+  "homepage": "https://xbgmsharp.github.io/"
 }
--- a/public/PostgsailLogo.svg
+++ b/public/PostgsailLogo.svg
--- a/public/demo.mp4
+++ b/public/demo.mp4
--- a/public/index.html
+++ b/public/index.html
@@ -29,7 +29,7 @@
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet">

-    <title>Gitlanding App</title>
+    <title>PostgSail</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
--- a/src/App/Footer.tsx
+++ b/src/App/Footer.tsx
@@ -8,20 +8,16 @@ export const Footer = memo(() => {
 	const { t } = useTranslation({ Footer })
 	return <GlFooter
 		bottomDivContent={t("license")}
-		email="email@email.com"
-		phoneNumber="+33545345676"
+		email="info@openplotter.cloud"
+		phoneNumber="+33652584319"
 		links={[
-			{
-				"label": t("link1label"),
-				...routes.pageExample().link
-			},
 			{
 				"label": t("link2label"),
-				"href": "https://example.com",
+				"href": "https://github.com/xbgmsharp/postgsail/",
 			},
 			{
 				"label": t("link3label"),
-				"href": "https://example.com",
+				"href": "https://github.com/xbgmsharp/postgsail/tree/main/docs",
 			},
 		]}
 	/>
--- a/src/App/Header.tsx
+++ b/src/App/Header.tsx
@@ -8,7 +8,8 @@ import type { Language } from "i18n";
 const { LanguageSelect } = createLanguageSelect<Language>({
 	"languagesPrettyPrint": {
 		"en": "English",
-		"fr": "Francais"
+		"fr": "Francais",
+		"es": "Spanish"
 	}
 })

@@ -16,23 +17,19 @@ export const Header = memo(() => {
 	const { t } = useTranslation({ Header })
 	const { lang, setLang } = useLang();
 	return <GlHeader
-		title={<a {...routes.home().link}><h1>{t("headerTitle")}</h1></a>}
+		title={<a {...routes.home().link}><h1><img src="./PostgsailLogo.svg" alt="SVG as an image" height={48}/></h1></a>}
 		links={[
-			{
-				"label": t("link1label"),
-				...routes.pageExample().link
-			},
 			{
 				"label": t("link2label"),
-				"href": "https://example.com",
+				"href": "https://github.com/xbgmsharp/postgsail/",
 			},
 			{
 				"label": t("link3label"),
-				"href": "https://example.com",
+				"href": "https://github.com/xbgmsharp/postgsail/tree/main/docs",
 			},
 		]}
 		enableDarkModeSwitch={true}
-		githubRepoUrl="https://github.com/torvalds/linux"
+		githubRepoUrl="https://github.com/xbgmsharp/postgsail/"
 		githubButtonSize="large"
 		customItemEnd={{
 			"item": <LanguageSelect
--- a/src/assets/icons/Grafana_logo.png
+++ b/src/assets/icons/Grafana_logo.png
--- a/src/assets/icons/discord-mark-blue.png
+++ b/src/assets/icons/discord-mark-blue.png
--- a/src/assets/img/demo.gif
+++ b/src/assets/img/demo.gif
--- a/src/assets/img/logs.png
+++ b/src/assets/img/logs.png
--- a/src/assets/img/map.png
+++ b/src/assets/img/map.png
--- a/src/assets/img/monitoring.png
+++ b/src/assets/img/monitoring.png
--- a/src/assets/img/stats.png
+++ b/src/assets/img/stats.png
--- a/src/assets/img/timelapse.png
+++ b/src/assets/img/timelapse.png
--- a/src/i18n.tsx
+++ b/src/i18n.tsx
@@ -2,7 +2,7 @@ import { createI18nApi, declareComponentKeys } from "i18nifty";
 export { declareComponentKeys };

 //List the languages you with to support
-export const languages = ["en", "fr"] as const;
+export const languages = ["en", "fr", "es"] as const;

 //If the user's browser language doesn't match any 
 //of the languages above specify the language to fallback to:  
@@ -34,47 +34,83 @@ export const {
 						"not found": "Page not found"
 					},
 					"Header": {
-						"headerTitle": "Title",
+						"headerTitle": "PostgSail",
 						"link1label": "Example page",
-						"link2label": "Link 2",
-						"link3label": "Link 3"
+						"link2label": "GitHub",
+						"link3label": "Documentation"
 					},
 					"Footer": {
-						"license": "License M.I.T",
+						"license": "License Apache",
 						"link1label": "Example page",
-						"link2label": "Link 2",
-						"link3label": "Link 3"
+						"link2label": "GitHub",
+						"link3label": "Documentation"
 					},
 					"Home": {
-						"heroTitle": "Hero title",
-						"heroSubtitle": "Hero subtitle",
-						"articleTitle": "Article title",
-						"articleBody": `Do am he horrible distance marriage 
-							so although. Afraid assure square so happen mr 
-							an before. His many same been well can high that. 
-							Forfeited did law eagerness allowance improving 
-							assurance bed. Had saw put seven joy short first. 
-							Pronounce so enjoyment my resembled in forfeited 
-							sportsman. Which vexed did began son 
-							abode short may. Interested astonished he at 
-							cultivated or me. Nor brought one invited she 
-							produce her.`,
-						"articleButtonLabel": "Article button label",
-						"card1Title": "Card title 1",
-						"card2Title": "Card title 2",
-						"card3Title": "Card title 3",
-						"card1Paragraph": `Dissuade ecstatic and properly saw 
-							entirely sir why laughter endeavor. 
-							In on my jointure horrible margaret suitable 
-							he followed speedily.`,
-						"card2Paragraph": `Dissuade ecstatic and properly saw 
-							entirely sir why laughter endeavor. 
-							In on my jointure horrible margaret suitable 
-							he followed speedily.`,
-						"card3Paragraph": `Dissuade ecstatic and properly saw 
-							entirely sir why laughter endeavor. 
-							In on my jointure horrible margaret suitable 
-							he followed speedily.`,
+						"heroTitle": "Cloud, hosted and fully–managed, designed for all your needs.",
+						"heroSubtitle": " Effortless cloud based solution for storing and sharing your SignalK data. Allow to effortlessly log your sails and monitor your boat with historical data.",
+						"articleButtonLabel": "Try PostgSail for free now",
+						"card1Title": "Open Source",
+						"card2Title": "Join the community",
+						"card3Title": "Customize",
+						"card1Paragraph": `Source code is available on Github.`,
+						"card2Paragraph": `Get support and exchange on Discord.`,
+						"card3Paragraph": `Create and manage your own dashboards.`,
+						"articleTitle": "Timelapse",
+						"articleBody": `- See your real-time or historical track(s) via animated timelapse
+
+- Select one voyage or a date range of multiple trips to animate
+
+- Sharable! Keep tracks private or share with friends
+						`,
+						"article2Title": "Boat Monitoring",
+						"article2Body": `- Check your vessel from anywhere in the world in real-time.
+
+- Monitor windspeed, depth, baromteter, temperatures and more
+
+- See historical (up-to 7 days) data
+
+- View power and battery status
+
+- Get automated push or email alerts for significant changes in status or location changes`,
+						"article2ButtonLabel": "Article button label",
+						"article3Title": "Automated Logging",
+						"article3Body": `- Automatic. No app to start or button to push.
+
+- Auto-identifies and names your start and stop positions
+
+- Records duration, distance, average and max boat and wind speeds
+
+- Add your own voyage notes or details in text box
+
+- Upon voyage completion, PostgSail will automatically email your trip log and add it to your stats.`,
+						"article3ButtonLabel": "Article button label",
+						"projectCardTitle1": "ROUTE SHARING",
+						"projectCardTitle2": "AUTO logging",
+						"projectCardTitle3": "boat monitoring",
+						"projectCardTitle4": "STATS & Maps",
+						"projectCardSubtitle1": "Want to share your real-time location and data with your friends and family? Its easy to toggle on and share a private link with your track and current location mapped & historical track, boat and wind speeds.",
+						"projectCardSubtitle2": "Never start (or forget to) start your tracking app again. PostgSail knows when you leave the dock and starts to log your trip automatically. Stats include location names, duration, speed, distance, wind and more. ",
+						"projectCardSubtitle3": "Check in on your vessel from anywhere in the world in real-time. Reporting includes temperatures, depth, wind, humidity, location, voltage and many more options if your boat is sensor equipped. ",
+						"projectCardSubtitle4": "See all your voyages in a single shot or map. Filter by date, type of moorages and more to see some incredible stats!",
+						"checkListHeading": "Amazing features, all automated",
+						"checkListElementTitle1": "Timelapse",
+						"checkListElementTitle2": "Boat Monitoring",
+						"checkListElementTitle3": "Automated Logging",
+						"checkListElementTitle4": "Realtime Route Sharing",
+						"checkListElementTitle5": "Stats and Maps",
+						"checkListElementTitle6": "AI/ML",
+						"checkListElementTitle7": "Telegram bot",
+						"checkListElementTitle8": "Export",
+						"checkListElementTitle9": "Polar performance",
+						"checkListElementDescription1": "Timelapse your track. Replay your trips on a interactive map with all weather condition.",
+						"checkListElementDescription2": "Monitor your boat.",
+						"checkListElementDescription3": "Log your trips.",
+						"checkListElementDescription4": "Go social",
+						"checkListElementDescription5": "Track your stats. Awesome statistics and graphs.",
+						"checkListElementDescription6": "Predictive failure.",
+						"checkListElementDescription7": "Control your boat remotely.",
+						"checkListElementDescription8": "Export to CSV, GPX, GeoJSON, KML and download your logs.",
+						"checkListElementDescription9": "Generate performance information based on a polar diagram.",
 					},
 					"PageExample": {
 						"articleTitle": "Article title",
@@ -87,116 +123,325 @@ export const {
 							commanded direction. Short at front which blind as. 
 							Ye as procuring unwilling principle by.`,
 						"articleButtonLabel": "Article button label",
-						"projectCardTitle1": "Project card title 1",
-						"projectCardTitle2": "Project card title 2",
-						"projectCardTitle3": "Project card title 3",
-						"projectCardTitle4": "Project card title 4",
-						"projectCardSubtitle1": "Project card subtitle 1",
-						"projectCardSubtitle2": "Project card subtitle 2",
-						"projectCardSubtitle3": "Project card subtitle 3",
-						"projectCardSubtitle4": "Project card subtitle 4",
-						"checkListHeading": "Check list heading",
-						"checkListElementTitle1": "Check list element title 1",
-						"checkListElementTitle2": "Check list element title 2",
-						"checkListElementTitle3": "Check list element title 3",
-						"checkListElementTitle4": "Check list element title 4",
-						"checkListElementTitle5": "Check list element title 5",
-						"checkListElementTitle6": "Check list element title 6",
-						"checkListElementDescription1": "Am finished rejoiced drawings so he elegance. Set lose dear upon had two its what seen.",
-						"checkListElementDescription2": "Am finished rejoiced drawings so he elegance. Set lose dear upon had two its what seen.",
-						"checkListElementDescription3": "Am finished rejoiced drawings so he elegance. Set lose dear upon had two its what seen.",
-						"checkListElementDescription4": "Am finished rejoiced drawings so he elegance. Set lose dear upon had two its what seen.",
-						"checkListElementDescription5": "Am finished rejoiced drawings so he elegance. Set lose dear upon had two its what seen.",
-						"checkListElementDescription6": "Am finished rejoiced drawings so he elegance. Set lose dear upon had two its what seen."
+						"article2Title": "Article title",
+						"article2Body": `Am finished rejoiced drawings so he 
+							elegance. Set lose dear upon had two its what seen. 
+							Held she sir how know what such whom. 
+							Esteem put uneasy set piqued son depend her others. 
+							Two dear held mrs feet view her old fine. Bore can 
+							led than how has rank. Discovery any extensive has 
+							commanded direction. Short at front which blind as. 
+							Ye as procuring unwilling principle by.`,
+						"article2ButtonLabel": "Article button label",
+						"article3Title": "Article title",
+						"article3Body": `Am finished rejoiced drawings so he 
+							elegance. Set lose dear upon had two its what seen. 
+							Held she sir how know what such whom. 
+							Esteem put uneasy set piqued son depend her others. 
+							Two dear held mrs feet view her old fine. Bore can 
+							led than how has rank. Discovery any extensive has 
+							commanded direction. Short at front which blind as. 
+							Ye as procuring unwilling principle by.`,
+						"article3ButtonLabel": "Article button label",
+						"projectCardTitle1": "ROUTE SHARING",
+						"projectCardTitle2": "AUTO logging",
+						"projectCardTitle3": "boat monitoring",
+						"projectCardTitle4": "STATS & Maps",
+						"projectCardSubtitle1": "Want to share your real-time location and data with your friends and family? Its easy to toggle on and share a private link with your track and current location mapped & historical track, boat and wind speeds.",
+						"projectCardSubtitle2": "Never start (or forget to) start your tracking app again. PostgSail knows when you leave the dock and starts to log your trip automatically. Stats include location names, duration, speed, distance, wind and more. ",
+						"projectCardSubtitle3": "Check in on your vessel from anywhere in the world in real-time. Reporting includes temperatures, depth, wind, humidity, location, voltage and many more options if your boat is sensor equipped. ",
+						"projectCardSubtitle4": "See all your voyages in a single shot or map. Filter by date, type of moorages and more to see some incredible stats!",
+						"checkListHeading": "Features",
+						"checkListElementTitle1": "Timelapse",
+						"checkListElementTitle2": "Boat Monitoring",
+						"checkListElementTitle3": "Automated Logging",
+						"checkListElementTitle4": "Realtime Route Sharing",
+						"checkListElementTitle5": "Stats and Maps",
+						"checkListElementTitle6": "AI/ML",
+						"checkListElementDescription1": "Timelapse your track. Replay your trips on a interactive map with all weather condition.",
+						"checkListElementDescription2": "Monitor your boat.",
+						"checkListElementDescription3": "Log your trips.",
+						"checkListElementDescription4": "Go social",
+						"checkListElementDescription5": "Track your stats.",
+						"checkListElementDescription6": "Predictive failure.",
 					}
        },
-				/* spell-checker: disable */
-				"fr": {
-					"FourOhFour": {
-						"not found": "Page non trouvée"
-					},
-					"Header": {
-						"headerTitle": "Titre",
-						"link1label": "Exemple de page",
-						"link2label": "Lien 2",
-						"link3label": "Lien 3"
-					},
-					"Footer": {
-						"license": "License M.I.T",
-						"link1label": "Exemple de page",
-						"link2label": "Lien 2",
-						"link3label": "Lien 3"
-					},
-					"Home": {
-						"heroTitle": "Titre du Hero",
-						"heroSubtitle": "Sous titre du Hero",
-						"articleTitle": "Titre de l'article",
-						"articleBody": `Fille pieds qui ici breve coups 
-							soeur. Va on on succedent deroulent de capitaine 
-							rapportes esplanade. Accoudees inassouvi sacrifice 
-							dit mes ils surveille tangibles ici dentelees. 
-							Atroce esprit bazars en boules je sa. 
-							Car but approchait artilleurs eclatantes 
-							defilaient moi nez paraissent claquaient. 
-							Est crepitent car seulement adjudants eux 
-							apprendre signalant ere incapable. 
-							Prenaient distribua ii en eperonnes enfantent 
-							entourage cotillons.`,
-						"articleButtonLabel": "Label du bouton",
-						"card1Title": "Titre de la carte 1",
-						"card2Title": "Titre de la carte 2",
-						"card3Title": "Titre de la carte 3",
-						"card1Paragraph": `Linge selon court ans toi 
-							sabre heros. Connut toi mirent art ton trouve
-							enleve hideur eux balaye. Cornette or
-							coussins recupera allaient viennent heureuse as.`,
-						"card2Paragraph": `Linge selon court ans toi 
-							sabre heros. Connut toi mirent art ton trouve
-							enleve hideur eux balaye. Cornette or 
-							coussins recupera allaient viennent heureuse as.`,
-						"card3Paragraph": `Linge selon court ans toi 
-							sabre heros. Connut toi mirent art ton trouve
-							enleve hideur eux balaye. Cornette or 
-							coussins recupera allaient viennent heureuse as.`,
-					},
-					"PageExample": {
-						"articleTitle": "Titre de l'Article",
-						"articleBody": `Contes bouton aimons fosses depart 
-							ne dedans ca de. Le inassouvi craignait 
-							preferait en sa petillent et. Ils souffrance 
-							assurances eclaireurs consentiez lui age 
-							cherissait manoeuvres net. Tout en chez sais 
-							cent cuir avez le va. Feu maladie tot facteur 
-							douleur ils empeche pas attendu. Etale feu moi 
-							ete voici utile autre ils bride. 
-							Cheveux sachant content luisant eux sur 
-							attendu retient. Venait cercle rubans ma qu 
-							palais oh eperon.`,
-						"articleButtonLabel": "Label du bouton",
-						"projectCardTitle1": "Titre de la carte de projet 1",
-						"projectCardTitle2": "Titre de la carte de projet 2",
-						"projectCardTitle3": "Titre de la carte de projet 3",
-						"projectCardTitle4": "Titre de la carte de projet 4",
-						"projectCardSubtitle1": "Sous titre de la carte de projet 1",
-						"projectCardSubtitle2": "Sous titre de la carte de projet 2",
-						"projectCardSubtitle3": "Sous titre de la carte de projet 3",
-						"projectCardSubtitle4": "Sous titre de la carte de projet 4",
-						"checkListHeading": "Titre de la check list",
-						"checkListElementTitle1": "Titre d'element de check list 1",
-						"checkListElementTitle2": "Titre d'element de check list 2",
-						"checkListElementTitle3": "Titre d'element de check list 3",
-						"checkListElementTitle4": "Titre d'element de check list 4",
-						"checkListElementTitle5": "Titre d'element de check list 5",
-						"checkListElementTitle6": "Titre d'element de check list 6",
-						"checkListElementDescription1": "Il remarquait et en survivants eclaireurs legerement qu. Animaux nos humains fer fut ramassa encourt.",
-						"checkListElementDescription2": "Il remarquait et en survivants eclaireurs legerement qu. Animaux nos humains fer fut ramassa encourt.",
-						"checkListElementDescription3": "Il remarquait et en survivants eclaireurs legerement qu. Animaux nos humains fer fut ramassa encourt.",
-						"checkListElementDescription4": "Il remarquait et en survivants eclaireurs legerement qu. Animaux nos humains fer fut ramassa encourt.",
-						"checkListElementDescription5": "Il remarquait et en survivants eclaireurs legerement qu. Animaux nos humains fer fut ramassa encourt.",
-						"checkListElementDescription6": "Il remarquait et en survivants eclaireurs legerement qu. Animaux nos humains fer fut ramassa encourt.",
-					}
+		/* spell-checker: disable */
+		"fr": {
+			"FourOhFour": {
+				"not found": "Page non trouvée"
+			},
+			"Header": {
+				"headerTitle": "PostgSail",
+				"link1label": "Exemple de page",
+				"link2label": "Lien 2",
+				"link3label": "Lien 3"
+			},
+			"Footer": {
+				"license": "License Apache",
+				"link1label": "Exemple de page",
+				"link2label": "Lien 2",
+				"link3label": "Lien 3"
+			},
+			"Home": {
+				"heroTitle": "Cloud, hosted and fully–managed, designed for all your needs.",
+				"heroSubtitle": " Effortless cloud based solution for storing and sharing your SignalK data. Allow to effortlessly log your sails and monitor your boat with historical data.",
+				"articleButtonLabel": "Try PostgSail for free now",
+				"card1Title": "Open Source",
+				"card2Title": "Join the community",
+				"card3Title": "Customize",
+				"card1Paragraph": `Source code is available on Github`,
+				"card2Paragraph": `Get support and exchange on Discord`,
+				"card3Paragraph": `Make your own dashboard`,
+				"articleTitle": "Timelapse",
+				"articleBody": `- See your real-time or historical track(s) via animated timelapse

-				}
-				/* spell-checker: enabled */
+- Select one voyage or a date range of multiple trips to animate
+
+- Sharable! Keep tracks private or share with friends
+				`,
+				"article2Title": "Boat Monitoring",
+				"article2Body": `- Check your vessel from anywhere in the world in real-time.
+
+- Monitor windspeed, depth, baromteter, temperatures and more
+
+- See historical (up-to 7 days) data
+
+- View power and battery status
+
+- Get automated push or email alerts for significant changes in status or location changes`,
+				"article2ButtonLabel": "Article button label",
+				"article3Title": "Automated Logging",
+				"article3Body": `- Automatic. No app to start or button to push.
+
+- Auto-identifies and names your start and stop positions
+
+- Records duration, distance, average and max boat and wind speeds
+
+- Add your own voyage notes or details in text box
+
+- Upon voyage completion, PostgSail will automatically email your trip log and add it to your stats.`,
+				"article3ButtonLabel": "Article button label",
+				"projectCardTitle1": "ROUTE SHARING",
+				"projectCardTitle2": "AUTO logging",
+				"projectCardTitle3": "boat monitoring",
+				"projectCardTitle4": "STATS & Maps",
+				"projectCardSubtitle1": "Want to share your real-time location and data with your friends and family? Its easy to toggle on and share a private link with your track and current location mapped & historical track, boat and wind speeds.",
+				"projectCardSubtitle2": "Never start (or forget to) start your tracking app again. PostgSail knows when you leave the dock and starts to log your trip automatically. Stats include location names, duration, speed, distance, wind and more. ",
+				"projectCardSubtitle3": "Check in on your vessel from anywhere in the world in real-time. Reporting includes temperatures, depth, wind, humidity, location, voltage and many more options if your boat is sensor equipped. ",
+				"projectCardSubtitle4": "See all your voyages in a single shot or map. Filter by date, type of moorages and more to see some incredible stats!",
+				"checkListHeading": "Amazing features, all automated",
+				"checkListElementTitle1": "Timelapse",
+				"checkListElementTitle2": "Boat Monitoring",
+				"checkListElementTitle3": "Automated Logging",
+				"checkListElementTitle4": "Realtime Route Sharing",
+				"checkListElementTitle5": "Stats and Maps",
+				"checkListElementTitle6": "AI/ML",
+				"checkListElementTitle7": "Telegram bot",
+				"checkListElementTitle8": "Stats and Maps",
+				"checkListElementTitle9": "Polar performance",
+				"checkListElementDescription1": "Timelapse your track. Replay your trips on a interactive map with all weather condition.",
+				"checkListElementDescription2": "Monitor your boat.",
+				"checkListElementDescription3": "Log your trips.",
+				"checkListElementDescription4": "Go social",
+				"checkListElementDescription5": "Track your stats.",
+				"checkListElementDescription6": "Predictive failure.",
+				"checkListElementDescription7": "Control your boat remotely.",
+				"checkListElementDescription8": "Track your stats.",
+				"checkListElementDescription9": "Generate performance information based on a polar diagram.",	
+			},
+			"PageExample": {
+				"articleTitle": "Article title",
+				"articleBody": `Am finished rejoiced drawings so he 
+					elegance. Set lose dear upon had two its what seen. 
+					Held she sir how know what such whom. 
+					Esteem put uneasy set piqued son depend her others. 
+					Two dear held mrs feet view her old fine. Bore can 
+					led than how has rank. Discovery any extensive has 
+					commanded direction. Short at front which blind as. 
+					Ye as procuring unwilling principle by.`,
+				"articleButtonLabel": "Article button label",
+				"article2Title": "Article title",
+				"article2Body": `Am finished rejoiced drawings so he 
+					elegance. Set lose dear upon had two its what seen. 
+					Held she sir how know what such whom. 
+					Esteem put uneasy set piqued son depend her others. 
+					Two dear held mrs feet view her old fine. Bore can 
+					led than how has rank. Discovery any extensive has 
+					commanded direction. Short at front which blind as. 
+					Ye as procuring unwilling principle by.`,
+				"article2ButtonLabel": "Article button label",
+				"article3Title": "Article title",
+				"article3Body": `Am finished rejoiced drawings so he 
+					elegance. Set lose dear upon had two its what seen. 
+					Held she sir how know what such whom. 
+					Esteem put uneasy set piqued son depend her others. 
+					Two dear held mrs feet view her old fine. Bore can 
+					led than how has rank. Discovery any extensive has 
+					commanded direction. Short at front which blind as. 
+					Ye as procuring unwilling principle by.`,
+				"article3ButtonLabel": "Article button label",
+				"projectCardTitle1": "ROUTE SHARING",
+				"projectCardTitle2": "AUTO logging",
+				"projectCardTitle3": "boat monitoring",
+				"projectCardTitle4": "STATS & Maps",
+				"projectCardSubtitle1": "Want to share your real-time location and data with your friends and family? Its easy to toggle on and share a private link with your track and current location mapped & historical track, boat and wind speeds.",
+				"projectCardSubtitle2": "Never start (or forget to) start your tracking app again. PostgSail knows when you leave the dock and starts to log your trip automatically. Stats include location names, duration, speed, distance, wind and more. ",
+				"projectCardSubtitle3": "Check in on your vessel from anywhere in the world in real-time. Reporting includes temperatures, depth, wind, humidity, location, voltage and many more options if your boat is sensor equipped. ",
+				"projectCardSubtitle4": "See all your voyages in a single shot or map. Filter by date, type of moorages and more to see some incredible stats!",
+				"checkListHeading": "Features",
+				"checkListElementTitle1": "Timelapse",
+				"checkListElementTitle2": "Boat Monitoring",
+				"checkListElementTitle3": "Automated Logging",
+				"checkListElementTitle4": "Realtime Route Sharing",
+				"checkListElementTitle5": "Stats and Maps",
+				"checkListElementTitle6": "AI/ML",
+				"checkListElementDescription1": "Timelapse your track. Replay your trips on a interactive map with all weather condition.",
+				"checkListElementDescription2": "Monitor your boat.",
+				"checkListElementDescription3": "Log your trips.",
+				"checkListElementDescription4": "Go social",
+				"checkListElementDescription5": "Track your stats.",
+				"checkListElementDescription6": "Predictive failure.",		}
+		},
+		/* spell-checker: disable */
+		"es": {
+			"FourOhFour": {
+				"not found": "Page non trouvée"
+			},
+			"Header": {
+				"headerTitle": "PostgSail",
+				"link1label": "Exemple de page",
+				"link2label": "Lien 2",
+				"link3label": "Lien 3"
+			},
+			"Footer": {
+				"license": "License Apache",
+				"link1label": "Exemple de page",
+				"link2label": "Lien 2",
+				"link3label": "Lien 3"
+			},
+			"Home": {
+				"heroTitle": "Cloud, hosted and fully–managed, designed for all your needs.",
+				"heroSubtitle": " Effortless cloud based solution for storing and sharing your SignalK data. Allow to effortlessly log your sails and monitor your boat with historical data.",
+				"articleButtonLabel": "Try PostgSail for free now",
+				"card1Title": "Open Source",
+				"card2Title": "Join the community",
+				"card3Title": "Customize",
+				"card1Paragraph": `Source code is available on Github`,
+				"card2Paragraph": `Get support and exchange on Discord`,
+				"card3Paragraph": `Make your own dashboard`,
+				"articleTitle": "Timelapse",
+				"articleBody": `- See your real-time or historical track(s) via animated timelapse
+
+- Select one voyage or a date range of multiple trips to animate
+
+- Sharable! Keep tracks private or share with friends
+				`,
+				"article2Title": "Boat Monitoring",
+				"article2Body": `- Check your vessel from anywhere in the world in real-time.
+
+- Monitor windspeed, depth, baromteter, temperatures and more
+
+- See historical (up-to 7 days) data
+
+- View power and battery status
+
+- Get automated push or email alerts for significant changes in status or location changes`,
+				"article2ButtonLabel": "Article button label",
+				"article3Title": "Automated Logging",
+				"article3Body": `- Automatic. No app to start or button to push.
+
+- Auto-identifies and names your start and stop positions
+
+- Records duration, distance, average and max boat and wind speeds
+
+- Add your own voyage notes or details in text box
+
+- Upon voyage completion, PostgSail will automatically email your trip log and add it to your stats.`,
+				"article3ButtonLabel": "Article button label",
+				"projectCardTitle1": "ROUTE SHARING",
+				"projectCardTitle2": "AUTO logging",
+				"projectCardTitle3": "boat monitoring",
+				"projectCardTitle4": "STATS & Maps",
+				"projectCardSubtitle1": "Want to share your real-time location and data with your friends and family? Its easy to toggle on and share a private link with your track and current location mapped & historical track, boat and wind speeds.",
+				"projectCardSubtitle2": "Never start (or forget to) start your tracking app again. PostgSail knows when you leave the dock and starts to log your trip automatically. Stats include location names, duration, speed, distance, wind and more. ",
+				"projectCardSubtitle3": "Check in on your vessel from anywhere in the world in real-time. Reporting includes temperatures, depth, wind, humidity, location, voltage and many more options if your boat is sensor equipped. ",
+				"projectCardSubtitle4": "See all your voyages in a single shot or map. Filter by date, type of moorages and more to see some incredible stats!",
+				"checkListHeading": "Amazing features, all automated",
+				"checkListElementTitle1": "Timelapse",
+				"checkListElementTitle2": "Boat Monitoring",
+				"checkListElementTitle3": "Automated Logging",
+				"checkListElementTitle4": "Realtime Route Sharing",
+				"checkListElementTitle5": "Stats and Maps",
+				"checkListElementTitle6": "AI/ML",
+				"checkListElementTitle7": "Telegram bot",
+				"checkListElementTitle8": "Stats and Maps",
+				"checkListElementTitle9": "Polar performance",
+				"checkListElementDescription1": "Timelapse your track. Replay your trips on a interactive map with all weather condition.",
+				"checkListElementDescription2": "Monitor your boat.",
+				"checkListElementDescription3": "Log your trips.",
+				"checkListElementDescription4": "Go social",
+				"checkListElementDescription5": "Track your stats.",
+				"checkListElementDescription6": "Predictive failure.",
+				"checkListElementDescription7": "Control your boat remotely.",
+				"checkListElementDescription8": "Track your stats.",
+				"checkListElementDescription9": "Generate performance information based on a polar diagram.",	
+			},
+			"PageExample": {
+				"articleTitle": "Article title",
+				"articleBody": `Am finished rejoiced drawings so he 
+					elegance. Set lose dear upon had two its what seen. 
+					Held she sir how know what such whom. 
+					Esteem put uneasy set piqued son depend her others. 
+					Two dear held mrs feet view her old fine. Bore can 
+					led than how has rank. Discovery any extensive has 
+					commanded direction. Short at front which blind as. 
+					Ye as procuring unwilling principle by.`,
+				"articleButtonLabel": "Article button label",
+				"article2Title": "Article title",
+				"article2Body": `Am finished rejoiced drawings so he 
+					elegance. Set lose dear upon had two its what seen. 
+					Held she sir how know what such whom. 
+					Esteem put uneasy set piqued son depend her others. 
+					Two dear held mrs feet view her old fine. Bore can 
+					led than how has rank. Discovery any extensive has 
+					commanded direction. Short at front which blind as. 
+					Ye as procuring unwilling principle by.`,
+				"article2ButtonLabel": "Article button label",
+				"article3Title": "Article title",
+				"article3Body": `Am finished rejoiced drawings so he 
+					elegance. Set lose dear upon had two its what seen. 
+					Held she sir how know what such whom. 
+					Esteem put uneasy set piqued son depend her others. 
+					Two dear held mrs feet view her old fine. Bore can 
+					led than how has rank. Discovery any extensive has 
+					commanded direction. Short at front which blind as. 
+					Ye as procuring unwilling principle by.`,
+				"article3ButtonLabel": "Article button label",
+				"projectCardTitle1": "ROUTE SHARING",
+				"projectCardTitle2": "AUTO logging",
+				"projectCardTitle3": "boat monitoring",
+				"projectCardTitle4": "STATS & Maps",
+				"projectCardSubtitle1": "Want to share your real-time location and data with your friends and family? Its easy to toggle on and share a private link with your track and current location mapped & historical track, boat and wind speeds.",
+				"projectCardSubtitle2": "Never start (or forget to) start your tracking app again. PostgSail knows when you leave the dock and starts to log your trip automatically. Stats include location names, duration, speed, distance, wind and more. ",
+				"projectCardSubtitle3": "Check in on your vessel from anywhere in the world in real-time. Reporting includes temperatures, depth, wind, humidity, location, voltage and many more options if your boat is sensor equipped. ",
+				"projectCardSubtitle4": "See all your voyages in a single shot or map. Filter by date, type of moorages and more to see some incredible stats!",
+				"checkListHeading": "Features",
+				"checkListElementTitle1": "Timelapse",
+				"checkListElementTitle2": "Boat Monitoring",
+				"checkListElementTitle3": "Automated Logging",
+				"checkListElementTitle4": "Realtime Route Sharing",
+				"checkListElementTitle5": "Stats and Maps",
+				"checkListElementTitle6": "Predictive failure",
+				"checkListElementDescription1": "Il remarquait et en survivants eclaireurs legerement qu. Animaux nos humains fer fut ramassa encourt.",
+				"checkListElementDescription2": "Il remarquait et en survivants eclaireurs legerement qu. Animaux nos humains fer fut ramassa encourt.",
+				"checkListElementDescription3": "Il remarquait et en survivants eclaireurs legerement qu. Animaux nos humains fer fut ramassa encourt.",
+				"checkListElementDescription4": "Il remarquait et en survivants eclaireurs legerement qu. Animaux nos humains fer fut ramassa encourt.",
+				"checkListElementDescription5": "Il remarquait et en survivants eclaireurs legerement qu. Animaux nos humains fer fut ramassa encourt.",
+				"checkListElementDescription6": "Il remarquait et en survivants eclaireurs legerement qu. Animaux nos humains fer fut ramassa encourt.",
+			}
+
+		}
+		/* spell-checker: enabled */
    }
 );
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -4,6 +4,7 @@ import { GlArticle } from "gitlanding/GlArticle";
 import { GlCards } from "gitlanding/GlCards";
 import { GlLogoCard } from "gitlanding/GlCards/GlLogoCard";
 import { declareComponentKeys, useTranslation } from "i18n";
+/*
 import heroPng from "assets/img/hero.png";
 import articlePng from "assets/img/home-article.png";
 import balloonIcon from "assets/icons/balloon.png";
@@ -12,6 +13,26 @@ import githubIcon from "assets/icons/github.png";
 import plusIcon from "assets/icons/plus.png";
 import rocketIcon from "assets/icons/rocket-chat.png";
 import tchapIcon from "assets/icons/tchap.png";
+*/
+import githubIcon from "assets/icons/github.png";
+import discordIcon from "assets/icons/discord-mark-blue.png";
+import grafanaIcon from "assets/icons/Grafana_logo.png";
+
+import { GlProjectCard } from "gitlanding/GlCards/GlProjectCard";
+import { GlCheckList } from "gitlanding/GlCheckList";
+import { GlSectionDivider } from "gitlanding/GlSectionDivider";
+/*
+import pokemonPng from "assets/img/pokemon.png";
+import dataPng from "assets/img/data-visualisation.png";
+import kubernetesPng from "assets/img/kubernetes.png";
+import webinairePng from "assets/img/webinaire.png";
+import demoGif from "assets/img/demo.gif";
+*/
+import timelapsePng from "assets/img/timelapse.png";
+import monitoringPng from "assets/img/monitoring.png";
+import logsPng from "assets/img/logs.png";
+import mapPng from "assets/img/map.png";
+import statsPng from "assets/img/stats.png";

 export const Home = memo(() => {
 	const { t } = useTranslation({ Home });
@@ -20,60 +41,180 @@ export const Home = memo(() => {
 			<GlHero
 				title={t("heroTitle")}
 				subTitle={t("heroSubtitle")}
-				illustration={{
+				/*illustration={{
 					"type": "image",
-					"src": heroPng,
+					"src": demoGif,
 					"hasShadow": false
 				}}
+				*/
+				illustration={{
+					"type": "video",
+					"sources": [
+					  {
+						"src": "demo.mp4",
+						"type": "video/mp4"
+					  }
+					]
+				  }}
 				hasLinkToSectionBellow={true}
+				illustrationZoomFactor={1.3}
 			/>

-			<GlArticle
-				title={t("articleTitle")}
-				body={t("articleBody")}
-				buttonLabel={t("articleButtonLabel")}
-				buttonLink={{
-					"href": "https://example.com",
-				}}
-				illustration={{
-					"type": "image",
-					"src": articlePng,
-					"hasShadow": false
-				}}
-				hasAnimation={true}
-				illustrationPosition="left"
-			/>

-			<GlCards>
+<GlArticle
+			title={t("articleTitle")}
+			body={t("articleBody")}
+			buttonLabel={t("articleButtonLabel")}
+			buttonLink={{
+				"href": "https://iot.openplotter.cloud",
+			}}
+			illustration={{
+				"type": "image",
+				"src": timelapsePng,
+				"hasShadow": true
+			}}
+			illustrationPosition='left'
+			hasAnimation={true}
+		/>
+
+<GlArticle
+			title={t("article2Title")}
+			body={t("article2Body")}
+			buttonLabel={t("articleButtonLabel")}
+			buttonLink={{
+				"href": "https://iot.openplotter.cloud",
+			}}
+			illustration={{
+				"type": "image",
+				"src": monitoringPng,
+				"hasShadow": true
+			}}
+			hasAnimation={true}
+		/>
+
+<GlArticle
+			title={t("article3Title")}
+			body={t("article3Body")}
+			buttonLabel={t("articleButtonLabel")}
+			buttonLink={{
+				"href": "https://iot.openplotter.cloud",
+			}}
+			illustration={{
+				"type": "image",
+				"src": logsPng,
+				"hasShadow": true
+			}}
+			illustrationPosition='left'
+			hasAnimation={true}
+		/>
+
+<GlSectionDivider />
+
+		<GlCards>
+			<GlProjectCard
+				title={t("projectCardTitle1")}
+				subtitle={t("projectCardSubtitle1")}
+				projectImageUrl={timelapsePng}
+			/>
+			<GlProjectCard
+				title={t("projectCardTitle2")}
+				subtitle={t("projectCardSubtitle2")}
+				projectImageUrl={logsPng}
+			/>
+			<GlProjectCard
+				title={t("projectCardTitle3")}
+				subtitle={t("projectCardSubtitle3")}
+				projectImageUrl={monitoringPng}
+			/>
+			<GlProjectCard
+				title={t("projectCardTitle4")}
+				subtitle={t("projectCardSubtitle4")}
+				projectImageUrl={statsPng}
+			/>
+		</GlCards>
+
+		<GlSectionDivider />
+
+		<GlCheckList
+			heading={t("checkListHeading")}
+			hasAnimation={true}
+			elements={
+
+				[
+					{
+						"title": t(`checkListElementTitle1`),
+						"description": t("checkListElementDescription1")
+					},
+					{
+						"title": t(`checkListElementTitle2`),
+						"description": t("checkListElementDescription2")
+					},
+					{
+						"title": t(`checkListElementTitle3`),
+						"description": t("checkListElementDescription3")
+					},
+					{
+						"title": t(`checkListElementTitle4`),
+						"description": t("checkListElementDescription4")
+					},
+					{
+						"title": t(`checkListElementTitle5`),
+						"description": t("checkListElementDescription5")
+					},
+					{
+						"title": t(`checkListElementTitle6`),
+						"description": t("checkListElementDescription6")
+					},
+					{
+						"title": t(`checkListElementTitle7`),
+						"description": t("checkListElementDescription7")
+					},
+					{
+						"title": t(`checkListElementTitle8`),
+						"description": t("checkListElementDescription8")
+					},
+					{
+						"title": t(`checkListElementTitle9`),
+						"description": t("checkListElementDescription9")
+					},
+				]
+			}
+		/>
+
+		<GlCards>
 				<GlLogoCard
 					title={t("card1Title")}
 					paragraph={t("card1Paragraph")}
-					buttonLabel="Button Label"
+					buttonLabel="Code in GitHub"
 					iconUrls={[
-						tchapIcon,
 						githubIcon
-
 					]}
+					link={{
+						"href": "https://github.com/xbgmsharp/postgsail/",
+					}}
 				/>
 				<GlLogoCard
 					title={t("card2Title")}
 					paragraph={t("card2Paragraph")}
-					buttonLabel="Button Label"
+					buttonLabel="Community & Support"
 					iconUrls={[
-						rocketIcon
+						discordIcon
 					]}
+					link={{
+						"href": "https://discord.gg/cpGqA5sZ",
+					}}
 				/>

 				<GlLogoCard
 					title={t("card3Title")}
 					paragraph={t("card3Paragraph")}
-					buttonLabel="Button Label"
+					buttonLabel="Make it yours"
 					iconUrls={[
-						balloonIcon,
-						drawioIcon,
-						rocketIcon,
-						plusIcon
+						grafanaIcon
 					]}
+					link={{
+						"href": "https://iot.openplotter.cloud",
+					}}
 					overlapIcons={true}
 				/>
 			</GlCards>
@@ -93,4 +234,40 @@ export const { i18n } = declareComponentKeys<
 	| "card1Paragraph"
 	| "card2Paragraph"
 	| "card3Paragraph"
+	| "articleTitle"
+	| "articleBody"
+	| "articleButtonLabel"
+	| "article2Title"
+	| "article2Body"
+	| "article2ButtonLabel"
+	| "article3Title"
+	| "article3Body"
+	| "article3ButtonLabel"
+	| "projectCardTitle1"
+	| "projectCardTitle2"
+	| "projectCardTitle3"
+	| "projectCardTitle4"
+	| "projectCardSubtitle1"
+	| "projectCardSubtitle2"
+	| "projectCardSubtitle3"
+	| "projectCardSubtitle4"
+	| "checkListHeading"
+	| "checkListElementTitle1"
+	| "checkListElementTitle2"
+	| "checkListElementTitle3"
+	| "checkListElementTitle4"
+	| "checkListElementTitle5"
+	| "checkListElementTitle6"
+	| "checkListElementTitle7"
+	| "checkListElementTitle8"
+	| "checkListElementTitle9"
+	| "checkListElementDescription1"
+	| "checkListElementDescription2"
+	| "checkListElementDescription3"
+	| "checkListElementDescription4"
+	| "checkListElementDescription5"
+	| "checkListElementDescription6"
+	| "checkListElementDescription7"
+	| "checkListElementDescription8"
+	| "checkListElementDescription9"
 >()({ Home });
--- a/src/pages/PageExample.tsx
+++ b/src/pages/PageExample.tsx
@@ -23,7 +23,38 @@ export const PageExample = memo(() => {
 			body={t("articleBody")}
 			buttonLabel={t("articleButtonLabel")}
 			buttonLink={{
-				"href": "https://example.com",
+				"href": "https://iot.openplotter.cloud",
+			}}
+			illustration={{
+				"type": "image",
+				"src": articlePng,
+				"hasShadow": false
+			}}
+			hasAnimation={true}
+		/>
+
+<GlArticle
+			title={t("article2Title")}
+			body={t("article2Body")}
+			buttonLabel={t("articleButtonLabel")}
+			buttonLink={{
+				"href": "https://iot.openplotter.cloud",
+			}}
+			illustration={{
+				"type": "image",
+				"src": articlePng,
+				"hasShadow": false
+			}}
+			illustrationPosition='left'
+			hasAnimation={true}
+		/>
+
+<GlArticle
+			title={t("article3Title")}
+			body={t("article3Body")}
+			buttonLabel={t("articleButtonLabel")}
+			buttonLink={{
+				"href": "https://iot.openplotter.cloud",
 			}}
 			illustration={{
 				"type": "image",
@@ -99,6 +130,12 @@ export const { i18n } = declareComponentKeys<
 	| "articleTitle"
 	| "articleBody"
 	| "articleButtonLabel"
+	| "article2Title"
+	| "article2Body"
+	| "article2ButtonLabel"
+	| "article3Title"
+	| "article3Body"
+	| "article3ButtonLabel"
 	| "projectCardTitle1"
 	| "projectCardTitle2"
 	| "projectCardTitle3"