From a8fccbb4614b52aa104c62e33723d9bf67023b39 Mon Sep 17 00:00:00 2001
From: Dean Lofts <dean@deanlofts.xyz>
Date: Tue, 27 Aug 2024 21:47:34 +1000
Subject: [PATCH] enhance landing page

---
 app/views/pages/home.html.erb | 62 +++++++++++++++++++++++++----------
 1 file changed, 44 insertions(+), 18 deletions(-)

diff --git a/app/views/pages/home.html.erb b/app/views/pages/home.html.erb
index a454994..090e2fd 100644
--- a/app/views/pages/home.html.erb
+++ b/app/views/pages/home.html.erb
@@ -10,44 +10,70 @@
         <%= image_tag "judgemental_linkarooie.jpg", class: "w-1/2", alt: "Linkarooie" %>
       </div>
       <p class="text-lg">
-        Simplify your online presence with a single link.
+        Simplify your online presence with a single, customizable link.
       </p>
     </div>
   </section>
 
+  <!-- New Feature-Rich Platform Section -->
+  <section class="py-8 w-full bg-gray-900 text-center">
+    <div class="max-w-2xl mx-auto">
+      <h2 class="text-2xl font-bold text-white mb-4">Feature-Rich Platform</h2>
+      <p class="text-gray-400">
+        Linkarooie offers a feature-rich platform to manage your online identity, showcase achievements, and track engagement, all in one place.
+      </p>
+    </div>
+  </section>
 
   <!-- Features Section -->
   <section id="features" class="py-16 w-full bg-gray-900">
-    <div class="text-center mb-12">
-      <h2 class="text-3xl font-bold text-white">Features</h2>
-      <p class="text-gray-400">Everything you need to manage your links.</p>
-    </div>
     <div class="grid grid-cols-1 md:grid-cols-3 gap-8 px-4 md:px-0">
       <div class="flex flex-col items-center p-6 bg-gray-800 rounded-lg shadow-md">
         <svg class="w-12 h-12 mb-4 text-lime-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
         </svg>
-        <h3 class="text-xl font-semibold mb-2 text-white">Custom Links</h3>
-        <p class="text-gray-400 text-center">Add and manage your custom links easily.</p>
+        <h3 class="text-xl font-semibold mb-2 text-white">Custom Links Management</h3>
+        <p class="text-gray-400 text-center">Create, edit, and manage links effortlessly. Customize icons, descriptions, and visibility to better represent your brand or personal profile.</p>
       </div>
       <div class="flex flex-col items-center p-6 bg-gray-800 rounded-lg shadow-md">
         <svg class="w-12 h-12 mb-4 text-lime-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4"></path>
         </svg>
-        <h3 class="text-xl font-semibold mb-2 text-white">Analytics</h3>
-        <p class="text-gray-400 text-center">Track link performance with detailed analytics.</p>
+        <h3 class="text-xl font-semibold mb-2 text-white">Advanced Analytics</h3>
+        <p class="text-gray-400 text-center">Gain insights into your audience's behaviour with comprehensive analytics on link clicks, page views, and more. Utilize geolocation data for deeper understanding.</p>
       </div>
       <div class="flex flex-col items-center p-6 bg-gray-800 rounded-lg shadow-md">
         <svg class="w-12 h-12 mb-4 text-lime-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v8m0 0L8 12m4 4l4-4"></path>
         </svg>
