maglevcms-hyperui-kit 1.1.0 → 1.2.0

data/lib/generators/maglev/hyperui/install/templates/app_pro/views/themes/%theme_name%/sections/cta/cta_01.html.erb

@@ -0,0 +1,15 @@
+<%= maglev_section.wrapper_tag.aside class: 'overflow-hidden bg-gray-50 sm:grid sm:grid-cols-2' do %> 
+  <div class="p-8 md:p-12 lg:px-16 lg:py-24">
+    <div class="max-w-xl mx-auto text-center sm:text-left">
+      <%= maglev_section.setting_tag :title, html_tag: 'h2', class: 'text-2xl font-bold text-gray-900 md:text-3xl' %>
+      
+      <%= maglev_section.setting_tag :body, html_tag: 'p', class: 'hidden text-gray-500 md:mt-4 md:block' %>
+      
+      <div class="mt-4 md:mt-8">
+        <%= maglev_section.setting_tag :button, class: "inline-block px-12 py-3 text-sm font-medium text-white transition rounded bg-emerald-600 hover:bg-emerald-700 focus:outline-none focus:ring focus:ring-yellow-400" %>
+      </div>
+    </div>
+  </div>
+
+  <%= maglev_section.setting_tag :image, class: 'object-cover w-full h-56 sm:h-full' %>  
+<% end %>

data/lib/generators/maglev/hyperui/install/templates/app_pro/views/themes/%theme_name%/sections/cta/cta_02.html.erb

@@ -0,0 +1,38 @@
+<%= maglev_section.wrapper_tag.aside class: "overflow-hidden bg-[url(#{maglev_section.settings.background_image.url})] bg-center bg-no-repeat bg-cover" do %>
+  <div class="bg-black/25">
+    <div class="mx-auto max-w-screen-xl ">
+      <div class="p-8 md:p-12 lg:px-16 lg:py-24">
+        <div class="max-w-lg text-center sm:text-left">
+          <%= maglev_section.setting_tag :title, html_tag: 'h2', class: 'text-2xl font-bold text-white sm:text-3xl md:text-5xl' %>
+          
+          <%= maglev_section.setting_tag :body, html_tag: 'p', class: 'hidden max-w-md text-white/90 md:mt-6 md:text-lg md:leading-relaxed md:block' %>
+
+          <div class="mt-4 sm:mt-8">
+            <a
+              href="<%= section.settings.button.href %>"
+              class="inline-flex items-center px-8 py-3 text-white transition bg-indigo-700 rounded-full shadow-lg focus:outline-none focus:ring hover:bg-indigo-600"
+              <% if section.settings.button.open_new_window? %>target="_blank"<% end %>
+            >
+              <span class="text-sm font-medium"><%= section.settings.button.text %></span>
+
+              <svg
+                class="w-5 h-5 ml-3"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M17 8l4 4m0 0l-4 4m4-4H3"
+                />
+              </svg>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+<% end %>

data/lib/generators/maglev/hyperui/install/templates/app_pro/views/themes/%theme_name%/sections/cta/cta_03.html.erb

@@ -0,0 +1,23 @@
+<%= maglev_section.wrapper_tag.aside do %>
+  <div class="px-4 py-8 mx-auto max-w-screen-2xl sm:px-6 lg:px-8">
+    <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+      <div class="p-8 bg-blue-600 md:p-12 lg:px-16 lg:py-24">
+        <div class="max-w-xl mx-auto text-center">
+          <%= maglev_section.setting_tag :title, html_tag: 'h2', class: 'text-2xl font-bold text-white md:text-3xl' %>
+
+          <%= maglev_section.setting_tag :body, html_tag: 'p', class: 'hidden sm:block sm:mt-4 text-white/90' %>
+
+          <div class="mt-4 md:mt-8">
+            <%= maglev_section.setting_tag :button, class: "inline-block px-12 py-3 text-sm font-medium text-blue-500 transition bg-white border border-white rounded hover:bg-transparent hover:text-white focus:outline-none focus:ring focus:ring-yellow-400" %>
+          </div>
+        </div>
+      </div>
+
+      <div class="grid grid-cols-2 gap-4 md:grid-cols-1 lg:grid-cols-2">
+        <%= maglev_section.setting_tag :first_image, class: 'object-cover w-full h-40 sm:h-56 md:h-full' %>
+
+        <%= maglev_section.setting_tag :second_image, class: 'object-cover w-full h-40 sm:h-56 md:h-full' %>
+      </div>
+    </div>
+  </div>
+<% end %>

