@squeditor/squeditor-framework 1.0.0

package/project-template/src/config/site-config.php

@@ -0,0 +1,34 @@
+<?php
+// src/config/site-config.php
+// Global site data — available in all templates via $site
+
+$site = [
+    'name'        => 'My Project',
+    'lang'        => 'en',
+    'logo'        => 'assets/static/images/logo.svg',
+    'description' => 'Squeditor project starter template.',
+    'og_image'    => 'assets/static/images/og-default.png',
+    'url'         => 'https://example.com',
+    'page_transition' => 'disabled', // Options: 'curve', 'wave', 'blinds', 'slide', 'disabled'
+    'enable_cursor'   => false,      // Global GSAP Cursor State
+    'cursor_config'   => '',         // Default cursor settings
+
+    'nav' => [
+        ['label' => 'Products', 'url' => '#'],
+        ['label' => 'Pricing', 'url' => '#'],
+        ['label' => 'About', 'url' => '#'],
+        ['label' => 'Contact', 'url' => '#'],
+    ],
+
+    'socials' => [
+        'twitter'   => 'https://twitter.com/squeditor',
+        'github'  => 'https://github.com/squeditor',
+        'instagram' => 'https://instagram.com/squeditor',
+    ],
+
+    'contact' => [
+        'email'   => 'hello@example.com',
+        'phone'   => '+1 555 000 0000',
+        'address' => '123 Main Street, City, Country',
+    ],
+];

package/project-template/src/data/blog.php

@@ -0,0 +1,21 @@
+<?php
+// src/data/blog.php
+
+$blog_posts = [
+    [
+        'title' => 'Getting Started with Squeditor',
+        'excerpt' => 'Learn how to build static HTML sites beautifully.',
+        'image' => 'assets/static/images/placeholder.png',
+        'date' => 'Oct 12, 2026',
+        'author' => 'Jane Doe',
+        'url' => 'blog/getting-started.html'
+    ],
+    [
+        'title' => 'Tailwind and UIKit3 Combination',
+        'excerpt' => 'Why utility-first CSS and component JS play well together.',
+        'image' => 'assets/static/images/placeholder.png',
+        'date' => 'Oct 20, 2026',
+        'author' => 'John Smith',
+        'url' => 'blog/tailwind-uikit.html'
+    ],
+];

package/project-template/src/data/portfolio.php

@@ -0,0 +1,23 @@
+<?php
+// src/data/portfolio.php
+
+$portfolio_items = [
+    [
+        'title' => 'Tech Startup Website',
+        'category' => 'Web Design',
+        'image' => 'assets/static/images/placeholder.png',
+        'url' => 'portfolio/item-1.html'
+    ],
+    [
+        'title' => 'Corporate Rebranding',
+        'category' => 'Branding',
+        'image' => 'assets/static/images/placeholder.png',
+        'url' => 'portfolio/item-2.html'
+    ],
+    [
+        'title' => 'E-Commerce Platform',
+        'category' => 'Development',
+        'image' => 'assets/static/images/placeholder.png',
+        'url' => 'portfolio/item-3.html'
+    ]
+];

package/project-template/src/data/team.php

@@ -0,0 +1,23 @@
+<?php
+// src/data/team.php
+
+$team_members = [
+    [
+        'name'  => 'Oussama B.',
+        'role'  => 'Founder',
+        'photo' => 'assets/static/images/common/avatars/02.svg',
+        'bio'   => 'Oussama is the founder of Squeditor.',
+    ],
+    [
+        'name'  => 'Younes B.',
+        'role'  => 'Frontend Developer',
+        'photo' => 'assets/static/images/common/avatars/01.svg',
+        'bio'   => 'Younes is the frontend developer of Squeditor.',
+    ],
+    [
+        'name'  => 'Anass B.',
+        'role'  => 'UI Designer/Developer',
+        'photo' => 'assets/static/images/common/avatars/10.svg',
+        'bio'   => 'Anass is the UI designer/developer of Squeditor.',
+    ]
+];

package/project-template/src/index.php

