Basic

rebelsoftt/
├── style.css                  # থিম রেজিস্ট্রেশন ফাইল
├── functions.php              # থিমের মূল ফাংশন ফাইল
├── index.php                  # মূল টেমপ্লেট ফাইল
├── header.php                 # হেডার টেমপ্লেট
├── footer.php                 # ফুটার টেমপ্লেট
├── page.php                   # পেজ টেমপ্লেট
├── single.php                 # সিঙ্গেল পোস্ট টেমপ্লেট
├── template-service.php       # সার্ভিস পেজ টেমপ্লেট
├── package.json               # npm প্যাকেজ কনফিগারেশন
├── tailwind.config.js         # Tailwind CSS কনফিগারেশন
├── postcss.config.js          # PostCSS কনফিগারেশন
├── template-parts/            # টেমপ্লেট পার্টস ফোল্ডার
│   └── content-service.php    # সার্ভিস কনটেন্ট টেমপ্লেট
├── src/                       # সোর্স ফাইল ফোল্ডার
│   ├── css/                   # CSS সোর্স ফাইল
│   │   └── main.css           # মূল CSS ফাইল (Tailwind ডিরেক্টিভ সহ)
│   └── js/                    # JavaScript সোর্স ফাইল
│       └── main.js            # মূল JavaScript ফাইল
├── assets/                    # কম্পাইল করা অ্যাসেট ফোল্ডার
│   ├── css/                   # কম্পাইল করা CSS ফাইল
│   ├── js/                    # কম্পাইল করা JavaScript ফাইল
│   └── images/                # ইমেজ ফাইল
└── inc/                       # ইনক্লুড ফাইল ফোল্ডার
    └── enqueue-scripts.php    # স্ক্রিপ্ট এনকিউ ফাংশন

npm init -y

npm install -D tailwindcss@3.4.0 postcss autoprefixer

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./**/*.php", "./src/**/*.js", "*.{js,ts,jsx,tsx,mdx}"],
  darkMode: 'class',
  theme: {
    extend: {
      fontFamily: {
        heading: ['Orbitron', 'sans-serif'],
        subheading: ['Orbitron', 'sans-serif'],
        body: ['Space Grotesk', 'sans-serif'],
      },
      colors: {
        primary: {
          DEFAULT: '#377DFF',
          50: 'rgba(55, 125, 255, 0.05)',
          100: 'rgba(55, 125, 255, 0.1)',
          200: 'rgba(55, 125, 255, 0.2)',
          300: 'rgba(55, 125, 255, 0.3)',
          400: 'rgba(55, 125, 255, 0.4)',
          500: '#377DFF',
          600: '#0055FF',
          700: '#0044CC',
          800: '#003399',
          900: '#002266',
          950: '#001133',
          foreground: '#FFFFFF',
        },
        accent: {
          DEFAULT: '#005AFF',
          50: 'rgba(0, 90, 255, 0.05)',
          100: 'rgba(0, 90, 255, 0.1)',
          200: 'rgba(0, 90, 255, 0.2)',
          300: 'rgba(0, 90, 255, 0.3)',
          400: 'rgba(0, 90, 255, 0.4)',
          500: '#005AFF',
          600: '#0048CC',
          700: '#003699',
          800: '#002466',
          900: '#001233',
          foreground: '#FFFFFF',
        },
      },
      animation: {
        'slide-right': 'slideRight 0.5s ease-out',
        'slide-left': 'slideLeft 0.5s ease-out',
        'float': 'float 6s ease-in-out infinite',
        'pulse': 'pulse 2s infinite',
        'spin-slow': 'spin 3s linear infinite',
        'bounce-slow': 'bounce 3s infinite',
        'fade-in': 'fadeIn 0.5s ease-in-out',
        'slide-up': 'slideUp 0.5s ease-out',
        'slide-down': 'slideDown 0.5s ease-out',
        'rotate': 'rotate 0.5s ease-out',
        'neon': 'neon 1.5s ease-in-out infinite alternate',
      },
      keyframes: {
        slideRight: {
          '0%': { transform: 'translateX(-20px)', opacity: '0' },
          '100%': { transform: 'translateX(0)', opacity: '1' },
        },
        slideLeft: {
          '0%': { transform: 'translateX(20px)', opacity: '0' },
          '100%': { transform: 'translateX(0)', opacity: '1' },
        },
        float: {
          '0%, 100%': { transform: 'translateY(0)' },
          '50%': { transform: 'translateY(-20px)' },
        },
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        },
        slideUp: {
          '0%': { transform: 'translateY(20px)', opacity: '0' },
          '100%': { transform: 'translateY(0)', opacity: '1' },
        },
        slideDown: {
          '0%': { transform: 'translateY(-20px)', opacity: '0' },
          '100%': { transform: 'translateY(0)', opacity: '1' },
        },
        rotate: {
          '0%': { transform: 'rotate(-10deg)', opacity: '0' },
          '100%': { transform: 'rotate(0)', opacity: '1' },
        },
        neon: {
          'from': { 
            textShadow: '0 0 5px #377DFF, 0 0 10px #377DFF, 0 0 15px #377DFF, 0 0 20px #377DFF' 
          },
          'to': { 
            textShadow: '0 0 2px #377DFF, 0 0 5px #377DFF, 0 0 10px #377DFF, 0 0 15px #377DFF' 
          },
        },
      },
      transitionTimingFunction: {
        'bounce': 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',
        'smooth': 'cubic-bezier(0.4, 0, 0.2, 1)',
      },
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-primary': 'linear-gradient(135deg, #377DFF, #005AFF)',
      },
    }
  },
  plugins: [],
}

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

