improve landing design

thewh1teagle · Dec 17, 2024 · 1eb9522 · 1eb9522
1 parent f17b5ba
commit 1eb9522
Show file tree

Hide file tree

Showing 12 changed files with 159 additions and 40 deletions.
diff --git a/landing/src/components/Cta.svelte b/landing/src/components/Cta.svelte
@@ -9,6 +9,7 @@
 	import latestRelease from '$lib/latest_release.json'
 	import linuxInstallOptions from '$lib/linux_install_options.json'
 	import mobile from 'is-mobile'
+	import SupportButton from './SupportButton.svelte'
 
 	let asset = latestRelease.assets.find((a) => a.platform?.toLowerCase() === 'macos') // default to macos
 	let ctaClicked = false
@@ -87,7 +88,13 @@
 
 		<!--  windows -->
 	{:else if asset?.platform.toLowerCase() === 'windows'}
-		<a href={asset?.url} class="btn btn-primary hidden md:flex">
+		<a
+			on:click={() => {
+				// @ts-ignore
+				window['post-download-modal']?.showModal()
+			}}
+			href={asset?.url}
+			class="btn btn-primary hidden md:flex">
 			<WindowsIcon />
 
 			{t('download-for')}{asset?.platform}
@@ -107,13 +114,16 @@
 
 		<dialog id="linux_download_model" class="modal">
 			<div class="modal-box w-11/12 max-w-5xl">
