feat(landing): features section, footer

landing/src/components/Cta.svelte

@@ -66,7 +66,7 @@
 		</a>
 	{/if}
 	<a class="btn" href="https://github.com/thewh1teagle/vibe" target="_blank">
-		<GithubIcon />
+		<GithubIcon width="18" height="18" />
 		{$i18n.t('star-on-github')}
 	</a>
 </div>

landing/src/components/Footer.svelte

@@ -0,0 +1,24 @@
+<script>
+	import Github from '~/icons/Github.svelte'
+	import { i18n } from '$lib/i18n'
+	const t = $i18n.t
+</script>
+
+<footer class="footer footer-center mt-36 p-10 bg-base-200 text-base-content rounded">
+	<nav class="grid grid-flow-col gap-4">
+		<a class="link link-hover" href={import.meta.env.BASE_URL}>{t('home')}</a>
+		<a class="link link-hover" href="/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://github.com/sponsors/thewh1teagle" target="_blank">{t('support-vibe')}</a>
+	</nav>
+	<nav>
+		<div class="grid grid-flow-col gap-4">
+			<a href="https://github.com/thewh1teagle/vibe" target="_blank">
+				<Github width="24" height="24" />
+			</a>
+		</div>
+	</nav>
+	<aside>
+		<p>Vibe - {t('title')}</p>
+	</aside>
+</footer>

landing/src/components/Nav.svelte

@@ -1,16 +1,23 @@
 <script>
 	import Logo from '~/icons/Logo.svelte'
+	import { i18n } from '~/lib/i18n'
+	const t = $i18n.t
 </script>
 
 <div class="navbar bg-base-100 lg:flex lg:max-w-[1065px] mt-3 m-auto">
 	<div class="flex-1">
-		<a href="#top" class="btn btn-ghost text-sm sm:btn-xs lg:btn-md lg:text-xl">
+		<a href={import.meta.env.BASE_URL} class="btn btn-ghost text-sm sm:btn-xs lg:btn-md lg:text-xl">
 			<Logo />
 			<span class="opacity-95">Vibe</span>
 		</a>
 	</div>
 	<!-- links -->
-	<div class="flex-none" dir="ltr">
-		<!-- todo: add links and features -->
-	</div>
+	<ul class="flex-none menu menu-horizontal px-1" dir="ltr">
+		<li>
+			<a href="/features">{t('features')}</a>
+		</li>
+		<li>
+			<a href="https://github.com/thewh1teagle/vibe" target="_blank">Github</a>
+		</li>
+	</ul>
 </div>

landing/src/icons/Github.svelte

@@ -1,4 +1,9 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1em" height="1em" fill="currentColor"
+<script>
+	export let width = '24'
+	export let height = '24'
+</script>
+
+<svg {width} {height} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
 	><path
 		d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
 	></path

landing/src/lib/features.json

@@ -0,0 +1,27 @@
+[
+	{
+		"title": "Transcribe almost every language",
+		"description": "Vibe supports up to 100 languages!",
+		"imageURL": "/feature-languages.png"
+	},
+	{
+		"title": "Batch transcribe multiple files!",
+		"description": "You can transcribe as many files as you want easily in single click.",
+		"imageURL": "feature-batch-transcribe.png"
+	},
+	{
+		"title": "Multiple formats",
+		"description": "You can export transcription in your preferred format",
+		"imageURL": "/feature-formats.png"
+	},
+	{
+		"title": "Optimized for GPU",
+		"description": "Vibe is optimized to run on Nvidia / AMD / Apple GPUs!",
+		"imageURL": "/feature-gpu.png"
+	},
+	{
+		"title": "Ultimate privacy",
+		"description": "Fully offline transcription, no data ever leaves your device",
+		"imageURL": "/feature-privacy.png"
+	}
+]

landing/src/routes/+layout.svelte

@@ -3,6 +3,7 @@
 	import { i18n } from '$lib/i18n'
 	import { isLoading } from 'svelte-i18next'
 	import Nav from '~/components/Nav.svelte'
+	import Footer from '~/components/Footer.svelte'
 </script>
 
 <div dir={$i18n.dir()}>
@@ -14,6 +15,7 @@
 			<div class="mt-4 lg:mt-10 pb-16">
 				<slot />
 			</div>
+			<Footer />
 		{/if}
 	</div>
 </div>

landing/src/routes/features/+page.svelte

@@ -0,0 +1,23 @@
+<script>
+	import Feature from './feature.svelte'
+	import features from '~/lib/features.json'
+</script>
+
+<div class="max-w-[78%] lg:max-w-[600px] m-auto" dir="ltr">
+	<div class="text-4xl font-bold">Features</div>
+
+	<div class="flex flex-col gap-32 mt-14">
+		{#each features as feature}
+			<div>
+				<h2 class="text-2xl font-bold">{feature.title}</h2>
+				<p class="mt-2">{feature.description}</p>
+				{#if feature.imageURL}
+					<img src={feature.imageURL} alt={feature.title} class="mt-4 rounded-lg" />
+				{/if}
+				<!-- {#if feature.videoURL}
+					<video src={feature.videoURL} class="mt-4 rounded-lg" />
+				{/if} -->
+			</div>
+		{/each}
+	</div>
+</div>

landing/src/routes/features/feature.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	export let title: string
+	export let description: string
+	export let videoURL = ''
+	export let imageURL = ''
+</script>
+
+<div>
+	<div class="text-3xl font-medium">{title}</div>
+	<div class="text-lg opacity-80 mt-6 mb-6">{description}</div>
+
+	{#if imageURL}
+		<img src={imageURL} alt="Image" class="rounded-lg" />
+	{/if}
+
+	{#if videoURL}
+		<video src={videoURL} controls class="rounded-lg"></video>
+	{/if}
+</div>

landing/static/locales/en-US.json

@@ -5,5 +5,8 @@
 	"apple-silicon": "Apple Chip",
 	"star-on-github": "Star On Github",
 	"download-for": "Download For ",
-	"open-logs-folder": "Open Logs Folder"
+	"open-logs-folder": "Open Logs Folder",
+	"features": "Features",
+	"support-vibe": "Support Vibe",
+	"home": "Home"
 }

landing/static/locales/he-IL.json

@@ -5,5 +5,8 @@
 	"apple-silicon": "מעבד אפל",
 	"star-on-github": "סטאר בגיטהאב!",
 	"download-for": "הורדה ל",
-	"open-logs-folder": "Open Logs Folder"
+	"open-logs-folder": "Open Logs Folder",
+	"features": "פיצ'רים",
+	"support-vibe": "תמיכה בVibe",
+	"home": "למסך הראשי"
 }