data/lib/generators/maglev/hyperui/install/templates/app_pro/views/themes/%theme_name%/sections/faq/faq_01.html.erb

@@ -0,0 +1,30 @@
+<%= maglev_section.wrapper_tag.div do %>
+  <div class="px-4 py-8 mx-auto max-w-screen-2xl sm:px-6 lg:px-8 space-y-4">
+    <% maglev_section.blocks.each do |maglev_block| %>
+      <%= maglev_block.wrapper_tag.details class: 'group' do %>
+        <summary
+          class="flex items-center justify-between p-4 rounded-lg cursor-pointer bg-gray-50"
+        >
+          <%= maglev_block.setting_tag :question, html_tag: 'h5', class: 'font-medium text-gray-900' %>
+          
+          <svg
+            class="flex-shrink-0 ml-1.5 w-5 h-5 transition duration-300 group-open:-rotate-180"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M19 9l-7 7-7-7"
+            />
+          </svg>
+        </summary>
+
+        <%= maglev_block.setting_tag :answer, html_tag: 'p', class: 'px-4 mt-4 leading-relaxed text-gray-700' %>
+      <% end %>
+    <% end %>
+  </div>
+<% end %>

data/lib/generators/maglev/hyperui/install/templates/app_pro/views/themes/%theme_name%/sections/faq/faq_02.html.erb

@@ -0,0 +1,30 @@
+<%= maglev_section.wrapper_tag.div do %>
+  <div class="px-4 py-8 mx-auto max-w-screen-2xl sm:px-6 lg:px-8 space-y-4">
+    <% maglev_section.blocks.each do |maglev_block| %>
+      <%= maglev_block.wrapper_tag.details class: 'p-6 border-l-4 border-green-500 bg-gray-50 group' do %>
+        <summary class="flex items-center justify-between cursor-pointer">
+          <%= maglev_block.setting_tag :question, html_tag: 'h5', class: 'text-lg font-medium text-gray-900' %>
+          
+          <span
+            class="flex-shrink-0 ml-1.5 p-1.5 text-gray-900 bg-white rounded-full sm:p-3"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="flex-shrink-0 w-5 h-5 transition duration-300 group-open:-rotate-45"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
+                clip-rule="evenodd"
+              />
+            </svg>
+          </span>
+        </summary>
+
+        <%= maglev_block.setting_tag :answer, html_tag: 'p', class: 'mt-4 leading-relaxed text-gray-700' %>
+      <% end %>
+    <% end %>
+  </div>
+<% end %>

data/lib/generators/maglev/hyperui/install/templates/app_pro/views/themes/%theme_name%/sections/faq/faq_03.html.erb

@@ -0,0 +1,49 @@
+<%= maglev_section.wrapper_tag.div class: 'bg-gray-50' do %>
+  <div class="px-4 py-8 mx-auto max-w-screen-2xl sm:px-6 lg:px-8">
+    <div
+      class="bg-white border border-gray-200 divide-y divide-gray-200 rounded-xl"
+    >
+      <% maglev_section.blocks.each do |maglev_block| %>
+        <%= maglev_block.wrapper_tag.details class: 'p-6 group' do %>
+          <summary class="flex items-center justify-between cursor-pointer">
+            <%= maglev_block.setting_tag :question, html_tag: 'h5', class: 'text-lg font-medium text-gray-900' %>
+
+            <span class="relative flex-shrink-0 ml-1.5 w-5 h-5">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="absolute inset-0 w-5 h-5 opacity-100 group-open:opacity-0"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                stroke-width="2"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"
+                />
+              </svg>
+
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="absolute inset-0 w-5 h-5 opacity-0 group-open:opacity-100"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                stroke-width="2"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"
+                />
+              </svg>
+            </span>
+          </summary>
+
+          <%= maglev_block.setting_tag :answer, html_tag: 'p', class: 'mt-4 leading-relaxed text-gray-700' %>
+        <% end %>
+      <% end %>
+    </div>
+  </div>
+<% end %>

data/lib/generators/maglev/hyperui/install/templates/app_pro/views/themes/%theme_name%/sections/feature/feature_01.html.erb