@@ -0,0 +1,57 @@
+<?php
+// src/index.php
+require_once __DIR__ . '/init.php';
+/*|
+title: Home — Squeditor
+description: A Squeditor project starter template.
+|*/
+
+// Page config
+$is_home    = true;
+$page_title = 'Home — Squeditor';
+$page_description = 'A Squeditor project starter template.';
+$body_class = 'page-home';
+
+// Header config
+// $header_args = [
+//     'layout'  => 'layout-01',
+//     'isDark'  => false,
+//     'isFloat' => true
+// ];
+
+// Footer config
+// $footer_args = [
+//     'layout'  => 'layout-01',
+//     'isDark'  => true
+// ];
+
+// Content
+ob_start();
+?>
+
+    <section class="py-32 md:py-48 flex items-center justify-center bg-gradient-to-b from-zinc-100 to-transparent" data-uk-height-viewport="offset-top: true">
+        <div class="max-w-4xl mx-auto px-6 text-center">
+            
+            <h2 class="text-6xl font-bold tracking-tight mb-8 lg:px-8">
+                Start building<span class="opacity-30"> creative websites</span> with Squeditor
+            </h2>
+            
+            <p class="text-xl text-muted max-w-2xl mx-auto font-light leading-relaxed mb-12">
+               You can now begin creating interactive GSAP experiences, modifying the UIKit configuration, and adding content to your template files.
+            </p>
+
+            <div class="flex items-center justify-center gap-4">
+                <a href="https://squeditor.com/" class="btn btn-lg btn-secondary !px-8 !py-3 !rounded-full text-white font-medium hover:scale-105 transition-transform">
+                    Try Squeditor
+                </a>
+                <a href="https://docs.squeditor.com/" class="btn btn-lg !px-8 !py-3 !rounded-full text-white font-medium !border !border-1 !border-solid !border-zinc-200 hover:scale-105 transition-transform">
+                    View Docs
+                </a>
+            </div>
+
+        </div>
+    </section>
+
+<?php
+$content = ob_get_clean();
+require SRC_PATH . '/page-templates/base.php';

package/project-template/src/init.php

@@ -0,0 +1,19 @@
+<?php
+// src/init.php
+
+// Require framework helpers
+require_once __DIR__ . '/../../squeditor-framework/php/functions.php';
+
+// Require site-wide config
+require_once __DIR__ . '/config/site-config.php';
+
+// Define SRC_PATH for get_template_part() calls
+define('SRC_PATH', __DIR__);
+
+// Global Theme & Schema Detection
+$active_theme  = $_GET['theme']  ?? 'default';
+$active_schema = $_GET['schema'] ?? 'light';
+
+// Add to site config for template access
+$site['theme']  = $active_theme;
+$site['schema'] = $active_schema;

package/project-template/src/page-templates/base.php

@@ -0,0 +1,39 @@
+<?php
+// src/page-templates/base.php
+
+// Page defaults (overridden by individual pages before including base.php)
+$page_title       = $page_title       ?? $site['name'];
+$page_description = $page_description ?? $site['description'];
+$page_og_image    = $page_og_image    ?? $site['og_image'];
+// Global body classes derived from theme/schema
+$theme_class  = 'theme-' . htmlspecialchars($site['theme']);
+$schema_class = 'sq-theme-' . htmlspecialchars($site['schema']);
+$body_class   = trim($theme_class . ' ' . $schema_class . ' ' . ($body_class ?? ''));
+
+?>
+<!DOCTYPE html>
+<html lang="<?= $site['lang'] ?? 'en' ?>">
+<head>
+<?php require __DIR__ . '/head.php'; ?>
+<?php if (isset($extra_head)) echo $extra_head; ?>
+</head>
+<?php
+$enable_cursor = $enable_cursor ?? ($site['enable_cursor'] ?? true);
+$cursor_config = $cursor_config ?? ($site['cursor_config'] ?? '');
+?>
+<body class="<?= htmlspecialchars($body_class) ?>" <?= $body_attr ?? '' ?> data-sq-transition="<?= htmlspecialchars($site['page_transition'] ?? 'curve') ?>" <?php if ($enable_cursor): ?>data-sq-cursor="<?= htmlspecialchars($cursor_config) ?>"<?php endif; ?>>
+
+  <?php get_template_part('header', $header_args ?? []); ?>
+
+  <main id="main-content">
+    <?php echo $content ?? ''; ?>
+  </main>
+
+  <?php get_template_part('footer', $footer_args ?? []); ?>
+
+<?php require __DIR__ . '/body-scripts.php'; ?>
+<?php if (isset($extra_footer)) echo $extra_footer; ?>
+<?php require __DIR__ . '/transition.php'; ?>
+
+</body>
+</html>

