wwtest / index.html
webwizards's picture
please take 3 genuine reviews from our google profile that are 5 star reviews https://share.google/fEk3MGKUy1z69LRoI - Follow Up Deployment
4dc33cd verified
<!DOCTYPE html>
<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>&copy; 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>