-        <h3 class="text-xl font-semibold mb-2 text-white">Social Integration</h3>
-        <p class="text-gray-400 text-center">Connect all your social media profiles seamlessly.</p>
+        <h3 class="text-xl font-semibold mb-2 text-white">Social Media Integration</h3>
+        <p class="text-gray-400 text-center">Easily connect all your social media profiles and share your content seamlessly across platforms.</p>
+      </div>
+      <div class="flex flex-col items-center p-6 bg-gray-800 rounded-lg shadow-md">
+        <svg class="w-12 h-12 mb-4 text-lime-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M7 5H3m16-2v4m2-2h-4M12 3v4M5 21v-4M3 19h4m16 2v-4m2 2h-4M12 21v-4"></path>
+        </svg>
+        <h3 class="text-xl font-semibold mb-2 text-white">Open Graph Image Generation</h3>
+        <p class="text-gray-400 text-center">Automatically generate eye-catching Open Graph images for social media sharing, enhancing your online visibility.</p>
+      </div>
+      <div class="flex flex-col items-center p-6 bg-gray-800 rounded-lg shadow-md">
+        <svg class="w-12 h-12 mb-4 text-lime-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16"></path>
+        </svg>
+        <h3 class="text-xl font-semibold mb-2 text-white">Responsive Design</h3>
+        <p class="text-gray-400 text-center">Enjoy a seamless experience across all devices with a fully responsive design, ensuring your profile looks great everywhere.</p>
+      </div>
+      <div class="flex flex-col items-center p-6 bg-gray-800 rounded-lg shadow-md">
+        <svg class="w-12 h-12 mb-4 text-lime-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 6L9 17l-5-5"></path>
+        </svg>
+        <h3 class="text-xl font-semibold mb-2 text-white">Automated Backups</h3>
+        <p class="text-gray-400 text-center">Ensure data integrity with automated daily backups to DigitalOcean Spaces, making data recovery simple and hassle-free.</p>
       </div>
     </div>
   </section>
 
-  <!-- NEW: GitHub Call to Action Section -->
+  <!-- GitHub Call to Action Section -->
   <section class="py-16 w-full bg-gray-800">
     <div class="text-center">
       <h2 class="text-3xl font-bold mb-4 text-white">Support Linkarooie</h2>
@@ -67,7 +93,7 @@
     </div>
   </section>
 
-  <!-- Existing Call to Action Section -->
+  <!-- Call to Action Section -->
   <section class="py-16 text-white w-full">
     <div class="text-center">
       <h2 class="text-3xl font-bold mb-4">Get Started with Linkarooie</h2>
@@ -77,7 +103,7 @@
       <button class="inline-flex items-center bg-gray-400 text-gray-600 cursor-not-allowed font-bold py-2 px-4 rounded" disabled>
         Sign Up (coming soon)
         <svg class="ml-2 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-          <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a 1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
+          <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
         </svg>
       </button>
     </div>
@@ -87,7 +113,7 @@
   <section class="py-16 w-full bg-gray-900">
     <div class="text-center mb-12">
       <h2 class="text-3xl font-bold text-white">What Our Users Say</h2>
-      <p class="text-gray-400">See how Linkarooie has helped others.</p>
+      <p class="text-gray-400">See how Linkarooie has helped others streamline their online presence.</p>
     </div>
     <div class="grid grid-cols-1 md:grid-cols-2 gap-8 px-4 md:px-0">
       <div class="flex flex-col items-center p-6 bg-gray-800 rounded-lg shadow-md">
@@ -98,7 +124,7 @@
             <p class="text-gray-400">CEO, Example Corp</p>
           </div>
         </div>
-        <p class="text-gray-400 text-center">Linkarooie has streamlined our online presence. It's simple and effective!</p>
+        <p class="text-gray-400 text-center">Linkarooie has transformed how we manage our digital footprint. It's a powerful tool for any modern business.</p>
       </div>
       <div class="flex flex-col items-center p-6 bg-gray-800 rounded-lg shadow-md">
         <div class="flex items-center mb-4">
@@ -108,8 +134,8 @@
             <p class="text-gray-400">Influencer</p>
           </div>
         </div>
-        <p class="text-gray-400 text-center">I love how easy it is to manage all my links in one place.</p>
+        <p class="text-gray-400 text-center">Managing my links has never been easier. Linkarooie is a game changer for content creators like me.</p>
       </div>
     </div>
   </section>
-</div>
\ No newline at end of file
+</div>