odac 1.4.3 → 1.4.5

package/template/view/content/about.html

@@ -1,65 +1,69 @@
-<div class="container">
-  <section class="page-hero">
-    <h1>🍭 About This Template</h1>
-    <p class="lead">This is a starter template for your Odac website. Customize it to build your own application.</p>
-  </section>
+<div class="space-y-24">
+    <!-- About Hero -->
+    <section class="text-center space-y-6">
+        <h1 class="text-4xl md:text-6xl font-bold tracking-tight text-brand-900 leading-tight">
+            About This <br/><span class="text-brand-900/40">Template</span>
+        </h1>
+        <p class="text-xl text-brand-900/50 max-w-2xl mx-auto font-medium leading-relaxed">
+            This is your starting point for building something incredible with ODAC. A modern, high-performance foundation.
+        </p>
+    </section>
 
-  <section class="content-section">
-    <h2>What You Can Build</h2>
-    <p>
-      With Odac, you can build any type of web application - from simple websites to complex web apps. 
-      This template provides a solid foundation with modern features and best practices already configured.
-    </p>
-  </section>
+    <!-- Template Features -->
+    <section class="space-y-12">
+        <div class="text-center space-y-2">
+            <h2 class="text-3xl font-bold tracking-tight text-brand-900">Template Features</h2>
+            <p class="text-brand-900/40">Everything you need, already configured.</p>
+        </div>
 
-  <section class="content-section">
-    <h2>Template Features</h2>
-    <div class="component-grid">
-      <div class="component-card">
-        <h3>🎨 Modern UI</h3>
-        <p>Dark theme with indigo colors, responsive design, and smooth animations.</p>
-      </div>
-      
-      <div class="component-card">
-        <h3>⚡ AJAX Navigation</h3>
-        <p>Smooth page transitions without full reloads, already configured and working.</p>
-      </div>
-      
-      <div class="component-card">
-        <h3>🔒 Security</h3>
-        <p>CSRF protection, secure sessions, and authentication ready to use.</p>
-      </div>
-      
-      <div class="component-card">
-        <h3>📱 Responsive</h3>
-        <p>Mobile-first design that works perfectly on all devices.</p>
-      </div>
-    </div>
-  </section>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+            <div class="p-8 bg-white rounded-[2rem] border border-brand-100 shadow-sm space-y-4">
+                <h3 class="text-xl font-bold text-brand-900">Modern UI</h3>
+                <p class="text-brand-900/60 leading-relaxed">Design with Apple-style aesthetics using Tailwind CSS. Responsive, minimal, and premium.</p>
+            </div>
+            
+            <div class="p-8 bg-white rounded-[2rem] border border-brand-100 shadow-sm space-y-4">
+                <h3 class="text-xl font-bold text-brand-900">AJAX Navigation</h3>
+                <p class="text-brand-900/60 leading-relaxed">Smooth page transitions without full reloads, already configured and working out of the box.</p>
+            </div>
+            
+            <div class="p-8 bg-white rounded-[2rem] border border-brand-100 shadow-sm space-y-4">
+                <h3 class="text-xl font-bold text-brand-900">Security</h3>
+                <p class="text-brand-900/60 leading-relaxed">CSRF protection, secure sessions, and authentication ready to use for your application.</p>
+            </div>
+            
+            <div class="p-8 bg-white rounded-[2rem] border border-brand-100 shadow-sm space-y-4">
+                <h3 class="text-xl font-bold text-brand-900">Responsive</h3>
+                <p class="text-brand-900/60 leading-relaxed">Mobile-first design that works perfectly on all devices, from small phones to large desktop displays.</p>
+            </div>
+        </div>
+    </section>
 
