Hugging Face's logo

Spaces:
webwizards
/
web-design-test
Running

App Files Community
web-design-test / index.html
webwizards's picture
webwizards
https://lh3.googleusercontent.com/p/AF1QipMqRKB9fcvxOIG9fwOaSw6KK2V-CNgTlgMrmnRZ=s1360-w1360-h1020-rw use this image and resize to fit where it says our office - Follow Up Deployment
6777267 verified
raw
history blame contribute delete
79 kB
 <!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">"The e-commerce site they built for us has doubled our online sales in just 6 months. Their ongoing marketing support is worth every dollar."</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">Michael Chen</h4>
<p class="text-sm opacity-80">Director, Aussie Homewares</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 branding to web design to digital marketing, Web Wizards has been our one-stop digital partner. Highly recommend their services!"</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">Emma Wilson</h4>
<p class="text-sm opacity-80">Marketing Manager, WA Tourism Co</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/web-design-test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Design Perth | Professional Website Design Services</title>
<meta name="description" content="Web Wizards offers high-performance web design in Perth. Custom WordPress websites, responsive layouts, and expert design tailored for local businesses.">
<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>
.hero-video {
position: relative;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
height: 0;
overflow: hidden;
}
.hero-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@keyframes scroll {
0% { transform: translateX(0); }
100% { transform: translateX(calc(-250px * 8)); }
}
.animate-scroll {
animation: scroll 40s linear infinite;
display: flex;
width: calc(250px * 16);
}
.client-gallery-container {
width: 100%;
overflow: hidden;
position: relative;
}
.client-gallery-container::before,
.client-gallery-container::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 100px;
z-index: 2;
pointer-events: none;
}
.client-gallery-container::before {
left: 0;
background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}
.client-gallery-container::after {
right: 0;
background: linear-gradient(270deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}
.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 -->
<section class="relative">
<div class="gradient-bg text-white py-20">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row items-center">
<!-- Text Content -->
<div class="w-full md:w-2/3 mb-8 md:mb-0 md:pr-8">
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">Professional Web Design Services in Perth, WA</h1>
<p class="text-xl md:text-2xl mb-8">At Web Wizards, we specialise in building high-performance websites that look stunning, load fast, and convert visitors into paying customers.</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">View 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 -->
<div class="w-full md:w-1/3">
<div class="hero-video rounded-xl shadow-2xl overflow-hidden">
<iframe 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>
</div>
</section>
<!-- Client Gallery Section -->
<section class="py-12 bg-white overflow-hidden">
<div class="container mx-auto px-4">
<h2 class="text-2xl md:text-3xl font-bold text-primary mb-8 text-center">Our Recent Web Design Projects</h2>
<div class="client-gallery-container">
<div class="flex space-x-8 animate-scroll">
<!-- Duplicate images to create seamless loop -->
<img src="https://www.webwizards.com.au/wp-content/uploads/client1.jpg" alt="Perth Cafe Website" class="h-48 rounded-lg shadow-md object-cover">
<img src="https://www.webwizards.com.au/wp-content/uploads/client2.jpg" alt="Dental Practice Website" class="h-48 rounded-lg shadow-md object-cover">
<img src="https://www.webwizards.com.au/wp-content/uploads/client3.jpg" alt="Real Estate Website" class="h-48 rounded-lg shadow-md object-cover">
<img src="https://www.webwizards.com.au/wp-content/uploads/client4.jpg" alt="Law Firm Website" class="h-48 rounded-lg shadow-md object-cover">
<img src="https://www.webwizards.com.au/wp-content/uploads/client5.jpg" alt="Fitness Studio Website" class="h-48 rounded-lg shadow-md object-cover">
<img src="https://www.webwizards.com.au/wp-content/uploads/client6.jpg" alt="E-commerce Store" class="h-48 rounded-lg shadow-md object-cover">
<img src="https://www.webwizards.com.au/wp-content/uploads/client7.jpg" alt="Medical Clinic Website" class="h-48 rounded-lg shadow-md object-cover">
<img src="https://www.webwizards.com.au/wp-content/uploads/client8.jpg" alt="Construction Company Website" class="h-48 rounded-lg shadow-md object-cover">
<!-- Repeat the same images to create seamless loop -->
<img src="https://www.webwizards.com.au/wp-content/uploads/client1.jpg" alt="Perth Cafe Website" class="h-48 rounded-lg shadow-md object-cover">
<img src="https://www.webwizards.com.au/wp-content/uploads/client2.jpg" alt="Dental Practice Website" class="h-48 rounded-lg shadow-md object-cover">
<img src="https://www.webwizards.com.au/wp-content/uploads/client3.jpg" alt="Real Estate Website" class="h-48 rounded-lg shadow-md object-cover">
<img src="https://www.webwizards.com.au/wp-content/uploads/client4.jpg" alt="Law Firm Website" class="h-48 rounded-lg shadow-md object-cover">
<img src="https://www.webwizards.com.au/wp-content/uploads/client5.jpg" alt="Fitness Studio Website" class="h-48 rounded-lg shadow-md object-cover">
<img src="https://www.webwizards.com.au/wp-content/uploads/client6.jpg" alt="E-commerce Store" class="h-48 rounded-lg shadow-md object-cover">
<img src="https://www.webwizards.com.au/wp-content/uploads/client7.jpg" alt="Medical Clinic Website" class="h-48 rounded-lg shadow-md object-cover">
<img src="https://www.webwizards.com.au/wp-content/uploads/client8.jpg" alt="Construction Company Website" class="h-48 rounded-lg shadow-md object-cover">
</div>
</div>
</div>
</section>
<!-- Main Content Section -->
<section class="py-16 bg-white">
<div class="container mx-auto px-4">
<div class="max-w-4xl mx-auto">
<h2 class="text-3xl md:text-4xl font-bold text-primary mb-6">Custom Website Design Built for Your Business</h2>
<p class="text-gray-600 text-lg mb-8">We don't believe in cookie-cutter templates. Every website we create is custom-designed to reflect your brand, engage your audience, and support your business goals. From small service-based sites to full e-commerce platforms, our designs are tailored to what your Perth business really needs.</p>
<h2 class="text-3xl md:text-4xl font-bold text-primary mb-6 mt-12">Designed for Mobile, Optimised for Speed</h2>
<p class="text-gray-600 text-lg mb-8">All our websites are fully responsive — meaning they look great and function perfectly on desktops, tablets, and smartphones. We also optimise every site for speed and performance, ensuring smooth user experiences and improved search engine rankings.</p>
<h2 class="text-3xl md:text-4xl font-bold text-primary mb-6 mt-12">WordPress Experts You Can Rely On</h2>
<p class="text-gray-600 text-lg mb-8">We build our websites using WordPress — the world's most trusted and flexible CMS. This gives you full control over your content and allows for future scalability. Whether you're a sole trader or a growing company, we'll make sure your site can grow with you.</p>
<div class="bg-light p-8 rounded-xl my-12">
<h2 class="text-3xl md:text-4xl font-bold text-primary mb-6">What's Included in Our Web Design Packages</h2>
<ul class="grid md:grid-cols-2 gap-4 text-gray-600 text-lg">
<li class="flex items-start"><i class="fas fa-check text-accent mr-3 mt-1"></i> Custom design and layout tailored to your business</li>
<li class="flex items-start"><i class="fas fa-check text-accent mr-3 mt-1"></i> Mobile-friendly and responsive design</li>
<li class="flex items-start"><i class="fas fa-check text-accent mr-3 mt-1"></i> On-page SEO setup using Rank Math</li>
<li class="flex items-start"><i class="fas fa-check text-accent mr-3 mt-1"></i> User-friendly content management system (WordPress)</li>
<li class="flex items-start"><i class="fas fa-check text-accent mr-3 mt-1"></i> Contact forms, image galleries, service pages and more</li>
<li class="flex items-start"><i class="fas fa-check text-accent mr-3 mt-1"></i> Integration with Google Analytics, Search Console and Meta Pixels</li>
<li class="flex items-start"><i class="fas fa-check text-accent mr-3 mt-1"></i> Local Perth-based support and advice</li>
</ul>
</div>
<h2 class="text-3xl md:text-4xl font-bold text-primary mb-6 mt-12">Why Choose Web Wizards for Web Design in Perth?</h2>
<p class="text-gray-600 text-lg mb-8">We're not just web designers — we're digital strategists. Located in Cannington near the Perth CBD, our in-house team includes designers, developers, and SEO experts who work together to deliver results. We speak in plain English, meet deadlines, and offer ongoing support with no hidden costs.</p>
<div class="bg-primary text-white p-8 rounded-xl my-12">
<h3 class="text-2xl md:text-3xl font-bold mb-6">Let's Build Something Great Together</h3>
<p class="text-lg mb-6">Ready to create a website that works as hard as you do? Contact Web Wizards today to discuss your vision. We'll give you expert advice, a fair quote, and a solution that gets results for your Perth business.</p>
<a href="#" class="bg-white hover:bg-gray-100 text-primary font-bold py-3 px-6 rounded-full inline-block transition duration-300">Get Started Today</a>
</div>
<p class="text-gray-500 text-center mt-16">📍 Proudly designing websites for Perth businesses since 2007.</p>
</div>
</div>
</section>
<!-- Related Services -->
<section class="py-16 bg-gray-50">
<div class="container mx-auto px-4">
<h2 class="text-3xl md:text-4xl font-bold text-primary mb-12 text-center">Related Web Design Services</h2>
<div class="grid md:grid-cols-2 lg:grid-cols-5 gap-6">
<a href="#" class="service-card bg-white rounded-lg overflow-hidden shadow-md block">
<div class="h-40 bg-primary flex items-center justify-center">
<i class="fab fa-wordpress text-white text-5xl"></i>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-primary mb-3">WordPress Website Design</h3>
<p class="text-gray-600 mb-4">Custom WordPress websites built for performance and ease of use.</p>
<span class="text-accent font-medium hover:text-secondary">Learn More <i class="fas fa-arrow-right ml-1"></i></span>
</div>
</a>
<a href="#" class="service-card bg-white rounded-lg overflow-hidden shadow-md block">
<div class="h-40 bg-secondary flex items-center justify-center">
<i class="fas fa-mobile-alt text-white text-5xl"></i>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-primary mb-3">Responsive Website Design</h3>
<p class="text-gray-600 mb-4">Mobile-optimized websites that work perfectly on all devices.</p>
<span class="text-accent font-medium hover:text-secondary">Learn More <i class="fas fa-arrow-right ml-1"></i></span>
</div>
</a>
<a href="#" class="service-card bg-white rounded-lg overflow-hidden shadow-md block">
<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">Divi Theme Design Experts</h3>
<p class="text-gray-600 mb-4">Beautiful Divi-based websites with custom functionality.</p>
<span class="text-accent font-medium hover:text-secondary">Learn More <i class="fas fa-arrow-right ml-1"></i></span>
</div>
</a>
<a href="#" class="service-card bg-white rounded-lg overflow-hidden shadow-md block">
<div class="h-40 bg-primary flex items-center justify-center">
<i class="fas fa-sync-alt text-white text-5xl"></i>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-primary mb-3">Website Redesign Services</h3>
<p class="text-gray-600 mb-4">Modern redesigns that improve performance and conversions.</p>
<span class="text-accent font-medium hover:text-secondary">Learn More <i class="fas fa-arrow-right ml-1"></i></span>
</div>
</a>
<a href="#" class="service-card bg-white rounded-lg overflow-hidden shadow-md block">
<div class="h-40 bg-secondary flex items-center justify-center">
<i class="fas fa-cogs text-white text-5xl"></i>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-primary mb-3">Website Maintenance</h3>
<p class="text-gray-600 mb-4">Ongoing support to keep your site secure and up-to-date.</p>
<span class="text-accent font-medium hover:text-secondary">Learn More <i class="fas fa-arrow-right ml-1"></i></span>
</div>
</a>
</div>
</div>
</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>
<!-- 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">"The e-commerce site they built for us has doubled our online sales in just 6 months. Their ongoing marketing support is worth every dollar."</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">Michael Chen</h4>
<p class="text-sm opacity-80">Director, Aussie Homewares</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 branding to web design to digital marketing, Web Wizards has been our one-stop digital partner. Highly recommend their services!"</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">Emma Wilson</h4>
<p class="text-sm opacity-80">Marketing Manager, WA Tourism Co</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>
</body>
</html>
<!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 -->
<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 -->
<!-- Text Content -->
<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>
</div>
</div>
<!-- Video Content -->
<div class="w-full md:w-1/2">
<div class="hero-video rounded-xl shadow-2xl overflow-hidden">
<iframe 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>
<!-- Contact Section -->
<section class="py-16 bg-white">
<div class="container mx-auto px-4">
<div class="flex flex-col lg:flex-row gap-12">
<!-- Contact Details -->
<div class="w-full lg:w-1/2">
<h2 class="text-3xl font-bold text-primary mb-6">Contact Us</h2>
<div class="space-y-6">
<div>
<h3 class="text-xl font-semibold text-primary mb-2">Address</h3>
<p class="text-gray-600">Unit 17/179 Sevenoaks St, Cannington WA 6107</p>
</div>
<div>
<h3 class="text-xl font-semibold text-primary mb-2">Phone</h3>
<p class="text-gray-600">(08) 9350 9392</p>
</div>
<div>
<h3 class="text-xl font-semibold text-primary mb-2">Hours</h3>
<p class="text-gray-600 mb-4">Open 8am until 6pm</p>
<img src="https://lh3.googleusercontent.com/p/AF1QipMqRKB9fcvxOIG9fwOaSw6KK2V-CNgTlgMrmnRZ=s1360-w1360-h1020-rw" alt="Our office" class="rounded-lg shadow-md w-full h-64 object-cover">
</div>
</div>
</div>
<!-- Contact Form -->
<div class="w-full lg:w-1/2">
<form class="space-y-6">
<div>
<label for="name" class="block text-gray-700 font-medium mb-2">Name</label>
<input type="text" id="name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent" required>
</div>
<div>
<label for="email" class="block text-gray-700 font-medium mb-2">Email</label>
<input type="email" id="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent" required>
</div>
<div>
<label for="phone" class="block text-gray-700 font-medium mb-2">Phone</label>
<input type="tel" id="phone" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent">
</div>
<div>
<label for="message" class="block text-gray-700 font-medium mb-2">Message</label>
<textarea id="message" rows="4" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent" required></textarea>
</div>
<button type="submit" class="bg-primary hover:bg-secondary text-white font-bold py-3 px-6 rounded-lg transition duration-300 w-full">Send Message</button>
</form>
</div>
</div>
</div>
</section>
<!-- Map Section -->
<section class="py-16 bg-gray-50">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-primary mb-8 text-center">Find Us</h2>
<div class="rounded-xl overflow-hidden shadow-xl">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3386.089804880901!2d115.932021!3d-31.954999999999998!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2a32bb23e123356f%3A0xd65f73c304be949e!2sWeb%20Wizards!5e0!3m2!1sen!2sau!4v1710000000000!5m1!1e1" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</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>
<!-- 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">"The e-commerce site they built for us has doubled our online sales in just 6 months. Their ongoing marketing support is worth every dollar."</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">Michael Chen</h4>
<p class="text-sm opacity-80">Director, Aussie Homewares</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 branding to web design to digital marketing, Web Wizards has been our one-stop digital partner. Highly recommend their services!"</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">Emma Wilson</h4>
<p class="text-sm opacity-80">Marketing Manager, WA Tourism Co</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>
</body>
</html>