c2c/index.html at main · codesydney/c2c · GitHub

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
<!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>Chance2Change</title>
  <script src="https://cdn.tailwindcss.com"></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>
      <!-- Green wave - thick left, thin taper at end -->
      <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" />
      <!-- Gold wave - thick left, thin taper at end -->
      <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">
      <!-- Hero -->
      <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">
          Chance<span class="text-[#2e6b4d]">2</span>Change
        </h1>
        <p class="text-gray-600 text-base sm:text-lg mt-2 body-spacing px-2">
          Specialised Support Work → Specialised Clean Solutions
        </p>
      </div>
    </header>

    <!-- Cards -->
    <section class="flex gap-6 md:gap-10 justify-center px-4 sm:px-6 md:px-16 pb-8 flex-wrap items-stretch">

      <!-- Card 1 -->
      <div class="w-full max-w-[420px] bg-white rounded-[18px] border-2 border-[#2e6b4d] shadow-md overflow-hidden flex flex-col">
        <img src="assets/jess-photo.jpeg" class="w-full h-[200px] sm:h-[220px] object-cover object-[20%_top]" alt="Independent Support Worker" />
        <div class="p-5 sm:p-8 flex flex-col flex-1">
          <h2 class="heading-font text-xl sm:text-[28px] text-[#2e6b4d] leading-snug mb-4 tracking-wide">
            Independent <br /> Support Worker
          </h2>
          <p class="text-gray-600 text-[15px] mb-6 body-spacing flex-1">
            Providing personalized support services to those in need with care and compassion.
          </p>
          <a href="support-worker.html" class="inline-flex items-center justify-center bg-[#2e6b4d] text-white px-6 py-3 rounded-full text-sm font-medium hover:opacity-90 mt-auto w-fit">
            Learn More
          </a>
        </div>
      </div>

      <!-- Card 2 -->
      <div class="w-full max-w-[420px] bg-white rounded-[18px] border-2 border-[#e9b437] shadow-md overflow-hidden flex flex-col">
        <div class="relative">
          <img src="assets/before-and-after1.png" class="w-full h-[200px] sm:h-[220px] object-cover" alt="Specialised Cleaning Solutions" />
          <span class="absolute left-2 bottom-2 text-white text-[10px] sm:text-xs font-medium tracking-wider bg-black/50 px-2 py-0.5 rounded">Before</span>
          <span class="absolute right-2 bottom-2 text-white text-[10px] sm:text-xs font-medium tracking-wider bg-black/50 px-2 py-0.5 rounded">After</span>
        </div>
        <div class="p-5 sm:p-8 flex flex-col flex-1">
          <h2 class="heading-font text-xl sm:text-[28px] text-[#294a3d] leading-snug mb-4 tracking-wide">
            Specialised <br /> Cleaning Solutions
          </h2>
          <p class="text-gray-600 text-[15px] mb-6 body-spacing flex-1">
            Professional cleaning services for specific needs including domestic, Aged care, NDIS, and healthcare settings.
          </p>
          <a href="specialised-cleaning.html" class="inline-flex items-center justify-center bg-[#e9b437] text-white px-6 py-3 rounded-full text-sm font-medium hover:opacity-90 mt-auto w-fit">
            Learn More
          </a>
        </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: 0412 345 678
      </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); });
    })();
  </script>
</body>
</html>