-				<h3 class="text-3xl font-bold">Install Vibe on Linux</h3>
+				<h3 class="text-3xl font-bold">{t('install-on-linux')}</h3>
 				{#each linuxInstallOptions as installOption}
-					<div class="mt-5">
+					<div class="mt-5" dir="ltr">
 						<div class="mb-2 text-3xl text-primary opacity-80">{installOption.title}</div>
 						<code class="min-w-[700px] flex bg-[#2b2b2b] p-2 rounded-sm">{installOption.command.replace('{tag}', latestRelease.version)}</code>
 					</div>
 				{/each}
+				<div class="flex items-center justify-center mt-10">
+					<SupportButton />
+				</div>
 			</div>
 			<form method="dialog" class="modal-backdrop">
 				<button>close</button>
@@ -133,11 +143,23 @@
 <!-- macos architectures -->
 {#if asset?.platform.toLocaleLowerCase() == 'macos' && ctaClicked}
 	<div class="flex gap-2 mt-3">
-		<a class="btn btn-sm btn-outline" href={macIntelAsset?.url}>
+		<a
+			on:click={() => {
+				// @ts-ignore
+				window['post-download-modal']?.showModal()
+			}}
+			class="btn btn-sm btn-outline"
+			href={macIntelAsset?.url}>
 			<ChipIcon />
 			{t('intel')}
 		</a>
-		<a class="btn btn-sm btn-outline" href={macSiliconAsset?.url}>
+		<a
+			on:click={() => {
+				// @ts-ignore
+				window['post-download-modal']?.showModal()
+			}}
+			class="btn btn-sm btn-outline"
+			href={macSiliconAsset?.url}>
 			<ChipIcon />
 			{t('apple-silicon')}
 		</a>

diff --git a/landing/src/components/Footer.svelte b/landing/src/components/Footer.svelte
@@ -11,7 +11,13 @@
 		<a class="link link-hover" href={base}>{t('home')}</a>
 		<a class="link link-hover" href={`${base}/features`}>{t('features')}</a>
 		<a class="link link-hover" href="https://github.com/thewh1teagle/vibe" target="_blank">Github</a>
-		<a class="link link-hover" href="https://ko-fi.com/thewh1teagle" target="_blank">{t('support-vibe')}</a>
+		<a
+			on:click={() => {
+				// @ts-ignore
+				window?.['kofi-dialog'].showModal()
+			}}
+			class="link link-hover"
+			target="_blank">{t('support-vibe')}</a>
 		<a class="link link-hover" href="https://github.com/thewh1teagle/vibe/blob/main/docs/PRIVACY_POLICY.pdf" target="_blank">{t('privacy-policy')}</a>
 	</nav>
 	<nav>

diff --git a/landing/src/components/PostDownload.svelte b/landing/src/components/PostDownload.svelte
@@ -0,0 +1,23 @@
+<script>
+	import Heart from '~/icons/Heart.svelte'
+
+	import { i18n } from '$lib/i18n'
+	import { base } from '$app/paths'
+	import SupportButton from './SupportButton.svelte'
+
+	const t = $i18n.t
+</script>
+
+<dialog id="post-download-modal" class="modal">
+	<div class="modal-box max-w-md mx-auto p-6">
+		<form method="dialog">
+			<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
+		</form>
+		<h3 class="text-xl font-semibold text-center">{t('your-download-is-starting')}</h3>
+		<p class="py-2 opacity-50 text-sm text-center">{t('download-starting-description')}</p>
+		<p class="text-center text-sm mt-5">{t('support-while-you-wait')}</p>
+		<div class="flex justify-center mt-4">
+			<SupportButton />
+		</div>
+	</div>
+</dialog>
diff --git a/landing/src/components/SupportButton.svelte b/landing/src/components/SupportButton.svelte
@@ -0,0 +1,17 @@
+<script>
+	import Heart from '~/icons/Heart.svelte'
+
+	import { i18n } from '$lib/i18n'
+
+	const t = $i18n.t
+</script>
+
+<button
+	class="btn btn-primary bg-red-500 hover:bg-red-800"
+	on:click={() => {
+		// @ts-ignore
+		window?.['kofi-dialog'].showModal()
+	}}>
+	{t('support-project')}
+	<Heart />
+</button>
diff --git a/landing/src/icons/Heart.svelte b/landing/src/icons/Heart.svelte
@@ -0,0 +1,5 @@
+<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" stroke-width="3" data-view-component="true" class="fill-white">
+	<path
+		d="m8 14.25.345.666a.75.75 0 0 1-.69 0l-.008-.004-.018-.01a7.152 7.152 0 0 1-.31-.17 22.055 22.055 0 0 1-3.434-2.414C2.045 10.731 0 8.35 0 5.5 0 2.836 2.086 1 4.25 1 5.797 1 7.153 1.802 8 3.02 8.847 1.802 10.203 1 11.75 1 13.914 1 16 2.836 16 5.5c0 2.85-2.045 5.231-3.885 6.818a22.066 22.066 0 0 1-3.744 2.584l-.018.01-.006.003h-.002ZM4.25 2.5c-1.336 0-2.75 1.164-2.75 3 0 2.15 1.58 4.144 3.365 5.682A20.58 20.58 0 0 0 8 13.393a20.58 20.58 0 0 0 3.135-2.211C12.92 9.644 14.5 7.65 14.5 5.5c0-1.836-1.414-3-2.75-3-1.373 0-2.609.986-3.029 2.456a.749.749 0 0 1-1.442 0C6.859 3.486 5.623 2.5 4.25 2.5Z"
+	></path>
+</svg>
diff --git a/landing/src/routes/+page.svelte b/landing/src/routes/+page.svelte
@@ -2,6 +2,7 @@
 	import Cta from '~/components/Cta.svelte'
 	import Meta from '~/components/Meta.svelte'
 	import { i18n } from '$lib/i18n'
+	import PostDownload from '~/components/PostDownload.svelte'
 </script>
 
 <h1 class="text-3xl lg:text-6xl text-center capitalize">{$i18n.t('title')}</h1>
@@ -15,8 +16,23 @@
 	<img class="preview-hover-image rounded-2xl object-cover w-full h-auto" alt="preview" src="preview.png" />
 </div>
 
+<PostDownload />
 <Meta />
 
+<dialog id="kofi-dialog" class="modal border-white">
+	<div class="modal-box !bg-white !border-white">
+		<iframe
+			id="kofiframe"
+			src="https://ko-fi.com/thewh1teagle/?hidefeed=true&widget=true&embed=true&preview=true"
+			style="border:none;width:100%;padding:4px;background:#f9f9f9;"
+			height="712"
+			title="thewh1teagle"></iframe>
+	</div>
+	<form method="dialog" class="modal-backdrop">
+		<button>close</button>
+	</form>
+</dialog>
+
 <style lang="postcss">
 	.preview-hover-image {
 		transition:

diff --git a/landing/static/locales/en-US.json b/landing/static/locales/en-US.json
@@ -1,18 +1,23 @@
 {
-	"title": "Transcribe. on Your Own.",
-	"description": "Experience seamless language transcription with Vibe - your all-in-one solution for effortless audio and video transcription.",
-	"intel": "Intel Chip",
 	"apple-silicon": "Apple Chip",
-	"star-on-github": "Star On Github",
+	"available-for": "Available for",
+	"cancel": "Cancel",
+	"copy-download-link": "Copy Download Link",
+	"description": "Experience seamless language transcription with Vibe - your all-in-one solution for effortless audio and video transcription.",
+	"download": "Download",
 	"download-for": "Download For ",
-	"open-logs-folder": "Open Logs Folder",
+	"download-on-pc": "Download On PC",
+	"download-starting-description": "The download will begin shortly. You can then find the installer in your Downloads folder.",
 	"features": "Features",
-	"support-vibe": "Support Vibe",
 	"home": "Home",
-	"download": "Download",
-	"download-on-pc": "Download On PC",
-	"available-for": "Available for",
-	"copy-download-link": "Copy Download Link",
-	"cancel": "Cancel",
-	"privacy-policy": "Privacy Policy"
-}
+	"install-on-linux": "Install Vibe on Linux",
+	"intel": "Intel Chip",
+	"open-logs-folder": "Open Logs Folder",
+	"privacy-policy": "Privacy Policy",
+	"star-on-github": "Star On Github",
+	"support-project": "Support Vibe!",
+	"support-vibe": "Support Vibe",
+	"support-while-you-wait": "While you wait, consider supporting the Vibe project to help us grow!",
+	"title": "Transcribe. on Your Own.",
+	"your-download-is-starting": "Your download is starting..."
+}
diff --git a/landing/static/locales/es-MX.json b/landing/static/locales/es-MX.json
@@ -1,18 +1,23 @@
 {
-    "title": "Transcribe. Por ti mismo(a).",
-    "description": "Experimenta la transcripción de idiomas sin problemas con Vibe: su solución todo en uno para transcribir audio y vídeo sin esfuerzo.",
-    "intel": "Chip de Intel",
-    "apple-silicon": "Chip de Apple",
-    "star-on-github": "Déjanos una estrella en Github",
-    "download-for": "Descargar para ",
-    "open-logs-folder": "Abrir Directorio de Registros",
-    "features": "Características",
-    "support-vibe": "Apoya a Vibe",
-    "home": "Inicio",
-    "download": "Descargar",
-    "download-on-pc": "Descargar para PC",
-    "available-for": "Disponible para",
-    "copy-download-link": "Copiar enlace de descarga",
-    "cancel": "Cancelar",
-    "privacy-policy": "Política de privacidad"
-}
+	"apple-silicon": "Chip de Apple",
+	"available-for": "Disponible para",
+	"cancel": "Cancelar",
+	"copy-download-link": "Copiar enlace de descarga",
+	"description": "Experimenta la transcripción de idiomas sin problemas con Vibe: su solución todo en uno para transcribir audio y vídeo sin esfuerzo.",
+	"download": "Descargar",
+	"download-for": "Descargar para ",
+	"download-on-pc": "Descargar para PC",
+	"download-starting-description": "La descarga comenzará en breve. \nLuego podrá encontrar el instalador en su carpeta de Descargas.",
+	"features": "Características",
+	"home": "Inicio",
+	"install-on-linux": "Instalar Vibe en Linux",
+	"intel": "Chip de Intel",
+	"open-logs-folder": "Abrir Directorio de Registros",
+	"privacy-policy": "Política de privacidad",
+	"star-on-github": "Déjanos una estrella en Github",
+	"support-project": "¡Apoya la vibra!",
+	"support-vibe": "Apoya a Vibe",
+	"support-while-you-wait": "Mientras espera, considere apoyar el proyecto Vibe para ayudarnos a crecer.",
+	"title": "Transcribe. Por ti mismo(a).",
+	"your-download-is-starting": "Tu descarga está comenzando..."
+}
diff --git a/landing/static/locales/fr-FR.json b/landing/static/locales/fr-FR.json
@@ -7,12 +7,17 @@
 	"download": "Télécharger",
 	"download-for": "Télécharger pour ",
 	"download-on-pc": "Télécharger sur PC",
+	"download-starting-description": "Le téléchargement commencera sous peu. \nVous pouvez ensuite trouver le programme d'installation dans votre dossier Téléchargements.",
 	"features": "Caractéristiques",
 	"home": "Maison",
+	"install-on-linux": "Installer Vibe sur Linux",
 	"intel": "Puce Intel",
 	"open-logs-folder": "Ouvrir le dossier des journaux",
 	"privacy-policy": "politique de confidentialité",
 	"star-on-github": "Mettre une étoile sur Github",
+	"support-project": "Soutenez Vibe !",
 	"support-vibe": "Ambiance de soutien",
-	"title": "Transcription audio locale."
+	"support-while-you-wait": "En attendant, pensez à soutenir le projet Vibe pour nous aider à grandir !",
+	"title": "Transcription audio locale.",
+	"your-download-is-starting": "Votre téléchargement commence..."
 }
