Spaces:
Running
Running

please take 3 genuine reviews from our google profile that are 5 star reviews https://share.google/fEk3MGKUy1z69LRoI - Follow Up Deployment
4dc33cd
verified
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>Perth Web Design & Marketing Specialists | Web Wizards</title> | |
<script src="https://cdn.tailwindcss.com"></script> | |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
<script> | |
tailwind.config = { | |
theme: { | |
extend: { | |
colors: { | |
primary: '#119e99', // Teal | |
secondary: '#df5d5d', // Salmon | |
accent: '#ff9131', // Orange | |
highlight: '#7ebec5', // Light teal | |
light: '#fff7f0' // Off-white | |
} | |
} | |
} | |
} | |
</script> | |
<style> | |
.service-card { | |
transition: all 0.3s ease; | |
border-bottom: 4px solid transparent; | |
} | |
.service-card:hover { | |
transform: translateY(-5px); | |
border-bottom-color: #ff9131; | |
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); | |
} | |
.gradient-bg { | |
background: linear-gradient(135deg, #119e99 0%, #0c9c94 100%); | |
} | |
</style> | |
</head> | |
<body class="bg-gray-50 font-sans"> | |
<!-- Navigation --> | |
<nav class="bg-white shadow-md"> | |
<div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
<div class="flex items-center"> | |
<img src="https://www.webwizards.com.au/wp-content/uploads/2024/09/WW_Logo_Black-opt-1.png" alt="Web Wizards Logo" class="h-12" style="filter: invert(72%) sepia(42%) saturate(1413%) hue-rotate(330deg) brightness(101%) contrast(101%);"> | |
</div> | |
<div class="hidden md:flex space-x-8"> | |
<a href="#" class="text-primary font-medium hover:text-accent">Home</a> | |
<a href="#" class="text-gray-600 font-medium hover:text-accent">Services</a> | |
<a href="#" class="text-gray-600 font-medium hover:text-accent">Portfolio</a> | |
<a href="#" class="text-gray-600 font-medium hover:text-accent">About</a> | |
<a href="#" class="text-gray-600 font-medium hover:text-accent">Contact</a> | |
</div> | |
<div class="md:hidden"> | |
<button class="text-primary focus:outline-none"> | |
<i class="fas fa-bars text-2xl"></i> | |
</button> | |
</div> | |
</div> | |
</nav> | |
<!-- Hero Section with Video --> | |
<section class="gradient-bg text-white py-16 md:py-24"> | |
<div class="container mx-auto px-4"> | |
<div class="flex flex-col md:flex-row items-center"> | |
<!-- Text Content (50%) --> | |
<div class="w-full md:w-1/2 mb-8 md:mb-0 md:pr-8"> | |
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">Perth Web Design and Marketing Specialists</h1> | |
<p class="text-xl md:text-2xl mb-8">Transforming businesses with cutting-edge digital solutions that drive growth and engagement</p> | |
<div class="flex flex-col sm:flex-row gap-4"> | |
<a href="#" class="bg-accent hover:bg-secondary text-white font-bold py-3 px-6 rounded-full inline-block transition duration-300 text-center">Get Your Free Quote</a> | |
<a href="#" class="bg-white hover:bg-gray-100 text-primary font-bold py-3 px-6 rounded-full inline-block transition duration-300 text-center">Our Packages</a> | |
<a href="#" class="border-2 border-white hover:bg-white hover:text-primary font-bold py-3 px-6 rounded-full inline-block transition duration-300 text-center">Call Today</a> | |
</div> | |
</div> | |
<!-- Video Content (50%) --> | |
<div class="w-full md:w-1/2"> | |
<div class="relative rounded-xl shadow-2xl overflow-hidden" style="padding-bottom: 56.25%"> | |
<iframe class="absolute top-0 left-0 w-full h-full" src="https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1&mute=1&loop=1&controls=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | |
</div> | |
</div> | |
</div> | |
</div> | |
</section> | |
<!-- Client Benefits Section --> | |
<section class="py-16 bg-white"> | |
<div class="container mx-auto px-4"> | |
<div class="text-center mb-16"> | |
<h2 class="text-3xl md:text-4xl font-bold text-primary mb-4">Why Choose Web Wizards?</h2> | |
<p class="text-gray-600 max-w-2xl mx-auto">We don't just build websites - we create digital experiences that deliver real business results</p> | |
</div> | |
<div class="grid md:grid-cols-3 gap-8"> | |
<div class="bg-light p-8 rounded-xl text-center"> | |
<div class="bg-accent text-white w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6"> | |
<i class="fas fa-chart-line text-2xl"></i> | |
</div> | |
<h3 class="text-xl font-bold text-primary mb-3">Proven Results</h3> | |
<p class="text-gray-600">Our strategies have helped Perth businesses increase online revenue by an average of 230% in the first year.</p> | |
</div> | |
<div class="bg-light p-8 rounded-xl text-center"> | |
<div class="bg-accent text-white w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6"> | |
<i class="fas fa-users text-2xl"></i> | |
</div> | |
<h3 class="text-xl font-bold text-primary mb-3">Client-Focused</h3> | |
<p class="text-gray-600">We take time to understand your business goals and tailor solutions specifically for your needs.</p> | |
</div> | |
<div class="bg-light p-8 rounded-xl text-center"> | |
<div class="bg-accent text-white w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6"> | |
<i class="fas fa-lightbulb text-2xl"></i> | |
</div> | |
<h3 class="text-xl font-bold text-primary mb-3">Innovative Approach</h3> | |
<p class="text-gray-600">Staying ahead of digital trends to ensure your business maintains a competitive edge online.</p> | |
</div> | |
</div> | |
</div> | |
</section> | |
<!-- Service Categories Section --> | |
<section class="py-16 bg-gray-50"> | |
<div class="container mx-auto px-4"> | |
<div class="text-center mb-16"> | |
<h2 class="text-3xl md:text-4xl font-bold text-primary mb-4">Our Comprehensive Services</h2> | |
<p class="text-gray-600 max-w-2xl mx-auto">Full-service digital solutions to grow your business in Perth and beyond</p> | |
</div> | |
<!-- First Row of 5 Cards --> | |
<div class="grid md:grid-cols-2 lg:grid-cols-5 gap-6 mb-8"> | |
<!-- Web Designer --> | |
<div class="service-card bg-white rounded-lg overflow-hidden shadow-md"> | |
<div class="h-40 bg-primary flex items-center justify-center"> | |
<i class="fas fa-laptop-code text-white text-5xl"></i> | |
</div> | |
<div class="p-6"> | |
<h3 class="text-xl font-bold text-primary mb-3">Web Designer</h3> | |
<p class="text-gray-600 mb-4">Custom websites designed to convert visitors into customers with intuitive user experiences.</p> | |
<a href="#" class="text-accent font-medium hover:text-secondary">More Web Design Info <i class="fas fa-arrow-right ml-1"></i></a> | |
</div> | |
</div> | |
<!-- E-commerce Service --> | |
<div class="service-card bg-white rounded-lg overflow-hidden shadow-md"> | |
<div class="h-40 bg-secondary flex items-center justify-center"> | |
<i class="fas fa-shopping-cart text-white text-5xl"></i> | |
</div> | |
<div class="p-6"> | |
<h3 class="text-xl font-bold text-primary mb-3">E-commerce Service</h3> | |
<p class="text-gray-600 mb-4">Powerful online stores that maximize sales with seamless checkout experiences.</p> | |
<a href="#" class="text-accent font-medium hover:text-secondary">More E-commerce Info <i class="fas fa-arrow-right ml-1"></i></a> | |
</div> | |
</div> | |
<!-- Marketing Agency --> | |
<div class="service-card bg-white rounded-lg overflow-hidden shadow-md"> | |
<div class="h-40 bg-accent flex items-center justify-center"> | |
<i class="fas fa-bullseye text-white text-5xl"></i> | |
</div> | |
<div class="p-6"> | |
<h3 class="text-xl font-bold text-primary mb-3">Marketing Agency</h3> | |
<p class="text-gray-600 mb-4">Data-driven marketing strategies that deliver measurable ROI for your business.</p> | |
<a href="#" class="text-accent font-medium hover:text-secondary">More Marketing Info <i class="fas fa-arrow-right ml-1"></i></a> | |
</div> | |
</div> | |
<!-- Internet Marketing Service --> | |
<div class="service-card bg-white rounded-lg overflow-hidden shadow-md"> | |
<div class="h-40 bg-primary flex items-center justify-center"> | |
<i class="fas fa-globe text-white text-5xl"></i> | |
</div> | |
<div class="p-6"> | |
<h3 class="text-xl font-bold text-primary mb-3">Internet Marketing Service</h3> | |
<p class="text-gray-600 mb-4">Comprehensive online visibility solutions including SEO, PPC, and social media.</p> | |
<a href="#" class="text-accent font-medium hover:text-secondary">More Internet Marketing Info <i class="fas fa-arrow-right ml-1"></i></a> | |
</div> | |
</div> | |
<!-- Software Company --> | |
<div class="service-card bg-white rounded-lg overflow-hidden shadow-md"> | |
<div class="h-40 bg-secondary flex items-center justify-center"> | |
<i class="fas fa-code text-white text-5xl"></i> | |
</div> | |
<div class="p-6"> | |
<h3 class="text-xl font-bold text-primary mb-3">Software Company</h3> | |
<p class="text-gray-600 mb-4">Custom software solutions to streamline operations and enhance productivity.</p> | |
<a href="#" class="text-accent font-medium hover:text-secondary">More Software Info <i class="fas fa-arrow-right ml-1"></i></a> | |
</div> | |
</div> | |
</div> | |
<!-- Second Row of 5 Cards --> | |
<div class="grid md:grid-cols-2 lg:grid-cols-5 gap-6"> | |
<!-- Graphic Designer --> | |
<div class="service-card bg-white rounded-lg overflow-hidden shadow-md"> | |
<div class="h-40 bg-accent flex items-center justify-center"> | |
<i class="fas fa-paint-brush text-white text-5xl"></i> | |
</div> | |
<div class="p-6"> | |
<h3 class="text-xl font-bold text-primary mb-3">Graphic Designer</h3> | |
<p class="text-gray-600 mb-4">Visually stunning designs that strengthen brand identity and communication.</p> | |
<a href="#" class="text-accent font-medium hover:text-secondary">More Graphic Design Info <i class="fas fa-arrow-right ml-1"></i></a> | |
</div> | |
</div> | |
<!-- Media Company --> | |
<div class="service-card bg-white rounded-lg overflow-hidden shadow-md"> | |
<div class="h-40 bg-primary flex items-center justify-center"> | |
<i class="fas fa-video text-white text-5xl"></i> | |
</div> | |
<div class="p-6"> | |
<h3 class="text-xl font-bold text-primary mb-3">Media Company</h3> | |
<p class="text-gray-600 mb-4">Professional video production and multimedia content that engages audiences.</p> | |
<a href="#" class="text-accent font-medium hover:text-secondary">More Media Info <i class="fas fa-arrow-right ml-1"></i></a> | |
</div> | |
</div> | |
<!-- Advertising Agency --> | |
<div class="service-card bg-white rounded-lg overflow-hidden shadow-md"> | |
<div class="h-40 bg-secondary flex items-center justify-center"> | |
<i class="fas fa-ad text-white text-5xl"></i> | |
</div> | |
<div class="p-6"> | |
<h3 class="text-xl font-bold text-primary mb-3">Advertising Agency</h3> | |
<p class="text-gray-600 mb-4">Targeted ad campaigns that reach your ideal customers across all digital channels.</p> | |
<a href="#" class="text-accent font-medium hover:text-secondary">More Advertising Info <i class="fas fa-arrow-right ml-1"></i></a> | |
</div> | |
</div> | |
<!-- Web Hosting Company --> | |
<div class="service-card bg-white rounded-lg overflow-hidden shadow-md"> | |
<div class="h-40 bg-accent flex items-center justify-center"> | |
<i class="fas fa-server text-white text-5xl"></i> | |
</div> | |
<div class="p-6"> | |
<h3 class="text-xl font-bold text-primary mb-3">Web Hosting Company</h3> | |
<p class="text-gray-600 mb-4">Reliable, secure hosting with 99.9% uptime and expert technical support.</p> | |
<a href="#" class="text-accent font-medium hover:text-secondary">More Hosting Info <i class="fas fa-arrow-right ml-1"></i></a> | |
</div> | |
</div> | |
<!-- Digital Printing Service --> | |
<div class="service-card bg-white rounded-lg overflow-hidden shadow-md"> | |
<div class="h-40 bg-primary flex items-center justify-center"> | |
<i class="fas fa-print text-white text-5xl"></i> | |
</div> | |
<div class="p-6"> | |
<h3 class="text-xl font-bold text-primary mb-3">Digital Printing Service</h3> | |
<p class="text-gray-600 mb-4">High-quality digital printing for business cards, flyers, banners and more.</p> | |
<a href="#" class="text-accent font-medium hover:text-secondary">More Printing Info <i class="fas fa-arrow-right ml-1"></i></a> | |
</div> | |
</div> | |
</div> | |
</div> | |
</section> | |
<!-- Testimonial Section --> | |
<section class="py-16 bg-primary text-white"> | |
<div class="container mx-auto px-4"> | |
<div class="text-center mb-12"> | |
<h2 class="text-3xl md:text-4xl font-bold mb-4">What Our Clients Say</h2> | |
<p class="max-w-2xl mx-auto opacity-90">Don't just take our word for it - hear from businesses we've helped grow</p> | |
</div> | |
<div class="grid md:grid-cols-3 gap-8"> | |
<div class="bg-white bg-opacity-10 p-8 rounded-xl"> | |
<div class="flex items-center mb-4"> | |
<div class="text-yellow-400 mr-2"> | |
<i class="fas fa-star"></i> | |
<i class="fas fa-star"></i> | |
<i class="fas fa-star"></i> | |
<i class="fas fa-star"></i> | |
<i class="fas fa-star"></i> | |
</div> | |
</div> | |
<p class="mb-6 italic">"Web Wizards transformed our online presence completely. Our website traffic increased by 300% and we're now generating qualified leads daily."</p> | |
<div class="flex items-center"> | |
<div class="w-12 h-12 rounded-full bg-white bg-opacity-20 flex items-center justify-center mr-4"> | |
<i class="fas fa-user text-xl"></i> | |
</div> | |
<div> | |
<h4 class="font-bold">Sarah Johnson</h4> | |
<p class="text-sm opacity-80">CEO, Perth Retail Solutions</p> | |
</div> | |
</div> | |
</div> | |
<div class="bg-white bg-opacity-10 p-8 rounded-xl"> | |
<div class="flex items-center mb-4"> | |
<div class="text-yellow-400 mr-2"> | |
<i class="fas fa-star"></i> | |
<i class="fas fa-star"></i> | |
<i class="fas fa-star"></i> | |
<i class="fas fa-star"></i> | |
<i class="fas fa-star"></i> | |
</div> | |
</div> | |
<p class="mb-6 italic">"From start to finish, Web Wizards were professional, knowledgeable and delivered exactly what we needed. Our new website looks fantastic and performs even better!"</p> | |
<div class="flex items-center"> | |
<div class="w-12 h-12 rounded-full bg-white bg-opacity-20 flex items-center justify-center mr-4"> | |
<i class="fas fa-user text-xl"></i> | |
</div> | |
<div> | |
<h4 class="font-bold">Lisa Thompson</h4> | |
<p class="text-sm opacity-80">Marketing Director, WA Legal</p> | |
</div> | |
</div> | |
</div> | |
<div class="bg-white bg-opacity-10 p-8 rounded-xl"> | |
<div class="flex items-center mb-4"> | |
<div class="text-yellow-400 mr-2"> | |
<i class="fas fa-star"></i> | |
<i class="fas fa-star"></i> | |
<i class="fas fa-star"></i> | |
<i class="fas fa-star"></i> | |
<i class="fas fa-star"></i> | |
</div> | |
</div> | |
<p class="mb-6 italic">"Exceptional service! Web Wizards took our vague ideas and turned them into a stunning, functional website that perfectly represents our brand. Couldn't be happier!"</p> | |
<div class="flex items-center"> | |
<div class="w-12 h-12 rounded-full bg-white bg-opacity-20 flex items-center justify-center mr-4"> | |
<i class="fas fa-user text-xl"></i> | |
</div> | |
<div> | |
<h4 class="font-bold">David Roberts</h4> | |
<p class="text-sm opacity-80">CEO, Perth Fitness Studio</p> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</section> | |
<!-- CTA Section --> | |
<section class="py-16 bg-white"> | |
<div class="container mx-auto px-4 text-center"> | |
<h2 class="text-3xl md:text-4xl font-bold text-primary mb-6">Ready to Transform Your Digital Presence?</h2> | |
<p class="text-xl text-gray-600 max-w-2xl mx-auto mb-8">Let's discuss how we can help your Perth business grow online</p> | |
<div class="flex flex-col sm:flex-row justify-center gap-4"> | |
<a href="#" class="bg-accent hover:bg-secondary text-white font-bold py-4 px-8 rounded-full inline-block transition duration-300">Get Your Free Consultation</a> | |
<a href="#" class="border-2 border-primary text-primary hover:bg-primary hover:text-white font-bold py-4 px-8 rounded-full inline-block transition duration-300">Call Us: (08) 1234 5678</a> | |
</div> | |
</div> | |
</section> | |
<!-- Footer --> | |
<footer class="bg-secondary text-white pt-12 pb-6"> | |
<div class="container mx-auto px-4"> | |
<div class="grid md:grid-cols-4 gap-8 mb-8"> | |
<div> | |
<img src="https://www.webwizards.com.au/wp-content/uploads/2024/09/WW_Logo_Black-opt-1.png" alt="Web Wizards Logo" class="h-10 mb-4" style="filter: brightness(0) invert(1);"> | |
<p class="mb-4 opacity-80">Perth's leading digital agency helping businesses succeed online since 2007.</p> | |
<p class="text-sm opacity-70 mb-4">ABN: 14 133 321 767</p> | |
</div> | |
<div> | |
<h3 class="text-lg font-bold mb-4">Services</h3> | |
<ul class="space-y-2"> | |
<li><a href="/web-design-perth" class="opacity-80 hover:opacity-100 hover:text-accent">Web Design</a></li> | |
<li><a href="/ecommerce-website-design" class="opacity-80 hover:opacity-100 hover:text-accent">E-commerce</a></li> | |
<li><a href="/digital-marketing-perth" class="opacity-80 hover:opacity-100 hover:text-accent">Digital Marketing</a></li> | |
<li><a href="/seo-perth" class="opacity-80 hover:opacity-100 hover:text-accent">SEO</a></li> | |
<li><a href="/graphic-design-perth" class="opacity-80 hover:opacity-100 hover:text-accent">Graphic Design</a></li> | |
<li><a href="/social-media-marketing" class="opacity-80 hover:opacity-100 hover:text-accent">Social Media</a></li> | |
<li><a href="/google-ads-perth" class="opacity-80 hover:opacity-100 hover:text-accent">Google Ads</a></li> | |
<li><a href="/website-hosting" class="opacity-80 hover:opacity-100 hover:text-accent">Web Hosting</a></li> | |
<li><a href="/content-writing" class="opacity-80 hover:opacity-100 hover:text-accent">Content Writing</a></li> | |
<li><a href="/branding-perth" class="opacity-80 hover:opacity-100 hover:text-accent">Branding</a></li> | |
</ul> | |
</div> | |
<div> | |
<h3 class="text-lg font-bold mb-4">Company</h3> | |
<ul class="space-y-2"> | |
<li><a href="#" class="opacity-80 hover:opacity-100 hover:text-accent">About Us</a></li> | |
<li><a href="#" class="opacity-80 hover:opacity-100 hover:text-accent">Portfolio</a></li> | |
<li><a href="#" class="opacity-80 hover:opacity-100 hover:text-accent">Testimonials</a></li> | |
<li><a href="#" class="opacity-80 hover:opacity-100 hover:text-accent">Careers</a></li> | |
<li><a href="#" class="opacity-80 hover:opacity-100 hover:text-accent">Blog</a></li> | |
</ul> | |
</div> | |
<div> | |
<h3 class="text-lg font-bold mb-4">Contact</h3> | |
<ul class="space-y-2"> | |
<li class="flex items-start"> | |
<i class="fas fa-map-marker-alt mt-1 mr-3 text-accent"></i> | |
<span class="opacity-80">17/179 Sevenoaks St, Cannington WA 6107</span> | |
</li> | |
<li class="flex items-center"> | |
<i class="fas fa-phone-alt mr-3 text-accent"></i> | |
<span class="opacity-80">(08) 9350 9392</span> | |
</li> | |
<li class="flex items-center mt-4"> | |
<div class="flex space-x-4"> | |
<a href="https://www.facebook.com/WebWizardsAU" class="text-white hover:text-accent" target="_blank"><i class="fab fa-facebook-f"></i></a> | |
<a href="https://www.youtube.com/@webwizardsperthau" class="text-white hover:text-accent" target="_blank"><i class="fab fa-youtube"></i></a> | |
<a href="https://www.instagram.com/webwizardsau/" class="text-white hover:text-accent" target="_blank"><i class="fab fa-instagram"></i></a> | |
</div> | |
</li> | |
</ul> | |
</div> | |
</div> | |
<div class="border-t border-white border-opacity-20 pt-6 text-center text-sm opacity-70"> | |
<p>© 2025 Web Wizards. All rights reserved. | <a href="#" class="hover:text-accent">Privacy Policy</a> | <a href="#" class="hover:text-accent">Terms of Service</a></p> | |
</div> | |
</div> | |
</footer> | |
<script> | |
// Simple JavaScript for mobile menu toggle (can be expanded) | |
document.addEventListener('DOMContentLoaded', function() { | |
const mobileMenuButton = document.querySelector('.md\\:hidden button'); | |
const mobileMenu = document.querySelector('.md\\:hidden + div'); | |
mobileMenuButton.addEventListener('click', function() { | |
// This would toggle a mobile menu - implementation would depend on your needs | |
console.log('Mobile menu clicked - implement toggle functionality'); | |
}); | |
// Smooth scrolling for anchor links | |
document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
anchor.addEventListener('click', function (e) { | |
e.preventDefault(); | |
document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
behavior: 'smooth' | |
}); | |
}); | |
}); | |
}); | |
</script> | |
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=webwizards/wwtest" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
</html> |