-  <section class="content-section">
-    <h2>Next Steps</h2>
-    <ul class="philosophy-list">
-      <li><strong>Routes:</strong> Define URL patterns in <code>route/www.js</code> to map URLs to controllers</li>
-      <li><strong>Controllers:</strong> Create page logic in <code>controller/</code> to handle requests and set data</li>
-      <li><strong>Skeleton:</strong> Design your layout structure in <code>skeleton/</code> with placeholders</li>
-      <li><strong>Views:</strong> Build page content in <code>view/</code> directory to fill skeleton sections</li>
-      <li><strong>Assets:</strong> Customize styles and scripts in <code>public/</code> for your brand</li>
-    </ul>
-  </section>
+    <!-- Next Steps -->
+    <section class="bg-brand-900 rounded-[3rem] p-12 md:p-20 text-white space-y-12">
+        <h2 class="text-3xl font-bold tracking-tight text-center">Next Steps</h2>
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+            <div class="space-y-2 border-l-2 border-white/10 pl-6">
+                <h4 class="font-bold">Routes</h4>
+                <p class="text-white/40 text-sm">Define URL patterns in <code>route/www.js</code></p>
+            </div>
+            <div class="space-y-2 border-l-2 border-white/10 pl-6">
+                <h4 class="font-bold">Controllers</h4>
+                <p class="text-white/40 text-sm">Create page logic in <code>controller/</code></p>
+            </div>
+            <div class="space-y-2 border-l-2 border-white/10 pl-6">
+                <h4 class="font-bold">Skeleton</h4>
+                <p class="text-white/40 text-sm">Design your layout structure in <code>skeleton/</code></p>
+            </div>
+        </div>
+    </section>
 
-  <section class="content-section">
-    <h2>Learn More</h2>
-    <div class="links-grid">
-      <a href="https://docs.odac.run" class="link-card" target="_blank" data-navigate="false">
-        <h3>📚 Documentation</h3>
-        <p>Complete guides, API reference, and tutorials</p>
-      </a>
-      
-      <a href="https://odac.run" class="link-card" target="_blank" data-navigate="false">
-        <h3>🌐 odac.run</h3>
-        <p>Official website with examples and community</p>
-      </a>
-    </div>
-  </section>
+    <!-- Learn More -->
+    <section class="text-center pb-24 space-y-8">
+        <h2 class="text-3xl font-bold text-brand-900 tracking-tight">Need help?</h2>
+        <div class="flex justify-center gap-4">
+            <a href="https://docs.odac.run" target="_blank" rel="noopener" class="px-8 py-3 bg-white border border-brand-100 rounded-full font-bold hover:bg-brand-50 transition-colors" data-navigate="false">Documentation</a>
+            <a href="https://odac.run" target="_blank" rel="noopener" class="px-8 py-3 bg-brand-900 text-white rounded-full font-bold hover:opacity-90 transition-opacity" data-navigate="false">Official Site</a>
+        </div>
+    </section>
 </div>

package/template/view/content/home.html

@@ -1,205 +1,178 @@
 <!-- Hero Section -->
-<section class="hero">
-  <div class="container">
-    <div class="hero-content">
-      <h1 class="hero-title">🍭 Your Odac Site is Ready!</h1>
-      <p class="hero-subtitle">You've successfully created a new website with Odac</p>
-      <p class="hero-description">
-        This is your starting template. Edit the files in your project directory to customize your site. Everything you need to build a
-        modern web application is already set up and ready to go.
-      </p>
-      <div class="hero-actions">
-        <a href="https://odac.run" target="_blank" class="btn btn-primary" data-navigate="false">Visit odac.run</a>
-        <a href="https://docs.odac.run" target="_blank" class="btn btn-secondary" data-navigate="false">Read Documentation</a>
-      </div>
+<section class="mb-24 py-12">
+    <div class="flex flex-col items-center text-center space-y-8">
+        <h1 class="text-5xl md:text-7xl font-bold tracking-tight text-brand-900 leading-tight">
+            Your ODAC Site is <br/><span class="text-brand-900/40">Ready to Build.</span>
+        </h1>
+        <p class="text-xl md:text-2xl text-brand-900/50 max-w-2xl font-medium leading-relaxed">
+            A next-generation framework for modern web applications. Fast, secure, and zero-config by design.
+        </p>
+        <div class="flex items-center gap-4 pt-4">
+            <a href="https://docs.odac.run" target="_blank" rel="noopener" class="btn-apple btn-primary px-8 py-3 text-lg" data-navigate="false">
+                Quick Start
+            </a>
+            <a href="/about" class="btn-apple btn-secondary px-8 py-3 text-lg">
+                Learn More
+            </a>
+        </div>
     </div>
