feat: home page looks better now

layouts/index.html

@@ -1,32 +1,40 @@
 {{ partial "header.html" . }}
 
-<section class="homepage-hero hero is-dark is-medium">
-	<!-- Hero head: will stick at the top -->
-	<div class="hero-head">
+<section class="w-full min-h-screen bg-hero-llama bg-cover flex items-center justify-center flex-col text-white font-title font-bold text-center pt-36 pb-8">
+	{{ if .Params.heading }}
+		{{ if .Params.heading.heading }}
+			<h1 class="text-5xl mb-4">{{.Params.heading.heading | markdownify}}</h1>
+		{{end}}
+		{{ if .Params.heading.content }}
+			<h3 class="text-3xl mb-6">{{.Params.heading.content | markdownify}}</h3>
+		{{end}}
+		{{ if .Params.heading.subtitle }}
+			<h4 class="text-xl">{{.Params.heading.subtitle | markdownify}}</h4>
+		{{end}}
+		{{ if .Params.heading.subsubtitle }}
+			<h4 class="text-lg">{{.Params.heading.subsubtitle | markdownify}}</h4>
+		{{end}}
+	{{end}}
+
+	{{ .Content | markdownify}}
+
+	<div class="flex py-4 space-x-2">
+		<a href="https://try.vikunja.io"
+		   class="px-4 py-2 border border-transparent shadow text-xl font-medium rounded-md text-white bg-primary hover:bg-primary-darker cursor-pointer">
+			Try it
+		</a>
+		<a href="/features"
+		   class="px-4 py-2 border border-transparent shadow text-xl font-medium rounded-md text-white bg-primary hover:bg-primary-darker cursor-pointer">
+			Features
+		</a>
 	</div>
 
-	<!-- Hero content: will be in the middle -->
-	<div class="hero-body">
-		<div class="container has-text-centered">
-
-			{{ if .Params.heading }}
-				{{ if .Params.heading.heading }}
-					<h1 class="title is-1">{{.Params.heading.heading | markdownify}}</h1>
-				{{end}}
-				{{ if .Params.heading.content }}
-					<h3 class="subtitle is-3">{{.Params.heading.content | markdownify}}</h3>
-				{{end}}
-				{{ if .Params.heading.subtitle }}
-					<h4 class="subtitle is-4">{{.Params.heading.subtitle | markdownify}}</h4>
-				{{end}}
-				{{ if .Params.heading.subsubtitle }}
-					<h4 class="subtitle text-normal">{{.Params.heading.subsubtitle | markdownify}}</h4>
-				{{end}}
-			{{end}}
-
-
-			{{ .Content | markdownify}}
-		</div>
+	<div class="mt-20 max-w-screen-xl rounded-sm overflow-hidden shadow-lg">
+		<picture class="object-contain object-top w-full">
+			<source srcset="/images/vikunja-task-overview.webp" type="image/webp"/>
+			<source srcset="/images/vikunja-task-overview.png" type="image/png"/>
+			<img src="/images/vikunja-task-overview.png" alt=""/>
+		</picture>
 	</div>
 </section>
 

tailwind.config.js

@@ -1,26 +1,30 @@
 const defaultTheme = require('tailwindcss/defaultTheme')
 
 module.exports = {
-  content: [
-      './src/*.css',
-      './layouts/**/*.html'
-  ],
-  theme: {
-    extend: {
-        colors: {
-            primary: {
-                lighter: '#3b7aec',
-                DEFAULT: '#196aff',
-                darker: '#0064ff',
-            }
-        },
-        fontFamily: {
-            title: ['Quicksand', ...defaultTheme.fontFamily.sans],
-        },
-    },
-  },
-  plugins: [
-      require('@tailwindcss/typography'),
-	  require('@tailwindcss/forms'),
-  ],
+	content: [
+		'./src/*.css',
+		'./layouts/**/*.html'
+	],
+	theme: {
+		extend: {
+			colors: {
+				primary: {
+					lighter: '#3b7aec',
+					DEFAULT: '#196aff',
+					darker: '#0064ff',
+				}
+			},
+			fontFamily: {
+				title: ['Quicksand', ...defaultTheme.fontFamily.sans],
+			},
+			backgroundImage: {
+				'hero-llama': "url('/images/bg-3.jpg')",
+			},
+		},
+	},
+	plugins: [
+		require('@tailwindcss/typography'),
+		require('@tailwindcss/forms'),
+		require('@tailwindcss/aspect-ratio'),
+	],
 }