feat(www): sections enhanced for clarify & diagrams added

www/public/Contextual.svg

@@ -1,7 +1,7 @@
 <svg width="564" height="250" viewBox="0 0 564 250" fill="none" xmlns="http://www.w3.org/2000/svg">
 <rect x="203.748" y="1.74765" width="146.505" height="83.5047" stroke="#ABB2FA" style="stroke:#ABB2FA;stroke:color(display-p3 0.6706 0.6990 0.9799);stroke-opacity:1;" stroke-width="3.4953"/>
 <rect x="1.74765" y="84.7477" width="136.505" height="56.5047" stroke="#ABB2FA" style="stroke:#ABB2FA;stroke:color(display-p3 0.6706 0.6990 0.9799);stroke-opacity:1;" stroke-width="3.4953"/>
-<rect x="405.748" y="84.7477" width="156.505" height="56.5047" stroke="#D9D9D9" style="stroke:#D9D9D9;stroke:color(display-p3 0.8510 0.8510 0.8510);stroke-opacity:1;" stroke-width="3.4953"/>
+<rect x="405.748" y="84.7477" width="156.505" height="56.5047" stroke="#CCCFEE" style="stroke:#CCCFEE;stroke:color(display-p3 0.7991 0.8104 0.9346);stroke-opacity:1;" stroke-width="3.4953"/>
 <rect x="250" y="195" width="54.1588" height="54.1588" fill="#7780D9" style="fill:#7780D9;fill:color(display-p3 0.4667 0.5020 0.8510);fill-opacity:1;"/>
 <rect x="254.166" y="199.166" width="45.8266" height="45.8266" fill="#B9BFFF" style="fill:#B9BFFF;fill:color(display-p3 0.7246 0.7499 1.0000);fill-opacity:1;"/>
 <path d="M256.249 201.249H260.415V205.415H256.249V201.249Z" fill="#B0B7FF" style="fill:#B0B7FF;fill:color(display-p3 0.6897 0.7182 1.0000);fill-opacity:1;"/>

www/public/LaunchFaster.svg

@@ -20,7 +20,7 @@
 <path d="M452.402 319.294L460.393 314.68L460.393 323.907L452.402 319.294Z" fill="#ABB2FA" style="fill:#ABB2FA;fill:color(display-p3 0.6706 0.6990 0.9799);fill-opacity:1;"/>
 <path d="M290.802 84.5295L286.188 76.5383L295.416 76.5383L290.802 84.5295Z" fill="#ABB2FA" style="fill:#ABB2FA;fill:color(display-p3 0.6706 0.6990 0.9799);fill-opacity:1;"/>
 <path d="M571 84.1268L565.804 75.8768L576.196 75.8768L571 84.1268Z" fill="#ABB2FA" style="fill:#ABB2FA;fill:color(display-p3 0.6706 0.6990 0.9799);fill-opacity:1;"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M298.481 354.513C319.38 354.513 336.322 337.571 336.322 316.671C336.322 295.772 319.38 278.83 298.481 278.83C277.582 278.83 260.64 295.772 260.64 316.671C260.64 337.571 277.582 354.513 298.481 354.513ZM290.347 303.52C288.961 302.135 286.715 302.135 285.33 303.52C283.944 304.906 283.944 307.152 285.33 308.537L293.464 316.671L285.33 324.806C283.944 326.191 283.944 328.437 285.33 329.823C286.715 331.208 288.961 331.208 290.347 329.823L298.481 321.689L306.615 329.823C308.001 331.208 310.247 331.208 311.633 329.823C313.018 328.437 313.018 326.191 311.633 324.806L303.498 316.671L311.633 308.537C313.018 307.152 313.018 304.906 311.633 303.52C310.247 302.135 308.001 302.135 306.615 303.52L298.481 311.654L290.347 303.52Z" fill="#7A1C1C" style="fill:#7A1C1C;fill:color(display-p3 0.4794 0.1098 0.1098);fill-opacity:1;"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M298.481 354.513C319.38 354.513 336.322 337.571 336.322 316.671C336.322 295.772 319.38 278.83 298.481 278.83C277.582 278.83 260.64 295.772 260.64 316.671C260.64 337.571 277.582 354.513 298.481 354.513ZM290.347 303.52C288.961 302.135 286.715 302.135 285.33 303.52C283.944 304.906 283.944 307.152 285.33 308.537L293.464 316.671L285.33 324.806C283.944 326.191 283.944 328.437 285.33 329.823C286.715 331.208 288.961 331.208 290.347 329.823L298.481 321.689L306.615 329.823C308.001 331.208 310.247 331.208 311.633 329.823C313.018 328.437 313.018 326.191 311.633 324.806L303.498 316.671L311.633 308.537C313.018 307.152 313.018 304.906 311.633 303.52C310.247 302.135 308.001 302.135 306.615 303.52L298.481 311.654L290.347 303.52Z" fill="#D87171" style="fill:#D87171;fill:color(display-p3 0.8473 0.4447 0.4447);fill-opacity:1;"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M338.845 392.354C359.744 392.354 376.686 375.412 376.686 354.513C376.686 333.614 359.744 316.671 338.845 316.671C317.946 316.671 301.004 333.614 301.004 354.513C301.004 375.412 317.946 392.354 338.845 392.354ZM357.087 345.956C358.24 344.372 357.889 342.153 356.305 341.001C354.72 339.848 352.501 340.199 351.349 341.783L334.87 364.441L325.981 355.552C324.595 354.166 322.349 354.166 320.963 355.552C319.578 356.937 319.578 359.183 320.963 360.569L332.789 372.394C333.523 373.128 334.541 373.504 335.575 373.422C336.609 373.341 337.556 372.811 338.166 371.972L357.087 345.956Z" fill="#48B159" style="fill:#48B159;fill:color(display-p3 0.2812 0.6957 0.3503);fill-opacity:1;"/>
 <rect y="147.382" width="37.8412" height="37.8412" fill="#7780D9" style="fill:#7780D9;fill:color(display-p3 0.4667 0.5020 0.8510);fill-opacity:1;"/>
 <rect x="2.91087" y="150.293" width="32.0195" height="32.0195" fill="#B9BFFF" style="fill:#B9BFFF;fill:color(display-p3 0.7246 0.7499 1.0000);fill-opacity:1;"/>