@@ -0,0 +1,27 @@
+<%= maglev_section.wrapper_tag.div class: 'text-white bg-gray-900' do %>
+  <div class="mx-auto max-w-screen-xl px-4 py-16 sm:px-6 lg:px-8">
+    <div class="max-w-xl">
+      <%= maglev_section.setting_tag :title, html_tag: 'h2', class: 'text-3xl font-bold sm:text-4xl' %>
+      
+      <%= maglev_section.setting_tag :body, html_tag: 'p', class: 'mt-4 text-gray-300' %>
+    </div>
+
+    <div
+      class="grid grid-cols-1 gap-8 mt-8 md:gap-12 md:mt-16 md:grid-cols-2 lg:grid-cols-3"
+    >
+      <% maglev_section.blocks.each do |maglev_block| %>
+        <%= maglev_block.wrapper_tag.div class: 'flex items-start' do %>
+          <span class="flex-shrink-0 h-12 w-12 flex items-center justify-center bg-gray-800 rounded-lg">
+            <%= maglev_block.setting_tag :icon, class: 'text-xl' %>
+          </span>
+
+          <div class="ml-4">
+            <%= maglev_block.setting_tag :name, html_tag: 'h3', class: 'text-lg font-bold' %>
+            
+            <%= maglev_block.setting_tag :description, html_tag: 'p', class: 'mt-1 text-sm text-gray-300' %>
+          </div>
+        <% end %>
+      <% end %>
+    </div>
+  </div>
+<% end %>

data/lib/generators/maglev/hyperui/install/templates/app_pro/views/themes/%theme_name%/sections/feature/feature_02.html.erb

@@ -0,0 +1,29 @@
+<%= maglev_section.wrapper_tag.section do %>
+  <div class="mx-auto max-w-screen-xl px-4 py-16 sm:px-6 lg:px-8">
+    <div
+      class="grid grid-cols-1 lg:grid-cols-2 gap-y-8 lg:gap-x-16 lg:items-center"
+    >
+      <div class="max-w-lg mx-auto text-center lg:text-left lg:mx-0">
+        <%= maglev_section.setting_tag :title, html_tag: 'h2', class: 'text-3xl font-bold sm:text-4xl' %>
+
+        <%= maglev_section.setting_tag :body, html_tag: 'p', class: 'mt-4 text-gray-600' %>
+        
+        <%= maglev_section.setting_tag :button, class: 'inline-flex items-center px-8 py-3 mt-8 text-white bg-indigo-600 border border-indigo-600 rounded hover:bg-transparent hover:text-indigo-600 active:text-indigo-500 focus:outline-none focus:ring text-sm font-medium' %>
+      </div>
+
+      <div class="grid grid-cols-2 gap-4 sm:grid-cols-3">
+        <% maglev_section.blocks.each do |maglev_block| %>
+          <%= maglev_block.wrapper_tag.a class: 'block p-4 border border-gray-100 shadow-sm rounded-xl focus:outline-none focus:ring hover:border-gray-200 hover:ring-1 hover:ring-gray-200', href: maglev_block.settings.link.href do %>
+            <span class="inline-block h-12 w-12 flex items-center justify-center rounded-lg bg-gray-50">
+              <%= maglev_block.setting_tag :icon, class: 'text-xl' %>
+            </span>
+
+            <%= maglev_block.setting_tag :name, html_tag: 'h6', class: 'mt-2 font-bold' %>
+            
+            <%= maglev_block.setting_tag :description, html_tag: 'p', class: 'hidden sm:mt-1 sm:text-sm sm:text-gray-600 sm:block' %>
+          <% end %>
+        <% end %>
+      </div>
+    </div>
+  </div>
+<% end %>

data/lib/generators/maglev/hyperui/install/templates/app_pro/views/themes/%theme_name%/sections/feature/feature_03.html.erb

