hero& sidebar modularity and configurability

app/Controllers/HomeController.php

@@ -14,9 +14,6 @@ class HomeController
         try {
             $data = [
                 'title' => 'Home - Wizdom Networks',
-                'showSlider' => [
-                    'type' => 'hero'
-                ],
                 'content' => "<h1>Welcome to Wizdom Networks</h1><p>Your trusted partner for IT Consulting and Services.</p>"
             ];
 

public/assets/css/about.css

@@ -0,0 +1,32 @@
+/* About Page Styles (v1) */
+
+.about-h1 {
+    font-size: 2.5rem;
+    font-weight: bold;
+    color: #003366;
+    margin-bottom: 20px;
+}
+
+.about-i {
+    font-size: 1.25rem;
+    font-style: italic;
+    color: #555;
+}
+
+.about-small {
+    font-size: 1rem;
+    line-height: 1.6;
+    color: #333;
+}
+
+#about-row {
+    margin-top: 40px;
+    text-align: center;
+}
+
+.container h2 {
+    text-align: center;
+    font-size: 2rem;
+    margin-bottom: 30px;
+    color: #003366;
+}

public/assets/css/main.css

@@ -0,0 +1,38 @@
+/* Bootstrap Optimization for Mobile & Desktop Consistency */
+
+/* Ensure proper grid scaling */
+.container {
+    max-width: 1200px;
+    margin: auto;
+}
+
+/* Navigation Fixes */
+.navbar {
+    padding: 0.5rem 1rem;
+}
+
+/* Adjust button sizes for better touchscreen usability */
+.btn {
+    padding: 0.75rem 1.5rem;
+    font-size: 1rem;
+}
+
+/* Improve form inputs on mobile */
+.form-control {
+    padding: 0.75rem;
+    font-size: 1rem;
+}
+
+/* Ensure text scaling remains readable */
+body {
+    font-size: 1rem;
+}
+
+@media (max-width: 768px) {
+    .container {
+        padding: 0 15px;
+    }
+    .navbar-nav {
+        text-align: center;
+    }
+}

public/assets/css/slider.css