package/project-template/src/page-templates/body-scripts.php

@@ -0,0 +1,26 @@
+<?php
+// src/page-templates/body-scripts.php
+
+$is_snapshot = getenv('SQUEDITOR_SNAPSHOT') === '1' || (isset($_GET['snapshot']) && $_GET['snapshot'] === '1');
+$vite_port   = getenv('SQUEDITOR_VITE_PORT') ?: '5173';
+$vite_server = "http://127.0.0.1:{$vite_port}";
+$is_vite     = false;
+
+if (!$is_snapshot) {
+    $fp = @fsockopen('127.0.0.1', $vite_port, $errno, $errstr, 0.05);
+    if ($fp) {
+        $is_vite = true;
+        fclose($fp);
+    }
+}
+
+if ($is_vite):
+?>
+  <!-- Vite Development Scripts -->
+  <script src="<?= $vite_server ?>/assets/js/uikit-components.js"></script>
+  <script src="<?= $vite_server ?>/assets/js/main.js" type="module"></script>
+<?php else: ?>
+  <!-- Production Static Scripts -->
+  <script src="assets/js/uikit-components.js"></script>
+  <script src="assets/js/main.js" type="module"></script>
+<?php endif; ?>

package/project-template/src/page-templates/head.php

@@ -0,0 +1,47 @@
+<?php
+// src/page-templates/head.php
+
+$is_snapshot = getenv('SQUEDITOR_SNAPSHOT') === '1' || (isset($_GET['snapshot']) && $_GET['snapshot'] === '1');
+$vite_port   = getenv('SQUEDITOR_VITE_PORT') ?: '5173';
+$vite_server = "http://127.0.0.1:{$vite_port}";
+$is_vite     = false;
+
+if (!$is_snapshot) {
+    $fp = @fsockopen('127.0.0.1', $vite_port, $errno, $errstr, 0.05);
+    if ($fp) {
+        $is_vite = true;
+        fclose($fp);
+    }
+}
+?>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title><?= htmlspecialchars($page_title) ?></title>
+  <meta name="description" content="<?= htmlspecialchars($page_description) ?>">
+  
+  <!-- Typography -->
+  <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=IBM+Plex+Sans+Arabic:wght@100;200;300;400;500;600;700&family=TASA+Orbiter:wght@400..800&display=swap" rel="stylesheet">
+
+  <!-- Open Graph -->
+  <meta property="og:title"       content="<?= htmlspecialchars($page_title) ?>">
+  <meta property="og:description" content="<?= htmlspecialchars($page_description) ?>">
+  <meta property="og:image"       content="assets/static/images/og-default.png">
+  <meta property="og:type"        content="website">
+
+  <!-- Squeditor CSS -->
+<?php if ($is_vite): ?>
+  <!-- Vite Development Environment -->
+  <script type="module" src="<?= $vite_server ?>/@vite/client"></script>
+  <link rel="stylesheet" href="<?= $vite_server ?>/assets/css/tailwind.css">
+  <link rel="stylesheet" href="<?= $vite_server ?>/assets/css/squeditor-icons.css">
+  <script type="module" src="<?= $vite_server ?>/assets/scss/main.scss"></script>
+  <style>html.js-fouc { opacity: 0; transition: opacity 0.15s ease-out; }</style>
+  <script>document.documentElement.classList.add('js-fouc');</script>
+<?php else: ?>
+  <!-- Production Static Assets -->
+  <link rel="stylesheet" href="assets/css/squeditor-icons.css">
+  <link rel="stylesheet" href="assets/css/tailwind.css">
+  <link rel="stylesheet" href="assets/css/main_css.css">
+<?php endif; ?>

