-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
176 lines (166 loc) · 10.9 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CoolTemp Refrigeration</title>
<link rel="icon" type="image/svg" href="./public/img/icon.jpg" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;800&display=swap" rel="stylesheet">
<style>
html, body {
font-family: 'Rubik', sans-serif;
}
</style>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="relative bg-white overflow-hidden">
<div class="max-w-7xl mx-auto">
<div class="relative z-10 pb-8 bg-white sm:pb-16 md:pb-20 lg:max-w-3xl lg:w-full lg:pb-28 xl:pb-32">
<svg class="hidden lg:block absolute right-0 inset-y-0 h-full w-48 text-red-600 transform translate-x-1/2"
fill="currentColor" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
<polygon points="50,0 100,0 50,100 0,100" />
</svg>
<div>
<div class="relative pt-6 px-4 sm:px-6 lg:px-8">
<nav class="relative flex items-center justify-between sm:h-10 lg:justify-start"
aria-label="Global">
<div class="flex items-center flex-grow flex-shrink-0 lg:flex-grow-0">
<div class="flex items-center justify-between w-full md:w-auto">
<a href="#" class="w-16 h-16">
<span class="sr-only">CoolTemp</span>
<img alt="Workflow" class="h-12 w-auto sm:h-16"
src="./public/svg/icon.svg">
</a>
</div>
</div>
<div class="hidden md:block md:ml-10 md:pr-4 md:space-x-8">
<a href="#our-services" class="font-medium text-gray-500 hover:text-gray-900">Our Services</a>
<a href="#maintenance-repair" class="font-medium text-gray-500 hover:text-gray-900">Maintenance & Repair</a>
<a href="#contact-us" class="font-medium text-gray-500 hover:text-gray-900">Contact Us</a>
</div>
</nav>
</div>
</div>
<main class="mt-10 mx-auto px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28">
<div class="sm:text-center lg:text-left">
<h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
<span class="block">Reliable Refrigeration</span>
<span class="block text-red-600">& Air-Conditioning</span>
</h1>
<p
class="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
Experience the difference with <span class="font-bold text-blue-600">Cool</span><span class="font-bold text-red-600">Temp</span>. We provide comprehensive air conditioning solutions, including installations, relocations, and repairs for any AC model.</p>
<div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start">
<div class="rounded-md shadow">
<a href="mailto:[email protected]" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-red-600 hover:bg-red-700 md:py-4 md:text-lg md:px-10">Reach out now</a>
</div>
</div>
</div>
</main>
</div>
</div>
<div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
<img class="h-56 w-full object-cover sm:h-72 md:h-96 lg:w-full lg:h-full"src="./public/img/bg-main.jpg"alt="industrial hvac image">
</div>
</div>
<!-- Our Services -->
<div class="bg-red-600" id="our-services">
<div class="max-w-7xl mx-auto px-8 py-20">
<h2 class="text-white text-center text-4xl font-medium mb-20">Our Services</h2>
<div class="grid sm:grid-cols-3 gap-8">
<div class="bg-white shadow-md rounded overflow-hidden">
<img src="./public/img/services/air-conditioning.jpg" alt="service-air-conditioning" class="aspect-square">
<div class="py-4 px-6">
<h3 class="text-xl mb-4">Air-Conditioning</h3>
<p class="text-gray-600">Stay cool and comfortable year-round with our professional air-conditioning services. We specialize in installing, maintaining, and repairing air conditioning systems for homes and offices. Count on us to create the ideal indoor climate.</p>
</div>
</div>
<div class="bg-white shadow-md rounded overflow-hidden">
<img src="./public/img/services/commercial-refrigeration.jpg" alt="service-commercial-refrigeration" class="aspect-square">
<div class="py-4 px-6">
<h3 class="text-xl mb-4">Commercial Refrigeration</h3>
<p class="text-gray-600">For businesses that rely on refrigeration, we offer top-tier commercial refrigeration solutions. Our expertise extends to the installation and servicing of commercial refrigeration units, ensuring your products stay fresh and your operations run smoothly.</p>
</div>
</div>
<div class="bg-white shadow-md rounded overflow-hidden">
<img src="./public/img/services/refrigeration-transport.jpg" alt="service-refrigeration-transport" class="aspect-square">
<div class="py-4 px-6">
<h3 class="text-xl mb-4">Transport Refrigeration</h3>
<p class="text-gray-600">When it comes to transporting temperature-sensitive goods, trust us to keep things cool. Our refrigeration transport services are tailored to meet the demands of the supply chain, maintaining the integrity of your perishable cargo from start to finish.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Maintenance & Repair -->
<div class="relative bg-white overflow-hidden" id="maintenance-repair">
<div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2 bg-cover bg-no-repeat bg-right"
style="background-image: url(./public/img/bg-maintenance.jpg);">
</div>
<div class="max-w-7xl mx-auto">
<div class="relative z-10 pb-8 bg-white sm:pb-16 md:pb-20 lg:max-w-3xl lg:w-full lg:pb-22 xl:pb-22 rounded-tr-3xl">
<div class="mt-10 mx-auto px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 lg:pt-6 xl:mt-28">
<div class="sm:text-center lg:text-left">
<h2 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl mb-8">
<span class="block">Maintenance</span>
<span class="block text-red-600">& Repair</span>
</h2>
<p class="text-gray-600">Our fully qualified engineers understand the mechanics of commercial air-conditioning units manufactured by these brands and more, inside and out. This ensures that your commercial air-conditioning faults are diagnosed and repaired, quickly and efficiently. The knowledge and skills of our engineers also allows us to offer you the most cost effective commercial air-conditioning repairs, giving you the best possible value for money.</p>
<div class="rounded shadow-lg bg-white mt-10 py-4 px-6 columns-1 sm:columns-3 text-center sm:text-left">
<div class="pb-6 sm:pb-0">
<div class="text-4xl text-red-600">3602</div>
<div class="text-gray-600 text-sm">Happy clients</div>
</div>
<div class="pb-6 sm:pb-0">
<div class="text-4xl text-red-600">10+</div>
<div class="text-gray-600 text-sm">Number of years</div>
</div>
<div>
<div class="text-4xl text-red-600">105+</div>
<div class="text-gray-600 text-sm">Total projects</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Contact Us -->
<footer class="bg-gray-900" id="contact-us">
<div class="max-w-7xl mx-auto px-8 pt-20 pb-8">
<h2 class="text-white text-center text-4xl font-medium mb-20">Have Questions? Reach out to us</h2>
<div class="grid grid-cols-6 gap-4">
<div class="col-span-6 sm:col-span-2">
<div class="bg-white shadow-lg p-6 rounded-lg mb-8">
<h3 class="font-medium mb-2">Address</h3>
<address>5 Tekstiel Street, Unit 2 Business Hubb, Parow Industria, Cape Town, 7493</address>
</div>
</div>
<div class="col-span-6 sm:col-span-2">
<div class="bg-white shadow-lg p-6 rounded-lg mb-8">
<h3 class="font-medium mb-2">Email</h3>
<a href="mailto:[email protected]" class="hover:text-red-600 hover:underline">[email protected]</a>
</div>
</div>
<div class="col-span-6 sm:col-span-2">
<div class="bg-white shadow-lg p-6 rounded-lg mb-8">
<h3 class="font-medium mb-2">Phone</h3>
<span class="inline-block w-20">Office:</span>
<a href="tel:+27218297626" class="hover:text-red-600 hover:underline">021 829 7626</a>
<br>
<span class="inline-block w-20">WhatsApp:</span>
<a href="https://wa.me/27670048162" class="hover:text-red-600 hover:underline">067 004 8162</a>
</div>
</div>
</div>
<div class="border-t border-gray-100 border-opacity-10 mt-12 pt-6 text-gray-100 text-center">
© Copyright 2024. CoolTemp Refrigeration.
</div>
</div>
</footer>
</body>
</html>