section 2 of services

app/Views/services.php

@@ -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">
+                                        <div class="button-wrapper">
-                                            <button class="about-btn">Learn more</button>
+                                            <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">
+<!--                        <script>-->
-                            <div class="w-full flex flex-wrap items-center justify-center transition-all">
+<!--                            const learnMoreButtons = document.querySelectorAll(".learn-more-btn");-->
-                                <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">
+<!--                            learnMoreButtons.forEach((button) => {-->
-                                        Still have a question?
+<!--                                button.addEventListener("click", function () {-->
-                                        <a href="#" class="text-slate-300 inner-text-black" target="_blank">
+<!--                                    const wrapper = this.closest(".about-card-wrapper");-->
-                                            <u>Browse documentation</u>
+<!--                                    const servicesContent = wrapper.querySelector(".services-content");-->
-                                        </a>
+<!---->
-                                        or
+<!--                                    servicesContent.classList.toggle("show");-->
-                                        <a href="#contact-modal" class="text-slate-300 inner-text-black" data-lity="#contact-modal">
+<!---->
-                                            <u>Contact.</u>
+<!--                                    if (servicesContent.classList.contains("show")) {-->
-                                        </a>
+<!--                                        this.textContent = "Show Less";-->
-                                    </p>
+<!--                                    } else {-->
-                                </div>
+<!--                                        this.textContent = "Learn More";-->
-                            </div>
+<!--                                    }-->
-                        </div>
+<!--                                });-->
+<!--                            });-->
+<!--                        </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

@@ -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;
 }
@@ -392,3 +394,112 @@ body {
     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;
+    }
+}