refine the blade

Signed-off-by: Kavishka Fernando <kavi@kavishka.local>

Author: Kavishka Fernando

src/components/Ecosystem/index.tsx

@@ -1,7 +1,7 @@
 import React, { JSX } from "react";
-import Link from "@docusaurus/Link";
 import styles from "./styles.module.css";
 import SectionHeader from "../common/SectionHeader";
+import Button from "@site/src/components/common/Button";
 
 type StackLogo = {
   name: string;
@@ -101,16 +101,15 @@ export default function Ecosystem(): JSX.Element {
   return (
     <section className={styles.blade}>
       <div className={styles.inner}>
-        <SectionHeader title="Everything You Need to Build Your Developer Platform">
+        <SectionHeader title="Built to Integrate With Your Stack">
           <p>
-            OpenChoreo's modular architecture lets you swap, extend, and
-            integrate platform services without rebuilding your foundation.
-            Choose from built-in defaults, community-contributed modules, or
-            bring your own.
+            OpenChoreo’s modular architecture lets you integrate, extend, and
+            customize platform services without rebuilding your foundation.
           </p>
-          <Link className={styles.button} to="/ecosystem/">
-            Explore the Ecosystem
-          </Link>
+
+          <div className={styles.actions}>
+            <Button to="/ecosystem/">Explore the Ecosystem</Button>
+          </div>
         </SectionHeader>
 
         <div

src/components/Ecosystem/styles.module.css

@@ -39,25 +39,15 @@
   line-height: 1.65;
 }
 
-.button {
-  margin-top: 18px;
-  display: inline-flex;
-  align-items: center;
+.actions {
+  display: flex;
   justify-content: center;
-  min-height: 40px;
-  padding: 0 22px;
-  border: 1px solid #1473ff;
-  border-radius: 4px;
-  color: #1473ff;
-  font-size: 0.86rem;
-  font-weight: 700;
-  text-decoration: none;
+  margin-top: 28px;
 }
 
-.button:hover {
-  color: #ffffff;
-  background: #1473ff;
-  text-decoration: none;
+
+.ecosystemButton {
+  font-weight: 600;
 }
 
 .graphic {

src/components/TechStack/index.tsx

@@ -284,15 +284,6 @@ export default function TechStack(): ReactNode {
             <TechLogo key={index} tech={tech} className={tech.className} />
           ))}
         </div>
-
-        <div className={styles.toolingNote}>
-          <small>
-            You can integrate other tools and vendors for identity, CI, observability,
-            gateways and other platform services with
-            OpenChoreo's modular architecture. The ones listed above are the
-            default options that ship with OpenChoreo.
-          </small>
-        </div>
       </div>
     </section>
   );