<!DOCTYPE html>
<html lang="en" ⚡>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="/icon.png">
<title>Redentor</title>
<link rel="preload" as="style" href="https://redentor104fm.com/build/assets/app-D9QZRpJW.css" /><link rel="modulepreload" href="https://redentor104fm.com/build/assets/app-BiyqkFXZ.js" /><link rel="stylesheet" href="https://redentor104fm.com/build/assets/app-D9QZRpJW.css" data-navigate-track="reload" /><script type="module" src="https://redentor104fm.com/build/assets/app-BiyqkFXZ.js" data-navigate-track="reload"></script>
<!-- Livewire Styles --><style >[wire\:loading][wire\:loading], [wire\:loading\.delay][wire\:loading\.delay], [wire\:loading\.inline-block][wire\:loading\.inline-block], [wire\:loading\.inline][wire\:loading\.inline], [wire\:loading\.block][wire\:loading\.block], [wire\:loading\.flex][wire\:loading\.flex], [wire\:loading\.table][wire\:loading\.table], [wire\:loading\.grid][wire\:loading\.grid], [wire\:loading\.inline-flex][wire\:loading\.inline-flex] {display: none;}[wire\:loading\.delay\.none][wire\:loading\.delay\.none], [wire\:loading\.delay\.shortest][wire\:loading\.delay\.shortest], [wire\:loading\.delay\.shorter][wire\:loading\.delay\.shorter], [wire\:loading\.delay\.short][wire\:loading\.delay\.short], [wire\:loading\.delay\.default][wire\:loading\.delay\.default], [wire\:loading\.delay\.long][wire\:loading\.delay\.long], [wire\:loading\.delay\.longer][wire\:loading\.delay\.longer], [wire\:loading\.delay\.longest][wire\:loading\.delay\.longest] {display: none;}[wire\:offline][wire\:offline] {display: none;}[wire\:dirty]:not(textarea):not(input):not(select) {display: none;}:root {--livewire-progress-bar-color: #2299dd;}[x-cloak] {display: none !important;}[wire\:cloak] {display: none !important;}</style>
<!-- AMP Analytics -->
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<script async src="https://js.stripe.com/v3/pricing-table.js"></script>
<!-- Google tag (gtag.js) -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet">
<style>
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.line-clamp-3 {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.aspect-video {
aspect-ratio: 16 / 9;
}
/* Prevent body scroll when modal is open */
body.modal-open {
overflow: hidden;
}
</style>
<!-- Initialize Mini Player Store BEFORE Alpine loads -->
<script>
document.addEventListener('alpine:init', () => {
Alpine.store('miniPlayer', {
isVisible: false,
isPlaying: false,
currentTime: 0,
duration: 0,
currentEpisode: null,
audioElement: null,
isInitialized: false,
init() {
if (this.isInitialized) return; // Prevent re-initialization
console.log('Initializing mini player store...');
this.audioElement = new Audio();
this.setupAudioEvents();
this.isInitialized = true;
},
setupAudioEvents() {
if (!this.audioElement) return;
this.audioElement.addEventListener('loadedmetadata', () => {
this.duration = this.audioElement.duration;
});
this.audioElement.addEventListener('timeupdate', () => {
this.currentTime = this.audioElement.currentTime;
});
this.audioElement.addEventListener('ended', () => {
this.isPlaying = false;
});
this.audioElement.addEventListener('pause', () => {
this.isPlaying = false;
});
this.audioElement.addEventListener('play', () => {
this.isPlaying = true;
});
this.audioElement.addEventListener('error', (e) => {
console.error('Audio error:', e);
this.isPlaying = false;
});
},
playEpisode(src, episodeData) {
console.log('Playing episode:', episodeData.title);
this.currentEpisode = episodeData;
// If it's a different source, load it
if (this.audioElement.src !== src) {
this.audioElement.src = src;
this.audioElement.load();
}
const playPromise = this.audioElement.play();
if (playPromise !== undefined) {
playPromise.then(() => {
this.isVisible = true;
this.isPlaying = true;
}).catch(error => {
console.error('Error playing audio:', error);
});
}
},
toggle() {
if (!this.audioElement) return;
if (this.isPlaying) {
this.audioElement.pause();
} else {
const playPromise = this.audioElement.play();
if (playPromise !== undefined) {
playPromise.catch(error => {
console.error('Error playing audio:', error);
});
}
}
},
seek(percentage) {
if (!this.audioElement || !this.duration) return;
const newTime = (percentage / 100) * this.duration;
this.audioElement.currentTime = newTime;
},
skipForward(seconds = 10) {
if (!this.audioElement) return;
this.audioElement.currentTime = Math.min(
this.audioElement.currentTime + seconds,
this.duration
);
},
skipBackward(seconds = 10) {
if (!this.audioElement) return;
this.audioElement.currentTime = Math.max(
this.audioElement.currentTime - seconds,
0
);
},
hide() {
this.isVisible = false;
if (this.audioElement) {
this.audioElement.pause();
}
},
getProgress() {
if (!this.duration) return 0;
return (this.currentTime / this.duration) * 100;
},
get formattedCurrentTime() {
return this.formatTime(this.currentTime);
},
formatTime(seconds) {
if (!seconds || isNaN(seconds)) return '0:00';
const minutes = Math.floor(seconds / 60);
const remainingSeconds = Math.floor(seconds % 60);
return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
}
});
// Initialize the store immediately
Alpine.store('miniPlayer').init();
});
</script>
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('imageSlider', (config) => ({
// Alpine-managed state (no Livewire sync)
currentSlide: 0,
autoPlay: config.autoPlay,
autoPlayInterval: config.autoPlayInterval,
totalSlides: config.totalSlides,
hasMultipleSlides: config.hasMultipleSlides,
componentId: config.componentId,
initialSlide: config.initialSlide,
// Internal state
interval: null,
touchStartX: 0,
touchStartY: 0,
minSwipeDistance: 50,
isFullscreen: false,
keyboardListenerAdded: false,
isTransitioning: false,
init() {
// Set initial slide and ensure it's within bounds
this.currentSlide = Math.max(0, Math.min(this.initialSlide, this.totalSlides - 1));
// Only start autoplay if we have multiple slides
if (this.hasMultipleSlides) {
this.startAutoPlay();
}
// Listen for fullscreen changes
document.addEventListener('fullscreenchange', () => {
this.isFullscreen = !!document.fullscreenElement;
});
this.addKeyboardListener();
},
addKeyboardListener() {
if (this.keyboardListenerAdded) return;
const sliderElement = document.getElementById(this.componentId);
if (!sliderElement) return;
sliderElement.addEventListener('keydown', (e) => {
if (!sliderElement.contains(document.activeElement) &&
document.activeElement !== sliderElement) {
return;
}
if (e.key === 'ArrowLeft' && this.hasMultipleSlides) {
e.preventDefault();
this.prevSlide();
} else if (e.key === 'ArrowRight' && this.hasMultipleSlides) {
e.preventDefault();
this.nextSlide();
} else if (e.key === ' ') {
e.preventDefault();
this.toggleAutoPlay();
}
});
sliderElement.tabIndex = 0;
this.keyboardListenerAdded = true;
},
nextSlide() {
if (this.isTransitioning || !this.hasMultipleSlides) return;
this.isTransitioning = true;
this.currentSlide = (this.currentSlide + 1) % this.totalSlides;
// Reset transition flag
setTimeout(() => {
this.isTransitioning = false;
}, 500);
},
prevSlide() {
if (this.isTransitioning || !this.hasMultipleSlides) return;
this.isTransitioning = true;
this.currentSlide = this.currentSlide === 0
? this.totalSlides - 1
: this.currentSlide - 1;
// Reset transition flag
setTimeout(() => {
this.isTransitioning = false;
}, 500);
},
goToSlide(index) {
if (this.isTransitioning ||
index === this.currentSlide ||
index < 0 ||
index >= this.totalSlides) return;
this.isTransitioning = true;
this.currentSlide = index;
// Reset transition flag
setTimeout(() => {
this.isTransitioning = false;
}, 500);
},
startAutoPlay() {
this.stopAutoPlay();
if (this.autoPlay && this.hasMultipleSlides) {
this.interval = setInterval(() => {
this.nextSlide();
}, this.autoPlayInterval);
}
},
stopAutoPlay() {
if (this.interval) {
clearInterval(this.interval);
this.interval = null;
}
},
toggleAutoPlay() {
this.autoPlay = !this.autoPlay;
if (this.autoPlay) {
this.startAutoPlay();
} else {
this.stopAutoPlay();
}
},
toggleFullscreen() {
const element = document.getElementById(this.componentId);
if (!element) return;
if (!document.fullscreenElement) {
element.requestFullscreen().catch(err => {
console.log(`Error attempting to enable fullscreen: ${err.message}`);
});
} else {
document.exitFullscreen();
}
},
handleTouchStart(e) {
if (!this.hasMultipleSlides) return;
this.touchStartX = e.touches[0].clientX;
this.touchStartY = e.touches[0].clientY;
},
handleTouchMove(e) {
if (!this.hasMultipleSlides) return;
const deltaX = Math.abs(e.touches[0].clientX - this.touchStartX);
const deltaY = Math.abs(e.touches[0].clientY - this.touchStartY);
if (deltaX > deltaY) {
e.preventDefault();
}
},
handleTouchEnd(e) {
if (!this.hasMultipleSlides || this.isTransitioning) return;
const touchEndX = e.changedTouches[0].clientX;
const touchEndY = e.changedTouches[0].clientY;
const deltaX = this.touchStartX - touchEndX;
const deltaY = Math.abs(this.touchStartY - touchEndY);
if (Math.abs(deltaX) > deltaY && Math.abs(deltaX) > this.minSwipeDistance) {
if (deltaX > 0) {
this.nextSlide();
} else {
this.prevSlide();
}
}
}
}));
});
</script>
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('multimediaSlider', (config) => ({
// Configuration
currentSlide: 0,
autoPlay: config.autoPlay,
autoPlayInterval: config.autoPlayInterval,
totalSlides: config.totalSlides,
hasMultipleSlides: config.hasMultipleSlides,
componentId: config.componentId,
initialSlide: config.initialSlide,
items: [],
// Media state
isPlaying: {},
duration: {},
currentTime: {},
isLoaded: {},
isMuted: true,
// Internal state
interval: null,
progressInterval: null,
touchStartX: 0,
touchStartY: 0,
minSwipeDistance: 50,
isFullscreen: false,
isTransitioning: false,
isPaused: false,
// Controls visibility state
controlsVisible: false,
controlsTimeout: null,
isMobile: false,
init() {
this.currentSlide = Math.max(0, Math.min(this.initialSlide, this.totalSlides - 1));
// Detect mobile devices
this.isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i
.test(navigator.userAgent) ||
('ontouchstart' in window) ||
(navigator.maxTouchPoints > 0);
// Get items from data attribute
const element = document.getElementById(this.componentId);
if (element) {
const itemsData = element.getAttribute('data-items');
if (itemsData) {
try {
this.items = JSON.parse(atob(itemsData));
} catch (e) {
console.error('Error parsing items data:', e);
this.items = [];
}
}
}
// Initialize media state
this.items.forEach((item, index) => {
this.isPlaying[index] = false;
this.duration[index] = 0;
this.currentTime[index] = 0;
this.isLoaded[index] = false;
});
if (this.hasMultipleSlides) {
this.startAutoPlay();
}
// Listen for fullscreen changes
document.addEventListener('fullscreenchange', () => {
this.isFullscreen = !!document.fullscreenElement;
});
this.addKeyboardListener();
this.startProgressTracking();
// Show controls initially on mobile for a few seconds
if (this.isMobile) {
this.showControlsTemporarily();
}
},
// Controls visibility methods
showControls() {
this.controlsVisible = true;
this.clearControlsTimeout();
},
hideControls() {
if (!this.isMobile) {
this.controlsVisible = false;
}
},
hideControlsDelayed() {
this.clearControlsTimeout();
this.controlsTimeout = setTimeout(() => {
this.controlsVisible = false;
}, 5000);
},
showControlsTemporarily() {
this.showControls();
this.hideControlsDelayed();
},
toggleControlsVisibility() {
if (this.controlsVisible) {
this.hideControlsDelayed();
} else {
this.showControlsTemporarily();
}
},
clearControlsTimeout() {
if (this.controlsTimeout) {
clearTimeout(this.controlsTimeout);
this.controlsTimeout = null;
}
},
addKeyboardListener() {
const sliderElement = document.getElementById(this.componentId);
if (!sliderElement) return;
sliderElement.addEventListener('keydown', (e) => {
if (!sliderElement.contains(document.activeElement) &&
document.activeElement !== sliderElement) {
return;
}
if (e.key === 'ArrowLeft' && this.hasMultipleSlides) {
e.preventDefault();
this.prevSlide();
} else if (e.key === 'ArrowRight' && this.hasMultipleSlides) {
e.preventDefault();
this.nextSlide();
} else if (e.key === ' ') {
e.preventDefault();
this.toggleCurrentMedia();
}
});
sliderElement.tabIndex = 0;
},
nextSlide() {
if (this.isTransitioning || !this.hasMultipleSlides) return;
this.pauseCurrentMedia();
this.isTransitioning = true;
this.currentSlide = (this.currentSlide + 1) % this.totalSlides;
setTimeout(() => {
this.isTransitioning = false;
this.handleSlideChange();
}, 500);
},
prevSlide() {
if (this.isTransitioning || !this.hasMultipleSlides) return;
this.pauseCurrentMedia();
this.isTransitioning = true;
this.currentSlide = this.currentSlide === 0 ?
this.totalSlides - 1 :
this.currentSlide - 1;
setTimeout(() => {
this.isTransitioning = false;
this.handleSlideChange();
}, 500);
},
goToSlide(index) {
if (this.isTransitioning ||
index === this.currentSlide ||
index < 0 ||
index >= this.totalSlides) return;
this.pauseCurrentMedia();
this.isTransitioning = true;
this.currentSlide = index;
setTimeout(() => {
this.isTransitioning = false;
this.handleSlideChange();
}, 500);
},
handleSlideChange() {
const currentItem = this.items[this.currentSlide];
// Always restart autoplay for the new slide
if (this.autoPlay && !this.isPaused) {
this.startAutoPlay();
// Auto-play media when slide changes (for video/audio)
if (currentItem.type === 'video' || currentItem.type === 'audio') {
setTimeout(() => {
this.playCurrentMedia();
}, 100);
}
}
},
getCurrentMediaType() {
return this.items[this.currentSlide]?.type || 'image';
},
getCurrentMediaElement() {
const currentItem = this.items[this.currentSlide];
if (currentItem.type === 'video') {
return document.querySelector(`#${this.componentId} video`);
} else if (currentItem.type === 'audio') {
return document.querySelector(`#${this.componentId} audio`);
}
return null;
},
playCurrentMedia() {
const media = this.getCurrentMediaElement();
if (media) {
media.currentTime = 0;
media.play();
}
},
pauseCurrentMedia() {
const media = this.getCurrentMediaElement();
if (media) {
media.pause();
}
},
toggleCurrentMedia() {
const currentType = this.getCurrentMediaType();
if (currentType === 'video') {
this.toggleVideoPlayback(this.currentSlide);
} else if (currentType === 'audio') {
this.toggleAudioPlayback(this.currentSlide);
}
},
toggleVideoPlayback(index) {
const videos = document.querySelectorAll(`#${this.componentId} video`);
const video = videos[index];
if (video) {
if (video.paused) {
video.play();
} else {
video.pause();
}
}
},
toggleAudioPlayback(index) {
const audios = document.querySelectorAll(`#${this.componentId} audio`);
const audio = audios[index];
if (audio) {
if (audio.paused) {
audio.play();
} else {
audio.pause();
}
}
},
handleMediaLoad(index) {
this.isLoaded[index] = true;
},
handleVideoLoad(index, event) {
this.duration[index] = event.target.duration;
this.isLoaded[index] = true;
},
handleAudioLoad(index, event) {
this.duration[index] = event.target.duration;
this.isLoaded[index] = true;
},
handleMediaPlay(index) {
this.isPlaying[index] = true;
this.stopAutoPlay();
},
handleMediaPause(index) {
this.isPlaying[index] = false;
},
handleMediaEnded(index) {
this.isPlaying[index] = false;
// Auto-advance to next slide when media ends
if (this.autoPlay && !this.isPaused && this.hasMultipleSlides) {
setTimeout(() => {
this.nextSlide();
}, 1000);
}
},
startAutoPlay() {
this.stopAutoPlay();
if (this.autoPlay && this.hasMultipleSlides && !this.isPaused) {
const currentItem = this.items[this.currentSlide];
// For images, use the configured interval
if (currentItem.type === 'image') {
this.interval = setInterval(() => {
this.nextSlide();
}, this.autoPlayInterval);
}
// For video/audio, the media will auto-advance when it ends
// But we still need to handle cases where media doesn't play
else if (currentItem.type === 'video' || currentItem.type === 'audio') {
// Fallback: if media doesn't start playing within a reasonable time, advance slide
setTimeout(() => {
if (!this.isPlaying[this.currentSlide]) {
this.nextSlide();
}
}, 3000); // 3 second fallback
}
}
},
restartAutoPlayIfNeeded() {
if (this.autoPlay && !this.isPaused && this.hasMultipleSlides) {
this.startAutoPlay();
}
},
stopAutoPlay() {
if (this.interval) {
clearInterval(this.interval);
this.interval = null;
}
},
pauseAutoPlay() {
this.isPaused = true;
this.stopAutoPlay();
},
resumeAutoPlay() {
this.isPaused = false;
this.startAutoPlay();
},
toggleAutoPlay() {
this.autoPlay = !this.autoPlay;
if (this.autoPlay) {
this.startAutoPlay();
} else {
this.stopAutoPlay();
}
},
toggleMute() {
this.isMuted = !this.isMuted;
const media = this.getCurrentMediaElement();
if (media) {
media.muted = this.isMuted;
}
},
startProgressTracking() {
this.progressInterval = setInterval(() => {
const media = this.getCurrentMediaElement();
if (media && !media.paused) {
this.currentTime[this.currentSlide] = media.currentTime;
}
}, 100);
},
getProgressWidth() {
const currentItem = this.items[this.currentSlide];
if (currentItem.type === 'image') {
return ((this.currentSlide + 1) / this.totalSlides) * 100;
} else if (currentItem.type === 'video' || currentItem.type === 'audio') {
const duration = this.duration[this.currentSlide];
const currentTime = this.currentTime[this.currentSlide];
return duration ? (currentTime / duration) * 100 : 0;
}
return 0;
},
formatTime(seconds) {
const minutes = Math.floor(seconds / 60);
const remainingSeconds = Math.floor(seconds % 60);
return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
},
toggleFullscreen() {
const element = document.getElementById(this.componentId);
if (!element) return;
if (!document.fullscreenElement) {
element.requestFullscreen().catch(err => {
console.log(
`Error attempting to enable fullscreen: ${err.message}`);
});
} else {
document.exitFullscreen();
}
},
handleTouchStart(e) {
if (!this.hasMultipleSlides) return;
this.touchStartX = e.touches[0].clientX;
this.touchStartY = e.touches[0].clientY;
},
handleTouchMove(e) {
if (!this.hasMultipleSlides) return;
const deltaX = Math.abs(e.touches[0].clientX - this.touchStartX);
const deltaY = Math.abs(e.touches[0].clientY - this.touchStartY);
if (deltaX > deltaY) {
e.preventDefault();
}
},
handleTouchEnd(e) {
if (!this.hasMultipleSlides || this.isTransitioning) return;
const touchEndX = e.changedTouches[0].clientX;
const touchEndY = e.changedTouches[0].clientY;
const deltaX = this.touchStartX - touchEndX;
const deltaY = Math.abs(this.touchStartY - touchEndY);
if (Math.abs(deltaX) > deltaY && Math.abs(deltaX) > this.minSwipeDistance) {
if (deltaX > 0) {
this.nextSlide();
} else {
this.prevSlide();
}
}
}
}));
});
</script>
</head>
<body class="flex flex-col min-h-screen bg-white dark:bg-slate-900">
<div wire:snapshot="{"data":[],"memo":{"id":"wmbKUH6VAERPJOZJNeLD","name":"partials.top-bar","path":"\/","method":"GET","children":{"lw-915083524-1":["div","4m9P6jE4DJsXCh5i9CTo"],"lw-915083524-2":["div","yxGs03pbohHCu5n8GZvL"],"lw-915083524-3":["div","c72JuUnQQIhQ1MuU3DxN"],"lw-915083524-4":["div","AlBzDBenMrsmm35jrZy0"]},"scripts":[],"assets":[],"errors":[],"locale":"en"},"checksum":"daa7609fb621cfc5139446c839c78292c8a87400ba580d729ed11b7fd1774897"}" wire:effects="[]" wire:id="wmbKUH6VAERPJOZJNeLD" class=" relative z-50">
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<div class="w-full flex justify-center items-start space-x-8 p-4 border border-b-gray-200">
<div
class="contents inline"
x-data
x-on:click="$el.querySelector('button[disabled]') || $dispatch('modal-show', { name: 'change-your-live' })"
data-flux-modal-trigger
>
<button class="bg-[#c9a227] h-8 px-3 rounded-md text-sm font-medium cursor-pointer">
<svg class="shrink-0 size-6 md:me-2 block md:hidden " xmlns="http://www.w3.org/2000/svg" width="24"
height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<path
d="M4 9a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h4a1 1 0 0 1 1 1v4a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2v-4a1 1 0 0 1 1-1h4a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2h-4a1 1 0 0 1-1-1V4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4a1 1 0 0 1-1 1z" />
</svg>
<span class="hidden md:block">Want a change in your live?</span>
</button>
</div>
<a wire:navigate href="/donar"
class="bg-sky-600 h-8 px-3 rounded-md text-sm font-medium text-white flex justify-center items-center">
<svg class="shrink-0 size-6 md:me-2 block md:hidden " xmlns="http://www.w3.org/2000/svg" width="24"
height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<path stroke-linecap="round" stroke-linejoin="round"
d="M12 6v12m-3-2.818.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
</svg>
<span class="hidden md:block">Support Redentor</span>
</a>
<div wire:snapshot="{"data":{"currentLocale":"en"},"memo":{"id":"4m9P6jE4DJsXCh5i9CTo","name":"partials.language-switcher","path":"\/","method":"GET","children":[],"scripts":[],"assets":[],"errors":[],"locale":"en"},"checksum":"325f13ccfa4a4f7fb98c045f07c7d172a50bd18c8d6f07d64383523d78a285e8"}" wire:effects="[]" wire:id="4m9P6jE4DJsXCh5i9CTo" class="relative inline-block text-left">
<div class="group">
<button type="button"
class="w-full p-4 flex items-center bg-sky-300 h-8 px-3 rounded-md text-sm font-medium focus:outline-hidden focus:bg-gray-100 dark:text-neutral-200 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700"
onclick="document.getElementById('language-dropdown').classList.toggle('hidden')">
<!--[if BLOCK]><![endif]--> <svg class="shrink-0 size-5 me-3 md:me-2 block md:hidden" xmlns="http://www.w3.org/2000/svg"
width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path stroke-linecap="round" stroke-linejoin="round"
d="m10.5 21 5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 0 1 6-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 0 1-3.827-5.802" />
</svg>
<span class="hidden lg:block">English</span>
<!--[if ENDBLOCK]><![endif]-->
<svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
</div>
<div id="language-dropdown"
class="hidden origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black/10 md:shadow-md focus:outline-none z-50">
<div class="py-1">
<button wire:click="switchLanguage('en')"
class="flex items-center w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 bg-gray-100 font-semibold">
<span class="fi fi-us mr-3"></span>
<span>English</span>
<!--[if BLOCK]><![endif]--> <svg class="ml-auto h-4 w-4 text-blue-800" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
<!--[if ENDBLOCK]><![endif]-->
</button>
<button wire:click="switchLanguage('es')"
class="flex items-center w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 ">
<span class="fi fi-es mr-3"></span>
<span>Español</span>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</button>
</div>
</div>
</div>
<div class="hidden lg:block">
<div wire:snapshot="{"data":{"search":"","results":[[],{"s":"arr"}],"showResults":false,"selectedIndex":-1},"memo":{"id":"yxGs03pbohHCu5n8GZvL","name":"partials.global-search","path":"\/","method":"GET","children":[],"scripts":[],"assets":[],"errors":[],"locale":"en"},"checksum":"3a18a1f966f060a91d3e3b8be237cc270f90c08990cae604653112f89e574e1d"}" wire:effects="{"listeners":["hideResults"]}" wire:id="yxGs03pbohHCu5n8GZvL" class="relative w-full max-w-lg mx-auto" x-data="{
focused: false,
handleKeydown(event) {
$wire.handleKeydown(event.key);
if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
event.preventDefault();
}
}
}">
<!-- Search Input -->
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</div>
<input
type="text"
wire:model.live.debounce.300ms="search"
@focus="focused = true"
@blur="setTimeout(() => { focused = false; $wire.hideResults(); }, 200)"
@keydown="handleKeydown"
placeholder="Search for anything..."
class="w-full h-8 rounded-md text-gray-600 text-sm pl-10 pr-3 py-1 border border-gray-300 focus:ring-2 focus:ring-sky-600 focus:border-transparent transition-all duration-200 shadow-sm"
autocomplete="off"
>
<!-- Loading Spinner -->
<div wire:loading wire:target="search" class="absolute inset-y-0 right-0 pr-3 flex items-center">
<svg class="animate-spin h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
</div>
</div>
<!-- Search Results Dropdown -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- No Results -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div> </div>
<ui-modal data-flux-modal>
<dialog
wire:ignore.self
class="fixed m-0 p-8 max-h-dvh min-h-dvh md:[:where(&)]:min-w-[25rem] overflow-y-auto ml-auto [--fx-flyout-translate:translateX(50px)] border-s rtl:ml-0 rtl:mr-auto rtl:[--fx-flyout-translate:translateX(-50px)] bg-white dark:bg-zinc-800 border-transparent dark:border-zinc-700 md:w-[30rem]"
data-modal="change-your-live" data-flux-flyout x-data
x-on:modal-show.document="
if ($event.detail.name === 'change-your-live' && ($event.detail.scope === 'wmbKUH6VAERPJOZJNeLD')) $el.showModal();
if ($event.detail.name === 'change-your-live' && (! $event.detail.scope)) $el.showModal();
"
x-on:modal-close.document="
if ($event.detail.name === 'change-your-live' && ($event.detail.scope === 'wmbKUH6VAERPJOZJNeLD')) $el.close();
if (! $event.detail.name || ($event.detail.name === 'change-your-live' && (! $event.detail.scope))) $el.close();
"
>
<div wire:snapshot="{"data":{"plan":[null,{"class":"App\\Models\\SalvationPlan","key":1,"s":"mdl"}],"showDiv":false},"memo":{"id":"c72JuUnQQIhQ1MuU3DxN","name":"partials.salvation-plan","path":"\/","method":"GET","children":[],"scripts":[],"assets":[],"errors":[],"locale":"en"},"checksum":"b308ce7f6151a7c2a74685b55da159c81213e2f77dd6af75c17fb0e75c31ec74"}" wire:effects="[]" wire:id="c72JuUnQQIhQ1MuU3DxN">
<!--[if BLOCK]><![endif]--> <div class="space-y-6">
<div>
<div class="font-medium [:where(&)]:text-zinc-800 [:where(&)]:dark:text-white text-base [&:has(+[data-flux-subheading])]:mb-2 [[data-flux-subheading]+&]:mt-2" data-flux-heading>Begin your new life in Christ</div>
<div class="[:where(&)]:text-sm [:where(&)]:text-zinc-500 [:where(&)]:dark:text-white/70 mt-2" data-flux-text ><p>You can have real and lasting peace today through a relationship with Jesus Christ. Begin your four-step journey now!</p></div> </div>
<div>
<!-- Accordion component -->
<div class="divide-y divide-slate-200">
<!--[if BLOCK]><![endif]--> <!-- Accordion item -->
<div x-data="{ expanded: true }" class="py-2">
<h2>
<button id="step-en-0" type="button"
class="flex items-center justify-between w-full text-left font-semibold py-2"
@click="expanded = !expanded" :aria-expanded="expanded"
aria-controls="step-1-title">
<span>Step 1 - God's Purpose: Peace and Life</span>
<svg class="fill-sky-600 shrink-0 ml-8" width="16" height="16"
xmlns="http://www.w3.org/2000/svg">
<rect y="7" width="16" height="2" rx="1"
class="transform origin-center transition duration-200 ease-out"
:class="{ '!rotate-180': expanded }" />
<rect y="7" width="16" height="2" rx="1"
class="transform origin-center rotate-90 transition duration-200 ease-out"
:class="{ '!rotate-180': expanded }" />
</svg>
</button>
</h2>
<div id="step-en-0" role="region"
aria-labelledby="step-1-content"
class="grid text-sm text-slate-600 overflow-hidden transition-all duration-300 ease-in-out"
:class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'">
<div class="overflow-hidden prose">
<p>God loves you and wants you to experience abundant, everlasting peace and life.</p><p>The Bible says, </p><p>“<em>We have peace with God through our Lord Jesus Christ.” </em>Romans 5:1 </p><p><em>“For God so loved the world that he gave his only begotten Son, that whoever believes in him should not perish but have eternal life.” </em>John 3:16 </p><p><em>“I [Jesus] have come that they may have life, and have it abundantly.”</em> John 10:10 </p><p><strong>Why don’t most people have this peace and abundant life that God planned for us to have?</strong></p><p><br></p>
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!-- End: Accordion component -->
<!-- Accordion item -->
<div x-data="{ expanded: false }" class="py-2">
<h2>
<button id="step-en-1" type="button"
class="flex items-center justify-between w-full text-left font-semibold py-2"
@click="expanded = !expanded" :aria-expanded="expanded"
aria-controls="step-2-title">
<span>Step 2 - The Problem: Sin Separates Us</span>
<svg class="fill-sky-600 shrink-0 ml-8" width="16" height="16"
xmlns="http://www.w3.org/2000/svg">
<rect y="7" width="16" height="2" rx="1"
class="transform origin-center transition duration-200 ease-out"
:class="{ '!rotate-180': expanded }" />
<rect y="7" width="16" height="2" rx="1"
class="transform origin-center rotate-90 transition duration-200 ease-out"
:class="{ '!rotate-180': expanded }" />
</svg>
</button>
</h2>
<div id="step-en-1" role="region"
aria-labelledby="step-2-content"
class="grid text-sm text-slate-600 overflow-hidden transition-all duration-300 ease-in-out"
:class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'">
<div class="overflow-hidden prose">
<p>God created us in His own image to have an abundant life. He didn't make us like robots to automatically love and obey Him. God gave us a will and freedom of choice. We chose to disobey God and go our own way. We still make this choice today. This results in separation from God. </p><p>The Bible says, </p><p><em>"For all have sinned and fall short of the glory of God."</em> Romans 3:23 </p><p><em>"For the wages of sin is death, but the free gift of God is eternal life in Christ Jesus our Lord."</em> Romans 6:23 </p><p>Our choice results in separation from God. People have tried many ways to bridge this gap between themselves and God… </p><p>The Bible says, </p><p><em>"There is a way that seems right to a man, but its end is the way of death."</em> Proverbs 14:12 </p><p><em>"But your iniquities have separated you from your God, and your sins have hidden His face from you, so that He will not hear."</em> Isaiah 59:2 </p><p><strong>No bridge reaches to God… except one.</strong></p><p><br></p>
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!-- End: Accordion component -->
<!-- Accordion item -->
<div x-data="{ expanded: false }" class="py-2">
<h2>
<button id="step-en-2" type="button"
class="flex items-center justify-between w-full text-left font-semibold py-2"
@click="expanded = !expanded" :aria-expanded="expanded"
aria-controls="step-3-title">
<span>Step 3 - God's Remedy: The Cross</span>
<svg class="fill-sky-600 shrink-0 ml-8" width="16" height="16"
xmlns="http://www.w3.org/2000/svg">
<rect y="7" width="16" height="2" rx="1"
class="transform origin-center transition duration-200 ease-out"
:class="{ '!rotate-180': expanded }" />
<rect y="7" width="16" height="2" rx="1"
class="transform origin-center rotate-90 transition duration-200 ease-out"
:class="{ '!rotate-180': expanded }" />
</svg>
</button>
</h2>
<div id="step-en-2" role="region"
aria-labelledby="step-3-content"
class="grid text-sm text-slate-600 overflow-hidden transition-all duration-300 ease-in-out"
:class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'">
<div class="overflow-hidden prose">
<p>Jesus Christ died on the cross and rose from the grave. He paid the penalty for our sins and bridged the gap between God and mankind. </p><p>The Bible says, </p><p><em>"For there is one God, and one mediator between God and mankind, the man Christ Jesus."</em> 1 Timothy 2:5 </p><p><em>"For Christ also suffered once for sins, the just for the unjust, that he might bring us to God."</em> 1 Peter 3:18 </p><p><em>"But God demonstrates his own love for us in this: While we were still sinners, Christ died for us."</em> Romans 5:8 </p><p><strong>God has provided the only way… Each person must make a choice…</strong></p>
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!-- End: Accordion component -->
<!-- Accordion item -->
<div x-data="{ expanded: false }" class="py-2">
<h2>
<button id="step-en-3" type="button"
class="flex items-center justify-between w-full text-left font-semibold py-2"
@click="expanded = !expanded" :aria-expanded="expanded"
aria-controls="step-4-title">
<span>Step 4 - Our Response: Receive Christ</span>
<svg class="fill-sky-600 shrink-0 ml-8" width="16" height="16"
xmlns="http://www.w3.org/2000/svg">
<rect y="7" width="16" height="2" rx="1"
class="transform origin-center transition duration-200 ease-out"
:class="{ '!rotate-180': expanded }" />
<rect y="7" width="16" height="2" rx="1"
class="transform origin-center rotate-90 transition duration-200 ease-out"
:class="{ '!rotate-180': expanded }" />
</svg>
</button>
</h2>
<div id="step-en-3" role="region"
aria-labelledby="step-4-content"
class="grid text-sm text-slate-600 overflow-hidden transition-all duration-300 ease-in-out"
:class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'">
<div class="overflow-hidden prose">
<p>We must trust in Jesus Christ as Lord and Savior and receive Him by personal invitation. </p><p>The Bible says, </p><p><em>"Behold, I stand at the door and knock. If anyone hears My voice and opens the door, I will come in to him and dine with him, and he with Me."</em> Revelation 3:20 </p><p><em>"But as many as received Him, to them He gave the right to become children of God, to those who believed in His name."</em> John 1:12 </p><p><em>"If you confess with your mouth that Jesus is Lord and believe in your heart that God raised Him from the dead, you will be saved."</em> Romans 10:9 </p><p><strong>Will you receive Jesus Christ right now? </strong></p><p>Here is how you can receive Christ: </p><ul><li>Admit your need. (I am a sinner.) </li><li>Be willing to turn from your sins (repent) and ask God's forgiveness.</li><li>Believe that Jesus Christ died for you on the cross and rose from the grave. </li><li>Through prayer, invite Jesus Christ to come in and control your life through the Holy Spirit. (Receive Jesus as Lord and Savior) </li></ul><p>We suggest a prayer like this: </p><blockquote>"Dear God, I know I am a sinner. I want to turn away from my sins, and I ask for Your forgiveness. I believe that Jesus Christ is Your Son. I believe He died for my sins and that You raised Him from the dead. I want Him to come into my heart and take control of my life. I want to trust Jesus as my Savior and follow Him as my Lord from this day forward. In Jesus' Name, amen." </blockquote><p><strong>Did you pray to receive Jesus Christ and begin a relationship with Him?</strong></p>
</div>
<!--[if BLOCK]><![endif]--> <div x-data
x-on:content-toggled.window="$nextTick(() => $refs.content.scrollIntoView({ behavior: 'smooth', block: 'start' }))">
<button wire:click="toggleDiv"
class="h-8 w-fit block rounded-md text-sky-600 text-xs px-3 py-2 my-4 border border-gray-200">Yes, I prayed</button>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!-- End: Accordion component -->
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<div class="absolute top-0 end-0 mt-4 me-4">
<ui-close data-flux-modal-close>
<button type="button" class="relative items-center font-medium justify-center gap-2 whitespace-nowrap disabled:opacity-75 dark:disabled:opacity-75 disabled:cursor-default disabled:pointer-events-none h-8 text-sm rounded-md w-8 inline-flex bg-transparent hover:bg-zinc-800/5 dark:hover:bg-white/15 text-zinc-800 dark:text-white text-zinc-400! hover:text-zinc-800! dark:text-zinc-500! dark:hover:text-white!" data-flux-button="data-flux-button" alt="Close modal">
<svg class="shrink-0 [:where(&)]:size-5" data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"/>
</svg>
</button>
</ui-close>
</div>
</dialog>
</ui-modal>
</div>
<div class="flex justify-center items-center my-4 lg:hidden max-w-80 mx-auto">
<div wire:snapshot="{"data":{"search":"","results":[[],{"s":"arr"}],"showResults":false,"selectedIndex":-1},"memo":{"id":"AlBzDBenMrsmm35jrZy0","name":"partials.global-search","path":"\/","method":"GET","children":[],"scripts":[],"assets":[],"errors":[],"locale":"en"},"checksum":"4f83d22719a262ea5c1d16e78bf379c6df5b2567b12e452b7821eb823e0422bb"}" wire:effects="{"listeners":["hideResults"]}" wire:id="AlBzDBenMrsmm35jrZy0" class="relative w-full max-w-lg mx-auto" x-data="{
focused: false,
handleKeydown(event) {
$wire.handleKeydown(event.key);
if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
event.preventDefault();
}
}
}">
<!-- Search Input -->
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</div>
<input
type="text"
wire:model.live.debounce.300ms="search"
@focus="focused = true"
@blur="setTimeout(() => { focused = false; $wire.hideResults(); }, 200)"
@keydown="handleKeydown"
placeholder="Search for anything..."
class="w-full h-8 rounded-md text-gray-600 text-sm pl-10 pr-3 py-1 border border-gray-300 focus:ring-2 focus:ring-sky-600 focus:border-transparent transition-all duration-200 shadow-sm"
autocomplete="off"
>
<!-- Loading Spinner -->
<div wire:loading wire:target="search" class="absolute inset-y-0 right-0 pr-3 flex items-center">
<svg class="animate-spin h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
</div>
</div>
<!-- Search Results Dropdown -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- No Results -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div> </div>
</div>
<header wire:snapshot="{"data":{"total_count":0},"memo":{"id":"D14LkXB11GOQ6ZgNn4P5","name":"partials.navbar","path":"\/","method":"GET","children":[],"scripts":[],"assets":[],"errors":[],"locale":"en"},"checksum":"572244940fb6ebaa7f50e58233217b0fab4ba267eef55291975cb17d389dd1c2"}" wire:effects="{"listeners":["update-cart-count"]}" wire:id="D14LkXB11GOQ6ZgNn4P5" class="flex flex-wrap md:justify-start md:flex-nowrap z-40 w-full">
<div class="flex justify-center items-center container mx-auto">
<nav
class="relative max-w-[95rem] w-full mx-auto md:flex md:items-center md:justify-between md:gap-3 py-2 px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center gap-x-1">
<a class="flex-none font-semibold text-xl text-black focus:outline-hidden focus:opacity-80 dark:text-white"
href="/" aria-label="Redentor">
<img src="/storage/logo.png" class="h-14 " alt="Redentor">
</a>
<!-- Collapse Button -->
<button type="button"
class="hs-collapse-toggle md:hidden relative size-9 flex justify-center items-center font-medium text-sm rounded-lg border border-gray-200 text-gray-800 hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:border-neutral-700 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700"
id="hs-header-base-collapse" aria-expanded="false" aria-controls="hs-header-base"
aria-label="Toggle navigation" data-hs-collapse="#hs-header-base">
<svg class="hs-collapse-open:hidden size-4" xmlns="http://www.w3.org/2000/svg" width="24"
height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<line x1="3" x2="21" y1="6" y2="6" />
<line x1="3" x2="21" y1="12" y2="12" />
<line x1="3" x2="21" y1="18" y2="18" />
</svg>
<svg class="hs-collapse-open:block shrink-0 hidden size-4" xmlns="http://www.w3.org/2000/svg"
width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M18 6 6 18" />
<path d="m6 6 12 12" />
</svg>
<span class="sr-only">Toggle navigation</span>
</button>
<!-- End Collapse Button -->
</div>
<div id="hs-header-base"
class="hs-collapse hidden overflow-hidden transition-all duration-300 basis-full grow md:block "
aria-labelledby="hs-header-base-collapse">
<div
class="overflow-hidden overflow-y-auto max-h-[75vh] [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500">
<div class="py-2 md:py-0 flex flex-col md:flex-row md:items-center gap-0.5 md:gap-1">
<div class="grow">
<div class="flex flex-col md:flex-row md:justify-end md:items-center gap-0.5 md:gap-1">
<a wire:navigate id="nav-home" href="/"
class="w-fit border-b-4 border-blue-800 p-4 hover:border-b-4 hover:border-orange-500 ">
Home</a>
<a wire:navigate id="nav-home" href="/programacion"
class="w-fit p-4 hover:border-b-4 hover:border-orange-500 ">
Programming</a>
<a wire:navigate id="nav-home" href="/on-demand"
class="w-fit p-4 hover:border-b-4 hover:border-orange-500 ">
Redentor On Demand</a>
<a wire:navigate id="nav-home" href="/podcasts"
class="w-fit p-4 hover:border-b-4 hover:border-orange-500 ">
Podcasts</a>
<a wire:navigate id="nav-home" href="/eventos"
class="w-fit p-4 hover:border-b-4 hover:border-orange-500 ">
Events</a>
<a wire:navigate id="nav-home" href="/galeria"
class="w-fit p-4 hover:border-b-4 hover:border-orange-500 ">
Gallery</a>
<a wire:navigate id="nav-home" href="/productos"
class="w-fit p-4 hover:border-b-4 hover:border-orange-500 ">
Store</a>
<a wire:navigate id="nav-home" href="/anunciate"
class="w-fit p-4 hover:border-b-4 hover:border-orange-500 ">
Advertise with us</a>
<!-- Mega Menu -->
<div
class="hs-dropdown [--strategy:static] md:[--strategy:fixed] [--adaptive:none] md:[--adaptive:adaptive] [--is-collapse:true] md:[--is-collapse:false] w-fit">
<button id="hs-header-base-mega-menu-small" type="button"
class="hs-dropdown-toggle w-full p-4 flex items-center text-gray-800 hover:border-b-4 hover:border-orange-500 focus:outline-hidden focus:bg-gray-100 dark:text-neutral-200 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700"
aria-haspopup="menu" aria-expanded="false" aria-label="Mega Menu">
About us
<svg class="hs-dropdown-open:-rotate-180 md:hs-dropdown-open:rotate-0 duration-300 shrink-0 size-4 ms-auto md:ms-1"
xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<path d="m6 9 6 6 6-6" />
</svg>
</button>
<div class="hs-dropdown-menu transition-[opacity,margin] duration-[0.1ms] md:duration-[150ms] hs-dropdown-open:opacity-100 opacity-0 relative md:w-80 hidden z-10 top-full md:bg-white md:rounded-lg md:shadow-md before:absolute before:-top-4 before:start-0 before:w-full before:h-5 dark:md:bg-neutral-800"
role="menu" aria-orientation="vertical"
aria-labelledby="hs-header-base-mega-menu-small">
<div class="py-1 md:px-1 space-y-0.5">
<!-- Link -->
<a wire:navigate class="p-3 flex gap-x-4 hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 rounded-lg dark:text-neutral-200 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700"
href="/about">
<div class="grow">
<span
class="block text-sm text-gray-800 dark:text-neutral-200">About Redentor</span>
</div>
</a>
<!-- End Link -->
<div class="my-2 border-t border-gray-100 dark:border-neutral-800"></div>
<!-- Link -->
<a wire:navigate class="p-3 flex gap-x-4 hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 rounded-lg dark:text-neutral-200 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700"
href="/oficinas-y-personal">
<div class="grow">
<span
class="block text-sm text-gray-800 dark:text-neutral-200">Offices and Staff</span>
</div>
</a>
<!-- End Link -->
<div class="my-2 border-t border-gray-100 dark:border-neutral-800"></div>
<!-- Link -->
<a wire:navigate class="p-3 flex gap-x-4 hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 rounded-lg dark:text-neutral-200 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700"
href="#">
<div class="grow">
<span
class="block text-sm text-gray-800 dark:text-neutral-200">Board of Directors</span>
</div>
</a>
<!-- End Link -->
<div class="my-2 border-t border-gray-100 dark:border-neutral-800"></div>
<!-- Link -->
<a wire:navigate class="p-3 flex gap-x-4 hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 rounded-lg dark:text-neutral-200 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700"
href="#">
<div class="grow">
<span
class="block text-sm text-gray-800 dark:text-neutral-200">Music</span>
</div>
</a>
<!-- End Link -->
</div>
</div>
</div>
<!-- End Mega Menu -->
<a wire:navigate="" href="/carrito"
class="w-fit p-4 hover:border-b-4 hover:border-orange-500 flex items-center ">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" class="flex-shrink-0 w-5 h-5 mr-1">
<path stroke-linecap="round" stroke-linejoin="round"
d="M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z">
</path>
</svg>
<span
class="py-0.5 px-1.5 rounded-full text-xs font-medium bg-blue-50 border border-blue-950 text-blue-950">0</span>
</a>
<!--[if BLOCK]><![endif]--> <div class="">
<a wire:navigate
class="p-4 hover:border-b-4 hover:border-orange-500 flex items-center"
href="login">
<svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg"
width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
<circle cx="12" cy="7" r="4" />
</svg>
</a>
</div>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
</div>
</div>
</div>
</div>
</nav>
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</header>
<main class="flex-grow w-full max-w-7xl mx-auto px-4 md:px-0">
<div wire:snapshot="{"data":{"vodText":null,"vodRef":null,"vodAudio":null,"version":"NVI","vod":[null,{"class":"App\\Models\\Vod","key":9,"s":"mdl"}],"prayer":null,"background":"vod\/images\/dia-9.png","showDiv":true},"memo":{"id":"uSwP3d0NEZZsyyuYpqiY","name":"home-page","path":"\/","method":"GET","children":{"lw-2625387598-0":["div","sbvpEFg2Sqhe2YXPjBlM"],"lw-2625387598-1":["div","deWAqHDqtqeMwqNKZFxs"],"lw-2625387598-2":["div","KgGQPu1a7aXMMWNpAWqY"],"lw-2625387598-3":["div","i5nykOf0e30K7yWhlzrR"],"lw-2625387598-4":["div","sEbNkJ6nVUvs1UHWLEMV"],"lw-2625387598-5":["div","hsHiTaGuyhdTENHLbN0q"],"lw-2625387598-6":["div","3PUXGYNSUMGPVIaU53bS"],"lw-2625387598-7":["div","xOuJLZsCHpgwaF3qEjLM"],"lw-2625387598-8":["div","3ehcm66fde1QaME3g5rJ"]},"scripts":[],"assets":[],"errors":[],"locale":"en"},"checksum":"8efa80d7695e3443875efbfbe29a90175b47b9d9543fa2f48f59f895f19f56e7"}" wire:effects="[]" wire:id="uSwP3d0NEZZsyyuYpqiY" class="mt-8 relative">
<button wire:click="toggleVisibility"
class=" top-0 rounded-xl right-0 p-2 absolute text-white bg-gradient-to-t from-[#424040] to-black/50 z-20">
<!--[if BLOCK]><![endif]--> <svg class="shrink-0 [:where(&)]:size-6" data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88"/>
</svg>
<!--[if ENDBLOCK]><![endif]-->
</button>
<div wire:show="showDiv"
class="rounded-t-2xl w-full max-w-7xl mx-auto relative mt-8 shadow-2xl sm:min-h-[500px] h-72">
<!-- Video Background - Persisted separately -->
<video id="bgVideo" class="absolute top-0 left-0 w-full h-full rounded-t-2xl object-cover -z-20" autoplay muted
loop playsinline>
<source src="/storage/videos/Redentor-hero-video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<!-- Main Title Section - Now first on mobile -->
<div
class="w-1/2 rounded-tl-2xl h-full bg-gradient-to-l from-transparent to-black flex items-center">
<div class="text-4xl lg:text-8xl text-white font-black p-4 leading-tight">
<span class="block sm:inline">Full of Faith, Love and Hope</span>
</div>
</div>
</div>
<div class="w-full">
<div wire:snapshot="{"data":{"showDiv":true,"roundedLeft":"rounded-bl-2xl","roundedRight":"rounded-br-2xl","isHomepage":true},"memo":{"id":"sbvpEFg2Sqhe2YXPjBlM","name":"partials.persistent-radio-player","path":"\/","method":"GET","children":[],"scripts":[],"assets":[],"errors":[],"locale":"en"},"checksum":"d8632ab915d75f32d8626600d61acac7c9b1a93f5ca22ea5291f5dbcf7bc1620"}" wire:effects="{"listeners":["update-hero-visibility"]}" wire:id="sbvpEFg2Sqhe2YXPjBlM" class="w-full flex">
<div class="w-1/2 p-4 bg-[#F88139] text-white flex flex-col lg:flex-row justify-center items-center lg:justify-between rounded-bl-2xl">
<img class="h-10"
src="/storage/104_1_logo.png"
alt="104.1 fm Redentor">
<div class="ml-2">
<div class="hidden lg:block">Playing now:</div>
<div class="text-sm text-center" data-widget="mcp-custom-text" data-name="Redentor104.1FM" data-format="%nowplaying%">
</div>
</div>
<button id="playBtn" x-data="episodeRowComponent('104.1fm', {
id: '104.1fm',
title: 'Redentor 104.1fm',
host: 'Redentor',
playlist: '104.1fm',
image: '/storage/104_1_logo.png',
date: '08 02 2025',
file: 'https://livestreamcdn.net:2000/stream/Redentor104.1FM/stream',
type: 'stream',
src: 'https://livestreamcdn.net:2000/stream/Redentor104.1FM/stream'
})"
x-init="initEpisode()"
class="hover:scale-110 transition transform">
<div class="flex items-center" x-on:click="toggleEpisode">
<div x-show="!isCurrentEpisode || !$store.miniPlayer.isPlaying">
<svg class="w-10 h-10" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-play-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814z"/>
</svg> </div>
<div x-show="isCurrentEpisode && $store.miniPlayer.isPlaying">
<svg class="w-10 h-10" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pause-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M6.25 5C5.56 5 5 5.56 5 6.25v3.5a1.25 1.25 0 1 0 2.5 0v-3.5C7.5 5.56 6.94 5 6.25 5m3.5 0c-.69 0-1.25.56-1.25 1.25v3.5a1.25 1.25 0 1 0 2.5 0v-3.5C11 5.56 10.44 5 9.75 5"/>
</svg> </div>
</div>
</button>
</div>
<div class="w-1/2 p-4 bg-[#424040] text-white flex flex-col lg:flex-row justify-center items-center lg:justify-between rounded-br-2xl">
<img class="h-10"
src="/storage/104_3_logo.png"
alt="104.3 fm Redentor">
<div class="ml-2">
<div class="hidden lg:block">Playing now:</div>
<div class="text-sm" id='sonic_title'></div>
</div>
<button id="playBtn" x-data="episodeRowComponent('104.3fm', {
id: '104.3fm',
title: 'Redentor 104.3fm',
host: 'Redentor',
playlist: '104.3fm',
image: '/storage/104_3_logo.png',
date: '08 02 2025',
file: 'https://sp.unoredcdn.net/8048/stream',
type: 'stream',
src: 'https://sp.unoredcdn.net/8048/stream'
})"
x-init="initEpisode()"
class="hover:scale-110 transition transform">
<div class="flex items-center" x-on:click="toggleEpisode">
<div x-show="!isCurrentEpisode || !$store.miniPlayer.isPlaying">
<svg class="w-10 h-10" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-play-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M6.79 5.093A.5.5 0 0 0 6 5.5v5a.5.5 0 0 0 .79.407l3.5-2.5a.5.5 0 0 0 0-.814z"/>
</svg> </div>
<div x-show="isCurrentEpisode && $store.miniPlayer.isPlaying">
<svg class="w-10 h-10" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pause-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M6.25 5C5.56 5 5 5.56 5 6.25v3.5a1.25 1.25 0 1 0 2.5 0v-3.5C7.5 5.56 6.94 5 6.25 5m3.5 0c-.69 0-1.25.56-1.25 1.25v3.5a1.25 1.25 0 1 0 2.5 0v-3.5C11 5.56 10.44 5 9.75 5"/>
</svg> </div>
</div>
</button>
</div>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4 my-8">
<div class="rounded-2xl aspect-square flex justify-center items-center "
style="background-image: url('https://redentor104fm.com/storage/vod/images/dia-9.png'); background-size: cover; background-position: center;" >
<div class="text-white p-4 text-center lg:text-left ">
<div class="text-sm sm:text-base lg:text-lg"></div>
<div class="text-right mt-4 lg:mt-10 text-xs sm:text-sm lg:text-base"></div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
</div>
<div wire:snapshot="{"data":{"djs":[null,{"keys":[1,2,3,4],"class":"Illuminate\\Database\\Eloquent\\Collection","modelClass":"App\\Models\\Dj","s":"elcln"}],"images":[[[{"src":"\/storage\/images\/djs\/promolisandranew.png","alt":"Lisandra Mont","title":"Lisandra Mont","description":"S\u00e1bados 10:00am - 3:00pm"},{"s":"arr"}],[{"src":"\/storage\/images\/djs\/promolmnew.png","alt":"Laura Mercado","title":"Laura Mercado","description":"Lunes a Viernes 10:00am - 2:00pm"},{"s":"arr"}],[{"src":"\/storage\/images\/djs\/promoerjrnew.png","alt":"Eddie R. Jr.","title":"Eddie R. Jr.","description":"Lunes a Viernes 2:00pm - 6:00pm"},{"s":"arr"}],[{"src":"\/storage\/images\/djs\/promojmtnew.png","alt":"Jes\u00fas Manuel Torres","title":"Jes\u00fas Manuel Torres","description":"Lunes a Viernes 6:00am - 10:00am"},{"s":"arr"}]],{"s":"arr"}]},"memo":{"id":"deWAqHDqtqeMwqNKZFxs","name":"partials.djs-section","path":"\/","method":"GET","children":{"lw-2532239519-0":["div","PEXSofYh6fxZSzJDqD0U"]},"scripts":[],"assets":[],"errors":[],"locale":"en"},"checksum":"a0b3d34e283e8ae18241bf4980d4b53d392f7bb3bfab051114b74e4ce02cdb39"}" wire:effects="[]" wire:id="deWAqHDqtqeMwqNKZFxs">
<div class="rounded-2xl">
<div wire:snapshot="{"data":{"images":[[[{"src":"\/storage\/images\/djs\/promolisandranew.png","alt":"Lisandra Mont","title":"Lisandra Mont","description":"S\u00e1bados 10:00am - 3:00pm"},{"s":"arr"}],[{"src":"\/storage\/images\/djs\/promolmnew.png","alt":"Laura Mercado","title":"Laura Mercado","description":"Lunes a Viernes 10:00am - 2:00pm"},{"s":"arr"}],[{"src":"\/storage\/images\/djs\/promoerjrnew.png","alt":"Eddie R. Jr.","title":"Eddie R. Jr.","description":"Lunes a Viernes 2:00pm - 6:00pm"},{"s":"arr"}],[{"src":"\/storage\/images\/djs\/promojmtnew.png","alt":"Jes\u00fas Manuel Torres","title":"Jes\u00fas Manuel Torres","description":"Lunes a Viernes 6:00am - 10:00am"},{"s":"arr"}]],{"s":"arr"}],"currentSlide":0,"autoPlay":true,"autoPlayInterval":3500,"showDots":true,"showArrows":true,"roundedBorder":"rounded-2xl","showControls":false,"showOverlay":false,"maxHeight":"500","componentId":"slider_688e173e46793","link":""},"memo":{"id":"PEXSofYh6fxZSzJDqD0U","name":"partials.imageslider","path":"\/","method":"GET","children":[],"scripts":[],"assets":[],"errors":[],"locale":"en"},"checksum":"7e7926d2d22b83d7ce7d11ab26fad187c5dea44cba7d7a3d76b4b6e192d7b956"}" wire:effects="[]" wire:id="PEXSofYh6fxZSzJDqD0U" class="relative w-full max-w-6xl mx-auto bg-gray-900 rounded-2xl overflow-hidden"
x-data="imageSlider({
componentId: 'slider_688e173e46793',
initialSlide: 0,
autoPlay: true,
autoPlayInterval: 3500,
totalSlides: 4,
hasMultipleSlides: true
})"
x-init="init()"
@mouseenter="stopAutoPlay()"
@mouseleave="startAutoPlay()"
@touchstart="stopAutoPlay()"
@touchend="startAutoPlay()"
id="slider_688e173e46793">
<!-- Main Slider Container -->
<div class="relative w-full overflow-hidden aspect-square">
<!-- Images Container with proper transform -->
<div class="flex transition-transform duration-500 ease-in-out h-full"
:style="`transform: translateX(-${currentSlide * 100}%)`">
<!--[if BLOCK]><![endif]--> <a href="/programacion">
<div wire:key="0" class="w-full h-full flex-shrink-0 relative">
<img wire:key="/storage/images/djs/promolisandranew.png" src="/storage/images/djs/promolisandranew.png"
alt="Lisandra Mont"
class="w-full h-full object-cover"
loading="eager"
>
</a>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<a href="/programacion">
<div wire:key="1" class="w-full h-full flex-shrink-0 relative">
<img wire:key="/storage/images/djs/promolmnew.png" src="/storage/images/djs/promolmnew.png"
alt="Laura Mercado"
class="w-full h-full object-cover"
loading="lazy"
>
</a>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<a href="/programacion">
<div wire:key="2" class="w-full h-full flex-shrink-0 relative">
<img wire:key="/storage/images/djs/promoerjrnew.png" src="/storage/images/djs/promoerjrnew.png"
alt="Eddie R. Jr."
class="w-full h-full object-cover"
loading="lazy"
>
</a>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<a href="/programacion">
<div wire:key="3" class="w-full h-full flex-shrink-0 relative">
<img wire:key="/storage/images/djs/promojmtnew.png" src="/storage/images/djs/promojmtnew.png"
alt="Jesús Manuel Torres"
class="w-full h-full object-cover"
loading="lazy"
>
</a>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<!-- Navigation Arrows -->
<!--[if BLOCK]><![endif]--> <!-- Previous Arrow -->
<button @click="prevSlide()"
class="absolute left-2 sm:left-4 top-1/2 transform -translate-y-1/2 bg-white/20 hover:bg-white/30 backdrop-blur-sm text-white p-2 sm:p-3 rounded-full transition-all duration-300 hover:scale-110 focus:outline-none focus:ring-2 focus:ring-white/50 z-10 group">
<svg class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 transition-transform group-hover:-translate-x-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
</svg>
</button>
<!-- Next Arrow -->
<button @click="nextSlide()"
class="absolute right-2 sm:right-4 top-1/2 transform -translate-y-1/2 bg-white/20 hover:bg-white/30 backdrop-blur-sm text-white p-2 sm:p-3 rounded-full transition-all duration-300 hover:scale-110 focus:outline-none focus:ring-2 focus:ring-white/50 z-10 group">
<svg class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 transition-transform group-hover:translate-x-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</button>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- Slide Progress Bar -->
<!--[if BLOCK]><![endif]--> <div class="absolute bottom-0 left-0 w-full h-1 bg-white/20">
<div class="h-full bg-white transition-all duration-300 ease-out"
:style="`width: ${((currentSlide + 1) / totalSlides) * 100}%`"></div>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- Touch/Swipe Support -->
</div>
</div>
</div> <div wire:snapshot="{"data":{"program":null,"images":[[[{"src":"\/storage\/images\/programs\/biblika-5.png","alt":"Biblikka","title":"Biblikka","description":"Lunes a las 9am","type":"image"},{"s":"arr"}],[{"src":"\/storage\/images\/programs\/pva-1.png","alt":"Pensando en voz alta","title":"Pensando en voz alta","description":"Martes a las 9am","type":"image"},{"s":"arr"}],[{"src":"\/storage\/images\/programs\/reflexiones-de-esperanza-2.png","alt":"Reflexi\u00f3nes de Esperanza","title":"Reflexi\u00f3nes de Esperanza","description":"Viernes a las 9am","type":"image"},{"s":"arr"}],[{"src":"\/storage\/images\/programs\/victoria-en-tu-crisis-5.png","alt":"Victoria en tu crisis","title":"Victoria en tu crisis","description":"Lunes a Viernes a las 4:30pm","type":"image"},{"s":"arr"}],[{"src":"\/storage\/images\/programs\/tiempo-de-sanidad-con-el-pastor-moises-roman-7.png","alt":"Tiempo de Sanaci\u00f3n","title":"Tiempo de Sanaci\u00f3n","description":"Mi\u00e9rcoles a las 9pm con el Pastor Mois\u00e9s Rom\u00e1n","type":"image"},{"s":"arr"}],[{"src":"\/storage\/images\/programs\/pasion-100x35-8.png","alt":"Pasi\u00f3n 100 x 35","title":"Pasi\u00f3n 100 x 35","description":"Con el Pastor Tito Cab\u00e1n","type":"image"},{"s":"arr"}]],{"s":"arr"}]},"memo":{"id":"KgGQPu1a7aXMMWNpAWqY","name":"partials.programs-section","path":"\/","method":"GET","children":{"lw-2613820782-0":["div","dEwW2micALh9IjOZXAVF"]},"scripts":[],"assets":[],"errors":[],"locale":"en"},"checksum":"c635f3508ae1e33a78f5b54d3e2737d7038c484e7a548da4eaeeab430b4d67c1"}" wire:effects="[]" wire:id="KgGQPu1a7aXMMWNpAWqY">
<div wire:snapshot="{"data":{"images":[[[{"src":"\/storage\/images\/programs\/biblika-5.png","alt":"Biblikka","title":"Biblikka","description":"Lunes a las 9am","type":"image"},{"s":"arr"}],[{"src":"\/storage\/images\/programs\/pva-1.png","alt":"Pensando en voz alta","title":"Pensando en voz alta","description":"Martes a las 9am","type":"image"},{"s":"arr"}],[{"src":"\/storage\/images\/programs\/reflexiones-de-esperanza-2.png","alt":"Reflexi\u00f3nes de Esperanza","title":"Reflexi\u00f3nes de Esperanza","description":"Viernes a las 9am","type":"image"},{"s":"arr"}],[{"src":"\/storage\/images\/programs\/victoria-en-tu-crisis-5.png","alt":"Victoria en tu crisis","title":"Victoria en tu crisis","description":"Lunes a Viernes a las 4:30pm","type":"image"},{"s":"arr"}],[{"src":"\/storage\/images\/programs\/tiempo-de-sanidad-con-el-pastor-moises-roman-7.png","alt":"Tiempo de Sanaci\u00f3n","title":"Tiempo de Sanaci\u00f3n","description":"Mi\u00e9rcoles a las 9pm con el Pastor Mois\u00e9s Rom\u00e1n","type":"image"},{"s":"arr"}],[{"src":"\/storage\/images\/programs\/pasion-100x35-8.png","alt":"Pasi\u00f3n 100 x 35","title":"Pasi\u00f3n 100 x 35","description":"Con el Pastor Tito Cab\u00e1n","type":"image"},{"s":"arr"}]],{"s":"arr"}],"currentSlide":0,"autoPlay":true,"autoPlayInterval":3000,"showDots":true,"showArrows":true,"roundedBorder":"rounded-2xl","showControls":false,"showOverlay":false,"maxHeight":"500","componentId":"slider_688e173e48cfb","link":"\/programacion"},"memo":{"id":"dEwW2micALh9IjOZXAVF","name":"partials.imageslider","path":"\/","method":"GET","children":[],"scripts":[],"assets":[],"errors":[],"locale":"en"},"checksum":"f8712fe6e98dcfee141579b827f6b8094aa19be53e3abb8ca28297dc323e457f"}" wire:effects="[]" wire:id="dEwW2micALh9IjOZXAVF" class="relative w-full max-w-6xl mx-auto bg-gray-900 rounded-2xl overflow-hidden"
x-data="imageSlider({
componentId: 'slider_688e173e48cfb',
initialSlide: 0,
autoPlay: true,
autoPlayInterval: 3000,
totalSlides: 6,
hasMultipleSlides: true
})"
x-init="init()"
@mouseenter="stopAutoPlay()"
@mouseleave="startAutoPlay()"
@touchstart="stopAutoPlay()"
@touchend="startAutoPlay()"
id="slider_688e173e48cfb">
<!-- Main Slider Container -->
<div class="relative w-full overflow-hidden aspect-square">
<!-- Images Container with proper transform -->
<div class="flex transition-transform duration-500 ease-in-out h-full"
:style="`transform: translateX(-${currentSlide * 100}%)`">
<!--[if BLOCK]><![endif]--> <a href="/programacion">
<div wire:key="0" class="w-full h-full flex-shrink-0 relative">
<img wire:key="/storage/images/programs/biblika-5.png" src="/storage/images/programs/biblika-5.png"
alt="Biblikka"
class="w-full h-full object-cover"
loading="eager"
>
</a>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<a href="/programacion">
<div wire:key="1" class="w-full h-full flex-shrink-0 relative">
<img wire:key="/storage/images/programs/pva-1.png" src="/storage/images/programs/pva-1.png"
alt="Pensando en voz alta"
class="w-full h-full object-cover"
loading="lazy"
>
</a>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<a href="/programacion">
<div wire:key="2" class="w-full h-full flex-shrink-0 relative">
<img wire:key="/storage/images/programs/reflexiones-de-esperanza-2.png" src="/storage/images/programs/reflexiones-de-esperanza-2.png"
alt="Reflexiónes de Esperanza"
class="w-full h-full object-cover"
loading="lazy"
>
</a>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<a href="/programacion">
<div wire:key="3" class="w-full h-full flex-shrink-0 relative">
<img wire:key="/storage/images/programs/victoria-en-tu-crisis-5.png" src="/storage/images/programs/victoria-en-tu-crisis-5.png"
alt="Victoria en tu crisis"
class="w-full h-full object-cover"
loading="lazy"
>
</a>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<a href="/programacion">
<div wire:key="4" class="w-full h-full flex-shrink-0 relative">
<img wire:key="/storage/images/programs/tiempo-de-sanidad-con-el-pastor-moises-roman-7.png" src="/storage/images/programs/tiempo-de-sanidad-con-el-pastor-moises-roman-7.png"
alt="Tiempo de Sanación"
class="w-full h-full object-cover"
loading="lazy"
>
</a>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<a href="/programacion">
<div wire:key="5" class="w-full h-full flex-shrink-0 relative">
<img wire:key="/storage/images/programs/pasion-100x35-8.png" src="/storage/images/programs/pasion-100x35-8.png"
alt="Pasión 100 x 35"
class="w-full h-full object-cover"
loading="lazy"
>
</a>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<!-- Navigation Arrows -->
<!--[if BLOCK]><![endif]--> <!-- Previous Arrow -->
<button @click="prevSlide()"
class="absolute left-2 sm:left-4 top-1/2 transform -translate-y-1/2 bg-white/20 hover:bg-white/30 backdrop-blur-sm text-white p-2 sm:p-3 rounded-full transition-all duration-300 hover:scale-110 focus:outline-none focus:ring-2 focus:ring-white/50 z-10 group">
<svg class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 transition-transform group-hover:-translate-x-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
</svg>
</button>
<!-- Next Arrow -->
<button @click="nextSlide()"
class="absolute right-2 sm:right-4 top-1/2 transform -translate-y-1/2 bg-white/20 hover:bg-white/30 backdrop-blur-sm text-white p-2 sm:p-3 rounded-full transition-all duration-300 hover:scale-110 focus:outline-none focus:ring-2 focus:ring-white/50 z-10 group">
<svg class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 transition-transform group-hover:translate-x-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</button>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--> <a href="/programacion">/programacion</a><!--[if ENDBLOCK]><![endif]-->
<!-- Slide Progress Bar -->
<!--[if BLOCK]><![endif]--> <div class="absolute bottom-0 left-0 w-full h-1 bg-white/20">
<div class="h-full bg-white transition-all duration-300 ease-out"
:style="`width: ${((currentSlide + 1) / totalSlides) * 100}%`"></div>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- Touch/Swipe Support -->
</div>
</div> </div>
<!-- Ad section -->
<div
class="w-fit object-cover mx-auto my-10 hover:shadow-lg hover:scale-110 transform translate-y-3 group-hover:translate-y-0 group-hover:opacity-100 transition">
<a href="https://homepowerpr.com" target="_black">
<img class="w-full" src="https://redentor104fm.com/storage/images/900x200-Redentor.webp" alt="">
</a>
</div>
<!-- end Ad section -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4 my-8">
<div wire:snapshot="{"data":{"channel":null,"images":[[[{"src":"\/storage\/images\/programs\/victoria-en-tu-crisis-5.png","alt":"Victoria es tu crisis","title":"Victoria es tu crisis","description":"<p>Secci\u00f3n Victoria en tu Crisis. De Lunes a Viernes a las 5:00 pm.<\/p>"},{"s":"arr"}],[{"src":"\/storage\/images\/programs\/pva-1.png","alt":"Pensando En Voz Alta","title":"Pensando En Voz Alta","description":"<p>Pensando En Voz Alta con el Pastor Jes\u00fas Rivera. Todos los martes a las 9 am.<\/p>"},{"s":"arr"}],[{"src":"\/storage\/images\/programs\/tiempo-de-sanidad-con-el-pastor-moises-roman-7.png","alt":"Tiempo de Sanaci\u00f3n","title":"Tiempo de Sanaci\u00f3n","description":"<p>Tiempo de Sanaci\u00f3n con el Pastor Mois\u00e9s Rom\u00e1n. Todos los mi\u00e9rcoles a las 9 am.<\/p>"},{"s":"arr"}],[{"src":"\/storage\/images\/programs\/reflexiones-de-esperanza-2.png","alt":"Reflexiones de Esperanza","title":"Reflexiones de Esperanza","description":"<p>Reflexiones de Esperanza. Con el Pastor Mizraim Esquil\u00edn. Todos los Viernes a las 9 am.<\/p>"},{"s":"arr"}],[{"src":"\/storage\/images\/channels\/redentorondemand-1080-x-1080-px.png","alt":"Directo Al Coraz\u00f3n","title":"Directo Al Coraz\u00f3n","description":"<p>Directo Al Coraz\u00f3n con el Pastor Jes\u00fas Manuel Torres. De lunes a viernes a las 6 am.<\/p>"},{"s":"arr"}],[{"src":"\/storage\/images\/channels\/redentorondemand-1080-x-1080-px.png","alt":"La Canci\u00f3n De Tu Coraz\u00f3n","title":"La Canci\u00f3n De Tu Coraz\u00f3n","description":"<p>La Canci\u00f3n De Tu Coraz\u00f3n con Sheila Romero.<\/p>"},{"s":"arr"}],[{"src":"\/storage\/images\/channels\/redentorondemand-1080-x-1080-px.png","alt":"Dialogo y Cuidado Pastoral","title":"Dialogo y Cuidado Pastoral","description":"<p>Dialogo y Cuidado Pastoral con el Pastor Jes\u00fas Rivera.<\/p>"},{"s":"arr"}],[{"src":"\/storage\/galleries\/uploads\/2022\/11\/JESUS-MANUEL-2-600x503.webp","alt":"Jes\u00fas Manuel Torres","title":"Jes\u00fas Manuel Torres","description":"<p>Pastor Jes\u00fas Manuel Torres<\/p>"},{"s":"arr"}]],{"s":"arr"}],"items":[[[{"src":"\/storage\/images\/RedentorOnDemand.png","alt":"Promo OnDemand","title":"","description":""},{"s":"arr"}],[{"src":"\/storage\/images\/programs\/victoria-en-tu-crisis-5.png","alt":"Victoria es tu crisis","title":"Victoria es tu crisis","description":"<p>Secci\u00f3n Victoria en tu Crisis. De Lunes a Viernes a las 5:00 pm.<\/p>"},{"s":"arr"}],[{"src":"\/storage\/images\/programs\/pva-1.png","alt":"Pensando En Voz Alta","title":"Pensando En Voz Alta","description":"<p>Pensando En Voz Alta con el Pastor Jes\u00fas Rivera. Todos los martes a las 9 am.<\/p>"},{"s":"arr"}],[{"src":"\/storage\/images\/programs\/tiempo-de-sanidad-con-el-pastor-moises-roman-7.png","alt":"Tiempo de Sanaci\u00f3n","title":"Tiempo de Sanaci\u00f3n","description":"<p>Tiempo de Sanaci\u00f3n con el Pastor Mois\u00e9s Rom\u00e1n. Todos los mi\u00e9rcoles a las 9 am.<\/p>"},{"s":"arr"}],[{"src":"\/storage\/images\/programs\/reflexiones-de-esperanza-2.png","alt":"Reflexiones de Esperanza","title":"Reflexiones de Esperanza","description":"<p>Reflexiones de Esperanza. Con el Pastor Mizraim Esquil\u00edn. Todos los Viernes a las 9 am.<\/p>"},{"s":"arr"}],[{"src":"\/storage\/images\/channels\/redentorondemand-1080-x-1080-px.png","alt":"Directo Al Coraz\u00f3n","title":"Directo Al Coraz\u00f3n","description":"<p>Directo Al Coraz\u00f3n con el Pastor Jes\u00fas Manuel Torres. De lunes a viernes a las 6 am.<\/p>"},{"s":"arr"}],[{"src":"\/storage\/images\/channels\/redentorondemand-1080-x-1080-px.png","alt":"La Canci\u00f3n De Tu Coraz\u00f3n","title":"La Canci\u00f3n De Tu Coraz\u00f3n","description":"<p>La Canci\u00f3n De Tu Coraz\u00f3n con Sheila Romero.<\/p>"},{"s":"arr"}],[{"src":"\/storage\/images\/channels\/redentorondemand-1080-x-1080-px.png","alt":"Dialogo y Cuidado Pastoral","title":"Dialogo y Cuidado Pastoral","description":"<p>Dialogo y Cuidado Pastoral con el Pastor Jes\u00fas Rivera.<\/p>"},{"s":"arr"}],[{"src":"\/storage\/galleries\/uploads\/2022\/11\/JESUS-MANUEL-2-600x503.webp","alt":"Jes\u00fas Manuel Torres","title":"Jes\u00fas Manuel Torres","description":"<p>Pastor Jes\u00fas Manuel Torres<\/p>"},{"s":"arr"}]],{"s":"arr"}]},"memo":{"id":"i5nykOf0e30K7yWhlzrR","name":"partials.ondemand-section","path":"\/","method":"GET","children":{"lw-3622807387-0":["div","WyUEOS6npbAgGr4bBg8v"]},"scripts":[],"assets":[],"errors":[],"locale":"en"},"checksum":"22319c53f5cc945b214479f35d337979c92036e2bb539592a70ee8098a97b39f"}" wire:effects="[]" wire:id="i5nykOf0e30K7yWhlzrR" wire:ignore >
<div class="my-8">
<h2 class="h-16 py-4 text-3xl font-bold"> On Demand</h2>
<div wire:snapshot="{"data":{"images":[[[{"src":"\/storage\/images\/RedentorOnDemand.png","alt":"Promo OnDemand","title":"","description":""},{"s":"arr"}],[{"src":"\/storage\/images\/programs\/victoria-en-tu-crisis-5.png","alt":"Victoria es tu crisis","title":"Victoria es tu crisis","description":"<p>Secci\u00f3n Victoria en tu Crisis. De Lunes a Viernes a las 5:00 pm.<\/p>"},{"s":"arr"}],[{"src":"\/storage\/images\/programs\/pva-1.png","alt":"Pensando En Voz Alta","title":"Pensando En Voz Alta","description":"<p>Pensando En Voz Alta con el Pastor Jes\u00fas Rivera. Todos los martes a las 9 am.<\/p>"},{"s":"arr"}],[{"src":"\/storage\/images\/programs\/tiempo-de-sanidad-con-el-pastor-moises-roman-7.png","alt":"Tiempo de Sanaci\u00f3n","title":"Tiempo de Sanaci\u00f3n","description":"<p>Tiempo de Sanaci\u00f3n con el Pastor Mois\u00e9s Rom\u00e1n. Todos los mi\u00e9rcoles a las 9 am.<\/p>"},{"s":"arr"}],[{"src":"\/storage\/images\/programs\/reflexiones-de-esperanza-2.png","alt":"Reflexiones de Esperanza","title":"Reflexiones de Esperanza","description":"<p>Reflexiones de Esperanza. Con el Pastor Mizraim Esquil\u00edn. Todos los Viernes a las 9 am.<\/p>"},{"s":"arr"}],[{"src":"\/storage\/images\/channels\/redentorondemand-1080-x-1080-px.png","alt":"Directo Al Coraz\u00f3n","title":"Directo Al Coraz\u00f3n","description":"<p>Directo Al Coraz\u00f3n con el Pastor Jes\u00fas Manuel Torres. De lunes a viernes a las 6 am.<\/p>"},{"s":"arr"}],[{"src":"\/storage\/images\/channels\/redentorondemand-1080-x-1080-px.png","alt":"La Canci\u00f3n De Tu Coraz\u00f3n","title":"La Canci\u00f3n De Tu Coraz\u00f3n","description":"<p>La Canci\u00f3n De Tu Coraz\u00f3n con Sheila Romero.<\/p>"},{"s":"arr"}],[{"src":"\/storage\/images\/channels\/redentorondemand-1080-x-1080-px.png","alt":"Dialogo y Cuidado Pastoral","title":"Dialogo y Cuidado Pastoral","description":"<p>Dialogo y Cuidado Pastoral con el Pastor Jes\u00fas Rivera.<\/p>"},{"s":"arr"}],[{"src":"\/storage\/galleries\/uploads\/2022\/11\/JESUS-MANUEL-2-600x503.webp","alt":"Jes\u00fas Manuel Torres","title":"Jes\u00fas Manuel Torres","description":"<p>Pastor Jes\u00fas Manuel Torres<\/p>"},{"s":"arr"}]],{"s":"arr"}],"currentSlide":0,"autoPlay":true,"autoPlayInterval":5000,"showDots":true,"showArrows":true,"roundedBorder":"rounded-2xl","showControls":false,"showOverlay":false,"maxHeight":"500","componentId":"slider_688e173e4add5","link":"\/programacion"},"memo":{"id":"WyUEOS6npbAgGr4bBg8v","name":"partials.imageslider","path":"\/","method":"GET","children":[],"scripts":[],"assets":[],"errors":[],"locale":"en"},"checksum":"d726dbd306aa47fa66a7a780464bf8c92737771ee4be7dd351ed4e084222bc7c"}" wire:effects="[]" wire:id="WyUEOS6npbAgGr4bBg8v" class="relative w-full max-w-6xl mx-auto bg-gray-900 rounded-2xl overflow-hidden"
x-data="imageSlider({
componentId: 'slider_688e173e4add5',
initialSlide: 0,
autoPlay: true,
autoPlayInterval: 5000,
totalSlides: 9,
hasMultipleSlides: true
})"
x-init="init()"
@mouseenter="stopAutoPlay()"
@mouseleave="startAutoPlay()"
@touchstart="stopAutoPlay()"
@touchend="startAutoPlay()"
id="slider_688e173e4add5">
<!-- Main Slider Container -->
<div class="relative w-full overflow-hidden aspect-square">
<!-- Images Container with proper transform -->
<div class="flex transition-transform duration-500 ease-in-out h-full"
:style="`transform: translateX(-${currentSlide * 100}%)`">
<!--[if BLOCK]><![endif]--> <a href="/programacion">
<div wire:key="0" class="w-full h-full flex-shrink-0 relative">
<img wire:key="/storage/images/RedentorOnDemand.png" src="/storage/images/RedentorOnDemand.png"
alt="Promo OnDemand"
class="w-full h-full object-cover"
loading="eager"
>
</a>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<a href="/programacion">
<div wire:key="1" class="w-full h-full flex-shrink-0 relative">
<img wire:key="/storage/images/programs/victoria-en-tu-crisis-5.png" src="/storage/images/programs/victoria-en-tu-crisis-5.png"
alt="Victoria es tu crisis"
class="w-full h-full object-cover"
loading="lazy"
>
</a>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<a href="/programacion">
<div wire:key="2" class="w-full h-full flex-shrink-0 relative">
<img wire:key="/storage/images/programs/pva-1.png" src="/storage/images/programs/pva-1.png"
alt="Pensando En Voz Alta"
class="w-full h-full object-cover"
loading="lazy"
>
</a>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<a href="/programacion">
<div wire:key="3" class="w-full h-full flex-shrink-0 relative">
<img wire:key="/storage/images/programs/tiempo-de-sanidad-con-el-pastor-moises-roman-7.png" src="/storage/images/programs/tiempo-de-sanidad-con-el-pastor-moises-roman-7.png"
alt="Tiempo de Sanación"
class="w-full h-full object-cover"
loading="lazy"
>
</a>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<a href="/programacion">
<div wire:key="4" class="w-full h-full flex-shrink-0 relative">
<img wire:key="/storage/images/programs/reflexiones-de-esperanza-2.png" src="/storage/images/programs/reflexiones-de-esperanza-2.png"
alt="Reflexiones de Esperanza"
class="w-full h-full object-cover"
loading="lazy"
>
</a>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<a href="/programacion">
<div wire:key="5" class="w-full h-full flex-shrink-0 relative">
<img wire:key="/storage/images/channels/redentorondemand-1080-x-1080-px.png" src="/storage/images/channels/redentorondemand-1080-x-1080-px.png"
alt="Directo Al Corazón"
class="w-full h-full object-cover"
loading="lazy"
>
</a>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<a href="/programacion">
<div wire:key="6" class="w-full h-full flex-shrink-0 relative">
<img wire:key="/storage/images/channels/redentorondemand-1080-x-1080-px.png" src="/storage/images/channels/redentorondemand-1080-x-1080-px.png"
alt="La Canción De Tu Corazón"
class="w-full h-full object-cover"
loading="lazy"
>
</a>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<a href="/programacion">
<div wire:key="7" class="w-full h-full flex-shrink-0 relative">
<img wire:key="/storage/images/channels/redentorondemand-1080-x-1080-px.png" src="/storage/images/channels/redentorondemand-1080-x-1080-px.png"
alt="Dialogo y Cuidado Pastoral"
class="w-full h-full object-cover"
loading="lazy"
>
</a>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<a href="/programacion">
<div wire:key="8" class="w-full h-full flex-shrink-0 relative">
<img wire:key="/storage/galleries/uploads/2022/11/JESUS-MANUEL-2-600x503.webp" src="/storage/galleries/uploads/2022/11/JESUS-MANUEL-2-600x503.webp"
alt="Jesús Manuel Torres"
class="w-full h-full object-cover"
loading="lazy"
>
</a>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<!-- Navigation Arrows -->
<!--[if BLOCK]><![endif]--> <!-- Previous Arrow -->
<button @click="prevSlide()"
class="absolute left-2 sm:left-4 top-1/2 transform -translate-y-1/2 bg-white/20 hover:bg-white/30 backdrop-blur-sm text-white p-2 sm:p-3 rounded-full transition-all duration-300 hover:scale-110 focus:outline-none focus:ring-2 focus:ring-white/50 z-10 group">
<svg class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 transition-transform group-hover:-translate-x-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
</svg>
</button>
<!-- Next Arrow -->
<button @click="nextSlide()"
class="absolute right-2 sm:right-4 top-1/2 transform -translate-y-1/2 bg-white/20 hover:bg-white/30 backdrop-blur-sm text-white p-2 sm:p-3 rounded-full transition-all duration-300 hover:scale-110 focus:outline-none focus:ring-2 focus:ring-white/50 z-10 group">
<svg class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 transition-transform group-hover:translate-x-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</button>
<!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--> <a href="/programacion">/programacion</a><!--[if ENDBLOCK]><![endif]-->
<!-- Slide Progress Bar -->
<!--[if BLOCK]><![endif]--> <div class="absolute bottom-0 left-0 w-full h-1 bg-white/20">
<div class="h-full bg-white transition-all duration-300 ease-out"
:style="`width: ${((currentSlide + 1) / totalSlides) * 100}%`"></div>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- Touch/Swipe Support -->
</div>
</div>
</div> <div wire:snapshot="{"data":{"channel":null,"images":[[],{"s":"arr"}],"items":[[[{"src":"\/storage\/images\/podcast.jpeg","alt":"Podcast","title":"","description":""},{"s":"arr"}]],{"s":"arr"}]},"memo":{"id":"sEbNkJ6nVUvs1UHWLEMV","name":"partials.podcast-section","path":"\/","method":"GET","children":{"lw-3546900354-0":["div","AQV75fyZMlvQDkR5ldbn"]},"scripts":[],"assets":[],"errors":[],"locale":"en"},"checksum":"a0e4276f59462bf67ea7d5dc588162fe56fccdd55b93b0dd2f9f84805728269f"}" wire:effects="[]" wire:id="sEbNkJ6nVUvs1UHWLEMV" wire:ignore >
<div class="my-8">
<h2 class="h-16 py-4 text-3xl font-bold"> Podcasts</h2>
<div wire:snapshot="{"data":{"images":[[[{"src":"\/storage\/images\/podcast.jpeg","alt":"Podcast","title":"","description":""},{"s":"arr"}]],{"s":"arr"}],"currentSlide":0,"autoPlay":true,"autoPlayInterval":5000,"showDots":true,"showArrows":true,"roundedBorder":"rounded-2xl","showControls":false,"showOverlay":false,"maxHeight":"500","componentId":"slider_688e173e4bc77","link":""},"memo":{"id":"AQV75fyZMlvQDkR5ldbn","name":"partials.imageslider","path":"\/","method":"GET","children":[],"scripts":[],"assets":[],"errors":[],"locale":"en"},"checksum":"854d7526ccd660253fc3d2bbfc9c02bd51eaf8cfd28562584a54c9a03274b091"}" wire:effects="[]" wire:id="AQV75fyZMlvQDkR5ldbn" class="relative w-full max-w-6xl mx-auto bg-gray-900 rounded-2xl overflow-hidden"
x-data="imageSlider({
componentId: 'slider_688e173e4bc77',
initialSlide: 0,
autoPlay: true,
autoPlayInterval: 5000,
totalSlides: 1,
hasMultipleSlides: false
})"
x-init="init()"
@mouseenter="stopAutoPlay()"
@mouseleave="startAutoPlay()"
@touchstart="stopAutoPlay()"
@touchend="startAutoPlay()"
id="slider_688e173e4bc77">
<!-- Main Slider Container -->
<div class="relative w-full overflow-hidden aspect-square">
<!-- Images Container with proper transform -->
<div class="flex transition-transform duration-500 ease-in-out h-full"
:style="`transform: translateX(-${currentSlide * 100}%)`">
<!--[if BLOCK]><![endif]--> <a href="/programacion">
<div wire:key="0" class="w-full h-full flex-shrink-0 relative">
<img wire:key="/storage/images/podcast.jpeg" src="/storage/images/podcast.jpeg"
alt="Podcast"
class="w-full h-full object-cover"
loading="eager"
>
</a>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<!-- Navigation Arrows -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- Slide Progress Bar -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- Touch/Swipe Support -->
</div>
</div>
</div> <div wire:snapshot="{"data":{"infographics":[null,{"keys":[1,2],"class":"Illuminate\\Database\\Eloquent\\Collection","modelClass":"App\\Models\\Infographic","s":"elcln"}],"items":[[[{"src":"\/storage\/videos\/infografia-redentor.mp4","alt":null,"title":null,"description":"Promo","type":"video","link":null},{"s":"arr"}],[{"src":"\/storage\/images\/djs\/promolmnew.png","alt":null,"title":null,"description":"Test","type":"image","link":null},{"s":"arr"}]],{"s":"arr"}]},"memo":{"id":"hsHiTaGuyhdTENHLbN0q","name":"partials.infographics-section","path":"\/","method":"GET","children":{"lw-539112900-0":["div","5c1c0ZSwT9t5rPi5RNUE"]},"scripts":[],"assets":[],"errors":[],"locale":"en"},"checksum":"d1d9977da2bbe9e6bfaeaaab40b7b3f5df90fa3bb628f2ad0bb4cd54cfa22dae"}" wire:effects="[]" wire:id="hsHiTaGuyhdTENHLbN0q">
<div class="my-8">
<h2 class="h-16 py-4 text-3xl font-bold"> </h2>
<div wire:snapshot="{"data":{"items":[[[{"src":"\/storage\/videos\/infografia-redentor.mp4","alt":null,"title":null,"description":"Promo","type":"video","link":null},{"s":"arr"}],[{"src":"\/storage\/images\/djs\/promolmnew.png","alt":null,"title":null,"description":"Test","type":"image","link":null},{"s":"arr"}]],{"s":"arr"}],"currentSlide":0,"autoPlay":true,"autoPlayInterval":5000,"showDots":true,"showArrows":true,"roundedBorder":"rounded-2xl","showControls":true,"showOverlay":false,"maxHeight":"500","componentId":"slider_688e173e4ce04","link":"#"},"memo":{"id":"5c1c0ZSwT9t5rPi5RNUE","name":"partials.multimediaslider","path":"\/","method":"GET","children":[],"scripts":[],"assets":[],"errors":[],"locale":"en"},"checksum":"ea496a2a9fd502e71d511cfbad75b03b518a7d23ccbdd9f9ca84945833531740"}" wire:effects="[]" wire:id="5c1c0ZSwT9t5rPi5RNUE" class="relative w-full max-w-6xl mx-auto bg-gray-900 rounded-2xl overflow-hidden group"
x-data="multimediaSlider({
componentId: 'slider_688e173e4ce04',
initialSlide: 0,
autoPlay: true,
autoPlayInterval: 5000,
totalSlides: 2,
hasMultipleSlides: true
})" x-init="init()" @mouseenter="pauseAutoPlay()" @mouseleave="resumeAutoPlay()"
@touchstart="toggleControlsVisibility()" @touchend="handleTouchEnd($event);" @touchmove="handleTouchMove($event)"
id="slider_688e173e4ce04" data-items="W3sic3JjIjoiXC9zdG9yYWdlXC92aWRlb3NcL2luZm9ncmFmaWEtcmVkZW50b3IubXA0IiwiYWx0IjpudWxsLCJ0aXRsZSI6bnVsbCwiZGVzY3JpcHRpb24iOiJQcm9tbyIsInR5cGUiOiJ2aWRlbyIsImxpbmsiOm51bGx9LHsic3JjIjoiXC9zdG9yYWdlXC9pbWFnZXNcL2Rqc1wvcHJvbW9sbW5ldy5wbmciLCJhbHQiOm51bGwsInRpdGxlIjpudWxsLCJkZXNjcmlwdGlvbiI6IlRlc3QiLCJ0eXBlIjoiaW1hZ2UiLCJsaW5rIjpudWxsfV0=">
<!-- Main Slider Container -->
<div class="relative w-full overflow-hidden aspect-square ">
<!-- Media Container -->
<div class="flex transition-transform duration-500 ease-in-out h-full"
:style="`transform: translateX(-${currentSlide * 100}%)`">
<!--[if BLOCK]><![endif]--> <div wire:key="0" class="w-full h-full flex-shrink-0 relative bg-black">
<!-- Image Content -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- Video Content -->
<!--[if BLOCK]><![endif]--> <video id="/storage/videos/infografia-redentor.mp4" wire:key="/storage/videos/infografia-redentor.mp4"
class="w-full h-full object-cover"
@loadedmetadata="handleVideoLoad(0, $event)"
@ended="handleMediaEnded(0)"
@play="handleMediaPlay(0)"
@pause="handleMediaPause(0)" muted preload="auto" playsinline autoplay>
<source src="/storage/videos/infografia-redentor.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<!-- Video Controls Overlay -->
<div class="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity duration-300 bg-black/20"
:class="controlsVisible ? 'opacity-100' : 'opacity-0 hover:opacity-100'"
x-show="currentSlide === 0">
<button @click="toggleVideoPlayback(0)"
class="bg-white/20 hover:bg-white/30 backdrop-blur-sm text-white p-3 rounded-full transition-all duration-300 hover:scale-110">
<svg x-show="!isPlaying[0]" class="w-6 h-6" fill="currentColor"
viewBox="0 0 24 24">
<path d="M8 5v14l11-7z" />
</svg>
<svg x-show="isPlaying[0]" class="w-6 h-6" fill="currentColor"
viewBox="0 0 24 24">
<path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z" />
</svg>
</button>
</div>
<!--[if ENDBLOCK]><![endif]-->
<!-- Audio Content -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<div wire:key="1" class="w-full h-full flex-shrink-0 relative bg-black">
<!-- Image Content -->
<!--[if BLOCK]><![endif]--> <img wire:key="/storage/images/djs/promolmnew.png" src="/storage/images/djs/promolmnew.png"
alt="Slide 2" class="w-full h-full object-cover"
loading="lazy"
@load="handleMediaLoad(1)">
<!--[if ENDBLOCK]><![endif]-->
<!-- Video Content -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- Audio Content -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<!-- Navigation Arrows -->
<!--[if BLOCK]><![endif]--> <!-- Previous Arrow -->
<button @click="prevSlide()"
class="absolute left-2 sm:left-4 top-1/2 transform -translate-y-1/2 bg-white/20 hover:bg-white/30 backdrop-blur-sm text-white p-2 sm:p-3 rounded-full transition-all duration-300 hover:scale-110 focus:outline-none focus:ring-2 focus:ring-white/50 z-10 group">
<svg class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 transition-transform group-hover:-translate-x-0.5"
fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
</svg>
</button>
<!-- Next Arrow -->
<button @click="nextSlide()"
class="absolute right-2 sm:right-4 top-1/2 transform -translate-y-1/2 bg-white/20 hover:bg-white/30 backdrop-blur-sm text-white p-2 sm:p-3 rounded-full transition-all duration-300 hover:scale-110 focus:outline-none focus:ring-2 focus:ring-white/50 z-10 group">
<svg class="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 transition-transform group-hover:translate-x-0.5"
fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</button>
<!--[if ENDBLOCK]><![endif]-->
<!-- Media Progress Bar -->
<!--[if BLOCK]><![endif]--> <div class="absolute bottom-0 left-0 w-full h-1 bg-white/20">
<div class="h-full bg-white transition-all duration-300 ease-out"
:style="`width: ${getProgressWidth()}%`"></div>
</div>
<!--[if ENDBLOCK]><![endif]-->
<!-- Media Type Indicator -->
<div class="absolute top-4 right-4 z-10">
<div class="bg-black/50 backdrop-blur-sm text-white px-3 py-1 rounded-full text-sm font-medium flex">
<span x-show="getCurrentMediaType() === 'video'"><svg class="shrink-0 [:where(&)]:size-6" data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z"/>
</svg>
</span>
<span x-show="getCurrentMediaType() === 'image'">
<svg class="shrink-0 [:where(&)]:size-6" data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"/>
</svg>
</span>
<span x-show="getCurrentMediaType() === 'audio'"><svg class="shrink-0 [:where(&)]:size-6" data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.114 5.636a9 9 0 0 1 0 12.728M16.463 8.288a5.25 5.25 0 0 1 0 7.424M6.75 8.25l4.72-4.72a.75.75 0 0 1 1.28.53v15.88a.75.75 0 0 1-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.009 9.009 0 0 1 2.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75Z"/>
</svg>
</span>
<span x-show="isPlaying[currentSlide]" class="ml-2">▶</span>
</div>
</div>
</div>
<!--[if BLOCK]><![endif]--> <!-- Bottom Controls -->
<div class="absolute bottom-0 w-full bg-gray-800 group-hover:bg-gray-800/60 transition-opacity duration-300 px-4 py-3 sm:px-6 sm:py-4"
:class="controlsVisible ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'">
<div class="flex items-center justify-between">
<!-- Dots Navigation -->
<!--[if BLOCK]><![endif]--> <div class="flex space-x-1 sm:space-x-2">
<!--[if BLOCK]><![endif]--> <button @click="goToSlide(0); showControlsTemporarily()"
class="w-2 h-2 sm:w-3 sm:h-3 rounded-full transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-white/50 relative"
:class="currentSlide === 0 ? 'bg-white scale-110' :
'bg-white/40 hover:bg-white/60'"
aria-label="Go to slide 1">
<!-- Media type indicator -->
<div class="absolute -top-1 -right-1 w-2 h-2 text-xs">
<!--[if BLOCK]><![endif]--> <div class="w-1 h-1 bg-red-500 rounded-full"></div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</button>
<button @click="goToSlide(1); showControlsTemporarily()"
class="w-2 h-2 sm:w-3 sm:h-3 rounded-full transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-white/50 relative"
:class="currentSlide === 1 ? 'bg-white scale-110' :
'bg-white/40 hover:bg-white/60'"
aria-label="Go to slide 2">
<!-- Media type indicator -->
<div class="absolute -top-1 -right-1 w-2 h-2 text-xs">
<!--[if BLOCK]><![endif]--> <div class="w-1 h-1 bg-blue-500 rounded-full"></div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</button>
<!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<!-- Controls -->
<div class="flex items-center space-x-2 sm:space-x-4">
<!-- Slide Counter -->
<!--[if BLOCK]><![endif]--> <span class="text-white/80 text-xs sm:text-sm font-medium">
<span x-text="currentSlide + 1"></span> / <span x-text="totalSlides"></span>
</span>
<!-- AutoPlay Toggle -->
<button @click="toggleAutoPlay(); showControlsTemporarily()"
class="text-white/80 hover:text-white p-1 sm:p-2 rounded-full hover:bg-white/10 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-white/50"
:title="autoPlay ? 'Pause slideshow' : 'Play slideshow'">
<svg x-show="!autoPlay" class="w-4 h-4 sm:w-5 sm:h-5" fill="currentColor"
viewBox="0 0 24 24">
<path d="M8 5v14l11-7z" />
</svg>
<svg x-show="autoPlay" class="w-4 h-4 sm:w-5 sm:h-5" fill="currentColor"
viewBox="0 0 24 24">
<path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z" />
</svg>
</button>
<!-- Volume Control -->
<button @click="toggleMute(); showControlsTemporarily()"
class="text-white/80 hover:text-white p-1 sm:p-2 rounded-full hover:bg-white/10 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-white/50"
x-show="getCurrentMediaType() === 'video' || getCurrentMediaType() === 'audio'">
<svg x-show="!isMuted" class="w-4 h-4 sm:w-5 sm:h-5" fill="currentColor"
viewBox="0 0 24 24">
<path
d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z" />
</svg>
<svg x-show="isMuted" class="w-4 h-4 sm:w-5 sm:h-5" fill="currentColor"
viewBox="0 0 24 24">
<path
d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z" />
</svg>
</button>
<!--[if ENDBLOCK]><![endif]-->
<!-- Fullscreen Toggle -->
<button @click="toggleFullscreen(); showControlsTemporarily()"
class="text-white/80 hover:text-white p-1 sm:p-2 rounded-full hover:bg-white/10 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-white/50 hidden sm:block"
title="Toggle fullscreen">
<svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4">
</path>
</svg>
</button>
</div>
</div>
</div>
<!--[if ENDBLOCK]><![endif]-->
<!-- Touch/Swipe Support -->
</div>
</div>
</div> </div>
<!-- blog posts section -->
<div wire:snapshot="{"data":{"posts":[null,{"keys":[1,2,3],"class":"Illuminate\\Database\\Eloquent\\Collection","modelClass":"App\\Models\\Article","s":"elcln"}]},"memo":{"id":"3PUXGYNSUMGPVIaU53bS","name":"partials.blog-section","path":"\/","method":"GET","children":[],"scripts":[],"assets":[],"errors":[],"locale":"en"},"checksum":"fc40fd03bc7a394f8f042e65a64a49314d14ae891fdb73bb90635c82762dc377"}" wire:effects="[]" wire:id="3PUXGYNSUMGPVIaU53bS">
<div class="my-8">
<div class=""> <div class="h-16 py-4 text-3xl font-bold">What's happening in <span class="text-orange-500">Redentor</span></div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4 my-8 lg:my-4">
<!--[if BLOCK]><![endif]--> <div class="rounded-2xl aspect-[1/1.05] shadow-sm border border-gray-200">
<div class="h-1/2 rounded-t-2xl overflow-hidden">
<img src="https://redentor104fm.com/storage/IMG_6806-1024x683.webp"
class="w-full h-full object-cover rounded-t-2xl transition-all duration-300 hover:scale-110"
alt="Regalos de Esperanza en Navidad para familias comunes">
</div>
<div class="h-1/2 rounded-b-2xl p-4 space-y-3">
<h3 class="text-lg font-bold h-14">
Regalos de Esperanza en Navidad para familias comunes
</h3>
<div class="flex justify-between items-center">
<p class="text-xs flex ">
<svg class="shrink-0 [:where(&)]:size-6 h-4" data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z"/>
</svg>
Dinalee Rodriguez
</p>
<p class="text-xs flex"><svg class="shrink-0 [:where(&)]:size-6 h-4" data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z"/>
</svg>
Wednesday, 8 January 2025</p>
</div>
<p class="text-sm h-10">
Más de 30 familias disfrutan de una Navidad diferente como iniciativa del cantante de música urban...
</p>
<a href="/blog/regalos-de-esperanza-en-navidad-para-familias-comunes"
class="h-8 rounded-md text-sky-600 text-xs px-3 py-2 border border-gray-200">Read more</a>
</div>
</div>
<div class="rounded-2xl aspect-[1/1.05] shadow-sm border border-gray-200">
<div class="h-1/2 rounded-t-2xl overflow-hidden">
<img src="https://redentor104fm.com/storage/Beige-Gold-Scrapbook-Photo-Collage-Happy-Birthday-Greeting-Video-1024x576.webp"
class="w-full h-full object-cover rounded-t-2xl transition-all duration-300 hover:scale-110"
alt="Crece el Equipo de Radio Redentor">
</div>
<div class="h-1/2 rounded-b-2xl p-4 space-y-3">
<h3 class="text-lg font-bold h-14">
Crece el Equipo de Radio Redentor
</h3>
<div class="flex justify-between items-center">
<p class="text-xs flex ">
<svg class="shrink-0 [:where(&)]:size-6 h-4" data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z"/>
</svg>
Dinalee Rodriguez
</p>
<p class="text-xs flex"><svg class="shrink-0 [:where(&)]:size-6 h-4" data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z"/>
</svg>
Tuesday, 17 September 2024</p>
</div>
<p class="text-sm h-10">
El conocimiento fresco de las nuevas generaciones y el valor de la experiencia describen al grupo de...
</p>
<a href="/blog/crece-el-equipo-de-radio-redentor"
class="h-8 rounded-md text-sky-600 text-xs px-3 py-2 border border-gray-200">Read more</a>
</div>
</div>
<div class="rounded-2xl aspect-[1/1.05] shadow-sm border border-gray-200">
<div class="h-1/2 rounded-t-2xl overflow-hidden">
<img src="https://redentor104fm.com/storage/DSC01372-2-1024x683.webp"
class="w-full h-full object-cover rounded-t-2xl transition-all duration-300 hover:scale-110"
alt="Jóvenes de Bayamón Gardens Visitan Radio Redentor">
</div>
<div class="h-1/2 rounded-b-2xl p-4 space-y-3">
<h3 class="text-lg font-bold h-14">
Jóvenes de Bayamón Gardens Visitan Radio Redentor
</h3>
<div class="flex justify-between items-center">
<p class="text-xs flex ">
<svg class="shrink-0 [:where(&)]:size-6 h-4" data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z"/>
</svg>
Dinalee Rodriguez
</p>
<p class="text-xs flex"><svg class="shrink-0 [:where(&)]:size-6 h-4" data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z"/>
</svg>
Wednesday, 17 July 2024</p>
</div>
<p class="text-sm h-10">
Radio Redentor comparte su historia y legado con las nuevas generaciones.En una jornada emocionante ...
</p>
<a href="/blog/jovenes-de-bayamon-gardens-visitan-radio-redentor"
class="h-8 rounded-md text-sky-600 text-xs px-3 py-2 border border-gray-200">Read more</a>
</div>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div>
</div> <!-- end blog posts -->
<!-- news section -->
<!-- end news section -->
<!-- next events section -->
<div wire:snapshot="{"data":{"nextevents":[null,{"keys":[1,2],"class":"Illuminate\\Database\\Eloquent\\Collection","modelClass":"App\\Models\\Event","s":"elcln"}]},"memo":{"id":"xOuJLZsCHpgwaF3qEjLM","name":"partials.next-events-section","path":"\/","method":"GET","children":[],"scripts":[],"assets":[],"errors":[],"locale":"en"},"checksum":"d155c07f8911620e5cc71add27ee03df64dc7a47eb477fb4491e52e949db3566"}" wire:effects="[]" wire:id="xOuJLZsCHpgwaF3qEjLM">
<div class="my-8">
<h2 class="h-16 py-4 text-3xl font-bold"> Next events</h2>
<!--[if BLOCK]><![endif]--> <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 my-4">
<!--[if BLOCK]><![endif]-->
<div class="rounded-2xl aspect-[4/5] shadow-sm border border-gray-200">
<a href="/eventos#LILLY GOODMAN 25 ANIVERSARIO SINFONICO">
<div class="h-full rounded-t-2xl overflow-hidden">
<img src="/storage/events/WhatsApp-Image-2025-06-19-at-16.22.39_da94c68b-1024x1024.webp" class="w-full h-full object-cover rounded-2xl transition-all duration-300 hover:scale-110"
alt="LILLY GOODMAN 25 ANIVERSARIO SINFONICO">
</div>
</a>
</div>
<div class="rounded-2xl aspect-[4/5] shadow-sm border border-gray-200">
<a href="/eventos#A viva voz coaching kids">
<div class="h-full rounded-t-2xl overflow-hidden">
<img src="/storage/events/QR-CODE-AVV-30-AGO-Copy-2-819x1024.webp" class="w-full h-full object-cover rounded-2xl transition-all duration-300 hover:scale-110"
alt="A viva voz coaching kids">
</div>
</a>
</div>
<!--[if ENDBLOCK]><![endif]-->
<div class="rounded-2xl aspect-[4/5] shadow-sm border border-gray-200">
<a href="/eventos">
<div class="h-full rounded-t-2xl overflow-hidden">
<img src="storage/events/Alcanza-Mas-Clientes-300x252.webp" class="w-full h-full object-cover rounded-2xl transition-all duration-300 hover:scale-110"
alt="Alcanza más clients">
</div>
</a>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
</div> <!-- end next events section -->
<!-- videos section -->
<div wire:snapshot="{"data":{"videos":[[[{"id":"uJK5DrHW4Cs","title":"Pensando en Voz Alta","description":"El foro de discusi\u00f3n teol\u00f3gica de Redentor. Todos los martes a las 9:00 a.m.","thumbnail":"https:\/\/i.ytimg.com\/vi\/uJK5DrHW4Cs\/hqdefault.jpg","published_at":"2025-07-09T02:04:44Z","url":"https:\/\/www.youtube.com\/watch?v=uJK5DrHW4Cs"},{"s":"arr"}],[{"id":"nsSy_24IHFw","title":"Pensando En Voz Alta","description":"\u00a1\u00danete al foro de discusi\u00f3n b\u00edblica! Todos los martes a las 9:00 a.m. por Redentor 104.1\/104.3 fm.","thumbnail":"https:\/\/i.ytimg.com\/vi\/nsSy_24IHFw\/hqdefault.jpg","published_at":"2025-07-02T02:17:12Z","url":"https:\/\/www.youtube.com\/watch?v=nsSy_24IHFw"},{"s":"arr"}],[{"id":"Y9hJYpi92i0","title":"Kimmey Raschkey nos invita a la \"Calma\"","description":"\"No se turbe vuestro coraz\u00f3n; cre\u00e9is en Dios, creed tambi\u00e9n en m\u00ed.\" Juan 14:1","thumbnail":"https:\/\/i.ytimg.com\/vi\/Y9hJYpi92i0\/hqdefault.jpg","published_at":"2025-06-24T13:00:42Z","url":"https:\/\/www.youtube.com\/watch?v=Y9hJYpi92i0"},{"s":"arr"}],[{"id":"14l7unMU9v0","title":"Cuando la Tierra de Puerto Rico cant\u00f3 en #DiosFuerteTour de #Barak\ud83c\uddf5\ud83c\uddf7\ud83c\udfb6","description":"","thumbnail":"https:\/\/i.ytimg.com\/vi\/14l7unMU9v0\/hqdefault.jpg","published_at":"2025-06-18T18:46:56Z","url":"https:\/\/www.youtube.com\/watch?v=14l7unMU9v0"},{"s":"arr"}],[{"id":"74avAbSEa0c","title":"Entrevista a Carlos Acevedo en la Primera Cumbre de Preparaci\u00f3n, Municipio de San Juan 2025","description":"Lisandra Mont entrevista a Carlos Acevedo, al Director de Manejo de Emergencias del Municipio de San Juan para informarnos de los planes que tiene preparado el municipio ante cualquier emergencia en la temporada de huracanes.","thumbnail":"https:\/\/i.ytimg.com\/vi\/74avAbSEa0c\/hqdefault.jpg","published_at":"2025-06-14T14:00:16Z","url":"https:\/\/www.youtube.com\/watch?v=74avAbSEa0c"},{"s":"arr"}],[{"id":"Fy6PaCEt3tI","title":"Entrevista a Francine S\u00e1nchez en la Primera Cumbre de Preparaci\u00f3n, Municipio de San Juan 2025","description":"Lisandra Mont entrevista a Francine S\u00e1nchez, la Directora del Departamento del Desarrollo Social Comunitario del Municipio de San Juan para informarnos de los cuidados que tienen con la sociedad al atender con respeto y dignidad ante cualquier emergencia en la temporada de huracanes.","thumbnail":"https:\/\/i.ytimg.com\/vi\/Fy6PaCEt3tI\/hqdefault.jpg","published_at":"2025-06-13T19:33:45Z","url":"https:\/\/www.youtube.com\/watch?v=Fy6PaCEt3tI"},{"s":"arr"}],[{"id":"SY5fjYhVEi4","title":"Entrevista a Dr. Luis V. Class en la Primera Cumbre de Preparaci\u00f3n, Municipio de San Juan 2025","description":"Lisandra Mont entrevista a Dr. Luis V. Class, al Director Ejecutivo del Departamento de Salud del Municipio de San Juan para informarnos de los edificios que tienen disponible de la salud y no requieren plan m\u00e9dico. Es importante conocerlo para cualquier emergencia que ocurra como pueden servir al ciudadanos en la temporada de huracanes.","thumbnail":"https:\/\/i.ytimg.com\/vi\/SY5fjYhVEi4\/hqdefault.jpg","published_at":"2025-06-12T11:40:21Z","url":"https:\/\/www.youtube.com\/watch?v=SY5fjYhVEi4"},{"s":"arr"}],[{"id":"6v0iMccqiRQ","title":"Entrevista a Lisaniz Figueroa en la Primera Cumbre de Preparaci\u00f3n, Municipio de San Juan 2025","description":"Lisandra Mont entrevista a Lisaniz Figueroa Oyola, la Directora de Vivienda del Municipio de San Juan para informarnos de los refugios ante el paso de la temporada de huracanes.","thumbnail":"https:\/\/i.ytimg.com\/vi\/6v0iMccqiRQ\/hqdefault.jpg","published_at":"2025-06-10T18:11:22Z","url":"https:\/\/www.youtube.com\/watch?v=6v0iMccqiRQ"},{"s":"arr"}]],{"s":"arr"}],"loading":false,"error":null,"selectedVideoId":null,"showModal":false},"memo":{"id":"3ehcm66fde1QaME3g5rJ","name":"partials.recent-videos-section","path":"\/","method":"GET","children":[],"scripts":[],"assets":[],"errors":[],"locale":"en"},"checksum":"bb6a1d83c480293e8129281eb9e8218492823ffd4043ee6e3098209d3ae2e95b"}" wire:effects="[]" wire:id="3ehcm66fde1QaME3g5rJ">
<div class="youtube-videos-container my-8">
<div class="flex justify-between items-center mb-6">
<h2 class="h-16 py-4 text-3xl font-bold">Latest Videos</h2>
<button wire:click="refreshVideos"
class="px-4 py-2"
wire:loading.attr="disabled">
<span wire:loading.remove><svg class="shrink-0 [:where(&)]:size-6 hover:text-red-600" data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"/>
</svg>
</span>
<span wire:loading><svg class="shrink-0 [:where(&)]:size-6 animate-spin" data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"/>
</svg>
</span>
</button>
</div>
<!--[if BLOCK]><![endif]--> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<!--[if BLOCK]><![endif]--> <div class="bg-white rounded-lg shadow-md border border-gray-200 overflow-hidden hover:shadow-lg transition-shadow">
<div class="relative group">
<img src="https://i.ytimg.com/vi/uJK5DrHW4Cs/hqdefault.jpg"
alt="Pensando en Voz Alta"
class="w-full aspect-video object-cover">
<!-- Play button overlay -->
<div class="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 cursor-pointer"
wire:click="openVideoModal('uJK5DrHW4Cs')">
<div class="bg-red-600 rounded-full p-4 hover:bg-red-700 transition-colors">
<svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5v14l11-7z"/>
</svg>
</div>
</div>
</div>
<div class="p-4">
<a href="https://www.youtube.com/watch?v=uJK5DrHW4Cs" target="_blank" rel="noopener noreferrer">
<h3 class="font-semibold text-gray-800 mb-2 line-clamp-2 hover:text-red-600 transition-colors">
Pensando en Voz Alta
</h3>
</a>
<p class="text-gray-600 text-sm line-clamp-3 mb-3">
El foro de discusión teológica de Redentor. Todos los martes a las 9:00 a.m.
</p>
<div class="flex items-center justify-between">
<span class="text-xs text-gray-500">
3 weeks ago
</span>
<div class="flex space-x-2">
<button wire:click="openVideoModal('uJK5DrHW4Cs')"
class="inline-flex items-center text-red-600 hover:text-red-700 text-sm font-medium">
Play
<svg class="w-4 h-4 ml-1" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5v14l11-7z"/>
</svg>
</button>
<a href="https://www.youtube.com/watch?v=uJK5DrHW4Cs"
target="_blank"
rel="noopener noreferrer"
class="inline-flex items-center text-gray-600 hover:text-gray-700 text-sm font-medium">
YouTube
<svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow-md border border-gray-200 overflow-hidden hover:shadow-lg transition-shadow">
<div class="relative group">
<img src="https://i.ytimg.com/vi/nsSy_24IHFw/hqdefault.jpg"
alt="Pensando En Voz Alta"
class="w-full aspect-video object-cover">
<!-- Play button overlay -->
<div class="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 cursor-pointer"
wire:click="openVideoModal('nsSy_24IHFw')">
<div class="bg-red-600 rounded-full p-4 hover:bg-red-700 transition-colors">
<svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5v14l11-7z"/>
</svg>
</div>
</div>
</div>
<div class="p-4">
<a href="https://www.youtube.com/watch?v=nsSy_24IHFw" target="_blank" rel="noopener noreferrer">
<h3 class="font-semibold text-gray-800 mb-2 line-clamp-2 hover:text-red-600 transition-colors">
Pensando En Voz Alta
</h3>
</a>
<p class="text-gray-600 text-sm line-clamp-3 mb-3">
¡Únete al foro de discusión bíblica! Todos los martes a las 9:00 a.m. por Redentor 104.1/104.3 fm.
</p>
<div class="flex items-center justify-between">
<span class="text-xs text-gray-500">
1 month ago
</span>
<div class="flex space-x-2">
<button wire:click="openVideoModal('nsSy_24IHFw')"
class="inline-flex items-center text-red-600 hover:text-red-700 text-sm font-medium">
Play
<svg class="w-4 h-4 ml-1" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5v14l11-7z"/>
</svg>
</button>
<a href="https://www.youtube.com/watch?v=nsSy_24IHFw"
target="_blank"
rel="noopener noreferrer"
class="inline-flex items-center text-gray-600 hover:text-gray-700 text-sm font-medium">
YouTube
<svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow-md border border-gray-200 overflow-hidden hover:shadow-lg transition-shadow">
<div class="relative group">
<img src="https://i.ytimg.com/vi/Y9hJYpi92i0/hqdefault.jpg"
alt="Kimmey Raschkey nos invita a la "Calma""
class="w-full aspect-video object-cover">
<!-- Play button overlay -->
<div class="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 cursor-pointer"
wire:click="openVideoModal('Y9hJYpi92i0')">
<div class="bg-red-600 rounded-full p-4 hover:bg-red-700 transition-colors">
<svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5v14l11-7z"/>
</svg>
</div>
</div>
</div>
<div class="p-4">
<a href="https://www.youtube.com/watch?v=Y9hJYpi92i0" target="_blank" rel="noopener noreferrer">
<h3 class="font-semibold text-gray-800 mb-2 line-clamp-2 hover:text-red-600 transition-colors">
Kimmey Raschkey nos invita a la "Calma"
</h3>
</a>
<p class="text-gray-600 text-sm line-clamp-3 mb-3">
"No se turbe vuestro corazón; creéis en Dios, creed también en mí." Juan 14:1
</p>
<div class="flex items-center justify-between">
<span class="text-xs text-gray-500">
1 month ago
</span>
<div class="flex space-x-2">
<button wire:click="openVideoModal('Y9hJYpi92i0')"
class="inline-flex items-center text-red-600 hover:text-red-700 text-sm font-medium">
Play
<svg class="w-4 h-4 ml-1" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5v14l11-7z"/>
</svg>
</button>
<a href="https://www.youtube.com/watch?v=Y9hJYpi92i0"
target="_blank"
rel="noopener noreferrer"
class="inline-flex items-center text-gray-600 hover:text-gray-700 text-sm font-medium">
YouTube
<svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow-md border border-gray-200 overflow-hidden hover:shadow-lg transition-shadow">
<div class="relative group">
<img src="https://i.ytimg.com/vi/14l7unMU9v0/hqdefault.jpg"
alt="Cuando la Tierra de Puerto Rico cantó en #DiosFuerteTour de #Barak🇵🇷🎶"
class="w-full aspect-video object-cover">
<!-- Play button overlay -->
<div class="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 cursor-pointer"
wire:click="openVideoModal('14l7unMU9v0')">
<div class="bg-red-600 rounded-full p-4 hover:bg-red-700 transition-colors">
<svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5v14l11-7z"/>
</svg>
</div>
</div>
</div>
<div class="p-4">
<a href="https://www.youtube.com/watch?v=14l7unMU9v0" target="_blank" rel="noopener noreferrer">
<h3 class="font-semibold text-gray-800 mb-2 line-clamp-2 hover:text-red-600 transition-colors">
Cuando la Tierra de Puerto Rico cantó en #DiosFuerteTour de #Barak🇵🇷🎶
</h3>
</a>
<p class="text-gray-600 text-sm line-clamp-3 mb-3">
</p>
<div class="flex items-center justify-between">
<span class="text-xs text-gray-500">
1 month ago
</span>
<div class="flex space-x-2">
<button wire:click="openVideoModal('14l7unMU9v0')"
class="inline-flex items-center text-red-600 hover:text-red-700 text-sm font-medium">
Play
<svg class="w-4 h-4 ml-1" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5v14l11-7z"/>
</svg>
</button>
<a href="https://www.youtube.com/watch?v=14l7unMU9v0"
target="_blank"
rel="noopener noreferrer"
class="inline-flex items-center text-gray-600 hover:text-gray-700 text-sm font-medium">
YouTube
<svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow-md border border-gray-200 overflow-hidden hover:shadow-lg transition-shadow">
<div class="relative group">
<img src="https://i.ytimg.com/vi/74avAbSEa0c/hqdefault.jpg"
alt="Entrevista a Carlos Acevedo en la Primera Cumbre de Preparación, Municipio de San Juan 2025"
class="w-full aspect-video object-cover">
<!-- Play button overlay -->
<div class="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 cursor-pointer"
wire:click="openVideoModal('74avAbSEa0c')">
<div class="bg-red-600 rounded-full p-4 hover:bg-red-700 transition-colors">
<svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5v14l11-7z"/>
</svg>
</div>
</div>
</div>
<div class="p-4">
<a href="https://www.youtube.com/watch?v=74avAbSEa0c" target="_blank" rel="noopener noreferrer">
<h3 class="font-semibold text-gray-800 mb-2 line-clamp-2 hover:text-red-600 transition-colors">
Entrevista a Carlos Acevedo en la Primera Cumbre de Preparación, Municipio de San Juan 2025
</h3>
</a>
<p class="text-gray-600 text-sm line-clamp-3 mb-3">
Lisandra Mont entrevista a Carlos Acevedo, al Director de Manejo de Emergencias del Municipio de San...
</p>
<div class="flex items-center justify-between">
<span class="text-xs text-gray-500">
1 month ago
</span>
<div class="flex space-x-2">
<button wire:click="openVideoModal('74avAbSEa0c')"
class="inline-flex items-center text-red-600 hover:text-red-700 text-sm font-medium">
Play
<svg class="w-4 h-4 ml-1" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5v14l11-7z"/>
</svg>
</button>
<a href="https://www.youtube.com/watch?v=74avAbSEa0c"
target="_blank"
rel="noopener noreferrer"
class="inline-flex items-center text-gray-600 hover:text-gray-700 text-sm font-medium">
YouTube
<svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow-md border border-gray-200 overflow-hidden hover:shadow-lg transition-shadow">
<div class="relative group">
<img src="https://i.ytimg.com/vi/Fy6PaCEt3tI/hqdefault.jpg"
alt="Entrevista a Francine Sánchez en la Primera Cumbre de Preparación, Municipio de San Juan 2025"
class="w-full aspect-video object-cover">
<!-- Play button overlay -->
<div class="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 cursor-pointer"
wire:click="openVideoModal('Fy6PaCEt3tI')">
<div class="bg-red-600 rounded-full p-4 hover:bg-red-700 transition-colors">
<svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5v14l11-7z"/>
</svg>
</div>
</div>
</div>
<div class="p-4">
<a href="https://www.youtube.com/watch?v=Fy6PaCEt3tI" target="_blank" rel="noopener noreferrer">
<h3 class="font-semibold text-gray-800 mb-2 line-clamp-2 hover:text-red-600 transition-colors">
Entrevista a Francine Sánchez en la Primera Cumbre de Preparación, Municipio de San Juan 2025
</h3>
</a>
<p class="text-gray-600 text-sm line-clamp-3 mb-3">
Lisandra Mont entrevista a Francine Sánchez, la Directora del Departamento del Desarrollo Social Com...
</p>
<div class="flex items-center justify-between">
<span class="text-xs text-gray-500">
1 month ago
</span>
<div class="flex space-x-2">
<button wire:click="openVideoModal('Fy6PaCEt3tI')"
class="inline-flex items-center text-red-600 hover:text-red-700 text-sm font-medium">
Play
<svg class="w-4 h-4 ml-1" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5v14l11-7z"/>
</svg>
</button>
<a href="https://www.youtube.com/watch?v=Fy6PaCEt3tI"
target="_blank"
rel="noopener noreferrer"
class="inline-flex items-center text-gray-600 hover:text-gray-700 text-sm font-medium">
YouTube
<svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow-md border border-gray-200 overflow-hidden hover:shadow-lg transition-shadow">
<div class="relative group">
<img src="https://i.ytimg.com/vi/SY5fjYhVEi4/hqdefault.jpg"
alt="Entrevista a Dr. Luis V. Class en la Primera Cumbre de Preparación, Municipio de San Juan 2025"
class="w-full aspect-video object-cover">
<!-- Play button overlay -->
<div class="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 cursor-pointer"
wire:click="openVideoModal('SY5fjYhVEi4')">
<div class="bg-red-600 rounded-full p-4 hover:bg-red-700 transition-colors">
<svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5v14l11-7z"/>
</svg>
</div>
</div>
</div>
<div class="p-4">
<a href="https://www.youtube.com/watch?v=SY5fjYhVEi4" target="_blank" rel="noopener noreferrer">
<h3 class="font-semibold text-gray-800 mb-2 line-clamp-2 hover:text-red-600 transition-colors">
Entrevista a Dr. Luis V. Class en la Primera Cumbre de Preparación, Municipio de San Juan 2025
</h3>
</a>
<p class="text-gray-600 text-sm line-clamp-3 mb-3">
Lisandra Mont entrevista a Dr. Luis V. Class, al Director Ejecutivo del Departamento de Salud del Mu...
</p>
<div class="flex items-center justify-between">
<span class="text-xs text-gray-500">
1 month ago
</span>
<div class="flex space-x-2">
<button wire:click="openVideoModal('SY5fjYhVEi4')"
class="inline-flex items-center text-red-600 hover:text-red-700 text-sm font-medium">
Play
<svg class="w-4 h-4 ml-1" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5v14l11-7z"/>
</svg>
</button>
<a href="https://www.youtube.com/watch?v=SY5fjYhVEi4"
target="_blank"
rel="noopener noreferrer"
class="inline-flex items-center text-gray-600 hover:text-gray-700 text-sm font-medium">
YouTube
<svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow-md border border-gray-200 overflow-hidden hover:shadow-lg transition-shadow">
<div class="relative group">
<img src="https://i.ytimg.com/vi/6v0iMccqiRQ/hqdefault.jpg"
alt="Entrevista a Lisaniz Figueroa en la Primera Cumbre de Preparación, Municipio de San Juan 2025"
class="w-full aspect-video object-cover">
<!-- Play button overlay -->
<div class="absolute inset-0 bg-black/50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 cursor-pointer"
wire:click="openVideoModal('6v0iMccqiRQ')">
<div class="bg-red-600 rounded-full p-4 hover:bg-red-700 transition-colors">
<svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5v14l11-7z"/>
</svg>
</div>
</div>
</div>
<div class="p-4">
<a href="https://www.youtube.com/watch?v=6v0iMccqiRQ" target="_blank" rel="noopener noreferrer">
<h3 class="font-semibold text-gray-800 mb-2 line-clamp-2 hover:text-red-600 transition-colors">
Entrevista a Lisaniz Figueroa en la Primera Cumbre de Preparación, Municipio de San Juan 2025
</h3>
</a>
<p class="text-gray-600 text-sm line-clamp-3 mb-3">
Lisandra Mont entrevista a Lisaniz Figueroa Oyola, la Directora de Vivienda del Municipio de San Jua...
</p>
<div class="flex items-center justify-between">
<span class="text-xs text-gray-500">
1 month ago
</span>
<div class="flex space-x-2">
<button wire:click="openVideoModal('6v0iMccqiRQ')"
class="inline-flex items-center text-red-600 hover:text-red-700 text-sm font-medium">
Play
<svg class="w-4 h-4 ml-1" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5v14l11-7z"/>
</svg>
</button>
<a href="https://www.youtube.com/watch?v=6v0iMccqiRQ"
target="_blank"
rel="noopener noreferrer"
class="inline-flex items-center text-gray-600 hover:text-gray-700 text-sm font-medium">
YouTube
<svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<!-- Modal -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
</div>
<!-- end videos section -->
</div>
</main>
<div wire:snapshot="{"data":{"popups":[null,{"keys":[1],"class":"Illuminate\\Database\\Eloquent\\Collection","modelClass":"App\\Models\\CtaPopup","s":"elcln"}],"currentPopup":[null,{"class":"App\\Models\\CtaPopup","key":1,"s":"mdl"}],"showPopup":true},"memo":{"id":"LQwjYWhhYaBFeBIZkFOb","name":"cta-popup-manager","path":"\/","method":"GET","children":[],"scripts":[],"assets":[],"errors":[],"locale":"en"},"checksum":"51881f594453e4b25ab9c026ac276f43ebf960b53ed5c05f355074ea051904ed"}" wire:effects="[]" wire:id="LQwjYWhhYaBFeBIZkFOb" x-data="ctaPopupManager()" x-init="init()" @keydown.escape="closePopup()" class="cta-popup-manager">
<!--[if BLOCK]><![endif]--> <!-- Overlay -->
<div x-show="showModal" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-200"
x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
class="fixed inset-0 z-50 overflow-y-auto" style="display: none;">
<!-- Background overlay -->
<div class="fixed inset-0 bg-black/50 backdrop-blur-sm" @click="closePopup()"></div>
<!-- Modal -->
<div class="flex min-h-full items-center justify-center p-4">
<div x-show="showModal" x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 transform scale-95"
x-transition:enter-end="opacity-100 transform scale-100"
x-transition:leave="transition ease-in duration-200"
x-transition:leave-start="opacity-100 transform scale-100"
x-transition:leave-end="opacity-0 transform scale-95"
class="relative w-full max-w-lg transform overflow-hidden rounded-2xl bg-white shadow-2xl transition-all">
<!-- Close button -->
<button @click="closePopup()"
class="absolute top-4 right-4 z-10 rounded-full bg-gray-100 p-2 text-gray-400 hover:bg-gray-200 hover:text-gray-600 transition-colors">
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
<!-- Media Section -->
<!--[if BLOCK]><![endif]--> <div class="relative">
<!--[if BLOCK]><![endif]--> <div class="aspect-square">
<img src="/storage/cta-popups/01K0W3HRNHTHSFSVR7QYJ8NMEP.png"
alt="100 Dias de Oración"
class="w-full h-full object-cover rounded-t-2xl">
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<!--[if ENDBLOCK]><![endif]-->
<!-- Content Section -->
<!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
<!-- Action Buttons -->
<div class="flex gap-3 justify-end p-6">
<!--[if BLOCK]><![endif]--> <a href="https://redentor104fm.com/form/3" @click="closePopup()"
class="px-6 py-2 text-sm font-medium text-white bg-sky-600 hover:bg-sky-700 rounded-lg transition-colors inline-flex items-center gap-2">
Suscribirme
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14">
</path>
</svg>
</a>
<!--[if ENDBLOCK]><![endif]-->
<button @click="closePopup()"
class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors">
Close
</button>
</div>
</div>
</div>
</div>
</div>
<!--[if ENDBLOCK]><![endif]-->
</div>
<footer wire:snapshot="{"data":[],"memo":{"id":"DPTV4iHRUDOHSsNIX3h0","name":"partials.footer","path":"\/","method":"GET","children":[],"scripts":[],"assets":[],"errors":[],"locale":"en"},"checksum":"a2a35b31c408d0d68d395b1569e2d5ed90c681058970de6ae2cd76a04f2cd7d9"}" wire:effects="[]" wire:id="DPTV4iHRUDOHSsNIX3h0" class="p-12 bg-slate-100">
<div class="container mx-auto border-b border-slate-200 pb-12">
<div class="flex items-center justify-center lg:space-x-12">
<img src="/storage/logo.png"
class="h-12 mr-12" alt="Redentor 104.1 FM">
<a href="https://facebook.com/104.1Redentor" target="_blank"
class="h-10 rounded-md text-lg font-medium hover:shadow-lg px-3 py-2 hover:bg-white text-black border-blue-500 flex justify-center items-center"><svg class="w-6 mr-1 fill-[#1877F2]" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc. --><path d="M512 256C512 114.6 397.4 0 256 0S0 114.6 0 256C0 376 82.7 476.8 194.2 504.5V334.2H141.4V256h52.8V222.3c0-87.1 39.4-127.5 125-127.5c16.2 0 44.2 3.2 55.7 6.4V172c-6-.6-16.5-1-29.6-1c-42 0-58.2 15.9-58.2 57.2V256h83.6l-14.4 78.2H287V510.1C413.8 494.8 512 386.9 512 256h0z"/></svg><span class="hidden lg:block">Facebook</span> </a>
<a href="https://x.com/radioredentor" target="_blank"
class="h-10 rounded-md text-lg font-medium hover:shadow-lg px-3 py-2 hover:bg-white text-black border-sky-500 flex justify-center items-center"><svg class="w-6 mr-1 fill-[#1DA1F2]" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc. --><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg><span class="hidden lg:block">Twitter</span></a>
<a href="https://x.com/radioredentor" target="_blank"
class="h-10 rounded-md text-lg font-medium hover:shadow-lg px-3 py-2 hover:bg-white text-black border-red-600 flex justify-center items-center"><svg class="w-6 mr-1 fill-[#FF0000]" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc. --><path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"/></svg><span class="hidden lg:block">YouTube</span></a>
<a href="https://x.com/radioredentor" target="_blank"
class="h-10 rounded-md text-lg font-medium hover:shadow-lg px-2 py-3 hover:bg-white text-black border-pink-700 flex justify-center items-center"><svg
class="w-6 h-6 mr-1" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="instagramGradient" x1="0%" y1="0%" x2="100%"
y2="100%">
<stop offset="0%" stop-color="#833AB4" />
<stop offset="50%" stop-color="#C13584" />
<stop offset="100%" stop-color="#FD1D1D" />
</linearGradient>
</defs>
<path fill="url(#instagramGradient)"
d="M12 2.163c3.204 0 3.584.012 4.851.07 1.171.055 1.705.24 2.164.423.468.196.868.455 1.258.845s.649.79.845 1.258c.183.459.368.993.423 2.164.058 1.267.07 1.647.07 4.851s-.012 3.584-.07 4.851c-.055 1.171-.24 1.705-.423 2.164-.196.468-.455.868-.845 1.258s-.79.649-1.258.845c-.459.183-.993.368-2.164.423-1.267.058-1.647.07-4.851.07s-3.584-.012-4.851-.07c-1.171-.055-1.705-.24-2.164-.423-.468-.196-.868-.455-1.258-.845s-.649-.79-.845-1.258c-.183-.459-.368-.993-.423-2.164-.058-1.267-.07-1.647-.07-4.851s.012-3.584.07-4.851c.055-1.171.24-1.705.423-2.164.196-.468.455-.868.845-1.258s.79-.649 1.258-.845c.459-.183.993-.368 2.164-.423 1.267-.058 1.647-.07 4.851-.07zm0 2.163c-3.136 0-3.533.01-4.795.067-1.07.05-1.468.22-1.77.346-.3.126-.55.297-.738.485-.188.188-.359.438-.485.738-.126.302-.296.7-.346 1.77-.057 1.262-.067 1.659-.067 4.795s.01 3.533.067 4.795c.05 1.07.22 1.468.346 1.77.126.3.297.55.485.738.188.188.438.359.738.485.302.126.7.296 1.77.346 1.262.057 1.659.067 4.795.067s3.533-.01 4.795-.067c1.07-.05 1.468-.22 1.77-.346.3-.126.55-.297.738-.485.188-.188.359-.438.485-.738.126-.302.296-.7.346-1.77.057-1.262.067-1.659.067-4.795s-.01-3.533-.067-4.795c-.05-1.07-.22-1.468-.346-1.77-.126-.3-.297-.55-.485-.738-.188-.188-.438-.359-.738-.485-.302-.126-.7-.296-1.77-.346-1.262-.057-1.659-.067-4.795-.067zm0 3.65c-2.458 0-4.444 1.986-4.444 4.444s1.986 4.444 4.444 4.444 4.444-1.986 4.444-4.444-1.986-4.444-4.444-4.444zm0 2.163c1.262 0 2.281 1.019 2.281 2.281s-1.019 2.281-2.281 2.281-2.281-1.019-2.281-2.281 1.019-2.281 2.281-2.281zm5.286-3.877c-.552 0-1 .448-1 1s.448 1 1 1 1-.448 1-1-.448-1-1-1z" />
</svg><span class="hidden lg:block">Instagram</span></a>
</div>
</div>
<div class="container mx-auto grid lg:grid-cols-4 gap-8 lg:justify-items-center-safe py-6">
<div>
<h6 class="text-xl font-bold text-black">Redentor Apps</h6>
<div class="mt-4 space-y-2">
<div>
<a class href="https://play.google.com/store/apps/details?id=com.globalappcreator.redentor104"
target="_blank" rel="noopener noreferrer">
<!--[if BLOCK]><![endif]--> <img src="https://redentor104fm.com/storage/images/GetItOnGooglePlay_Badge_Web_color_English.png"
alt="Redentor en Google Play" class="h-12">
<!--[if ENDBLOCK]><![endif]-->
</a>
</div>
<div>
<a class href="https://itunes.apple.com/us/app/104-1-redentor/id995524580?ls=1&mt=8">
<!--[if BLOCK]><![endif]--> <img src="https://redentor104fm.com/storage/images/Download_on_the_App_Store_Badge_US-UK_RGB_blk_092917.svg"
alt="Redentor in App Store" class="h-12">
<!--[if ENDBLOCK]><![endif]-->
</a>
</div>
</div>
</div>
<div class="">
<h6 class="text-xl font-bold text-black">About Redentor</h6>
<nav class="text-md font-extralight flex flex-col text-gray-600 w-fit">
<a wire:navigate href="/oficinas-y-personal"
class="nav-link py-2 w-fit hover:border-b-4 hover:border-blue-800">
Offices and Staff</a>
<a href="https://publicfiles.fcc.gov/fm-profile/wzin"
class="nav-link py-2 w-fit hover:border-b-4 hover:border-blue-800">
FCC Public Inspection File WERR 104.1
</a>
<a href="https://publicfiles.fcc.gov/fm-profile/werr"
class="nav-link py-2 w-fit hover:border-b-4 hover:border-blue-800">
FCC Public Inspection File WZIN 104.3
</a>
<a wire:navigate href="/politica-de-privacidad"
class="nav-link py-2 w-fit hover:border-b-4 hover:border-blue-800">
Privacy Policy</a>
<a wire:navigate href="/politica-de-donaciones"
class="nav-link py-2 w-fit hover:border-b-4 hover:border-blue-800">
Donations Policy</a>
</nav>
</div>
<div>
<h6 class="text-xl font-bold text-black">Press</h6>
<div class="text-md font-extralight flex flex-col text-gray-600 w-fit">
<a wire:navigate href="/prensa"
class="nav-link py-2 text-extra-light w-fit hover:border-b-4 hover:border-blue-800">Press Release</a>
</div>
</div>
<div class="">
<h6 class="text-xl font-bold text-blue-950">Offers</h6>
<div class="text-md font-extralight flex flex-col text-gray-600 w-fit">
<a wire:navigate href="/anunciate"
class="nav-link py-2 text-extra-light w-fit hover:border-b-4 hover:border-blue-800">Advertise with us</a>
<a wire:navigate href="/musica"
class="nav-link py-2 text-extra-light w-fit hover:border-b-4 hover:border-blue-800">Music</a>
</div>
</div>
</div>
</div>
</div>
<div class="container mx-auto py-4 text-sm text-gray-400 border-t border-slate-200">Redentor.
All rights reserved ©2025
</div>
</footer> <div wire:snapshot="{"data":[],"memo":{"id":"6BePzuNK8CZdDsDKqkfd","name":"partials.mini-player","path":"\/","method":"GET","children":[],"scripts":[],"assets":[],"errors":[],"locale":"en"},"checksum":"f1e2f82707b21aa319030854ad650fac8c879c6ee0f6f474d4a49fba519ba0be"}" wire:effects="[]" wire:id="6BePzuNK8CZdDsDKqkfd" wire:ignore>
<!-- Mini Player Template -->
<div x-data="miniPlayerComponent"
x-show="$store.miniPlayer.isVisible"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="transform translate-y-full"
x-transition:enter-end="transform translate-y-0"
x-transition:leave="transition ease-in duration-300"
x-transition:leave-start="transform translate-y-0"
x-transition:leave-end="transform translate-y-full"
class="fixed bottom-0 left-0 right-0 bg-gray-900 text-white shadow-lg z-50 border-t border-gray-700">
<div class="flex items-center justify-between p-4 max-w-6xl mx-auto">
<!-- Episode Info -->
<div class="flex items-center gap-4 min-w-0 flex-1">
<div class="flex-shrink-0">
<div class="w-12 h-12 bg-gray-700 rounded-lg flex items-center justify-center">
<span x-show="$store.miniPlayer.currentEpisode?.type === 'video'" class="text-xs">🎬</span>
<span x-show="$store.miniPlayer.currentEpisode?.type !== 'video'" class="text-xs">
<img :src="$store.miniPlayer.currentEpisode?.image"
:alt="$store.miniPlayer.currentEpisode?.title" class="w-12 h-12 object-cover rounded"
x-show="$store.miniPlayer.currentEpisode?.image" />
<span x-show="!$store.miniPlayer.currentEpisode?.image" class="text-2xl">🎵</span>
</span>
</div>
</div>
<div class="min-w-0 flex-1">
<div class="font-medium text-sm truncate"
x-text="$store.miniPlayer.currentEpisode?.title || 'Unknown Title'"></div>
<div class="text-xs text-gray-400 truncate">
<span x-text="$store.miniPlayer.currentEpisode?.host || 'Unknown Host'"></span>
<span> • </span>
<span x-text="$store.miniPlayer.currentEpisode?.playlist || 'Unknown Playlist'"></span>
</div>
</div>
</div>
<!-- Controls -->
<div class="flex items-center gap-4 mx-8">
<button @click="$store.miniPlayer.skipBackward()" class="text-gray-400 hover:text-white transition-colors">
<svg class="shrink-0 [:where(&)]:size-5 w-5 h-5" data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M7.712 4.818A1.5 1.5 0 0 1 10 6.095v2.972c.104-.13.234-.248.389-.343l6.323-3.906A1.5 1.5 0 0 1 19 6.095v7.81a1.5 1.5 0 0 1-2.288 1.276l-6.323-3.905a1.505 1.505 0 0 1-.389-.344v2.973a1.5 1.5 0 0 1-2.288 1.276l-6.323-3.905a1.5 1.5 0 0 1 0-2.552l6.323-3.906Z"/>
</svg>
</button>
<button @click="$store.miniPlayer.toggle()"
class="bg-blue-500 hover:bg-blue-600 rounded-full p-2 transition-colors">
<svg class="shrink-0 [:where(&)]:size-5 w-5 h-5" x-show="!$store.miniPlayer.isPlaying" data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M6.3 2.84A1.5 1.5 0 0 0 4 4.11v11.78a1.5 1.5 0 0 0 2.3 1.27l9.344-5.891a1.5 1.5 0 0 0 0-2.538L6.3 2.841Z"/>
</svg>
<svg class="shrink-0 [:where(&)]:size-5 w-5 h-5" x-show="$store.miniPlayer.isPlaying" data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M5.75 3a.75.75 0 0 0-.75.75v12.5c0 .414.336.75.75.75h1.5a.75.75 0 0 0 .75-.75V3.75A.75.75 0 0 0 7.25 3h-1.5ZM12.75 3a.75.75 0 0 0-.75.75v12.5c0 .414.336.75.75.75h1.5a.75.75 0 0 0 .75-.75V3.75a.75.75 0 0 0-.75-.75h-1.5Z"/>
</svg>
</button>
<button @click="$store.miniPlayer.skipForward()" class="text-gray-400 hover:text-white transition-colors">
<svg class="shrink-0 [:where(&)]:size-5 w-5 h-5" data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M3.288 4.818A1.5 1.5 0 0 0 1 6.095v7.81a1.5 1.5 0 0 0 2.288 1.276l6.323-3.905c.155-.096.285-.213.389-.344v2.973a1.5 1.5 0 0 0 2.288 1.276l6.323-3.905a1.5 1.5 0 0 0 0-2.552l-6.323-3.906A1.5 1.5 0 0 0 10 6.095v2.972a1.506 1.506 0 0 0-.389-.343L3.288 4.818Z"/>
</svg>
</button>
</div>
<!-- Progress Bar -->
<div class="flex-1 max-w-md mx-8">
<div class="flex items-center gap-2 text-xs text-gray-400 mb-1">
<span x-text="$store.miniPlayer.formattedCurrentTime"></span>
<span>/</span>
<span x-text="$store.miniPlayer.formatTime($store.miniPlayer.duration)"></span>
</div>
<div class="bg-gray-700 rounded-full h-2 cursor-pointer relative" @click="seekTo($event)">
<div class="bg-blue-500 h-2 rounded-full transition-all duration-100 pointer-events-none"
:style="`width: ${$store.miniPlayer.getProgress()}%`"></div>
<!-- Hover indicator -->
<div class="absolute top-0 left-0 w-full h-2 rounded-full hover:bg-gray-600 opacity-0 hover:opacity-20 transition-opacity">
</div>
</div>
</div>
<!-- Close Button -->
<div class="flex items-center gap-2 ml-4">
<button @click="$store.miniPlayer.hide()" class="text-gray-400 hover:text-white transition-colors">
<svg class="shrink-0 [:where(&)]:size-5 w-5 h-5" data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"/>
</svg>
</button>
</div>
</div>
</div>
</div>
<script src="/flux/flux.min.js?id=0b96ae28" data-navigate-once></script>
<script src="/livewire/livewire.min.js?id=df3a17f2" data-csrf="9gQGgIPhT9rsVPE5uc10p51S3AstDAzTXACASxpt" data-update-uri="/livewire/update" data-navigate-once="true"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script type="text/javascript" language="javascript" src="https://livestreamcdn.net:2000/dist/widgets.js" defer>
</script>
<script>
document.addEventListener('livewire:init', () => {
Livewire.on('show-alert', (event) => {
const data = Array.isArray(event) ? event[0] : event;
Swal.fire({
icon: data.type,
title: data.title,
position: data.position || 'center',
timer: data.timer || 3000,
toast: data.toast || false,
showConfirmButton: false,
timerProgressBar: true,
});
});
});
</script>
<script>
// Global keyboard shortcut for search
document.addEventListener('keydown', function(e) {
if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
e.preventDefault();
document.querySelector('input[placeholder="Search everything..."]')?.focus();
}
});
</script>
<script>
// if (!document.getElementById('persistent-audio-player')) {
// console.warn('PersistentAudioManager: audio element is missing!');
// }
</script>
<script id='sonic_js' data-port='8048' src='https://sp.unoredcdn.net/cp/widgets.js?r=879'></script>
<script type="text/javascript">
Alpine.data('playaudio', (presignedUrl) => {
return {
audio: new Audio(presignedUrl),
isPlaying: false,
toggleAudio() {
this.stopOtherPlayers();
const audio = window.PersistentAudioManager.loadEpisode(
presignedUrl,
this.episodeId,
this.episodeData
);
if (audio.src !== presignedUrl) {
audio.src = presignedUrl;
console.log('🔁 Reloading stream URL to ensure consistency');
}
this.$store.miniPlayer.show(this.episodeData, this);
this.setupLocalListeners();
if (this.isPlaying) {
audio.pause();
} else {
audio.play().catch(error => {
console.error('Error playing media:', error);
});
}
}
}
})
</script>
<script>
// Episode row component that doesn't interfere with existing audio
Alpine.data('episodeRowComponent', (episodeId, episodeData) => ({
isHovering: false,
episodeId,
episodeData,
initEpisode() {
// Ensure store is initialized
if (!this.$store.miniPlayer.isInitialized) {
this.$store.miniPlayer.init();
}
},
get isCurrentEpisode() {
return this.$store.miniPlayer.currentEpisode?.id === this.episodeId;
},
toggleEpisode() {
if (this.isCurrentEpisode) {
// If this is the current episode, toggle play/pause
this.$store.miniPlayer.toggle();
} else {
// If different episode, play this one
this.$store.miniPlayer.playEpisode(this.episodeData.src, this.episodeData);
}
}
}));
</script>
<script>
// function playAudio(audioData) {
// // Using Livewire's global dispatch
// //Livewire.dispatch('play-audio', audioData);
// Livewire.dispatch('play-audio', {
// title: 'Test Audio',
// host: 'Test Host',
// image: 'https://via.placeholder.com/150',
// url: 'https://www.soundjay.com/misc/sounds/bell-ringing-05.mp3', // Working test URL
// type: 'file'
// });
// }
// Alternative: Direct Alpine.js approach
// function playAudioAlpine(audioData) {
// Alpine.store('audioPlayer').playAudio(audioData);
// }
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Handle keyboard navigation
document.addEventListener('keydown', function(event) {
if (event.key === 'Escape') {
const modal = document.querySelector('.youtube-modal');
if (modal) {
window.Livewire.find('3ehcm66fde1QaME3g5rJ').call('closeVideoModal');
}
}
});
// Listen for modal events
document.addEventListener('livewire:init', function() {
Livewire.on('modal-opened', function() {
document.body.classList.add('modal-open');
});
Livewire.on('modal-closed', function() {
document.body.classList.remove('modal-open');
});
});
});
</script>
<script>
document.addEventListener('livewire:navigated', () => {
const bgVideo = document.getElementById("/storage/videos/infografia-redentor.mp4");
if (bgVideo) {
bgVideo.load(); // Ensures the video is reloaded
bgVideo.play().catch(() => {
console.warn('Video play failed.');
});
}
});
</script>
<script type="text/javascript">
//window.HSStaticMethods.autoInit();
</script>
<script>
function ctaPopupManager() {
return {
showModal: false,
shouldShowPopup: true,
delayMs: '3000',
init() {
if (this.shouldShowPopup) {
setTimeout(() => {
this.showModal = true;
}, this.delayMs);
}
},
closePopup() {
this.showModal = false;
setTimeout(() => {
window.Livewire.find('LQwjYWhhYaBFeBIZkFOb').call('closePopup');
}, 200);
}
}
}
</script>
<!-- Alternative SweetAlert2 Implementation -->
<!-- Add this to your main layout if you prefer SweetAlert2 -->
<script>
// SweetAlert2 CTA Popup Alternative
// <!--[if BLOCK]><![endif]--> // document.addEventListener('DOMContentLoaded', function() {
// // Check if we should show the popup
// const popupId = '1';
// const frequency = 'once';
// const cookieName = `popup_shown_${popupId}`;
// // Skip if already shown and frequency is 'once'
// if (frequency === 'once' && getCookie(cookieName)) {
// return;
// }
// let htmlContent = `
// <div class="text-left">
// <!--[if BLOCK]><![endif]--> // <img src="/storage/cta-popups/01K0W3HRNHTHSFSVR7QYJ8NMEP.png"
// alt="100 Dias de Oración"
// class="w-full h-48 object-cover rounded-lg mb-4">
// <!--[if ENDBLOCK]><![endif]-->
// <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
// <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->
// </div>
// `;
// Swal.fire({
// title: '100 Dias de Oración',
// html: htmlContent,
// width: 600,
// timer:3000,
// showCancelButton: <!--[if BLOCK]><![endif]--> true <!--[if ENDBLOCK]><![endif]-->,
// confirmButtonText: <!--[if BLOCK]><![endif]--> 'Suscribirme' <!--[if ENDBLOCK]><![endif]-->,
// cancelButtonText: 'Close',
// confirmButtonColor: '#3B82F6',
// cancelButtonColor: '#6B7280',
// reverseButtons: true,
// allowOutsideClick: true,
// allowEscapeKey: true,
// customClass: {
// popup: 'cta-popup-swal',
// title: 'text-2xl font-bold text-gray-900',
// htmlContainer: 'text-gray-600'
// }
// }).then((result) => {
// // Set cookie if frequency is 'once'
// if (frequency === 'once') {
// setCookie(cookieName, '1', 30); // 30 days
// }
// // Redirect if confirmed and URL exists
// <!--[if BLOCK]><![endif]--> // if (result.isConfirmed) {
// window.open('https://redentor104fm.com/form/3', '_blank');
// }
// <!--[if ENDBLOCK]><![endif]-->
// // Call Livewire method
// window.Livewire.find('LQwjYWhhYaBFeBIZkFOb').call('closePopup');
// });
// });
// // Cookie helper functions
// function setCookie(name, value, days) {
// const expires = new Date();
// expires.setTime(expires.getTime() + (days * 24 * 60 * 60 * 1000));
// document.cookie = `${name}=${value};expires=${expires.toUTCString()};path=/`;
// }
// function getCookie(name) {
// const nameEQ = name + "=";
// const ca = document.cookie.split(';');
// for(let i = 0; i < ca.length; i++) {
// let c = ca[i];
// while (c.charAt(0) === ' ') c = c.substring(1, c.length);
// if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
// }
// return null;
// }
// <!--[if ENDBLOCK]><![endif]-->
</script>
<script>
Alpine.data('miniPlayerComponent', () => ({
init() {
// Ensure store is initialized when component loads
if (!this.$store.miniPlayer.isInitialized) {
this.$store.miniPlayer.init();
}
},
seekTo(event) {
const rect = event.target.getBoundingClientRect();
const clickX = event.clientX - rect.left;
const width = rect.width;
const percentage = Math.max(0, Math.min(100, (clickX / width) * 100));
this.$store.miniPlayer.seek(percentage);
}
}));
</script>
<script>
document.addEventListener('livewire:navigated', () => {
const bgVideo = document.getElementById('bgVideo');
if (bgVideo) {
bgVideo.load(); // Ensures the video is reloaded
bgVideo.play().catch(() => {
console.warn('Video play failed.');
});
}
});
</script>
<script>
// Close dropdown when clicking outside
document.addEventListener('click', function(event) {
const dropdown = document.getElementById('language-dropdown');
const button = event.target.closest('button');
if (!button || !button.onclick) {
dropdown.classList.add('hidden');
}
});
</script>
</body>
</html>
