SEO blogpost

greenlns-landing/app/developers/page.tsx

@@ -23,6 +23,18 @@ export const metadata: Metadata = {
   },
 }
 
+const engineeringPosts = [
+  { slug: 'vision-ai-plant-disease-diagnostic', title: 'Building a Plant Disease Diagnostic Engine with Vision AI & Multi-Symptom Scoring', readTime: '8 min read' },
+  { slug: 'chrome-extension-manifest-v3-image-scanner', title: 'How to Build a Lightweight Chrome Extension (Manifest V3) for Real-Time Image & Canvas Inspection', readTime: '7 min read' },
+  { slug: 'zero-dependency-python-sdk', title: 'Designing a Zero-Dependency Python SDK for REST APIs with Automatic Retries & Rate-Limit Backoff', readTime: '7 min read' },
+  { slug: 'react-native-offline-first-sync', title: 'Offline-First Mobile Architecture: Syncing Local SQLite Storage with Remote AI Services in React Native', readTime: '8 min read' },
+  { slug: 'typescript-cli-automation-tool', title: 'Building a CLI Tool in TypeScript for Automated Image & Asset Diagnostic Workflows', readTime: '6 min read' },
+  { slug: 'computer-vision-edge-cases-plant-health', title: 'Computer Vision Edge Cases: Why Plant Models Agree on Species But Disagree on Health', readTime: '7 min read' },
+  { slug: 'programmatic-seo-nextjs-app-router', title: 'Programmatic SEO Infrastructure with Next.js App Router: Type-Safe Page Factories', readTime: '7 min read' },
+  { slug: 'automated-content-syndication-engine', title: 'Automated Content Syndication: Publishing Developer Posts to DEV.to and Hashnode', readTime: '6 min read' },
+  { slug: 'cross-platform-design-system-tokens', title: 'Building a Cross-Platform Design System for Web (Next.js) and Mobile (React Native)', readTime: '7 min read' },
+]
+
 const tools = [
   {
     icon: '💻',
@@ -54,11 +66,11 @@ const tools = [
   {
     icon: '🧩',
     eyebrow: 'Chrome Web Store',
-    title: 'Chrome extension (Soon)',
+    title: 'Chrome extension',
     description: 'Search a local plant catalog, check leaf symptoms, or select a plant photo from the current browser page for AI analysis.',
     command: 'Browser popup + photo scan tool',
-    href: 'https://greenlenspro.com/support',
-    linkLabel: 'Chrome extension details (Soon)',
+    href: siteConfig.chromeWebStoreUrl,
+    linkLabel: 'Chrome Web Store',
   },
   {
     icon: '🐙',
@@ -149,6 +161,34 @@ export default function DevelopersPage() {
           </div>
         </section>
 
+        <section className="py-20 md:py-28 border-b border-outline-variant/60" id="engineering-blog">
+          <div className="max-w-[1200px] mx-auto px-6">
+            <div className="max-w-2xl mb-12 md:mb-16">
+              <p className="text-xs font-bold tracking-[0.18em] uppercase text-primary mb-5">Engineering blog</p>
+              <h2 className="font-display text-4xl md:text-5xl font-bold leading-tight text-ink">How we built the GreenLens platform.</h2>
+              <p className="mt-5 max-w-2xl text-base leading-relaxed text-on-surface-variant">
+                Deep dives into the real architecture behind GreenLens: the vision AI diagnostic pipeline, the Chrome extension, the Python SDK, offline-first sync, and more.
+              </p>
+            </div>
+
+            <div className="grid gap-4 md:grid-cols-2">
+              {engineeringPosts.map((post) => (
+                <Link
+                  key={post.slug}
+                  href={`/blog/${post.slug}`}
+                  className="flex flex-col rounded-2xl bg-white p-6 border border-outline-variant/70 transition-transform duration-300 hover:-translate-y-1 hover:shadow-[0_18px_40px_-28px_rgba(1,38,31,0.38)]"
+                >
+                  <span className="text-[10px] font-bold tracking-[0.15em] uppercase text-primary">{post.readTime}</span>
+                  <h3 className="mt-3 font-display text-lg font-bold leading-snug text-ink">{post.title}</h3>
+                  <span className="mt-4 inline-flex w-fit items-center text-sm font-bold text-primary">
+                    Read the post <span aria-hidden="true" className="ml-2">→</span>
+                  </span>
+                </Link>
+              ))}
+            </div>
+          </div>
+        </section>
+
         <section className="py-20 md:py-28" id="faq">
           <div className="max-w-[1200px] mx-auto px-6 grid gap-8 lg:grid-cols-[1fr_auto] lg:items-end">
             <div>