const mix = require('laravel-mix');

mix.js('src/js/main.js', 'assets/js')
   .postCss('src/css/main.css', 'assets/css', [
     require('tailwindcss'),
     require('autoprefixer'),
   ]);

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom CSS */
@layer base {
  html {
    scroll-behavior: smooth;
  }
  
  body {
    @apply font-body overflow-x-hidden transition-colors duration-300;
  }
  
  /* Light mode styles */
  .light {
    --bg-color: #ffffff;
    --text-color: #0A0A0F;
    --muted-bg: #f5f5f7;
    --muted-text: #71717a;
    --border-color: #e5e5e7;
  }

  /* Dark mode styles */
  .dark {
    --bg-color: #0A0A0F;
    --text-color: #ffffff;
    --muted-bg: #1E1E2A;
    --muted-text: #A5A5B5;
    --border-color: #2A2A3A;
  }
}

@layer components {
  /* Neon text effect */
  .neon-text {
    @apply text-primary;
    animation: neon 1.5s ease-in-out infinite alternate;
  }

  /* Gradient text effect */
  .gradient-text {
    @apply inline-block;
    background: linear-gradient(135deg, #377DFF, #005AFF);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  
  /* Navigation styles */
  .nav-link {
    @apply text-[0.8rem] tracking-wider font-medium py-2 mx-3 relative transition-all duration-300;
  }

  .nav-link::after {
    content: '';
    @apply absolute bottom-0 left-0 w-0 h-px bg-primary transition-all duration-300;
  }

  .nav-link:hover::after {
    @apply w-full;
  }
  
  .dropdown-menu {
    @apply rounded-lg overflow-hidden shadow-lg border border-gray-200/50 dark:border-white/5 backdrop-blur-md;
  }

  .dark .dropdown-menu {
    @apply border-white/5 shadow-xl;
  }

  .dropdown-item {
    @apply p-4 border-b border-gray-200/50 dark:border-white/5 transition-all duration-200;
  }

  .dropdown-item:last-child {
    @apply border-b-0;
  }

  .dropdown-item:hover {
    @apply bg-primary/5;
  }

  .dropdown-item-title {
    @apply text-[0.85rem] font-semibold mb-1 tracking-wide text-gray-900 dark:text-white font-subheading;
  }

  .dropdown-item-desc {
    @apply text-[0.75rem] opacity-80 leading-relaxed text-gray-600 dark:text-white/70;
  }
  
  .nav-button {
    @apply text-[0.75rem] tracking-wider py-2 px-5 rounded-full transition-all duration-300;
  }
  
  /* Mobile menu styles */
  #mobile-menu-container.active .absolute {
    @apply opacity-100 pointer-events-auto;
  }

  #mobile-menu-container.active #mobile-menu {
    @apply translate-x-0;
  }

  .mobile-dropdown-content.active {
    @apply max-h-[300px] py-[10px] px-[15px];
  }
  
  /* Scroll progress indicator */
  #scroll-progress {
    @apply fixed top-0 left-0 h-[3px] bg-gradient-to-r from-primary to-accent w-0 z-[9995] transition-[width] duration-100;
  }
  
  /* Parallax effect */
  .parallax {
    @apply bg-fixed bg-cover bg-center;
  }
  
  /* Fade-in animation */
  .fade-in {
    @apply opacity-0 translate-y-5 transition-[opacity,transform] duration-600;
  }

  .fade-in.visible {
    @apply opacity-100 translate-y-0;
  }
  
  /* Button hover effects */
  .nav-button:hover,
  .inline-flex:hover {
    @apply -translate-y-0.5 shadow-lg shadow-primary/30;
  }
}

@layer utilities {
  /* Custom animations */
  @keyframes neon {
    from {
      text-shadow: 0 0 5px #377DFF, 0 0 10px #377DFF, 0 0 15px #377DFF, 0 0 20px #377DFF;
    }
    to {
      text-shadow: 0 0 2px #377DFF, 0 0 5px #377DFF, 0 0 10px #377DFF, 0 0 15px #377DFF;
    }
  }
}

/**
 * Main JavaScript file for the RebelSoftt theme
 */

document.addEventListener('DOMContentLoaded', function() {
  // Theme initialization
  initTheme();
  
  // Initialize components
  initPreloader();
  initMobileMenu();
  initScrollProgress();
  initCustomCursor();
  initBackToTop();
  initSmoothScroll();
  initFadeInElements();
});

/**
 * Initialize theme (light/dark mode)
 */
