File: /var/www/laracopilot.stgviitor.com/laracopilot-wp/wp-content/themes/laracopilot/templates/home.php
<?php
/* Template Name: Home Page Template
*
* This is the template that displays the home page content.
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/
*
* @package LaraCopilot
* @version 1.0.0
*/
get_header();
?>
<!-- Hero Section -->
<?php if (have_rows('page_sections')) : ?>
<?php while (have_rows('page_sections')) : the_row(); ?>
<?php if (get_row_layout() == 'hero_section') : ?>
<section class="relative min-h-screen flex items-center justify-center px-4 sm:px-6 lg:px-8 overflow-hidden py-8 sm:py-12 lg:py-0">
<!-- Floating code snippets -->
<div class="absolute inset-0 pointer-events-none overflow-hidden hidden sm:block">
<?php
$floating_code_snippets_one = get_sub_field('floating_code_snippets_one');
$floating_code_snippets_two = get_sub_field('floating_code_snippets_two');
$floating_code_snippet_three = get_sub_field('floating_code_snippet_three');
$floating_code_snippet_four = get_sub_field('floating_code_snippet_four');
?>
<div class="absolute top-20 left-10 bg-black/20 backdrop-blur-sm rounded-lg p-3 border border-red-500/20 animate-slow-drift">
<code class="text-red-400 text-xs font-mono"><?php echo $floating_code_snippets_one; ?></code>
</div>
<div class="absolute top-40 right-20 bg-black/20 backdrop-blur-sm rounded-lg p-3 border border-red-500/20 animate-slow-drift-reverse" style="animation-delay: 2s;">
<code class="text-green-400 text-xs font-mono">
<?php echo $floating_code_snippets_two; ?>
</code>
</div>
<div class="absolute bottom-32 left-1/4 bg-black/20 backdrop-blur-sm rounded-lg p-3 border border-red-500/20 animate-slow-drift" style="animation-delay: 4s;">
<code class="text-blue-400 text-xs font-mono">
<?php echo $floating_code_snippet_three; ?>
</code>
</div>
<div class="absolute top-1/3 right-1/4 bg-black/20 backdrop-blur-sm rounded-lg p-3 border border-red-500/20 animate-slow-drift-reverse" style="animation-delay: 1s;">
<code class="text-purple-400 text-xs font-mono">
<?php echo $floating_code_snippet_four; ?>
</code>
</div>
</div>
<div class="max-w-7xl mx-auto relative z-10 w-full">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center">
<!-- Left Column -->
<div class="text-center lg:text-left">
<!-- Badge -->
<?php $hero_content = get_sub_field('hero_content'); ?>
<?php if (!empty($hero_content['badge_text'])) : ?>
<div class="inline-flex items-center bg-red-500/10 backdrop-blur-sm border border-red-500/30 rounded-full px-4 sm:px-6 py-2 mb-6 sm:mb-8 animate-fade-in-up">
<div class="w-2 h-2 bg-red-500 rounded-full mr-2 sm:mr-3 animate-pulse"></div>
<span class="text-red-400 font-medium text-xs sm:text-sm">
<?php echo esc_html($hero_content['badge_text']); ?>
</span>
</div>
<?php endif; ?>
<!-- Title -->
<?php if (!empty($hero_content['title'])) : ?>
<div class="mb-4 sm:mb-6 animate-fade-in-up" style="animation-delay: 0.1s;">
<h1 class="text-white leading-tight tracking-tight mb-4 text-3xl sm:text-4xl md:text-5xl lg:text-6xl instrument-sans-large">
<?php echo esc_html($hero_content['title']); ?>
</h1>
</div>
<?php endif; ?>
<!-- Subtitle -->
<?php if (!empty($hero_content['subtitle'])) : ?>
<div class="mb-6 sm:mb-8 animate-fade-in-up" style="animation-delay: 0.2s;">
<p class="text-base sm:text-lg md:text-xl text-white/80 leading-relaxed max-w-2xl mx-auto lg:mx-0 px-2 sm:px-0">
<?php echo esc_html($hero_content['subtitle']); ?>
</p>
</div>
<?php endif; ?>
<!-- Stats -->
<?php if (have_rows('stats')) : ?>
<div class="flex flex-wrap justify-center lg:justify-start gap-4 sm:gap-6 mb-6 sm:mb-8 animate-fade-in-up" style="animation-delay: 0.3s;">
<?php while (have_rows('stats')) : the_row(); ?>
<div class="text-center">
<div class="text-xl sm:text-2xl font-bold text-red-500">
<?php the_sub_field('stat_value'); ?>
</div>
<div class="text-white/60 text-xs sm:text-sm">
<?php the_sub_field('stat_label'); ?>
</div>
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>
<!-- CTA Buttons -->
<?php if (have_rows('cta_buttons')) : ?>
<div class="animate-fade-in-up" style="animation-delay: 0.4s;">
<div class="flex flex-col sm:flex-row gap-3 sm:gap-4 justify-center lg:justify-start">
<?php while (have_rows('cta_buttons')) : the_row();
$btn_text = get_sub_field('button_text');
$btn_link = get_sub_field('button_link'); ?>
<?php if ($btn_text && $btn_link) : ?>
<a href="<?php echo esc_url($btn_link); ?>" class="group relative bg-gradient-to-r from-red-500 to-red-600 text-white px-6 sm:px-8 py-3 sm:py-4 rounded-xl font-semibold text-base sm:text-lg hover:from-red-600 hover:to-red-700 transition-all duration-300 transform hover:scale-105 hover:shadow-2xl hover:shadow-red-500/25 w-full sm:w-auto sm:min-w-[180px]">
<?php echo esc_html($btn_text); ?>
</a>
<?php endif; ?>
<?php endwhile; ?>
</div>
</div>
<?php endif; ?>
</div>
<div class="relative animate-fade-in-up mb-8 lg:mb-0" style="animation-delay: 0.5s;">
<!-- Main dashboard container -->
<div class="relative bg-gradient-to-br from-gray-900/90 to-black/90 backdrop-blur-sm rounded-xl sm:rounded-2xl border border-red-500/30 shadow-2xl overflow-hidden mx-auto max-w-sm sm:max-w-md lg:max-w-none">
<!-- Header bar -->
<div class="flex items-center justify-between p-3 sm:p-4 border-b border-gray-700/50 bg-black/50">
<div class="flex items-center space-x-2 sm:space-x-3">
<div class="flex space-x-1 sm:space-x-1.5">
<div class="w-2 h-2 sm:w-3 sm:h-3 bg-red-500 rounded-full"></div>
<div class="w-2 h-2 sm:w-3 sm:h-3 bg-yellow-500 rounded-full"></div>
<div class="w-2 h-2 sm:w-3 sm:h-3 bg-green-500 rounded-full"></div>
</div>
<div class="text-white/80 text-xs sm:text-sm font-medium">LaraCopilot</div>
</div>
<div class="flex items-center space-x-1 sm:space-x-2">
<div class="w-1.5 h-1.5 sm:w-2 sm:h-2 bg-green-500 rounded-full animate-pulse"></div>
<span class="text-green-400 text-xs">Connected</span>
</div>
</div>
<!-- Code editor simulation -->
<div class="p-3 sm:p-4 h-64 sm:h-80 relative overflow-hidden">
<!-- Line numbers -->
<div class="absolute left-3 sm:left-4 top-3 sm:top-4 text-gray-500 text-xs sm:text-sm font-mono leading-5 sm:leading-6 select-none">
<div class="h-5 sm:h-6">1</div>
<div class="h-5 sm:h-6">2</div>
<div class="h-5 sm:h-6">3</div>
<div class="h-5 sm:h-6">4</div>
<div class="h-5 sm:h-6">5</div>
<div class="h-5 sm:h-6">6</div>
<div class="h-5 sm:h-6">7</div>
<div class="h-5 sm:h-6">8</div>
<div class="h-5 sm:h-6">9</div>
<div class="h-5 sm:h-6">10</div>
<div class="h-5 sm:h-6">11</div>
<div class="h-5 sm:h-6">12</div>
<div class="h-5 sm:h-6">13</div>
<div class="h-5 sm:h-6">14</div>
<div class="h-5 sm:h-6">15</div>
</div>
<!-- Code content -->
<div class="ml-8 sm:ml-12 text-xs sm:text-sm font-mono leading-5 sm:leading-6 space-y-0">
<div class="h-5 sm:h-6 flex items-center">
<span class="text-purple-400"><?php</span>
</div>
<div class="h-5 sm:h-6"></div>
<div class="h-5 sm:h-6 flex items-center">
<span class="text-blue-400">namespace</span>
<span class="text-white ml-1 sm:ml-2">App\Models;</span>
</div>
<div class="h-5 sm:h-6"></div>
<div class="h-5 sm:h-6 flex items-center">
<span class="text-blue-400">use</span>
<span class="text-white ml-1 sm:ml-2">Illuminate\Database\Eloquent\Model;</span>
</div>
<div class="h-5 sm:h-6"></div>
<div class="h-5 sm:h-6 flex items-center">
<span class="text-blue-400">class</span>
<span class="text-yellow-400 ml-1 sm:ml-2">Post</span>
<span class="text-blue-400 ml-1 sm:ml-2">extends</span>
<span class="text-yellow-400 ml-1 sm:ml-2">Model</span>
</div>
<div class="h-5 sm:h-6 flex items-center">
<span class="text-white">{</span>
</div>
<div class="h-5 sm:h-6 flex items-center ml-4 sm:ml-8">
<span class="text-blue-400">protected</span>
<span class="text-red-400 ml-1 sm:ml-2">$fillable</span>
<span class="text-white ml-1 sm:ml-2">=</span>
<span class="text-green-400 ml-1 sm:ml-2">[</span>
</div>
<div class="h-5 sm:h-6 flex items-center ml-6 sm:ml-12">
<span class="text-green-400">'title',</span>
<span class="text-green-400 ml-1 sm:ml-2">'content',</span>
<span class="text-green-400 ml-1 sm:ml-2">'user_id'</span>
</div>
<div class="h-5 sm:h-6 flex items-center ml-4 sm:ml-8">
<span class="text-green-400">];</span>
</div>
<div class="h-5 sm:h-6"></div>
<div class="h-5 sm:h-6 flex items-center ml-4 sm:ml-8">
<span class="text-blue-400">public</span>
<span class="text-blue-400 ml-1 sm:ml-2">function</span>
<span class="text-yellow-400 ml-1 sm:ml-2">user()</span>
</div>
<div class="h-5 sm:h-6 flex items-center ml-4 sm:ml-8">
<span class="text-white">{</span>
</div>
<div class="h-5 sm:h-6 flex items-center ml-6 sm:ml-12">
<span class="text-blue-400">return</span>
<span class="text-red-400 ml-1 sm:ml-2">$this</span>
<span class="text-white">-></span>
<span class="text-yellow-400">belongsTo</span>
<span class="text-white">(</span>
<span class="text-yellow-400">User</span>
<span class="text-white">::</span>
<span class="text-blue-400">class</span>
<span class="text-white">);</span>
</div>
</div>
<!-- AI assistance popup - Hidden on mobile -->
<div class="absolute bottom-3 sm:bottom-4 right-3 sm:right-4 bg-red-500/20 backdrop-blur-sm border border-red-500/40 rounded-lg p-2 sm:p-3 max-w-32 sm:max-w-48 animate-pulse-gentle hidden sm:block">
<div class="flex items-start space-x-1 sm:space-x-2">
<div class="w-4 h-4 sm:w-6 sm:h-6 bg-red-500 rounded-full flex items-center justify-center mt-0.5">
<svg class="w-2 h-2 sm:w-3 sm:h-3 text-white" fill="currentColor" viewBox="0 0 20 20">
<path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div>
<div class="text-white text-xs font-medium mb-0.5 sm:mb-1">AI Suggestion</div>
<div class="text-white/80 text-xs">Add timestamps() to your migration?</div>
</div>
</div>
</div>
</div>
<!-- Bottom status bar -->
<div class="px-3 sm:px-4 py-2 bg-black/50 border-t border-gray-700/50 flex items-center justify-between text-xs">
<div class="flex items-center space-x-2 sm:space-x-4 text-white/60">
<span class="text-xs">Laravel 11</span>
<span class="hidden sm:inline">•</span>
<span class="text-xs">PHP 8.3</span>
<span class="hidden sm:inline">•</span>
<span class="text-green-400 text-xs">✓ PSR-12</span>
</div>
<div class="flex items-center space-x-1 sm:space-x-2">
<div class="w-1.5 h-1.5 sm:w-2 sm:h-2 bg-red-500 rounded-full animate-pulse"></div>
<span class="text-red-400 text-xs">AI Active</span>
</div>
</div>
</div>
<!-- Floating feature cards around the dashboard - Hidden on mobile -->
<div class="absolute -top-4 -left-4 bg-black/60 backdrop-blur-sm border border-green-500/30 rounded-lg p-3 animate-float-particle-1 hidden lg:block">
<div class="flex items-center space-x-2">
<div class="w-2 h-2 bg-green-500 rounded-full"></div>
<span class="text-green-400 text-xs font-medium">Auto-complete</span>
</div>
</div>
<div class="absolute -top-4 -right-4 bg-black/60 backdrop-blur-sm border border-blue-500/30 rounded-lg p-3 animate-float-particle-2 hidden lg:block">
<div class="flex items-center space-x-2">
<div class="w-2 h-2 bg-blue-500 rounded-full"></div>
<span class="text-blue-400 text-xs font-medium">Smart Refactor</span>
</div>
</div>
<div class="absolute -bottom-4 -left-4 bg-black/60 backdrop-blur-sm border border-purple-500/30 rounded-lg p-3 animate-float-particle-3 hidden lg:block">
<div class="flex items-center space-x-2">
<div class="w-2 h-2 bg-purple-500 rounded-full"></div>
<span class="text-purple-400 text-xs font-medium">Code Gen</span>
</div>
</div>
<div class="absolute -bottom-4 -right-4 bg-black/60 backdrop-blur-sm border border-yellow-500/30 rounded-lg p-3 animate-float-particle-4 hidden lg:block">
<div class="flex items-center space-x-2">
<div class="w-2 h-2 bg-yellow-500 rounded-full"></div>
<span class="text-yellow-400 text-xs font-medium">Best Practices</span>
</div>
</div>
</div>
</div>
</div>
</section>
<?php endif; ?>
<?php endwhile; ?>
<?php endif; ?>
<?php get_footer(); ?>