Merge pull request #57 from loftwah/dl/landing-page-fix

fix features section
loftwah · Aug 28, 2024 · 661b454 · 661b454
2 parents 4bff1b9 + bec092f
commit 661b454
Showing 1 changed file with 45 additions and 45 deletions.
diff --git a/app/views/pages/home.html.erb b/app/views/pages/home.html.erb
@@ -26,52 +26,52 @@
   </section>
 
   <!-- Features Section -->
-  <section id="features" class="py-16 w-full bg-gray-900">
-    <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 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">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 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>
+<section id="features" class="py-16 w-full bg-gray-900 flex justify-center">
+  <div class="grid grid-cols-1 md:grid-cols-3 gap-8 px-4 md:px-0 max-w-screen-lg">
+    <div class="flex flex-col items-center justify-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 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>
-  </section>
+    <div class="flex flex-col items-center justify-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">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 justify-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 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 justify-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 justify-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 justify-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>
 
   <!-- GitHub Call to Action Section -->
   <section class="py-16 w-full bg-gray-800">