update readme, web

README.md

@@ -7,6 +7,9 @@ A friendly interface for [Dokku](https://github.com/dokku/dokku)
 ## Usage
 Read the [docs](https://shokku.app)
 
-## License
+## Support
+Shokku is provided 'as-is' - no support is available.
+Consider [Dokku Pro](https://pro.dokku.com).
 
+## License
 [AGPL License](https://github.com/texm/shokku/blob/master/LICENSE)

web/src/routes/+page.svelte

@@ -2,6 +2,7 @@
 	import Navbar from "$components/Navbar.svelte";
   import Hero from "./Hero.svelte";
   import Features from "./Features.svelte";
+  import Screenshots from "./Screenshots.svelte";
 </script>
 
 <div class="flex flex-col h-screen">
@@ -13,7 +14,11 @@
 		<Hero />
 	</div>
 
-	<div class="bg-base-300 justify-center p-8">
+	<div class="bg-base-300 flex flex-col md:flex-row justify-center p-8 gap-8">
+		<div class="w-full md:w-3/5">
+			<Screenshots />
+		</div>
+
 		<Features />
 	</div>
 </div>

web/src/routes/Features.svelte

@@ -3,16 +3,15 @@
 	  {title: "Free and Open Source", ref: "", description: "description"},
 	  {title: "Github Integration", ref: "", description: "description"},
 	  {title: "Services Support", ref: "", description: "description"},
-	  {title: "Services Support", ref: "", description: "description"},
 	]
 </script>
 
-<div class="grid grid-flow-row sm:grid-flow-col sm:auto-cols-fr gap-4">
+<div class="flex flex-col gap-2">
 	{#each features as feature}
-		<div class="card bg-base-200 hover:bg-base-100 shadow-xl">
+		<div class="card bg-base-100 shadow-xl">
 			<div class="card-body">
 				<h2 class="card-title">{feature.title}</h2>
-				<p>{feature.description}</p>
+				<!--p>{feature.description}</p-->
 				<!--div class="card-actions justify-end">
 					<button class="btn btn-ghost">Learn More</button>
 				</div-->

web/src/routes/Hero.svelte

@@ -9,7 +9,7 @@
 	<div class="hero-content text-center flex-col py-10 px-0">
 		<div class="max-w-md mb-4">
 			<h1 class="text-5xl font-bold mb-2">A friendly interface for Dokku</h1>
-			<p class="text-xl">
+			<p class="text-xl px-4">
 				an open-source self-hostable web UI to help
 				<strong>configure</strong> and <strong>deploy</strong>
 				your apps and services with <a class="link" href="https://dokku.com/">Dokku</a>

web/src/routes/Screenshots.svelte

@@ -9,7 +9,7 @@
 	const prevIdx = i => (carouselImages - i)
 </script>
 
-<div class="mockup-window rounded-xl bg-base-200 shadow-secondary w-3/5 h-auto">
+<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="/images/dashboard-dark.webp" />
 	<img class="hidden dark:inline" alt="dashboard screenshot" src="/images/dashboard-light.webp" />
 </div>