-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcontact.html
More file actions
208 lines (200 loc) · 11 KB
/
Copy pathcontact.html
File metadata and controls
208 lines (200 loc) · 11 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="favicon.ico" sizes="any" />
<title>Contact - Chance2Change</title>
<script src="https://cdn.tailwindcss.com"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/emailjs-com@3/dist/email.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
<style>
body {
font-family: 'Open Sans', sans-serif;
letter-spacing: 0.08em;
}
.heading-font {
font-family: 'Playfair Display', serif;
letter-spacing: 0.1em;
}
.heading-font-lg {
letter-spacing: 0.12em;
}
.nav-spacing {
letter-spacing: 0.18em;
}
.body-spacing {
letter-spacing: 0.08em;
line-height: 1.8;
}
#mobile-menu {
transition: max-height 0.3s ease-out, opacity 0.2s;
}
.nav-dropdown { opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s; }
.nav-dropdown-trigger:hover .nav-dropdown { opacity: 1; visibility: visible; }
</style>
</head>
<body class="bg-white min-h-screen relative">
<!-- Wave Header - flows from top left corner -->
<div class="relative h-[80px] sm:h-[100px] w-full overflow-hidden">
<svg viewBox="0 0 1200 200" class="absolute top-0 left-0 w-full h-full" preserveAspectRatio="none">
<defs>
<linearGradient id="wave-green" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#2e6b4d" />
<stop offset="50%" stop-color="#4a9f60" />
<stop offset="100%" stop-color="#5e9f7b" stop-opacity="0.4" />
</linearGradient>
<linearGradient id="wave-gold" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#e9b437" />
<stop offset="50%" stop-color="#f2c53d" />
<stop offset="100%" stop-color="#f7d65f" stop-opacity="0.5" />
</linearGradient>
</defs>
<path fill="url(#wave-green)" d="M0,0 L0,195 C140,145 280,160 400,140 C520,120 600,105 680,70 C740,50 780,28 800,0 L0,0 Z" />
<path fill="url(#wave-gold)" d="M0,0 L0,170 C120,125 260,142 380,125 C500,108 580,92 660,60 C720,42 760,22 780,0 L0,0 Z" />
</svg>
</div>
<!-- Burger button - mobile only -->
<button id="burger-btn" type="button" class="md:hidden absolute top-4 right-4 z-20 p-2 text-gray-600 hover:text-black focus:outline-none" aria-label="Open menu">
<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
<!-- Desktop Navigation -->
<nav class="hidden md:flex absolute top-4 right-16 gap-8 text-sm font-medium text-gray-600 nav-spacing z-10 items-center">
<a href="index.html" class="hover:text-black">HOME</a>
<div class="relative nav-dropdown-trigger">
<span class="hover:text-black cursor-default">WHO WE ARE</span>
<div class="nav-dropdown absolute top-full left-0 pt-2">
<div class="bg-white rounded-lg shadow-lg border border-gray-200 py-2 min-w-[240px]">
<a href="support-worker.html" class="block px-4 py-2.5 text-gray-600 hover:bg-gray-50 hover:text-black">Independent Support Worker</a>
<a href="specialised-cleaning.html" class="block px-4 py-2.5 text-gray-600 hover:bg-gray-50 hover:text-black">Specialised Cleaning Solutions</a>
</div>
</div>
</div>
<a href="contact.html" class="hover:text-black">CONTACT</a>
</nav>
<!-- Mobile menu overlay -->
<div id="mobile-menu" class="md:hidden fixed inset-0 z-30 bg-white pt-20 px-6 max-h-0 overflow-hidden opacity-0 pointer-events-none" aria-hidden="true">
<nav class="flex flex-col gap-6 text-base font-medium text-gray-800 nav-spacing">
<a href="index.html" class="hover:text-black border-b border-gray-200 pb-3">HOME</a>
<div class="border-b border-gray-200 pb-3">
<p class="text-gray-500 text-xs mb-2">WHO WE ARE</p>
<a href="support-worker.html" class="block hover:text-black py-1">Independent Support Worker</a>
<a href="specialised-cleaning.html" class="block hover:text-black py-1">Specialised Cleaning Solutions</a>
</div>
<a href="contact.html" class="hover:text-black border-b border-gray-200 pb-3">CONTACT</a>
</nav>
<button id="close-menu" type="button" class="absolute top-4 right-4 p-2 text-gray-600 hover:text-black" aria-label="Close menu">
<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<!-- Header -->
<header class="px-4 sm:px-6 md:px-16 pt-2 pb-0 -mt-6">
<div class="text-center mt-1 mb-4">
<h1 class="heading-font heading-font-lg text-2xl sm:text-3xl md:text-[42px] text-[#2d4f3f] tracking-wide">
Contact
</h1>
<p class="text-gray-600 text-base sm:text-lg mt-2 body-spacing px-2">
Let's Get In Touch
</p>
</div>
</header>
<!-- Contact section -->
<section class="px-4 sm:px-6 md:px-16 pb-16 max-w-[700px] mx-auto" id="contact">
<p class="text-gray-600 text-base sm:text-lg mb-8 body-spacing text-center px-2">Need a quote or have a question? We're here with honest help — no judgment.</p>
<div class="bg-[#f7faf5] rounded-[18px] border-2 border-[#2e6b4d] p-6 sm:p-10">
<form id="contact-form" class="space-y-5">
<div>
<label for="name" class="block text-gray-700 text-sm font-medium mb-2">Name</label>
<input type="text" id="name" name="name" required class="w-full px-4 py-3 rounded-lg border-2 border-gray-200 focus:border-[#2e6b4d] focus:outline-none body-spacing" placeholder="Your name" />
</div>
<div>
<label for="email" class="block text-gray-700 text-sm font-medium mb-2">Email</label>
<input type="email" id="email" name="email" required class="w-full px-4 py-3 rounded-lg border-2 border-gray-200 focus:border-[#2e6b4d] focus:outline-none body-spacing" placeholder="your@email.com" />
</div>
<div>
<label for="message" class="block text-gray-700 text-sm font-medium mb-2">Message</label>
<textarea id="message" name="message" rows="5" required class="w-full px-4 py-3 rounded-lg border-2 border-gray-200 focus:border-[#2e6b4d] focus:outline-none body-spacing resize-y" placeholder="Your message"></textarea>
</div>
<div id="form-status" class="text-sm hidden"></div>
<button type="submit" id="submit-btn" class="w-full sm:w-auto bg-[#e9b437] text-white px-8 py-4 rounded-full text-base font-medium hover:opacity-90">
Send Message
</button>
</form>
<div class="mt-8 pt-6 border-t border-gray-200 space-y-3 text-gray-600 body-spacing text-center">
<p><a href="tel:0493051939" class="text-[#2e6b4d] font-medium hover:underline">0493 051 939</a></p>
<p><a href="mailto:info@chance2change.com.au" class="text-[#2e6b4d] font-medium hover:underline">info@chance2change.com.au</a></p>
</div>
</div>
</section>
<!-- Footer -->
<footer class="border-t text-center py-6 px-4">
<div class="text-[#2e6b4d] font-medium text-base sm:text-lg body-spacing mb-4">
<span class="mr-2">📞</span>
Call Jess: 0493 051 939
</div>
<div class="flex justify-center gap-4 mb-4">
<a href="https://facebook.com/share/15uRfNkVVn/?mibextid=wwXIfr" target="_blank" rel="noopener noreferrer" class="text-[#2e6b4d] hover:opacity-80" aria-label="Facebook"><i class="fab fa-facebook-f text-xl"></i></a>
<a href="https://instagram.com/c2ccleaningcrew?igsh=MW8wcjhvN3o5aHJvZg%3D%3D&utm_source=qr" target="_blank" rel="noopener noreferrer" class="text-[#2e6b4d] hover:opacity-80" aria-label="Instagram"><i class="fab fa-instagram text-xl"></i></a>
<a href="https://tiktok.com/@c2cleaningcrew?_r=1&_t=ZS-94de1SC7cHN" target="_blank" rel="noopener noreferrer" class="text-[#2e6b4d] hover:opacity-80" aria-label="TikTok"><i class="fab fa-tiktok text-xl"></i></a>
</div>
<p class="text-gray-500 text-sm body-spacing">
Web Development by <a href="https://code.sydney" target="_blank" rel="noopener noreferrer" class="text-[#2e6b4d] hover:underline">Code.Sydney</a> T/A <a href="https://bluehex.au" target="_blank" rel="noopener noreferrer" class="text-[#2e6b4d] hover:underline">Bluehex</a>, <a href="https://vibecamp.au" target="_blank" rel="noopener noreferrer" class="text-[#2e6b4d] hover:underline">Vibecamp</a>
</p>
</footer>
<script>
(function() {
var btn = document.getElementById('burger-btn');
var menu = document.getElementById('mobile-menu');
var closeBtn = document.getElementById('close-menu');
function openMenu() {
menu.classList.remove('max-h-0', 'opacity-0', 'pointer-events-none');
menu.classList.add('max-h-screen', 'opacity-100', 'pointer-events-auto');
menu.setAttribute('aria-hidden', 'false');
}
function closeMenu() {
menu.classList.add('max-h-0', 'opacity-0', 'pointer-events-none');
menu.classList.remove('max-h-screen', 'opacity-100', 'pointer-events-auto');
menu.setAttribute('aria-hidden', 'true');
}
if (btn) btn.addEventListener('click', openMenu);
if (closeBtn) closeBtn.addEventListener('click', closeMenu);
menu.querySelectorAll('a').forEach(function(a) { a.addEventListener('click', closeMenu); });
})();
// EmailJS - credentials from chance2change.com.au
(function() {
emailjs.init('user_nEmQ6yi4aBPvlCKCkUAfK');
var form = document.getElementById('contact-form');
var statusEl = document.getElementById('form-status');
var submitBtn = document.getElementById('submit-btn');
if (form) {
form.addEventListener('submit', function(e) {
e.preventDefault();
submitBtn.disabled = true;
statusEl.classList.remove('hidden');
statusEl.textContent = 'Sending...';
statusEl.className = 'text-sm text-gray-600';
emailjs.send('service_4hufzgi', 'template_tsfbjqb', {
name: document.getElementById('name').value,
email: document.getElementById('email').value,
message: document.getElementById('message').value
}).then(function() {
statusEl.textContent = 'Your email has been sent. We\'ll be in touch soon!';
statusEl.className = 'text-sm text-[#2e6b4d] font-medium';
form.reset();
submitBtn.disabled = false;
}, function(err) {
statusEl.textContent = 'Something went wrong. Please try again or call us directly.';
statusEl.className = 'text-sm text-red-600';
submitBtn.disabled = false;
});
});
}
})();
</script>
</body>
</html>