-  </div>
 </section>
 
 <!-- Project Structure Section -->
-<section class="features">
-  <div class="container">
-    <h2 class="section-title">📁 Your Project Structure</h2>
-    <p class="section-description">Here's what you'll find in your project directory:</p>
-
-    <div class="structure-grid">
-      <div class="structure-item">
-        <div class="structure-icon">📄</div>
-        <h3 class="structure-title">controller/</h3>
-        <p class="structure-description">Your application logic lives here. Each file handles requests and prepares data for views.</p>
-        <code class="structure-path">controller/page/index.js</code>
-      </div>
-
-      <div class="structure-item">
-        <div class="structure-icon">🎨</div>
-        <h3 class="structure-title">view/</h3>
-        <p class="structure-description">HTML templates for your pages. Organized by type (content, header, footer).</p>
-        <code class="structure-path">view/content/home.html</code>
-      </div>
-
-      <div class="structure-item">
-        <div class="structure-icon">🎯</div>
-        <h3 class="structure-title">route/</h3>
-        <p class="structure-description">Define your URL routes here. Map URLs to controllers and views.</p>
-        <code class="structure-path">route/www.js</code>
-      </div>
-
-      <div class="structure-item">
-        <div class="structure-icon">💎</div>
-        <h3 class="structure-title">public/</h3>
-        <p class="structure-description">Static assets like CSS, JavaScript, and images. Served directly to browsers.</p>
-        <code class="structure-path">public/assets/css/style.css</code>
-      </div>
-
-      <div class="structure-item">
-        <div class="structure-icon">🏗️</div>
-        <h3 class="structure-title">skeleton/</h3>
-        <p class="structure-description">Page layouts that wrap your content. Define your HTML structure once.</p>
-        <code class="structure-path">skeleton/main.html</code>
-      </div>
+<section class="mb-24">
+    <div class="space-y-4 mb-12">
+        <h2 class="text-3xl font-semibold tracking-tight text-brand-900">Project Structure</h2>
+        <p class="text-brand-900/50 text-lg">Everything has a place. Convention over configuration.</p>
+    </div>
 