@@ -0,0 +1,26 @@
+<%= maglev_section.wrapper_tag.section class: 'text-white bg-gray-900' do %>
+  <div class="max-w-screen-xl px-4 py-16 mx-auto sm:px-6 lg:px-8">
+    <div class="max-w-lg mx-auto text-center">
+      <%= maglev_section.setting_tag :title, html_tag: 'h2', class: 'text-3xl font-bold sm:text-4xl' %>
+
+      <%= maglev_section.setting_tag :body, html_tag: 'p', class: 'mt-4 text-gray-300' %>      
+    </div>
+
+    <div class="grid grid-cols-1 gap-8 mt-8 md:grid-cols-2 lg:grid-cols-3">
+      <% maglev_section.blocks.each do |maglev_block| %>
+        <%= maglev_block.wrapper_tag.a class: 'block p-8 transition border border-gray-800 shadow-xl rounded-xl hover:shadow-pink-500/10 hover:border-pink-500/10' do %>
+      
+          <%= maglev_block.setting_tag :icon, class: 'text-3xl text-pink-500' %>
+
+          <%= maglev_block.setting_tag :name, html_tag: 'h3', class: 'mt-4 text-xl font-bold text-white' %>
+
+          <%= maglev_block.setting_tag :description, html_tag: 'p', class: 'mt-1 text-sm text-gray-300' %>
+        <% end %>
+      <% end %>
+    </div>
+
+    <div class="mt-12 text-center">
+      <%= maglev_section.setting_tag :button, class: 'inline-flex items-center px-8 py-3 mt-8 text-white bg-pink-600 border border-pink-600 rounded hover:bg-transparent active:text-pink-500 focus:outline-none focus:ring text-sm font-medium' %>
+    </div>
+  </div>
+<% end %>

data/lib/generators/maglev/hyperui/install/templates/app_pro/views/themes/%theme_name%/sections/footer/footer_01.html.erb

@@ -0,0 +1,60 @@
+<%= maglev_section.wrapper_tag.footer class: 'bg-gray-900' do %>
+  <div class="max-w-screen-xl px-4 py-16 mx-auto sm:px-6 lg:px-8">
+    <div class="lg:flex lg:gap-8">
+      <div>
+        <%= maglev_section.setting_tag :logo, class: 'block max-h-10' %>
+      </div>
+
+      <div
+        class="grid grid-cols-2 gap-8 mt-8 lg:mt-0 lg:grid-cols-5 lg:gap-y-16"
+      >
+        <div class="col-span-2">
+          <div>
+            <%= maglev_section.setting_tag :title, html_tag: 'h2', class: 'text-2xl font-bold text-white' %>
+            
+            <%= maglev_section.setting_tag :body, html_tag: 'p', class: 'mt-6 text-gray-400' %>
+          </div>
+        </div>
+
+        <div class="col-span-2 lg:col-span-3 lg:flex lg:items-end">
+          <form class="w-full text-white">
+            <label for="email" class="sr-only">Email</label>
+
+            <div class="p-2 border sm:flex sm:items-center border-white/10">
+              <input
+                class="w-full h-12 p-3 text-sm font-medium tracking-widest placeholder-gray-400 uppercase bg-transparent border-none"
+                type="email"
+                id="email"
+                placeholder="Enter your email"
+              />
+
+              <%= maglev_section.setting_tag :button_label, html_tag: 'button', class: 'w-full h-12 px-6 py-3 mt-1 text-sm font-bold tracking-wide uppercase bg-red-700 sm:ml-4 sm:flex-shrink-0 sm:w-auto sm:mt-0', type: 'submit' %>
+            </div>
+          </form>
+        </div>
+
+        <% maglev_section.blocks.each do |maglev_block| %>
+          <%= maglev_block.wrapper_tag.div class: 'col-span-2 pt-6 border-t sm:col-span-1 border-white/10' do %>
+            <%= maglev_block.setting_tag :title, html_tag: 'p', class: 'font-bold text-white' %>
+
+            <nav class="flex flex-col mt-6 space-y-4 text-sm text-gray-300">
+              <% maglev_block.children.each do |nested_maglev_block| %>
+                <%= nested_maglev_block.wrapper_tag.span class: 'inline-block' do %>
+                  <%= nested_maglev_block.setting_tag :link %>
+                <% end %>
+              <% end %>
+            </nav>
+          <% end %>
+        <% end %>
+      </div>
+    </div>
+
+    <div class="pt-8 mt-12 border-t border-white/10">
+      <div class="grid grid-cols-1 gap-8 lg:grid-cols-2">
+        <%= maglev_section.setting_tag :copyright, html_tag: 'p', class: 'text-xs text-center text-gray-400 lg:text-left' %>
+
+        <%= maglev_section.setting_tag :quick_links, html_tag: 'nav', class: 'flex justify-center gap-4 text-xs text-gray-400 lg:justify-end' %>
+      </div>
+    </div>
+  </div>
+<% end %>

