feat: add favicon.svg and enhance blog post architecture visuals with figures and captions

Author: AR10Dev

public/favicon.svg

@@ -42,7 +42,10 @@ The custom assistant knows your order system, understands your product catalog,
 
 A production-ready custom chatbot has several components:
 
+<figure>
+
 ```d2
+title: "Custom AI Chatbot Architecture with RAG and Tool Calling" { near: top-center }
 direction: down
 
 app: "Application Layer" {
@@ -83,6 +86,9 @@ data.external -> llm
 llm -> response
 ```
 
+<figcaption>Custom AI chatbot architecture: RAG knowledge retrieval, CRM tool calling, and LLM orchestration - the full stack for building business ChatGPT interfaces.</figcaption>
+</figure>
+
 Let's break down each piece.
 
 ## Step 1: Building Your Knowledge Base

src/content/blog/building-custom-chatgpt-interfaces-for-business.mdx

@@ -57,7 +57,10 @@ Each page builds domain authority. More indexed pages (if quality) = stronger ov
 
 A successful system has these components:
 
+<figure>
+
 ```d2
+title: "Programmatic SEO Content Pipeline: From Data to 10x Traffic" { near: top-center }
 direction: right
 
 creation: "Content Creation Pipeline" {
@@ -91,6 +94,9 @@ quality: "Quality + Distribution Pipeline" {
 creation.generation -> quality.qa
 ```
 
+<figcaption>Programmatic SEO pipeline: structured data feeds AI-assisted content generation, QA, internal linking, and automated indexing - scaling pages without scaling effort.</figcaption>
+</figure>
+
 Let's break each down.
 
 ### 1. Structured Data Source

src/content/blog/how-programmatic-seo-generates-10x-traffic.mdx

@@ -89,7 +89,10 @@ These emails go out within minutes of form submission—catching leads at peak i
 
 Here's the architecture I typically implement:
 
+<figure>
+
 ```d2
+title: "AI Lead Qualification Automation Pipeline" { near: top-center }
 direction: down
 
 form: "Form Submission" {
@@ -128,6 +131,11 @@ ai_layer: "AI Processing Layer" {
 }
 ```
 
+<figcaption>
+AI lead qualification automation pipeline: n8n webhook triggers Clearbit enrichment and LLM scoring, then automated CRM routing and personalized SendGrid follow-up in 30 seconds.
+</figcaption>
+</figure>
+
 The key components:
 
 **Workflow Automation Platform**: n8n or Make orchestrates the entire process. They handle triggers, API calls, conditional logic, and integrations.

src/content/blog/how-to-automate-lead-qualification-with-ai.mdx

@@ -35,7 +35,7 @@ const portfolioItems = (await getCollection("portfolio"))
 const siteUrl = new URL(Astro.site?.toString() ?? "https://avaabrazzaq.com")
   .origin;
 const canonicalUrl = new URL(Astro.url.pathname, siteUrl).toString();
-const ogImage = new URL("/og-ai-growth-engineer.svg", siteUrl).toString();
+const ogImage = new URL("/og-ai-growth-engineer.png", siteUrl).toString();
 const linkedInUrl = "https://www.linkedin.com/in/ar10dev";
 const twitterUrl = "https://twitter.com/itsmeAvaab";
 const seoTitle = "AI Growth Engineer Services in Miami | Avaab Razzaq";
@@ -308,7 +308,6 @@ const structuredData = {
   structuredData={structuredData}
 >
 
-    <main id="main-content" class="scroll-smooth" tabindex="-1">
       {/* Hero Section */}
       <section id="home" class="min-h-[90vh] flex items-center py-20" aria-labelledby="hero-title">
         <div class="mx-auto w-full max-w-screen-xl px-6">
@@ -479,5 +478,4 @@ const structuredData = {
           </div>
         </div>
       </section>
-    </main>
 </BaseLayout>