screenshots

web/src/routes/Features.svelte

@@ -2,11 +2,12 @@
 	const features = [
 	  {title: "Free and Open Source", ref: "", description: "description"},
 	  {title: "Github Integration", ref: "", description: "description"},
+	  {title: "Easy Setup", ref: "", description: "description"},
 	  {title: "Services Support", ref: "", description: "description"},
 	]
 </script>
 
-<div class="flex flex-col gap-2">
+<div class="flex flex-col gap-4">
 	{#each features as feature}
 		<div class="card bg-base-100 shadow-xl">
 			<div class="card-body">

web/src/routes/Hero.svelte

@@ -24,9 +24,9 @@
 					<button class="btn btn-primary text-primary-content">Get Started</button>
 				</a>
 
-				<a href={demoUrl}>
+				<!--a href={demoUrl}>
 					<button class="btn btn-secondary text-secondary-content">Try the Demo</button>
-				</a>
+				</a-->
 			</div>
 		</div>
 	</div>

web/src/routes/Screenshots.svelte

@@ -3,6 +3,7 @@
 
 	const carouselImages = [
 		{alt: "dashboard screenshot", src: `${base}/images/dashboard-light.webp`},
+	  {alt: "dashboard screenshot", src: `${base}/images/dashboard-dark.webp`},
 		{alt: "app overview", src: `${base}/images/app-overview.webp`},
 		{alt: "service overview", src: `${base}/images/service-overview.webp`},
 	]
@@ -12,6 +13,15 @@
 </script>
 
 <div class="mockup-window rounded-xl bg-base-200 w-auto h-fit shadow-lg shadow-secondary">
-	<img class="inline dark:hidden" alt="dashboard screenshot" src="{base}/images/dashboard-dark.webp" />
+	<div class="w-full carousel rounded-box">
-	<img class="hidden dark:inline" alt="dashboard screenshot" src="{base}/images/dashboard-light.webp" />
+	{#each carouselImages as image, i}
+		<div id="img{1 + i}" class="carousel-item relative w-full">
+			<img src={image.src} class="w-full" alt={image.alt} />
+			<div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
+				<a href="#img{1 + prevIdx(i)}" class="btn btn-circle">❮</a>
+				<a href="#img{1 + nextIdx(i)}" class="btn btn-circle">❯</a>
+			</div>
+		</div>
+	{/each}
+	</div>
 </div>

web/src/routes/docs/installation/+page.svelte

@@ -1,5 +1,5 @@
 <script>
-	const bootstrapLink = "https://shokku.app/install.sh";
+	const bootstrapLink = "https://shokku.dev/install.sh";
 	const scriptInstallCommands = [
 	  `wget "${bootstrapLink}"`,
 		`export SHOKKU_LETSENCRYPT_EMAIL="foo@example.com"`,

web/svelte.config.js

@@ -6,7 +6,7 @@ const config = {
 	kit: {
 		adapter: adapter(),
 		paths: {
-			base: process.env.NODE_ENV === "production" ? "/shokku" : "",
+			base: process.env.NODE_ENV === "production" ? process.env.BASE_PATH : "",
 			relative: false,
 		},
 	},