TechConnect SA - Find Qualified Technicians

I'll create a high-end technician finder app for South Africa with all the requested features. Here's the comprehensive implementation: TechConnect SA - Find Qualified Technicians

Find Qualified Technicians Across South Africa

Connect with certified professionals in your province for all your technical needs

Electrician

Gauteng

Plumber

Western Cape

AC Technician

KwaZulu-Natal

Available Technicians

Our Services

Electrical Services

Certified electricians for all your wiring, installations, and repairs

Plumbing

Professional plumbing solutions for homes and businesses

Auto Mechanics

Qualified mechanics for all vehicle makes and models

AC Repair

HVAC specialists for installation and maintenance

Appliance Repair

Fix for all home appliances and electronics

General Handyman

For all your home maintenance needs

Contact Us

Get in Touch

+27 12 345 6789

info@techconnectsa.co.za

123 Tech Street, Johannesburg, Gauteng

Chat with Technician

:root { --primary-color: #4a6bff; --secondary-color: #ff7e5f; --accent-color: #6c5ce7; --dark-color: #2d3436; --light-color: #f5f6fa; --success-color: #00b894; --warning-color: #fdcb6e; --danger-color: #d63031; --text-color: #2d3436; --text-light: #636e72; --white: #ffffff; --shadow: 0 4px 6px rgba(0, 0, 0, 0.1); --transition: all 0.3s ease; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Poppins', sans-serif; color: var(--text-color); background-color: var(--light-color); line-height: 1.6; } .app-container { display: flex; flex-direction: column; min-height: 100vh; } .app-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; background-color: var(--white); box-shadow: var(--shadow); position: sticky; top: 0; z-index: 1000; } .logo-container { display: flex; align-items: center; gap: 0.5rem; } .logo-icon { font-size: 2rem; color: var(--primary-color); } .nav-menu ul { display: flex; list-style: none; gap: 2rem; } .nav-menu a { text-decoration: none; color: var(--text-color); font-weight: 500; transition: var(--transition); position: relative; } .nav-menu a:hover { color: var(--primary-color); } .nav-menu a.active { color: var(--primary-color); } .nav-menu a.active::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 100%; height: 2px; background-color: var(--primary-color); } .user-actions { display: flex; gap: 1rem; } .btn { padding: 0.5rem 1rem; border-radius: 4px; font-weight: 500; cursor: pointer; transition: var(--transition); border: none; } .btn-primary { background-color: var(--primary-color); color: var(--white); } .btn-primary:hover { background-color: #3a5aee; transform: translateY(-2px); } .btn-outline { background-color: transparent; border: 1px solid var(--primary-color); color: var(--primary-color); } .btn-outline:hover { background-color: var(--primary-color); color: var(--white); } .app-main { flex: 1; padding: 2rem; } .hero-section { display: flex; flex-direction: column; gap: 2rem; padding: 4rem 0; position: relative; } .hero-content { max-width: 600px; margin: 0 auto; text-align: center; } .hero-content h2 { font-size: 2.5rem; margin-bottom: 1rem; color: var(--dark-color); } .hero-content p { font-size: 1.1rem; color: var(--text-light); margin-bottom: 2rem; } .search-container { width: 100%; } .search-box { display: flex; gap: 1rem; background-color: var(--white); border-radius: 8px; padding: 0.5rem; box-shadow: var(--shadow); } .search-box input { flex: 1; padding: 0.75rem 1rem; border: none; border-radius: 4px; font-size: 1rem; } .search-box select { padding: 0.75rem; border: none; border-radius: 4px; background-color: var(--light-color); cursor: pointer; } .search-btn { display: flex; align-items: center; gap: 0.5rem; } .hero-image { position: relative; height: 300px; margin-top: 2rem; } .floating-techs { position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; gap: 2rem; } .tech-card { background-color: var(--white); border-radius: 8px; padding: 1rem; box-shadow: var(--shadow); width: 200px; text-align: center; transition: var(--transition); } .tech-card.floating { position: absolute; animation: float 6s ease-in-out infinite; animation-delay: var(--delay); } .tech-card img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; margin-bottom: 1rem; border: 3px solid var(--primary-color); } .tech-info h4 { margin-bottom: 0.5rem; } .tech-info p { color: var(--text-light); font-size: 0.9rem; } @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0px); } } .section-title { text-align: center; margin-bottom: 2rem; font-size: 2rem; color: var(--dark-color); position: relative; } .section-title::after { content: ''; display: block; width: 80px; height: 4px; background: linear-gradient(to right, var(--primary-color), var(--secondary-color)); margin: 0.5rem auto 0; border-radius: 2px; } .technicians-section { padding: 4rem 0; } .filters { display: flex; justify-content: center; gap: 2rem; margin-bottom: 2rem; } .filter-group { display: flex; align-items: center; gap: 0.5rem; } .filter-group label { font-weight: 500; } .filter-group select { padding: 0.5rem; border-radius: 4px; border: 1px solid #ddd; background-color: var(--white); cursor: pointer; } .technicians-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem; } .tech-profile { background-color: var(--white); border-radius: 8px; overflow: hidden; box-shadow: var(--shadow); transition: var(--transition); } .tech-profile:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); } .tech-profile-header { position: relative; } .tech-profile-img { width: 100%; height: 200px; object-fit: cover; } .tech-profile-badge { position: absolute; top: 1rem; right: 1rem; background-color: var(--primary-color); color: var(--white); padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.8rem; font-weight: 500; } .tech-profile-body { padding: 1.5rem; } .tech-profile-name { font-size: 1.25rem; margin-bottom: 0.5rem; } .tech-profile-service { color: var(--text-light); margin-bottom: 1rem; font-size: 0.9rem; } .tech-profile-location { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; color: var(--text-light); font-size: 0.9rem; } .tech-profile-rating { display: flex; align-items: center; gap: 0.25rem; margin-bottom: 1rem; } .tech-profile-rating .stars { color: var(--warning-color); } .tech-profile-actions { display: flex; justify-content: space-between; margin-top: 1rem; } .services-section { padding: 4rem 0; background-color: var(--white); } .services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 2rem; } .service-card { background-color: var(--light-color); border-radius: 8px; padding: 2rem 1.5rem; text-align: center; transition: var(--transition); box-shadow: var(--shadow); } .service-card:hover { transform: translateY(-5px); background-color: var(--primary-color); color: var(--white); } .service-card:hover .service-icon { background-color: var(--white); color: var(--primary-color); } .service-icon { width: 60px; height: 60px; background-color: var(--primary-color); color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; font-size: 1.5rem; transition: var(--transition); } .service-card h3 { margin-bottom: 0.5rem; } .contact-section { padding: 4rem 0; } .contact-container { display: flex; gap: 3rem; max-width: 1000px; margin: 0 auto; } .contact-info { flex: 1; } .contact-info h3 { margin-bottom: 1.5rem; font-size: 1.5rem; } .contact-info p { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; } .contact-form { flex: 1; background-color: var(--white); padding: 2rem; border-radius: 8px; box-shadow: var(--shadow); } .form-group { margin-bottom: 1rem; } .form-group input, .form-group textarea { width: 100%; padding: 0.75rem; border: 1px solid #ddd; border-radius: 4px; font-family: inherit; } .form-group textarea { min-height: 150px; resize: vertical; } .app-footer { background-color: var(--dark-color); color: var(--white); padding: 3rem 0 0; } .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; padding: 0 2rem; max-width: 1200px; margin: 0 auto; } .footer-section { margin-bottom: 2rem; } .footer-section h4 { margin-bottom: 1rem; font-size: 1.25rem; } .footer-section ul { list-style: none; } .footer-section ul li { margin-bottom: 0.5rem; } .footer-section ul li a { color: #b2bec3; text-decoration: none; transition: var(--transition); } .footer-section ul li a:hover { color: var(--white); } .social-icons { display: flex; gap: 1rem; } .social-icons a { color: var(--white); font-size: 1.25rem; transition: var(--transition); } .social-icons a:hover { color: var(--primary-color); } .footer-bottom { text-align: center; padding: 1rem; background-color: rgba(0, 0, 0, 0.2); margin-top: 2rem; } .chat-container { position: fixed; bottom: 20px; right: 20px; width: 350px; background-color: var(--white); border-radius: 8px; box-shadow: var(--shadow); overflow: hidden; transform: translateY(100%); opacity: 0; transition: var(--transition); z-index: 1000; } .chat-container.active { transform: translateY(0); opacity: 1; } .chat-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem; background-color: var(--primary-color); color: var(--white); } .close-chat { background: none; border: none; color: var(--white); font-size: 1.25rem; cursor: pointer; } .chat-messages { height: 300px; padding: 1rem; overflow-y: auto; } .message { margin-bottom: 1rem; padding: 0.5rem 1rem; border-radius: 18px; max-width: 80%; } .message.received { background-color: #f1f1f1; align-self: flex-start; border-bottom-left-radius: 4px; } .message.sent { background-color: var(--primary-color); color: var(--white); align-self: flex-end; border-bottom-right-radius: 4px; } .chat-input { display: flex; padding: 0.5rem; border-top: 1px solid #eee; } .chat-input input { flex: 1; padding: 0.75rem; border: 1px solid #ddd; border-radius: 4px; margin-right: 0.5rem; } .chat-toggle { position: fixed; bottom: 20px; right: 20px; width: 60px; height: 60px; border-radius: 50%; background-color: var(--primary-color); color: var(--white); border: none; font-size: 1.5rem; cursor: pointer; box-shadow: var(--shadow); z-index: 999; display: flex; align-items: center; justify-content: center; transition: var(--transition); } .chat-toggle:hover { transform: scale(1.1); } @media (max-width: 768px) { .app-header { flex-direction: column; padding: 1rem; } .nav-menu ul { margin: 1rem 0; } .hero-content h2 { font-size: 2rem; } .search-box { flex-direction: column; } .contact-container { flex-direction: column; } .technicians-grid { grid-template-columns: 1fr; } .services-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .services-grid { grid-template-columns: 1fr; } .chat-container { width: calc(100% - 40px); } } document.addEventListener('DOMContentLoaded', function() { // Sample technician data const technicians = [ { id: 1, name: 'John Smith', service: 'Electrician', province: 'Gauteng', city: 'Johannesburg', rating: 4.5, image: 'https://randomuser.me/api/portraits/men/32.jpg', available: true, description: 'Certified electrician with 10 years of experience in residential and commercial installations.' }, { id: 2, name: 'Sarah Johnson', service: 'Plumber', province: 'Western Cape', city: 'Cape Town', rating: 4.8, image: 'https://randomuser.me/api/portraits/women/44.jpg', available: true, description: 'Professional plumber specializing in pipe repairs and bathroom installations.' }, { id: 3, name: 'David Williams', service: 'Mechanic', province: 'KwaZulu-Natal', city: 'Durban', rating: 4.2, image: 'https://randomuser.me/api/portraits/men/75.jpg', available: true, description: 'Automotive technician with expertise in European and Japanese vehicles.' }, { id: 4, name: 'Michael Brown', service: 'AC Technician', province: 'Gauteng', city: 'Pretoria', rating: 4.7, image: 'https://randomuser.me/api/portraits/men/68.jpg', available: false, description: 'HVAC specialist for both residential and commercial air conditioning systems.' }, { id: 5, name: 'Lisa Davis', service: 'Appliance Repair', province: 'Eastern Cape', city: 'Port Elizabeth', rating: 4.3, image: 'https://randomuser.me/api/portraits/women/63.jpg', available: true, description: 'Expert in repairing all major home appliances including refrigerators and washing machines.' }, { id: 6, name: 'James Wilson', service: 'Electrician', province: 'Free State', city: 'Bloemfontein', rating: 4.0, image: 'https://randomuser.me/api/portraits/men/86.jpg', available: true, description: 'Specializing in electrical wiring and panel upgrades for homes and small businesses.' }, { id: 7, name: 'Emma Taylor', service: 'Plumber', province: 'Mpumalanga', city: 'Nelspruit', rating: 4.6, image: 'https://randomuser.me/api/portraits/women/28.jpg', available: true, description: 'Expert in leak detection and pipe replacement with minimal disruption.' }, { id: 8, name: 'Robert Anderson', service: 'General Handyman', province: 'Limpopo', city: 'Polokwane', rating: 4.4, image: 'https://randomuser.me/api/portraits/men/92.jpg', available: false, description: 'Versatile handyman for all your home maintenance and repair needs.' } ]; // DOM elements const techniciansContainer = document.getElementById('technicians-container'); const provinceSelect = document.getElementById('province-select'); const serviceFilter = document.getElementById('service-filter'); const ratingFilter = document.getElementById('rating-filter'); const chatToggle = document.getElementById('chat-toggle'); const chatContainer = document.getElementById('chat-container'); const closeChat = document.getElementById('close-chat'); const chatMessages = document.getElementById('chat-messages'); const chatInput = document.getElementById('chat-input'); const sendMessageBtn = document.getElementById('send-message'); // Render technicians function renderTechnicians(techs) { techniciansContainer.innerHTML = ''; techs.forEach(tech => { const techCard = document.createElement('div'); techCard.className = 'tech-profile'; techCard.innerHTML = `

${tech.available ? 'Available' : 'Unavailable'}

${tech.name}

${tech.service}

${tech.city}, ${tech.province}

${getStarRating(tech.rating)} (${tech.rating})

${tech.description}

`; techniciansContainer.appendChild(techCard); }); // Add event listeners to chat buttons document.querySelectorAll('.chat-btn').forEach(btn => { btn.addEventListener('click', function() { const techId = parseInt(this.getAttribute('data-id')); const technician = technicians.find(t => t.id === techId); openChat(technician); }); }); } // Get star rating HTML function getStarRating(rating) { const fullStars = Math.floor(rating); const halfStar = rating % 1 >= 0.5 ? 1 : 0; const emptyStars = 5 - fullStars - halfStar; let stars = ''; for (let i = 0; i < fullStars; i++) { stars += ''; } if (halfStar) { stars += ''; } for (let i = 0; i < emptyStars; i++) { stars += ''; } return stars; } // Filter technicians function filterTechnicians() { const province = provinceSelect.value; const service = serviceFilter.value; const rating = parseFloat(ratingFilter.value); let filtered = technicians; if (province) { filtered = filtered.filter(tech => tech.province.toLowerCase().replace(' ', '-') === province); } if (service) { filtered = filtered.filter(tech => tech.service.toLowerCase().includes(service)); } if (rating > 0) { filtered = filtered.filter(tech => tech.rating >= rating); } renderTechnicians(filtered); } // Chat functionality function openChat(technician) { chatContainer.classList.add('active'); chatToggle.style.display = 'none'; // Clear previous messages chatMessages.innerHTML = ''; // Add welcome message addMessage({ text: `Hello! I'm ${technician.name}, how can I help you today?`, sender: 'technician', time: new Date() }); // Set up new message handler sendMessageBtn.onclick = function() { const messageText = chatInput.value.trim(); if (messageText) { addMessage({ text: messageText, sender: 'user', time: new Date() }); // Simulate response after 1-3 seconds setTimeout(() => { const responses = [ "I can definitely help with that.", "Let me check my availability for that.", "That's a common issue I can fix.", "Would you like me to provide a quote for that?", "I can schedule that for you." ]; const randomResponse = responses[Math.floor(Math.random() * responses.length)]; addMessage({ text: randomResponse, sender: 'technician', time: new Date() }); }, 1000 + Math.random() * 2000); chatInput.value = ''; } }; // Allow sending with Enter key chatInput.addEventListener('keypress', function(e) { if (e.key === 'Enter') { sendMessageBtn.click(); } }); } function addMessage(message) { const messageElement = document.createElement('div'); messageElement.className = `message ${message.sender}`; messageElement.innerHTML = `

${message.text}

${formatTime(message.time)} `; chatMessages.appendChild(messageElement); chatMessages.scrollTop = chatMessages.scrollHeight; } function formatTime(date) { return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); } // Toggle chat visibility chatToggle.addEventListener('click', function() { chatContainer.classList.add('active'); this.style.display = 'none'; }); closeChat.addEventListener('click', function() { chatContainer.classList.remove('active'); chatToggle.style.display = 'flex'; }); // Event listeners for filters provinceSelect.addEventListener('change', filterTechnicians); serviceFilter.addEventListener('change', filterTechnicians); ratingFilter.addEventListener('change', filterTechnicians); // Initial render renderTechnicians(technicians); });