-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathservices.html
More file actions
337 lines (299 loc) · 15 KB
/
Copy pathservices.html
File metadata and controls
337 lines (299 loc) · 15 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
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Services | EazyCollab</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet">
<!-- Link to Favicon -->
<link rel="icon" href="images/star.png" type="image/x-icon">
<!-- Font Awesome CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css"
integrity="sha512-5Hs3dF2AEPkpNAR7UiOHba+lRSJNeM2ECkwxUIxC1Q/FLycGTbNapWXB4tP889k5T5Ju8fs4b1P5z/iB4nMfSQ=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Custom Styles -->
<style>
body {
margin-bottom: 0;
padding-bottom: 0;
}
footer {
margin-top: 0;
padding-top: 0;
}
</style>
</head>
<body class="bg-gray-50">
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
<script>
AOS.init({
duration: 1000, // animation duration
once: true, // whether animation should happen only once
});
</script>
<!-- Navbar -->
<nav class="bg-white border-gray-200 dark:bg-black">
<div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
<!-- Logo and Brand Name -->
<a href="index.html" class="flex items-center space-x-3 rtl:space-x-reverse">
<img src="images/EClogowhite.png" class="h-16" alt="Company Logo" />
<!-- <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">EazyCollab</span> -->
</a>
<!-- Mobile Menu Button -->
<button id="menu-btn" type="button"
class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
aria-controls="navbar" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M1 1h15M1 7h15M1 13h15" />
</svg>
</button>
<!-- Navigation Links -->
<div id="navbar" class="hidden w-full md:block md:w-auto bg-black">
<ul
class="font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
<li>
<a href="index.html"
class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Home</a>
</li>
<li>
<a href="about.html"
class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">About</a>
</li>
<li>
<a href="services.html" aria-current="page"
class="block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white md:dark:text-blue-500">Services</a>
</li>
<li>
<a href="contact.html"
class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!--Our offerings -->
<div class="bg-gray-50 py-16">
<div class="max-w-7xl mx-auto px-6 sm:px-8 lg:px-10">
<div class="text-center mb-16">
<h1 class="text-4xl font-extrabold text-gray-900 tracking-tight" data-aos="fade-down" data-aos-delay="200">
Our Offerings
</h1>
<h2 class="text-xl font-medium text-blue-500 mt-4" data-aos="fade-up" data-aos-delay="400">
Drawing from our expertise in digital marketing and lead generation, here are the tailored services we offer to our clients:
</h2>
</div>
<div class="mt-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- B2B Leads Via LinkedIn -->
<div class="flex flex-col items-center justify-between p-6 border-2 border-gray-200 rounded-lg bg-white shadow-lg transition-transform transform hover:scale-105 hover:shadow-xl" data-aos="fade-up" data-aos-delay="600">
<div class="mb-6">
<img src="images/linkedin.png" alt="B2B Icon" class="h-16 w-16 mb-4 mx-auto">
<h3 class="text-xl font-semibold text-gray-900">B2B Leads Via LinkedIn</h3>
</div>
<ul class="space-y-3 text-base text-gray-600">
<li class="flex items-center">
<span class="h-5 w-5 text-indigo-500 mr-3">•</span>
Crafting LinkedIn Outreach templates and follow-ups.
</li>
<li class="flex items-center">
<span class="h-5 w-5 text-indigo-500 mr-3">•</span>
A/B Testing
</li>
<li class="flex items-center">
<span class="h-5 w-5 text-indigo-500 mr-3">•</span>
Generating quality leads and scheduling appointments through LinkedIn.
</li>
</ul>
</div>
<!-- Email Marketing -->
<div class="flex flex-col items-center justify-between p-6 border-2 border-gray-200 rounded-lg bg-white shadow-lg transition-transform transform hover:scale-105 hover:shadow-xl" data-aos="fade-up" data-aos-delay="800">
<div class="mb-6">
<img src="images/email-marketing.png" alt="Email Icon" class="h-16 w-16 mb-4 mx-auto">
<h3 class="text-xl font-semibold text-gray-900">Email Marketing</h3>
</div>
<ul class="space-y-3 text-base text-gray-600">
<li class="flex items-center">
<span class="h-5 w-5 text-indigo-500 mr-3">•</span>
Crafting Mail Templates and follow-up mails.
</li>
<li class="flex items-center">
<span class="h-5 w-5 text-indigo-500 mr-3">•</span>
A/B Testing
</li>
<li class="flex items-center">
<span class="h-5 w-5 text-indigo-500 mr-3">•</span>
Generating quality prospects and scheduling appointments through cold email marketing.
</li>
</ul>
</div>
<!-- Social Media Marketing -->
<div class="flex flex-col items-center justify-between p-6 border-2 border-gray-200 rounded-lg bg-white shadow-lg transition-transform transform hover:scale-105 hover:shadow-xl" data-aos="fade-up" data-aos-delay="1000">
<div class="mb-6">
<img src="images/social-media.png" alt="Social Media Icon" class="h-16 w-16 mb-4 mx-auto">
<h3 class="text-xl font-semibold text-gray-900">Social Media Marketing</h3>
</div>
<ul class="space-y-3 text-base text-gray-600">
<li class="flex items-center">
<span class="h-5 w-5 text-indigo-500 mr-3">•</span>
Social Media Management
</li>
<li class="flex items-center">
<span class="h-5 w-5 text-indigo-500 mr-3">•</span>
Creating Content Calendars
</li>
<li class="flex items-center">
<span class="h-5 w-5 text-indigo-500 mr-3">•</span>
Content Writing
</li>
<li class="flex items-center">
<span class="h-5 w-5 text-indigo-500 mr-3">•</span>
On-Page SEO
</li>
<li class="flex items-center">
<span class="h-5 w-5 text-indigo-500 mr-3">•</span>
Off-Page SEO
</li>
</ul>
</div>
</div>
</div>
</div>
<!--end of our offerings -->
<div class="w-full h-full dark:bg-gray-900">
<!-- Footer -->
<footer class="w-full h-fit bg-black text-white mt-auto" data-aos="fade-up">
<div class="w-full mx-auto sm:px-10 px-4 pb-10">
<div class="grid lg:grid-cols-4 sm:grid-cols-2 grid-cols-1 gap-10 justify-items-start pt-12">
<!-- col 1 -->
<div class="mt-4" data-aos="fade-right" data-aos-delay="100">
<h1 class="text-3xl font-semibold font-[Poppins] mb-6">Get In Touch</h1>
<ul class="text-base text-gray-400 font-medium flex flex-col gap-4">
<li class="flex items-center gap-3">
<ion-icon class="text-2xl text-gray-600" name="location"></ion-icon>
<p class="text-sm">27A Puberan Path, Panjabari, Guwahati-03, India</p>
</li>
<li class="flex items-center gap-3">
<ion-icon class="text-2xl text-gray-600" name="call"></ion-icon>
<p class="text-sm ">+91-9362313574, +91-6033160309</p>
</li>
<li class="flex items-center gap-3">
<ion-icon class="text-2xl text-gray-600" name="mail"></ion-icon>
<p class="text-sm ">isaac@eazycollab.in</p>
</li>
</ul>
<div class="flex gap-4 items-center text-white mt-6">
<a href="https://www.instagram.com/eazycollab/" target="_blank">
<div class="flex items-center justify-center p-3 border border-gray-500 rounded-full transition-all hover:bg-gray-700" data-aos="zoom-in" data-aos-delay="300">
<ion-icon class="text-xl" name="logo-instagram"></ion-icon>
</div>
</a>
<a href="https://wa.me/+919362313574" target="_blank">
<div class="flex items-center justify-center p-3 border border-gray-500 rounded-full transition-all hover:bg-gray-700" data-aos="zoom-in" data-aos-delay="400">
<ion-icon class="text-xl" name="logo-whatsapp"></ion-icon>
</div>
</a>
<a href="https://www.linkedin.com/company/eazy-collab" target="_blank">
<div class="flex items-center justify-center p-3 border border-gray-500 rounded-full transition-all hover:bg-gray-700" data-aos="zoom-in" data-aos-delay="500">
<ion-icon class="text-xl" name="logo-linkedin"></ion-icon>
</div>
</a>
</div>
</div>
<!-- col 2 -->
<div class="mt-4" data-aos="fade-up" data-aos-delay="150">
<h2 class="text-3xl font-semibold font-display mb-6">Quick Links</h2>
<ul class="mt-4 text-lg font-medium text-gray-400">
<li class="flex items-center text-xl mt-2 hover:text-white transition-all">
<b><ion-icon name="chevron-forward-outline"></ion-icon></b><a href="about.html">About Us</a>
</li>
<li class="flex items-center text-xl mt-2 hover:text-white transition-all">
<b><ion-icon name="chevron-forward-outline"></ion-icon></b><a href="contact.html">Contact Us</a>
</li>
<li class="flex items-center text-xl mt-2 hover:text-white transition-all">
<b><ion-icon name="chevron-forward-outline"></ion-icon></b><a href="services.html">Our Services</a>
</li>
<li class="flex items-center text-xl mt-2 hover:text-white transition-all">
<b><ion-icon name="chevron-forward-outline"></ion-icon></b><a href="#">Privacy Policy</a>
</li>
<li class="flex items-center text-xl mt-2 hover:text-white transition-all">
<b><ion-icon name="chevron-forward-outline"></ion-icon></b><a href="#">Terms & Conditions</a>
</li>
</ul>
</div>
<!-- col 3 - Our Services -->
<div class="mt-4" data-aos="fade-left" data-aos-delay="200">
<h2 class="text-3xl font-semibold font-display mb-6">Our Services</h2>
<ul class="text-lg font-medium text-gray-400">
<li class="flex items-center gap-2 mt-2">
<ion-icon class="text-2xl" name="checkmark-circle"></ion-icon>
<p>Data Mining</p>
</li>
<li class="flex items-center gap-2 mt-2">
<ion-icon class="text-2xl" name="checkmark-circle"></ion-icon>
<p>B2B Lead Generation</p>
</li>
<li class="flex items-center gap-2 mt-2">
<ion-icon class="text-2xl" name="checkmark-circle"></ion-icon>
<p>Appointment Setting</p>
</li>
<li class="flex items-center gap-2 mt-2">
<ion-icon class="text-2xl" name="checkmark-circle"></ion-icon>
<p>Digital Marketing</p>
</li>
<li class="flex items-center gap-2 mt-2">
<ion-icon class="text-2xl" name="checkmark-circle"></ion-icon>
<p>Social Media Marketing</p>
</li>
<li class="flex items-center gap-2 mt-2">
<ion-icon class="text-2xl" name="checkmark-circle"></ion-icon>
<p>Content Writing</p>
</li>
</ul>
</div>
<!-- col 4 - Blog Section -->
<div class="w-full mt-4 lg:pl-6" data-aos="zoom-in" data-aos-delay="250">
<h4 class="text-3xl font-semibold font-display mb-6">Blog</h4>
<p class="text-lg text-gray-400 font-medium mb-7">Check out our latest articles</p>
<div class="w-full space-y-4">
<div class="flex flex-col space-y-2">
<a href="#" class="text-lg text-gray-200 hover:text-white transition-all">The Future of Digital Marketing in 2024</a>
<p class="text-sm text-gray-500">Explore the emerging trends in the world of digital marketing...</p>
</div>
<div class="flex flex-col space-y-2">
<a href="#" class="text-lg text-gray-200 hover:text-white transition-all">How to Set Effective Appointments</a>
<p class="text-sm text-gray-500">Tips and tools to help you streamline your appointment setting process...</p>
</div>
</div>
</div>
</div>
<hr class="bg-gray-600 mt-14" data-aos="fade-in" />
<div class="w-full flex sm:flex-row gap-2 flex-col items-center justify-between py-4" data-aos="fade-up" data-aos-delay="300">
<div>
©EazyCollab-All Rights Reserved
</div>
<div class="flex items-center justify-center space-x-4 mt-4 sm:mt-0">
<a href="#" class="text-sm text-gray-400 hover:text-white transition-all">Home</a>
<a href="#" class="text-sm text-gray-400 hover:text-white transition-all">Cookies</a>
<a href="#" class="text-sm text-gray-400 hover:text-white transition-all">Help</a>
<a href="#" class="text-sm text-gray-400 hover:text-white transition-all">FAQs</a>
</div>
</div>
</div>
</footer>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<script>
// Ensure AOS is initialized properly after the DOM is loaded
document.addEventListener('DOMContentLoaded', function () {
AOS.init({
duration: 1000, // animation duration
once: true, // only run once when scrolled into view
});
});
</script>
<script src="script.js"></script>
</body>
</html>