imporve template and readme

README.md

@@ -1,6 +1,24 @@
 # Landing generator
 
-Generate landing pages wih email collection in minutes.
+Generate landing pages with email collection in minutes.
+
+![Screenshot of an example landing page](/screenshot.png)
+
+## Introduction
+
+The goal of this project is to provide a simple way to generate landing pages
+with email collection. The landing pages are generated from a template and the
+configuration file.
+
+Several pages can be defined, by just providing their texts and other settings
+in the configuration file. The pages are then rendered from the template during
+the Docker container startup.
+
+The email collection is done with a simple form that sends the email to the
+backend, which stores it in a CSV file for each site.
+
+Both the frontend and the backend are served by the same container, just with
+one process per worker.
 
 ## Run it
 

config.example.yaml

@@ -2,15 +2,15 @@
 
 sites:
   - page_identifier: landing_generator
-    title: Landing Generator
-    tagline: Generate landing pages with email collection in minutes.
-    description: Generate landing pages with email collection in minutes.
-    item_1_title: Validate your idea
-    item_1_description: Create a landing page to validate your idea.
-    item_2_title: Collect emails
-    item_2_description: You will have an audience ready for when you launch.
-    item_3_title: Self hosted
-    item_3_description: Host your landing page on your own server.
-    item_4_title: Secure
+    title: Landing Page Generator
+    tagline: Create Landing Pages with Email Collection
+    description: Landing Generator simplifies the process of creating effective landing pages while enabling you to gather email addresses from potential customers. Efficient, straightforward, and user-friendly.
+    item_1_title: Validate Your Idea
+    item_1_description: Test the viability of your business idea with real user feedback.
+    item_2_title: Build Your Audience Early
+    item_2_description: Begin gathering email addresses right away. Our tools are designed for easy email collection, helping you create a solid foundation for your launch.
+    item_3_title: Self-Hosting Option
+    item_3_description: Choose to host your landing page on your own server for more control over your content and better alignment with your existing digital strategy.
+    item_4_title: Enhanced Data Security
     item_4_description: Your data is safe and secure and not shared with anyone.
-    button_text: Get more info
+    button_text: Learn More

template/README.md

@@ -32,5 +32,6 @@ The following variables are available for substitution:
 - `{{ item_4_title }}` - Title for bottom right item in the gridbox
 - `{{ item_4_description }}` - Description for bottom right item in the gridbox
 - `{{ button_text }}` - Text for the button next to the email input field
+- `{{ button_attributes }}` - Additional attributes for the button, e.g. `data-umami-event="button"`
 
 > Form method is always POST

template/src/index.html

@@ -72,6 +72,7 @@ <h3 class="font-extrabold text-xl mb-4 text-transparent bg-clip-text bg-gradient
                     <button id="submit" title="I am interested"
                         class="relative w-full items-center justify-center px-8 py-4 text-lg font-bold text-white transition-all duration-200 bg-gray-900 font-pj rounded-xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900"
                         disabled
+                        {{ button_attributes }}
                     >
                     {{ button_text }}
                     </button>
@@ -80,7 +81,7 @@ <h3 class="font-extrabold text-xl mb-4 text-transparent bg-clip-text bg-gradient
             <div class="relative flex flex-col justify-start xl:items-start items-center w-full sm:w-96" style="display: none;" id="success">
 
                 <p class="max-w-lg lg:max-w-2xl text-black text-xl">
-                    Sent successfully!
+                    We'll be in touch soon!
                 </p>
         </div>
 
@@ -92,5 +93,3 @@ <h3 class="font-extrabold text-xl mb-4 text-transparent bg-clip-text bg-gradient
     <script src="scripts.js"></script>
 </body>
 </html>
-
-