Add smart cropping to examples teaser

Author: chr-hertel

ai.symfony.com/assets/icons/tabler/brand-slack.svg

@@ -218,9 +218,10 @@ button#themeToggle {
 .demo-blog .demo-icon { background: linear-gradient(180deg, #433F77, #C43BC2); }
 .demo-youtube .demo-icon { background: linear-gradient(180deg, #C05920, #CF781A); }
 .demo-wikipedia .demo-icon { background: linear-gradient(180deg, #1CA574, #56AB48); }
-.demo-audio .demo-icon { background: linear-gradient(180deg, #85A72B, #97BC43); }
-.demo-video .demo-icon { background: linear-gradient(180deg, #42DEEE, #7069B0); }
-.demo-tuto .demo-icon { background: linear-gradient(180deg, #3B9D87, #35A781); }
+.demo-crop .demo-icon { background: linear-gradient(180deg, #85A72B, #97BC43); }
+.demo-audio .demo-icon { background: linear-gradient(180deg, #42DEEE, #7069B0); }
+.demo-video .demo-icon { background: linear-gradient(180deg, #3B9D87, #35A781); }
+.demo-turbo .demo-icon { background: linear-gradient(180deg, #E94E77, #D68189); }
 
 .footer-meta {
     font-size: 0.8rem;

ai.symfony.com/assets/icons/tabler/crop.svg

@@ -229,6 +229,27 @@
                         </article>
                     </div>
 
+                    <div class="col-md-6">
+                        <article class="demo-crop sf-ai-card sf-ai-card-hover h-100">
+                            <div class="position-relative card-body p-3 p-lg-4 d-flex gap-3 align-items-start">
+                                <div class="demo-icon bg-success bg-opacity-10 text-success flex-shrink-0">
+                                    {{ ux_icon('tabler:crop', {width: 42, height: 42}) }}
+                                </div>
+                                <div class="flex-grow-1">
+                                    <div class="d-flex align-items-start gap-2 mb-1">
+                                        <h3 class="h5 ff-title fw-bold mb-0">
+                                            <a href="https://github.com/symfony/ai-demo" class="stretched-link">Smart Cropping</a>
+                                        </h3>
+                                        {{ ux_icon('tabler:arrow-right', {width: 24, height: 24, class: 'ms-1'}) }}
+                                    </div>
+                                    <p class="text-balance mb-0 text-muted small">
+                                        AI-assisted image cropping to focus on key elements on the image while resizing.
+                                    </p>
+                                </div>
+                            </div>
+                        </article>
+                    </div>
+
                     <div class="col-md-6">
                         <article class="demo-audio sf-ai-card sf-ai-card-hover h-100">
                             <div class="position-relative card-body p-3 p-lg-4 d-flex gap-3 align-items-start">
@@ -274,15 +295,15 @@
                     </div>
 
                     <div class="col-md-6">
-                        <article class="demo-tuto sf-ai-card sf-ai-card-hover h-100">
+                        <article class="demo-turbo sf-ai-card sf-ai-card-hover h-100">
                             <div class="position-relative card-body p-3 p-lg-4 d-flex gap-3 align-items-start">
                                 <div class="demo-icon bg-primary bg-opacity-10 text-primary flex-shrink-0">
                                     {{ ux_icon('logos:symfony-letters', {width: 36, height: 36}) }}
                                 </div>
                                 <div class="flex-grow-1">
                                     <div class="d-flex align-items-start gap-2 mb-1">
                                         <h3 class="h5 ff-title fw-bold mb-0">
-                                            <a href="https://github.com/symfony/ai-demo" class="stretched-link">Tuto stream Bot</a>
+                                            <a href="https://github.com/symfony/ai-demo" class="stretched-link">Turbo stream Bot</a>
                                         </h3>
                                         {{ ux_icon('tabler:arrow-right', {width: 24, height: 24, class: 'ms-1'}) }}
                                     </div>
@@ -337,12 +358,12 @@
                             <div class="card-body p-3 p-lg-4 position-relative">
                                 <div class="d-flex align-items-start justify-content-between gap-2 mb-1">
                                     <h3 class="h5 ff-title fw-bold mb-3">
-                                        <a class="stretched-link" href="https://github.com/symfony/ai/issues" target="_blank">Support</a>
+                                        <a class="stretched-link" href="https://symfony-devs.slack.com/archives/C09BAPA9BJP" target="_blank">Support in Slack</a>
                                     </h3>
-                                    {{ ux_icon('tabler:lifebuoy', {width: 24, height: 24, class: 'ms-1 text-muted'}) }}
+                                    {{ ux_icon('tabler:brand-slack', {width: 24, height: 24, class: 'ms-1 text-muted'}) }}
                                 </div>
                                 <p class="text-muted small mb-0">
-                                    Ask questions about SymfonyAI
+                                    Ask questions in Slack channel <strong>#ai-initiative</strong>
                                 </p>
                             </div>
                         </article>