Chiefsoft/TokslawMain
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Services Content added

Browse Source
This commit is contained in:
Toks Law
2026-05-06 02:44:03 -04:00
parent 7100eca244
commit a950f7ebf7
2 changed files with 589 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/Views/services.php
+425 -49
View File
@@ -19,6 +19,7 @@
<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">
<link rel="stylesheet" href="./assets/css/styles.css">
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
@@ -190,9 +191,9 @@
</span>
</span>
</button>
<a class="navbar-brand flex relative" href="./index-start-hub-8.html">
<a class="navbar-brand flex relative" href="/">
<span class="navbar-brand-inner">
<img class="logo-default" src="./assets/images/demo/start-hub-8/tokslaw-logo-.svg" alt="Tokslaw">
<img class="logo-default" src="./assets/images/demo/start-hub-8/tokslaw_logo_main.png" alt="Tokslaw">
</span>
</a>
</div>
@@ -215,7 +216,7 @@
</a>
</li>
<li>
<a href="./page-start-hub-8-contact.html" class="py-15 pr-60">
<a href="#contact-modal" class="py-15 pr-60">
Contact
<span class="link-badge text-badge">NEW</span>
</a>
@@ -232,7 +233,7 @@
<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>
<p class="leading-20 text-gray-400">Technology Strategy, Software Engineering, and Secure Digital Transformation.</p>
</div>
</div>
</div>
@@ -242,6 +243,22 @@
<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">
<div>
<p>
At Tokslaw, we help businesses turn complex technology challenges into clear, scalable, and secure digital solutions
</p>
<p>
Led by Toks Lawal, an Enterprise Architect, Full-Stack Software Engineer, cybersecurity professional, and US Army veteran, Tokslaw bridges the gap between business strategy and technical execution. Whether you need a modern website, a secure application, cloud-ready architecture, DevSecOps improvements, or a full digital transformation roadmap, we bring a practical, hands-on approach to building systems that work today and scale for tomorrow.
</p>
<strong>
Let’s build secure, scalable, and business-aligned technology.
</strong>
<div class="button-wrapper">
<button class="about-btn">Book a Free Consultation</button>
<button class="about-btn">View Portfolio</button>
</div>
</div>
<!-- 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">
@@ -253,7 +270,7 @@
<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>
<h6 class="ld-fh-element relative text-12 uppercase tracking-1 text-slate-500 m-0">What We Do</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"}'>
@@ -278,9 +295,10 @@
<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="about-card2">
<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">
@@ -289,21 +307,40 @@
</svg>
</div>
</div>
<h3 class="text-22 mb-0/75em lqd-iconbox-heading">Brand Strategy </h3>
<h3 class="text-22 mb-0/75em lqd-iconbox-heading">Enterprise Architecture & Technology 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>
<p class="text-13 leading-1/25em">
We help organizations align technology decisions with business goals. From capability mapping to architecture roadmaps,
Tokslaw supports leaders who need clarity, structure, and direction before investing in new systems.
</p>
<!-- <p>-->
<!-- Services include:-->
<!-- </p>-->
<!-- <ul class="about-list2 clean-list2">-->
<!-- <li><strong>Enterprise architecture strategy</strong></li>-->
<!-- <li><strong>Solution architecture</strong></li>-->
<!-- <li><strong>Application modernization planning</strong></li>-->
<!-- <li><strong>Technology roadmaps</strong></li>-->
<!-- <li><strong>Capability mapping</strong></li>-->
<!-- <li><strong>Cloud and platform strategy</strong></li>-->
<!-- <li><strong>Architecture governance</strong></li>-->
<!-- <li><strong>Business and technology alignment</strong></li>-->
<!-- <li><strong>Legacy system modernization</strong></li>-->
<!-- <li><strong>TOGAF-based architecture planning</strong></li>-->
<!-- </ul>-->
<p>
<strong>Best for:</strong> businesses preparing for growth, modernization, system replacement, or digital transformation.
</p>
<div class="button-wrapper" style="float: right">
<button class="about-btn">Learn more</button>
</div>
</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="about-card2">
<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">
@@ -312,21 +349,41 @@
</svg>
</div>
</div>
<h3 class="text-22 mb-0/75em lqd-iconbox-heading">Development </h3>
<h3 class="text-22 mb-0/75em lqd-iconbox-heading">Full-Stack Web Application 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>
<p class="text-13 leading-1/25em">
We design and build responsive, secure, and scalable web applications using modern frontend and backend technologies.
Our approach combines clean user experience, strong backend architecture, and reliable deployment practices.
</p>
<!-- <p>-->
<!-- Services include:-->
<!-- </p>-->
<!---->
<!-- <ul class="about-list2 clean-list2">-->
<!-- <li><strong>Custom web application development</strong></li>-->
<!-- <li><strong>React, Next.js, and TypeScript development</strong></li>-->
<!-- <li><strong>Node.js and Express backend development</strong></li>-->
<!-- <li><strong>PHP, Laravel, and CodeIgniter development</strong></li>-->
<!-- <li><strong>REST API development</strong></li>-->
<!-- <li><strong>Dashboard development</strong></li>-->
<!-- <li><strong>Authentication and user management</strong></li>-->
<!-- <li><strong>Database integration</strong></li>-->
<!-- <li><strong>Admin panels and internal tools</strong></li>-->
<!-- <li><strong>Performance optimization</strong></li>-->
<!-- </ul>-->
<p>
<strong>Best for:</strong> startups, small businesses, SaaS products, internal platforms, and organizations that need custom software.
</p>
<div class="button-wrapper" style="float: right">
<button class="about-btn">Learn more</button>
</div>
</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="about-card2">
<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">
@@ -335,20 +392,264 @@
</svg>
</div>
</div>
<h3 class="text-22 mb-0/75em lqd-iconbox-heading">Mobile Apps </h3>
<h3 class="text-22 mb-0/75em lqd-iconbox-heading">API, Microservices & System Integration</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>
<p class="text-13 leading-1/25em">
Modern businesses need systems that communicate clearly and securely.
Tokslaw helps design APIs, microservices, and integration patterns that connect applications, data, users, and business processes.
</p>
<!-- <p>-->
<!-- Services include:-->
<!-- </p>-->
<!---->
<!-- <ul class="about-list2 clean-list2">-->
<!-- <li><strong>RESTful API design and development</strong></li>-->
<!-- <li><strong>API gateway planning</strong></li>-->
<!-- <li><strong>Microservices architecture</strong></li>-->
<!-- <li><strong>Event-driven architecture</strong></li>-->
<!-- <li><strong>Kafka-based integration patterns</strong></li>-->
<!-- <li><strong>Webhook and third-party API integration</strong></li>-->
<!-- <li><strong>System interoperability planning</strong></li>-->
<!-- <li><strong>Backend refactoring</strong></li>-->
<!-- <li><strong>Legacy-to-modern integration</strong></li>-->
<!-- <li><strong>API documentation with Swagger or Postman</strong></li>-->
<!-- </ul>-->
<p>
<strong>Best for:</strong> businesses connecting multiple systems, modernizing monoliths, or building scalable platforms.
</p>
<div class="button-wrapper" style="float: right">
<button class="about-btn">Learn more</button>
</div>
</div>
</div>
</div>
</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="about-card2">
<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">Cloud, DevOps & CI/CD Implementation</h3>
<div class="contents">
<p class="text-13 leading-1/25em">
We help teams improve how software is deployed, monitored, and maintained. From Docker-based deployments to GitHub Actions, GitLab CI/CD, Jenkins, and AWS infrastructure,
Tokslaw supports reliable software delivery.
</p>
<!-- <p>-->
<!-- Services include:-->
<!-- </p>-->
<!-- <ul class="about-list2 clean-list2">-->
<!-- <li><strong>CI/CD pipeline setup</strong></li>-->
<!-- <li><strong>GitHub Actions and GitLab CI/CD</strong></li>-->
<!-- <li><strong>Jenkins pipeline support</strong></li>-->
<!-- <li><strong>Docker containerization</strong></li>-->
<!-- <li><strong>Kubernetes guidance</strong></li>-->
<!-- <li><strong>AWS deployment planning</strong></li>-->
<!-- <li><strong>Infrastructure automation</strong></li>-->
<!-- <li><strong>Private Data Center Hosting</strong></li>-->
<!-- <li><strong>Environment configuration</strong></li>-->
<!-- <li><strong>Release workflow improvement</strong></li>-->
<!-- </ul>-->
<p>
<strong>Best for:</strong> teams that want faster, safer, and more predictable deployments
</p>
<div class="button-wrapper" style="float: right">
<button class="about-btn">Learn more</button>
</div>
</div>
</div>
</div>
</div>
<div class="max-w-full animation-element">
<div class="about-card2">
<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">Cybersecurity & DevSecOps</h3>
<div class="contents">
<p class="text-13 leading-1/25em">
Security should not be added at the end. Tokslaw helps organizations embed security into architecture, development, deployment, and operations.
</p>
<!-- <p>-->
<!-- Services include:-->
<!-- </p>-->
<!---->
<!-- <ul class="about-list clean-list">-->
<!-- <li><strong>DevSecOps strategy</strong></li>-->
<!-- <li><strong>Secure SDLC planning</strong></li>-->
<!-- <li><strong>SAST, DAST, SCA, and security testing guidance</strong></li>-->
<!-- <li><strong>API security reviews</strong></li>-->
<!-- <li><strong>Authentication and authorization design</strong></li>-->
<!-- <li><strong>CIAM and IAM architecture support</strong></li>-->
<!-- <li><strong>Zero Trust architecture guidance</strong></li>-->
<!-- <li><strong>Cloud security review</strong></li>-->
<!-- <li><strong>Vulnerability management planning</strong></li>-->
<!-- <li><strong>Security-by-design consulting</strong></li>-->
<!-- </ul>-->
<p>
<strong>Best for:</strong> organizations building secure digital products, customer platforms, cloud systems, or regulated applications.
</p>
<div class="button-wrapper" style="float: right">
<button class="about-btn">Learn more</button>
</div>
</div>
</div>
</div>
</div>
<div class="max-w-full animation-element">
<div class="about-card2">
<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 App & Hybrid App Development</h3>
<div class="contents">
<p class="text-13 leading-1/25em">
We help turn product ideas into mobile-ready experiences across iOS and Android.
Tokslaw supports hybrid mobile development using modern frameworks that reduce cost while delivering strong user experience. Tokslaw helps design APIs, microservices, and integration patterns that connect applications, data, users, and business processes.
</p>
<!-- <p>-->
<!-- Services include:-->
<!-- </p>-->
<!---->
<!-- <ul class="about-list2 clean-list2">-->
<!-- <li><strong>React Native app development</strong></li>-->
<!-- <li><strong>Ionic and Capacitor app development</strong></li>-->
<!-- <li><strong>Mobile UI implementation</strong></li>-->
<!-- <li><strong>API integration for mobile apps</strong></li>-->
<!-- <li><strong>Authentication flows</strong></li>-->
<!-- <li><strong>Push notification planning</strong></li>-->
<!-- <li><strong>App performance improvement</strong></li>-->
<!-- <li><strong>iOS and Android deployment support</strong></li>-->
<!-- </ul>-->
<p>
<strong>Best for:</strong> startups, founders, and businesses launching mobile products without building separate native teams.
</p>
<div class="button-wrapper" style="float: right">
<button class="about-btn">Learn more</button>
</div>
</div>
</div>
</div>
</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="about-card2">
<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">AI, Automation & Product Innovation</h3>
<div class="contents">
<p class="text-13 leading-1/25em">
AI is most valuable when it solves real business problems. Tokslaw helps teams identify where AI, automation, and intelligent workflows can improve productivity, customer experience, and decision-making.
</p>
<!-- <p>-->
<!-- Services include:-->
<!-- </p>-->
<!---->
<!-- <ul class="about-list2 clean-list2">-->
<!-- <li><strong>AI product strategy</strong></li>-->
<!-- <li><strong>AI agent planning</strong></li>-->
<!-- <li><strong>Workflow automation</strong></li>-->
<!-- <li><strong>AI-assisted dashboards</strong></li>-->
<!-- <li><strong>Prompt and system design</strong></li>-->
<!-- <li><strong>AI feature integration</strong></li>-->
<!-- <li><strong>Data and AI readiness review</strong></li>-->
<!-- <li><strong>Prototype and proof-of-concept development</strong></li>-->
<!-- </ul>-->
<p>
<strong>Best for:</strong> businesses exploring AI but needing a practical roadmap, prototype, or implementation partner.
</p>
<div class="button-wrapper" style="float: right">
<button class="about-btn">Learn more</button>
</div>
</div>
</div>
</div>
</div>
<div class="max-w-full animation-element">
<div class="about-card2">
<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">Website, SEO & Digital Presence</h3>
<div class="contents">
<p class="text-13 leading-1/25em">
Tokslaw also supports businesses that need a stronger online presence.
From professional websites to technical SEO and content strategy, we help brands become easier to find, trust, and contact.
</p>
<!-- <p>-->
<!-- Services include:-->
<!-- </p>-->
<!---->
<!-- <ul class="about-list2 clean-list2">-->
<!-- <li><strong>Business website design</strong></li>-->
<!-- <li><strong>WordPress development</strong></li>-->
<!-- <li><strong>Landing page design</strong></li>-->
<!-- <li><strong>Technical SEO review</strong></li>-->
<!-- <li><strong>Website performance improvement</strong></li>-->
<!-- <li><strong>Accessibility improvements</strong></li>-->
<!-- <li><strong>Content strategy</strong></li>-->
<!-- <li><strong>Blog setup and optimization</strong></li>-->
<!-- <li><strong>Conversion-focused page copy</strong></li>-->
<!-- <li><strong>Portfolio and personal brand websites</strong></li>-->
<!-- </ul>-->
<p>
<strong>Best for:</strong> professionals, founders, service businesses, and organizations that need a stronger digital foundation.
</p>
<div class="button-wrapper" style="float: right">
<button class="about-btn">Learn more</button>
</div>
</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">
@@ -365,6 +666,7 @@
</div>
</div>
</div>
</div>
</div>
</section>
@@ -424,24 +726,24 @@
<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">App Development</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>
<li class="flex items-center mb-0/5em text-black">Website Development</li>
<li class="flex items-center mb-0/5em text-black">Mobile App Development</li>
<li class="flex items-center mb-0/5em text-black">Domain & Hosting</li>
<li class="flex items-center mb-0/5em text-black">UI/UX Design</li>
<li class="flex items-center mb-0/5em text-black">UI/UX Design</li>
<li class="flex items-center mb-0/5em text-black">Cloud & DevOps</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">SEO Performance</li>
<li class="flex items-center mb-0/5em text-black">Email Marketing</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>
<li class="flex items-center mb-0/5em text-black">SEO Optimization</li>
<li class="flex items-center mb-0/5em text-black">Cloud & DevOps</li>
<li class="flex items-center mb-0/5em text-black">Ongoing Support & Maintenance</li>
</ul>
</div>
</div>
@@ -458,6 +760,25 @@
<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="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">Software Development Process</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">02</h6>
</div>
</div>
</div>
</div>
</div>
<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">
@@ -466,8 +787,8 @@
<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>
<h2 class="ld-fh-element relative mb-0/7em leading-1/1em font-normal">Discovery.</h2>
<p class="ld-fh-element relative mb-0/5em text-16 leading-1/6em text-black">Understanding your goals,target audience, and project requirements through in depth discussions and collaborative planning sessions.</p>
</div>
</div>
<div class="col col-12 col-md-4 lqd-unit-animation-done" style="">
@@ -477,8 +798,8 @@
<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>
<h2 class="ld-fh-element relative mb-0/7em leading-1/1em font-normal">Planning.</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="">
@@ -486,8 +807,63 @@
<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>
</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">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">4</span> 4</p>
</div>
<p class="ld-fh-element relative mb-0/5em text-14 uppercase tracking-0/1em text-black">STEP 4</p>
<h2 class="ld-fh-element relative mb-0/7em leading-1/1em font-normal">Front-end Development.</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">5</span> 5</p>
</div>
<p class="ld-fh-element relative mb-0/5em text-14 uppercase tracking-0/1em text-black">STEP 5</p>
<h2 class="ld-fh-element relative mb-0/7em leading-1/1em font-normal">Back-end Development.</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">6</span> 6</p>
</div>
<p class="ld-fh-element relative mb-0/5em text-14 uppercase tracking-0/1em text-black">STEP 6</p>
<h2 class="ld-fh-element relative mb-0/7em leading-1/1em font-normal">Integration.</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">7</span> 7</p>
</div>
<p class="ld-fh-element relative mb-0/5em text-14 uppercase tracking-0/1em text-black">STEP 7</p>
<h2 class="ld-fh-element relative mb-0/7em leading-1/1em font-normal">Testing</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">8</span> 8</p>
</div><p class="ld-fh-element relative mb-0/5em text-14 uppercase tracking-0/1em text-black">STEP 8</p>
<h2 class="ld-fh-element relative mb-0/7em leading-1/1em font-normal">Deployment.</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>
public/assets/css/styles.css
+164 -8
View File
@@ -26,9 +26,10 @@ body {
background: #ffffff;
border-radius: 24px;
padding: 50px 45px;
box-shadow: 0 20px 60px rgba(15, 23, 42, 0.08);
/*box-shadow: 0 20px 60px rgba(15, 23, 42, 0.08);*/
border: 1px solid #eef2f7;
text-align: left;
box-shadow: 0 25px 70px rgba(15, 23, 42, 0.16);
}
.about-card h2 {
@@ -88,7 +89,7 @@ body {
}
.belief-box {
background: linear-gradient(135deg, #f8fbff, #F4A2AE);
background: linear-gradient(135deg, rgba(244, 162, 174, 0.45), rgba(59, 130, 246, 0.25));
border-left: 6px solid #F4A2AE;
border-radius: 18px;
padding: 28px 24px;
@@ -113,7 +114,9 @@ body {
.connect-card {
text-align: center;
background: linear-gradient(135deg, #ffffff, #f8fafc);
/*background: linear-gradient(135deg, #ffffff, #f8fafc);*/
background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(244, 162, 174, 0.45) );
}
.button-wrapper {
@@ -170,11 +173,7 @@ body {
.meet-toks-section h2 {
margin-bottom: 18px;
}
/*.title-head-subtitle {*/
/* display: block;*/
/* margin-bottom: 20px;*/
/* line-height: 1.7;*/
/*}*/
/*---------------------------------------------*/
/*About-Profile image*/
/*----------------------------------------------*/
@@ -235,4 +234,161 @@ body {
.profile-image {
border-radius: 22px;
}
}
/*---------------------------------------------*/
/*Services Section*/
/*----------------------------------------------*/
/* Compact service list */
.about-list2 {
list-style: none;
padding: 0;
margin: 14px 0 18px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 9px;
}
/* Fancy compact pills */
.about-list2 li {
background: rgba(255, 255, 255, 0.85);
color: #f4a2ae;
padding: 8px 10px;
border-radius: 999px;
border: 1px solid #e2e8f0;
font-size: 0.78rem;
line-height: 1.25;
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.04);
white-space: normal;
}
.about-list2 li strong {
font-weight: 600;
}
/* Keep clean-list spacing, but do NOT override columns */
.clean-list2 {
margin-bottom: 0px;
}
/* Button tighter */
.about-card2 .btn {
margin-top: 4px;
font-size: 0.85rem;
}
/* Tablet: 2 cards per row */
@media (max-width: 1024px) {
.module-iconbox {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.about-card2 {
padding: 26px 22px;
}
}
/* Mobile: 1 card per row */
@media (max-width: 768px) {
.module-iconbox {
grid-template-columns: 1fr;
gap: 20px;
}
.about-card {
padding: 24px 20px;
border-radius: 20px;
}
.about-list2 {
grid-template-columns: 1fr;
}
}
/* Card row layout: max 3 cards per row */
.module-iconbox {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: 24px;
row-gap: 38px;
align-items: stretch;
}
/* Make each card fill its grid space */
.module-iconbox .max-w-full {
width: 100%;
max-width: 100%;
}
.about-card2 {
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(244, 162, 174, 0.45), rgba(59, 130, 246, 0.25) );
border-radius: 22px;
padding: 28px 24px;
border: 1px solid rgba(226, 232, 240, 0.9);
text-align: left;
box-shadow: 0 18px 45px rgba(15, 23, 42, 0.10);
transition: all 0.35s ease;
position: relative;
overflow: hidden;
}
/* Hover effect */
.about-card2:hover {
transform: translateY(-8px);
box-shadow: 0 28px 70px rgba(15, 23, 42, 0.18);
border-color: rgb(195, 190, 239);
}
/* Icon styling */
.about-card2 .iconbox-icon-wrap {
margin-bottom: 8px;
}
.about-card2 .iconbox-icon-container {
width: 48px;
height: 48px;
margin-bottom: 18px !important;
border-radius: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #eff6ff, #f5f3ff);
color: #d592ea;
box-shadow: inset 0 0 0 1px rgb(173, 166, 231);
}
.about-card2 svg {
width: 24px;
height: 24px;
}
.about-card2 svg path {
fill: currentColor;
}
/* Card heading */
.about-card2 h3,
.about-card2 .lqd-iconbox-heading {
font-size: 1.08rem !important;
font-weight: 750;
color: #0f172a;
line-height: 1.25;
margin-bottom: 12px !important;
letter-spacing: -0.02em;
}
/* Paragraphs compact */
.about-card2 p {
font-size: 0.9rem;
line-height: 1.55;
color: #475569;
margin-bottom: 14px;
}
.about-card2 strong {
color: #0f172a;
font-weight: 650;
}