File: /var/www/iprojectlab.com/laracopilot-wp/wp-content/themes/laracopilot/header.php
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="<?php bloginfo('description'); ?>">
<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="<?php echo esc_url(get_site_icon_url()); ?>">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@graph": [{
"@type": "Organization",
"name": "LaraCopilot",
"url": "https://laracopilot.com/",
"logo": "https://laracopilot.com/images/white-logo.svg",
"description": "LaraCopilot is an AI-powered assistant for Laravel developers, automating code generation, CRUD scaffolding, and boosting productivity in Laravel projects.",
"contactPoint": {
"@type": "ContactPoint",
"contactType": "customer support",
"email": "support@laracopilot.com"
},
"sameAs": [
"https://x.com/laracopilot"
]
},
{
"@type": "SoftwareApplication",
"name": "LaraCopilot",
"operatingSystem": "Web",
"applicationCategory": "DeveloperTool",
"url": "https://laracopilot.com/",
"description": "LaraCopilot automates Laravel development by generating CRUD scaffolding, validation rules, and tests, helping developers code faster with AI-powered workflows.",
"softwareVersion": "1.0",
"provider": {
"@type": "Organization",
"name": "LaraCopilot"
}
},
{
"@context": "https://schema.org",
"@type": "WebSite",
"name": "LaraCopilot",
"url": "https://laracopilot.com/",
"potentialAction": {
"@type": "SearchAction",
"target": "https://laracopilot.com/?s={search_term_string}",
"query-input": "required name=search_term_string"
}
}
]
}
</script>
<?php wp_head(); ?>
</head>
<body <?php body_class('min-h-screen relative overflow-x-hidden'); ?> style="background-color: #000000;">
<!-- Background Pattern - Enhanced -->
<div class="absolute inset-0 overflow-hidden" aria-hidden="true">
<!-- Primary Grid Pattern -->
<div class="absolute inset-0" style="
background-image: radial-gradient(circle at center, rgba(245, 48, 3, 0.2) 1px, transparent 1px);
background-size: 30px 30px;
"></div>
<!-- Secondary Grid Pattern for depth -->
<div class="absolute inset-0" style="
background-image: radial-gradient(circle at center, rgba(245, 48, 3, 0.05) 1px, transparent 1px);
background-size: 60px 60px;
transform: rotate(45deg);
"></div>
<!-- Gradient Effects -->
<div class="absolute inset-0 overflow-hidden">
<!-- Main Red Gradient - Top Right -->
<div class="absolute rounded-full" style="
top: -50%;
right: -25%;
width: 80vw;
height: 80vw;
background: radial-gradient(circle at center, rgba(245, 48, 3, 0.4) 0%, rgba(220, 38, 38, 0.2) 30%, rgba(245, 48, 3, 0.1) 50%, transparent 80%);
border-radius: 50%;
filter: blur(60px);
animation: float 20s ease-in-out infinite;
"></div>
<!-- Secondary Red Gradient - Center -->
<div class="absolute rounded-full" style="
top: 20%;
right: 10%;
width: 40vw;
height: 40vw;
background: radial-gradient(circle at center, rgba(245, 48, 3, 0.15) 0%, rgba(185, 28, 28, 0.08) 40%, transparent 70%);
border-radius: 50%;
filter: blur(40px);
animation: float 15s ease-in-out infinite reverse;
"></div>
<!-- Bottom Left Gradient -->
<div class="absolute rounded-full" style="
bottom: -30%;
left: -25%;
width: 70vw;
height: 70vw;
background: radial-gradient(circle at center, rgba(139, 69, 19, 0.1) 0%, rgba(245, 48, 3, 0.08) 40%, transparent 70%);
border-radius: 50%;
filter: blur(50px);
animation: float 25s ease-in-out infinite;
"></div>
<!-- Accent Gradient - Left Side -->
<div class="absolute rounded-full" style="
top: 60%;
left: -10%;
width: 30vw;
height: 30vw;
background: radial-gradient(circle at center, rgba(245, 48, 3, 0.12) 0%, rgba(220, 38, 38, 0.06) 50%, transparent 80%);
border-radius: 50%;
filter: blur(35px);
animation: float 18s ease-in-out infinite reverse;
"></div>
</div>
<!-- Subtle overlay for depth -->
<div class="absolute inset-0" style="
background: radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,0.1) 70%, rgba(0,0,0,0.3) 100%);
"></div>
</div>
<div class="relative z-10">
<!-- Navigation -->
<nav class="fixed top-0 w-full bg-black/80 backdrop-blur-lg border-b border-red-500/20 z-50">
<div class="max-w-7xl mx-auto px-4 md:px-6 lg:px-0">
<div class="flex justify-between items-center py-4">
<div class="flex items-center relative">
<a href="<?php echo esc_url(home_url('/')); ?>" class="relative">
<?php
$custom_logo_id = get_theme_mod('custom_logo');
$logo_url = wp_get_attachment_image_url($custom_logo_id, 'full');
if ($logo_url) { ?>
<img src="<?php echo esc_url($logo_url); ?>" alt="<?php echo esc_attr(get_bloginfo('name')); ?>" class="h-8">
<?php } else { ?>
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/white-logo.svg" alt="<?php bloginfo('name'); ?>" class="h-8" />
<?php } ?>
</a>
<!-- Interactive Monkey Hanging Beta Badge -->
<div class="relative ml-3 group cursor-pointer" onclick="console.log('🐵 Beta badge clicked!')">
<!-- Hanging string/rope -->
<div class="absolute top-0 left-1/2 transform -translate-x-1/2 w-0.5 h-3 bg-gradient-to-b from-red-300 to-red-400 rounded-full opacity-60 group-hover:animate-pulse"></div>
<!-- Main hanging badge container -->
<div class="relative transform-gpu transition-all duration-300 ease-out group-hover:animate-bounce sway" style="transform-origin: top center;">
<!-- Badge shadow for depth -->
<div class="absolute inset-0 bg-black/20 rounded-xl blur-sm transform translate-y-1 group-hover:translate-y-2 transition-transform duration-200"></div>
<!-- Main badge -->
<div class="relative bg-gradient-to-br from-red-500 via-red-600 to-red-700 text-white text-[10px] sm:text-xs font-bold tracking-wider px-3 py-1.5 rounded-xl border-2 border-red-300/40 shadow-2xl transform transition-all duration-200 group-hover:scale-110 group-hover:rotate-2 group-hover:shadow-red-500/50">
<span class="relative z-10 drop-shadow-md">BETA</span>
<!-- Interactive sparkles -->
<div class="absolute -top-1 -left-1 w-1 h-1 bg-red-500 rounded-full animate-ping group-hover:bg-red-600"></div>
<div class="absolute -bottom-1 -right-2 w-1 h-1 bg-red-500 rounded-full animate-ping" style="animation-delay: 0.5s;"></div>
<!-- Swinging rope effect on hover -->
<div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent transform -skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-400"></div>
</div>
<!-- Hanging chain/rope decorative elements -->
<div class="absolute -top-2 left-1/2 transform -translate-x-1/2 w-1 h-1 bg-red-400 rounded-full"></div>
<div class="absolute -top-1 left-1/2 transform -translate-x-1/2 w-0.5 h-0.5 bg-red-300 rounded-full"></div>
</div>
</div>
</div>
<!-- Desktop Navigation -->
<div class="hidden lg:flex items-center space-x-6 lg:space-x-8 px-4">
<?php
wp_nav_menu(array(
'theme_location' => 'primary',
'menu_class' => 'flex items-center space-x-6 lg:space-x-8',
'container' => false,
));
?>
</div>
<!-- Auth Buttons (Desktop) -->
<?php
$sign_in_text = get_field('sign_in_text', 'option');
$sign_in_link = get_field('sign_in_link', 'option');
$get_start_text = get_field('get_start_text', 'option');
$get_start_link = get_field('get_start_link', 'option');
?>
<div class="hidden lg:flex items-center space-x-6">
<?php if ($sign_in_link) { ?>
<a href="<?php echo $sign_in_link; ?>" class="text-white/80 hover:text-white transition-colors font-medium py-2 block mobile-menu-link">
<?php echo $sign_in_text; ?>
</a>
<?php }
if ($get_start_link) { ?>
<a href="<?php echo $get_start_link; ?>" class="bg-red-600 text-white px-6 py-2.5 rounded-lg font-medium text-center md:inline-block mobile-menu-link">
<?php echo $get_start_text; ?>
</a>
<?php } ?>
</div>
<!-- Mobile menu button -->
<div class="lg:hidden flex items-center space-x-2">
<button id="mobile-menu-btn" class="text-white p-2 hover:bg-white/10 rounded-lg transition-colors duration-200">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
</div>
</div>
<!-- Mobile Navigation -->
<div id="mobile-menu" class="mobile-menu lg:hidden pb-4 border-t border-red-500/20 mt-4">
<div class="flex flex-col space-y-2 md:space-y-4 pt-4">
<?php
wp_nav_menu(array(
'theme_location' => 'primary',
'menu_class' => 'flex flex-col space-y-2 md:space-y-4',
'container' => false,
));
?>
<div class="border-t border-red-500/20 pt-4 mt-2">
<?php if ($sign_in_link) { ?>
<a href="<?php echo $sign_in_link; ?>" class="text-white/80 hover:text-white transition-colors font-medium py-2 block mobile-menu-link">
<?php echo $sign_in_text; ?>
</a>
<?php }
if ($get_start_link) { ?>
<a href="<?php echo $get_start_link; ?>" class="bg-red-600 text-white px-6 py-2.5 rounded-lg font-medium text-center md:inline-block mt-3 mobile-menu-link">
<?php echo $get_start_text; ?>
</a>
<?php } ?>
</div>
</div>
</div>
</div>
</nav>
<!-- Main Content Area -->
<main class="relative">