change: label and text

public/css/home.css

@@ -70,8 +70,8 @@ i {
     display: flex;
     flex-wrap: wrap;
     gap: 20px;
-    padding: 20px;
-    width: 90%;
+    padding: 15px;
+    width: 75%;
     max-width: 1200px;
 }
 
@@ -82,7 +82,7 @@ i {
     overflow: hidden;
     box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.15);
     background-color: white;
-    margin-bottom: 20px;
+    margin-bottom: 10px;
     transition: transform 0.3s, box-shadow 0.3s;
 }
 
@@ -136,19 +136,19 @@ i {
     padding: 20px;
 }
 
-.purple {
+.red {
     background-color: #c13e3e; /* Red color like YouTube */
 }
 
-.teal {
+.black {
     background-color: #292424; /* Black color like TikTok */
 }
 
-.red {
+.green {
     background-color: #1db954; /* Green color like Spotify */
 }
 
-.orange {
+.blue {
     background-color: #4267B2; /* Blue color like Facebook */
 }
 
@@ -174,12 +174,40 @@ i {
     background-color: #4267B2; /* Blue color like Facebook */
 }
 
+.buy-me-coffee {
+    background-color: #FFDD00; /* Yellow color like "Buy Me a Coffee" */
+    color: #000000; /* Black text color */
+    border: none;
+    padding: 10px 20px;
+    font-size: 1em;
+    border-radius: 25px;
+    margin: 10px 0;
+    cursor: pointer;
+    transition: background-color 0.3s;
+    text-decoration: none; /* Remove underline for link appearance */
+    display: inline-block; /* Ensure button appears inline with text */
+    padding-left: 30px; /* Add padding on the left for icon */
+    position: relative; /* Set position to relative for absolute positioning of the icon */
+    margin-right: 2.0em;
+}
+
+.buy-me-coffee:hover {
+    background-color: #FFCC00; /* Darker yellow on hover */
+}
+
 /* Adjustments for mobile devices */
 @media only screen and (max-width: 768px) {
+    header h1 {
+        font-size: 2.0em; /* Reduce font size for smaller screens */
+        text-align: center; /* Center align the title */
+    }
     .container {
         width: 100%; 
         padding: 10px; 
     }
+    .buy-me-coffee {
+        display: none; /* Hide "Buy Me a Coffee" on smaller screens */
+    }
 
     .card {
         width: 100%; 

views/home.ejs

@@ -2,36 +2,18 @@
 
 <div class="container">
     <% const services = [
-        { title: "Tube To Go", description: "Dahil sa Tube To Go, YouTube Mo, Madaling Kopyahin!", img: "yt.png", colorClass: "purple", textColor: "#3a3a8b" },
-        { title: "Tik To Go", description: "Dahil sa Tik To Go, TikTok Mo, Madaling Kopyahin!", img: "tiktok.png", colorClass: "teal", textColor: "#5cbdb9" },
-        { title: "Sound To Go", description: "Dahil sa Sound To Go, Sound Mo, Madaling Kopyahin!", img: "mp3.png", colorClass: "red", textColor: "#e56b6f" },
-        { title: "Book To Go", description: "Dahil sa Book To Go, Book Mo, Madaling Kopyahin!", img: "fb.png", colorClass: "orange", textColor: "#fba65b" }
+        { title: "Tube To Go", description: "Tube To Go is the ultimate solution for converting YouTube videos to MP4 format.", img: "yt.png", colorClass: "red", textColor: "#C13E3E" },
+        { title: "Tik To Go", description: "Tik To Go is the ultimate solution for converting TikTok videos to MP4 format.", img: "tk.png", colorClass: "black", textColor: "#292424" },
+        { title: "MP3 To Go", description: "MP3 To Go is the ultimate solution for converting Audio files to MP3 format.", img: "mp3.png", colorClass: "green", textColor: "#1DB954" },
+        { title: "Face To Go", description: "Face To Go is the ultimate solution for converting Facebook videos to MP4 format.", img: "fb.png", colorClass: "blue", textColor: "#4267B2" }
     ]; %>
 
-    <!-- <% services.forEach(service => { %>
-        <div class="card">
-            <div class="text-section">
-                <h1 style="color: <%= service.textColor %>;"><%= service.title.replace(" ", " ") %></h1>
-                <% if (service.title === 'Tik To Go' || service.title === 'Book To Go' || service.title === 'Sound To Go') { %>
-                    <button class="more-button <%= service.colorClass %>">On Development</button>
-                <% } else { %>
-                    <button class="more-button <%= service.colorClass %>">Convert</button>
-                <% } %>
-                <p><%= service.description %></p>
-            </div>
-            <div class="image-section">
-                <img src="/images/<%= service.img %>" alt="<%= service.title %>">
-            </div>
-        </div>
-    <% }); %> -->
-
     <% services.forEach(service => { %>
         <div class="card">
             <div class="text-section">
                 <h1 style="color: <%= service.textColor %>;"><%= service.title.replace(" ", " ") %></h1>
-                <!-- <button class="more-button <%= service.colorClass %>">Start Convert</button> -->
-                <% if (service.title === 'Tik To Go' || service.title === 'Book To Go' || service.title === 'Sound To Go') { %>
-                    <button class="more-button <%= service.colorClass %>">On Development</button>
+                <% if (service.title === 'Tik To Go' || service.title === 'Face To Go' || service.title === 'MP3 To Go') { %>
+                    <button class="more-button <%= service.colorClass %>">Soon</button>
                 <% } else { %>
                     <button class="more-button <%= service.colorClass %>">Convert</button>
                 <% } %>

views/partials/header.ejs

@@ -22,7 +22,7 @@
         <i class="fab fa-instagram"></i>
       </a>
       <i id="light-dark-toggle" class="fas fa-moon" style="font-size: 20px; color: black;"></i> </div>
-      <span class="buy-me-coffee">Buy Me a Coffee</span>
+      <a href="https://www.buymeacoffee.com/yourusername" class="buy-me-coffee">Buy Me a Coffee</a>
   </header>
 
 <body>