-      <div class="structure-item">
-        <div class="structure-icon">⚙️</div>
-        <h3 class="structure-title">odac.json</h3>
-        <p class="structure-description">Configuration file for database, routes, and other settings.</p>
-        <code class="structure-path">odac.json</code>
-      </div>
+    <div class="bg-white rounded-[2rem] shadow-sm border border-brand-100 overflow-hidden">
+        <div class="grid grid-cols-1 lg:grid-cols-2">
+            <!-- Tree -->
+            <div class="p-8 lg:p-10 bg-brand-900 text-brand-200">
+                <pre class="text-sm leading-relaxed font-mono"><code>my-project/
+├── controller/     <span class="text-brand-500"># Request handlers</span>
+├── middleware/     <span class="text-brand-500"># Route middlewares</span>
+├── public/         <span class="text-brand-500"># Static assets</span>
+├── route/          <span class="text-brand-500"># Route definitions</span>
+├── schema/         <span class="text-brand-500"># Database schemas</span>
+├── skeleton/       <span class="text-brand-500"># Page layouts</span>
+├── view/
+│   ├── content/    <span class="text-brand-500"># Page templates</span>
+│   ├── css/        <span class="text-brand-500"># Tailwind source</span>
+│   ├── head/       <span class="text-brand-500"># &lt;head&gt; partials</span>
+│   ├── header/     <span class="text-brand-500"># Header partials</span>
+│   └── footer/     <span class="text-brand-500"># Footer partials</span>
+└── odac.json       <span class="text-brand-500"># Configuration</span></code></pre>
+            </div>
+
+            <!-- Description -->
+            <div class="p-8 lg:p-10 space-y-6">
+                <div class="space-y-1">
+                    <h3 class="text-sm font-bold text-brand-900">controller/</h3>
+                    <p class="text-sm text-brand-900/50">Your application logic. Each file handles requests and prepares data for views.</p>
+                </div>
+                <div class="space-y-1">
+                    <h3 class="text-sm font-bold text-brand-900">route/</h3>
+                    <p class="text-sm text-brand-900/50">Map URLs to controllers. Simple, declarative routing.</p>
+                </div>
+                <div class="space-y-1">
+                    <h3 class="text-sm font-bold text-brand-900">view/</h3>
+                    <p class="text-sm text-brand-900/50">HTML templates organized by type. Tailwind CSS source lives in <code class="text-xs bg-brand-50 px-1 py-0.5 rounded text-brand-900/60">view/css/</code>.</p>
+                </div>
+                <div class="space-y-1">
+                    <h3 class="text-sm font-bold text-brand-900">schema/</h3>
+                    <p class="text-sm text-brand-900/50">Database table definitions. Auto-migrated on every startup.</p>
+                </div>
+                <div class="space-y-1">
+                    <h3 class="text-sm font-bold text-brand-900">skeleton/</h3>
+                    <p class="text-sm text-brand-900/50">Page layouts that wrap your content. Define once, reuse everywhere.</p>
+                </div>
+                <div class="space-y-1">
+                    <h3 class="text-sm font-bold text-brand-900">odac.json</h3>
+                    <p class="text-sm text-brand-900/50">Centralized config for database, routes, and framework behavior.</p>
+                </div>
+            </div>
+        </div>
     </div>
-  </div>
 </section>
 
-<!-- Quick Start Section -->
-<section class="demo">
-  <div class="container">
-    <h2 class="section-title">🚀 Quick Start Guide</h2>
-
-    <div class="quickstart-grid">
-      <div class="quickstart-step">
-        <div class="step-number">1</div>
-        <h3 class="step-title">Edit Your Content</h3>
-        <p class="step-description">
-          Open <code>view/content/home.html</code> to customize this page. All your HTML templates are in the <code>view/</code> directory.
-        </p>
-      </div>
+<!-- Quick Start Guide -->
+<section class="mb-24">
+    <div class="space-y-4 mb-12">
+        <h2 class="text-3xl font-semibold tracking-tight text-brand-900">Quick Start</h2>
+        <p class="text-brand-900/50 text-lg">Four steps to your first custom page.</p>
+    </div>
 
-      <div class="quickstart-step">
-        <div class="step-number">2</div>
-        <h3 class="step-title">Add Routes</h3>
-        <p class="step-description">Define new pages in <code>route/www.js</code>. Map URLs to controllers:</p>
-        <pre class="code-snippet"><code>Odac.Route.page('/my-page', 'page.mypage')</code></pre>
-      </div>
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+        <div class="bg-white p-8 rounded-[2rem] shadow-sm border border-brand-100 space-y-4 flex flex-col">
+            <div class="flex items-center gap-3">
+                <span class="w-8 h-8 bg-brand-900 text-white rounded-full flex items-center justify-center text-sm font-bold">1</span>
+                <h3 class="text-lg font-bold">Define a Route</h3>
+            </div>
+            <p class="text-brand-900/50 text-sm">Map a URL to a controller in <code class="text-xs bg-brand-50 px-1.5 py-0.5 rounded text-brand-900/60">route/www.js</code></p>
+            <pre class="bg-brand-900 text-brand-200 text-sm p-4 rounded-xl overflow-x-auto mt-auto h-full"><code>Odac.Route.page('/my-page', 'page.mypage')</code></pre>
+        </div>
 
