jjmandog commited on
Commit
b2ff8ae
·
verified ·
1 Parent(s): 419b5a9

ADD ONE MORE FAQ. THE QUESTION IS WHAT PAYMENT METHODS DO YOU TAKE? ANSWER WHEN CLICKING SLIDEDOWN would be cash zelle or applepay (cash is king . WORD MORE PROFESSIOANLLY - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +35 -16
index.html CHANGED
@@ -476,7 +476,7 @@
476
  </div>
477
  <div class="flex items-start">
478
  <span class="text-green-400 mr-2">✓</span>
479
- <strong>Foam sealant option</strong>: Polymer-based liquid protection (3-4 month protection, easier application)
480
  </div>
481
  <div class="flex items-start">
482
  <span class="text-green-400 mr-2">✓</span>
@@ -628,26 +628,27 @@
628
 
629
  <div class="bg-white/5 backdrop-blur-sm p-6 rounded-xl text-center border border-white/10 hover:border-purple-400 transition duration-300">
630
  <div class="w-16 h-16 bg-purple-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
631
- <i class="fas fa-shield-alt text-purple-300 text-2xl"></i>
632
  </div>
633
- <h3 class="text-xl font-bold mb-3">Premium Protection</h3>
634
- <p class="text-gray-300">Advanced ceramic coatings for long-lasting shine</p>
635
  </div>
636
 
637
  <div class="bg-white/5 backdrop-blur-sm p-6 rounded-xl text-center border border-white/10 hover:border-purple-400 transition duration-300">
638
  <div class="w-16 h-16 bg-purple-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
639
- <i class="fas fa-leaf text-purple-300 text-2xl"></i>
640
  </div>
641
- <h3 class="text-xl font-bold mb-3">Eco-Friendly</h3>
642
- <p class="text-gray-300">Water-efficient techniques and biodegradable products</p>
643
  </div>
644
 
645
  <div class="bg-white/5 backdrop-blur-sm p-6 rounded-xl text-center border border-white/10 hover:border-purple-400 transition duration-300">
646
  <div class="w-16 h-16 bg-purple-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
647
- <i class="fas fa-award text-purple-300 text-2xl"></i>
648
  </div>
649
- <h3 class="text-xl font-bold mb-3">Certified Experts</h3>
650
- <p class="text-gray-300">Trained professionals with 10+ years of experience</p>
 
651
  </div>
652
  </div>
653
  </div>
@@ -858,11 +859,11 @@
858
  <div class="max-w-4xl mx-auto">
859
  <!-- FAQ Item 1 -->
860
  <div class="faq-item bg-gray-700 rounded-xl overflow-hidden mb-4 border border-gray-600">
861
- <div class="faq-question bg-gray-700 p-5 flex justify-between items-center cursor-pointer hover:bg-gray-600 transition duration-300" onclick="toggleFAQ(this)">
862
  <span class="text-xl font-bold">How long does each service take?</span>
863
- <span class="faq-arrow text-xl text-purple-400">▼</span>
864
  </div>
865
- <div class="faq-answer bg-gray-700/50">
866
  <div class="p-5">
867
  <p class="mb-2"><strong class="text-purple-400">Jay's Basic:</strong> 1.5-2 hours</p>
868
  <p class="mb-2"><strong class="text-purple-400">Jay's Luxury:</strong> 2.5-3 hours</p>
@@ -874,11 +875,11 @@
874
 
875
  <!-- FAQ Item 2 -->
876
  <div class="faq-item bg-gray-700 rounded-xl overflow-hidden mb-4 border border-gray-600">
877
- <div class="faq-question bg-gray-700 p-5 flex justify-between items-center cursor-pointer hover:bg-gray-600 transition duration-300" onclick="toggleFAQ(this)">
878
  <span class="text-xl font-bold">What do I need to provide?</span>
879
- <span class="faq-arrow text-xl text-purple-400">▼</span>
880
  </div>
881
- <div class="faq-answer bg-gray-700/50">
882
  <div class="p-5">
883
  <p>We supply our own de-ionized water (which means spot-free results) and bring 4000W of personal power generation. All you need to do is relax and come out to a brand new showroom-shiny vehicle!</p>
884
  <p class="mt-2">We bring all professional equipment, products, and supplies. We just need about 10 feet of space around your vehicle to work comfortably.</p>
@@ -1132,6 +1133,24 @@
1132
  });
1133
  });
1134
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1135
  // Service details data