diff --git a/landing/static/locales/he-IL.json b/landing/static/locales/he-IL.json
@@ -7,12 +7,17 @@
 	"download": "הורדה",
 	"download-for": "הורדה ל",
 	"download-on-pc": "זמין להורדה במחשב",
+	"download-starting-description": "ההורדה תתחיל בקרוב. \nלאחר מכן תוכל למצוא את תוכנית ההתקנה בתיקיית ההורדות שלך.",
 	"features": "פיצ'רים",
 	"home": "למסך הראשי",
+	"install-on-linux": "התקן את Vibe ב-Linux",
 	"intel": "מעבד אינטל",
 	"open-logs-folder": "Open Logs Folder",
 	"privacy-policy": "מדיניות פרטיות",
 	"star-on-github": "סטאר בגיטהאב!",
+	"support-project": "תמכו ב-Vibe!",
 	"support-vibe": "תמיכה בVibe",
-	"title": "תמלל קבצי אודיו או וידאו!"
+	"support-while-you-wait": "בזמן שאתה מחכה, שקול לתמוך בפרויקט Vibe כדי לעזור לנו לצמוח!",
+	"title": "תמלל קבצי אודיו או וידאו!",
+	"your-download-is-starting": "ההורדה שלך מתחילה..."
 }
diff --git a/landing/static/locales/pl-PL.json b/landing/static/locales/pl-PL.json
@@ -7,12 +7,17 @@
 	"download": "Pobierz",
 	"download-for": "Pobierz dla ",
 	"download-on-pc": "Pobierz na PC",
