maglevcms-hyperui-kit 1.1.0 → 1.3.0

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 %>

data/lib/generators/maglev/hyperui/install/templates/app_pro/views/themes/%theme_name%/sections/nav/nav_03.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="flex-1 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="md:flex md:items-center md:gap-12">
+        <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>
+
+          <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>
+  </div>
+<% end %>

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

@@ -0,0 +1,65 @@
+<%= maglev_section.wrapper_tag.header class: 'border-b border-gray-100' do %> 
+  <div
+    class="flex items-center justify-between h-16 mx-auto max-w-screen-2xl sm:px-6 lg:px-8"
+  >
+    <div class="flex items-center">
+      <button type="button" class="p-2 sm:mr-4 lg:hidden">
+        <svg
+          class="w-6 h-6"
+          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="M4 6h16M4 12h16M4 18h16"
+          />
+        </svg>
+      </button>
+
+      <a href="/" class="flex">
+        <%= maglev_section.setting_tag :logo, class: 'max-h-10' %>
+      </a>
+    </div>
+
+    <div class="flex items-center justify-end flex-1">
+      <nav
+        class="hidden lg:uppercase lg:text-gray-500 lg:tracking-wide lg:font-bold lg:text-xs lg:gap-4 lg:flex"
+      >
+        <% 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.span do %>
+              <%= nested_maglev_block.setting_tag :link, class: 'block h-16 leading-[4rem] border-b-4 border-transparent hover:text-red-700 hover:border-current' %>
+            <% end %>
+          <% end %>
+        <% end %>
+      </nav>
+
+      <div class="flex items-center ml-8">
+        <div
+          class="flex items-center border-gray-100 divide-x divide-gray-100 border-x"
+        >
+          <% 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.span do %>
+                <a
+                  href="<%= nested_maglev_block.settings.button.href %>"
+                  <% if nested_maglev_block.settings.button.open_new_window? %>target="_blank"<% end %>
+                  class="flex items-center h-16 px-6 border-b-4 border-transparent hover:border-red-700"
+                >
+                  <%= nested_maglev_block.setting_tag :icon %>
+                  <span class="sr-only"><%= nested_maglev_block.settings.button.text %></span>
+                </a>
+              <% end %>
+            <% end %>
+          <% end %>
+        </div>
+      </div>
+    </div>
+  </div>
+<% end %>

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

@@ -0,0 +1,25 @@
+<% grade.times do %>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    class="w-5 h-5 text-yellow-400"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+  >
+    <path
+      d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+    />
+  </svg>
+<% end %>
+
+<% (5 - grade).times do %>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    class="w-5 h-5 text-gray-200"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+  >
+    <path
+      d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+    />
+  </svg>
+<% end %>

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

@@ -0,0 +1,39 @@
+<%= maglev_section.wrapper_tag.section do %>
+  <div class="max-w-screen-xl px-4 py-8 mx-auto sm:px-6 lg:px-8">
+    <%= maglev_section.setting_tag :title, html_tag: 'h2', class: 'text-xl font-bold sm:text-2xl' %>
+
+    <div class="flex items-center mt-4">
+      <%= maglev_section.setting_tag :grade, html_tag: 'p', class: 'text-3xl font-medium' %>
+      
+      <div class="ml-4">
+        <div class="flex -ml-1">
+          <%= render 'theme/sections/review/grades', grade: maglev_section.settings.grade.to_s.to_f.round %>
+        </div>
+
+        <p class="mt-0.5 text-xs text-gray-500">
+          Based on <%= pluralize(maglev_section.settings.number_of_reviews, 'review') %>
+        </p>
+      </div>
+    </div>
+
+    <div class="grid grid-cols-1 mt-8 lg:grid-cols-2 gap-x-16 gap-y-12">
+      <% maglev_section.blocks.each do |maglev_block| %>
+        <%= maglev_block.wrapper_tag.blockquote do %>
+          <header class="sm:items-center sm:flex">
+            <div class="flex -ml-1">
+              <%= render 'theme/sections/review/grades', grade: maglev_block.settings.grade.to_s.to_f.round %>
+            </div>
+
+            <%= maglev_block.setting_tag :highlight, html_tag: 'p', class: 'mt-2 font-medium sm:ml-4 sm:mt-0' %>
+          </header>
+
+          <%= maglev_block.setting_tag :testimonial, html_tag: 'p', class: 'mt-2 text-gray-700' %>
+          
+          <footer class="mt-4">
+            <%= maglev_block.setting_tag :person, html_tag: 'p', class: 'text-xs text-gray-500' %>
+          </footer>
+        <% end %>
+      <% end %>
+    </div>
+  </div>
+<% end %>

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

@@ -0,0 +1,21 @@
+<%= maglev_section.wrapper_tag.section class: 'bg-white' do %>
+  <div class="max-w-screen-xl px-4 py-12 mx-auto md:py-16 sm:px-6 lg:px-8">
+    <div class="max-w-3xl mx-auto text-center">
+      <%= maglev_section.setting_tag :title, html_tag: 'h2', class: 'text-3xl font-bold text-gray-900 sm:text-4xl' %>
+      
+      <%= maglev_section.setting_tag :body, html_tag: 'p', class: 'mt-4 text-gray-500 sm:text-xl' %>
+    </div>
+
+    <div class="mt-8 sm:mt-12">
+      <dl class="grid grid-cols-1 gap-4 sm:grid-cols-3">
+        <% maglev_section.blocks.each do |maglev_block| %>
+          <%= maglev_block.wrapper_tag.div class: 'flex flex-col px-4 py-8 text-center border border-gray-100 rounded-lg' do %>
+            <%= maglev_block.setting_tag :legend, html_tag: 'dt', class: 'order-last text-lg font-medium text-gray-500' %>
+
+            <%= maglev_block.setting_tag :number, html_tag: 'dd', class: 'text-4xl font-extrabold text-blue-600 md:text-5xl' %>
+          <% end %>
+        <% end %>
+      </dl>
+    </div>
+  </div>
+<% end %>