function initTheme() {
  const themeToggle = document.getElementById('theme-toggle');
  const mobileThemeToggle = document.getElementById('mobile-theme-toggle');
  const html = document.documentElement;
  
  // Check for saved theme preference or use device preference
  const savedTheme = localStorage.getItem('theme');
  
  if (savedTheme === 'dark' || (!savedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
    html.classList.remove('light');
    html.classList.add('dark');
  } else {
    html.classList.remove('dark');
    html.classList.add('light');
  }
  
  // Toggle theme function
  function toggleTheme() {
    if (html.classList.contains('light')) {
      html.classList.remove('light');
      html.classList.add('dark');
      localStorage.setItem('theme', 'dark');
    } else {
      html.classList.remove('dark');
      html.classList.add('light');
      localStorage.setItem('theme', 'light');
    }
  }
  
  // Add event listeners to theme toggle buttons
  if (themeToggle) {
    themeToggle.addEventListener('click', toggleTheme);
  }
  
  if (mobileThemeToggle) {
    mobileThemeToggle.addEventListener('click', toggleTheme);
  }
}

/**
 * Initialize preloader
 */
function initPreloader() {
  const preloader = document.getElementById('preloader');
  
  if (preloader) {
    setTimeout(function() {
      preloader.classList.add('opacity-0');
      setTimeout(() => {
        preloader.style.display = 'none';
      }, 500);
    }, 800);
  }
}

/**
 * Initialize mobile menu
 */
function initMobileMenu() {
  const mobileMenuToggle = document.getElementById('mobile-menu-toggle');
  const mobileMenuContainer = document.getElementById('mobile-menu-container');
  const mobileMenuClose = document.getElementById('mobile-menu-close');
  const mobileMenuOverlay = document.querySelector('#mobile-menu-container .absolute');
  const mobileDropdownToggles = document.querySelectorAll('.mobile-dropdown-toggle');
  
  // Open mobile menu
  if (mobileMenuToggle && mobileMenuContainer) {
    mobileMenuToggle.addEventListener('click', function() {
      mobileMenuContainer.classList.add('active');
      document.body.style.overflow = 'hidden';
      mobileMenuToggle.setAttribute('aria-expanded', 'true');
      mobileMenuContainer.setAttribute('aria-hidden', 'false');
    });
  }
  
  // Close mobile menu function
  function closeMobileMenu() {
    if (mobileMenuContainer) {
      mobileMenuContainer.classList.remove('active');
      document.body.style.overflow = '';
      if (mobileMenuToggle) {
        mobileMenuToggle.setAttribute('aria-expanded', 'false');
      }
      mobileMenuContainer.setAttribute('aria-hidden', 'true');
    }
  }
  
  // Add event listeners for closing mobile menu
  if (mobileMenuClose) {
    mobileMenuClose.addEventListener('click', closeMobileMenu);
  }
  
  if (mobileMenuOverlay) {
    mobileMenuOverlay.addEventListener('click', closeMobileMenu);
  }
  
  // Mobile menu links should close menu when clicked
  const mobileMenuLinks = document.querySelectorAll('#mobile-menu a[href^="#"]');
  mobileMenuLinks.forEach(link => {
    link.addEventListener('click', closeMobileMenu);
  });
  
  // Mobile dropdown toggles
  mobileDropdownToggles.forEach(toggle => {
    toggle.addEventListener('click', function() {
      const parent = this.closest('.mobile-nav-item');
      const content = parent.querySelector('.mobile-dropdown-content');
      const icon = this.querySelector('svg');
      
      // Toggle current dropdown
      content.classList.toggle('active');
      
      // Rotate icon
      if (content.classList.contains('active')) {
        icon.style.transform = 'rotate(180deg)';
      } else {
        icon.style.transform = 'rotate(0)';
      }
      
      // Update ARIA attributes
      const expanded = content.classList.contains('active');
      this.setAttribute('aria-expanded', expanded);
    });
  });
}

/**
 * Initialize scroll progress indicator
 */
function initScrollProgress() {
  const scrollProgress = document.getElementById('scroll-progress');
  
  if (scrollProgress) {
    window.addEventListener('scroll', function() {
      const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
      const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
      const scrolled = (winScroll / height) * 100;
      
      scrollProgress.style.width = scrolled + '%';
    });
  }
}

/**
 * Initialize custom cursor
 */
function initCustomCursor() {
  const cursorDot = document.getElementById('cursor-dot');
  const cursorCircle = document.getElementById('cursor-circle');
  
  if (cursorDot && cursorCircle) {
    document.addEventListener('mousemove', function(e) {
      cursorDot.style.left = e.clientX + 'px';
      cursorDot.style.top = e.clientY + 'px';
      
      cursorCircle.style.left = e.clientX + 'px';
      cursorCircle.style.top = e.clientY + 'px';
    });
    
    // Add hover effect to links and buttons
    const hoverElements = document.querySelectorAll('a, button, input[type="submit"], .hover-effect');
    
    hoverElements.forEach(element => {
      element.addEventListener('mouseenter', () => {
        cursorDot.classList.add('scale-150');
        cursorCircle.classList.add('scale-150');
      });
      
      element.addEventListener('mouseleave', () => {
        cursorDot.classList.remove('scale-150');
        cursorCircle.classList.remove('scale-150');
      });
    });
  }
}

/**
 * Initialize back to top button
 */
function initBackToTop() {
  const backToTopBtn = document.getElementById('back-to-top');
  
  if (backToTopBtn) {
    window.addEventListener('scroll', function() {
      if (window.scrollY > 300) {
        backToTopBtn.classList.remove('opacity-0', 'invisible');
        backToTopBtn.classList.add('opacity-100', 'visible');
      } else {
        backToTopBtn.classList.add('opacity-0', 'invisible');
        backToTopBtn.classList.remove('opacity-100', 'visible');
      }
    });
    
    backToTopBtn.addEventListener('click', function() {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      });
    });
  }
}

/**
 * Initialize smooth scroll for anchor links
 */
function initSmoothScroll() {
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function(e) {
      e.preventDefault();
      
      const targetId = this.getAttribute('href');
      if (targetId === '#') return;
      
      const targetElement = document.querySelector(targetId);
      if (targetElement) {
        window.scrollTo({
          top: targetElement.offsetTop - 80,
          behavior: 'smooth'
        });
      }
    });
  });
}