+	"download-starting-description": "Pobieranie rozpocznie się wkrótce. \nNastępnie możesz znaleźć instalator w folderze Pobrane.",
 	"features": "Funkcje",
 	"home": "Strona główna",
+	"install-on-linux": "Zainstaluj Vibe na Linuksie",
 	"intel": "Układy od Intela",
 	"open-logs-folder": "Otwórz folder logów",
 	"privacy-policy": "Polityka prywatności",
 	"star-on-github": "Daj gwiazdę na Githubie",
+	"support-project": "Wspieraj Vibe!",
 	"support-vibe": "Wspomóż Vibe",
-	"title": "Transkrybuj. po swojemu."
+	"support-while-you-wait": "Czekając, rozważ wsparcie projektu Vibe, który pomoże nam się rozwijać!",
+	"title": "Transkrybuj. po swojemu.",
+	"your-download-is-starting": "Rozpoczyna się pobieranie..."
 }
diff --git a/landing/static/locales/pt-BR.json b/landing/static/locales/pt-BR.json
@@ -7,12 +7,17 @@
 	"download": "Download",
 	"download-for": "Download Para ",
 	"download-on-pc": "Download no PC",
+	"download-starting-description": "O download começará em breve. \nVocê pode então encontrar o instalador na pasta Downloads.",
 	"features": "Recursos",
 	"home": "Inicio",
+	"install-on-linux": "Instale o Vibe no Linux",
 	"intel": "Chip Intel ",
 	"open-logs-folder": "Abrir pasta de registros",
 	"privacy-policy": "política de Privacidade",
 	"star-on-github": "Estrela no Github",
+	"support-project": "Apoie a Vibe!",
 	"support-vibe": "Apoiar Vibe",
-	"title": "Transcreva. por conta própria."
+	"support-while-you-wait": "Enquanto espera, considere apoiar o projeto Vibe para nos ajudar a crescer!",
+	"title": "Transcreva. por conta própria.",
+	"your-download-is-starting": "Seu download está começando..."
 }