PageSourceSearch

https://dumanimedia.vercel.app/

html dumanimedia.vercel.app collected 2026-10-03 06:48:53 UTC 70,284 bytes, 1,699 lines download raw bytes

1
2
3<!DOCTYPE html>
4<html lang="en">
5    <head>
6        <meta charset="UTF-8" />
7        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
8        <title>Dumani Media - Let’s Build Something Extraordinary</title>
9        <meta
10            name="description"
11            content="Establish a strong brand that align with your values and mission with our digital, interactive, and creative solutions. Explore how we can help you today!"
12        />
13        <meta
14            content="Dumani Media - Let’s Build Something Extraordinary"
15            property="og:title"
16        />
17        <meta
18            name="author"
19            content="Dumani Media"
20        />
21        <link
22            rel="author"
23            href="https://www.instagram.com/dumanimedia"
24        />
25        <link rel="canonical" href="https://dumanimedia.vercel.app/" />
26        <meta name="application-name" content="Dumani Media" />
27        <meta
28            name="robots"
29            content="index, follow, max-image-preview:large"
30        />
31        <meta
32            name="googlebot"
33            content="index, follow, max-image-preview:large"
34        />
35        <meta name="keywords" content="Dumani Media, creative agency, brand identity design, UX/UI design, digital media solutions, graphic design studio, web design, branding agency, visual storytelling, creative branding, global creative agency, experiential branding, digital experience design, media agency Uganda, design studio Africa">
36        <meta
37            content="Establish a strong brand that align with your values and mission with our digital, interactive, and creative solutions. Explore how we can help you today!"
38            property="og:description"
39        />
40        <meta
41            content="https://dumanimedia.vercel.app/public/images/social-preview.3ed198d32418.jpg"
42            property="og:image"
43        />
44        <meta
45            property="og:url"
46            content=""
47        />
48        <meta
49            content="Dumani Media - Let’s Build Something Extraordinary"
50            property="twitter:title"
51        />
52        <meta
53            content="Establish a strong brand that align with your values and mission with our digital, interactive, and creative solutions. Explore how we can help you today!"
54            property="twitter:description"
55        />
56        <meta
57            content="https://dumanimedia.vercel.app/public/images/social-preview.3ed198d32418.jpg"
58            property="twitter:image"
59        />
60        <meta property="og:type" content="website" />
61        <meta
62            property="og:image:width"
63            content="1200"
64        />
65        <meta
66            property="og:image:height"
67            content="630"
68        />
69        <meta name="twitter:card" content="summary_large_image" />
70        <meta content="Dumani Media" name="generator" />
71
72        <link rel="stylesheet" href="/public/styles/globals.901c36baa506.css" />
73
74        <link rel="preconnect" href="https://fonts.googleapis.com" />
75        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
76        <link
77            href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Syne:[email protected]&Work+Sans:[email protected]&display=swap"
78            rel="stylesheet"
79            media="all"
80        />
81
82        <link
83            href="/public/images/favicon.6128ea20bd8a.ico"
84            rel="shortcut icon"
85            type="image/x-icon"
86        />
87        <link
88            rel="icon"
89            type="image/png"
90            href="/public/images/favicon-48x48.9982e84eeb1d.png"
91            sizes="48x48"
92        />
93        <link
94            href="/public/images/apple-touch-icon.081652ffaf33.png"
95            rel="apple-touch-icon"
96            sizes="180x180"
97        />
98        <meta name="apple-mobile-web-app-title" content="Dumani" />
99        <link rel="manifest" href="/public/images/site.f138f94d0c3e.webmanifest" />
100         
101    </head>
102
103    <body>
104        
105
106<header class="site-header fixed py-3 z-20 w-full backdrop-blur-md">
107    <div class="relative container flex items-center justify-between">
108        <div class="flex items-center gap-x-10">
109            <a href="/">
110                <img
111                    src="/public/images/logo.51cbf1d2627d.svg"
112                    class="aspect-[50/17]"
113                    alt="dumani-media-logo"
114                    width="112px"
115                />
116            </a>
117
118            <div class="menu-block-wrapper">
119            <nav class="menu-block">
120                <ul class="nav-items-list hidden lg:flex gap-7">
121                <li
122                    class="nav-link-item rounded-none border border-transparent"
123                >
124                    <a
125                    class="nav-link-item relative text-[16px]/none font-semibold tracking-normal"
126                    href="/about-us/"
127                    >About Us</a
128                    >
129                </li>
130
131                <li
132                    class="nav-link-item rounded-none border border-transparent"
133                >
134                    <a
135                    class="nav-link-item relative text-[16px]/none font-semibold tracking-normal"
136                    href="/services/"
137                    >Services</a
138                    >
139                </li>
140                <li
141                    class="nav-link-item rounded-none border border-transparent"
142                >
143                    <a
144                    class="nav-link-item relative text-[16px]/none font-semibold tracking-normal"
145                    href="/our-projects/"
146                    >Our Projects</a
147                    >
148                </li>
149
150                <li
151                    class="nav-link-item rounded-none border border-transparent"
152                >
153                    <a
154                    class="nav-link-item relative text-[16px]/none font-semibold tracking-normal"
155                    href="/our-contact/"
156                    >
157                    Contact Us
158                    </a>
159                </li>
160                </ul>
161            </nav>
162            </div>
163        </div>
164
165        <div class="flex items-center gap-x-6">
166            <a
167            class="relative hidden px-6 py-2 sm:inline-flex items-center justify-center text-background bg-primary font-bold leading-normal rounded-[50px] text-[1rem] shadow-[0px_5px_0_0] shadow-foreground hover:shadow-transparent transition-shadow 0.3s ease-in-out border-2 border-black"
168            href="/our-contact/"
169            >
170            Let's Start
171            </a>
172
173            <button id="burger-menu" data-drawer-trigger aria-controls="dumanimedia-s-drawer" aria-expanded="false" class="relative block lg:hidden cursor-pointer size-7 overflow-hidden index-[2]">
174                <span
175                    class="right-0 top-[13px] w-7 before:left-0 before:-top-2.5 before:w-4 before:content-[''] after:content-[''] after:left-0 after:top-2.5 after:w-5"
176                ></span>
177            </button>
178        </div>
179    </div>
180</header>
181
182        
183<main>
184    <section class="section-hero bg-black/50">
185      <div class="relative container py-24 lg:pt-32 2xl:pt-44">
186        <div
187          class="relative z-10 flex flex-col items-center justify-center gap-y-16 lg:flex-row lg:gap-x-[90px]"
188        >
189          <div
190            class="flex-grow lg:flex-[1_1_0%] text-center lg:text-start lg:max-w-[768px]"
191          >
192            <h1 class="">
193              A
194              
195
196<span class="h1 font-heading inline-flex items-center gap-5">modern
197    <img
198        src="/public/images/icons/star-shape-icon.88b5a786bc5a.svg"
199        alt="star-shape-icon"
200        width="74px"
201        height="70px"
202        class="aspect-[74/70] w-8 md:w-10 lg:w-[57px] inline-block"
203    />
204</span>
205              creative firm
206            </h1>
207            <p class="mb-4 lg:mb-8 mt-6 text-lg leading-tight">
208              We specialize in custom web design and development, brand identity and graphic design, creating unique interfaces that enhance online presence and drive marketing success.
209            </p>
210
211            <div
212              class="mb-7 lg:mb-10 flex flex-wrap items-center justify-center gap-2 sm:gap-4 lg:justify-start"
213            >
214              <div class="flex -space-x-3">
215                
216                  <img
217                    src="https://adventureawaitssafaris.com/wp-content/uploads/2024/07/cropped-cropped-Adventure-Awaits-180x180.png"
218                    alt="hero-user-1"
219                    width="60px"
220                    height="60px"
221                    class="object-cover p-1 z-0 [&:nth-child(2)]:z-[2] [&:nth-child(3)]:z-[3] size-16 rounded-[50%] border-[6px] border-black"
222                  />
223                
224                  <img
225                    src="https://iceagegaming.vercel.app/logo.png"
226                    alt="hero-user-2"
227                    width="60px"
228                    height="60px"
229                    class="object-cover p-1 z-0 [&:nth-child(2)]:z-[2] [&:nth-child(3)]:z-[3] size-16 rounded-[50%] border-[6px] border-black"
230                  />
231                
232                  <img
233                    src="https://mediacentre.go.ug/assets/images/logo.png"
234                    alt="hero-user-3"
235                    width="60px"
236                    height="60px"
237                    class="object-cover p-1 z-0 [&:nth-child(2)]:z-[2] [&:nth-child(3)]:z-[3] size-16 rounded-[50%] border-[6px] border-black"
238                  />
239                
240              </div>
241              <span class="text-[15px] sm:text-base/none font-semibold">
242                Successfully worked with over 20+ brands
243              </span>
244            </div>
245
246            <a
247              class="relative pr-14 md:pr-24 pl-8 inline-flex items-center justify-center bg-primary py-[18px] font-bold leading-normal rounded-[50px] text-[1rem] shadow-[0px_5px_0_0] shadow-foreground hover:shadow-transparent transition-shadow 0.3s ease-in-out border-2 border-black"
248              href="/our-contact/"
249              >Book a free consultation
250              <span
251                class="absolute right-1.5 inline-flex size-[50px] items-center justify-center rounded-[50%] bg-background"
252                ><img
253                  src="/public/images/icons/phone-icon.ce92a5f9b30a.svg"
254                  alt="phone-icon"
255                  width="30px"
256                  height="30px" /></span
257            ></a>
258          </div>
259          
260          <div class="flex-shrink lg:flex-[0 1 60%] mx-auto inline-block w-full max-w-[495px] overflow-hidden rounded-[25px] bg-foreground p-1.5 lg:mx-0">
261            <img src="/public/images/hero-img.155df5f1d4db.jpg" alt="hero-img" width="485px" height="540px" loading="lazy" class="h-full w-full rounded-[20px] object-cover" />
262          </div>
263
264          <img src="/public/images/icons/line-curve-arrow.bc3d11964096.svg" alt="line-curve-arrow" width="284px" height="153px" class="absolute bottom-[3%] left-[45%] 2xl:left-1/2 -translate-x-1/2 -z-10 hidden h-auto max-w-52 lg:inline-block xl:max-w-full" />
265        </div>
266      </div>
267    </section>
268
269    <section class="section-service relative container py-16 lg:py-24">
270        <div class="mx-auto mb-10 max-w-[650px] text-center md:mb-[60px] xl:mb-20 xl:max-w-[856px]">
271            <h2 class="jos relative max-w-[856px]">
272                We provide effective design
273                
274
275<span class="h2 font-heading">solutions
276    <img
277        src="/public/images/icons/star-shape-icon.88b5a786bc5a.svg"
278        alt="star-shape-icon"
279        width="74px"
280        height="70px"
281        class="aspect-[74/70] w-8 md:w-10 lg:w-[57px] inline-block"
282    />
283</span>
284            </h2>
285        </div>
286
287        <ul class="grid grid-cols-1 gap-[30px] lg:grid-cols-2">
288            
289              
290                
291
292<li class="jos shadow-bg group" data-jos_delay="0">
293    <div class="flex h-full flex-col items-start overflow-hidden rounded-[20px] border-2 border-black p-[30px] transition duration-300 group-hover:shadow-[5px_5px_0_0] group-hover:shadow-secondary group-hover:border-secondary">
294        <img
295            src="/public/images/services/service-1-icon.3b72c05b1ecd.svg"
296            alt="service-2-icon"
297            width="77px"
298            height="70px"
299            class="h-[70px] w-auto"
300        />
301
302        <h4 class="mb-4 mt-7">Graphics Design</h4>
303        <p class="mb-6">Creating visually compelling designs for digital and print media, including posters, infographics, and social media graphics.</p>
304        <span class="mt-auto inline-block translate-x-0 transition-all duration-300 group-hover:translate-x-5" href="/service-details">
305            <img
306                src="/public/images/icons/arrow-right-icon.02ef6c9e96ee.svg"
307                alt="icon-black-arrow-right"
308                width="34px"
309                height="28px"
310            />
311        </span>
312        
313    </div>
314</li>
315              
316            
317              
318                
319
320<li class="jos shadow-bg group" data-jos_delay="0.15">
321    <div class="flex h-full flex-col items-start overflow-hidden rounded-[20px] border-2 border-black p-[30px] transition duration-300 group-hover:shadow-[5px_5px_0_0] group-hover:shadow-secondary group-hover:border-secondary">
322        <img
323            src="/public/images/services/service-3-icon.ab8925b20fd3.svg"
324            alt="service-2-icon"
325            width="77px"
326            height="70px"
327            class="h-[70px] w-auto"
328        />
329
330        <h4 class="mb-4 mt-7">Web Design</h4>
331        <p class="mb-6">Designing responsive and user-friendly websites that align with brand identity and deliver a seamless online experience.</p>
332        <span class="mt-auto inline-block translate-x-0 transition-all duration-300 group-hover:translate-x-5" href="/service-details">
333            <img
334                src="/public/images/icons/arrow-right-icon.02ef6c9e96ee.svg"
335                alt="icon-black-arrow-right"
336                width="34px"
337                height="28px"
338            />
339        </span>
340        
341    </div>
342</li>
343              
344            
345              
346                
347
348<li class="jos shadow-bg group" data-jos_delay="0.3">
349    <div class="flex h-full flex-col items-start overflow-hidden rounded-[20px] border-2 border-black p-[30px] transition duration-300 group-hover:shadow-[5px_5px_0_0] group-hover:shadow-secondary group-hover:border-secondary">
350        <img
351            src="/public/images/services/service-4-icon.3018f6e44885.svg"
352            alt="service-2-icon"
353            width="77px"
354            height="70px"
355            class="h-[70px] w-auto"
356        />
357
358        <h4 class="mb-4 mt-7">Branding Identity</h4>
359        <p class="mb-6">Crafting comprehensive branding strategies, including logo design, typography, and color schemes to create a distinct brand image.</p>
360        <span class="mt-auto inline-block translate-x-0 transition-all duration-300 group-hover:translate-x-5" href="/service-details">
361            <img
362                src="/public/images/icons/arrow-right-icon.02ef6c9e96ee.svg"
363                alt="icon-black-arrow-right"
364                width="34px"
365                height="28px"
366            />
367        </span>
368        
369    </div>
370</li>
371              
372            
373              
374                
375
376<li class="jos shadow-bg group" data-jos_delay="0.44999999999999996">
377    <div class="flex h-full flex-col items-start overflow-hidden rounded-[20px] border-2 border-black p-[30px] transition duration-300 group-hover:shadow-[5px_5px_0_0] group-hover:shadow-secondary group-hover:border-secondary">
378        <img
379            src="/public/images/services/service-2-icon.72be8231a6c2.svg"
380            alt="service-2-icon"
381            width="77px"
382            height="70px"
383            class="h-[70px] w-auto"
384        />
385
386        <h4 class="mb-4 mt-7">UI/UX Design</h4>
387        <p class="mb-6">Creating user-centric designs that ensure intuitive interactions and a seamless experience across digital platforms.</p>
388        <span class="mt-auto inline-block translate-x-0 transition-all duration-300 group-hover:translate-x-5" href="/service-details">
389            <img
390                src="/public/images/icons/arrow-right-icon.02ef6c9e96ee.svg"
391                alt="icon-black-arrow-right"
392                width="34px"
393                height="28px"
394            />
395        </span>
396        
397    </div>
398</li>
399              
400            
401        </ul>
402    </section>
403
404    <div class="container h-px w-full bg-foreground relative my-8"></div>
405
406    <section class="section-about container relative py-16 lg:py-24">
407      <div class="section-block mb-10 md:mb-[60px] xl:mb-20">
408        <div
409          class="grid items-center gap-x-6 gap-y-10 text-center lg:grid-cols-[1fr_minmax(0,0.55fr)] lg:text-start xl:gap-x-[134px]"
410        >
411          <h2 class="jos">
412            We make
413            
414
415<span class="h2 font-heading">your
416    <img
417        src="/public/images/icons/star-shape-icon.88b5a786bc5a.svg"
418        alt="star-shape-icon"
419        width="74px"
420        height="70px"
421        class="aspect-[74/70] w-8 md:w-10 lg:w-[57px] inline-block"
422    />
423</span>
424            business stand out
425          </h2>
426          <p class="jos section-para">
427            We work closely with our clients to know their objectives, target
428            audience, unique needs, and practical design solutions.
429          </p>
430        </div>
431      </div>
432
433      <div
434        class="grid grid-cols-1 gap-x-6 gap-y-10 md:grid-cols-2 lg:grid-cols-[0.8fr_0.4fr]"
435      >
436        <!-- About Left Block - Video -->
437        <div
438          class="jos relative flex items-center justify-center overflow-hidden rounded-[25px] border-[5px] border-black"
439        >
440          <img
441            src="/public/images/about-img.89670e2a063a.jpg"
442            alt="about-img"
443            width="846"
444            height="476"
445            loading="lazy"
446            class="h-full w-full object-cover"
447          />
448
449          <div class="absolute inline-block">
450            <a
451              data-fslightbox="gallery"
452              href="https://www.youtube.com/watch?v=3nQNiWdeH2Q"
453              class="relative pr-14 pl-8 inline-flex items-center justify-center bg-primary py-3 font-bold leading-normal rounded-[50px] text-[1rem] shadow-[0px_5px_0_0] shadow-foreground hover:shadow-transparent transition-shadow 0.3s ease-in-out border-2 border-black"
454              aria-label="video-play"
455            >
456              Play
457              <span class="rounded-[50%] absolute right-[0px] inline-flex items-center justify-center">
458                <img
459                  src="/public/images/icons/play-icon.ae410592ae77.svg"
460                  alt="play-icon"
461                  width="50px"
462                  height="50px"
463                />
464              </span>
465            </a>
466          </div>
467        </div>
468        <!-- About Left Block - Video -->
469
470        <!-- About Right Block - Counter Up -->
471        <div class="jos rounded-[25px] bg-black p-[30px]">
472          <ul class="divide-y divide-[#333333]">
473            <li class="py-6 text-center first-of-type:pt-0 last-of-type:pb-0">
474              <div
475                class="font-heading text-4xl font-bold leading-[1.07] -tracking-[1%] text-primary md:text-5xl xl:text-[70px]"
476                data-module="countup"
477              >
478                <span
479                  class="start-number font-heading text-4xl md:text-5xl xl:text-[70px]"
480                  data-countup-number="15"
481                  >15</span
482                >+
483              </div>
484              <span class="mt-2 inline-block">Years of experience</span>
485            </li>
486            <li class="py-6 text-center first-of-type:pt-0 last-of-type:pb-0">
487              <div
488                class="font-heading text-4xl font-bold leading-[1.07] -tracking-[1%] text-primary md:text-5xl xl:text-[70px]"
489                data-module="countup"
490              >
491                <span
492                  class="start-number font-heading text-4xl md:text-5xl xl:text-[70px]"
493                  data-countup-number="120"
494                  >120</span
495                >k
496              </div>
497              <span class="mt-2 inline-block">Successful projects</span>
498            </li>
499            <li class="py-6 text-center first-of-type:pt-0 last-of-type:pb-0">
500              <div
501                class="font-heading text-4xl font-bold leading-[1.07] -tracking-[1%] text-primary md:text-5xl xl:text-[70px]"
502                data-module="countup"
503              >
504                <span
505                  class="start-number font-heading text-4xl md:text-5xl xl:text-[70px]"
506                  data-countup-number="100"
507                  >100</span
508                >%
509              </div>
510              <span class="mt-2 inline-block">Client satisfaction rate</span>
511            </li>
512          </ul>
513        </div>
514        <!-- About Right Block - Counter Up -->
515      </div>
516    </section>
517
518    
519
520<section class="section-portfolio relative container py-16 lg:py-24">
521    <h2 data-title="" class="jos relative mx-auto mb-10 max-w-[650px] text-center md:mb-[60px] xl:mb-20 xl:max-w-[856px]">
522        
523            Have a wide range of creative
524            
525
526<span class="h2 font-heading">projects
527    <img
528        src="/public/images/icons/star-shape-icon.88b5a786bc5a.svg"
529        alt="star-shape-icon"
530        width="74px"
531        height="70px"
532        class="aspect-[74/70] w-8 md:w-10 lg:w-[57px] inline-block"
533    />
534</span>
535        
536    </h2>
537
538    <div class="projects-wrapper grid grid-cols-1 md:grid-cols-2 gap-6 2xl:gap-[58px] lg:gap-12 md:gap-[30px]">
539        
540            
541                
542
543<article class="jos relative overflow-hidden group inline-flex flex-col gap-2" data-jos_delay="0">
544    <a aria-label="Adventure Awaits Safaris" class="absolute inset-0 z-10" href="/our-projects/adventure-awaits-safaris/"></a>
545    <div class="relative overflow-hidden w-full aspect-[63/44]">
546        <img
547            src="https://res.cloudinary.com/dyuwcragq/image/upload/v1/dumanimedia-assets/projects/thumbnails/thumbnail_qdr5tu"
548            alt="adventure-awaits-safaris-image"
549            class="w-full object-cover duration-500 rounded-xl group-hover:scale-105 bg-black/50 aspect-[63/44]"
550            width="630px"
551            height="440px"
552        />
553    </div>
554    <div class="content flex items-center justify-between gap-1">
555        <div>
556            <span class="text-primary block uppercase xl:text-lg text-base">
557                Branding Identity
558            </span>
559            <h3 class="text-h4-sm line-clamp-1">Adventure Awaits Safaris</h3>
560        </div>
561        <div class="shrink-0 relative size-11 sm:size-14 rounded-md bg-[#1D1D1D] flex justify-center items-center duration-500 group-hover:bg-primary">
562            <img
563                src="/public/images/icons/arrow-right-icon.02ef6c9e96ee.svg"
564                alt="arrow-right-icon"
565                width="34px"
566                height="28px"
567                class="translate-x-0 opacity-100 transition-all duration-300 group-hover:translate-x-full group-hover:opacity-0"
568            />
569            <img
570                src="/public/images/icons/arrow-right-icon.02ef6c9e96ee.svg"
571                alt="arrow-right-icon"
572                width="34px"
573                height="28px"
574                class="absolute -translate-x-full opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100"
575            />
576        </div>
577    </div>
578</article>
579            
580        
581            
582                
583
584<article class="jos relative overflow-hidden group inline-flex flex-col gap-2" data-jos_delay="0.15">
585    <a aria-label="Uganda Media Center" class="absolute inset-0 z-10" href="/our-projects/uganda-media-center/"></a>
586    <div class="relative overflow-hidden w-full aspect-[63/44]">
587        <img
588            src="https://res.cloudinary.com/dyuwcragq/image/upload/v1/dumanimedia-assets/projects/thumbnails/thumbnail_iuvfqx"
589            alt="uganda-media-center-image"
590            class="w-full object-cover duration-500 rounded-xl group-hover:scale-105 bg-black/50 aspect-[63/44]"
591            width="630px"
592            height="440px"
593        />
594    </div>
595    <div class="content flex items-center justify-between gap-1">
596        <div>
597            <span class="text-primary block uppercase xl:text-lg text-base">
598                Web Design
599            </span>
600            <h3 class="text-h4-sm line-clamp-1">Uganda Media Center</h3>
601        </div>
602        <div class="shrink-0 relative size-11 sm:size-14 rounded-md bg-[#1D1D1D] flex justify-center items-center duration-500 group-hover:bg-primary">
603            <img
604                src="/public/images/icons/arrow-right-icon.02ef6c9e96ee.svg"
605                alt="arrow-right-icon"
606                width="34px"
607                height="28px"
608                class="translate-x-0 opacity-100 transition-all duration-300 group-hover:translate-x-full group-hover:opacity-0"
609            />
610            <img
611                src="/public/images/icons/arrow-right-icon.02ef6c9e96ee.svg"
612                alt="arrow-right-icon"
613                width="34px"
614                height="28px"
615                class="absolute -translate-x-full opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100"
616            />
617        </div>
618    </div>
619</article>
620            
621        
622            
623                
624
625<article class="jos relative overflow-hidden group inline-flex flex-col gap-2" data-jos_delay="0.3">
626    <a aria-label="Ice Age Gaming" class="absolute inset-0 z-10" href="/our-projects/ice-age-gaming/"></a>
627    <div class="relative overflow-hidden w-full aspect-[63/44]">
628        <img
629            src="https://res.cloudinary.com/dyuwcragq/image/upload/v1/dumanimedia-assets/projects/thumbnails/thumbnail_wv4hgs"
630            alt="ice-age-gaming-image"
631            class="w-full object-cover duration-500 rounded-xl group-hover:scale-105 bg-black/50 aspect-[63/44]"
632            width="630px"
633            height="440px"
634        />
635    </div>
636    <div class="content flex items-center justify-between gap-1">
637        <div>
638            <span class="text-primary block uppercase xl:text-lg text-base">
639                Web Design
640            </span>
641            <h3 class="text-h4-sm line-clamp-1">Ice Age Gaming</h3>
642        </div>
643        <div class="shrink-0 relative size-11 sm:size-14 rounded-md bg-[#1D1D1D] flex justify-center items-center duration-500 group-hover:bg-primary">
644            <img
645                src="/public/images/icons/arrow-right-icon.02ef6c9e96ee.svg"
646                alt="arrow-right-icon"
647                width="34px"
648                height="28px"
649                class="translate-x-0 opacity-100 transition-all duration-300 group-hover:translate-x-full group-hover:opacity-0"
650            />
651            <img
652                src="/public/images/icons/arrow-right-icon.02ef6c9e96ee.svg"
653                alt="arrow-right-icon"
654                width="34px"
655                height="28px"
656                class="absolute -translate-x-full opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100"
657            />
658        </div>
659    </div>
660</article>
661            
662        
663            
664                
665
666<article class="jos relative overflow-hidden group inline-flex flex-col gap-2" data-jos_delay="0.44999999999999996">
667    <a aria-label="Mora Odyssey Travels" class="absolute inset-0 z-10" href="/our-projects/mora-odyssey-travels/"></a>
668    <div class="relative overflow-hidden w-full aspect-[63/44]">
669        <img
670            src="https://res.cloudinary.com/dyuwcragq/image/upload/v1/dumanimedia-assets/projects/thumbnails/thumbnail_ubmhvf"
671            alt="mora-odyssey-travels-image"
672            class="w-full object-cover duration-500 rounded-xl group-hover:scale-105 bg-black/50 aspect-[63/44]"
673            width="630px"
674            height="440px"
675        />
676    </div>
677    <div class="content flex items-center justify-between gap-1">
678        <div>
679            <span class="text-primary block uppercase xl:text-lg text-base">
680                Branding Identity
681            </span>
682            <h3 class="text-h4-sm line-clamp-1">Mora Odyssey Travels</h3>
683        </div>
684        <div class="shrink-0 relative size-11 sm:size-14 rounded-md bg-[#1D1D1D] flex justify-center items-center duration-500 group-hover:bg-primary">
685            <img
686                src="/public/images/icons/arrow-right-icon.02ef6c9e96ee.svg"
687                alt="arrow-right-icon"
688                width="34px"
689                height="28px"
690                class="translate-x-0 opacity-100 transition-all duration-300 group-hover:translate-x-full group-hover:opacity-0"
691            />
692            <img
693                src="/public/images/icons/arrow-right-icon.02ef6c9e96ee.svg"
694                alt="arrow-right-icon"
695                width="34px"
696                height="28px"
697                class="absolute -translate-x-full opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100"
698            />
699        </div>
700    </div>
701</article>
702            
703        
704            
705                
706
707<article class="jos relative overflow-hidden group inline-flex flex-col gap-2" data-jos_delay="0.6">
708    <a aria-label="Kiweewa Travels" class="absolute inset-0 z-10" href="/our-projects/kiweewa-travels/"></a>
709    <div class="relative overflow-hidden w-full aspect-[63/44]">
710        <img
711            src="https://res.cloudinary.com/dyuwcragq/image/upload/v1/dumanimedia-assets/projects/thumbnails/thumbnail_zsmjfp"
712            alt="kiweewa-travels-image"
713            class="w-full object-cover duration-500 rounded-xl group-hover:scale-105 bg-black/50 aspect-[63/44]"
714            width="630px"
715            height="440px"
716        />
717    </div>
718    <div class="content flex items-center justify-between gap-1">
719        <div>
720            <span class="text-primary block uppercase xl:text-lg text-base">
721                Web Design
722            </span>
723            <h3 class="text-h4-sm line-clamp-1">Kiweewa Travels</h3>
724        </div>
725        <div class="shrink-0 relative size-11 sm:size-14 rounded-md bg-[#1D1D1D] flex justify-center items-center duration-500 group-hover:bg-primary">
726            <img
727                src="/public/images/icons/arrow-right-icon.02ef6c9e96ee.svg"
728                alt="arrow-right-icon"
729                width="34px"
730                height="28px"
731                class="translate-x-0 opacity-100 transition-all duration-300 group-hover:translate-x-full group-hover:opacity-0"
732            />
733            <img
734                src="/public/images/icons/arrow-right-icon.02ef6c9e96ee.svg"
735                alt="arrow-right-icon"
736                width="34px"
737                height="28px"
738                class="absolute -translate-x-full opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100"
739            />
740        </div>
741    </div>
742</article>
743            
744        
745            
746                
747
748<article class="jos relative overflow-hidden group inline-flex flex-col gap-2" data-jos_delay="0.75">
749    <a aria-label="Cre8 Market" class="absolute inset-0 z-10" href="/our-projects/cre8-market/"></a>
750    <div class="relative overflow-hidden w-full aspect-[63/44]">
751        <img
752            src="https://res.cloudinary.com/dyuwcragq/image/upload/v1/dumanimedia-assets/projects/thumbnails/thumbnail_zs7zg3"
753            alt="cre8-market-image"
754            class="w-full object-cover duration-500 rounded-xl group-hover:scale-105 bg-black/50 aspect-[63/44]"
755            width="630px"
756            height="440px"
757        />
758    </div>
759    <div class="content flex items-center justify-between gap-1">
760        <div>
761            <span class="text-primary block uppercase xl:text-lg text-base">
762                Branding Identity
763            </span>
764            <h3 class="text-h4-sm line-clamp-1">Cre8 Market</h3>
765        </div>
766        <div class="shrink-0 relative size-11 sm:size-14 rounded-md bg-[#1D1D1D] flex justify-center items-center duration-500 group-hover:bg-primary">
767            <img
768                src="/public/images/icons/arrow-right-icon.02ef6c9e96ee.svg"
769                alt="arrow-right-icon"
770                width="34px"
771                height="28px"
772                class="translate-x-0 opacity-100 transition-all duration-300 group-hover:translate-x-full group-hover:opacity-0"
773            />
774            <img
775                src="/public/images/icons/arrow-right-icon.02ef6c9e96ee.svg"
776                alt="arrow-right-icon"
777                width="34px"
778                height="28px"
779                class="absolute -translate-x-full opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100"
780            />
781        </div>
782    </div>
783</article>
784            
785        
786    </div>
787
788    
789        <div class="more-projects jos flex items-center justify-center mt-10 xl:mt-20">
790            <a class="relative pr-14 md:pr-24 pl-8 inline-flex items-center justify-center bg-primary py-[18px] font-bold leading-normal rounded-[50px] text-[1rem] shadow-[0px_5px_0_0] shadow-foreground hover:shadow-transparent transition-shadow 0.3s ease-in-out border-2 border-black" href="/our-projects/">
791                View all projects
792                <span class="absolute right-1.5 inline-flex size-[50px] items-center justify-center rounded-[50%] bg-background">
793                    <img src="/public/images/icons/arrow-right-icon.02ef6c9e96ee.svg"  alt="arrow-right-icon" width="30px" height="30px" />
794                </span >
795            </a>
796        </div>
797    
798</section>
799
800    
801
802<section class="section-process relative container py-16 lg:py-24">
803  <div
804    class="mx-auto mb-10 max-w-[650px] text-center md:mb-[60px] xl:mb-20 xl:max-w-[856px]"
805  >
806    <h2 class="jos">
807      Our
808      
809
810<span class="h2 font-heading">high-quality
811    <img
812        src="/public/images/icons/star-shape-icon.88b5a786bc5a.svg"
813        alt="star-shape-icon"
814        width="74px"
815        height="70px"
816        class="aspect-[74/70] w-8 md:w-10 lg:w-[57px] inline-block"
817    />
818</span>
819      working processes
820    </h2>
821  </div>
822
823  
824
825  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
826          <div
827            class="bg-white p-8 rounded-lg shadow-md transition-all duration-300 ease-in-out hover:shadow-xl hover:bg-gray-50"
828          >
829            <div class="text-3xl font-bold text-blue-500 mb-4">01</div>
830            <h3 class="text-2xl font-semibold mb-4 text-gray-800">Discover</h3>
831            <p class="text-gray-600 mb-4">
832              Understand your goals and vision through in-depth consultations
833            </p>
834            <div
835              class="w-12 h-1 bg-blue-500 transition-all duration-300 ease-in-out group-hover:w-16"
836            ></div>
837          </div>
838          <div
839            class="bg-white p-8 rounded-lg shadow-md transition-all duration-300 ease-in-out hover:shadow-xl hover:bg-gray-50"
840          >
841            <div class="text-3xl font-bold text-green-500 mb-4">02</div>
842            <h3 class="text-2xl font-semibold mb-4 text-gray-800">Create</h3>
843            <p class="text-gray-600 mb-4">
844              Design and develop your brand identity or website with precision
845            </p>
846            <div
847              class="w-12 h-1 bg-green-500 transition-all duration-300 ease-in-out group-hover:w-16"
848            ></div>
849          </div>
850          <div
851            class="bg-white p-8 rounded-lg shadow-md transition-all duration-300 ease-in-out hover:shadow-xl hover:bg-gray-50"
852          >
853            <div class="text-3xl font-bold text-purple-500 mb-4">03</div>
854            <h3 class="text-2xl font-semibold mb-4 text-gray-800">Deliver</h3>
855            <p class="text-gray-600 mb-4">
856              Launch your project and provide ongoing support and optimization
857            </p>
858            <div
859              class="w-12 h-1 bg-purple-500 transition-all duration-300 ease-in-out group-hover:w-16"
860            ></div>
861          </div>
862        </div>
863</section>
864
865    
866    <section class="section-text-slider overflow-hidden relative py-8">
867  <div class="bg-accent/50 py-5">
868    <div
869      class="horizontal-slide-from-right-to-left flex items-center gap-x-6"
870    >
871      <div
872        class="whitespace-nowrap font-heading text-[35px] font-bold leading-none tracking-[1px] text-foreground"
873      >
874        Let's create new experiences
875      </div>
876        
877
878<span class="h-10 min-w-[42px]">
879    <img
880        src="/public/images/icons/star-shape-icon.88b5a786bc5a.svg"
881        alt="star-shape-icon"
882        width="74px"
883        height="70px"
884        class="aspect-[74/70] w-8 md:w-10 lg:w-[57px] !h-10 !w-auto"
885    />
886</span>
887      
888      <div
889        class="whitespace-nowrap font-heading text-[35px] font-bold leading-none tracking-[1px] text-foreground"
890      >
891        Let's create new experiences
892      </div>
893      
894
895<span class="h-10 min-w-[42px]">
896    <img
897        src="/public/images/icons/star-shape-icon.88b5a786bc5a.svg"
898        alt="star-shape-icon"
899        width="74px"
900        height="70px"
901        class="aspect-[74/70] w-8 md:w-10 lg:w-[57px] !h-10 !w-auto"
902    />
903</span>
904
905      <div
906        class="whitespace-nowrap font-heading text-[35px] font-bold leading-none tracking-[1px] text-foreground"
907      >
908        Let's create new experiences
909      </div>
910      
911
912<span class="h-10 min-w-[42px]">
913    <img
914        src="/public/images/icons/star-shape-icon.88b5a786bc5a.svg"
915        alt="star-shape-icon"
916        width="74px"
917        height="70px"
918        class="aspect-[74/70] w-8 md:w-10 lg:w-[57px] !h-10 !w-auto"
919    />
920</span>
921
922      <div
923        class="whitespace-nowrap font-heading text-[35px] font-bold leading-none tracking-[1px] text-foreground"
924      >
925        Let's create new experiences
926      </div>
927      
928
929<span class="h-10 min-w-[42px]">
930    <img
931        src="/public/images/icons/star-shape-icon.88b5a786bc5a.svg"
932        alt="star-shape-icon"
933        width="74px"
934        height="70px"
935        class="aspect-[74/70] w-8 md:w-10 lg:w-[57px] !h-10 !w-auto"
936    />
937</span>
938      
939      <div
940        class="whitespace-nowrap font-heading text-[35px] font-bold leading-none tracking-[1px] text-foreground"
941      >
942        Let's create new experiences
943      </div>
944      
945
946<span class="h-10 min-w-[42px]">
947    <img
948        src="/public/images/icons/star-shape-icon.88b5a786bc5a.svg"
949        alt="star-shape-icon"
950        width="74px"
951        height="70px"
952        class="aspect-[74/70] w-8 md:w-10 lg:w-[57px] !h-10 !w-auto"
953    />
954</span>
955
956      <div
957        class="whitespace-nowrap font-heading text-[35px] font-bold leading-none tracking-[1px] text-foreground"
958      >
959        Let's create new experiences
960      </div>
961      
962
963<span class="h-10 min-w-[42px]">
964    <img
965        src="/public/images/icons/star-shape-icon.88b5a786bc5a.svg"
966        alt="star-shape-icon"
967        width="74px"
968        height="70px"
969        class="aspect-[74/70] w-8 md:w-10 lg:w-[57px] !h-10 !w-auto"
970    />
971</span>
972    </div>
973  </div>
974</section>
975
976    <section class="section-testimonial relative container py-16 lg:py-24">
977      <h2 class="jos mx-auto mb-10 max-w-[650px] text-center md:mb-[60px] xl:mb-20 xl:max-w-[856px]">
978        Kind words from
979        
980
981<span class="h2 font-heading">our partners
982    <img
983        src="/public/images/icons/star-shape-icon.88b5a786bc5a.svg"
984        alt="star-shape-icon"
985        width="74px"
986        height="70px"
987        class="aspect-[74/70] w-8 md:w-10 lg:w-[57px] inline-block"
988    />
989</span>
990      </h2>
991  
992        <ul class="grid grid-cols-1 gap-x-6 gap-y-[30px] md:grid-cols-2">
993          
994            
995
996<li class="jos"  data-jos_delay="0">
997    <div class="flex h-full flex-col rounded-[20px] border-2 border-black px-4 sm:px-[30px] py-3 sm:py-6 transition-all duration-300 hover:shadow-[5px_5px_0_0] hover:shadow-secondary hover:border-secondary">
998        <div class="mb-5 sm:mb-8 flex items-center -gap-1.5">
999        
1000            
1001
1002<img
1003    src="/public/images/icons/star-icon.7114ce0e91fa.svg"
1004    alt="icon-black-star"
1005    width="32px"
1006    height="30px"
1007/>
1008        
1009            
1010
1011<img
1012    src="/public/images/icons/star-icon.7114ce0e91fa.svg"
1013    alt="icon-black-star"
1014    width="32px"
1015    height="30px"
1016/>
1017        
1018            
1019
1020<img
1021    src="/public/images/icons/star-icon.7114ce0e91fa.svg"
1022    alt="icon-black-star"
1023    width="32px"
1024    height="30px"
1025/>
1026        
1027            
1028
1029<img
1030    src="/public/images/icons/star-icon.7114ce0e91fa.svg"
1031    alt="icon-black-star"
1032    width="32px"
1033    height="30px"
1034/>
1035        
1036            
1037
1038<img
1039    src="/public/images/icons/star-icon.7114ce0e91fa.svg"
1040    alt="icon-black-star"
1041    width="32px"
1042    height="30px"
1043/>
1044        
1045        </div>
1046        <h4 class="mb-3.5 lg:mb-5">Highly skilled team</h4>
1047        <p class="max-[576px]:leading-tight mb-5 lg:mb-7">The team delivered an outstanding web design experience. They managed to balance cutting-edge design with a strong focus on usability, which made our website easy to navigate while being visually appealing. From concept to completion, the team demonstrated their innovative approach to design, ensuring the final product met all our expectations. We couldn&#x27;t be more satisfied with the result.</p>
1048        <div class="mt-auto flex items-center gap-3">
1049            <div class="size-[70px] overflow-hidden rounded-[50%] border-2 border-black">
1050                <img
1051                src="https://cre8-market.vercel.app/favicon.ico"
1052                alt="Cre8 Market's avatar"
1053                width="64px"
1054                height="64px"
1055                class="h-full w-full object-cover"
1056                />
1057            </div>
1058
1059            <div class="flex-1">
1060                <span class="font-heading text-lg font-bold leading-none lg:text-[21px] block mb-1">Dumani Douglas</span>
1061                <span class="font-normal">Sales Manager</span>
1062            </div>
1063        </div>
1064    </div>
1065</li>
1066          
1067            
1068
1069<li class="jos"  data-jos_delay="0">
1070    <div class="flex h-full flex-col rounded-[20px] border-2 border-black px-4 sm:px-[30px] py-3 sm:py-6 transition-all duration-300 hover:shadow-[5px_5px_0_0] hover:shadow-secondary hover:border-secondary">
1071        <div class="mb-5 sm:mb-8 flex items-center -gap-1.5">
1072        
1073            
1074
1075<img
1076    src="/public/images/icons/star-icon.7114ce0e91fa.svg"
1077    alt="icon-black-star"
1078    width="32px"
1079    height="30px"
1080/>
1081        
1082            
1083
1084<img
1085    src="/public/images/icons/star-icon.7114ce0e91fa.svg"
1086    alt="icon-black-star"
1087    width="32px"
1088    height="30px"
1089/>
1090        
1091            
1092
1093<img
1094    src="/public/images/icons/star-icon.7114ce0e91fa.svg"
1095    alt="icon-black-star"
1096    width="32px"
1097    height="30px"
1098/>
1099        
1100            
1101
1102<img
1103    src="/public/images/icons/star-icon.7114ce0e91fa.svg"
1104    alt="icon-black-star"
1105    width="32px"
1106    height="30px"
1107/>
1108        
1109        </div>
1110        <h4 class="mb-3.5 lg:mb-5">Highly skilled designers</h4>
1111        <p class="max-[576px]:leading-tight mb-5 lg:mb-7">The team delivered an outstanding web design experience. They managed to balance cutting-edge design with a strong focus on usability, which made our website easy to navigate while being visually appealing. From concept to completion, the team demonstrated their innovative approach to design, ensuring the final product met all our expectations. We couldn&#x27;t be more satisfied with the result.</p>
1112        <div class="mt-auto flex items-center gap-3">
1113            <div class="size-[70px] overflow-hidden rounded-[50%] border-2 border-black">
1114                <img
1115                src="https://kiweewa-travels.vercel.app/favicon.png"
1116                alt="Kiweewa Travels's avatar"
1117                width="64px"
1118                height="64px"
1119                class="h-full w-full object-cover"
1120                />
1121            </div>
1122
1123            <div class="flex-1">
1124                <span class="font-heading text-lg font-bold leading-none lg:text-[21px] block mb-1">Rodrick Kiweewa</span>
1125                <span class="font-normal">Managing Director</span>
1126            </div>
1127        </div>
1128    </div>
1129</li>
1130          
1131            
1132
1133<li class="jos"  data-jos_delay="0">
1134    <div class="flex h-full flex-col rounded-[20px] border-2 border-black px-4 sm:px-[30px] py-3 sm:py-6 transition-all duration-300 hover:shadow-[5px_5px_0_0] hover:shadow-secondary hover:border-secondary">
1135        <div class="mb-5 sm:mb-8 flex items-center -gap-1.5">
1136        
1137            
1138
1139<img
1140    src="/public/images/icons/star-icon.7114ce0e91fa.svg"
1141    alt="icon-black-star"
1142    width="32px"
1143    height="30px"
1144/>
1145        
1146            
1147
1148<img
1149    src="/public/images/icons/star-icon.7114ce0e91fa.svg"
1150    alt="icon-black-star"
1151    width="32px"
1152    height="30px"
1153/>
1154        
1155            
1156
1157<img
1158    src="/public/images/icons/star-icon.7114ce0e91fa.svg"
1159    alt="icon-black-star"
1160    width="32px"
1161    height="30px"
1162/>
1163        
1164            
1165
1166<img
1167    src="/public/images/icons/star-icon.7114ce0e91fa.svg"
1168    alt="icon-black-star"
1169    width="32px"
1170    height="30px"
1171/>
1172        
1173            
1174
1175<img
1176    src="/public/images/icons/star-icon.7114ce0e91fa.svg"
1177    alt="icon-black-star"
1178    width="32px"
1179    height="30px"
1180/>
1181        
1182        </div>
1183        <h4 class="mb-3.5 lg:mb-5">Exceeded our expectations</h4>
1184        <p class="max-[576px]:leading-tight mb-5 lg:mb-7">I’m thoroughly impressed with the branding identity service. The team took the time to understand our brand&#x27;s vision and mission, and they created a strategy that speaks directly to our target audience. Their designs were not only visually appealing but strategically aligned with our business goals. I can’t recommend them enough for anyone looking to build or refresh their brand.</p>
1185        <div class="mt-auto flex items-center gap-3">
1186            <div class="size-[70px] overflow-hidden rounded-[50%] border-2 border-black">
1187                <img
1188                src="https://iceagegaming.vercel.app/logo.png"
1189                alt="Ice Age Gaming's avatar"
1190                width="64px"
1191                height="64px"
1192                class="h-full w-full object-cover"
1193                />
1194            </div>
1195
1196            <div class="flex-1">
1197                <span class="font-heading text-lg font-bold leading-none lg:text-[21px] block mb-1">Raymon Johns</span>
1198                <span class="font-normal">Business Manager</span>
1199            </div>
1200        </div>
1201    </div>
1202</li>
1203          
1204            
1205
1206<li class="jos"  data-jos_delay="0">
1207    <div class="flex h-full flex-col rounded-[20px] border-2 border-black px-4 sm:px-[30px] py-3 sm:py-6 transition-all duration-300 hover:shadow-[5px_5px_0_0] hover:shadow-secondary hover:border-secondary">
1208        <div class="mb-5 sm:mb-8 flex items-center -gap-1.5">
1209        
1210            
1211
1212<img
1213    src="/public/images/icons/star-icon.7114ce0e91fa.svg"
1214    alt="icon-black-star"
1215    width="32px"
1216    height="30px"
1217/>
1218        
1219            
1220
1221<img
1222    src="/public/images/icons/star-icon.7114ce0e91fa.svg"
1223    alt="icon-black-star"
1224    width="32px"
1225    height="30px"
1226/>
1227        
1228            
1229
1230<img
1231    src="/public/images/icons/star-icon.7114ce0e91fa.svg"
1232    alt="icon-black-star"
1233    width="32px"
1234    height="30px"
1235/>
1236        
1237            
1238
1239<img
1240    src="/public/images/icons/star-icon.7114ce0e91fa.svg"
1241    alt="icon-black-star"
1242    width="32px"
1243    height="30px"
1244/>
1245        
1246            
1247
1248<img
1249    src="/public/images/icons/star-icon.7114ce0e91fa.svg"
1250    alt="icon-black-star"
1251    width="32px"
1252    height="30px"
1253/>
1254        
1255        </div>
1256        <h4 class="mb-3.5 lg:mb-5">Creative and visionary</h4>
1257        <p class="max-[576px]:leading-tight mb-5 lg:mb-7">Working with this team was an absolute pleasure. They took our initial concepts and turned them into visually stunning designs. The attention to detail was incredible, and their creative solutions helped us reach a new level of brand identity. I can confidently say that their design work was a game-changer for us, and we couldn&#x27;t be happier with the outcome.</p>
1258        <div class="mt-auto flex items-center gap-3">
1259            <div class="size-[70px] overflow-hidden rounded-[50%] border-2 border-black">
1260                <img
1261                src="https://placehold.co/96x96/ede4d9/1a2e4f?text=Mora+Odyssey
1262Travels&amp;font=Montserrat"
1263                alt="Mora Odyssey Travels's avatar"
1264                width="64px"
1265                height="64px"
1266                class="h-full w-full object-cover"
1267                />
1268            </div>
1269
1270            <div class="flex-1">
1271                <span class="font-heading text-lg font-bold leading-none lg:text-[21px] block mb-1">Momo Odysseus</span>
1272                <span class="font-normal">Marketing Officer</span>
1273            </div>
1274        </div>
1275    </div>
1276</li>
1277          
1278        </ul>
1279    </section>
1280
1281    
1282</main>
1283
1284
1285        
1286
1287<section class="drawer" id="dumanimedia-s-drawer" data-drawer-target>
1288    <div class="drawer__overlay" data-drawer-close tabindex="-1"></div>
1289
1290    <div class="drawer__wrapper relative">
1291        <div class="drawer__header flex justify-between items-start">
1292            <a
1293                class="group flex flex-wrap items-center justify-start gap-2.5 hover:scale-[0.98] transition-all duration-300 flex-1"
1294                href="/"
1295            >
1296                <img
1297                src="/public/images/logo.51cbf1d2627d.svg"
1298                class="aspect-[50/17]"
1299                alt="dumani-media-logo"
1300                width="112px"
1301                />
1302            </a>
1303
1304            <button class="drawer__close border-none size-8 shrink-0 ml-2 text-foreground cursor-pointer p-1.5" data-drawer-close aria-label="Close Drawer">
1305                <svg width="15px" height="16px" viewBox="0 0 15 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="size-full"
1306                >
1307                    <g
1308                        id="Page-1"
1309                        stroke="none"
1310                        stroke-width="3"
1311                        fill="hsl(var(--foreground))"
1312                        fill-rule="evenodd"
1313                    >
1314                        <g
1315                        id="2.-Menu"
1316                        transform="translate(-15.000000, -13.000000)"
1317                        stroke="hsl(var(--foreground))"
1318                        >
1319                        <g id="Group" transform="translate(15.000000, 13.521000)">
1320                            <path
1321                            d="M0,0.479000129 L15,14.2971819"
1322                            id="Path-3"
1323                            ></path>
1324                            <path
1325                            d="M0,14.7761821 L15,-1.24344979e-14"
1326                            id="Path-3"
1327                            ></path>
1328                        </g>
1329                        </g>
1330                    </g>
1331                </svg>
1332            </button>
1333        </div>
1334        
1335        <div class="drawer__content size-full flex flex-col justify-between items-center gap-10 pb-6">
1336            <ul class="relative flex flex-col items-start justify-start w-full">
1337                <li class="border border-transparent block w-full">
1338                <a
1339                    class="block w-full relative text-[16px]/none font-bold leading-[50px] px-4 border-b border-foreground"
1340                    href="/about-us/"
1341                    >About Us</a
1342                >
1343                </li>
1344                <li class="border border-transparent block w-full">
1345                <a
1346                    class="block w-full relative text-[16px]/none font-bold leading-[50px] px-4 border-b border-foreground"
1347                    href="/services/"
1348                    >Services</a
1349                >
1350                </li>
1351                <li class="border border-transparent block w-full">
1352                <a
1353                    class="block w-full relative text-[16px]/none font-bold leading-[50px] px-4 border-b border-foreground"
1354                    href="/our-projects/"
1355                    >Our work</a
1356                >
1357                </li>
1358                <li class="border border-transparent block w-full">
1359                <a
1360                    class="block w-full relative text-[16px]/none font-bold leading-[50px] px-4 border-b border-foreground"
1361                    href="/faqs/"
1362                    >FAQs</a
1363                >
1364                </li>
1365                <li class="border border-transparent block w-full">
1366                <a
1367                    class="block w-full relative text-[16px]/none font-bold leading-[50px] px-4 border-b border-foreground"
1368                    href="/our-contact/"
1369                    >Contact</a
1370                >
1371                </li>
1372            </ul>
1373        </div>
1374    </div>
1375</section>
1376
1377        
1378
1379<footer class="section-footer relative bg-black">
1380    <div class="section-space py-16 lg:py-24">
1381        <div class="container">
1382            <div class="grid grid-cols-1 gap-x-10 gap-y-10 md:grid-cols-2 lg:grid-cols-[1fr_minmax(0,0.8fr)] lg:gap-x-20 xl:gap-x-24 2xl:gap-x-[139px]">
1383                <div>
1384                    <div class="section-block">
1385                        <h2 class="mb-6 flex flex-wrap items-center">
1386                            Let's start a
1387                            <span class="mx-2">
1388                            <img
1389                                src="/public/images/icons/star-shape-icon.88b5a786bc5a.svg"
1390                                alt="star-shape-icon"
1391                                width="74px"
1392                                height="70px"
1393                                class="relative inline-block h-auto w-8 after:bg-black md:w-10 lg:w-[57px]"
1394                            />
1395                            </span>
1396                            project together
1397                        </h2>
1398
1399                        <p class="section-para">
1400                            We work closely with our clients to understand their
1401                            objectives, target audience, and unique needs. We use our
1402                            creative skills to translate these requirements and practical
1403                            design solutions.
1404                        </p>
1405                    </div>
1406
1407                    <div class="grid grid-cols-[1fr_auto] items-center">
1408                        <div>
1409                            <ul class="mt-12 flex flex-col gap-y-3">
1410                                <li>
1411                                    <span
1412                                    class="block font-syne text-xl font-bold leading-[1.42] text-primary"
1413                                    >Give us a call:</span
1414                                    >
1415                                    <a href="tel:+256708083734" class="text-xl leading-[1.42]"
1416                                    >(256) 708-083734</a
1417                                    >
1418                                </li>
1419                                <li>
1420                                    <span
1421                                    class="block font-syne text-xl font-bold leading-[1.42] text-primary"
1422                                    >Send us an email:
1423                                    </span>
1424                                    <a
1425                                    href="mailto:[email protected]"
1426                                    class="text-xl leading-[1.42]"
1427                                    >[email protected]</a
1428                                    >
1429                                </li>
1430                            </ul>
1431
1432                            <div class="mt-11 flex w-full gap-4">
1433                                <a
1434                                    href="http://www.twitter.com"
1435                                    target="_blank"
1436                                    rel="noopener noreferrer"
1437                                    class="group/link relative inline-flex h-[34px] w-[34px] items-center justify-center rounded-[50%] border border-foreground bg-black transition-all duration-300 hover:border-foreground hover:bg-primary hover:shadow-[0_1.5px_0_0] hover:shadow-foreground"
1438                                >
1439                                    <img
1440                                    src="https://aximo-tailwind.netlify.app/assets/img/icons/icon-logo-buttery-white-twitter.svg"
1441                                    alt="icon-logo-buttery-white-twitter"
1442                                    width="19"
1443                                    height="16"
1444                                    class="opacity-100 transition-all duration-300 group-hover/link:opacity-0"
1445                                    />
1446                                    <img
1447                                    src="https://aximo-tailwind.netlify.app/assets/img/icons/icon-logo-black-twitter.svg"
1448                                    alt="icon-logo-black-twitter"
1449                                    width="19"
1450                                    height="16"
1451                                    class="absolute opacity-0 transition-all duration-300 group-hover/link:opacity-100"
1452                                    />
1453                                </a>
1454                                <a
1455                                    href="http://www.facebook.com"
1456                                    target="_blank"
1457                                    rel="noopener noreferrer"
1458                                    class="group/link relative inline-flex h-[34px] w-[34px] items-center justify-center rounded-[50%] border border-foreground bg-black transition-all duration-300 hover:border-foreground hover:bg-primary hover:shadow-[0_1.5px_0_0] hover:shadow-foreground"
1459                                >
1460                                    <img
1461                                    src="https://aximo-tailwind.netlify.app/assets/img/icons/icon-logo-buttery-white-facebook.svg"
1462                                    alt="icon-logo-buttery-white-facebook"
1463                                    width="10"
1464                                    height="17"
1465                                    class="opacity-100 transition-all duration-300 group-hover/link:opacity-0"
1466                                    />
1467                                    <img
1468                                    src="https://aximo-tailwind.netlify.app/assets/img/icons/icon-logo-black-facebook.svg"
1469                                    alt="icon-logo-black-facebook"
1470                                    width="10"
1471                                    height="17"
1472                                    class="absolute opacity-0 transition-all duration-300 group-hover/link:opacity-100"
1473                                    />
1474                                </a>
1475                                <a
1476                                    href="http://www.instagram.com"
1477                                    target="_blank"
1478                                    rel="noopener noreferrer"
1479                                    class="group/link relative inline-flex h-[34px] w-[34px] items-center justify-center rounded-[50%] border border-foreground bg-black transition-all duration-300 hover:border-foreground hover:bg-primary hover:shadow-[0_1.5px_0_0] hover:shadow-foreground"
1480                                >
1481                                    <img
1482                                    src="https://aximo-tailwind.netlify.app/assets/img/icons/icon-logo-buttery-white-instagram.svg"
1483                                    alt="icon-logo-buttery-white-instagram"
1484                                    width="17"
1485                                    height="18"
1486                                    class="opacity-100 transition-all duration-300 group-hover/link:opacity-0"
1487                                    />
1488                                    <img
1489                                    src="https://aximo-tailwind.netlify.app/assets/img/icons/icon-logo-black-instagram.svg"
1490                                    alt="icon-logo-black-instagram"
1491                                    width="17"
1492                                    height="18"
1493                                    class="absolute opacity-0 transition-all duration-300 group-hover/link:opacity-100"
1494                                    />
1495                                </a>
1496                                <a
1497                                    href="http://www.linkedin.com"
1498                                    target="_blank"
1499                                    rel="noopener noreferrer"
1500                                    class="group/link relative inline-flex h-[34px] w-[34px] items-center justify-center rounded-[50%] border border-foreground bg-black transition-all duration-300 hover:border-foreground hover:bg-primary hover:shadow-[0_1.5px_0_0] hover:shadow-foreground"
1501                                >
1502                                    <img
1503                                    src="https://aximo-tailwind.netlify.app/assets/img/icons/icon-logo-buttery-white-linkedin.svg"
1504                                    alt="icon-logo-buttery-white-linkedin"
1505                                    width="17"
1506                                    height="18"
1507                                    class="opacity-100 transition-all duration-300 group-hover/link:opacity-0"
1508                                    />
1509                                    <img
1510                                    src="https://aximo-tailwind.netlify.app/assets/img/icons/icon-logo-black-linkedin.svg"
1511                                    alt="icon-logo-black-linkedin"
1512                                    width="17"
1513                                    height="18"
1514                                    class="absolute opacity-0 transition-all duration-300 group-hover/link:opacity-100"
1515                                    />
1516                                </a>
1517                            </div>
1518                        </div>
1519                        <div class="hidden lg:inline-block">
1520                            <img src="/public/images/icons/line-curve-arrow.bc3d11964096.svg" alt="line-curve-arrow" width="284px" height="153px" class="h-auto max-w-52 lg:inline-block xl:max-w-full" />
1521                        </div>
1522                    </div>
1523                </div>
1524
1525                <div>
1526                    <h5 class="mb-7 block">Send us a message</h5>
1527                    <form hx-post="/our-contact/" hx-swap="none" hx-indicator=".htmx-indicator"  class="flex flex-col gap-y-6 [&:has(.htmx-request)]:opacity-50 [&:has(.htmx-request)]:pointer-events-none">
1528                        <input type="hidden" name="csrfmiddlewaretoken" value="DqQBBt7jEugtwDSrPYGpxmbJk79onYMJBG91L6Gd93P0JEeQ1f9IOLhH34G5ohJV">
1529                        <input
1530                            type="text"
1531                            placeholder="Full name"
1532                            name="full_name"
1533                            id="id_full_name"
1534                            class="w-full rounded-[50px] border border-foreground
1534/80 bg-transparent px-6 py-5 text-base font-bold leading-none text-foreground"
1535                            required
1536                        />
1537                        <input
1538                            type="email"
1539                            id="id_email"
1540                            name="email"
1541                            placeholder="email"
1542                            class="w-full rounded-[50px] border border-foreground/80 bg-transparent px-6 py-5 text-base font-bold leading-none text-foreground"
1543                            required
1544                        />
1545                        <select name="service" required="" id="id_service" class="w-full rounded-[50px] border border-foreground/80 bg-black text-foreground px-6 py-5 text-base font-bold leading-none">
1546                            <option value="" selected="">Select a Service</option>
1547                            <option value="brand-identity">Brand Identity</option>
1548                            <option value="web-design">Website Design</option>
1549                            <option value="graphics-design">Graphics Design</option>
1550                            <option value="web-development">Website Development</option>
1551                            <option value="brand-redesign">Brand Redesign</option>
1552                            <option value="other">Other</option>
1553                        </select>
1554                        <textarea
1555                            name="message"
1556                            cols="40"
1557                            rows="10"
1558                            minlength="10"
1559                            id="id_message"
1560                            placeholder="Write your message here..."
1561                            class="min-h-[100px] w-full rounded-[20px] border border-foreground
1561/80 bg-transparent px-6 py-5 text-base font-bold leading-none text-foreground"
1562                            required
1563                        ></textarea>
1564
1565                        <button
1566                            type="submit"
1567                            class="relative pr-14 md:pr-24 pl-8 inline-flex items-center justify-center bg-primary py-[18px] font-bold leading-normal rounded-[50px] text-[1rem] shadow-[0px_5px_0_0] shadow-foreground hover:shadow-transparent transition-shadow 0.3s ease-in-out border-2 border-black"
1568                        >
1569                            Send message
1570                            <span
1571                            class="absolute right-[5px] inline-flex h-[50px] w-[50px] items-center justify-center rounded-[50%] bg-black"
1572                            ><img
1573                                src="/public/images/icons/arrow-right-icon.02ef6c9e96ee.svg"
1574                                alt="icon-buttery-white-arrow-right"
1575                                width="34"
1576                                height="28"
1577                            /></span>
1578                        </button>
1579                    </form>
1580                </div>
1581            </div>
1582        </div>
1583    </div>
1584
1585    <div class="h-px w-full bg-foreground relative"></div>
1586
1587    <div class="relative container py-9">
1588        <div class="flex flex-wrap justify-center gap-x-[30px] gap-y-4 lg:justify-between">
1589            <a href="/">
1590                <img
1591                src="/public/images/logo.51cbf1d2627d.svg"
1592                class="aspect-[50/17]"
1593                alt="dumani-media-logo"
1594                width="112px"
1595                />
1596            </a>
1597
1598            <div class="text-foreground max-[576px]:text-center max-[576px]:text-[16px] max-[576px]:pr-[10%]">
1599                &copy; Copyright 2026, All Rights Reserved by Dumani Media
1600            </div>
1601        </div>
1602    </div>
1603</footer>
1604
1605        <ol id="notifications-container" aria-labelledby="notifications" class="fixed top-0 z-[1000] flex max-h-screen w-full flex-col-reverse px-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px] [&>li]:my-1.5">
1606            
1607        </ol>
1608    </body>
1609
1610    <button id="scroll-top-btn" aria-label="Scroll to top" class="bg-primary text-foreground rounded-full inline-flex items-center justify-center size-12 fixed right-3.5 md:right-7 left-auto" onclick="scrollToTop()">
1611        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up">
1612            <path d="m5 12 7-7 7 7"></path><path d="M12 19V5"></path>
1613        </svg>
1614    </button>
1615
1616    
1616<script src="/public/js/jos.min.b6db622a2b2c.js"></script>
1616
1617    
1617<script src="/public/js/main.e5e2cd3741ae.js"></script>
1617
1618    
1618<script src="/public/js/htmx.min.48e021f096c4.js"></script>
1618
1619    
1619<script src="/public/js/alpine.min.8f3851a0199a.js"></script>
1619
1620
1621    
1622<script src="/public/js/counterup.69062fab07c2.js" type="module"></script>
vendor: 1 bytes, line 1622
1622
1623<script src="/public/js/fslightbox.b2706b60a0b6.js"></script>
1623
1624
1625    
1625<script type="application/ld+json">
1626        {
1627          "@context": "https://schema.org",
1628          "@type": "Organization",
1629          "name": "Dumani Media",
1630          "foundingDate": "2023",
1631          "url": "https://dumanimedia.com",
1632        "founder": {
1633            "@type": "Person",
1634            "name": "Mayinja Douglas"
1635          },
1636          "description": "Establish a strong brand that align with your values and mission with our digital, interactive, and creative solutions. Explore how we can help you today!",
1637            "logo": "https://dumanimedia.com/public/images/logo.svg"
1638          "sameAs": [
1639            "https://www.instagram.com/dumanimedia",
1640            "https://dribbble.com/dumanimedia",
1641            "https://www.linkedin.com/in/dumanimedia",
1642            "https://www.youtube.com/@dumanimedia",
1643            "https://www.behance.net/dumanimedia",
1644            "https://github.com/dumanimedia"
1645          ],
1646        "makesOffer": [
1647            {
1648              "@type": "Offer",
1649              "itemOffered": {
1650                "@type": "Service",
1651                "name": "Brand Identity Design"
1652              }
1653            },
1654            {
1655              "@type": "Offer",
1656              "itemOffered": {
1657                "@type": "Service",
1658                "name": "UX/UI Design"
1659              }
1660            },
1661            {
1662              "@type": "Offer",
1663              "itemOffered": {
1664                "@type": "Service",
1665                "name": "Web Design"
1666              }
1667            },
1668            {
1669              "@type": "Offer",
1670              "itemOffered": {
1671                "@type": "Service",
1672                "name": "Web Development"
1673              }
1674            },
1675            {
1676              "@type": "Offer",
1677              "itemOffered": {
1678                "@type": "Service",
1679                "name": "Digital Media Solutions"
1680              }
1681            }
1682          ],
1683        "contactPoint": [
1684            {
1685              "@type": "ContactPoint",
1686              "telephone": "+256-708-083734",
1687              "contactType": "customer service",
1688              "areaServed": "UG",
1689              "availableLanguage": ["English"]
1690            }
1691          ],
1692          "address": {
1693            "@type": "PostalAddress",
1694            "addressCountry": "UG",
1695            "addressLocality": "Entebbe"
1696          }
1697        }
1698    </script>
1698
1699</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.