/**
 * Initialize fade-in elements on scroll
 */
function initFadeInElements() {
  const fadeElements = document.querySelectorAll('.fade-in');
  
  if (fadeElements.length > 0 && 'IntersectionObserver' in window) {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('visible');
          observer.unobserve(entry.target);
        }
      });
    }, {
      threshold: 0.1
    });

    fadeElements.forEach(element => {
      observer.observe(element);
    });
  } else {
    // Fallback for browsers that don't support IntersectionObserver
    fadeElements.forEach(element => {
      element.classList.add('visible');
    });
  }
}

/*
Theme Name: RebelSoftt
Theme URI: https://rebelsoftt.com
Author: Your Name
Author URI: https://yourwebsite.com
Description: A custom WordPress theme for RebelSoftt with Tailwind CSS
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rebelsoftt
Tags: tailwind, custom, responsive
*/

<?php
/**
 * RebelSoftt থিমের ফাংশন এবং ডেফিনিশন
 *
 * @package RebelSoftt
 */

// ডিরেক্ট অ্যাক্সেস প্রিভেন্ট করা
if (!defined('ABSPATH')) {
    exit; // Exit if accessed directly
}

/**
 * থিম কনস্ট্যান্ট ডিফাইন করা
 */
define('REBELSOFTT_VERSION', '1.0.0');
define('REBELSOFTT_DIR', get_template_directory());
define('REBELSOFTT_URI', get_template_directory_uri());

/**
 * থিম সেটআপ ফাংশন
 */
function rebelsoftt_setup() {
    // ওয়ার্ডপ্রেস কোর ফিচার সাপোর্ট যোগ করা
    add_theme_support('title-tag'); // <title> ট্যাগ সাপোর্ট
    add_theme_support('post-thumbnails'); // ফিচার্ড ইমেজ সাপোর্ট
    add_theme_support('automatic-feed-links'); // RSS ফিড লিঙ্ক সাপোর্ট
    add_theme_support('customize-selective-refresh-widgets'); // সিলেক্টিভ রিফ্রেশ উইজেট সাপোর্ট
    add_theme_support('html5', array(
        'search-form',
        'comment-form',
        'comment-list',
        'gallery',
        'caption',
        'style',
        'script',
    )); // HTML5 সাপোর্ট
    
    // মেনু লোকেশন রেজিস্টার করা (ভবিষ্যতে ব্যবহারের জন্য)
    register_nav_menus(array(
        'primary' => esc_html__('প্রাইমারি মেনু', 'rebelsoftt'),
        'footer' => esc_html__('ফুটার মেনু', 'rebelsoftt'),
    ));
    
    // এডিটর স্টাইল সাপোর্ট
    add_theme_support('editor-styles');
    add_editor_style('assets/css/editor-style.css');
    
    // ব্লক এডিটর সাপোর্ট
    add_theme_support('wp-block-styles');
    add_theme_support('align-wide');
    add_theme_support('responsive-embeds');
}
add_action('after_setup_theme', 'rebelsoftt_setup');

/**
 * ইনক্লুড ফাইল লোড করা
 */
require_once REBELSOFTT_DIR . '/inc/enqueue-scripts.php';

<?php
/**
 * স্টাইল এবং স্ক্রিপ্ট এনকিউ ফাংশন
 *
 * @package RebelSoftt
 */

// ডিরেক্ট অ্যাক্সেস প্রিভেন্ট করা
if (!defined('ABSPATH')) {
    exit; // Exit if accessed directly
}

/**
 * থিমের স্টাইল এবং স্ক্রিপ্ট এনকিউ করা
 */
function rebelsoftt_enqueue_scripts() {
    // Google Fonts এনকিউ করা
    wp_enqueue_style(
        'rebelsoftt-google-fonts',
        'https://fonts.googleapis.com/css2?family=Syncopate:wght@400;700&family=Space+Grotesk:wght@300;400;500;600;700&family=Orbitron:wght@400;500;600;700;800;900&display=swap',
        array(),
        REBELSOFTT_VERSION
    );
    
    // মূল স্টাইলশিট এনকিউ করা
    wp_enqueue_style(
        'rebelsoftt-style',
        REBELSOFTT_URI . '/assets/css/main.css',
        array(),
        REBELSOFTT_VERSION
    );
    
    // মূল স্ক্রিপ্ট এনকিউ করা
    wp_enqueue_script(
        'rebelsoftt-script',
        REBELSOFTT_URI . '/assets/js/main.js',
        array(),
        REBELSOFTT_VERSION,
        true
    );
    
    // কমেন্ট রিপ্লাই স্ক্রিপ্ট এনকিউ করা
    if (is_singular() && comments_open() && get_option('thread_comments')) {
        wp_enqueue_script('comment-reply');
    }
}
add_action('wp_enqueue_scripts', 'rebelsoftt_enqueue_scripts');

/**
 * এডমিন স্টাইল এনকিউ করা
 */
function rebelsoftt_admin_styles() {
    // এডমিন স্টাইল এনকিউ করা
    wp_enqueue_style(
        'rebelsoftt-admin-style',
        REBELSOFTT_URI . '/assets/css/admin.css',
        array(),
        REBELSOFTT_VERSION
    );
}
add_action('admin_enqueue_scripts', 'rebelsoftt_admin_styles');

/**
 * এডিটর স্টাইল এনকিউ করা
 */