www/src/components/HowItWorksSection.tsx

@@ -5,13 +5,13 @@ import Image from "next/image";
 
 export function HowItWorksSection() {
   return (
-    <section className="bg-[#1a1a1a] text-white py-24 px-6 lg:px-[102px]">
+    <section className="bg-[#1a1a1a] text-white pb-28 px-6 lg:px-[102px]">
       <div className="max-w-324 mx-auto">
         <div className="flex flex-col gap-16">
           {/* Header and Description */}
           <div className="max-w-4xl">
-            <h2 className="font-sans font-normal text-3xl lg:text-4xl tracking-[-2.88px]! text-white leading-[1.03] mb-8">
-              How it works
+            <h2 className="font-sans font-normal text-3xl lg:text-4xl tracking-[-2.4px]! text-white leading-[1.03] mb-8">
+              A high-level overview of how Plano works
             </h2>
             <div className="font-mono text-white text-xl lg:text-lg leading-10 tracking-[-1.2px]!">
               <p className="mb-0">

www/src/components/IntroSection.tsx

@@ -35,7 +35,7 @@ export function IntroSection() {
           {/* Right Diagram */}
           <div className="flex-1 relative w-full">
             <Image 
-              src="/NetworkPathDiagram.svg" 
+              src="/IntroDiagram.svg" 
               alt="Network Path Diagram" 
               width={800} 
               height={600} 

www/src/components/VerticalCarouselSection.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useState } from "react";
+import Image from "next/image";
 import { motion, AnimatePresence } from "framer-motion";
 import { Button } from "./ui/button";
 
@@ -9,31 +10,36 @@ const verticalCarouselData = [
     id: 1,
     category: "INTRODUCTION",
     title: "Simple to revolutionary",
-    description: "By handling the critical yet complex tasks of prompt processing, Plano enables you to focus on what truly matters — achieving your business goals. With built-in capabilities like intelligent task routing, jailbreaking prevention, and centralized observability, Plano ensures your system runs smoothly and securely from the start, while continuously scaling with your needs."
+    description: "Plano is an intelligent (edge and LLM) proxy server designed for agents - to help you focus on core business objectives. Arch handles critical but the pesky tasks related to the handling and processing of prompts, which includes detecting and rejecting jailbreak attempts, intelligent task routing for improved accuracy, mapping user requests into 'backend' functions, and managing the observability of prompts and LLM in a centralized way.",
+    diagram: "/Introduction.svg"
   },
   {
     id: 2,
     category: "OPEN SOURCE",
-    title: "Built on proven foundations",
-    description: "Plano is built on open-source technologies and proven infrastructure patterns. This ensures transparency, community-driven development, and the ability to customize and extend the platform to meet your specific needs while maintaining enterprise-grade reliability."
+    title: "Freedom to extend & deploy",
+    description: "No lock-in. No black boxes. Just an open, intelligent (edge and LLM) proxy for building smarter, agentic AI applications. Created by contributors to Envoy Proxy, Arch brings enterprise-grade reliability to prompt orchestration, while giving you the flexibility to shape, extend, and integrate it into your AI workflows.",
+    diagram: "/OpenSource.svg"
   },
   {
     id: 3,
     category: "BUILT ON ENVOY",
-    title: "Enterprise-grade infrastructure", 
-    description: "Leveraging the battle-tested Envoy Proxy, Plano inherits years of production-hardened networking capabilities. This foundation provides unmatched performance, reliability, and scalability for your AI agent infrastructure."
+    title: "Production-proven infrastructure", 
+    description: "Plano takes a dependency on Envoy and is a self-contained process designed to run alongside your application servers. Plano extends Envoy's HTTP connection management subsystem, filtering, and telemetry capabilities exclusively for prompts and LLMs. Use Plano with any application language or framework, and use Plano with any LLM provider.",
+    diagram: "/BuiltOnEnvoy.svg"
   },
   {
     id: 4,
     category: "PURPOSE-BUILT",
-    title: "Designed for AI agents",
-    description: "Unlike generic API gateways, Plano is purpose-built for AI agent workloads. Every feature is designed with prompt processing, model routing, and agent orchestration in mind, providing optimal performance for your AI applications."
+    title: "Task-optimized, efficient LLMs",
+    description: "Unlike generic API gateways, Plano is purpose-built for AI agent workloads. Every feature is designed with prompt processing, model routing, and agent orchestration in mind, providing optimal performance for your AI applications.",
+    diagram: "/PurposeBuiltLLMs.svg"
   },
   {
     id: 5,
     category: "PROMPT ROUTING",
     title: "Intelligent request handling",
-    description: "Advanced prompt routing capabilities ensure that each request is directed to the most appropriate model or agent. This intelligent routing optimizes for cost, performance, and accuracy based on your specific requirements and preferences."
+    description: "Prompt Targets are a core concept in Plano, enabling developers to define how different types of user prompts should get processed and routed. Define prompt targets, so you can seperate business logic from the complexities of processing and handling of prompts, focusing on the quality of your application and a cleaner seperation of concerns in your codebase.",
+    diagram: "/PromptRouting.svg"
   }
 ];
 
@@ -46,7 +52,7 @@ export function VerticalCarouselSection() {
 
   return (
     <section className="relative bg-[#1a1a1a] text-white py-24 px-6 lg:px-[102px]">
-      <div className="max-w-[81rem] mx-auto">
+      <div className="max-w-324 mx-auto">
         {/* Main Heading */}
         <h2 className="font-sans font-normal text-3xl lg:text-4xl tracking-[-2.88px]! text-white leading-[1.03] mb-16 max-w-4xl">
           Basic scenarios to powerful agentic apps in minutes
@@ -55,7 +61,7 @@ export function VerticalCarouselSection() {
         {/* Vertical Carousel Layout */}
         <div className="flex flex-col lg:flex-row">
           {/* Left Sidebar Navigation */}
-          <div className="lg:w-72 flex-shrink-0">
+          <div className="lg:w-72 shrink-0">
             <div className="relative space-y-6">
               {/* Sliding Rectangle Indicator */}
               <motion.div
@@ -91,7 +97,7 @@ export function VerticalCarouselSection() {
           </div>
 
           {/* Right Content Area */}
-          <div className="flex-1 min-h-[400px] relative lg:-ml-8">
+          <div className="flex-1 min-h-[600px] relative lg:-ml-8">
             <AnimatePresence mode="wait">
               <motion.div
                 key={activeSlide}
@@ -101,24 +107,38 @@ export function VerticalCarouselSection() {
                 transition={{ duration: 0.5, ease: "easeInOut" }}
                 className="absolute inset-0"
               >
-                <div className="max-w-2xl">
-                  {/* Title */}
-                  <h3 className="font-sans font-medium text-[var(--primary)] text-2xl lg:text-[34px] tracking-[-2.4px]! leading-[1.03] mb-4">
-                    {verticalCarouselData[activeSlide].title}
-                  </h3>
+                <div className="flex flex-col lg:flex-row gap-12 items-start h-full">
+                  {/* Text Content */}
+                  <div className="flex-1 max-w-2xl">
+                    {/* Title */}
+                    <h3 className="font-sans font-medium text-primary text-2xl lg:text-[34px] tracking-[-2.4px]! leading-[1.03] mb-4">
+                      {verticalCarouselData[activeSlide].title}
+                    </h3>
 
-                  {/* Description */}
-                  <div className="font-mono text-white text-xl lg:text-lg leading-10 tracking-[-1.2px]! max-w-md">
-                    <p className="mb-0">
-                      {verticalCarouselData[activeSlide].description}
-                    </p>
+                    {/* Description */}
+                    <div className="font-mono text-white text-xl lg:text-lg leading-10 tracking-[-1.2px]! max-w-md">
+                      <p className="mb-0">
+                        {verticalCarouselData[activeSlide].description}
+                      </p>
+                    </div>
+                  </div>
+
+                  {/* Diagram - Right Side */}
+                  <div className="flex-1 w-full flex items-start justify-center lg:justify-start pt-2">
+                    <Image 
+                      src={verticalCarouselData[activeSlide].diagram} 
+                      alt={verticalCarouselData[activeSlide].title} 
+                      width={600} 
+                      height={400} 
+                      className="w-full max-w-[600px] h-auto object-contain" 
+                      priority 
+                    />
                   </div>
                 </div>
               </motion.div>
             </AnimatePresence>
           </div>
         </div>
-
       </div>
     </section>
   );