package/project-template/src/page-templates/transition.php

@@ -0,0 +1,45 @@
+<?php
+// src/page-templates/transition.php
+
+$transition = $site['page_transition'] ?? 'curve'; 
+if ($transition !== 'disabled'): 
+?>
+  <div class="sq-page-transition transition-<?= htmlspecialchars($transition) ?>" aria-hidden="true">
+    <?php if ($transition === 'curve'): ?>
+    <svg class="shape-overlays" viewBox="0 0 100 100" preserveAspectRatio="none">
+      <defs>
+        <linearGradient id="sq-grad-1" x1="0%" y1="0%" x2="0%" y2="100%">
+          <stop offset="0%" stop-color="var(--sq-page-transition-from)" />
+          <stop offset="100%" stop-color="var(--sq-page-transition-to)" />
+        </linearGradient>
+        <linearGradient id="sq-grad-2" x1="0%" y1="0%" x2="0%" y2="100%">
+          <stop offset="0%" stop-color="var(--sq-page-transition-to)" />
+          <stop offset="100%" stop-color="var(--sq-page-transition-from)" />
+        </linearGradient>
+      </defs>
+      <path class="shape-overlays__path" fill="url(#sq-grad-2)"></path>
+      <path class="shape-overlays__path" fill="url(#sq-grad-1)"></path>
+    </svg>
+    <?php elseif ($transition === 'wave'): ?>
+    <svg class="sq-transition-svg" viewBox="0 0 100 100" preserveAspectRatio="none">
+      <defs>
+        <linearGradient id="sq-grad-wave" x1="0" y1="0" x2="99" y2="99" gradientUnits="userSpaceOnUse">
+          <stop offset="0.2" stop-color="var(--sq-page-transition-from)" />
+          <stop offset="0.7" stop-color="var(--sq-page-transition-to)" />
+        </linearGradient>
+      </defs>
+      <path class="sq-transition-path" stroke="url(#sq-grad-wave)" fill="url(#sq-grad-wave)" stroke-width="0" vector-effect="non-scaling-stroke" d="M 0 0 V 100 Q 50 100 100 100 V 0 z"></path>
+    </svg>
+    <?php elseif ($transition === 'slide'): ?>
+    <div class="sq-transition-slide w-full h-full bg-gradient-to-t from-transition-from via-transition-via to-transition-to"></div>
+    <?php elseif ($transition === 'blinds'): ?>
+    <div class="sq-transition-blinds flex w-full h-full">
+      <div class="blind-strip flex-1 h-full bg-gradient-to-t from-transition-from via-transition-via to-transition-to"></div>
+      <div class="blind-strip flex-1 h-full bg-gradient-to-t from-transition-from via-transition-via to-transition-to"></div>
+      <div class="blind-strip flex-1 h-full bg-gradient-to-t from-transition-from via-transition-via to-transition-to"></div>
+      <div class="blind-strip flex-1 h-full bg-gradient-to-t from-transition-from via-transition-via to-transition-to"></div>
+      <div class="blind-strip flex-1 h-full bg-gradient-to-t from-transition-from via-transition-via to-transition-to"></div>
+    </div>
+    <?php endif; ?>
+  </div>
+<?php endif; ?>

package/project-template/src/sections/cards/cards-grid.php