function rebelsoftt_editor_styles() {
    // এডিটর স্টাইল এনকিউ করা
    add_editor_style(REBELSOFTT_URI . '/assets/css/editor-style.css');
}
add_action('admin_init', 'rebelsoftt_editor_styles');

<?php
/**
 * হেডার টেমপ্লেট ফাইল
 *
 * @package RebelSoftt
 */
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?> class="light">
<head>
  <meta charset="<?php bloginfo('charset'); ?>">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <?php wp_head(); ?>
</head>
<body <?php body_class('font-body overflow-x-hidden transition-colors duration-300'); ?>>
<?php wp_body_open(); ?>

  <!-- Skip to content link for accessibility -->
  <a href="#main-content" class="absolute top-[-40px] left-0 bg-primary text-white p-2 z-[10000] focus:top-0 transition-all duration-300">Skip to content</a>

  <!-- Scroll Progress Indicator -->
  <div id="scroll-progress" aria-hidden="true"></div>

  <!-- Preloader -->
  <div id="preloader" class="fixed inset-0 bg-white dark:bg-[#0A0A0F] flex justify-center items-center z-[10000] transition-opacity duration-500" aria-label="Loading">
    <div class="w-20 h-20 relative">
      <div class="absolute inset-0 rounded-full border-4 border-transparent border-t-primary animate-spin"></div>
      <div class="absolute inset-0 rounded-full border-4 border-transparent border-b-accent animate-spin-slow"></div>
    </div>
  </div>

  <!-- Custom Cursor (desktop only) -->
  <div id="cursor-dot" class="fixed w-5 h-5 rounded-full bg-primary pointer-events-none mix-blend-difference transform -translate-x-1/2 -translate-y-1/2 transition-[width,height] duration-200 z-[9999] opacity-70 blur-[1px] hidden md:block" aria-hidden="true"></div>
  <div id="cursor-circle" class="fixed w-10 h-10 rounded-full border-2 border-primary pointer-events-none transform -translate-x-1/2 -translate-y-1/2 transition-[transform,width,height,border] duration-300 z-[9998] opacity-50 hidden md:block" aria-hidden="true"></div>

  <!-- Enhanced Navigation -->
  <nav class="fixed top-0 left-0 w-full z-50 transition-all duration-300 bg-white/95 dark:bg-[rgba(10,10,15,0.95)] backdrop-blur-md border-b border-gray-100 dark:border-gray-800/30" aria-label="Main Navigation">
    <div class="container mx-auto px-6 flex justify-between items-center nav-container">
      <a href="<?php echo esc_url(home_url('/')); ?>" class="text-2xl font-heading font-bold text-[#0A0A0F] dark:text-white relative">
        <?php bloginfo('name'); ?>
        <span class="absolute -left-2 -top-1 w-8 h-8 bg-primary/10 rounded-full -z-10 animate-pulse" aria-hidden="true"></span>
      </a>
      <div class="hidden md:flex items-center space-x-2">
        <?php
        // Primary menu
        if (has_nav_menu('primary')) {
          wp_nav_menu(array(
            'theme_location' => 'primary',
            'menu_class'     => 'flex items-center',
            'container'      => false,
            'fallback_cb'    => false,
            'depth'          => 2,
            'walker'         => new RebelSoftt_Nav_Walker(),
          ));
        } else {
          // Fallback menu if no menu is assigned
        ?>
        <ul class="flex items-center">
          <li class="relative group">
            <a href="#home" class="nav-link text-[#0A0A0F] dark:text-white hover:text-primary transition-colors duration-300 uppercase flex items-center" aria-expanded="false" aria-haspopup="true">
              HOME
              <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 ml-1 opacity-70" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
              </svg>
            </a>
            <div class="absolute top-full left-0 w-[260px] dropdown-menu bg-white/95 dark:bg-[rgba(15,15,20,0.98)] opacity-0 invisible translate-y-2 transition-[opacity,transform,visibility] duration-300 z-100 group-hover:opacity-100 group-hover:visible group-hover:translate-y-0 group-focus-within:opacity-100 group-focus-within:visible group-focus-within:translate-y-0" role="menu">
              <a href="#" class="dropdown-item block transition-colors duration-200 hover:bg-gray-50 dark:hover:bg-white/5" role="menuitem">
                <div class="dropdown-item-title text-[#0A0A0F] dark:text-white font-subheading tracking-wide">Homepage Classic</div>
                <div class="dropdown-item-desc text-gray-600 dark:text-white/70 leading-relaxed">Our standard homepage with all features and sections.</div>
              </a>
              <a href="#" class="dropdown-item block transition-colors duration-200 hover:bg-gray-50 dark:hover:bg-white/5" role="menuitem">
                <div class="dropdown-item-title text-[#0A0A0F] dark:text-white font-subheading tracking-wide">Homepage Minimal</div>
                <div class="dropdown-item-desc text-gray-600 dark:text-white/70 leading-relaxed">A clean, minimalist version of our homepage.</div>
              </a>
              <a href="#" class="dropdown-item block transition-colors duration-200 hover:bg-gray-50 dark:hover:bg-white/5" role="menuitem">
                <div class="dropdown-item-title text-[#0A0A0F] dark:text-white font-subheading tracking-wide">Landing Page</div>
                <div class="dropdown-item-desc text-gray-600 dark:text-white/70 leading-relaxed">Focused landing page for marketing campaigns.</div>
              </a>
            </div>
          </li>
          <li><a href="#about" class="nav-link text-[#0A0A0F] dark:text-white hover:text-primary transition-colors duration-300 uppercase">ABOUT</a></li>
          <li><a href="#services" class="nav-link text-[#0A0A0F] dark:text-white hover:text-primary transition-colors duration-300 uppercase">SERVICES</a></li>
          <li><a href="#contact" class="nav-link text-[#0A0A0F] dark:text-white hover:text-primary transition-colors duration-300 uppercase">CONTACT</a></li>
        </ul>
        <?php } ?>
        
        <!-- Get Started Button -->
        <a href="#contact" class="nav-button bg-primary text-white rounded-full font-medium uppercase transition-all duration-300 hover:shadow-lg hover:shadow-primary/20 hover:-translate-y-1 relative overflow-hidden group ml-4 fade-in">
          <span class="relative z-10">Get Started</span>
          <span class="absolute inset-0 bg-primary/0 group-hover:bg-primary/80 transition-colors duration-300" aria-hidden="true"></span>
        </a>
        
        <!-- Theme Toggle Button -->
        <button id="theme-toggle" class="w-9 h-9 rounded-full bg-gray-50 dark:bg-white/5 border border-gray-100 dark:border-white/10 flex items-center justify-center text-gray-700 dark:text-white hover:text-primary hover:bg-gray-100 dark:hover:bg-white/10 transition-colors duration-300 backdrop-blur-sm ml-3" aria-label="Toggle dark/light mode">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 dark:hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
          </svg>
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 hidden dark:block" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
          </svg>
        </button>
      </div>
      
      <!-- Mobile Menu Toggle Button -->
      <button id="mobile-menu-toggle" class="md:hidden w-10 h-10 flex items-center justify-center rounded-full bg-gray-50 dark:bg-white/5 text-gray-700 dark:text-white transition-all duration-300 hover:bg-gray-100 dark:hover:bg-white/10 relative z-[9991]" aria-label="Open mobile menu" aria-expanded="false" aria-controls="mobile-menu">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
        </svg>
      </button>
    </div>
  </nav>

  <!-- Improved Mobile Menu -->
  <div class="fixed inset-0 pointer-events-none z-[9990] md:hidden" id="mobile-menu-container" aria-hidden="true">
    <div class="absolute inset-0 bg-black/70 backdrop-blur-sm opacity-0 transition-opacity duration-400 pointer-events-none"></div>
    <div class="absolute top-0 right-0 w-[300px] max-w-[80%] h-full bg-white dark:bg-[rgba(15,15,20,0.98)] backdrop-blur-xl shadow-[-5px_0_25px_rgba(0,0,0,0.5)] translate-x-full transition-transform duration-400 ease-[cubic-bezier(0.4,0,0.2,1)] overflow-y-auto pointer-events-auto flex flex-col" id="mobile-menu" role="navigation" aria-label="Mobile Navigation">
      <div class="flex justify-between items-center p-5 border-b border-gray-200 dark:border-white/10">
        <a href="<?php echo esc_url(home_url('/')); ?>" class="text-2xl font-heading font-bold text-primary"><?php bloginfo('name'); ?></a>
        <button id="mobile-menu-close" class="w-10 h-10 flex items-center justify-center rounded-full bg-gray-100 dark:bg-white/10 text-gray-700 dark:text-white transition-all duration-300 hover:bg-primary hover:text-white hover:rotate-90" aria-label="Close mobile menu">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
      
      <div class="flex-1 p-5 overflow-y-auto">
        <?php
        // Mobile menu
        if (has_nav_menu('primary')) {
          wp_nav_menu(array(
            'theme_location' => 'primary',
            'menu_class'     => 'space-y-4',
            'container'      => false,
            'fallback_cb'    => false,
            'depth'          => 2,
            'walker'         => new RebelSoftt_Mobile_Nav_Walker(),
          ));
        } else {
          // Fallback mobile menu if no menu is assigned
        ?>
        <ul class="space-y-4">
          <li class="mobile-nav-item">
            <div class="flex justify-between items-center p-4 rounded-lg text-gray-700 dark:text-white font-medium text-base transition-all duration-300 hover:bg-gray-100 dark:hover:bg-white/10 hover:text-primary">
              <a href="#home" class="flex-1 font-medium">Home</a>
              <button class="mobile-dropdown-toggle w-10 h-10 flex items-center justify-center rounded-full bg-gray-100 dark:bg-white/10 transition-all duration-300 hover:bg-gray-200 dark:hover:bg-white/20" aria-label="Toggle home submenu" aria-expanded="false">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 transition-transform duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                </svg>
              </button>
            </div>
            <div class="mobile-dropdown-content max-h-0 overflow-hidden transition-all duration-300 ease px-4">
              <a href="#" class="block p-3 mb-2 rounded-lg text-gray-600 dark:text-white/80 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-white/10 hover:text-gray-900 dark:hover:text-white text-[15px]">Homepage Classic</a>
              <a href="#" class="block p-3 mb-2 rounded-lg text-gray-600 dark:text-white/80 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-white/10 hover:text-gray-900 dark:hover:text-white text-[15px]">Homepage Minimal</a>
              <a href="#" class="block p-3 rounded-lg text-gray-600 dark:text-white/80 transition-all duration-300 hover:bg-gray-100 dark:hover:bg-white/10 hover:text-gray-900 dark:hover:text-white text-[15px]">Landing Page</a>
            </div>
          </li>
          <li class="mb-2">
            <a href="#about" class="flex items-center p-4 rounded-lg text-gray-700 dark:text-white font-medium text-base transition-all duration-300 hover:bg-gray-100 dark:hover:bg-white/10 hover:text-primary">About</a>
          </li>
          <li class="mb-2">
            <a href="#services" class="flex items-center p-4 rounded-lg text-gray-700 dark:text-white font-medium text-base transition-all duration-300 hover:bg-gray-100 dark:hover:bg-white/10 hover:text-primary">Services</a>
          </li>
          <li class="mb-2">
            <a href="#contact" class="flex items-center p-4 rounded-lg text-gray-700 dark:text-white font-medium text-base transition-all duration-300 hover:bg-gray-100 dark:hover:bg-white/10 hover:text-primary">Contact</a>
          </li>
        </ul>
        <?php } ?>
      </div>
    </div>
  </div>

  <!-- Main Content Starts Here -->
  <div id="main-content">

