Files
TokslawMain/app/Views/services.php
T
2025-02-18 20:31:57 -05:00

1018 lines
80 KiB
PHP
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="Tokslaw, Toks Lawal, Tokunbo Lawal">
<meta name="author" content="Tokslaw, Toks Lawal, Tokunbo Lawal">
<meta name="description" content="Tokslaw, Product Architect,Robust background in software development and cybersecurity, honed through dedicated service in the US Army. Specializing in leveraging event-driven architecture and advanced methodologies to craft resilient, scalable, and efficient microservices architectures.">
<meta property="og:title" content="Tokslaw"
<meta property="og:description" content="Tokslaw, Product Architect,Robust background in software development and cybersecurity, honed through dedicated service in the US Army. Specializing in leveraging event-driven architecture and advanced methodologies to craft resilient, scalable, and efficient microservices architectures.">
<meta property="og:type" content="website">
<meta property="og:image" content="./assets/images/common/og-image.jpg">
<link rel="stylesheet" href="./assets/vendors/liquid-icon/lqd-essentials/lqd-essentials.min.css">
<link rel="stylesheet" href="./assets/css/theme.min.css">
<link rel="stylesheet" href="./assets/css/utility.min.css">
<link rel="stylesheet" href="./assets/css/extra.css">
<link rel="stylesheet" href="./assets/css/demo/start-hub-8/base.css">
<link rel="stylesheet" href="./assets/css/demo/start-hub-8/start-hub-8.css">
<!-- Fonts -->
<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=Be+Vietnam+Pro:wght@400;500;700&family=Libre+Baskerville:ital@1&family=Space+Grotesk:wght@600;700&display=swap" rel="stylesheet">
<title>Tokslaw</title>
</head>
<body data-localscroll-offset="55" data-lqd-cc="true" data-mobile-nav-breakpoint="1199" data-mobile-nav-style="modern" data-mobile-nav-scheme="dark" data-mobile-nav-trigger-alignment="right" data-mobile-header-scheme="gray" data-mobile-logo-alignment="default" data-overlay-onmobile="false" data-disable-animations-onmobile="true">
<div class="bg-white" id="wrap">
<div class="titlebar bg-transparent border-bottom border-gray-100" id="titlebar" style="background-image: linear-gradient(180deg, #FF00C414 0%, #FFFFFF 100%);">
<div class="lqd-sticky-placeholder hidden"></div>
<header id="site-header" class="main-header" data-sticky-header="true" data-sticky-values-measured="false" data-sticky-options='{"disableOnMobile": true}'>
<div class="lqd-hide-onstuck module-top py-10 px-35 border-bottom border-black-10 bg-white md:hidden module-header">
<div class="container-fluid">
<div class="flex flex-wrap w-full justify-between items-center">
<div class="flex w-55percent justify-start">
<div class="px-5 bg-lightgray mr-15 ld-fancy-heading relative">
<h6 class="ld-fh-element relative text-11 m-0 text-black">Update </h6>
</div>
<div class="mr-15 ld-fancy-heading relative">
<p class="ld-fh-element relative text-13 m-0">About Tokslaw👋</p>
</div>
<a href="#" class="text-13 text-text btn btn-naked btn-icon-right btn-hover-swp btn-has-label">
<span data-text="Learn more" class="btn-txt">Learn more </span>
<span class="btn-icon">
<i aria-hidden="true" class="lqd-icn-ess icon-ion-ios-arrow-forward"></i>
</span>
<span class="btn-icon mr-10">
<i aria-hidden="true" class="lqd-icn-ess icon-ion-ios-arrow-forward"></i>
</span>
</a>
</div>
<div class="flex w-45percent justify-end">
<div class="flex flex-row gap-25 w-auto mr-30">
<span class="grid-item inline-flex text-18 leading-20 w-20 h-20">
<a href="#" class="icon social-icon hover:svg-black" target="_blank">
<span class="sr-only">Facebook-square</span>
<svg class="w-1em h-1em block relative e-font-icon-svg e-fab-facebook-square" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg">
<path d="M400 32H48A48 48 0 0 0 0 80v352a48 48 0 0 0 48 48h137.25V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.27c-30.81 0-40.42 19.12-40.42 38.73V256h68.78l-11 71.69h-57.78V480H400a48 48 0 0 0 48-48V80a48 48 0 0 0-48-48z" fill="#B4B6C6"></path>
</svg>
</a>
</span>
<span class="grid-item inline-flex text-18 leading-20 w-20 h-20">
<a href="#" class="icon social-icon hover:svg-black" target="_blank">
<span class="sr-only">Twitter</span>
<svg class="w-1em h-1em block relative e-font-icon-svg e-fab-twitter" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z" fill="#B4B6C6"></path>
</svg>
</a>
</span>
<span class="grid-item inline-flex text-18 leading-20 w-20 h-20">
<a href="#" class="icon social-icon hover:svg-black" target="_blank">
<span class="sr-only">Github</span>
<svg class="w-1em h-1em block relative e-font-icon-svg e-fab-github" viewBox="0 0 496 512" xmlns="http://www.w3.org/2000/svg">
<path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" fill="#B4B6C6"></path>
</svg>
</a>
</span>
</div>
<div class="mr-30 lqd-fancy-menu lqd-custom-menu relative lqd-menu-td-none">
<ul class="reset-ul inline-ul link-13 link-black">
<li class="mr-30">
<a href="#" target="_self">
<span class="link-icon hide-if-empty left-icon icon-next-to-label"></span>
Privacy Policy
</a>
</li>
<li>
<a href="#" target="_self">
<span class="link-icon hide-if-empty left-icon icon-next-to-label"></span>
Contact
</a>
</li>
</ul>
</div>
<div class="ld-dropdown-menu flex relative" role="menubar">
<span class="ld-module-trigger" role="button" data-ld-toggle="true" data-bs-toggle="collapse" data-bs-target="#dropdown-select-language" aria-controls="dropdown-select-language" aria-expanded="false" data-toggle-options='{ "type": "hoverFade" }'>
<span class="ld-module-trigger-txt text-14 text-black">🇺🇸 English <i class="lqd-icn-ess icon-ion-ios-arrow-down"></i></span>
</span>
<div class="ld-module-dropdown left collapse absolute" id="dropdown-select-language" aria-expanded="false" role="menuitem">
<div class="link-black ld-dropdown-menu-content">
<ul>
<li><a>Dutch</a></li>
<li><a>French</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="border-bottom border-black-10 px-35 py-0 bg-white md:hidden module-header">
<div class="container-fluid">
<div class="flex justify-between items-center w-full">
<div class="flex w-60percent lg:w-75percent">
<div class="py-10 pr-35 module-logo flex navbar-brand-plain">
<a class="navbar-brand flex p-0 relative" href="./index-start-hub-8.html" rel="home">
<span class="navbar-brand-inner post-rel">
<img class="logo-default" src="./assets/images/demo/start-hub-8/tokslaw-logo-.svg" alt="Tokslaw">
</span>
</a>
</div>
<div class="module-primary-nav flex">
<div class="navbar-collapse inline-flex p-0 lqd-submenu-default-style" id="main-header-collapse" aria-expanded="false" role="navigation">
<ul id="primary-nav" class="link-13 link-font-medium link-leading-2em link-black-80 main-nav flex reset-ul inline-ul lqd-menu-counter-right lqd-menu-items-inline main-nav-hover-fill" data-submenu-options='{"toggleType": "fade", "handler": "mouse-in-out"}' data-localscroll="true" data-localscroll-options='{"itemsSelector":"> li > a", "trackWindowScroll": true, "includeParentAsOffset": true}'>
<li>
<a href="/" class="py-15 pr-60">Home</a>
</li>
<li>
<a href="<?= $_SERVER['REQUEST_SCHEME'] . '://' . $_SERVER['HTTP_HOST'] . '/services'; ?>">Services</a>
</li>
<li>
<a href="#solutions" class="py-15 pr-60">
Solutions
<span class="link-icon inline-flex hide-if-empty right-icon">
<i class="lqd-icn-ess icon-ion-ios-arrow-down"></i>
</span>
</a>
</li>
<!-- <li>-->
<!-- <a href="./page-start-hub-8-contact.html" class="py-15 pr-60">-->
<!-- Contact-->
<!-- <span class="link-badge text-badge">NEW</span>-->
<!-- </a>-->
<!-- </li>-->
<li>
<a href="<?= $_SERVER['REQUEST_SCHEME'] . '://' . $_SERVER['HTTP_HOST'] . '/about'; ?>">About</a>
</li>
<li>
<a href="<?= $_SERVER['REQUEST_SCHEME'] . '://' . $_SERVER['HTTP_HOST'] . '/portfolio'; ?>">Portfolio</a>
</li>
</ul>
</div>
</div>
</div>
<div class="flex w-40percent justify-end lg:w-25percent">
<div class="mr-10 ld-module-search lqd-module-search-slide-top flex items-center " data-module-style='lqd-search-style-slide-top'>
<span class="text-black-50 ld-module-trigger collapsed lqd-module-trigger-txt-left lqd-module-show-icon lqd-module-icon-outline" role="button" data-ld-toggle="true" data-bs-toggle="collapse" data-bs-target="#search-header" aria-controls="search-header" aria-expanded="false">
<span class="ld-module-trigger-txt"></span>
<span class="ld-module-trigger-icon">
<i class="text-18 lqd-icn-ess icon-ld-search-2"></i>
</span>
</span>
<div class="ld-module-dropdown collapse flex w-full flex-col fixed overflow-hidden backface-hidden" id="search-header" aria-expanded="false" role="form">
<div class="ld-search-form-container flex flex-col justify-center h-full mx-auto backface-hidden" role="searchbox">
<form role="search" method="get" action="#" class="ld-search-form w-full">
<input class="w-full" type="search" placeholder="Search" value="" name="s">
<span class="input-icon inline-flex items-center justify-center absolute" role="search" data-ld-toggle="true" data-bs-toggle="collapse" data-bs-target="#search-header" aria-controls="search-header" aria-expanded="false">
<i class="lqd-icn-ess icon-ld-search"></i>
</span>
<input type="hidden" name="post_type" value="post">
</form>
<p class="lqd-module-search-info">Type and hit enter</p>
</div>
</div>
</div>
<a href="#contact-modal" class="btn btn-naked btn-icon-left btn-icon-circle btn-icon-custom-size btn-icon-solid mr-15 text-14 tracking-0/1 text-purple-500 lg:mr-0" data-lity="#contact-modal">
<span data-text="Join the community" class="btn-txt">Join the community </span>
<span class="btn-icon mr-10 w-35 h-35 bg-purple-500 rounded-full">
<svg class="text-14" xmlns="http://www.w3.org/2000/svg" width="19.25" height="19.25" viewBox="0 0 19.25 19.25">
<path d="M-5.581-5.711V-7.733H-7.6A2.027,2.027,0,0,0-9.625-5.711,2.027,2.027,0,0,0-7.6-3.688,2.027,2.027,0,0,0-5.581-5.711Zm1.019,0V-.647A2.027,2.027,0,0,0-2.539,1.375,2.027,2.027,0,0,0-.517-.647V-5.711A2.027,2.027,0,0,0-2.539-7.733,2.027,2.027,0,0,0-4.562-5.711Zm2.022-8.12H-.517v-2.022a2.027,2.027,0,0,0-2.022-2.022,2.027,2.027,0,0,0-2.022,2.022A2.027,2.027,0,0,0-2.539-13.831Zm0,1.019H-7.6a2.027,2.027,0,0,0-2.022,2.022A2.027,2.027,0,0,0-7.6-8.767h5.063A2.027,2.027,0,0,0-.517-10.789,2.027,2.027,0,0,0-2.539-12.812Zm8.12,2.022v2.022H7.6a2.027,2.027,0,0,0,2.022-2.022A2.027,2.027,0,0,0,7.6-12.812,2.027,2.027,0,0,0,5.581-10.789Zm-1.019,0v-5.063a2.027,2.027,0,0,0-2.022-2.022A2.027,2.027,0,0,0,.517-15.853v5.063A2.027,2.027,0,0,0,2.539-8.767,2.027,2.027,0,0,0,4.562-10.789ZM2.539-2.669H.517V-.647A2.027,2.027,0,0,0,2.539,1.375,2.027,2.027,0,0,0,4.562-.647,2.027,2.027,0,0,0,2.539-2.669Zm0-1.019H7.6A2.027,2.027,0,0,0,9.625-5.711,2.027,2.027,0,0,0,7.6-7.733H2.539A2.027,2.027,0,0,0,.517-5.711,2.027,2.027,0,0,0,2.539-3.688Z" transform="translate(9.625 17.875)" fill="#fff"></path>
</svg>
</span>
</a>
<a href="#contact-modal" class="btn btn-solid btn-hover-txt-switch-change btn-hover-txt-switch btn-hover-txt-switch-y btn-icon-right bg-blue-700 text-13 text-white font-medium rounded-100 shadow-md module-btn-sm lg:hidden" data-lity="#contact-modal">
<span data-text="Get the App" class="btn-txt" data-transition-delay="true" data-delay-options='{"elements": ".lqd-chars" , "delayType": "animation" , "startDelay": 0, "delayBetween": 32.5}' data-split-text="true" data-split-options='{"type": "chars, words"}'> Get the App </span>
<span class="btn-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="8.75" height="8.75" viewBox="0 0 8.75 8.75">
<path d="M2.926-9.324H8.75V-3.5H7.574V-7.355L.82-.574,0-1.395,6.754-8.176H2.926Z" transform="translate(0 9.324)" fill="#fff"></path>
</svg>
</span>
</a>
</div>
</div>
</div>
</div>
<div class="lqd-stickybar-wrap lqd-stickybar-right flex flex-row items-end justify-start pointer-events-none md:hidden">
<a href="#contact-modal" class="btn btn-solid btn-custom-size btn-icon-right pointer-events-auto w-60 h-60 bg-white text-black rounded-full" data-lity="#contact-modal">
<span class="btn-icon text-black">
<i aria-hidden="true" class="lqd-icn-ess icon-lqd-pen"></i>
</span>
</a>
</div>
<div class="lqd-mobile-sec relative">
<div class="lqd-mobile-sec relative">
<div class="lqd-mobile-sec-inner navbar-header flex items-stretch w-full">
<div class="lqd-mobile-modules-container empty"></div>
<button type="button" class="navbar-toggle collapsed nav-trigger style-mobile flex relative items-center justify-end border-none bg-transparent" data-ld-toggle="true" data-bs-toggle="collapse" data-bs-target="#lqd-mobile-sec-nav" aria-expanded="false" data-toggle-options='{ "changeClassnames": {"html": "mobile-nav-activated"} }'>
<span class="sr-only">Menu</span>
<span class="bars inline-block relative z-1">
<span class="bars-inner flex flex-col w-full h-full">
<span class="bar inline-block"></span>
<span class="bar inline-block"></span>
<span class="bar inline-block"></span>
</span>
</span>
</button>
<a class="navbar-brand flex relative" href="./index-start-hub-8.html">
<span class="navbar-brand-inner">
<img class="logo-default" src="./assets/images/demo/start-hub-8/tokslaw-logo-.svg" alt="Tokslaw">
</span>
</a>
</div>
<div class="lqd-mobile-sec-nav w-full absolute z-10">
<div class="mobile-navbar-collapse navbar-collapse collapse w-full" id="lqd-mobile-sec-nav" aria-expanded="false" role="navigation">
<ul id="mobile-primary-nav" class="reset-ul lqd-mobile-main-nav main-nav nav" data-localscroll="true" data-localscroll-options='{"itemsSelector":"> li > a", "trackWindowScroll": true, "includeParentAsOffset": true}'>
<li>
<a href="./page-start-hub-8-services.html" class="py-15 pr-60">
Services
<span class="link-icon inline-flex hide-if-empty right-icon">
<i class="lqd-icn-ess icon-ion-ios-arrow-down"></i>
</span>
</a>
</li>
<li>
<a href="./page-start-hub-8-projects.html" class="py-15 pr-60">Projects</a>
</li>
<li>
<a href="#solutions" class="py-15 pr-60">
Solutions
<span class="link-icon inline-flex hide-if-empty right-icon">
<i class="lqd-icn-ess icon-ion-ios-arrow-down"></i>
</span>
</a>
</li>
<li>
<a href="./page-start-hub-8-contact.html" class="py-15 pr-60">
Contact
<span class="link-badge text-badge">NEW</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</header>
<div class="titlebar-inner">
<div class="container titlebar-container">
<div class="row titlebar-container justify-center">
<div class="col titlebar-col col-xl-6 col-lg-8 col-12 text-center">
<h1>Services</h1>
<p class="leading-20 text-gray-400">Investing in the digital future and resources.</p>
</div>
</div>
</div>
</div>
</div>
<main class="contant relative transition-all z-2" id="lqd-site-content" style="background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(249,248,245,1) 100%);">
<div class="lqd-contents-wrap">
<!-- Start Design -->
<section class="lqd-section design pt-100 pb-40" data-custom-animations="true" data-ca-options='{"animationTarget": ".animation-element, figure, .lqd-split-lines .lqd-lines .split-inner", "duration" : 1100 , "startDelay" : 200 , "delay" : 100 , "ease": "expo.out", "initValues": {"y": "80px", "opacity" : 0} , "animations": {"y": "0px", "opacity" : 1}}'>
<div class="absolute top-0">
<div class="ld-particles-container relative w-full">
<div class="ld-particles-inner lqd-overlay flex pointer-events-none" id="lqd-particle-design-services" data-particles="true" data-particles-options='{"particles": {"number": {"value" : 5} , "color": {"value" : ["#604CFD", "#F85976", "#FDA44C", "#A2B2C9"]} , "shape": {"type" : ["circle"]} , "opacity": {"value" : 1} , "size": {"value" : 2} , "move": {"enable": true, "direction": "right", "random": true, "out_mode": "out"}} , "interactivity": {"detect_on": "window", "events": {"onhover": {"enable": true, "mode" : ["bubble"]}} , "modes": {"bubble": {"size" : 15}}} , "retina_detect": true}'></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="w-450 flex flex-col relative items-center max-w-full text-center mx-auto px-15">
<div class="ld-fancy-heading relative w-auto py-5 px-15 bg-gray rounded-100 animation-element">
<h6 class="ld-fh-element relative text-12 uppercase tracking-1 text-slate-500 m-0">Design services</h6>
</div>
<div class="ld-fancy-heading relative mask-text">
<h2 class="ld-fh-element relative lqd-highlight-classic lqd-highlight-grow-bottom lqd-highlight-reset-onhover lqd-split-lines mb-0/5em mt-0/25em" data-inview="true" data-transition-delay="true" data-delay-options='{"elements": ".lqd-highlight-inner", "delayType": "transition"}' data-split-text="true" data-split-options='{"type": "lines"}'>
Research
<mark class="lqd-highlight">
<span class="lqd-highlight-txt">and</span>
<span class="bottom-0 left-0 lqd-highlight-inner bg-purple-200"></span>
</mark>
Development.
</h2>
</div>
<div class="absolute -top-5percent -left-10percent module-shape">
<div class="lqd-imggrp-single block relative">
<div class="lqd-imggrp-img-container inline-flex relative items-center justify-center">
<figure class="w-full relative">
<img width="67" height="73" src="./assets/images/demo/start-hub-4/services/Shape.svg" alt="shape">
</figure>
</div>
</div>
</div>
<div class="ld-fancy-heading relative mask-text">
<p class="ld-fh-element relative lqd-split-lines text-17 leading-1/3em" data-split-text="true" data-split-options='{"type": "lines"}'> Hub is a graphic and digital studio that designs and develops eCommerce websites, apps and tailor-made digital solutions.</p>
</div>
</div>
<div class="col col-12 flex gap-35 sm:flex-wrap module-iconbox sm:gap-0">
<div class="max-w-full animation-element">
<div class="m-0 py-50 pr-65 pl-45 rounded-20 text-start lqd-iconbox-scale transition-all">
<div class="iconbox flex flex-grow-1 relative flex-col iconbox-default iconbox-contents-show-onhover" data-slideelement-onhover="true" data-slideelement-options='{ "visibleElement": ".iconbox-icon-wrap, p, h3" , "hiddenElement": ".btn" , "alignMid": true, "triggerElement": ".lqd-iconbox-scale" }'>
<div class="iconbox-icon-wrap">
<div class="w-35 text-36 mb-40 text-36 mb-40 iconbox-icon-container inline-flex text-black">
<svg xmlns="http://www.w3.org/2000/svg" width="34.578" height="34.578" viewBox="0 0 34.578 34.578">
<path d="M1922.288,3873.563a17.289,17.289,0,1,1,17.289-17.289A17.239,17.239,0,0,1,1922.288,3873.563Zm8.415-26.406c-.07,0-.141.071-.211.071l-12.623,4.208a.632.632,0,0,0-.42.421l-4.208,12.622a.258.258,0,0,0-.07.211.662.662,0,0,0,.7.7c.071,0,.14-.07.211-.07l12.623-4.208a.634.634,0,0,0,.421-.421l4.207-12.623a.255.255,0,0,0,.07-.21A.663.663,0,0,0,1930.7,3847.157Zm-8.1,11.317a2.515,2.515,0,1,1,2.515-2.515A2.515,2.515,0,0,1,1922.6,3858.474Z" transform="translate(-1904.999 -3838.985)"></path>
</svg>
</div>
</div>
<h3 class="text-22 mb-0/75em lqd-iconbox-heading">Brand Strategy </h3>
<div class="contents">
<p class="text-13 leading-1/25em">Our design services starts and ends with a best-in-class experience strategy that builds brands. We create world-class digital products materials that </p>
<a href="#contact-modal" class="btn btn-underlined border-thin btn-icon-right btn-hover-reveal text-black before:bg-black" data-lity="#contact-modal">
<span class="btn-txt" data-text="Nos valeurs">Learn More</span>
<span class="btn-icon">
<i class="lqd-icn-ess icon-ion-ios-arrow-forward"></i>
</span>
</a>
</div>
</div>
</div>
</div>
<div class="max-w-full animation-element">
<div class="m-0 py-50 pr-65 pl-45 rounded-20 text-start lqd-iconbox-scale transition-all">
<div class=" iconbox flex flex-grow-1 relative flex-col iconbox-default iconbox-contents-show-onhover" data-slideelement-onhover="true" data-slideelement-options='{ "visibleElement": ".iconbox-icon-wrap, p, h3" , "hiddenElement": ".btn" , "alignMid": true, "triggerElement": ".lqd-iconbox-scale" }'>
<div class="iconbox-icon-wrap">
<div class="w-35 text-36 mb-40 iconbox-icon-container inline-flex text-black">
<svg xmlns="http://www.w3.org/2000/svg" width="37.171" height="37.172" viewBox="0 0 37.171 37.172">
<path d="M2602.153,3857.568a3.684,3.684,0,0,0-2.223-3.291,3.953,3.953,0,0,1-2.462-5.953,3.552,3.552,0,0,0-4.658-4.658,3.947,3.947,0,0,1-5.948-2.461,3.553,3.553,0,0,0-6.589,0,3.947,3.947,0,0,1-5.948,2.461,3.551,3.551,0,0,0-4.658,4.658,3.957,3.957,0,0,1-2.461,5.953,3.549,3.549,0,0,0,0,6.584,3.951,3.951,0,0,1,2.461,5.948,3.551,3.551,0,0,0,4.658,4.659,3.95,3.95,0,0,1,5.948,2.465,3.554,3.554,0,0,0,6.589,0,3.947,3.947,0,0,1,5.948-2.465,3.552,3.552,0,0,0,4.658-4.659,3.948,3.948,0,0,1,2.462-5.948A3.692,3.692,0,0,0,2602.153,3857.568Zm-18.586,6.82a6.816,6.816,0,1,1,6.812-6.812A6.813,6.813,0,0,1,2583.568,3864.388Z" transform="translate(-2564.982 -3838.982)"></path>
</svg>
</div>
</div>
<h3 class="text-22 mb-0/75em lqd-iconbox-heading">Development </h3>
<div class="contents">
<p class="text-13 leading-1/25em">We craft premium digital work for web, mobile and experiential with creative agencies and global brands alike putting passion, pride and plenty of elbow </p>
<a href="#contact-modal" class="btn btn-underlined border-thin btn-icon-right btn-hover-reveal text-black before:bg-black" data-lity="#contact-modal">
<span class="btn-txt" data-text="Nos valeurs">Learn More</span>
<span class="btn-icon">
<i class="lqd-icn-ess icon-ion-ios-arrow-forward"></i>
</span>
</a>
</div>
</div>
</div>
</div>
<div class="max-w-full animation-element">
<div class="py-50 pr-65 pl-45 rounded-20 m-0 text-start lqd-iconbox-scale transition-all">
<div class=" iconbox flex flex-grow-1 relative flex-col iconbox-default iconbox-contents-show-onhover" data-slideelement-onhover="true" data-slideelement-options='{ "visibleElement": ".iconbox-icon-wrap, p, h3" , "hiddenElement": ".btn" , "alignMid": true, "triggerElement": ".lqd-iconbox-scale" }'>
<div class="iconbox-icon-wrap">
<div class="w-35 text-36 mb-40 iconbox-icon-container inline-flex text-black">
<svg xmlns="http://www.w3.org/2000/svg" width="27.435" height="32.77" viewBox="0 0 27.435 32.77">
<path d="M2264.9,3864.935a1.872,1.872,0,0,1-1.383.969H2239.9a1.869,1.869,0,0,1-1.385-.969c-1.349-2.566.236-3.989,1.087-4.754a3.907,3.907,0,0,0,.838-.915c.015-.023.023-.041.033-.057.608-1,.83-3.413.961-4.856.02-.214.038-.418.057-.611,0-.016,0-.034.006-.052a17.656,17.656,0,0,1,2.864-7.749,9.087,9.087,0,0,1,4.739-3.535,2.616,2.616,0,0,1,5.215,0,9.1,9.1,0,0,1,4.74,3.536,17.631,17.631,0,0,1,2.862,7.741c0,.026.005.044.007.062.019.191.039.4.058.609.133,1.444.353,3.859.958,4.851.015.025.028.047.038.067a3.967,3.967,0,0,0,.838.911C2264.668,3860.946,2266.251,3862.37,2264.9,3864.935Zm-16,3.641h5.515a.691.691,0,0,1,.562.263.927.927,0,0,1,.13.764c0,.013-.005.025-.007.036a3.405,3.405,0,0,1-6.775.124l0-.023a1.173,1.173,0,0,1,.116-.935A.588.588,0,0,1,2248.9,3868.575Z" transform="translate(-2237.991 -3839.995)"></path>
</svg>
</div>
</div>
<h3 class="text-22 mb-0/75em lqd-iconbox-heading">Mobile Apps </h3>
<div class="contents">
<p class="text-13 leading-1/25em">We marry creative insight with data to deliver successful user experiences. Through a process of iteration and prototyping, we design interfaces that </p>
<a href="#contact-modal" class="btn btn-underlined border-thin btn-icon-right btn-hover-reveal text-black before:bg-black" data-lity="#contact-modal">
<span class="btn-txt" data-text="Nos valeurs">Learn More</span>
<span class="btn-icon">
<i class="lqd-icn-ess icon-ion-ios-arrow-forward"></i>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col col-12 text-center mt-35">
<div class="w-full flex flex-wrap items-center justify-center transition-all">
<div class="module-text-border border-1 rounded-20 border-black-10 transition-all ld-fancy-heading relative hover:inner-text-black animation-element">
<p class="ld-fh-element relative inner-text-black py-10 px-20 m-0 text-slate-300">
Still have a question?
<a href="#" class="text-slate-300 inner-text-black" target="_blank">
<u>Browse documentation</u>
</a>
or
<a href="#contact-modal" class="text-slate-300 inner-text-black" data-lity="#contact-modal">
<u>Contact.</u>
</a>
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End Design -->
<!-- Start Services -->
<section class="lqd-section our-vision pt-50 pb-390" id="solutions">
<div class="container">
<div class="row">
<div class="col col-12 lqd-unit-animation-done" style="">
<div class="w-full relative flex flex-col flex-grow-1 pt-40 pb-10 mb-50 border-bottom border-black module-line">
<div class="container-fluid p-0">
<div class="row items-center">
<div class="col col-2 animation-element lqd-unit-animation-done" style="">
<div class="w-30percent relative flex border-top border-black-50">
</div>
</div>
<div class="col col-8 animation-element lqd-unit-animation-done" style="">
<h6 class="ld-fh-element mb-0/5em text-12 uppercase tracking-0/01em font-normal text-black">Our services</h6>
</div>
<div class="col col-2 text-end sm:text-start animation-element lqd-unit-animation-done" style="">
<h6 class="ld-fh-element mb-0/5em text-12 font-normal">01</h6>
</div>
</div>
</div>
</div>
</div>
<div class="col col-12 col-md-6 lqd-unit-animation-done" style="">
<div class="lqd-imggrp-container relative mb-2em transition-all ca-initvalues-applied lqd-animations-done" data-custom-animations="true" data-ca-options="{&quot;triggerHandler&quot;:&quot;inview&quot;,&quot;animationTarget&quot;:&quot;.lqd-imggrp-single&quot;,&quot;duration&quot;:&quot;1800&quot;,&quot;delay&quot;:&quot;160&quot;,&quot;ease&quot;:&quot;power4.out&quot;,&quot;direction&quot;:&quot;forward&quot;,&quot;initValues&quot;:{&quot;y&quot;:65,&quot;scaleY&quot;:1.1,&quot;opacity&quot;:0},&quot;animations&quot;:{&quot;y&quot;:0,&quot;scaleY&quot;:1,&quot;opacity&quot;:1}}">
<div class="lqd-imggrp-inner flex flex-wrap justify-center">
<div class="lqd-imggrp-single block absolute top-10percent left-0 lqd-unit-animation-done" data-shadow-style="4" style="">
<div class="lqd-imggrp-img-container">
<figure><img width="205" height="218" src="./assets/images/demo/asymmetric-agency/our-approach/what-we-do-1.jpg" alt="what we do"></figure>
</div>
</div>
<div class="lqd-imggrp-single block absolute top-5percent right-0 lqd-unit-animation-done" data-shadow-style="4" style="">
<div class="lqd-imggrp-img-container">
<figure><img width="230" height="269" src="./assets/images/demo/asymmetric-agency/our-approach/what-we-do-3.jpg" alt="what we do"></figure></div></div><div class="lqd-imggrp-single block relative mt-140 module-img lqd-unit-animation-done" data-shadow-style="4" style="">
<div class="lqd-imggrp-img-container">
<figure>
<img width="240" height="311" src="./assets/images/demo/asymmetric-agency/our-approach/what-we-do-2.jpg" alt="what we do"></figure>
</div>
</div>
</div>
</div>
</div>
<div class="col col-12 col-md-6 lqd-unit-animation-done" style="">
<div class="module-content relative flex flex-col items-start pr-5percent pl-15percent lg:pr-0">
<p class="ld-fh-element mb-0/5em text-12 uppercase tracking-0/05em text-black">What we do</p>
<h2 class="ld-fh-element mb-0/4em text-65 leading-0/8em text-black text-init">Product Strategy</h2>
<p class="ld-fh-element mb-2em text-16 leading-1/6em text-black">Through a deep understanding of our audiences makeup and motivations, we design digital experiences that connect with people.</p>
<div class="w-full relative">
<div class="flex flex-wrap -mx-15 mb-50 md:mb-0">
<div class="w-50percent px-15 sm:w-full">
<div class="one-bullet-list mb-1em">
<ul class="reset-ul module-list">
<li class="flex items-center mb-0/5em text-black">Web Development</li>
<li class="flex items-center mb-0/5em text-black">Brand Strategy</li>
<li class="flex items-center mb-0/5em text-black">Art Direction</li>
<li class="flex items-center mb-0/5em text-black">Graphic Design</li>
<li class="flex items-center mb-0/5em text-black">Print Design</li>
<li class="flex items-center mb-0/5em text-black">Motion Graphics</li>
</ul>
</div>
</div>
<div class="w-50percent px-15 sm:w-full">
<div class="one-bullet-list mb-1em">
<ul class="reset-ul module-list">
<li class="flex items-center mb-0/5em text-black">Content Management</li>
<li class="flex items-center mb-0/5em text-black">Brand Strategy</li>
<li class="flex items-center mb-0/5em text-black">WordPress</li>
<li class="flex items-center mb-0/5em text-black">SEO Analytics</li>
<li class="flex items-center mb-0/5em text-black">Copywriting</li>
<li class="flex items-center mb-0/5em text-black">Mobile App Design</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<section class="lqd-section approach pt-40 pb-90 ca-initvalues-applied lqd-animations-done" id="approach" data-custom-animations="true" data-ca-options="{&quot;triggerHandler&quot;:&quot;inview&quot;,&quot;animationTarget&quot;:&quot;.col&quot;,&quot;duration&quot;:&quot;1800&quot;,&quot;delay&quot;:&quot;160&quot;,&quot;ease&quot;:&quot;power4.out&quot;,&quot;direction&quot;:&quot;forward&quot;,&quot;initValues&quot;:{&quot;x&quot;:30,&quot;transformOriginX&quot;:50,&quot;transformOriginY&quot;:50,&quot;transformOriginZ&quot;:&quot;0px&quot;,&quot;opacity&quot;:0},&quot;animations&quot;:{&quot;x&quot;:0,&quot;transformOriginX&quot;:50,&quot;transformOriginY&quot;:50,&quot;transformOriginZ&quot;:&quot;0px&quot;,&quot;opacity&quot;:1}}" data-section-luminosity="light"><div class="container">
<div class="row">
<div class="col col-12 col-md-4 lqd-unit-animation-done" style="">
<div class="w-full relative flex flex-col flex-grow-1 pr-25percent mb-15 lg:pr-0">
<div class="ld-fancy-heading ld-fh-pos-abs lqd-exclude-parent-ca ld-fh-outline ld-fh-outline-static relative z-0">
<p class="ld-fh-element absolute -top-0/1em right-0 mb-0/5em text-192 leading-1em text-transparent">
<span class="ld-fh-txt-outline">1</span> 1</p>
</div>
<p class="ld-fh-element relative mb-0/5em text-14 uppercase tracking-0/1em text-black">STEP 1</p>
<h2 class="ld-fh-element relative mb-0/7em leading-1/1em font-normal">Wireframe Design.</h2>
<p class="ld-fh-element relative mb-0/5em text-16 leading-1/6em text-black">Tailor made digital products and creative solutions for small businesses and freelancers.</p>
</div>
</div>
<div class="col col-12 col-md-4 lqd-unit-animation-done" style="">
<div class="w-full relative flex flex-col flex-grow-1 pr-25percent mb-15 lg:pr-0">
<div class="ld-fancy-heading ld-fh-pos-abs lqd-exclude-parent-ca ld-fh-outline ld-fh-outline-static relative z-0">
<p class="ld-fh-element absolute -top-0/1em right-0 mb-0/5em text-192 leading-1em text-transparent">
<span class="ld-fh-txt-outline">2</span> 2</p>
</div>
<p class="ld-fh-element relative mb-0/5em text-14 uppercase tracking-0/1em text-black">STEP 2</p>
<h2 class="ld-fh-element relative mb-0/7em leading-1/1em font-normal">Web App Development</h2>
<p class="ld-fh-element relative mb-0/5em text-16 leading-1/6em text-black">Our web development starts and ends with a best-in-class experience strategy.</p>
</div>
</div>
<div class="col col-12 col-md-4 lqd-unit-animation-done" style="">
<div class="w-full relative flex flex-col flex-grow-1 pr-25percent mb-15 lg:pr-0">
<div class="ld-fancy-heading ld-fh-pos-abs lqd-exclude-parent-ca ld-fh-outline ld-fh-outline-static relative z-0">
<p class="ld-fh-element absolute -top-0/1em right-0 mb-0/5em text-192 leading-1em text-transparent">
<span class="ld-fh-txt-outline">3</span> 3</p>
</div><p class="ld-fh-element relative mb-0/5em text-14 uppercase tracking-0/1em text-black">STEP 3</p>
<h2 class="ld-fh-element relative mb-0/7em leading-1/1em font-normal">Launch and maintain.</h2>
<p class="ld-fh-element relative mb-0/5em text-16 leading-1/6em text-black">We look to engage with our clients beyond the conventional design and agency relationship,</p>
</div>
</div>
</div>
</div>
</section>
<!-- End Services -->
<!-- Start Our Vision -->
<section class="lqd-section our-vision pt-50 pb-390">
<div class="absolute w-full max-w-full bottom-0 ltr-left-0">
<div class="lqd-throwable-scene relative pointer-events-none overflow-hidden" data-lqd-throwable-scene>
<p class="lqd-throwable-element inline-block absolute top-0 left-0 whitespace-nowrap m-0 pointer-events-auto user-select-none module-text-1" data-lqd-throwable-el>
<span class="lqd-throwable-element-rot inline-block text-22 font-semibold leading-1/8em py-0/25em px-1/5em text-black rounded-100 bg-orange-200 sm:text-16">Elementor Support</span>
</p>
<p class="lqd-throwable-element inline-block absolute top-0 left-0 whitespace-nowrap m-0 pointer-events-auto user-select-none module-text-2" data-lqd-throwable-el>
<span class="lqd-throwable-element-rot inline-block text-22 font-semibold leading-1/8em py-0/25em px-1/5em text-black rounded-100 bg-blue-100 sm:text-16">Mobile Builder</span>
</p>
<p class="lqd-throwable-element inline-block absolute top-0 left-0 whitespace-nowrap m-0 pointer-events-auto user-select-none module-text-3" data-lqd-throwable-el>
<span class="lqd-throwable-element-rot inline-block text-22 font-semibold leading-1/8em py-0/25em px-1/5em text-black rounded-100 bg-green-200 sm:text-16">Top-Notch Performance</span>
</p>
<p class="lqd-throwable-element inline-block absolute top-0 left-0 whitespace-nowrap m-0 pointer-events-auto user-select-none module-text-4" data-lqd-throwable-el>
<span class="lqd-throwable-element-rot inline-block text-22 font-semibold leading-1/8em py-0/25em px-1/5em text-black rounded-100 bg-blue-300 sm:text-16">Next-gen Technologies</span>
</p>
<p class="lqd-throwable-element inline-block absolute top-0 left-0 whitespace-nowrap m-0 pointer-events-auto user-select-none module-text-5" data-lqd-throwable-el>
<span class="lqd-throwable-element-rot inline-block text-22 font-semibold leading-1/8em py-0/25em px-1/5em text-black rounded-100 bg-blue-200 sm:text-16">WooCommerce Builder</span>
</p>
<p class="lqd-throwable-element inline-block absolute top-0 left-0 whitespace-nowrap m-0 pointer-events-auto user-select-none module-text-6" data-lqd-throwable-el>
<span class="lqd-throwable-element-rot inline-block text-22 font-semibold leading-1/8em py-0/25em px-1/5em text-black rounded-100 bg-green-500 sm:text-16">Adaptive Colors</span>
</p>
<p class="lqd-throwable-element inline-block absolute top-0 left-0 whitespace-nowrap m-0 pointer-events-auto user-select-none module-text-7" data-lqd-throwable-el>
<span class="lqd-throwable-element-rot inline-block text-22 font-semibold leading-1/8em py-0/25em px-1/5em text-black rounded-100 bg-orange-300 sm:text-16">Section Flow</span>
</p>
<p class="lqd-throwable-element inline-block absolute top-0 left-0 whitespace-nowrap m-0 pointer-events-auto user-select-none module-text-8" data-lqd-throwable-el>
<span class="lqd-throwable-element-rot inline-block text-22 font-semibold leading-1/8em py-0/25em px-1/5em text-black rounded-100 bg-green-500 sm:text-16">Text Reveal</span>
</p>
</div>
</div>
</section>
<!-- End Our Vision -->
<!-- Start Clients -->
<section class="lqd-section clients pt-100 pb-140" data-custom-animations="true" data-ca-options='{"animationTarget": ".lqd-split-lines .lqd-lines .split-inner, .carousel-container", "duration" : 1000 , "delay" : 100 , "ease": "expo.out", "initValues": {"y": "60px", "opacity" : 0} , "animations": {"y": "0px", "opacity" : 1}}'>
<div class="container-fluid">
<div class="row">
<div class="col col-12 text-center">
<div class="ld-fancy-heading relative mask-text">
<p class="ld-fh-element relative lqd-split-lines h3 leading-1/5em text-24 mb-2em" data-split-text="true" data-split-options='{"type": "lines"}'> Trusted by global brands. <span class="text-slate-400">Join Millions of customers around the globe.</span></p>
</div>
</div>
<div class="col col-12">
<div class="carousel-container relative carousel-nav-shaped">
<div class="carousel-items relative" data-lqd-flickity='{"marquee": true, "marqueeTickerSpeed": "1", "pauseAutoPlayOnHover": false}'>
<div class="col col-6 col-xl-3 px-30 carousel-item flex flex-col justify-center">
<div class="carousel-item-inner relative w-full">
<div class="carousel-item-content relative w-full">
<img width="96" height="29" src="./assets/images/demo/start-hub-4/services/client-amazon.svg" alt="amazon">
</div>
</div>
</div>
<div class="col col-6 col-xl-3 px-30 carousel-item flex flex-col justify-center">
<div class="carousel-item-inner relative w-full">
<div class="carousel-item-content relative w-full">
<img width="87" height="20" src="./assets/images/demo/start-hub-4/services/client-amd-logo.svg" alt="amd">
</div>
</div>
</div>
<div class="col col-6 col-xl-3 px-30 carousel-item flex flex-col justify-center">
<div class="carousel-item-inner relative w-full">
<div class="carousel-item-content relative w-full">
<img width="127" height="24" src="./assets/images/demo/start-hub-4/services/client-dropcam.svg" alt="dropcam">
</div>
</div>
</div>
<div class="col col-6 col-xl-3 px-30 carousel-item flex flex-col justify-center">
<div class="carousel-item-inner relative w-full">
<div class="carousel-item-content relative w-full">
<img width="84" height="36" src="./assets/images/demo/start-hub-4/services/client-marvel.svg" alt="marvel">
</div>
</div>
</div>
<div class="col col-6 col-xl-3 px-30 carousel-item flex flex-col justify-center">
<div class="carousel-item-inner relative w-full">
<div class="carousel-item-content relative w-full">
<img width="76" height="27" src="./assets/images/demo/start-hub-4/services/client-nike.svg" alt="nike">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End Clients -->
</div>
</main>
<div class="lqd-top-scrol-ind fixed top-0 left-0 z-100 w-full pointer-events-none" data-lqd-scroll-indicator="true" data-scrl-indc-options='{"scale": true, "dir": "x" , "end": "bottom bottom" , "origin": "left"}' style="background: rgb(249, 249, 249);">
<span class="lqd-scrl-indc-inner block lqd-overlay flex">
<span class="lqd-scrl-indc-line block lqd-overlay flex">
<span class="lqd-scrl-indc-el block lqd-overlay flex" style="background: linear-gradient(90deg, #9f51e0 0%, #8297de 100%)"></span>
</span>
</span>
</div>
<footer id="site-footer" class="main-footer bg-transparent py-70" style="background-image: linear-gradient(170deg, #2D3140 0%, #19272C 100%);">
<div class="container">
<div class="flex flex-wrap">
<div class="w-20percent mb-30 sm:w-50percent">
<div class="ld-fancy-heading relative">
<h6 class="ld-fh-element relative mb-3em text-10 font-bold tracking-1 text-white-40 uppercase">COMPANY</h6>
</div>
<nav class="link-white-80 lqd-fancy-menu lqd-custom-menu relative lqd-menu-td-none">
<ul class="reset-ul">
<li class="mb-15">
<a href="#">
Contact Us
</a>
</li>
<li class="mb-15">
<a href="#">
FAQ
</a>
</li>
<li class="mb-15">
<a href="#">
Careers
</a>
</li>
<li>
<a href="#">
About Us
</a>
</li>
</ul>
</nav>
</div>
<div class="w-20percent mb-30 sm:w-50percent">
<div class="ld-fancy-heading relative">
<h6 class="ld-fh-element relative mb-3em text-10 font-bold tracking-1 text-white-40 uppercase">SUPPORT</h6>
</div>
<nav class="link-white-80 lqd-fancy-menu lqd-custom-menu relative lqd-menu-td-none">
<ul class="reset-ul">
<li class="mb-15">
<a href="#">
Privacy Policy
</a>
</li>
<li class="mb-15">
<a href="#">
Jobs
</a>
</li>
<li class="mb-15">
<a href="#">
Linkedin
</a>
</li>
<li>
<a href="#">
Community
</a>
</li>
</ul>
</nav>
</div>
<div class="w-20percent mb-30 sm:w-full">
<div class="ld-fancy-heading relative">
<h6 class="ld-fh-element relative mb-3em text-10 font-bold tracking-1 text-white-40 uppercase">NEED HELP?</h6>
</div>
<div class="ld-fancy-heading relative">
<h6 class="ld-fh-element inline-block relative mb-0/5em text-9 uppercase tracking-1 text-white-30">CALL US DIRECTLY</h6>
</div>
<div class="ld-fancy-heading relative">
<p class="ld-fh-element relative mb-1/65em text-18 font-medium text-white">(404)203-8915</p>
</div>
<div class="ld-fancy-heading relative">
<h6 class="ld-fh-element inline-block relative mb-0/5em text-9 uppercase tracking-1 text-white-30">CALL US DIRECTLY</h6>
</div>
<div class="ld-fancy-heading relative">
<p class="ld-fh-element relative mb-1/65em text-18 font-medium text-white">info@tokslaw.com</p>
</div>
</div>
<div class="w-35percent mb-30 ml-5percent text-center sm:w-full lg:m-0">
<div class="flex flex-col justify-center items-center pt-45 pb-60 px-45 mb-2percent rounded-20 border-1 border-white-10 sm:ml-0 module-border">
<div class="ld-fancy-heading relative">
<h4 class="ld-fh-element mb-1/75em relative text-18 text-white">
<span class="text-1/5em mr-0/25em">🎉</span>
Join my community
</h4>
</div>
<div class="ld-fancy-heading relative">
<p class="ld-fh-element relative mb-1/5em text-16 leading-20 text-white-40 hover:text-white-80">Bring your ideas to life an intuitive visual editor. Create, edit, and </p>
</div>
<a href="#contact-modal" target="_blank" rel="nofollow" class="btn btn-solid btn-md btn-hover-txt-switch-change btn-hover-txt-switch btn-hover-txt-switch-y btn-icon-shaped bg-green-50 text-green-400 rounded-100" data-lity="#contact-modal">
<span data-text="Join the community" class="btn-txt" data-transition-delay="true" data-delay-options='{"elements": ".lqd-chars" , "delayType": "animation" , "startDelay": 0, "delayBetween": 32.5}' data-split-text="true" data-split-options='{"type": "chars, words"}'> Join the community </span>
</a>
</div>
</div>
<div class="w-50percent mt-55 flex items-center sm:w-full sm:flex-col module-copyright">
<div class="mr-20 lqd-imggrp-single block relative">
<div class="lqd-imggrp-img-container inline-flex relative items-center justify-center">
<figure class="w-full relative">
<img width="106" height="32" src="./assets/images/demo/start-hub-8/tokslaw-logo-.svg" alt="Tokslaw">
</figure>
</div>
</div>
<div class="ld-fancy-heading relative">
<p class="ld-fh-element relative m-0 text-14 text-white-60">© 2025 Tokslaw.</p>
</div>
</div>
<div class="w-50percent mt-55 text-end sm:text-start sm:w-full module-social">
<div class="social-icons-wrapper shape-circle flex-wrap gap-30 gap-y-0">
<span class="grid-item">
<a href="#" class="icon social-icon social-icon-gitlab" target="_blank">
<span class="sr-only">Gitlab</span>
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<path d="M105.2 24.9c-3.1-8.9-15.7-8.9-18.9 0L29.8 199.7h132c-.1 0-56.6-174.8-56.6-174.8zM.9 287.7c-2.6 8 .3 16.9 7.1 22l247.9 184-226.2-294zm160.8-88l94.3 294 94.3-294zm349.4 88l-28.8-88-226.3 294 247.9-184c6.9-5.1 9.7-14 7.2-22zM425.7 24.9c-3.1-8.9-15.7-8.9-18.9 0l-56.6 174.8h132z" fill="#FFFFFFB0"></path>
</svg>
</a>
</span>
<span class="grid-item">
<a href="#" class="icon social-icon social-icon-instagram" target="_blank">
<span class="sr-only">Instagram</span>
<svg viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg">
<path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z" fill="#FFFFFFB0"></path>
</svg>
</a>
</span>
<span class="grid-item">
<a href="#" class="icon social-icon social-icon-spotify" target="_blank">
<span class="sr-only">Spotify</span>
<svg viewBox="0 0 496 512" xmlns="http://www.w3.org/2000/svg">
<path d="M248 8C111.1 8 0 119.1 0 256s111.1 248 248 248 248-111.1 248-248S384.9 8 248 8zm100.7 364.9c-4.2 0-6.8-1.3-10.7-3.6-62.4-37.6-135-39.2-206.7-24.5-3.9 1-9 2.6-11.9 2.6-9.7 0-15.8-7.7-15.8-15.8 0-10.3 6.1-15.2 13.6-16.8 81.9-18.1 165.6-16.5 237 26.2 6.1 3.9 9.7 7.4 9.7 16.5s-7.1 15.4-15.2 15.4zm26.9-65.6c-5.2 0-8.7-2.3-12.3-4.2-62.5-37-155.7-51.9-238.6-29.4-4.8 1.3-7.4 2.6-11.9 2.6-10.7 0-19.4-8.7-19.4-19.4s5.2-17.8 15.5-20.7c27.8-7.8 56.2-13.6 97.8-13.6 64.9 0 127.6 16.1 177 45.5 8.1 4.8 11.3 11 11.3 19.7-.1 10.8-8.5 19.5-19.4 19.5zm31-76.2c-5.2 0-8.4-1.3-12.9-3.9-71.2-42.5-198.5-52.7-280.9-29.7-3.6 1-8.1 2.6-12.9 2.6-13.2 0-23.3-10.3-23.3-23.6 0-13.6 8.4-21.3 17.4-23.9 35.2-10.3 74.6-15.2 117.5-15.2 73 0 149.5 15.2 205.4 47.8 7.8 4.5 12.9 10.7 12.9 22.6 0 13.6-11 23.3-23.2 23.3z" fill="#FFFFFFB0"></path>
</svg>
</a>
</span>
<span class="grid-item">
<a href="#" class="icon social-icon social-icon-facebook" target="_blank">
<span class="sr-only">Facebook</span>
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<path d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z" fill="#FFFFFFB0"></path>
</svg>
</a>
</span>
<span class="grid-item">
<a href="#" class="icon social-icon social-icon-twitter" target="_blank">
<span class="sr-only">Twitter</span>
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z" fill="#FFFFFFB0"></path>
</svg>
</a>
</span>
<span class="grid-item">
<a href="#" class="icon social-icon social-icon-medium" target="_blank">
<span class="sr-only">Medium</span>
<svg viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg">
<path d="M0 32v448h448V32H0zm372.2 106.1l-24 23c-2.1 1.6-3.1 4.2-2.7 6.7v169.3c-.4 2.6.6 5.2 2.7 6.7l23.5 23v5.1h-118V367l24.3-23.6c2.4-2.4 2.4-3.1 2.4-6.7V199.8l-67.6 171.6h-9.1L125 199.8v115c-.7 4.8 1 9.7 4.4 13.2l31.6 38.3v5.1H71.2v-5.1l31.6-38.3c3.4-3.5 4.9-8.4 4.1-13.2v-133c.4-3.7-1-7.3-3.8-9.8L75 138.1V133h87.3l67.4 148L289 133.1h83.2v5z" fill="#FFFFFFB0"></path>
</svg>
</a>
</span>
</div>
</div>
</div>
</div>
</footer>
</div>
<!-- Contact Modal -->
<div id="contact-modal" class="lity-modal lqd-modal lity-hide" data-modal-type="fullscreen">
<div class="lqd-modal-inner">
<div class="lqd-modal-head"></div>
<section class="lqd-section lqd-modal-content link-black bg-center bg-cover bg-norepeat" style="background-image: url(./assets/images/common/modal-bg.jpeg);">
<div class="container min-h-100vh flex items-center flex-wrap">
<div class="w-55percent relative flex flex-col sm:w-full">
<div class="flex flex-col items-start justify-center py-10 pr-100 pl-10 module-content">
<div class="ld-fancy-heading">
<h2 class="ld-fh-element mb-0/5em text-120 text-black leading-0/8em font-medium">Send a message.</h2>
</div>
<div class="ld-fancy-heading">
<p class="ld-fh-element mb-0/5em text-18">We're here to answer any question you may have.</p>
</div>
<div class="spacer w-full sm:hidden">
<div class="w-full h-140"></div>
</div>
<div class="w-full flex flex-row flex-grow-1 gap-10 module-info">
<div class="w-50percent flex flex-col gap-10">
<div class="ld-fancy-heading relative">
<h6 class="ld-fh-element relative mb-0/5em text-14 font-bold text-black mb-0/5em tracking-0">careers</h6>
</div>
<div class="ld-fancy-heading relative">
<p class="ld-fh-element relative mb-0/5em text-16 leading-1/2em mb-0/5em">Would you like to join our growing team?</p>
</div>
<div class="ld-fancy-heading relative">
<p class="ld-fh-element relative mb-0/5em">
<a href="#" class="text-16 font-bold leading-1/2em">careers@tokslaw.com </a>
</p>
</div>
</div>
<div class="w-50percent flex flex-col gap-10 pl-15 sm:pl-0">
<div class="ld-fancy-heading relative">
<h6 class="ld-fh-element relative mb-0/5em text-14 font-bold text-black mb-0/5em tracking-0">Feedbacks</h6>
</div>
<div class="ld-fancy-heading relative">
<p class="ld-fh-element relative mb-0/5em text-16 leading-1/2em mb-0/5em">Have a project in mind? Send a message.</p>
</div>
<div class="ld-fancy-heading relative">
<p class="ld-fh-element relative mb-0/5em">
<a href="#" class="text-16 font-bold leading-1/2em">info@tokslaw.com </a>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="w-45percent relative flex flex-col sm:w-full p-10 module-form">
<div class="lqd-contact-form lqd-contact-form-inputs-underlined lqd-contact-form-button-lg lqd-contact-form-button-block p-10 sm:p-0">
<div role="form">
<div class="screen-reader-response">
<p role="status" aria-live="polite" aria-atomic="true"></p>
</div>
<form action="./assets/php/mailer.php" method="post" class="lqd-cf-form" novalidate="novalidate" data-status="init">
<div class="row -mr-15 -ml-15">
<div class="col col-md-6 px-15">
<p>
<span class="lqd-form-control-wrap text">
<input class="text-13 text-black border-black-20 bg-transparent" type="text" name="name" value="" size="40" aria-required="true" aria-invalid="false" placeholder="What's your name?">
</span>
</p>
</div>
<div class="col col-md-6 px-15">
<p>
<span class="lqd-form-control-wrap email">
<input class="text-13 text-black border-black-20 bg-transparent" type="email" name="email" value="" size="40" aria-required="true" aria-invalid="false" placeholder="Email address">
</span>
</p>
</div>
<div class="col col-md-6 px-15">
<p>
<span class="lqd-form-control-wrap tel">
<input class="text-13 text-black border-black-20 bg-transparent" type="text" name="topic" value="" size="40" aria-required="true" aria-invalid="false" placeholder="Select a Discussion Topic">
</span>
</p>
</div>
<div class="col col-md-6 px-15">
<p>
<span class="lqd-form-control-wrap text">
<input class="text-13 text-black border-black-20 bg-transparent" type="text" name="budget" value="" size="40" aria-required="true" aria-invalid="false" placeholder="What's your budget?">
</span>
</p>
</div>
<div class="col col-md-12 px-15">
<p>
<span class="lqd-form-control-wrap textarea">
<textarea class="text-13 text-black border-black-20 bg-transparent" name="message" cols="10" rows="6" aria-required="true" aria-invalid="false" placeholder="Tell us about your project"></textarea>
</span>
</p>
</div>
<div class="col col-md-12 px-15">
<span class="lqd-form-control-wrap acceptance">
<span class="lqd-cf-form-control lqd-cf-acceptance">
<span class="lqd-cf-list-item">
<label>
<input type="checkbox" name="acceptance" value="1" aria-invalid="false">
<span class="lqd-cf-list-item-label">I am bound by the terms of the Service I accept Privacy Policy</span>
</label>
</span>
</span>
</span>
</div>
<div class="col col-md-12 text-center px-15">
<input type="submit" value="Send message" class="lqd-cf-form-control text-16 uppercase font-medium leading-1em tracking-1 font-bold bg-primary text-white border-none">
</div>
</div>
</form>
<div class="lqd-cf-response-output"></div>
</div>
</div>
</div>
</div>
</section>
<div class="lqd-modal-foot"></div>
</div>
</div>
<!-- Contact Modal -->
<script src="./assets/vendors/jquery.min.js"></script>
<script src="./assets/vendors/jquery-ui/jquery-ui.min.js"></script>
<script src="./assets/vendors/bootstrap/js/bootstrap.min.js"></script>
<script src="./assets/vendors/gsap/minified/gsap.min.js"></script>
<script src="./assets/vendors/gsap/utils/SplitText.min.js"></script>
<script src="./assets/vendors/gsap/minified/ScrollTrigger.min.js"></script>
<script src="./assets/vendors/fastdom/fastdom.min.js"></script>
<script src="./assets/vendors/isotope/isotope.pkgd.min.js"></script>
<script src="./assets/vendors/isotope/packery-mode.pkgd.min.js"></script>
<script src="./assets/vendors/flickity/flickity.pkgd.min.js"></script>
<script src="./assets/vendors/imagesloaded.pkgd.min.js"></script>
<script src="./assets/vendors/draggabilly.pkgd.min.js"></script>
<script src="./assets/vendors/fontfaceobserver.js"></script>
<script src="./assets/vendors/particles.min.js"></script>
<script src="./assets/vendors/lity/lity.min.js"></script>
<script src="./assets/vendors/lottie/lottie.min.js"></script>
<script src="./assets/vendors/section-flow/liquidSectionFlow.min.js"></script>
<script src="./assets/vendors/matter/matter.min.js"></script>
<script src="./assets/vendors/throwable/liquidThrowable.min.js"></script>
<script src="./assets/vendors/gsap/minified/DrawSVGPlugin.min.js"></script>
<script src="./assets/vendors/draw-shape/liquidDrawShape.min.js"></script>
<script src="./assets/js/liquid-gdpr.min.js"></script>
<script src="./assets/js/theme.min.js"></script>
<script src="./assets/js/liquid-ajax-contact-form.min.js"></script>
<script src="./assets/js/demo/start-hub-8.js"></script>
<!-- Start custom cursor -->
<div class="lqd-cc lqd-cc--inner fixed pointer-events-none"></div>
<div class="lqd-cc--el lqd-cc-solid lqd-cc-explore flex items-center justify-center rounded-full fixed pointer-events-none">
<div class="lqd-cc-solid-bg flex absolute lqd-overlay"></div>
<div class="lqd-cc-solid-txt flex justify-center text-center relative">
<div class="lqd-cc-solid-txt-inner">Explide</div>
</div>
</div>
<div class="lqd-cc--el lqd-cc-solid lqd-cc-drag flex items-center justify-center rounded-full fixed pointer-events-none">
<div class="lqd-cc-solid-bg flex absolute lqd-overlay"></div>
<div class="lqd-cc-solid-ext lqd-cc-solid-ext-left inline-flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" style="width: 1em; height: 1em;">
<path fill="currentColor" d="M19.943 6.07L9.837 14.73a1.486 1.486 0 0 0 0 2.25l10.106 8.661c.96.826 2.457.145 2.447-1.125V7.195c0-1.27-1.487-1.951-2.447-1.125z"></path>
</svg>
</div>
<div class="lqd-cc-solid-txt flex justify-center text-center relative">
<div class="lqd-cc-solid-txt-inner">Drag</div>
</div>
<div class="lqd-cc-solid-ext lqd-cc-solid-ext-right inline-flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" style="width: 1em; height: 1em;">
<path fill="currentColor" d="M11.768 25.641l10.106-8.66a1.486 1.486 0 0 0 0-2.25L11.768 6.07c-.96-.826-2.457-.145-2.447 1.125v17.321c0 1.27 1.487 1.951 2.447 1.125z"></path>
</svg>
</div>
</div>
<div class="lqd-cc--el lqd-cc-arrow inline-flex items-center fixed top-0 left-0 pointer-events-none">
<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M60.4993 0V4.77005H8.87285L80 75.9207L75.7886 79.1419L4.98796 8.35478V60.4993H0V0H60.4993Z" />
</svg>
</div>
<div class="lqd-cc--el lqd-cc-custom-icon rounded-full fixed pointer-events-none">
<div class="lqd-cc-ci inline-flex items-center justify-center rounded-full relative">
<svg width="32" height="32" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" style="width: 1em; height: 1em;">
<path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M16.03 6a1 1 0 0 1 1 1v8.02h8.02a1 1 0 1 1 0 2.01h-8.02v8.02a1 1 0 1 1-2.01 0v-8.02h-8.02a1 1 0 1 1 0-2.01h8.02v-8.01a1 1 0 0 1 1.01-1.01z"></path>
</svg>
</div>
</div>
<div class="lqd-cc lqd-cc--outer fixed top-0 left-0 pointer-events-none"></div>
<!-- End custom cursor -->
<template id="lqd-snickersbar">
<div class="lqd-snickersbar flex flex-wrap lqd-snickersbar-in" data-item-id>
<div class="lqd-snickersbar-inner flex flex-wrap items-center">
<div class="lqd-snickersbar-detail">
<p class="hidden lqd-snickersbar-addding-temp my-0">Adding {{itemName}} to cart</p>
<p class="hidden lqd-snickersbar-added-temp my-0">Added {{itemName}} to cart</p>
<p class="my-0 lqd-snickersbar-msg flex items-center my-0"></p>
<p class="my-0 lqd-snickersbar-msg-done flex items-center my-0"></p>
</div>
<div class="lqd-snickersbar-ext ml-4"></div>
</div>
</div>
</template>
<template id="lqd-temp-sticky-header-sentinel">
<div class="lqd-sticky-sentinel invisible absolute pointer-events-none"></div>
</template>
<div class="lity" role="dialog" aria-label="Dialog Window (Press escape to close)" tabindex="-1" data-modal-type="default">
<div class="lity-wrap" data-lity-close role="document">
<div class="lity-loader" aria-hidden="true">Loading...</div>
<div class="lity-container">
<div class="lity-content"></div>
</div>
<button class="lity-close" type="button" aria-label="Close (Press escape to close)" data-lity-close>&times;</button>
</div>
</div>
</body>
</html>