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

section 2 of services

Browse Source
This commit is contained in:
Toks Law
2026-05-06 08:47:44 -04:00
parent a950f7ebf7
commit 0d6e875158
2 changed files with 223 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/Views/services.php
+110 -43
View File
@@ -243,17 +243,17 @@
<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>
<div class="about-card about-intro-card">
<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.
Led by <a href="" target="_blank" <strong>Toks Lawal </strong></a>, 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">
<div class="button-wrapper" style="text-align: center">
<button class="about-btn">Book a Free Consultation</button>
<button class="about-btn">View Portfolio</button>
</div>
@@ -274,12 +274,12 @@
</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
What
<mark class="lqd-highlight">
<span class="lqd-highlight-txt">and</span>
<span class="lqd-highlight-txt">We</span>
<span class="bottom-0 left-0 lqd-highlight-inner bg-purple-200"></span>
</mark>
Development.
Do.
</h2>
</div>
<div class="absolute -top-5percent -left-10percent module-shape">
@@ -292,7 +292,7 @@
</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>
<p class="ld-fh-element relative lqd-split-lines text-17 leading-1/3em" data-split-text="true" data-split-options='{"type": "lines"}'> Build scalable and secure digital solutions tailored to your Needs.</p>
</div>
</div>
@@ -603,7 +603,7 @@
</div>
</div>
<div class="max-w-full animation-element">
<div class="max-w-full animation-element about-card-wrapper">
<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">
@@ -613,59 +613,85 @@
</svg>
</div>
</div>
<h3 class="text-22 mb-0/75em lqd-iconbox-heading">Website, SEO & Digital Presence</h3>
<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 class="button-wrapper">
<button class="about-btn learn-more-btn" type="button">
Learn more
</button>
</div>
</div>
</div>
</div>
<!-- <div class="services-content">-->
<!-- <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>-->
<!-- </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>
<!-- <script>-->
<!-- const learnMoreButtons = document.querySelectorAll(".learn-more-btn");-->
<!---->
<!-- learnMoreButtons.forEach((button) => {-->
<!-- button.addEventListener("click", function () {-->
<!-- const wrapper = this.closest(".about-card-wrapper");-->
<!-- const servicesContent = wrapper.querySelector(".services-content");-->
<!---->
<!-- servicesContent.classList.toggle("show");-->
<!---->
<!-- if (servicesContent.classList.contains("show")) {-->
<!-- this.textContent = "Show Less";-->
<!-- } else {-->
<!-- this.textContent = "Learn More";-->
<!-- }-->
<!-- });-->
<!-- });-->
<!-- </script>-->
<!-- <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>
@@ -674,6 +700,46 @@
<!-- Start Services -->
<section class="lqd-section our-vision pt-50 pb-390" id="solutions">
<div class="about-card about-intro-card">
<h2>Our Process</h2>
<div class="about-card3-wrapper">
<div class="about-card3">
<h4>Discover</h4>
<p>
We start by understanding your goals, target audience, current systems, pain points, and project requirements through focused discovery sessions.
</p>
</div>
<div class="about-card3">
<h4>Architect</h4>
<p>
We define the right structure before building: user flows, system design, application architecture, integration points, security needs, and delivery roadmap
</p>
</div>
<div class="about-card3">
<h4>Build</h4>
<p>
We develop the solution using practical, scalable technologies that match your business goals and technical environment.
</p>
</div>
<div class="about-card3">
<h4>Secure</h4>
<p>
We embed secure development practices, authentication, access control, API protection, and DevSecOps thinking into the delivery process.
</p>
</div>
<div class="about-card3">
<h4>Optimize</h4>
<p>
We review performance, usability, maintainability, deployment workflows, and future scalability so your system continues to improve after launch.
</p>
</div>
</div>
</div>
</section>
<section class="lqd-section our-vision pt-50 pb-390" id="solutions">
@@ -716,6 +782,7 @@
</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>
public/assets/css/styles.css
+113 -2
View File
@@ -120,6 +120,8 @@ body {
}
.button-wrapper {
display: flex;
justify-content: flex-end;
margin-top: 28px;
}
@@ -309,7 +311,7 @@ body {
.module-iconbox {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: 24px;
column-gap: 28px;
row-gap: 38px;
align-items: stretch;
}
@@ -391,4 +393,113 @@ body {
.about-card2 strong {
color: #0f172a;
font-weight: 650;
}
}
/*---------------------------------------------*/
/*Services Intro-Section*/
/*----------------------------------------------*/
.about-intro-card {
max-width: 1150px;
width: 90%;
margin: 0 auto;
padding: 42px 48px;
text-align: left;
}
/* Center the buttons */
.about-intro-card .button-wrapper {
display: flex;
justify-content: center;
align-items: center;
gap: 14px;
margin-top: 32px;
}
/* Mobile fix */
@media (max-width: 768px) {
.about-intro-card {
width: 94%;
padding: 30px 22px;
}
.about-intro-card .button-wrapper {
flex-direction: column;
}
.about-intro-card .about-btn {
width: 100%;
}
}
/*---------------------------------------------*/
/*Services -Learn MoreButton-*/
/*----------------------------------------------*/
.about-card-wrapper {
width: 100%;
}
/* Hide services by default */
.services-content {
display: none;
margin-top: 22px;
padding: 22px;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 18px;
box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
animation: fadeSlide 0.35s ease;
}
/* Show when active */
.services-content.show {
display: block;
}
@keyframes fadeSlide {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/*---------------------------------------------*/
/*Services -Process*/
/*----------------------------------------------*/
/* Parent container for the cards */
.about-card3-wrapper {
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 28px;
row-gap: 36px;
align-items: stretch;
}
.about-card3 {
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;
}
/* Optional hover effect */
.about-card3:hover {
transform: translateY(-6px);
box-shadow: 0 26px 60px rgba(15, 23, 42, 0.16);
}
/* Mobile: 1 card per row */
@media (max-width: 768px) {
.about-card3-wrapper {
grid-template-columns: 1fr;
row-gap: 24px;
}
}