data/lib/generators/maglev/hyperui/install/templates/app_pro/views/themes/%theme_name%/sections/footer/footer_02.html.erb

@@ -0,0 +1,47 @@
+<%= maglev_section.wrapper_tag.footer class: 'bg-gray-50' do %>
+  <div class="max-w-screen-xl px-4 py-16 mx-auto space-y-12 sm:px-6 lg:px-8">
+    <div class="sm:items-center sm:justify-between sm:flex">
+      <%= maglev_section.setting_tag :logo, class: 'block max-h-10' %>
+
+      <% maglev_section.blocks.each do |maglev_block| %>
+        <% next if maglev_block.type != 'social_links_row' %>
+        <%= maglev_block.wrapper_tag.div class: 'flex gap-6 mt-8 text-gray-500 sm:mt-0' do %>
+          <% maglev_block.children.each do |nested_maglev_block| %>
+            <%= nested_maglev_block.wrapper_tag.span do %>
+              <a 
+                class="hover:opacity-75 text-2xl" 
+                href="<%= nested_maglev_block.settings.link.href %>" 
+                <% if nested_maglev_block.settings.link.open_new_window? %>target="_blank"<% end %>
+                rel="noreferrer"
+              >
+                <span class="sr-only"><%= nested_maglev_block.settings.name %></span>
+                <%= nested_maglev_block.setting_tag :icon %>
+              </a>
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+    </div>
+
+    <div
+      class="grid grid-cols-1 gap-8 pt-12 border-t border-gray-100 sm:grid-cols-2 lg:grid-cols-4"
+    >
+      <% maglev_section.blocks.each do |maglev_block| %>
+        <% next if maglev_block.type != 'column' %>
+        <%= maglev_block.wrapper_tag.div do %>
+          <%= maglev_block.setting_tag :title, html_tag: 'p', class: 'font-medium' %>
+
+          <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-500">
+            <% maglev_block.children.each do |nested_maglev_block| %>
+              <%= nested_maglev_block.wrapper_tag.span do %>
+                <%= nested_maglev_block.setting_tag :link %>
+              <% end %>
+            <% end %>
+          </nav>
+        <% end %>
+      <% end %>
+    </div>
+
+    <%= maglev_section.setting_tag :copyright, html_tag: 'p', class: 'text-xs text-gray-500' %>
+  </div>
+<% end %>

data/lib/generators/maglev/hyperui/install/templates/app_pro/views/themes/%theme_name%/sections/footer/footer_03.html.erb

@@ -0,0 +1,69 @@
+<%= maglev_section.wrapper_tag.footer class: 'text-white bg-gray-900 lg:grid lg:grid-cols-5' do %>
+  <aside class="hidden lg:relative lg:col-span-2 lg:block">
+    <%= maglev_section.setting_tag :image, class: 'absolute inset-0 object-cover w-full h-full' %>    
+  </aside>
+
+  <div class="px-4 py-16 sm:px-6 lg:px-8 lg:col-span-3">
+    <div class="grid grid-cols-1 gap-8 sm:grid-cols-2">
+      <div>
+        <p class="font-medium">
+          <span class="text-xs tracking-widest uppercase">Call</span>
+
+          <a class="block text-2xl sm:text-3xl hover:opacity-75" href="tel:<%= maglev_section.settings.phone_number %>">
+            <%= maglev_section.setting_tag :phone_number %>
+          </a>
+        </p>
+
+        <%= maglev_section.setting_tag :opening_hours, html_tag: 'p', class: 'mt-8 space-y-2 text-sm' %>
+        
+        <% maglev_section.blocks.each do |maglev_block| %>
+          <% next if maglev_block.type != 'social_links_row' %>
+          <%= maglev_block.wrapper_tag.div class: 'flex gap-3 mt-16' do %>
+            <% maglev_block.children.each do |nested_maglev_block| %>
+              <%= nested_maglev_block.wrapper_tag.span do %>
+                <a 
+                  class="w-8 h-8 border rounded-full border-white/25 hover:opacity-75 flex items-center justify-center" 
+                  href="<%= nested_maglev_block.settings.link.href %>" 
+                  <% if nested_maglev_block.settings.link.open_new_window? %>target="_blank"<% end %>
+                  rel="noreferrer"
+                >
+                  <span class="sr-only"><%= nested_maglev_block.settings.name %></span>
+                  <%= nested_maglev_block.setting_tag :icon %>
+                </a>
+              <% end %>
+            <% end %>
+          <% end %>
+        <% end %>
+      </div>
+
+      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+        <% maglev_section.blocks.each do |maglev_block| %>
+          <% next if maglev_block.type != 'column' %>
+          <%= maglev_block.wrapper_tag.div do %>
+            <%= maglev_block.setting_tag :title, html_tag: 'p', class: 'font-medium' %>
+
+            <nav class="flex flex-col mt-4 space-y-2 text-sm text-gray-300">
+              <% maglev_block.children.each do |nested_maglev_block| %>
+                <%= nested_maglev_block.wrapper_tag.span do %>
+                  <%= nested_maglev_block.setting_tag :link, class: 'hover:opacity-75' %>
+                <% end %>
+              <% end %>
+            </nav>
+          <% end %>
+        <% end %>
+      </div>
+    </div>
+
+    <div class="pt-12 mt-12 border-t border-gray-800">
+      <div
+        class="text-sm text-gray-300 sm:items-center sm:justify-between sm:flex"
+      >
+        <%= maglev_section.setting_tag :quick_links, html_tag: 'div', class: 'flex gap-3' %>
+
+        <%= maglev_section.setting_tag :copyright, html_tag: 'p', class: 'mt-4 sm:mt-0' %>
+      </div>
+
+      <%= maglev_section.setting_tag :text, html_tag: 'p', class: 'mt-8 text-xs text-gray-500' %>
+    </div>
+  </div>
+<% end %>

