From 91f502a0c85914f13ebb082ec625b036b434bc09 Mon Sep 17 00:00:00 2001
From: Casey <casey@shilohcode.com>
Date: Fri, 17 Apr 2026 16:19:26 -0500
Subject: [PATCH] update suggestion text to change, updateded mobile styling

---
 css/styles.css |  6 ++++-
 index.html     |  1 +
 js/search.js   | 66 ++++++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 72 insertions(+), 1 deletion(-)

diff --git a/css/styles.css b/css/styles.css
index cd1e6fc..6dee539 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -42,6 +42,10 @@
 .search-bar input::placeholder {
   color: #7a8490;
   font-size: 14px;
+  transition: opacity 0.3s ease;
+}
+.search-bar input.placeholder-fade-out::placeholder {
+  opacity: 0;
 }
 .search-results {
   display: none;
@@ -756,7 +760,7 @@ nav a:not(.logo) {
     max-width: 100%;
   }
   .search-bar input::placeholder {
-    font-size: 12px;
+    font-size: 11px;
   }
   .search-results {
     border-radius: 12px;
diff --git a/index.html b/index.html
index 8d2be35..230b140 100644
--- a/index.html
+++ b/index.html
@@ -73,6 +73,7 @@
                   id="service-search-input"
                   placeholder='What do you need help with? Try "alternative to Shopify"'
                   autocomplete="off"
+                  aria-label="Search for services"
                 />
               </div>
               <div id="search-results" class="search-results"></div>
diff --git a/js/search.js b/js/search.js
index d99cc6f..052d32a 100644
--- a/js/search.js
+++ b/js/search.js
@@ -408,7 +408,73 @@ function renderResults(matches, query, container) {
   container.innerHTML = html;
 }
 
+// Cycling placeholder suggestions — drawn from full service catalog
+var placeholderSuggestions = [
+  // Alternative-to queries (the signature feature)
+  { full: 'Try "alternative to Shopify"', short: '"alternative to Shopify"' },
+  { full: 'Search for "alternative to Gmail"', short: '"replace Gmail"' },
+  { full: 'Try "switch from Google Drive"', short: '"replace Google Drive"' },
+  { full: 'Search for "alternative to AWS"', short: '"alternative to AWS"' },
+  { full: 'Try "instead of Squarespace"', short: '"instead of Squarespace"' },
+  { full: 'Try "alternative to Dropbox"', short: '"replace Dropbox"' },
+  { full: 'Search for "replace Heroku"', short: '"replace Heroku"' },
+  { full: 'Try "alternative to Microsoft 365"', short: '"replace Microsoft 365"' },
+  // Service keyword queries
+  { full: 'What do you need? Try "website hosting"', short: '"website hosting"' },
+  { full: 'Try searching "online store"', short: '"online store"' },
+  { full: 'What do you need? Try "private email"', short: '"private email"' },
+  { full: 'Try searching "cloud storage for teams"', short: '"cloud storage"' },
+  { full: 'What do you need? Try "VPS hosting"', short: '"VPS hosting"' },
+  { full: 'Try searching "migrate my data"', short: '"data migration"' },
+  { full: 'What do you need? Try "WordPress site"', short: '"WordPress site"' },
+  { full: 'Try searching "docker container"', short: '"docker container"' },
+  { full: 'What do you need? Try "business email"', short: '"business email"' },
+  { full: 'Try searching "shopping cart"', short: '"shopping cart"' },
+  { full: 'What do you need? Try "file collaboration"', short: '"file collaboration"' },
+  { full: 'Try searching "Linux server"', short: '"Linux server"' },
+];
+
+function initPlaceholderCycle() {
+  var input = document.getElementById("service-search-input");
+  if (!input) return;
+
+  // Shuffle suggestions so the order feels fresh each visit
+  for (var i = placeholderSuggestions.length - 1; i > 0; i--) {
+    var j = Math.floor(Math.random() * (i + 1));
+    var temp = placeholderSuggestions[i];
+    placeholderSuggestions[i] = placeholderSuggestions[j];
+    placeholderSuggestions[j] = temp;
+  }
+
+  var index = 0;
+  var isMobile = function () { return window.innerWidth <= 960; };
+
+  function setPlaceholder() {
+    var suggestion = placeholderSuggestions[index];
+    input.setAttribute("placeholder", isMobile() ? suggestion.short : suggestion.full);
+  }
+
+  setPlaceholder();
+
+  setInterval(function () {
+    // Don't cycle if user is typing or input is focused with text
+    if (document.activeElement === input && input.value.length > 0) return;
+
+    input.classList.add("placeholder-fade-out");
+
+    setTimeout(function () {
+      index = (index + 1) % placeholderSuggestions.length;
+      setPlaceholder();
+      input.classList.remove("placeholder-fade-out");
+    }, 300);
+  }, 3000);
+
+  // Update on resize
+  window.addEventListener("resize", setPlaceholder);
+}
+
 // Initialize when DOM is ready
 $(function () {
   initSearch();
+  initPlaceholderCycle();
 });