From c6fd6566d6895710c36d130a7395a6db3056550c Mon Sep 17 00:00:00 2001
From: Sikkra <159844544+Sikkra@users.noreply.github.com>
Date: Tue, 19 May 2026 11:15:34 -0500
Subject: [PATCH] Add Stellar Expert activity widget

---
 landing/index.html | 51 ++++++++++++++++++++++++
 landing/style.css  | 98 ++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 149 insertions(+)

diff --git a/landing/index.html b/landing/index.html
index fc63e75..1c242a0 100644
--- a/landing/index.html
+++ b/landing/index.html
@@ -32,6 +32,7 @@
       <div class="nav-links">
         <a href="#how" class="nav-link">How It Works</a>
         <a href="#features" class="nav-link">Features</a>
+        <a href="#activity" class="nav-link">Activity</a>
       </div>
       <a href="https://app.turbolong.com" class="btn btn-primary">Launch App</a>
     </nav>
@@ -126,6 +127,34 @@ <h3>Built on Stellar</h3>
       </div>
     </section>
 
+    <!-- On-chain Activity -->
+    <section class="activity-section" id="activity" data-activity-widget>
+      <div class="activity-header">
+        <span class="activity-eyebrow">On-chain activity</span>
+        <h2>Strategy Activity</h2>
+        <p>Recent Stellar Expert activity for the deployed testnet leveraged USDC strategy contract.</p>
+      </div>
+      <div class="activity-widget">
+        <div class="activity-toolbar">
+          <span>Leveraged USDC testnet strategy</span>
+          <a href="https://stellar.expert/explorer/testnet/contract/CDOETIUHCETALQMBMYUXGFJFA34KDTV74AMHTWXJLY2XUVNZ23JDLJZA" target="_blank" rel="noopener">Open Stellar Expert</a>
+        </div>
+        <div class="activity-frame-shell">
+          <iframe
+            id="stellar-expert-activity"
+            title="Stellar Expert activity for the Turbolong testnet strategy"
+            src="https://stellar.expert/explorer/testnet/contract/CDOETIUHCETALQMBMYUXGFJFA34KDTV74AMHTWXJLY2XUVNZ23JDLJZA"
+            loading="lazy"
+            referrerpolicy="no-referrer"
+          ></iframe>
+          <div class="activity-fallback" id="activity-fallback" hidden>
+            <span>Stellar Expert activity is unavailable in this view.</span>
+            <a href="https://stellar.expert/explorer/testnet/contract/CDOETIUHCETALQMBMYUXGFJFA34KDTV74AMHTWXJLY2XUVNZ23JDLJZA" target="_blank" rel="noopener">Open Stellar Expert</a>
+          </div>
+        </div>
+      </div>
+    </section>
+
     <!-- Risk Disclosure -->
     <section class="risk-section">
       <div class="risk-banner">
@@ -152,6 +181,28 @@ <h2>Start leveraging on Stellar</h2>
     </footer>
 
   </div>
+  <script>
+    (() => {
+      const frame = document.getElementById("stellar-expert-activity");
+      const fallback = document.getElementById("activity-fallback");
+      if (!frame || !fallback) return;
+
+      let loaded = false;
+      const showFallback = () => {
+        if (loaded) return;
+        frame.hidden = true;
+        fallback.hidden = false;
+      };
+
+      frame.addEventListener("load", () => {
+        loaded = true;
+        fallback.hidden = true;
+        frame.hidden = false;
+      });
+      frame.addEventListener("error", showFallback);
+      window.setTimeout(showFallback, 5000);
+    })();
+  </script>
   <!-- Cloudflare Web Analytics (free) — replace token after enabling in CF dashboard -->
   <!-- <script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "YOUR_CF_ANALYTICS_TOKEN"}'></script> -->
 </body>
diff --git a/landing/style.css b/landing/style.css
index 31bb0bb..7ed7009 100644
--- a/landing/style.css
+++ b/landing/style.css
@@ -257,6 +257,92 @@ body {
   line-height: 1.55;
 }
 
+/* On-chain activity */
+.activity-section {
+  max-width: 1000px;
+  margin: 0 auto;
+  padding: 0 24px 72px;
+}
+.activity-header {
+  text-align: center;
+  max-width: 620px;
+  margin: 0 auto 24px;
+}
+.activity-eyebrow {
+  display: block;
+  color: var(--accent);
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.5px;
+  margin-bottom: 8px;
+  text-transform: uppercase;
+}
+.activity-header h2 {
+  font-size: 1.8rem;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  margin-bottom: 8px;
+}
+.activity-header p {
+  color: var(--text-muted);
+  font-size: 0.95rem;
+}
+.activity-widget {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: hidden;
+}
+.activity-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  min-height: 52px;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border);
+  color: var(--text-muted);
+  font-size: 0.85rem;
+  font-weight: 600;
+}
+.activity-toolbar a,
+.activity-fallback a {
+  color: var(--accent);
+  text-decoration: none;
+}
+.activity-toolbar a:hover,
+.activity-fallback a:hover {
+  color: var(--accent-hover);
+}
+.activity-frame-shell {
+  position: relative;
+  height: 430px;
+  min-height: 430px;
+  background: #0f131b;
+}
+.activity-frame-shell iframe {
+  width: 100%;
+  height: 430px;
+  border: 0;
+  display: block;
+  background: #0f131b;
+}
+.activity-fallback {
+  min-height: 430px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 14px;
+  padding: 24px;
+  color: var(--text-muted);
+  text-align: center;
+}
+.activity-fallback[hidden],
+.activity-frame-shell iframe[hidden] {
+  display: none;
+}
+
 /* Risk banner */
 .risk-section {
   max-width: 900px;
@@ -338,6 +424,18 @@ body {
   .hero h1 { font-size: 1.8rem }
   .features-section { padding: 0 16px 48px }
   .how-section { padding: 48px 16px }
+  .activity-section { padding: 0 16px 48px }
+  .activity-toolbar {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 6px;
+  }
+  .activity-frame-shell,
+  .activity-frame-shell iframe,
+  .activity-fallback {
+    height: 360px;
+    min-height: 360px;
+  }
   .risk-section { padding: 0 16px 32px }
   .feature { padding: 20px 16px }
   .how-step { padding: 20px 16px }