Issue #3529707: Implement designs for XB AI

Closes #3529707

modules/xb_ai/src/Controller/XbBuilder.php

@@ -91,6 +91,140 @@ final class XbBuilder extends ControllerBase {
       throw new AccessDeniedHttpException('Invalid CSRF token');
     }
 
+    $js = <<<JS
+const CustomComponents = ({
+  title = "Welcome to Our Website",
+  subtitle = "Discover amazing features and possibilities",
+  ctaText = "Get Started",
+}) => {
+  return (
+    <div className="hero-section">
+      <div className="hero-content">
+        <h1 className="hero-title">{title}</h1>
+        <p className="hero-subtitle">{subtitle}</p>
+        <button className="hero-cta">{ctaText}</button>
+      </div>
+    </div>
+  );
+};
+
+export default CustomComponents;
+JS;
+
+    $css = <<<CSS
+.hero-section {
+  background-color: #4CAF50;
+  min-height: 500px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+}
+
+.hero-content {
+  max-width: 800px;
+  text-align: center;
+  color: white;
+}
+
+.hero-title {
+  font-size: 3.5rem;
+  font-weight: bold;
+  margin-bottom: 1.5rem;
+}
+
+.hero-subtitle {
+  font-size: 1.5rem;
+  margin-bottom: 2rem;
+  opacity: 0.9;
+}
+
+.hero-cta {
+  background-color: white;
+  color: #4CAF50;
+  padding: 1rem 2rem;
+  border-radius: 30px;
+  font-size: 1.125rem;
+  font-weight: 600;
+  border: none;
+  cursor: pointer;
+  transition: transform 0.2s ease;
+}
+
+.hero-cta:hover {
+  transform: scale(1.05);
+}
+CSS;
+
+    $str = <<<JS
+export default function HeroBanner({
+  heading = "Welcome to Our Site",
+  buttonText = "Get Started",
+  buttonUrl = "#",
+}) {
+  return (
+    <div
+      className="relative h-[500px] w-full bg-cover bg-center bg-no-repeat flex items-center justify-center"
+    >
+      <div className="absolute inset-0 bg-black/50"></div>
+      <div className="relative z-10 text-center px-4">
+        <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-8">
+          {heading}
+        </h1>
+        <a
+          href={buttonUrl}
+          className="inline-block bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-8 rounded-lg transition duration-300"
+        >
+          {buttonText}
+        </a>
+      </div>
+    </div>
+  );
+}
+JS;
+    $response = [
+      'status' => true,
+      'message' => "I've created a modern, responsive hero section with a green background (#4CAF50). The hero section features a clean design with a title, subtitle, and a call-to-action button. The component includes smooth hover effects and proper spacing, making it visually appealing and user-friendly.",
+      'js_structure' => $js,
+      'css_structure' => $css,
+      'component_structure' => [
+        'name' => 'hero_banner',
+        'machineName' => 'hero_banner',
+        'status' => false,
+        'source_code_js' => $str,
+        'source_code_css' => '',
+        'compiled_js' => '',
+        'compiled_css' => '',
+        'imported_js_components' => [],
+        'props' => [
+          'title' => [
+            'title' => 'Hero Title',
+            'type' => 'string',
+          ],
+          'description' => [
+            'title' => 'Hero Description',
+            'type' => 'string',
+          ],
+          'ctaText' => [
+            'title' => 'Button Text',
+            'type' => 'string',
+          ],
+          'ctaLink' => [
+            'title' => 'Button Link',
+            'type' => 'string',
+          ],
+          'backgroundImage' => [
+            'title' => 'Background Image URL',
+            'type' => 'string',
+          ],
+        ],
+      ],
+    ];
+    return new JsonResponse(
+      $response,
+    );
+
     /** @var \Drupal\ai_agents\PluginBase\AiAgentEntityWrapper $agent */
     $agent = $this->agentManager->createInstance('xb_ai_orchestrator');
     $prompt = json_decode($request->getContent(), TRUE);