@@ -1,18 +1,18 @@
-/* Hero Slider Styles */
+/* Slider Styles */
-.hero-slider, .carousel-inner, .carousel-item {
+.slider, .carousel-inner, .carousel-item {
     width: 100%;
     height: 65vh;
     position: relative;
     overflow: hidden;
 }
-.hero-image {
+.slider-image {
     width: 100%;
     height: 65vh;
     object-fit: cover;
     filter: grayscale(100%);
     transition: filter 0.5s ease-in-out;
-}
+}  
-.hero-image:hover {
+.slider-image:hover {
     filter: grayscale(0%);
 }
 .carousel-indicators {

resources/views/layouts/head.php

@@ -1,11 +1,10 @@
 <?php 
 
 /**
- * Head Partial
+ * Head Partial (v4)
  * 
  * This file includes metadata, stylesheets, and scripts necessary for rendering the site.
  */
-
 ?>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -17,7 +16,7 @@
           onerror="this.onerror=null;this.href='/assets/bootstrap/css/bootstrap.min.css';">
     
     <!-- Main Stylesheet -->
-    <link rel="stylesheet" href="/assets/css/styles.css">
+    <link rel="stylesheet" href="/assets/css/main.css">
     
     <!-- Conditionally Load Hero Stylesheet -->
     <?php if (isset($heroConfig)) : ?>
@@ -25,10 +24,24 @@
     <?php endif; ?>
 
     <!-- Conditionally Load Slider Stylesheet -->
-    <?php if (isset($showSlider)) : ?>
+    <?php if (isset($sliderConfig)) : ?>
         <link rel="stylesheet" href="/assets/css/slider.css">
+        
+        <?php if (!empty($sliderConfig['id'])) : ?>
+            <!-- Load Page-Specific Slider Styles -->
+            <link rel="stylesheet" href="/assets/css/slider-<?php echo htmlspecialchars($sliderConfig['id'], ENT_QUOTES, 'UTF-8'); ?>.css">
+        <?php endif; ?>
     <?php endif; ?>
-
+    
+    <!-- Conditionally Load Sidebar Stylesheet -->
+    <?php if (isset($sidebarConfig)) : ?>
+        <link rel="stylesheet" href="/assets/css/sidebar.css">
+        
+        <?php if (!empty($sidebarConfig['id'])) : ?>
+            <!-- Load Page-Specific Sidebar Styles -->
+            <link rel="stylesheet" href="/assets/css/sidebar-<?php echo htmlspecialchars($sidebarConfig['id'], ENT_QUOTES, 'UTF-8'); ?>.css">
+        <?php endif; ?>
+    <?php endif; ?>
+    
     <!-- Favicon -->
     <link rel="icon" type="image/png" href="/assets/images/favicon.png">
-

resources/views/layouts/main.php

@@ -1,13 +1,14 @@
-<?php 
+<?php
+
+use WizdomNetworks\WizeWeb\Core\View;
 
 /**
- * Main Layout
+ * Main Layout (v2)
  * 
- * This file defines the overall structure of the web pages, ensuring consistency across all views.
+ * This file serves as the primary layout template for rendering pages.
+ * It includes dynamic loading for sidebar, hero, and slider components.
  */
-
+?>
- use WizdomNetworks\WizeWeb\Core\View;
-
 
 ?><!DOCTYPE html>
 <html lang="en">
@@ -17,21 +18,26 @@
 <body>
     <?php View::render('partials/navbar', $data); ?>
 
-    <!-- Render Hero Section if Defined -->
+  
     <?php if (isset($heroConfig)) : ?>
+        <!-- Render Hero Section if Defined -->
         <?php View::render('partials/hero', compact('heroConfig')); ?>
     <?php endif; ?>
 
-    <!-- Render Slider if Defined -->
+    
-    <?php if (isset($showSlider)) : ?>
+    <?php if (isset($sliderConfig)) : ?>
-        <?php View::render('partials/slider', $showSlider); ?>
+        <!-- Render Slider if Defined -->
+        <?php View::render('partials/slider', compact('sliderConfig')); ?>
     <?php endif; ?>
 
     <div class="container">
         <div class="row">
-            <div class="col-md-3">
+            <!-- Sidebar -->
-                <?php View::render('partials/sidebar', $data); ?>
+            <?php if (isset($sidebarConfig) && $sidebarConfig['enabled']) : ?>
-            </div>
+                <div class="col-md-3">
+                    <?php WizdomNetworks\WizeWeb\Core\View::render('partials/sidebar', compact('sidebarConfig')); ?>
+                </div>
+            <?php endif; ?>
             <div class="col-md-9">
                 <!-- Main Page Content -->
                 <?php echo $content ?? ''; ?>

resources/views/pages/about.php

@@ -3,14 +3,55 @@
 use WizdomNetworks\WizeWeb\Core\View;
 
 /**
- * About Page View
+ * About Page (v1)
  * 
- * This view dynamically renders the About page using data provided by the AboutController.
+ * This page renders the "About Us" section, refactored from the reference site.
  */
 
 // Ensure data is available before rendering
-$title = $data['title'] ?? 'About Us - Wizdom Networks';
+$title = 'About Us - Wizdom Networks';
-$content = $data['content'] ?? '';
+$content = '<div class="container">
-$heroConfig = $data['heroConfig'] ?? [];
+    <div id="about-row" class="row">
+        <div class="col-lg-4">
+            <h1 class="about-h1">WHO</h1>
+            <p class="about-i">Wizdom is a preeminent business and information technology consultancy.</p>
+            <p class="about-small">Established in 2002, with clients throughout North America, we are a creative and innovative, results-oriented group who isn\'t afraid to push boundaries and think outside the box when necessary, all while pragmatically adhering to industry best practices.</p>
+        </div>
+        <div class="col-lg-4">
+            <h1 class="about-h1">WHAT</h1>
+            <p class="about-i">We align your IT systems and technology with your business strategy and goals.</p>
+            <p class="about-small">Ultimately providing you with an optimal path toward success. If you already have business and IT strategy alignment covered, we also manage IT projects & initiatives, infrastructure, train staff or executives, and <a href="/services.html">more</a>. Basically, if it\'s IT-related, we can get it done for you!</p>
+        </div>
+        <div class="col-lg-4">
+            <h1 class="about-h1">WHY</h1>
+            <p class="about-i">Those who have worked with us in the past know that our passion is infectious.</p>
+            <p class="about-small">But in a good way. It\'s the kind of passion that sparks creativity and facilitates collaboration—the kind that enables us to overcome technical hurdles and perceived business boundaries.</p>
+        </div>
+    </div>
+</div>';
+
+// Sidebar Configuration
+$sidebarConfig = [
+    'enabled' => true,
+    'id' => 'about',
+    'width' => '25%',
+    'position' => 'right',
+    'widgets' => [
+        '<h3>Company Values</h3><p>Innovation, Integrity, and Excellence.</p>',
+        '<h3>Our Vision</h3><p>Empowering businesses with cutting-edge IT solutions.</p>'
+    ]
+];
+
+// Page-Specific Hero Configuration
+$heroConfig = [
+    //'title' => 'Who We Are',
+	'height' => '65vh',
+	'enabled' => 'true',
+    //'description' => 'Wizdom Networks is a premier IT consultancy, providing innovative solutions since 2002.',
+    'image' => '/assets/images/wizdom-about-definitions.jpg',
+];
+
+// Page-Specific Slider Configuration
+
 
 View::render('layouts/main', compact('title', 'content', 'heroConfig'));

resources/views/pages/home.php

@@ -1,10 +1,9 @@
-
 <?php
 
 use WizdomNetworks\WizeWeb\Core\View;
 
 /**
- * Home Page View
+ * Home Page View (v2)
  * 
  * This view dynamically renders the homepage using data provided by the HomeController.
  */
@@ -12,7 +11,75 @@ use WizdomNetworks\WizeWeb\Core\View;
 // Ensure data is available before rendering
 $title = $data['title'] ?? 'Home - Wizdom Networks';
 $content = $data['content'] ?? '';
-$heroConfig = $data['heroConfig'] ?? [];
-$showSlider = $data['showSlider'] ?? [];
 
-View::render('layouts/main', compact('title', 'content', 'heroConfig', 'showSlider'));
+// Slider Configuration
+$sliderConfig = [
+    'id' => 'home', // Unique identifier for home page slider styles
+    'type' => 'standard',
+    'height' => '65vh',
+    'slides' => [
+        [
+            'src' => '/assets/images/information-light.jpg',
+            'alt' => 'Information Light Banner',
+            'title' => 'Innovative Solutions',
+            'description' => 'Bringing technology and expertise together.',
+            'cta_text' => 'Learn More',
+            'cta_link' => '/services/technology',
+            'cta_top' => '70%',
+            'cta_left' => '30%'
+        ],
+        [
+            'src' => '/assets/images/cardcatalouge-banner.jpg',
+            'alt' => 'Card Catalogue Banner',
+            'title' => 'Effortless Organization',
+            'description' => 'Streamline your workflow with our intuitive catalog system.',
+            'cta_text' => 'Learn More',
+            'cta_link' => '/services/catalogue-management',
+            'cta_top' => '45%',
+            'cta_left' => '75%'
+        ],
+        [
+            'src' => '/assets/images/rolodex-banner.jpg',
+            'alt' => 'Rolodex Banner',
+            'title' => 'Contact Management Made Easy',
+            'description' => 'Keep track of important contacts and information in one place.',
+            'cta_text' => 'Get Started',
+            'cta_link' => '/services/contact-management',
+            'cta_top' => '45%',
+            'cta_left' => '70%',
+            'text_color' => 'black'
+        ],
+        [
+            'src' => '/assets/images/oldmic.jpg',
+            'alt' => 'Old Microphone',
+            'title' => 'Broadcast Your Message',
+            'description' => 'Reach your audience with high-quality audio and video solutions.',
+            'cta_text' => 'Explore Options',
+            'cta_link' => '/services/media-solutions',
+            'cta_top' => '56%',
+            'cta_left' => '65%'
+        ],
+        [
+            'src' => '/assets/images/ancient-library-shelf-crop1.jpg',
+            'alt' => 'Library Archives',
+            'title' => 'Knowledge Preservation',
+            'description' => 'Store and manage your records securely and efficiently.',
+            'cta_text' => 'Discover More',
+            'cta_link' => '/services/data-archiving',
+            'cta_top' => '50%',
+            'cta_left' => '50%'
+        ],
+        [
+            'src' => '/assets/images/combosafedoor.jpg',
+            'alt' => 'Combination Safe Door',
+            'title' => 'Secure Your Data',
+            'description' => 'Advanced encryption and security solutions for your digital assets.',
+            'cta_text' => 'Protect Now',
+            'cta_link' => '/services/cybersecurity',
+            'cta_top' => '56%',
+            'cta_left' => '35%'
+        ]
+    ]
+];
+
+View::render('layouts/main', compact('title', 'content', 'sliderConfig'));

resources/views/partials/hero.php

@@ -1,43 +1,40 @@
-<?php 
+<?php
 
 /**
- * Modular Hero Partial
+ * Hero Partial (v2)
  * 
- * This component is reusable and configurable for different pages.
+ * This partial dynamically loads a hero section based on the provided configuration.
- * 
+ * It allows pages to enable or disable the hero and define custom styles.
- * Usage:
+ *
- * - Define `$heroConfig` as an array before rendering this partial.
+ * ## Configuration Options:
- * - Example:
+ * - `enabled` (bool) - Determines whether the hero is displayed (default: false)
- *   $heroConfig = [
+ * - `title` (string) - Hero title text
- *       'title' => 'Our Services',
+ * - `description` (string) - Hero subtitle or description text
- *       'description' => 'Explore our IT consulting solutions.',
+ * - `image` (string) - Background image URL (default: 'wizdom-about-definitions.jpg')
- *       'image' => '/assets/images/services-hero.jpg',
+ * - `height` (string) - Height of the hero section (default: '50vh')
- *       'cta' => ['text' => 'Get Started', 'link' => '/contact'],
+ * - `text_align` (string) - Text alignment ('left', 'center', 'right') (default: 'center')
- *       'style' => 'default', // Can be 'default', 'compact', 'overlay'
+ * - `overlay` (bool) - Apply a dark overlay to improve text readability (default: true)
- *       'position' => 'top' // Can be 'top', 'inline'
- *   ];
  */
 
-// Ensure heroConfig is defined before rendering
+// Ensure hero visibility is explicitly enabled
-$heroConfig = $heroConfig ?? [];
+if (!isset($heroConfig) || empty($heroConfig['enabled'])) {
+    return;
+}
 
-// Assign default values
+$heroTitle = htmlspecialchars($heroConfig['title'] ?? '', ENT_QUOTES, 'UTF-8');
-$heroTitle = $heroConfig['title'] ?? "Welcome to Wizdom Networks";
+$heroDescription = htmlspecialchars($heroConfig['description'] ?? '', ENT_QUOTES, 'UTF-8');
-$heroDescription = $heroConfig['description'] ?? "Your trusted partner for IT Consulting and Services.";
+$heroImage = htmlspecialchars($heroConfig['image'] ?? '/assets/images/wizdom-about-definitions.jpg', ENT_QUOTES, 'UTF-8');
-$heroImage = $heroConfig['image'] ?? "/assets/images/default-hero.jpg";
+$heroHeight = htmlspecialchars($heroConfig['height'] ?? '50vh', ENT_QUOTES, 'UTF-8');
-$heroCTA = $heroConfig['cta'] ?? null;
+$textAlign = htmlspecialchars($heroConfig['text_align'] ?? 'center', ENT_QUOTES, 'UTF-8');
-$heroStyle = $heroConfig['style'] ?? "default"; // 'default', 'compact', 'overlay'
+$overlay = $heroConfig['overlay'] ?? false;
-$heroPosition = $heroConfig['position'] ?? "top"; // 'top', 'inline'
 ?>
 
-<section class="hero-section hero-<?php echo $heroStyle; ?> hero-<?php echo $heroPosition; ?>" style="background-image: url('<?php echo $heroImage; ?>');">
+<section class="hero-section" style="background-image: url('<?php echo $heroImage; ?>'); height: <?php echo $heroHeight; ?>;">
-    <div class="hero-overlay">
+    <?php if ($overlay) : ?>
-        <div class="hero-content text-center">
+        <div class="hero-overlay"></div>
-            <h1><?php echo $heroTitle; ?></h1>
+    <?php endif; ?>
-            <p><?php echo $heroDescription; ?></p>
+    <div class="hero-content" style="text-align: <?php echo $textAlign; ?>;">
-            <?php if ($heroCTA): ?>
+        <h1><?php echo $heroTitle; ?></h1>
-                <a href="<?php echo $heroCTA['link']; ?>" class="btn btn-primary"><?php echo $heroCTA['text']; ?></a>
+        <p><?php echo $heroDescription; ?></p>
-            <?php endif; ?>
-        </div>
     </div>
 </section>

resources/views/partials/sidebar.php

@@ -1,8 +1,39 @@
-<aside class="col-md-3 bg-light p-3">
+<?php
-    <h4>Quick Links</h4>
+
-    <ul class="list-unstyled">
+/**
-        <li><a href="/services/it-consulting">IT Consulting</a></li>
+ * Sidebar Partial (v1)
-        <li><a href="/services/emergency-support">Emergency Support</a></li>
+ * 
-        <li><a href="/services/managed-services">Managed Services</a></li>
+ * This partial dynamically loads a sidebar based on the provided configuration.
-    </ul>
+ * It allows pages to enable or disable the sidebar and define custom styles.
+ *
+ * ## Configuration Options:
+ * - `enabled` (bool) - Determines whether the sidebar is displayed (default: false)
+ * - `width` (string) - Sidebar width percentage (default: '25%')
+ * - `position` (string) - Sidebar alignment: 'left' or 'right' (default: 'right')
+ * - `widgets` (array) - List of widgets or components to include in the sidebar
+ */
+
+// Ensure sidebar visibility is explicitly enabled
+if (!isset($sidebarConfig) || empty($sidebarConfig['enabled'])) {
+    return;
+}
+
+$sidebarWidth = htmlspecialchars($sidebarConfig['width'] ?? '25%', ENT_QUOTES, 'UTF-8');
+$sidebarPosition = htmlspecialchars($sidebarConfig['position'] ?? 'right', ENT_QUOTES, 'UTF-8');
+$sidebarId = htmlspecialchars($sidebarConfig['id'] ?? 'default', ENT_QUOTES, 'UTF-8');
+$widgets = $sidebarConfig['widgets'] ?? [];
+?>
+
+<aside class="sidebar sidebar-<?php echo $sidebarId; ?>" style="width: <?php echo $sidebarWidth; ?>; float: <?php echo $sidebarPosition; ?>;">
+    <div class="sidebar-content">
+        <?php if (!empty($widgets)) : ?>
+            <?php foreach ($widgets as $widget): ?>
+                <div class="sidebar-widget">
+                    <?php echo $widget; ?>
+                </div>
+            <?php endforeach; ?>
+        <?php else: ?>
+            <p>No widgets configured.</p>
+        <?php endif; ?>
+    </div>
 </aside>

resources/views/partials/slider.php

@@ -1,39 +1,84 @@
-<?php 
+<?php
 
 /**
- * Hero Slider Partial
+ * Slider Partial (v12)
  * 
  * This partial dynamically loads different types of sliders based on the provided configuration.
- * It supports multiple slider types, including hero and testimonial sliders, and only loads when required.
+ * It supports multiple slider types, including standard and testimonial sliders, and only loads when required.
+ *
+ * ## Configuration Options:
+ * - `id` (string) - Unique identifier for the slider (used for styling and debugging)
+ * - `type` (string) - Allowed values: 'standard', 'testimonial'
+ * - `height` (string) - Defines the slider height (default: '65vh')
+ * - `object_fit` (string) - Image object-fit property ('cover', 'contain', etc.)
+ * - `interval` (int) - Time in milliseconds between slides (default: 5000ms)
+ * - `pause_on_hover` (bool) - Pauses autoplay when hovered (default: true)
+ * - `controls` (bool) - Shows/hides navigation controls (default: true)
+ * - `indicators` (bool) - Shows/hides carousel indicators (default: true)
+ * - `animation` (string) - Allows 'slide' or 'fade' animation (default: 'slide')
+ * - `cta_width` (string) - Defines CTA container width (default: 'auto')
+ * - `cta_text_align` (string) - Text alignment within CTA (default: 'center')
+ * - `lazy_load` (bool) - Enables lazy loading for images (default: true)
  */
 
 // Ensure slider visibility is explicitly enabled
 if (!isset($sliderConfig) || empty($sliderConfig['type'])) {
+    error_log("[ERROR] Missing or invalid slider configuration.");
     return;
 }
 
-$sliderType = $sliderConfig['type'];
+$validTypes = ['standard', 'testimonial'];
+$sliderType = in_array($sliderConfig['type'], $validTypes) ? $sliderConfig['type'] : 'standard';
+$sliderId = htmlspecialchars($sliderConfig['id'] ?? 'default', ENT_QUOTES, 'UTF-8');
+$sliderHeight = $sliderConfig['height'] ?? '65vh';
+$objectFit = htmlspecialchars($sliderConfig['object_fit'] ?? 'cover', ENT_QUOTES, 'UTF-8');
+$interval = $sliderConfig['interval'] ?? 5000; // Default to 5 seconds
+$pauseOnHover = isset($sliderConfig['pause_on_hover']) && $sliderConfig['pause_on_hover'] ? 'hover' : 'false';
+$showControls = $sliderConfig['controls'] ?? true;
+$showIndicators = $sliderConfig['indicators'] ?? true;
+$animationType = $sliderConfig['animation'] ?? 'slide';
+$ctaWidth = htmlspecialchars($sliderConfig['cta_width'] ?? 'auto', ENT_QUOTES, 'UTF-8');
+$ctaTextAlign = htmlspecialchars($sliderConfig['cta_text_align'] ?? 'center', ENT_QUOTES, 'UTF-8');
+$lazyLoad = isset($sliderConfig['lazy_load']) && $sliderConfig['lazy_load'] ? 'loading="lazy"' : '';
 $sliderImages = $sliderConfig['slides'] ?? [];
+
+// Debugging logs for missing or incorrect configurations
+if (empty($sliderImages)) {
+    error_log("[ERROR] Slider '$sliderId' has no slides defined.");
+}
+if (!in_array($sliderType, $validTypes)) {
+    error_log("[ERROR] Invalid slider type '$sliderType' for slider '$sliderId'.");
+}
 ?>
 
-<section class="hero-slider slider-<?php echo $sliderType; ?>">
+<section class="slider slider-<?php echo $sliderId; ?> slider-<?php echo htmlspecialchars($sliderType, ENT_QUOTES, 'UTF-8'); ?>" 
-    <div id="heroCarousel" class="carousel slide" data-bs-ride="carousel">
+         data-animation="<?php echo htmlspecialchars($animationType, ENT_QUOTES, 'UTF-8'); ?>"
+         style="height: <?php echo htmlspecialchars($sliderHeight, ENT_QUOTES, 'UTF-8'); ?>; overflow: hidden; position: relative;">
+    <div id="carousel" class="carousel <?php echo $animationType === 'fade' ? 'carousel-fade' : ''; ?> slide" data-bs-ride="carousel" data-bs-interval="<?php echo $interval; ?>" data-bs-pause="<?php echo $pauseOnHover; ?>">
+        
+        <?php if ($showIndicators) : ?>
         <div class="carousel-indicators">
             <?php foreach ($sliderImages as $index => $image): ?>
-                <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="<?php echo $index; ?>"
+                <button type="button" data-bs-target="#carousel" data-bs-slide-to="<?php echo $index; ?>"
                     class="<?php echo $index === 0 ? 'active' : ''; ?> indicator-color-<?php echo $index + 1; ?>"
-                    aria-label="Slide <?php echo $index + 1; ?>"></button>
+                    aria-label="Slide <?php echo $index + 1; ?>" <?php echo $index === 0 ? 'aria-current="true"' : ''; ?>></button>
             <?php endforeach; ?>
         </div>
+        <?php endif; ?>
+        
         <div class="carousel-inner">
             <?php foreach ($sliderImages as $index => $image): ?>
                 <div class="carousel-item <?php echo $index === 0 ? 'active' : ''; ?>">
-                    <img src="<?php echo $image['src']; ?>" alt="<?php echo $image['alt']; ?>" class="d-block w-100 hero-image">
+                    <img src="<?php echo htmlspecialchars($image['src'], ENT_QUOTES, 'UTF-8'); ?>" 
+                         alt="<?php echo htmlspecialchars($image['alt'], ENT_QUOTES, 'UTF-8'); ?>" 
+                         class="d-block w-100 slider-image grayscale-effect"
+                         style="height: <?php echo htmlspecialchars($sliderHeight, ENT_QUOTES, 'UTF-8'); ?>; object-fit: <?php echo $objectFit; ?>; filter: grayscale(100%); transition: filter 0.5s ease-in-out;" 
+                         <?php echo $lazyLoad; ?>>
                     <div class="carousel-caption"
-                         style="color: <?php echo $image['text_color'] ?? 'white'; ?>; position: absolute; top: <?php echo $image['cta_top']; ?>; left: <?php echo $image['cta_left']; ?>; transform: translate(-50%, -50%);">
+                         style="color: <?php echo htmlspecialchars($image['text_color'] ?? 'white', ENT_QUOTES, 'UTF-8'); ?>; position: absolute; top: <?php echo htmlspecialchars($image['cta_top'], ENT_QUOTES, 'UTF-8'); ?>; left: <?php echo htmlspecialchars($image['cta_left'], ENT_QUOTES, 'UTF-8'); ?>; transform: translate(-50%, -50%); width: <?php echo $ctaWidth; ?>; text-align: <?php echo $ctaTextAlign; ?>;">
-                        <h2><?php echo $image['title']; ?></h2>
+                        <h2><?php echo htmlspecialchars($image['title'], ENT_QUOTES, 'UTF-8'); ?></h2>
-                        <p><?php echo $image['description']; ?></p>
+                        <p><?php echo htmlspecialchars($image['description'], ENT_QUOTES, 'UTF-8'); ?></p>
-                        <a href="<?php echo $image['cta_link']; ?>" class="btn btn-primary"> <?php echo $image['cta_text']; ?> </a>
+                        <a href="<?php echo htmlspecialchars($image['cta_link'], ENT_QUOTES, 'UTF-8'); ?>" class="btn btn-primary slider-cta"> <?php echo htmlspecialchars($image['cta_text'], ENT_QUOTES, 'UTF-8'); ?> </a>
                     </div>
                 </div>
             <?php endforeach; ?>