add features align

landing/src/lib/features.json

@@ -14,14 +14,22 @@
 		"description": "You can export transcription in your preferred format",
 		"imageURL": "/feature-formats.png"
 	},
+	{
+		"title": "Transcribe audio / video",
+		"description": "Supports audio and video formats like MP4, MKV, MP3, WAV (and more)",
+		"imageURL": "/feature-transcribe-audio-video.png",
+		"align": "center"
+	},
 	{
 		"title": "Optimized for GPU",
 		"description": "Vibe is optimized to run on Nvidia / AMD / Apple GPUs!",
-		"imageURL": "/feature-gpu.png"
+		"imageURL": "/feature-gpu.png",
+		"align": "center"
 	},
 	{
 		"title": "Ultimate privacy",
 		"description": "Fully offline transcription, no data ever leaves your device",
-		"imageURL": "/feature-privacy.png"
+		"imageURL": "/feature-privacy.png",
+		"align": "center"
 	}
 ]

landing/src/routes/features/feature.svelte

@@ -5,17 +5,34 @@
 	export let description: string
 	export let videoURL = ''
 	export let imageURL = ''
+	export let align: string = 'start'
 </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={`${base}${imageURL}`} alt="Image" class="rounded-lg" />
+		<div class="flex {align}">
+			<img src={`${base}${imageURL}`} alt="Image" class="rounded-lg" />
+		</div>
 	{/if}
 
 	{#if videoURL}
-		<video src={`${base}${videoURL}`} controls class="rounded-lg"></video>
+		<div class="flex items-center {align}">
+			<video src={`${base}${videoURL}`} controls class="rounded-lg"></video>
+		</div>
 	{/if}
 </div>
+
+<style>
+	.start {
+		justify-content: flex-start;
+	}
+	.center {
+		justify-content: center;
+	}
+	.end {
+		justify-content: flex-end;
+	}
+</style>