From 0d6e87515841dca02fa13d1e08c478acdd36b7bc Mon Sep 17 00:00:00 2001 From: Toks Date: Wed, 6 May 2026 08:47:44 -0400 Subject: [PATCH] section 2 of services --- app/Views/services.php | 153 +++++++++++++++++++++++++---------- public/assets/css/styles.css | 115 +++++++++++++++++++++++++- 2 files changed, 223 insertions(+), 45 deletions(-) diff --git a/app/Views/services.php b/app/Views/services.php index f16b594..884aee2 100644 --- a/app/Views/services.php +++ b/app/Views/services.php @@ -243,17 +243,17 @@
-
+

At Tokslaw, we help businesses turn complex technology challenges into clear, scalable, and secure digital solutions

- 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 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.

Let’s build secure, scalable, and business-aligned technology. -
+
@@ -274,12 +274,12 @@

- Research + What - and + We - Development. + Do.

@@ -292,7 +292,7 @@
-

Hub is a graphic and digital studio that designs and develops eCommerce websites, apps and tailor-made digital solutions.

+

Build scalable and secure digital solutions tailored to your Needs.

@@ -603,7 +603,7 @@
-
+
@@ -613,59 +613,85 @@
-

Website, SEO & Digital Presence

+

+ Website, SEO & Digital Presence +

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.

- - - - - - - - - - - - - - - - +

Best for: professionals, founders, service businesses, and organizations that need a stronger digital foundation.

-
- +
+
+ + + + + + + + + + + + + + + + + +
-
-
-
-

- Still have a question? - - Browse documentation - - or - - Contact. - -

-
-
-
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -674,6 +700,46 @@ +
+
+

Our Process

+
+
+

Discover

+

+ We start by understanding your goals, target audience, current systems, pain points, and project requirements through focused discovery sessions. +

+
+
+

Architect

+

+ We define the right structure before building: user flows, system design, application architecture, integration points, security needs, and delivery roadmap +

+
+
+

Build

+

+ We develop the solution using practical, scalable technologies that match your business goals and technical environment. +

+
+
+

Secure

+

+ We embed secure development practices, authentication, access control, API protection, and DevSecOps thinking into the delivery process. +

+
+
+

Optimize

+

+ We review performance, usability, maintainability, deployment workflows, and future scalability so your system continues to improve after launch. +

+
+
+ + +
+
+
@@ -716,6 +782,7 @@ +

What we do

diff --git a/public/assets/css/styles.css b/public/assets/css/styles.css index cbd8f71..55a1e1a 100644 --- a/public/assets/css/styles.css +++ b/public/assets/css/styles.css @@ -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; -} \ No newline at end of file +} + +/*---------------------------------------------*/ +/*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; + } +}