data/lib/generators/maglev/hyperui/install/templates/app_pro/views/themes/%theme_name%/sections/footer/footer_04.html.erb

@@ -0,0 +1,29 @@
+<%= maglev_section.wrapper_tag.footer class: 'bg-gray-100' do %>
+  <div
+    class="relative max-w-screen-xl px-4 py-16 mx-auto sm:px-6 lg:px-8 lg:pt-24"
+  >
+    <div class="lg:flex lg:items-end lg:justify-between">
+      <div>
+        <div class="flex justify-center lg:justify-start">
+          <%= maglev_section.setting_tag :logo, class: 'block max-h-14' %>
+        </div>
+
+        <%= maglev_section.setting_tag :text, html_tag: 'p', class: 'max-w-md mx-auto mt-6 leading-relaxed text-center text-gray-500 lg:text-left' %>
+      </div>
+
+      <nav class="mt-12 lg:mt-0" aria-labelledby="footer-navigation">
+        <h2 class="sr-only" id="footer-navigation">Footer navigation</h2>
+
+        <ul class="flex flex-wrap justify-center gap-6 lg:justify-end md:gap-8 lg:gap-12">
+          <% maglev_section.blocks.each do |maglev_block| %>
+            <%= maglev_block.wrapper_tag.li do %>
+              <%= maglev_block.setting_tag :link, class: 'text-gray-700 transition hover:text-gray-700/75' %>
+            <% end %>
+          <% end %>
+        </ul>
+      </nav>
+    </div>
+
+    <%= maglev_section.setting_tag :copyright, html_tag: 'p', class: 'mt-12 text-sm text-center text-gray-500 lg:text-right' %>
+  </div>
+<% end %>

data/lib/generators/maglev/hyperui/install/templates/app_pro/views/themes/%theme_name%/sections/nav/nav_01.html.erb