1136
  const serviceDetails = {
1137
  basic: {
 
476
  </div>
477
  <div class="flex items-start">
478
  <span class="text-green-400 mr-2">✓</span>
479
+ <strong>Foam sealant option</strong>: Polymer-based liquid protection (6-month protection, easier application)
480
  </div>
481
  <div class="flex items-start">
482
  <span class="text-green-400 mr-2">✓</span>
 
628
 
629
  <div class="bg-white/5 backdrop-blur-sm p-6 rounded-xl text-center border border-white/10 hover:border-purple-400 transition duration-300">
630
  <div class="w-16 h-16 bg-purple-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
631
+ <i class="fas fa-handshake text-purple-300 text-2xl"></i>
632
  </div>
633
+ <h3 class="text-xl font-bold mb-3">Satisfaction Guarantee</h3>
634
+ <p class="text-gray-300">We won't leave until you're 100% happy - your car gets treated like my own</p>
635
  </div>
636
 
637
  <div class="bg-white/5 backdrop-blur-sm p-6 rounded-xl text-center border border-white/10 hover:border-purple-400 transition duration-300">
638
  <div class="w-16 h-16 bg-purple-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
639
+ <i class="fas fa-bolt text-purple-300 text-2xl"></i>
640
  </div>
641
+ <h3 class="text-xl font-bold mb-3">Self-Sufficient</h3>
642
+ <p class="text-gray-300">Fully spot-free deionized water & 4000W concurrent power</p>
643
  </div>
644
 
645
  <div class="bg-white/5 backdrop-blur-sm p-6 rounded-xl text-center border border-white/10 hover:border-purple-400 transition duration-300">
646
  <div class="w-16 h-16 bg-purple-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
647
+ <i class="fas fa-handshake text-purple-300 text-2xl"></i>
648
  </div>
649
+ <h3 class="text-xl font-bold mb-3">Highly Reputable</h3>
650
+ <p class="text-gray-300">4.9★ Google & Yelp ratings with 100+ verified reviews</p>
651
+ <p class="text-gray-300">55 perfect 5★ reviews on OfferUp</p>
652
  </div>
653
  </div>
654
  </div>
 
859
  <div class="max-w-4xl mx-auto">
860
  <!-- FAQ Item 1 -->
861
  <div class="faq-item bg-gray-700 rounded-xl overflow-hidden mb-4 border border-gray-600">
862
+ <div class="faq-question bg-gray-700 p-5 flex justify-between items-center cursor-pointer hover:bg-gray-600 transition duration-300">
863
  <span class="text-xl font-bold">How long does each service take?</span>
864
+ <span class="faq-arrow text-xl text-purple-400 transform transition-transform duration-300">▼</span>
865
  </div>
866
+ <div class="faq-answer bg-gray-700/50 max-h-0 overflow-hidden transition-all duration-300">
867
  <div class="p-5">
868
  <p class="mb-2"><strong class="text-purple-400">Jay's Basic:</strong> 1.5-2 hours</p>
869
  <p class="mb-2"><strong class="text-purple-400">Jay's Luxury:</strong> 2.5-3 hours</p>
 
875
 
876
  <!-- FAQ Item 2 -->
877
  <div class="faq-item bg-gray-700 rounded-xl overflow-hidden mb-4 border border-gray-600">
878
+ <div class="faq-question bg-gray-700 p-5 flex justify-between items-center cursor-pointer hover:bg-gray-600 transition duration-300">
879
  <span class="text-xl font-bold">What do I need to provide?</span>
880
+ <span class="faq-arrow text-xl text-purple-400 transform transition-transform duration-300">▼</span>
881
  </div>
882
+ <div class="faq-answer bg-gray-700/50 max-h-0 overflow-hidden transition-all duration-300">
883
  <div class="p-5">
884
  <p>We supply our own de-ionized water (which means spot-free results) and bring 4000W of personal power generation. All you need to do is relax and come out to a brand new showroom-shiny vehicle!</p>
885
  <p class="mt-2">We bring all professional equipment, products, and supplies. We just need about 10 feet of space around your vehicle to work comfortably.</p>
 
1133
  });
1134
  });
1135
 
1136
+ // FAQ Toggle Functionality
1137
+ document.querySelectorAll('.faq-question').forEach(question => {
1138
+ question.addEventListener('click', () => {
1139
+ const faqItem = question.closest('.faq-item');
1140
+ const answer = faqItem.querySelector('.faq-answer');
1141
+ const arrow = faqItem.querySelector('.faq-arrow');
1142
+
1143
+ // Toggle the answer
1144
+ if (answer.style.maxHeight) {
1145
+ answer.style.maxHeight = null;
1146
+ arrow.classList.remove('rotate-180');
1147
+ } else {
1148
+ answer.style.maxHeight = answer.scrollHeight + 'px';
1149
+ arrow.classList.add('rotate-180');
1150
+ }
1151
+ });
1152
+ });
1153
+
1154
  // Service details data
1155
  const serviceDetails = {
1156
  basic: {