From 5444fefbba2b57ecf052c84599f70dbbc9f9977f Mon Sep 17 00:00:00 2001 From: Alvin <524715@vistacollege.nl> Date: Wed, 4 Jun 2025 09:59:01 +0200 Subject: [PATCH] Refactor index.html to remove inline Tailwind configuration and link to external JS file. Enhance script.js with modal functionality for 'Get Started' and 'Learn More' buttons, including dynamic content and hover effects for cards. --- index.html | 21 +------ js/script.js | 139 ++++++++++++++++++++++++++++++++++++++++++ js/tailwind.config.js | 17 ++++++ 3 files changed, 158 insertions(+), 19 deletions(-) create mode 100644 js/tailwind.config.js diff --git a/index.html b/index.html index a3a4349..e60b5e1 100644 --- a/index.html +++ b/index.html @@ -8,27 +8,10 @@ - + + diff --git a/js/script.js b/js/script.js index 289e34f..ab8bf59 100644 --- a/js/script.js +++ b/js/script.js @@ -18,6 +18,66 @@ document.addEventListener('DOMContentLoaded', () => { }); }); + // Get Started button functionality + const getStartedBtn = document.querySelector('.btn-primary'); + if (getStartedBtn) { + getStartedBtn.addEventListener('click', () => { + // Create and show modal + const modal = document.createElement('div'); + modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 fade-in'; + modal.innerHTML = ` +
+

Get Started

+

Choose how you'd like to get started with our services:

+
+ + + +
+ +
+ `; + document.body.appendChild(modal); + + // Add click event to close modal when clicking outside + modal.addEventListener('click', (e) => { + if (e.target === modal) { + modal.remove(); + } + }); + + // Add click events to modal buttons + const modalButtons = modal.querySelectorAll('button:not(:last-child)'); + modalButtons.forEach(button => { + button.addEventListener('click', () => { + const action = button.textContent.trim(); + switch(action) { + case 'Start Free Trial': + window.location.href = '#contact'; + break; + case 'Schedule Demo': + alert('Demo scheduling feature coming soon!'); + break; + case 'Contact Sales': + window.location.href = '#contact'; + break; + } + modal.remove(); + }); + }); + }); + } + // Form submission handling const contactForm = document.querySelector('form'); if (contactForm) { @@ -70,4 +130,83 @@ document.addEventListener('DOMContentLoaded', () => { } }); } + + // Add hover effects to cards + const cards = document.querySelectorAll('.card, .bg-white.rounded-lg'); + cards.forEach(card => { + card.addEventListener('mouseenter', () => { + card.style.transform = 'translateY(-5px)'; + card.style.boxShadow = '0 10px 15px -3px rgba(0,0,0,0.1)'; + }); + card.addEventListener('mouseleave', () => { + card.style.transform = 'translateY(0)'; + card.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)'; + }); + }); + + // Learn More button functionality + const learnMoreBtn = document.querySelector('.btn-outline-secondary'); + if (learnMoreBtn) { + learnMoreBtn.addEventListener('click', () => { + // Create and show modal + const modal = document.createElement('div'); + modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 fade-in'; + modal.innerHTML = ` +
+

About Our Services

+
+
+
+ + + +
+
+

Lightning Fast Performance

+

Our platform is optimized for speed and efficiency, ensuring your business operations run smoothly without any delays.

+
+
+
+
+ + + +
+
+

Enterprise-Grade Security

+

Your data is protected with state-of-the-art encryption and security measures, ensuring complete privacy and compliance.

+
+
+
+
+ + + +
+
+

Cloud Integration

+

Seamlessly connect with your existing cloud infrastructure and scale your operations as needed.

+
+
+
+
+ + +
+
+ `; + document.body.appendChild(modal); + + // Add click event to close modal when clicking outside + modal.addEventListener('click', (e) => { + if (e.target === modal) { + modal.remove(); + } + }); + }); + } }); diff --git a/js/tailwind.config.js b/js/tailwind.config.js new file mode 100644 index 0000000..468ebaa --- /dev/null +++ b/js/tailwind.config.js @@ -0,0 +1,17 @@ +tailwind.config = { + theme: { + extend: { + animation: { + 'float': 'float 3s ease-in-out infinite', + 'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite', + 'bounce-slow': 'bounce 3s infinite', + }, + keyframes: { + float: { + '0%, 100%': { transform: 'translateY(0)' }, + '50%': { transform: 'translateY(-10px)' }, + } + } + } + } +} \ No newline at end of file