File: /var/www/laracopilot.stgviitor.com/laracopilot-wp/wp-content/themes/laracopilot/single.php
<?php
/**
* The template for displaying all single posts
*
* @package LaraCopilot
* @version 1.0.0
*/
get_header(); ?>
<div class="min-h-screen pt-20">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<?php while (have_posts()) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class('post'); ?>>
<!-- Post Header -->
<header class="mb-8">
<?php if (has_post_thumbnail()) : ?>
<div class="aspect-video overflow-hidden rounded-2xl mb-8">
<?php the_post_thumbnail('laracopilot-hero', array('class' => 'w-full h-full object-cover')); ?>
</div>
<?php endif; ?>
<h1 class="post-title text-4xl sm:text-5xl font-bold text-white mb-4">
<?php the_title(); ?>
</h1>
<div class="post-meta flex items-center space-x-4 text-sm">
<div class="flex items-center">
<svg class="w-4 h-4 text-red-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
</svg>
<time datetime="<?php echo get_the_date('c'); ?>"><?php echo get_the_date(); ?></time>
</div>
<div class="flex items-center">
<svg class="w-4 h-4 text-red-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
</svg>
<span>By <?php the_author(); ?></span>
</div>
<?php if (has_category()) : ?>
<div class="flex items-center">
<svg class="w-4 h-4 text-red-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
</svg>
<span><?php the_category(', '); ?></span>
</div>
<?php endif; ?>
</div>
</header>
<!-- Post Content -->
<div class="post-content prose prose-lg max-w-none">
<?php the_content(); ?>
<?php
wp_link_pages(array(
'before' => '<div class="page-links mt-8"><span class="text-white font-semibold">Pages:</span>',
'after' => '</div>',
'link_before' => '<span class="bg-red-600 text-white px-3 py-1 rounded mr-2">',
'link_after' => '</span>',
));
?>
</div>
<!-- Post Tags -->
<?php if (has_tag()) : ?>
<div class="mt-8 pt-8 border-t border-red-500/20">
<h3 class="text-white font-semibold mb-4">Tags:</h3>
<div class="flex flex-wrap gap-2">
<?php the_tags('<span class="bg-red-500/20 text-red-400 px-3 py-1 rounded-full text-sm">', '</span><span class="bg-red-500/20 text-red-400 px-3 py-1 rounded-full text-sm">', '</span>'); ?>
</div>
</div>
<?php endif; ?>
<!-- Post Navigation -->
<nav class="mt-12 pt-8 border-t border-red-500/20">
<div class="flex justify-between items-center">
<div class="flex-1">
<?php
$prev_post = get_previous_post();
if ($prev_post) :
?>
<a href="<?php echo get_permalink($prev_post->ID); ?>" class="group flex items-center text-red-400 hover:text-red-300 transition-colors">
<svg class="w-5 h-5 mr-2 group-hover:-translate-x-1 transition-transform" 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>
<div>
<div class="text-sm text-gray-400">Previous Post</div>
<div class="font-semibold"><?php echo get_the_title($prev_post->ID); ?></div>
</div>
</a>
<?php endif; ?>
</div>
<div class="flex-1 text-right">
<?php
$next_post = get_next_post();
if ($next_post) :
?>
<a href="<?php echo get_permalink($next_post->ID); ?>" class="group flex items-center justify-end text-red-400 hover:text-red-300 transition-colors">
<div class="text-right">
<div class="text-sm text-gray-400">Next Post</div>
<div class="font-semibold"><?php echo get_the_title($next_post->ID); ?></div>
</div>
<svg class="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" 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>
</a>
<?php endif; ?>
</div>
</div>
</nav>
</article>
<?php endwhile; ?>
<!-- FAQ Section -->
<?php
$title = get_field('blog_faq_section_title');
$add_faqs = get_field('add_blog_faqs');
if ($title && $add_faqs) {
?>
<section id="faq" class="py-12 relative overflow-hidden">
<div class="relative z-10">
<div class="mb-8">
<h3 class="text-white mb-4 font-bold text-3xl sm:text-4xl lg:text-[40px] leading-tight">
<?php echo $title; ?>
</h3>
</div>
<div class="space-y-4 sm:space-y-6">
<?php
foreach ($add_faqs as $index => $faq) {
$question = $faq['faq_title'];
$answer = $faq['faq_description'];
?>
<div class="bg-black/40 backdrop-blur-sm rounded-2xl border border-white/10 hover:border-red-500/50 transition-all duration-300 overflow-hidden">
<button class="w-full px-6 sm:px-8 py-4 sm:py-6 text-left flex justify-between items-center hover:bg-black/60 transition-all duration-300 faq-button" onclick="toggleFAQ(<?php echo $index; ?>)">
<span class="sm:font-semibold text-white pr-4 sm:pr-8 text-sm sm:text-base leading-relaxed">
<?php echo $question; ?>
</span>
<div class="flex-shrink-0">
<svg class="w-5 h-5 sm:w-6 sm:h-6 text-white/60 transition-all duration-300 hover:text-red-400 faq-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</div>
</button>
<div class="faq-answer hidden px-6 sm:px-8 pb-6 sm:pb-8 border-t border-white/10">
<p class="text-white/80 leading-relaxed text-sm sm:text-base pt-4">
<?php echo $answer; ?>
</p>
</div>
</div>
<?php } ?>
</div>
</div>
</section>
<script>
function toggleFAQ(index) {
const button = document.querySelectorAll('.faq-button')[index];
const answer = document.querySelectorAll('.faq-answer')[index];
const icon = button.querySelector('.faq-icon');
if (answer.classList.contains('hidden')) {
answer.classList.remove('hidden');
icon.classList.add('transform', 'rotate-180');
} else {
answer.classList.add('hidden');
icon.classList.remove('transform', 'rotate-180');
}
}
</script>
<?php } ?>
</div>
</div>
<?php get_footer(); ?>