Design

src/pages/about.vue

@@ -0,0 +1,24 @@
+<script setup>
+import HeroImage from '/src/assets/images/logo.svg'
+</script>
+
+<template>
+  <article class="prose dark:prose-invert max-w-full">
+    <img :src="HeroImage" class="w-full h-auto rounded-2xl" alt="PGTune" />
+    <p>
+      <strong>PGTune</strong> calculate configuration for PostgreSQL based on
+      the maximum performance for a given hardware configuration. It isn't a
+      <a
+        href="https://en.wikipedia.org/wiki/No_Silver_Bullet"
+        target="_blank"
+        class="font-medium underline"
+        >silver bullet</a
+      >
+      for the optimization settings of PostgreSQL. Many settings depend not only
+      on the hardware configuration, but also on the size of the database, the
+      number of clients and the complexity of queries. An optimal configuration
+      of the database can only be made given all these parameters are taken into
+      account.
+    </p>
+  </article>
+</template>

src/pages/index.vue

@@ -0,0 +1,14 @@
+<script setup>
+import ConfigurationForm from '../components/configurationForm.vue'
+import DefaultDescription from '../components/defaultDescription.vue'
+</script>
+
+<template>
+  <div class="grid lg:grid-cols-2 gap-16">
+    <div class="space-y-4">
+      <h3 class="text-xl font-bold">Parameters of your system</h3>
+      <ConfigurationForm />
+    </div>
+    <DefaultDescription />
+  </div>
+</template>