-      <div class="quickstart-step">
-        <div class="step-number">3</div>
-        <h3 class="step-title">Create Controllers</h3>
-        <p class="step-description">Add logic in <code>controller/page/mypage.js</code>:</p>
-        <pre class="code-snippet"><code>module.exports = function(Odac) {
-  Odac.View.skeleton('main')
+        <div class="bg-white p-8 rounded-[2rem] shadow-sm border border-brand-100 space-y-4 flex flex-col">
+            <div class="flex items-center gap-3">
+                <span class="w-8 h-8 bg-brand-900 text-white rounded-full flex items-center justify-center text-sm font-bold">2</span>
+                <h3 class="text-lg font-bold">Create a Controller</h3>
+            </div>
+            <p class="text-brand-900/50 text-sm">Add logic in <code class="text-xs bg-brand-50 px-1.5 py-0.5 rounded text-brand-900/60">controller/page/mypage.js</code></p>
+            <pre class="bg-brand-900 text-brand-200 text-sm p-4 rounded-xl overflow-x-auto mt-auto h-full"><code>module.exports = function(Odac) {
   Odac.View.set({
+    skeleton: 'main',
+    head: 'main',
     header: 'main',
     content: 'mypage',
     footer: 'main'
   })
 }</code></pre>
-      </div>
-
-      <div class="quickstart-step">
-        <div class="step-number">4</div>
-        <h3 class="step-title">Style Your Site</h3>
-        <p class="step-description">
-          Customize the look in <code>public/assets/css/style.css</code>. Add your own CSS or use your favorite framework.
-        </p>
-      </div>
-    </div>
-  </div>
-</section>
-
-<!-- Features Section -->
-<section class="code-examples">
-  <div class="container">
-    <h2 class="section-title">✨ What's Included</h2>
-
-    <div class="features-list">
-      <div class="feature-item">
-        <div class="feature-icon">🎯</div>
-        <div class="feature-content">
-          <h3>AJAX Navigation</h3>
-          <p>Smooth page transitions without full reloads. Already configured in <code>public/assets/js/app.js</code></p>
         </div>
-      </div>
 
-      <div class="feature-item">
-        <div class="feature-icon">🔒</div>
-        <div class="feature-content">
-          <h3>CSRF Protection</h3>
-          <p>Automatic security tokens for all forms and AJAX requests. No configuration needed.</p>
+        <div class="bg-white p-8 rounded-[2rem] shadow-sm border border-brand-100 space-y-4 flex flex-col">
+            <div class="flex items-center gap-3">
+                <span class="w-8 h-8 bg-brand-900 text-white rounded-full flex items-center justify-center text-sm font-bold">3</span>
+                <h3 class="text-lg font-bold">Build the View</h3>
+            </div>
+            <p class="text-brand-900/50 text-sm">Create your template in <code class="text-xs bg-brand-50 px-1.5 py-0.5 rounded text-brand-900/60">view/content/mypage.html</code></p>
+            <pre class="bg-brand-900 text-brand-200 text-sm p-4 rounded-xl overflow-x-auto mt-auto h-full"><code>&lt;section class="py-12"&gt;
+  &lt;h1 class="text-4xl font-bold"&gt;My Page&lt;/h1&gt;
+  &lt;p class="text-brand-900/50"&gt;Welcome!&lt;/p&gt;
+&lt;/section&gt;</code></pre>
         </div>
-      </div>
 
-      <div class="feature-item">
-        <div class="feature-icon">📱</div>
-        <div class="feature-content">
-          <h3>Responsive Design</h3>
-          <p>Mobile-first CSS framework included. Customize in <code>public/assets/css/style.css</code></p>
+        <div class="bg-white p-8 rounded-[2rem] shadow-sm border border-brand-100 space-y-4 flex flex-col">
+            <div class="flex items-center gap-3">
+                <span class="w-8 h-8 bg-brand-900 text-white rounded-full flex items-center justify-center text-sm font-bold">4</span>
+                <h3 class="text-lg font-bold">Style with Tailwind</h3>
+            </div>
+            <p class="text-brand-900/50 text-sm">Customize the theme in <code class="text-xs bg-brand-50 px-1.5 py-0.5 rounded text-brand-900/60">view/css/app.css</code></p>
+            <pre class="bg-brand-900 text-brand-200 text-sm p-4 rounded-xl overflow-x-auto mt-auto h-full"><code>@theme {
+  --color-brand: #0071e3;
+  --font-display: "Inter", sans-serif;
+}</code></pre>
         </div>
-      </div>
+    </div>
+</section>
 
-      <div class="feature-item">
-        <div class="feature-icon">⚡</div>
-        <div class="feature-content">
-          <h3>Fast Development</h3>
-          <p>Hot reload enabled. Changes to views and controllers are reflected immediately.</p>
+<!-- Features Spotlight -->
+<section class="mb-24">
+    <div class="bg-brand-900 rounded-[3rem] p-12 md:p-20 text-white space-y-12">
+        <div class="text-center space-y-4">
+            <h2 class="text-3xl md:text-5xl font-bold tracking-tight">Built for modern scale.</h2>
+            <p class="text-white/50 text-xl font-medium">Enterprise grade performance out of the box.</p>
         </div>
-      </div>
-
-      <div class="feature-item">
-        <div class="feature-icon">🗄️</div>
-        <div class="feature-content">
-          <h3>Database Ready</h3>
-          <p>MySQL and SQLite support built-in. Configure in <code>odac.json</code></p>
+        
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-12 pt-8">
+            <div class="space-y-4 border-l-2 border-white/10 pl-8">
+                <h3 class="text-xl font-bold">AJAX Navigation</h3>
+                <p class="text-white/40 leading-relaxed">Smooth page transitions without full reloads, giving your users a native app feel.</p>
+            </div>
+            <div class="space-y-4 border-l-2 border-white/10 pl-8">
+                <h3 class="text-xl font-bold">Security First</h3>
+                <p class="text-white/40 leading-relaxed">Automatic CSRF protection and secure session management built into the core.</p>
+            </div>
+            <div class="space-y-4 border-l-2 border-white/10 pl-8">
+                <h3 class="text-xl font-bold">Sub-ms Latency</h3>
+                <p class="text-white/40 leading-relaxed">Optimized routing and view engine designed for the highest possible throughput.</p>
+            </div>
+            <div class="space-y-4 border-l-2 border-white/10 pl-8">
+                <h3 class="text-xl font-bold">Tailwind Included</h3>
+                <p class="text-white/40 leading-relaxed">The default template now leverages Tailwind CSS for professional, scalable designs.</p>
+            </div>
         </div>
-      </div>
-
-      <div class="feature-item">
-        <div class="feature-icon">📧</div>
-        <div class="feature-content">
-          <h3>Email Support</h3>
-          <p>Send emails with the built-in mail service. SMTP and IMAP included.</p>
-        </div>
-      </div>
     </div>
-  </div>
 </section>
 
-<!-- Resources Section -->
-<section class="resources">
-  <div class="container">
-    <h2 class="section-title">📚 Learn More</h2>
-
-    <div class="resources-grid">
-      <a href="https://odac.run" target="_blank" class="resource-card" data-navigate="false">
-        <div class="resource-icon">🌐</div>
-        <h3>odac.run</h3>
-        <p>Official website with guides, tutorials, and community resources</p>
-      </a>
-
-      <a href="https://docs.odac.run" target="_blank" class="resource-card" data-navigate="false">
-        <div class="resource-icon">📖</div>
-        <h3>Documentation</h3>
-        <p>Complete API reference, examples, and best practices</p>
-      </a>
-
-      <a href="https://github.com/odac-run/odac" target="_blank" class="resource-card" data-navigate="false">
-        <div class="resource-icon">💻</div>
-        <h3>GitHub</h3>
-        <p>Source code, issues, and contribution guidelines</p>
-      </a>
-    </div>
-
-    <div class="next-steps">
-      <h3>🎨 Ready to Build?</h3>
-      <p>Start by editing <code>view/content/home.html</code> to replace this page with your own content.</p>
-      <p>Check out the <a href="/about">About</a> page for more examples.</p>
+<!-- Call to Action -->
+<section class="mb-12 py-12">
+    <div class="flex flex-col items-center text-center space-y-6">
+        <h2 class="text-3xl font-bold text-brand-900 tracking-tight">Ready to build the future?</h2>
+        <p class="text-brand-900/50 max-w-xl">Start by editing <code class="text-xs bg-brand-50 px-1.5 py-0.5 rounded text-brand-900/60">view/content/home.html</code> to replace this page with your own vision.</p>
+        <div class="pt-4 flex items-center gap-4">
+            <a href="https://github.com/odac-run/odac" target="_blank" rel="noopener" class="px-6 py-2 border border-brand-100 rounded-full font-medium hover:bg-brand-50 transition-colors" data-navigate="false">Star on GitHub</a>
+            <a href="/about" class="px-6 py-2 text-brand-900 font-medium hover:opacity-60 transition-opacity">Meet the Framework →</a>
+        </div>
     </div>
-  </div>
 </section>

package/template/view/css/app.css

@@ -0,0 +1,46 @@
+@import "tailwindcss";
+
+@theme {
+  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+
+  --color-brand-50: #f8f8f8;
+  --color-brand-100: #e8e8e8;
+  --color-brand-200: #d1d1d1;
+  --color-brand-300: #b0b0b0;
+  --color-brand-400: #888888;
+  --color-brand-500: #6d6d6d;
+  --color-brand-600: #5d5d5d;
+  --color-brand-700: #4b4b4b;
+  --color-brand-800: #373737;
+  --color-brand-900: #1d1d1f;
+}
+
+/* Base Styles */
+body {
+  @apply bg-[#f5f5f7] text-brand-900 antialiased;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  @apply font-semibold tracking-tight;
+}
+
+/* Components */
+.glass {
+  @apply bg-white/70 backdrop-blur-md border-b border-white/10;
+}
+
+.btn-apple {
+  @apply px-6 py-2 rounded-full font-medium transition-all duration-200 inline-flex items-center justify-center;
+}
+
+.btn-primary {
+  @apply bg-brand-900 text-white hover:bg-brand-800;
+}
+
+.btn-secondary {
+  @apply bg-brand-100 text-brand-900 hover:bg-brand-200;
+}
+
+.active {
+  @apply !text-brand-900 opacity-100 font-semibold;
+}

package/template/view/footer/main.html

@@ -1,11 +1,12 @@
-<!-- Footer -->
-<div class="footer">
-    <div class="container">
-        <p>Powered by <strong>Odac</strong> - A next-generation server and framework toolkit</p>
-        <p class="footer-links">
-            <a href="https://github.com/odac-run/odac" target="_blank" data-navigate="false">GitHub</a> •
-            <a href="https://docs.odac.run" target="_blank" data-navigate="false">Documentation</a> •
-            <a href="https://odac.run" target="_blank" data-navigate="false">Official Site</a>
-        </p>
+<div class="max-w-5xl mx-auto px-6 flex flex-col items-center gap-6">
+    <div class="flex items-center gap-6">
+        <a href="https://github.com/odac-run/odac" target="_blank" rel="noopener" class="text-xs font-medium text-brand-900/40 hover:text-brand-900/60 transition-colors" data-navigate="false">GitHub</a>
+        <a href="https://docs.odac.run" target="_blank" rel="noopener" class="text-xs font-medium text-brand-900/40 hover:text-brand-900/60 transition-colors" data-navigate="false">Documentation</a>
+        <a href="https://odac.run" target="_blank" rel="noopener" class="text-xs font-medium text-brand-900/40 hover:text-brand-900/60 transition-colors" data-navigate="false">Official Site</a>
+    </div>
+    
+    <div class="flex flex-col items-center gap-2">
+        <p class="text-xs text-brand-900/30">Powered by <span class="font-semibold text-brand-900/40">ODAC</span> Framework</p>
+        <p class="text-[10px] uppercase tracking-widest text-brand-900/20 font-medium">Built for High Performance</p>
     </div>
 </div>

package/template/view/header/main.html

@@ -1,14 +1,37 @@
-<!-- Navigation -->
-<nav class="navbar">
-    <div class="container">
-        <div class="nav-brand">
-            <span class="brand-icon">🍭</span>
-            <span class="brand-name">Odac</span>
-        </div>
-        <div class="nav-links">
-            <a href="/" class="nav-link active">Getting Started</a>
-            <a href="/about" class="nav-link">About</a>
-            <a href="https://docs.odac.run" class="nav-link" target="_blank" data-navigate="false">Docs ↗</a>
+<div class="container mx-auto px-6 h-full flex items-center justify-between">
+    <a href="/" class="flex items-center gap-2 transition-opacity hover:opacity-80">
+        <span class="text-xl font-bold tracking-tight text-brand-900">ODAC</span>
+    </a>
+
+    <!-- Desktop Nav -->
+    <nav class="hidden md:flex items-center gap-8">
+        <div class="flex items-center gap-6">
+            <a href="/" class="text-sm font-medium text-brand-900/60 hover:text-brand-900 transition-colors active">Getting Started</a>
+            <a href="/about" class="text-sm font-medium text-brand-900/60 hover:text-brand-900 transition-colors">About</a>
+            <a href="https://docs.odac.run" target="_blank" rel="noopener" class="text-sm font-medium text-brand-900/60 hover:text-brand-900 transition-colors flex items-center gap-1" data-navigate="false">
+                Docs
+                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" /></svg>
+            </a>
         </div>
+
+        <a href="https://github.com/odac-run/odac" target="_blank" rel="noopener" class="btn-apple btn-primary text-sm px-4 py-1.5" data-navigate="false">
+            GitHub
+        </a>
+    </nav>
+
+    <!-- Mobile Menu Toggle -->
+    <label for="mobile-menu" class="md:hidden cursor-pointer p-2 -mr-2 text-brand-900/60 hover:text-brand-900 transition-colors">
+        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" /></svg>
+    </label>
+</div>
+
+<!-- Mobile Menu (CSS-only toggle) -->
+<input type="checkbox" id="mobile-menu" class="hidden peer" />
+<nav class="peer-checked:flex hidden md:hidden flex-col w-full bg-white/90 backdrop-blur-xl border-t border-brand-100 px-6 py-6 gap-4">
+    <a href="/" class="text-sm font-medium text-brand-900/60 hover:text-brand-900 transition-colors py-2 active">Getting Started</a>
+    <a href="/about" class="text-sm font-medium text-brand-900/60 hover:text-brand-900 transition-colors py-2">About</a>
+    <a href="https://docs.odac.run" target="_blank" rel="noopener" class="text-sm font-medium text-brand-900/60 hover:text-brand-900 transition-colors py-2" data-navigate="false">Docs</a>
+    <div class="pt-2 border-t border-brand-100">
+        <a href="https://github.com/odac-run/odac" target="_blank" rel="noopener" class="btn-apple btn-primary text-sm w-full" data-navigate="false">GitHub</a>
     </div>
 </nav>