@@ -0,0 +1,34 @@
+<?php
+// src/sections/cards/cards-grid.php
+$items = $items ?? [];
+$badge = $badge ?? '';
+$heading = $heading ?? '';
+$subheading = $subheading ?? '';
+?>
+<section class="py-32">
+  <div class="max-w-7xl mx-auto px-6">
+    <?php if ($heading): ?>
+      <div class="text-center mb-20 max-w-3xl mx-auto">
+        <?php if ($badge): ?>
+          <span class="text-xs font-black tracking-widest text-secondary block mb-4"><?= htmlspecialchars($badge) ?></span>
+        <?php endif; ?>
+        <h2 class="text-3xl md:text-5xl font-bold mb-6"><?= htmlspecialchars($heading) ?></h2>
+        <p class="text-lg text-muted leading-relaxed"><?= htmlspecialchars($subheading) ?></p>
+      </div>
+    <?php endif; ?>
+
+    <div class="grid grid-cols-2 md:grid-cols-4 gap-x-6 gap-y-6">
+      <?php foreach ($items as $card): ?>
+        <div class="sq-card">
+          <?php if (!empty($card['icon'])): ?>
+            <div class="sq-icon-wrapper text-secondary mb-6">
+              <i class="text-2xl <?= htmlspecialchars($card['icon']) ?>"></i>
+            </div>
+          <?php endif; ?>
+          <h3 class="text-lg font-bold mb-3"><?= htmlspecialchars($card['title'] ?? 'Card Title') ?></h3>
+          <p class="text-sm text-muted leading-relaxed"><?= htmlspecialchars($card['excerpt'] ?? 'Card description text.') ?></p>
+        </div>
+      <?php endforeach; ?>
+    </div>
+  </div>
+</section>

package/project-template/src/sections/cards/cards-horizontal.php

@@ -0,0 +1,28 @@
+<?php
+// src/sections/cards/cards-horizontal.php
+$items = $items ?? [];
+?>
+<section class="py-20">
+  <div class="max-w-5xl mx-auto px-6 space-y-12">
+    <?php foreach ($items as $card): ?>
+      <div class="relative group flex flex-col md:flex-row sq-card !p-0 overflow-hidden shadow-sm">
+        <div class="w-64 h-64">
+          <img src="<?= htmlspecialchars($card['image'] ?? 'assets/static/images/placeholder.png') ?>" class="w-full h-full object-cover" alt="">
+        </div>
+        <div class="p-8 md:w-2/3 flex flex-col justify-center">
+          <h3 class="text-2xl font-bold mb-3 tracking-tight"><?= htmlspecialchars($card['title'] ?? 'Title') ?></h3>
+          <p class="leading-relaxed opacity-60"><?= htmlspecialchars($card['excerpt'] ?? 'Description') ?></p>
+          <ul class="mt-4 leading-relaxed">
+            <?php foreach ($card['features'] as $feature): ?>
+              <li class="flex items-center gap-2"><i class="sq-icon-chevron-right opacity-30"></i> <?= htmlspecialchars($feature) ?></li>
+            <?php endforeach; ?>
+          </ul>
+          <span class="absolute top-6 end-6 w-10 h-10 p-0 rounded-full flex items-center justify-center border border-zinc-200 dark:border-zinc-800 group-hover:-rotate-45 transition-transform duration-300">
+            <i class="sq-icon-arrow-right"></i>
+          </span>
+        </div>
+        <a href="#" class="absolute inset-0"></a>
+      </div>
+    <?php endforeach; ?>
+  </div>
+</section>

package/project-template/src/sections/cta/cta-banner.php

@@ -0,0 +1,34 @@
+<?php
+// src/sections/cta/cta-banner.php
+$heading = $heading ?? 'Ready to start?';
+$subheading = $subheading ?? '';
+$button_text = $button_text ?? 'Get Started';
+$button_url = $button_url ?? '#';
+$secondary_button_text = $secondary_button_text ?? '';
+$hint_text = $hint_text ?? '';
+?>
+<section class="py-32 text-center border-t border-zinc-300 border-opacity-30 dark:border-opacity-5">
+  <div class="max-w-4xl mx-auto px-6">
+    <h2 class="text-4xl md:text-5xl font-bold mb-4 tracking-tighter">
+        <?= $heading ?>
+    </h2>
+    <p class="text-lg mb-10 leading-relaxed max-w-2xl mx-auto text-muted">
+        <?= htmlspecialchars($subheading) ?>
+    </p>
+    <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
+      <a href="<?= htmlspecialchars($button_url) ?>" class="btn btn-secondary btn-lg w-full sm:w-auto hover:shadow-xl transition-all hover:-translate-y-1">
+        <?= htmlspecialchars($button_text) ?>
+      </a>
+      <?php if ($secondary_button_text): ?>
+        <a href="#" class="btn btn-ghost btn-lg w-full sm:w-auto transition-all">
+          <?= htmlspecialchars($secondary_button_text) ?>
+        </a>
+      <?php endif; ?>
+    </div>
+    <?php if ($hint_text): ?>
+      <div class="mt-3">
+        <span class="text-sm text-muted"><?= htmlspecialchars($hint_text) ?></span>
+      </div>
+    <?php endif; ?>
+  </div>
+</section>

