task: add playground cta to website (#1977)

Author: norberttech

web/landing/templates/base.html.twig

@@ -79,6 +79,12 @@
                             <img src="{{ asset('images/icons/heart.svg') }}" alt="external resource" width="20" height="20" class="ml-1">
                         </a>
                     </li>
+                    <li>
+                        <a class="p-3 flex items-center" href="{{ path('playground') }}">
+                            Demo
+                            <img src="{{ asset('images/icons/play.svg') }}" alt="Flow PHP Playground" width="16" height="16" class="ml-1">
+                        </a>
+                    </li>
                     <li>
                         <a class="p-3 flex items-center" href="{{ path('example_option', {topic: 'data_frame', 'example': 'data_reading', 'option' : 'array', _fragment: 'example'}) }}">
                             Examples

web/landing/templates/main/_hero.html.twig

@@ -11,6 +11,12 @@
             <a class="text-white" href="{{ url('changelog') }}">Changelog</a>
             <a class="text-white ml-4" href="{{ url('blog_post', {'date': '2025-03-16', 'slug': 'flow-php-release-cycle'}) }}">Release Cycle</a>
         </p>
+        <p class="mt-4">
+            <a class="py-2 px-4 bg-orange-100 rounded font-semibold hover:bg-orange-200 transition-colors whitespace-nowrap text-white" href="{{ path('playground') }}">
+                <img src="{{ asset('images/icons/play.svg') }}" alt="play" width="20" height="20" class="mr-2 inline-block">
+                Try Flow Online
+            </a>
+        </p>
     {% endapply %}
     <img src="{{ asset('images/elephant.svg') }}" alt="elephant" width="720" class="max-lg:hidden absolute right-0 top-0">
 </div>