| <?php |
| defined('_JEXEC') or die; |
|
|
| use Joomla\CMS\Factory; |
| use Joomla\CMS\HTML\HTMLHelper; |
| use Joomla\CMS\Uri\Uri; |
| use Joomla\CMS\Router\Route; |
|
|
| $app = Factory::getApplication(); |
| $doc = $app->getDocument(); |
| $user = $app->getIdentity(); |
| $this->language = $doc->language; |
| $this->direction = $doc->direction; |
|
|
| |
| $option = $app->input->getCmd('option', ''); |
| $view = $app->input->getCmd('view', ''); |
| $task = $app->input->getCmd('task', ''); |
| $itemid = $app->input->getCmd('Itemid', ''); |
| $isHome = ($itemid == $app->getMenu()->getDefault()->id); |
|
|
| |
| HTMLHelper::_('behavior.core'); |
|
|
| |
| $params = $this->params; |
| $sitetitle = $params->get('sitetitle', 'Headspace Zen'); |
| $sitedescription = $params->get('sitedescription', 'Your daily mindfulness practice'); |
| $primaryColor = $params->get('primaryColor', '#FF8C42'); |
| $secondaryColor = $params->get('secondaryColor', '#7B68EE'); |
|
|
| |
| $doc->addStyleDeclaration(" |
| :root { |
| --primary: {$primaryColor}; |
| --secondary: {$secondaryColor}; |
| --primary-light: " . adjustBrightness($primaryColor, 40) . "; |
| --bg-cream: #FDF8F3; |
| --text-dark: #2D3748; |
| --text-muted: #718096; |
| --white: #FFFFFF; |
| } |
| "); |
|
|
| function adjustBrightness($hex, $percent) { |
| $hex = ltrim($hex, '#'); |
| $r = max(0, min(255, hexdec(substr($hex, 0, 2)) + $percent)); |
| $g = max(0, min(255, hexdec(substr($hex, 2, 2)) + $percent)); |
| $b = max(0, min(255, hexdec(substr($hex, 4, 2)) + $percent)); |
| return '#' . dechex($r) . dechex($g) . dechex($b); |
| } |
| ?> |
| <!DOCTYPE html> |
| <html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <jdoc:include type="head" /> |
| |
| <!-- Tailwind CSS --> |
| <script src="https://cdn.tailwindcss.com"></script> |
| |
| <!-- Google Fonts - Nunito for that friendly Headspace feel --> |
| <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=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet"> |
| |
| <!-- Lucide Icons --> |
| <script src="https://unpkg.com/lucide@latest"></script> |
| |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| primary: '<?php echo $primaryColor; ?>', |
| secondary: '<?php echo $secondaryColor; ?>', |
| cream: '#FDF8F3', |
| 'warm-gray': '#FAF7F2', |
| }, |
| fontFamily: { |
| sans: ['Nunito', 'sans-serif'], |
| }, |
| borderRadius: { |
| '4xl': '2rem', |
| } |
| } |
| } |
| } |
| </script> |
| |
| <style> |
| body { |
| background-color: |
| font-family: 'Nunito', sans-serif; |
| } |
| .glass-card { |
| background: rgba(255, 255, 255, 0.8); |
| backdrop-filter: blur(10px); |
| border: 1px solid rgba(255, 255, 255, 0.3); |
| } |
| .meditation-card { |
| transition: all 0.3s ease; |
| } |
| .meditation-card:hover { |
| transform: translateY(-4px); |
| box-shadow: 0 12px 24px rgba(255, 140, 66, 0.15); |
| } |
| .nav-item { |
| transition: all 0.2s ease; |
| } |
| .nav-item:hover { |
| color: var(--primary); |
| } |
| .nav-item.active { |
| color: var(--primary); |
| } |
| .breathing-animation { |
| animation: breathe 4s ease-in-out infinite; |
| } |
| @keyframes breathe { |
| 0%, 100% { transform: scale(1); opacity: 0.8; } |
| 50% { transform: scale(1.05); opacity: 1; } |
| } |
| .gradient-orb { |
| background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); |
| } |
| .smooth-scroll { |
| scroll-behavior: smooth; |
| } |
| </style> |
| </head> |
| <body class="smooth-scroll antialiased text-gray-800 pb-20 md:pb-0"> |
| |
| <!-- Top Navigation --> |
| <nav class="fixed top-0 left-0 right-0 z-50 bg-cream/90 backdrop-blur-md border-b border-orange-100"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex justify-between items-center h-16"> |
| <!-- Logo --> |
| <div class="flex-shrink-0 flex items-center"> |
| <a href="<?php echo Uri::base(); ?>" class="flex items-center space-x-2"> |
| <div class="w-10 h-10 rounded-full gradient-orb flex items-center justify-center"> |
| <i data-lucide="cloud-moon" class="w-6 h-6 text-white"></i> |
| </div> |
| <span class="font-bold text-xl text-gray-800 tracking-tight"><?php echo $sitetitle; ?></span> |
| </a> |
| </div> |
| |
| <!-- Desktop Menu --> |
| <div class="hidden md:flex items-center space-x-8"> |
| <jdoc:include type="modules" name="menu" style="none" /> |
| |
| <?php if ($this->countModules('search')) : ?> |
| <div class="relative"> |
| <input type="text" placeholder="Search..." class="bg-white/50 border border-orange-200 rounded-full px-4 py-2 pl-10 text-sm focus:outline-none focus:ring-2 focus:ring-primary/50 w-48 transition-all"> |
| <i data-lucide="search" class="w-4 h-4 absolute left-3 top-3 text-gray-400"></i> |
| </div> |
| <?php endif; ?> |
| </div> |
| |
| <!-- Mobile menu button --> |
| <div class="md:hidden flex items-center"> |
| <button id="mobile-menu-btn" class="p-2 rounded-lg text-gray-600 hover:bg-orange-100 transition-colors"> |
| <i data-lucide="menu" class="w-6 h-6"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| <!-- Mobile Menu Panel --> |
| <div id="mobile-menu" class="hidden md:hidden bg-white border-t border-orange-100"> |
| <div class="px-4 pt-2 pb-4 space-y-1"> |
| <jdoc:include type="modules" name="menu" style="none" /> |
| </div> |
| </div> |
| </nav> |
| |
| <!-- Spacer for fixed header --> |
| <div class="h-16"></div> |
| |
| <!-- Hero Section (Homepage only) --> |
| <?php if ($isHome) : ?> |
| <section class="relative overflow-hidden py-12 md:py-20"> |
| <div class="absolute inset-0 opacity-10"> |
| <div class="absolute -top-20 -left-20 w-96 h-96 bg-primary rounded-full blur-3xl breathing-animation"></div> |
| <div class="absolute bottom-0 right-0 w-80 h-80 bg-secondary rounded-full blur-3xl breathing-animation" style="animation-delay: 2s;"></div> |
| </div> |
| |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative"> |
| <div class="text-center max-w-3xl mx-auto"> |
| <div class="inline-flex items-center px-4 py-2 rounded-full bg-orange-100 text-orange-700 text-sm font-medium mb-6"> |
| <i data-lucide="sparkles" class="w-4 h-4 mr-2"></i> |
| <span>Welcome back, <?php echo $user->name ?: 'Friend'; ?></span> |
| </div> |
| <h1 class="text-4xl md:text-6xl font-extrabold text-gray-900 mb-6 leading-tight"> |
| Find your<br> |
| <span class="text-transparent bg-clip-text bg-gradient-to-r from-orange-400 to-purple-500">inner peace</span> |
| </h1> |
| <p class="text-lg md:text-xl text-gray-600 mb-8 leading-relaxed"> |
| <?php echo $sitedescription; ?> Start your journey to a calmer mind today. |
| </p> |
| <div class="flex flex-col sm:flex-row gap-4 justify-center"> |
| <a href="#" class="inline-flex items-center justify-center px-8 py-4 rounded-full bg-primary text-white font-semibold text-lg shadow-lg shadow-orange-200 hover:shadow-xl hover:-translate-y-0.5 transition-all"> |
| <i data-lucide="play-circle" class="w-5 h-5 mr-2"></i> |
| Start Session |
| </a> |
| <a href="#" class="inline-flex items-center justify-center px-8 py-4 rounded-full bg-white text-gray-700 font-semibold text-lg border-2 border-orange-200 hover:border-primary hover:text-primary transition-all"> |
| Explore Library |
| </a> |
| </div> |
| </div> |
| </div> |
| </section> |
| <?php endif; ?> |
| |
| <!-- Banner Position --> |
| <?php if ($this->countModules('banner')) : ?> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-8"> |
| <jdoc:include type="modules" name="banner" style="card" /> |
| </div> |
| <?php endif; ?> |
| |
| <!-- Breadcrumb --> |
| <?php if ($this->countModules('breadcrumb') && !$isHome) : ?> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-6"> |
| <nav class="flex text-sm text-gray-500"> |
| <jdoc:include type="modules" name="breadcrumb" style="none" /> |
| </nav> |
| </div> |
| <?php endif; ?> |
| |
| <!-- Main Content Area --> |
| <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> |
| <div class="flex flex-col lg:flex-row gap-8"> |
| |
| <!-- Left Sidebar --> |
| <?php if ($this->countModules('left')) : ?> |
| <aside class="lg:w-1/4 space-y-6"> |
| <jdoc:include type="modules" name="left" style="card" /> |
| </aside> |
| <?php endif; ?> |
| |
| <!-- Center Content --> |
| <div class="<?php echo ($this->countModules('left') && $this->countModules('right')) ? 'lg:w-1/2' : (($this->countModules('left') || $this->countModules('right')) ? 'lg:w-3/4' : 'lg:w-full'); ?>"> |
| |
| <!-- Top Modules --> |
| <?php if ($this->countModules('top')) : ?> |
| <div class="mb-8 space-y-6"> |
| <jdoc:include type="modules" name="top" style="card" /> |
| </div> |
| <?php endif; ?> |
| |
| <!-- User Modules Grid --> |
| <?php if ($this->countModules('user1') || $this->countModules('user2') || $this->countModules('user3') || $this->countModules('user4')) : ?> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"> |
| <?php for ($i = 1; $i <= 4; $i++) : ?> |
| <?php if ($this->countModules('user' . $i)) : ?> |
| <div class="meditation-card bg-white rounded-3xl p-6 shadow-sm border border-orange-100"> |
| <jdoc:include type="modules" name="user<?php echo $i; ?>" style="none" /> |
| </div> |
| <?php endif; ?> |
| <?php endfor; ?> |
| </div> |
| <?php endif; ?> |
| |
| <!-- Main Component --> |
| <div class="bg-white rounded-3xl shadow-sm border border-orange-100 overflow-hidden"> |
| <jdoc:include type="component" /> |
| </div> |
| |
| <!-- Bottom Modules --> |
| <?php if ($this->countModules('bottom')) : ?> |
| <div class="mt-8 space-y-6"> |
| <jdoc:include type="modules" name="bottom" style="card" /> |
| </div> |
| <?php endif; ?> |
| </div> |
| |
| <!-- Right Sidebar --> |
| <?php if ($this->countModules('right')) : ?> |
| <aside class="lg:w-1/4 space-y-6"> |
| <jdoc:include type="modules" name="right" style="card" /> |
| </aside> |
| <?php endif; ?> |
| </div> |
| </main> |
| |
| <!-- Footer --> |
| <?php if ($params->get('showFooter', 1)) : ?> |
| <footer class="bg-white border-t border-orange-100 mt-20"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
| <div class="md:col-span-1"> |
| <div class="flex items-center space-x-2 mb-4"> |
| <div class="w-8 h-8 rounded-full gradient-orb flex items-center justify-center"> |
| <i data-lucide="cloud-moon" class="w-5 h-5 text-white"></i> |
| </div> |
| <span class="font-bold text-lg"><?php echo $sitetitle; ?></span> |
| </div> |
| <p class="text-gray-500 text-sm leading-relaxed"> |
| Mindfulness and meditation for everyone. Find your calm in the chaos. |
| </p> |
| </div> |
| |
| <div> |
| <h4 class="font-semibold text-gray-900 mb-4">Explore</h4> |
| <ul class="space-y-2 text-sm text-gray-600"> |
| <li><a href="#" class="hover:text-primary transition-colors">Meditations</a></li> |
| <li><a href="#" class="hover:text-primary transition-colors">Sleep</a></li> |
| <li><a href="#" class="hover:text-primary transition-colors">Move</a></li> |
| <li><a href="#" class="hover:text-primary transition-colors">Focus</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="font-semibold text-gray-900 mb-4">Company</h4> |
| <ul class="space-y-2 text-sm text-gray-600"> |
| <li><a href="#" class="hover:text-primary transition-colors">About</a></li> |
| <li><a href="#" class="hover:text-primary transition-colors">Careers</a></li> |
| <li><a href="#" class="hover:text-primary transition-colors">Blog</a></li> |
| <li><a href="#" class="hover:text-primary transition-colors">Contact</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="font-semibold text-gray-900 mb-4">Connect</h4> |
| <div class="flex space-x-4"> |
| <a href="#" class="w-10 h-10 rounded-full bg-orange-100 flex items-center justify-center text-primary hover:bg-primary hover:text-white transition-all"> |
| <i data-lucide="instagram" class="w-5 h-5"></i> |
| </a> |
| <a href="#" class="w-10 h-10 rounded-full bg-orange-100 flex items-center justify-center text-primary hover:bg-primary hover:text-white transition-all"> |
| <i data-lucide="twitter" class="w-5 h-5"></i> |
| </a> |
| <a href="#" class="w-10 h-10 rounded-full bg-orange-100 flex items-center justify-center text-primary hover:bg-primary hover:text-white transition-all"> |
| <i data-lucide="facebook" class="w-5 h-5"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| |
| <div class="border-t border-orange-100 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> |
| <p class="text-sm text-gray-500">© <?php echo date('Y'); ?> <?php echo $sitetitle; ?>. All rights reserved.</p> |
| <div class="flex space-x-6 mt-4 md:mt-0 text-sm text-gray-500"> |
| <a href="#" class="hover:text-primary">Privacy</a> |
| <a href="#" class="hover:text-primary">Terms</a> |
| <a href="#" class="hover:text-primary">Cookies</a> |
| </div> |
| </div> |
| </div> |
| </footer> |
| <?php endif; ?> |
| |
| <!-- Mobile Bottom Navigation (App-like) --> |
| <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-orange-100 md:hidden z-50 px-6 py-3"> |
| <div class="flex justify-around items-center"> |
| <a href="<?php echo Uri::base(); ?>" class="nav-item flex flex-col items-center text-gray-400 <?php echo $isHome ? 'active text-primary' : ''; ?>"> |
| <i data-lucide="home" class="w-6 h-6"></i> |
| <span class="text-xs mt-1 font-medium">Home</span> |
| </a> |
| <a href="#" class="nav-item flex flex-col items-center text-gray-400"> |
| <i data-lucide="play-circle" class="w-6 h-6"></i> |
| <span class="text-xs mt-1 font-medium">Meditate</span> |
| </a> |
| <button class="nav-item flex flex-col items-center -mt-6"> |
| <div class="w-14 h-14 rounded-full gradient-orb flex items-center justify-center shadow-lg shadow-orange-200"> |
| <i data-lucide="plus" class="w-6 h-6 text-white"></i> |
| </div> |
| </button> |
| <a href="#" class="nav-item flex flex-col items-center text-gray-400"> |
| <i data-lucide="bar-chart-2" class="w-6 h-6"></i> |
| <span class="text-xs mt-1 font-medium">Stats</span> |
| </a> |
| <a href="#" class="nav-item flex flex-col items-center text-gray-400"> |
| <i data-lucide="user" class="w-6 h-6"></i> |
| <span class="text-xs mt-1 font-medium">Profile</span> |
| </a> |
| </div> |
| </div> |
| |
| <!-- Initialize Lucide Icons --> |
| <script> |
| lucide.createIcons(); |
| |
| // Mobile menu toggle |
| document.getElementById('mobile-menu-btn').addEventListener('click', function() { |
| const menu = document.getElementById('mobile-menu'); |
| menu.classList.toggle('hidden'); |
| }); |
| |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function (e) { |
| e.preventDefault(); |
| const target = document.querySelector(this.getAttribute('href')); |
| if (target) { |
| target.scrollIntoView({ behavior: 'smooth', block: 'start' }); |
| } |
| }); |
| }); |
| </script> |
|
|
| <jdoc:include type="modules" name="debug" style="none" /> |
| </body> |
| </html> |