package/project-template/src/sections/cta/cta-newsletter.php

@@ -0,0 +1,19 @@
+<?php
+// src/sections/cta/cta-newsletter.php
+$heading = $heading ?? 'Subscribe to our newsletter';
+$subheading = $subheading ?? 'Get the latest updates and news from our team.';
+?>
+<section class="py-20 bg-zinc-50 dark:bg-zinc-800 dark:bg-opacity-40">
+  <div class="max-w-7xl mx-auto px-6 flex flex-col items-center justify-between gap-8">
+    <div class="mb-8 md:mb-0 md:w-1/2">
+      <h2 class="text-4xl font-bold text-center m-0"><?= htmlspecialchars($heading) ?></h2>
+      <p class="text-center mt-4"><?= htmlspecialchars($subheading) ?></p>
+    </div>
+    <div class="md:w-1/2 w-full">
+      <form class="flex w-full">
+        <input type="email" placeholder="Your email address" class="form-input !rounded-r-none h-12">
+        <button type="submit" class="btn btn-lg btn-secondary !rounded-l-none h-12 px-6">Subscribe</button>
+      </form>
+    </div>
+  </div>
+</section>

package/project-template/src/sections/footer/layout-01.php

@@ -0,0 +1,35 @@
+<?php
+// src/sections/footer/layout-01.php
+// Custom footer layout example triggered by $footer_args['layout'] = 'layout-01'
+
+$isDark = $isDark ?? false;
+$footerClasses = 'sq--footer py-16';
+if ($isDark) $footerClasses .= ' bg-zinc-900 text-white';
+else $footerClasses .= ' bg-zinc-50 border-t';
+?>
+<footer id="sq_footer_01" class="<?= htmlspecialchars($footerClasses) ?>">
+    <div class="max-w-7xl mx-auto px-6">
+        
+        <div class="flex flex-col md:flex-row justify-between items-center gap-8 mb-12">
+            <div>
+                <h2 class="text-3xl font-bold mb-4">Let's build something great.</h2>
+                <p class="opacity-70 max-w-md">Layout 01 features a simplified, high-impact footer designed to drive immediate conversions.</p>
+            </div>
+            <a href="register.html" class="btn btn-lg btn-accent rounded-full px-8 shadow-xl hover:-translate-y-1 transition-transform">Start your free trial</a>
+        </div>
+
+        <hr class="border-zinc-200 dark:border-zinc-800 mb-8">
+
+        <div class="flex flex-col md:flex-row justify-between items-center gap-4 text-sm opacity-60">
+            <p>&copy; <?= date('Y') ?> <?= htmlspecialchars($site['name']) ?>. Layout 01 Active.</p>
+            <div class="flex gap-6">
+                <?php foreach ($site['socials'] as $platform => $url): ?>
+                    <a href="<?= htmlspecialchars($url) ?>" class="hover:text-primary transition-colors">
+                        <span data-uk-icon="icon: <?= htmlspecialchars($platform) ?>; ratio: 0.8"></span>
+                    </a>
+                <?php endforeach; ?>
+            </div>
+        </div>
+        
+    </div>
+</footer>

package/project-template/src/sections/header/layout-01.php