<?php
/**
 * ফুটার টেমপ্লেট ফাইল
 *
 * @package RebelSoftt
 */
?>

  <!-- Footer -->
  <footer class="bg-white dark:bg-[#0A0A0F] relative overflow-hidden pt-20 pb-10">
    <!-- Gradient Accent -->
    <div class="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-primary via-accent to-primary"></div>
    
    <!-- Background Elements -->
    <div class="absolute top-0 left-0 w-64 h-64 bg-primary/5 rounded-full -translate-x-1/2 -translate-y-1/2 blur-3xl" aria-hidden="true"></div>
    <div class="absolute bottom-0 right-0 w-96 h-96 bg-accent/5 rounded-full translate-x-1/3 translate-y-1/3 blur-3xl" aria-hidden="true"></div>
    
    <div class="container mx-auto px-4 relative z-10">
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
        <!-- Company Info -->
        <div>
          <a href="<?php echo esc_url(home_url('/')); ?>" class="text-2xl font-heading font-bold text-gray-900 dark:text-white mb-4 inline-block">
            <?php bloginfo('name'); ?>
          </a>
          <p class="text-gray-600 dark:text-white/70 mb-6">
            <?php bloginfo('description'); ?>
          </p>
          <div class="flex space-x-3">
            <a href="#" class="w-10 h-10 rounded-full bg-gray-100 dark:bg-white/10 flex items-center justify-center text-gray-700 dark:text-white hover:bg-primary hover:text-white hover:-translate-y-1 transition-all duration-300" aria-label="Facebook">
              <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path>
              </svg>
            </a>
            <a href="#" class="w-10 h-10 rounded-full bg-gray-100 dark:bg-white/10 flex items-center justify-center text-gray-700 dark:text-white hover:bg-primary hover:text-white hover:-translate-y-1 transition-all duration-300" aria-label="Twitter">
              <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"></path>
              </svg>
            </a>
            <a href="#" class="w-10 h-10 rounded-full bg-gray-100 dark:bg-white/10 flex items-center justify-center text-gray-700 dark:text-white hover:bg-primary hover:text-white hover:-translate-y-1 transition-all duration-300" aria-label="Instagram">
              <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
                <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
                <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
              </svg>
            </a>
            <a href="#" class="w-10 h-10 rounded-full bg-gray-100 dark:bg-white/10 flex items-center justify-center text-gray-700 dark:text-white hover:bg-primary hover:text-white hover:-translate-y-1 transition-all duration-300" aria-label="LinkedIn">
              <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
                <rect x="2" y="9" width="4" height="12"></rect>
                <circle cx="4" cy="4" r="2"></circle>
              </svg>
            </a>
          </div>
        </div>
        
        <!-- Quick Links -->
        <div>
          <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-6 relative inline-block after:absolute after:left-0 after:bottom-[-8px] after:w-10 after:h-0.5 after:bg-primary">Quick Links</h3>
          <?php
          // Footer menu
          if (has_nav_menu('footer')) {
            wp_nav_menu(array(
              'theme_location' => 'footer',
              'menu_class'     => 'space-y-3',
              'container'      => false,
              'fallback_cb'    => false,
              'depth'          => 1,
              'walker'         => new RebelSoftt_Footer_Nav_Walker(),
            ));
          } else {
            // Fallback footer menu if no menu is assigned
          ?>
          <ul class="space-y-3">
            <li><a href="<?php echo esc_url(home_url('/')); ?>" class="text-gray-600 dark:text-white/70 hover:text-primary hover:translate-x-1.5 transition-all duration-300 block relative pl-4 before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-1.5 before:h-1.5 before:rounded-full before:bg-primary/50 before:hover:bg-primary before:transition-all before:duration-300">Home</a></li>
            <li><a href="#about" class="text-gray-600 dark:text-white/70 hover:text-primary hover:translate-x-1.5 transition-all duration-300 block relative pl-4 before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-1.5 before:h-1.5 before:rounded-full before:bg-primary/50 before:hover:bg-primary before:transition-all before:duration-300">About Us</a></li>
            <li><a href="#services" class="text-gray-600 dark:text-white/70 hover:text-primary hover:translate-x-1.5 transition-all duration-300 block relative pl-4 before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-1.5 before:h-1.5 before:rounded-full before:bg-primary/50 before:hover:bg-primary before:transition-all before:duration-300">Services</a></li>
            <li><a href="#contact" class="text-gray-600 dark:text-white/70 hover:text-primary hover:translate-x-1.5 transition-all duration-300 block relative pl-4 before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-1.5 before:h-1.5 before:rounded-full before:bg-primary/50 before:hover:bg-primary before:transition-all before:duration-300">Contact</a></li>
          </ul>
          <?php } ?>
        </div>
        
        <!-- Our Services -->
        <div>
          <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-6 relative inline-block after:absolute after:left-0 after:bottom-[-8px] after:w-10 after:h-0.5 after:bg-primary">Our Services</h3>
          <ul class="space-y-3">
            <li><a href="#" class="text-gray-600 dark:text-white/70 hover:text-primary hover:translate-x-1.5 transition-all duration-300 block relative pl-4 before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-1.5 before:h-1.5 before:rounded-full before:bg-primary/50 before:hover:bg-primary before:transition-all before:duration-300">Web Development</a></li>
            <li><a href="#" class="text-gray-600 dark:text-white/70 hover:text-primary hover:translate-x-1.5 transition-all duration-300 block relative pl-4 before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-1.5 before:h-1.5 before:rounded-full before:bg-primary/50 before:hover:bg-primary before:transition-all before:duration-300">Mobile App Development</a></li>
            <li><a href="#" class="text-gray-600 dark:text-white/70 hover:text-primary hover:translate-x-1.5 transition-all duration-300 block relative pl-4 before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-1.5 before:h-1.5 before:rounded-full before:bg-primary/50 before:hover:bg-primary before:transition-all before:duration-300">UI/UX Design</a></li>
            <li><a href="#" class="text-gray-600 dark:text-white/70 hover:text-primary hover:translate-x-1.5 transition-all duration-300 block relative pl-4 before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-1.5 before:h-1.5 before:rounded-full before:bg-primary/50 before:hover:bg-primary before:transition-all before:duration-300">Cloud Solutions</a></li>
            <li><a href="#" class="text-gray-600 dark:text-white/70 hover:text-primary hover:translate-x-1.5 transition-all duration-300 block relative pl-4 before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-1.5 before:h-1.5 before:rounded-full before:bg-primary/50 before:hover:bg-primary before:transition-all before:duration-300">Digital Marketing</a></li>
          </ul>
        </div>
        
        <!-- Contact Us -->
        <div>
          <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-6 relative inline-block after:absolute after:left-0 after:bottom-[-8px] after:w-10 after:h-0.5 after:bg-primary">Contact Us</h3>
          <div class="space-y-4">
            <div class="flex items-start">
              <div class="w-8 h-8 rounded-full bg-gray-100 dark:bg-white/10 flex items-center justify-center mr-3 shrink-0">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                  <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
                  <circle cx="12" cy="10" r="3"></circle>
                </svg>
              </div>
              <span class="text-gray-600 dark:text-white/70">123 Innovation Street, Tech City, CA 94043, United States</span>
            </div>
            <div class="flex items-start">
              <div class="w-8 h-8 rounded-full bg-gray-100 dark:bg-white/10 flex items-center justify-center mr-3 shrink-0">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                  <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
                </svg>
              </div>
              <span class="text-gray-600 dark:text-white/70">+1 (555) 123-4567</span>
            </div>
            <div class="flex items-start">
              <div class="w-8 h-8 rounded-full bg-gray-100 dark:bg-white/10 flex items-center justify-center mr-3 shrink-0">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                  <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
                  <polyline points="22,6 12,13 2,6"></polyline>
                </svg>
              </div>
              <span class="text-gray-600 dark:text-white/70">info@example.com</span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- Newsletter -->
      <div class="mt-16 p-8 bg-gray-50 dark:bg-white/5 rounded-xl backdrop-blur-sm">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
          <div>
            <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Subscribe to Our Newsletter</h3>
            <p class="text-gray-600 dark:text-white/70">Stay updated with our latest news, updates, and offers.</p>
          </div>
          <div>
            <form class="flex flex-col sm:flex-row gap-3">
              <input type="email" placeholder="Your email address" class="flex-1 bg-white dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-lg px-4 py-3 text-gray-700 dark:text-white focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20" required>
              <button type="submit" class="px-6 py-3 bg-primary text-white rounded-lg font-medium transition-all duration-300 hover:shadow-lg hover:shadow-primary/20 hover:-translate-y-1">
                Subscribe
              </button>
            </form>
          </div>
        </div>
      </div>
      
      <!-- Copyright -->
      <div class="mt-16 pt-8 border-t border-gray-200 dark:border-white/10 flex flex-col md:flex-row justify-between items-center">
        <p class="text-gray-600 dark:text-white/70 mb-4 md:mb-0">© <?php echo date('Y'); ?> <?php bloginfo('name'); ?>. All rights reserved.</p>
        <div class="flex gap-6">
          <a href="#" class="text-gray-600 dark:text-white/70 hover:text-primary transition-colors duration-300">Privacy Policy</a>
          <a href="#" class="text-gray-600 dark:text-white/70 hover:text-primary transition-colors duration-300">Terms of Service</a>
          <a href="#" class="text-gray-600 dark:text-white/70 hover:text-primary transition-colors duration-300">Cookie Policy</a>
        </div>
      </div>
    </div>
  </footer>

  <!-- Back to Top Button -->
  <button id="back-to-top" class="fixed bottom-8 right-8 w-12 h-12 rounded-full bg-primary text-white flex items-center justify-center shadow-lg z-50 opacity-0 invisible transition-all duration-300 hover:-translate-y-1">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
    </svg>
  </button>

  <?php wp_footer(); ?>
</body>
</html>