@@ -0,0 +1,62 @@
+<%= maglev_section.wrapper_tag.header class: 'bg-white' do %>
+  <div
+    class="flex items-center h-16 max-w-screen-xl gap-8 px-4 mx-auto sm:px-6 lg:px-8"
+  >
+    <a class="block text-teal-600" href="/">
+      <span class="sr-only">Home</span>
+      <%= maglev_section.setting_tag :logo, class: 'max-h-10' %>
+    </a>
+
+    <div class="flex items-center justify-end flex-1 md:justify-between">
+      <nav class="hidden md:block" aria-labelledby="header-navigation">
+        <h2 class="sr-only" id="header-navigation">Header navigation</h2>
+
+        <ul class="flex items-center gap-6 text-sm">
+          <% maglev_section.blocks.each do |maglev_block| %>
+            <% next if maglev_block.type != 'link_group' %>
+            <% maglev_block.children.each do |nested_maglev_block| %>
+              <%= nested_maglev_block.wrapper_tag.li do %>
+                <%= nested_maglev_block.setting_tag :link, class: 'text-gray-500 transition hover:text-gray-500/75' %>
+              <% end %>
+            <% end %>
+          <% end %>
+        </ul>
+      </nav>
+
+      <div class="flex items-center gap-4">
+        <div class="sm:gap-4 sm:flex">
+          <% maglev_section.blocks.each do |maglev_block| %>
+            <% next if maglev_block.type != 'button_group' %>
+            <% maglev_block.children.each do |nested_maglev_block| %>
+              <%= nested_maglev_block.wrapper_tag.div do %>
+                <%= nested_maglev_block.setting_tag :button, class: 'block px-5 py-2.5 text-sm font-medium text-white bg-teal-600 hover:bg-teal-700 transition rounded-md' if nested_maglev_block.settings.is_primary.true? %>
+
+                <%= nested_maglev_block.setting_tag :button, class: 'hidden sm:block px-5 py-2.5 text-sm font-medium text-teal-600 bg-gray-100 rounded-md hover:text-teal-600/75 transition' if nested_maglev_block.settings.is_primary.false? %>
+              <% end %>
+            <% end %>
+          <% end %>
+        </div>
+
+        <button
+          class="block p-2.5 text-gray-600 transition bg-gray-100 rounded md:hidden hover:text-gray-600/75"
+        >
+          <span class="sr-only">Toggle menu</span>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="w-5 h-5"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            stroke-width="2"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M4 6h16M4 12h16M4 18h16"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+  </div>
+<% end %>

data/lib/generators/maglev/hyperui/install/templates/app_pro/views/themes/%theme_name%/sections/nav/nav_02.html.erb

@@ -0,0 +1,65 @@
+<%= maglev_section.wrapper_tag.header class: 'bg-white' do %>
+  <div class="max-w-screen-xl px-4 mx-auto sm:px-6 lg:px-8">
+    <div class="flex items-center justify-between h-16">
+      <div class="md:flex md:items-center md:gap-12">
+        <a class="block text-teal-600" href="/">
+          <span class="sr-only">Home</span>
+          <%= maglev_section.setting_tag :logo, class: 'max-h-10' %>
+        </a>
+      </div>
+
+      <div class="hidden md:block">
+        <nav aria-labelledby="header-navigation">
+          <h2 class="sr-only" id="header-navigation">Header navigation</h2>
+
+          <ul class="flex items-center gap-6 text-sm">
+            <% maglev_section.blocks.each do |maglev_block| %>
+              <% next if maglev_block.type != 'link_group' %>
+              <% maglev_block.children.each do |nested_maglev_block| %>
+                <%= nested_maglev_block.wrapper_tag.li do %>
+                  <%= nested_maglev_block.setting_tag :link, class: 'text-gray-500 transition hover:text-gray-500/75' %>
+                <% end %>
+              <% end %>
+            <% end %>
+          </ul>
+        </nav>
+      </div>
+
+      <div class="flex items-center gap-4">
+        <div class="sm:gap-4 sm:flex">
+          <% maglev_section.blocks.each do |maglev_block| %>
+            <% next if maglev_block.type != 'button_group' %>
+            <% maglev_block.children.each do |nested_maglev_block| %>
+              <%= nested_maglev_block.wrapper_tag.div do %>
+                <%= nested_maglev_block.setting_tag :button, class: 'block px-5 py-2.5 text-sm font-medium text-white bg-teal-600 hover:bg-teal-700 transition rounded-md' if nested_maglev_block.settings.is_primary.true? %>
+
+                <%= nested_maglev_block.setting_tag :button, class: 'hidden sm:block px-5 py-2.5 text-sm font-medium text-teal-600 bg-gray-100 rounded-md hover:text-teal-600/75 transition' if nested_maglev_block.settings.is_primary.false? %>
+              <% end %>
+            <% end %>
+          <% end %>
+        </div>
+
+        <div class="block md:hidden">
+          <button
+            class="p-2 text-gray-600 transition bg-gray-100 rounded hover:text-gray-600/75"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="w-5 h-5"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              stroke-width="2"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M4 6h16M4 12h16M4 18h16"
+              />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+<% end %>