@@ -0,0 +1,36 @@
+<?php
+// src/sections/header/layout-01.php
+
+$isDark = $isDark ?? false;
+$isFloat = $isFloat ?? false;
+
+$headerClasses = 'sq--header w-full z-[1000]';
+if ($isFloat) $headerClasses .= ' absolute top-0';
+if ($isDark) $headerClasses .= ' dark-mode text-white bg-zinc-900';
+else $headerClasses .= ' bg-white border-b';
+?>
+<header id="sq_header_01" class="<?= htmlspecialchars($headerClasses) ?>" data-uk-sticky="top: 80; cls-active: shadow-md border-b-0; animation: uk-animation-slide-top">
+    <div class="max-w-7xl mx-auto px-6 h-24 flex items-center justify-between">
+        
+        <!-- Logo Left -->
+        <a href="index.html" class="sq--logo flex items-center gap-3 group">
+            <div class="w-8 h-8 bg-secondary text-white rounded-full flex items-center justify-center transition-transform group-hover:rotate-12">
+                <i class="sq-icon-zap"></i>
+            </div>
+            <div>
+                <h1 class="font-bold text-2xl m-0 leading-none"><?= htmlspecialchars($site['name']) ?></h1>
+            </div>
+        </a>
+
+        <!-- Desktop Nav Right -->
+        <div class="hidden md:flex items-center gap-8">
+            <?php get_template_part('nav'); ?>
+            <a href="contact.html" class="btn btn-secondary btn-md rounded-full px-6">Get in Touch</a>
+        </div>
+
+        <!-- Mobile Toggle -->
+        <button class="md:hidden" data-uk-toggle="target: #sq_mobile_offcanvas" type="button" aria-label="Menu">
+            <span data-uk-icon="icon: menu; ratio: 1.2"></span>
+        </button>
+    </div>
+</header>

package/project-template/src/sections/hero/hero-centered.php

@@ -0,0 +1,44 @@
+<?php
+// src/sections/hero/hero-centered.php
+$badge = $badge ?? '';
+$heading = $heading ?? 'Welcome to Our Website';
+$subheading = $subheading ?? 'We build things that work.';
+$cta_primary_text = $cta_primary_text ?? 'Get Started';
+$cta_primary_url = $cta_primary_url ?? '#';
+$cta_secondary_text = $cta_secondary_text ?? 'View Demo';
+$cta_secondary_url = $cta_secondary_url ?? '#';
+$mockup_image = $mockup_image ?? '';
+?>
+<section class="relative pt-24 pb-0 text-center overflow-hidden" data-uk-height-viewport="min-height: 600px; offset-top: true;">
+  <div class="absolute top-0 left-0 right-0 bg-gradient-to-t from-black/5 dark:from-white/5 to-transparent -z-10" data-uk-height-viewport="min-height: 600px; offset-top: true;"></div>
+  <div class="max-w-4xl mx-auto px-6">
+    <?php if ($badge): ?>
+      <span class="sq-badge"><?= htmlspecialchars($badge) ?></span>
+    <?php endif; ?>
+    
+    <h1 class="text-4xl md:text-7xl mb-6 leading-tight tracking-tighter">
+      <?= $heading ?>
+    </h1>
+    
+    <p class="text-lg md:text-xl mb-10 max-w-2xl mx-auto leading-relaxed text-muted">
+      <?= htmlspecialchars($subheading) ?>
+    </p>
+    
+    <div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-20">
+      <a href="<?= htmlspecialchars($cta_primary_url) ?>" class="btn btn-secondary btn-lg w-full sm:w-auto hover:shadow-xl hover:-translate-y-1">
+        <?= htmlspecialchars($cta_primary_text) ?>
+      </a>
+      <a href="<?= htmlspecialchars($cta_secondary_url) ?>" class="btn btn-ghost !border-2 !border-solid hover:!border-black/20 dark:!border-white/10 dark:hover:!border-white/20 !bg-transparent btn-lg w-full sm:w-auto hover:shadow-xl hover:-translate-y-1">
+        <?= htmlspecialchars($cta_secondary_text) ?>
+      </a>
+    </div>
+
+    <?php if ($mockup_image): ?>
+      <div class="relative max-w-6xl mx-auto px-4 md:px-10">
+        <div class="rounded-t-2xl border-x border-t border-zinc-100 shadow-2xl p-2 pb-0 bg-white/50 backdrop-blur-sm">
+           <img src="<?= htmlspecialchars($mockup_image) ?>" class="w-full rounded-t-xl shadow-lg border border-zinc-100" alt="App Mockup">
+        </div>
+      </div>
+    <?php endif; ?>
+  </div>
+</section>