railsui 3.1.0

data/lib/generators/railsui/install/templates/themes/hound/views/rui/pages/people.html.erb

@@ -0,0 +1,253 @@
+<% content_for :header do %>
+  <%= render "rui/shared/admin/nav", { header_title: "People" } do %>
+    <%= render "rui/shared/admin/create_dropdown" %>
+  <% end %>
+<% end %>
+
+<div class="bg-white border-b dark:bg-slate-800/50 dark:border-b dark:border-slate-700 px-4">
+  <div class="container mx-auto sm:flex flex-wrap justify-between items-center">
+    <nav role="messages nav">
+      <ul
+        class="flex items-center justify-start sm:space-x-1 py-2 text-slate-600 sm:overflow-auto overflow-y-hidden scroll-smooth snap-start scrollbar-thin scrollbar-thumb-gray-200 scrollbar-track-gray-100/50 scrollbar-thumb-rounded">
+        <li class="flex justify-center items-center sm:block">
+          <%= link_to "#", class: "py-2 px-4 bg-slate-50 dark:bg-slate-900 rounded-lg transition ease-in-out duration-300 text-primary-600 dark:text-primary-400 font-medium flex items-center gap-2 dark:hover:bg-slate-900/80" do %>
+            <span>Active</span>
+            <span class="rounded bg-primary-600 text-white px-1 py-px text-xs font-semibold">228</span>
+          <% end %>
+        </li>
+        <li class="flex justify-center items-center sm:block">
+          <%= link_to "#", class: "py-2 px-4 rounded-lg transition ease-in-out duration-300 hover:bg-slate-50 hover:text-primary-600 dark:hover:text-primary-400 font-medium flex items-center gap-2 group dark:text-slate-300 dark:hover:bg-slate-900" do %>
+            <span>Inactive</span>
+            <span class="rounded bg-slate-200 text-slate-500 px-1 py-px text-xs font-semibold">5</span>
+          <% end %>
+        </li>
+      </ul>
+    </nav>
+
+    <div class="sm:flex items-center sm:space-x-4">
+      <form action="#">
+        <label for="people_sort" class="sr-only">Filter results</label>
+        <select class="form-select text-base" id="people_sort">
+          <option value="">Filter results</option>
+          <option value="1">Name</option>
+          <option value="1">Join Date</option>
+          <option value="1">Role</option>
+          <option value="1">Close sales (Highest)</option>
+          <option value="1">Close sales (Lowest)</option>
+        </select>
+      </form>
+
+      <div class="relative lg:w-auto w-full lg:mt-0 md:mt-0 mt-4 sm:mt-0 lg:mb-0 mb-4">
+        <%= icon "magnifying-glass", class: "size-5 text-slate-500/90 stroke-current absolute left-3 top-3" %>
+        <input type="search" placeholder="Search" class="form-input lg:w-[250px] pl-10 focus:shadow-inner">
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="px-4 mb-16">
+  <div class="container mx-auto rounded-lg border border-slate-300/80 shadow shadow-slate-100 dark:shadow-slate-950 mt-6 bg-white dark:bg-slate-800 dark:border-slate-600/80">
+    <ul class="divide-y divide-slate-300/80 dark:divide-slate-600">
+      <% [
+          {
+            img: { id: "32", variant: "women" },
+            name: "Jennifer Thompson",
+            username: "@jthompson",
+            date: "Jan 01, 2023",
+            role: "Sales Lead",
+            report: "John Smith",
+            sales: "$320,324.50",
+            label_class: "before:bg-red-500"
+          },
+          {
+            img: { id: "42", variant: "women" },
+            name: "Emily Wilson",
+            username: "@ewilson",
+            date: "Feb 10, 2023",
+            role: "Sales Associate",
+            report: "Michael Johnson",
+            sales: "$150,000.00",
+            label_class: "before:bg-blue-500"
+          },
+          {
+            img: { id: "46", variant: "men" },
+            name: "David Roberts",
+            username: "@droberts",
+            date: "Mar 05, 2023",
+            role: "Sales Representative",
+            report: "Sarah Davis",
+            sales: "$85,200.75",
+            label_class: "before:bg-amber-500"
+          },
+          {
+            img: { id: "16", variant: "women" },
+            name: "Samantha Reed",
+            username: "@sreed",
+            date: "Apr 22, 2023",
+            role: "Sales Lead",
+            report: "Daniel Thompson",
+            sales: "$420,500.25",
+            label_class: "before:bg-primary-500"
+          },
+          {
+            img: { id: "59", variant: "men" },
+            name: "Brian Johnson",
+            username: "@bjohnson",
+            date: "May 17, 2023",
+            role: "Sales Associate",
+            report: "Jennifer Thompson",
+            sales: "$275,800.10",
+            label_class: "before:bg-amber-500"
+          },
+          {
+            img: { id: "71", variant: "women" },
+            name: "Olivia Green",
+            username: "@ogreen",
+            date: "Jun 08, 2023",
+            role: "Sales Representative",
+            report: "Emily Wilson",
+            sales: "$95,600.50",
+            label_class: "before:bg-green-500"
+          },
+          {
+            img: { id: "71", variant: "men" },
+            name: "Robert Anderson",
+            username: "@randerson",
+            date: "Jul 14, 2023",
+            role: "Sales Lead",
+            report: "Samantha Reed",
+            sales: "$380,100.75",
+            label_class: "before:bg-blue-500"
+          },
+          {
+            img: { id: "51", variant: "women" },
+            name: "Jessica Taylor",
+            username: "@jtaylor",
+            date: "Aug 19, 2023",
+            role: "Sales Associate",
+            report: "Brian Johnson",
+            sales: "$200,000.00",
+            label_class: "before:bg-red-500"
+          },
+          {
+            img: { id: "82", variant: "men" },
+            name: "Michael Clark",
+            username: "@mclark",
+            date: "Aug 19, 2023",
+            role: "Sales Representative",
+            report: "Brian Johnson",
+            sales: "$200,000.00",
+            label_class: "before:bg-primary-500"
+          },
+          {
+            img: { id: "82", variant: "women" },
+            name: "Ashley Martinez",
+            username: "@amartinez",
+            date: "Oct 30, 2023",
+            role: "Sales Lead",
+            report: "Robert Anderson",
+            sales: "$450,700.50",
+            label_class: "before:bg-amber-500"
+          }
+        ].each do | person | %>
+        <!-- person start -->
+        <li
+          class="px-4 py-5 sm:text-base text-sm items-start grid grid-cols-2 sm:grid-cols-12 gap-3 sm:gap-0 before:content-[''] before:absolute relative before:left-2 before:h-[calc(100%-30px)] before:w-2 before:rounded-full before:bottom-1 before:top-4 pl-8 before:flex before:flex-col before:items-center before:justify-center hover:bg-slate-50 transition ease-in-out duration-200 dark:hover:bg-slate-800 <%= person[:label_class] %>">
+          <div class="flex items-center gap-3 sm:col-span-3 sm:mb-0 mb-4 col-span-2">
+            <% if respond_to?(:admin_profile_path) %>
+              <%= link_to admin_profile_path do %>
+                <%= image_tag demo_avatar_url(id: person[:img][:id], variant: person[:img][:variant]), alt: person[:name], class: "rounded-full sm:size-10 size-14" %>
+              <% end %>
+            <% else %>
+              <%= link_to "#" do %>
+                <%= image_tag demo_avatar_url(id: person[:img][:id], variant: person[:img][:variant]), alt: person[:name], class: "rounded-full sm:size-10 size-14" %>
+              <% end %>
+            <% end %>
+            <div>
+              <%= link_to person[:name], "#", class: "sm:font-medium text-slate-900 hover:text-primary-600 sm:text-base text-lg font-semibold dark:text-slate-200" %>
+              <p class="text-slate-500 text-sm"><%= person[:username] %></p>
+            </div>
+          </div>
+          <div class="sm:col-span-2 col-span-1">
+            <p><%= person[:date] %></p>
+            <p class="text-sm text-slate-500">Join date</p>
+          </div>
+          <div class="sm:col-span-2 col-span-1">
+            <p><%= person[:role] %></p>
+            <p class="text-sm text-slate-500">Role</p>
+          </div>
+          <div class="sm:col-span-2 col-span-1">
+            <p><%= person[:report] %></p>
+            <p class="text-sm text-slate-500">Report</p>
+          </div>
+          <div class="sm:col-span-2 col-span-1">
+            <p><%= person[:sales] %></p>
+            <p class="text-sm text-slate-500">Closed sales</p>
+          </div>
+          <div data-controller="railsui-dropdown" class="sm:col-span-1 relative col-span-2">
+            <div class="flex justify-end">
+              <button data-action="click->railsui-dropdown#toggle click@window->railsui-dropdown#hide"
+                class="-mt-1 block group p-2 rounded-lg focus:ring-4 focus:ring-primary-50 dark:focus:ring-slate-600/50">
+                <%= icon "cog-6-tooth", class: "size-6 stroke-current text-slate-500 group-hover:text-primary-600 dark:group-hover:text-primary-400" %>
+              </button>
+            </div>
+            <ul data-railsui-dropdown-target="menu"
+              class="hidden transition transform origin-to-right absolute right-0 top-10 bg-white rounded-lg shadow-xl shadow-slate-900/10 border border-slate-200 md:w-[200px] w-full z-50 py-2 dark:bg-slate-700 dark:shadow-slate-900/50 dark:border-slate-500/60 md:text-sm text-base font-medium text-slate-600 dark:text-slate-200"
+              data-transition-enter-active="transition ease-out duration-300"
+              data-transition-enter-from="transform opacity-0 scale-95"
+              data-transition-enter-to="transform opacity-100 scale-100"
+              data-transition-leave-active="transition ease-in duration-300"
+              data-transition-leave-from="transform opacity-100 scale-100"
+              data-transition-leave-to="transform opacity-0 scale-95">
+              <li>
+                <%= link_to "#", class: "px-4 py-[.4rem] hover:text-primary-600 dark:hover:text-primary-300 group flex items-center justify-start gap-3" do %>
+                  <%= icon "pencil-square", class: "stroke-current size-5 text-slate-500 group-hover:text-primary-600 dark:group-hover:text-primary-400" %>
+                  <span>Edit</span>
+                <% end %>
+              </li>
+              <li>
+                <%= link_to "#", class: "px-4 py-[.4rem] hover:text-primary-600 dark:hover:text-primary-300 group flex items-center justify-start gap-3" do %>
+                  <%= icon "paper-airplane", class: "stroke-current size-5 text-slate-500 group-hover:text-primary-600 dark:group-hover:text-primary-400" %>
+                  <span>Message</span>
+                <% end %>
+              </li>
+            </ul>
+          </div>
+        </li>
+        <!-- person end -->
+      <% end %>
+    </ul>
+  </div>
+
+  <nav aria-label="Page navgiation" class="text-slate-500 sm:text-sm text-base font-medium dark:text-slate-300 mt-8 container mx-auto">
+    <ul class="flex flex-wrap items-center justify-start sm:space-x-0 gap-2">
+      <div class="flex items-center justify-center sm:text-sm text-lg">
+        <li>
+          <%= link_to "1", "#", class: "py-2 px-4 border-t-2 block border-primary-500 hover:bg-primary-50/50 text-primary-600 dark:text-primary-400 dark:border-primary-400 dark:hover:bg-primary-500/30" %>
+        </li>
+        <li>
+          <%= link_to "2", "#", class: "py-2 px-4 block border-t-2 border-transparent rounded hover:bg-slate-50/50 dark:hover:bg-slate-500/30 dark:hover:text-slate-200" %>
+        </li>
+        <li>
+          <%= link_to "3", "#", class: "py-2 px-4 block border-t-2 border-transparent rounded hover:bg-slate-50/50 dark:hover:bg-slate-500/30 dark:hover:text-slate-200" %>
+        </li>
+        <li>
+          <span class="py-2 px-4 block border-t-2 border-transparent rounded pointer-events-none select-none">&hellip;</span>
+        </li>
+        <li>
+          <%= link_to "8", "#", class: "py-2 px-4 block border-t-2 border-transparent rounded hover:bg-slate-50/50 dark:hover:bg-slate-500/30 dark:hover:text-slate-200" %>
+        </li>
+        <li>
+          <%= link_to "9", "#", class: "py-2 px-4 block border-t-2 border-transparent rounded hover:bg-slate-50/50 dark:hover:bg-slate-500/30 dark:hover:text-slate-200" %>
+        </li>
+      </div>
+      <li class="flex sm:justify-end items-center">
+        <%= link_to "#", class: "flex justify-center items-center sm:gap-2 py-2 sm:px-4 px-2 rounded hover:bg-slate-50/50 group hover:text-primary-600 sm:bg-transparent bg-slate-200/50 dark:hover:bg-slate-500/30 dark:hover:text-slate-200" do %>
+          <span class="sr-only sm:not-sr-only">Next</span>
+          <%= icon "arrow-small-right", class: "sm:size-5 size-4 text-slate-600 group-hover:text-primary-500 dark:group-hover:text-slate-200 stroke-current" %>
+        <% end %>
+      </li>
+    </ul>
+  </nav>
+</div>
+</div>

data/lib/generators/railsui/install/templates/themes/hound/views/rui/pages/pricing.html.erb

@@ -0,0 +1,370 @@
+<% content_for :header do %>
+ <header class="bg-cover bg-center relative bg-no-repeat" style="background-image: url(<%= asset_url("railsui/fusion.png") %>);" data-controller="nav">
+    <div class="dark:bg-slate-900 relative">
+      <%= render "rui/shared/nav_menu" %>
+    </div>
+
+  <div class="container mx-auto px-4">
+    <div class="text-center py-20 relative z-20">
+      <p class="font-semibold text-center uppercase text-sm text-primary-600 mb-4 dark:text-primary-500">Pricing</p>
+      <h1 class="md:h1 h2 mb-4">Priced with you in mind</h1>
+      <p class="text-lg text-slate-700 dark:text-slate-200 max-w-2xl mx-auto">Choose the plan that fits your needs. Our flexible pricing options cater to businesses of all sizes, from startups to enterprise-level organizations.</p>
+    </div>
+  </div>
+</header>
+<% end %>
+
+<div class="container mx-auto px-4 pt-6">
+  <div class="grid grid-cols-1 lg:grid-cols-4 gap-10 pb-4 border-b border-slate-100  dark:border-slate-800">
+    <div class="font-semibold text-slate-700 dark:text-slate-200">Plans</div>
+    <div class="lg:block hidden font-semibold text-slate-700 dark:text-slate-200">Startup</div>
+    <div class="lg:block hidden font-semibold text-slate-700 dark:text-slate-200">Professional</div>
+    <div class="lg:block hidden font-semibold text-slate-700 dark:text-slate-200">Premium</div>
+  </div>
+
+  <div class="grid grid-cols-1 lg:grid-cols-4 gap-10 justify-between py-8">
+    <div class="lg:block hidden">
+      <p class="text-slate-700 dark:text-slate-200">Pricing</p>
+    </div>
+    <div>
+      <p class="lg:hidden block font-semibold text-slate-700 dark:text-slate-200">Startup</p>
+      <p class="font-extrabold text-slate-900 text-4xl dark:text-slate-200">$49<span class="text-sm font-normal text-slate-500 dark:text-slate-400">/mo</span>
+      </p>
+      <p class="text-slate-700 dark:text-slate-200 leading-normal my-4 text-sm">
+        Ideal for growing businesses looking to scale their operations and reach.
+      </p>
+      <%= link_to "Try Startup for free", "#", class: "btn btn-primary w-full" %>
+    </div>
+    <div>
+      <p class="lg:hidden block font-semibold text-slate-700 dark:text-slate-200">Professional</p>
+      <p class="font-extrabold text-slate-900 text-4xl dark:text-slate-200">$99<span class="text-sm font-normal text-slate-500 dark:text-slate-400">/mo</span>
+      </p>
+      <p class="text-slate-700 leading-normal my-4 dark:text-slate-300 text-sm">
+        Everything in startup plus advanced data insights and reporting capabilities.
+      </p>
+      <%= link_to "Try Professional for free", "#", class: "btn btn-secondary w-full" %>
+    </div>
+    <div>
+      <p class="lg:hidden block font-semibold text-slate-700 dark:text-slate-200">Premium</p>
+      <p class="font-extrabold text-slate-900 dark:text-slate-100 text-4xl">$199<span
+          class="text-sm font-normal text-slate-500">/mo</span>
+      </p>
+      <p class="text-slate-700 dark:text-slate-200 leading-normal my-4 text-sm">
+        Unlock all features and get dedicated support. We'll reach out to kick off the process.
+      </p>
+      <a href="#" class="btn btn-dark w-full">Try Premium for free</a>
+    </div>
+  </div>
+
+  <div class="bg-slate-100 dark:bg-slate-700/50 p-4 w-full">Features</div>
+
+  <ul class="list-none divide-y divide-slate-200 dark:divide-slate-700">
+    <li class="py-4">
+      <ul class="list-none grid grid-cols-3 lg:grid-cols-4 lg:gap-10 gap-4 items-center lg:px-4">
+        <li class="lg:col-span-1 col-span-3">
+          Advanced analytics dashboard
+        </li>
+        <li class="flex justify-center items-center">
+          <div class="flex items-center">
+            <%= icon "check", class: "text-green-500 size-5 shrink-0", variant: :solid %>
+            <span class="block lg:hidden w-full ml-2">Startup</span>
+          </div>
+        </li>
+        <li class="flex justify-center items-center">
+          <div class="flex items-center">
+            <%= icon "check", class: "size-5 shrink-0 text-green-500", variant: :solid %>
+            <span class="block lg:hidden w-full ml-2">Pro</span>
+          </div>
+        </li>
+        <li class="flex justify-center items-center">
+          <div class="flex items-center">
+            <%= icon "check", class: "size-5 shrink-0 text-green-500", variant: :solid %>
+            <span class="block lg:hidden w-full ml-2">Premium</span>
+          </div>
+        </li>
+      </ul>
+    </li>
+    <li class="py-4">
+      <ul class="list-none grid grid-cols-3 lg:grid-cols-4 lg:gap-10 gap-4 items-center lg:px-4">
+        <li class="lg:col-span-1 col-span-3">
+          Real-time data visualization
+        </li>
+        <li class="flex justify-center items-center">
+          <div class="flex items-center">
+            <%= icon "check", class: "size-5 shrink-0 text-green-500", variant: :solid %>
+            <span class="block lg:hidden w-full ml-2">Startup</span>
+          </div>
+        </li>
+        <li class="flex justify-center">
+          <div class="flex items-center">
+            <%= icon "check", class: "size-5 shrink-0 text-green-500", variant: :solid %>
+            <span class="block lg:hidden w-full ml-2">Pro</span>
+          </div>
+        </li>
+        <li class="flex justify-center">
+          <div class="flex items-center">
+            <%= icon "check", class: "size-5 shrink-0 text-green-500", variant: :solid %>
+            <span class="block lg:hidden w-full ml-2">Premium</span>
+          </div>
+        </li>
+      </ul>
+    </li>
+    <li class="py-4">
+      <ul class="list-none grid lg:grid-cols-4 grid-cols-3 lg:gap-10 gap-4 items-center lg:px-4">
+        <li class="col-span-3 lg:col-span-1">
+          Custom report generation and export options
+        </li>
+        <li class="flex justify-center">
+          <div class="flex justify-center items-center">
+            <%= icon "minus", class: "size-5 shrink-0 text-slate-400", variant: :solid %>
+            <span class="block lg:hidden w-full ml-2">Startup</span>
+          </div>
+        </li>
+        <li class="flex justify-center">
+          <div class="flex items-center justify-center">
+            <%= icon "check", class: "size-5 shrink-0 text-green-500", variant: :solid %>
+            <span class="block lg:hidden w-full ml-2">Pro</span>
+          </div>
+        </li>
+        <li class="flex justify-center">
+          <div class="flex items-center justify-center">
+            <%= icon "check", class: "size-5 shrink-0 text-green-500", variant: :solid %>
+            <span class="block lg:hidden w-full ml-2">Premium</span>
+          </div>
+        </li>
+      </ul>
+    </li>
+    <li class="py-4">
+      <ul class="list-none grid lg:grid-cols-4 grid-cols-3 lg:gap-10 gap-4 items-center lg:px-4">
+        <li class="lg:col-span-1 col-span-3">
+          Advanced user segmentation
+        </li>
+        <li class="flex justify-center">
+          <div class="flex items-center justify-center">
+            <%= icon "minus", class: "size-5 shrink-0 text-slate-400", variant: :solid %>
+            <span class="block lg:hidden w-full ml-2">Startup</span>
+          </div>
+        </li>
+        <li class="flex justify-center">
+          <div class="flex items-center justify-center">
+            <%= icon "check", class: "size-4 shrink-0 text-green-500", variant: :solid %>
+            <span class="block lg:hidden w-full ml-2">Pro</span>
+          </div>
+        </li>
+        <li class="flex justify-center">
+          <div class="flex items-center justify-center">
+            <%= icon "check", class: "size-4 shrink-0 text-green-500", variant: :solid %>
+            <span class="block lg:hidden w-full ml-2">Premium</span>
+          </div>
+        </li>
+      </ul>
+    </li>
+    <li class="py-4">
+      <ul class="list-none grid lg:grid-cols-4 grid-cols-3 lg:gap-10 gap-4 items-center lg:px-4">
+        <li class="lg:col-span-1 col-span-3">
+          AI-powered predictive analytics
+        </li>
+        <li class="flex justify-center">
+          <div class="flex justify-center items-center">
+            <%= icon "minus", class: "size-5 shrink-0 text-slate-400", variant: :solid %>
+            <span class="block lg:hidden w-full ml-2">Startup</span>
+          </div>
+        </li>
+        <li class="flex justify-center">
+          <div class="flex items-center justify-center">
+            <%= icon "minus", class: "size-5 shrink-0 text-slate-400", variant: :solid %>
+            <span class="block lg:hidden w-full ml-2">Pro</span>
+          </div>
+        </li>
+        <li class="flex justify-center">
+          <div class="flex items-center justify-center">
+            <%= icon "check", class: "size-5 shrink-0 text-green-500", variant: :solid %>
+            <span class="block lg:hidden w-full ml-2">Premium</span>
+          </div>
+        </li>
+      </ul>
+    </li>
+  </ul>
+
+  <div class="bg-slate-100 p-4 w-full dark:bg-slate-700/50">Customer support</div>
+
+  <ul class="list-none divide-y divide-slate-200 dark:divide-slate-700">
+    <li class="py-4">
+      <ul class="list-none grid lg:grid-cols-4 grid-cols-3 lg:gap-10 gap-4 items-center lg:px-4">
+        <li class="lg:col-span-1 col-span-3">
+          24/7 email support
+        </li>
+        <li class="flex justify-center">
+          <div class="flex items-center justify-center">
+            <%= icon "minus", class: "size-5 shrink-0 text-slate-400", variant: :solid %>
+            <span class="block lg:hidden w-full ml-2">Startup</span>
+          </div>
+        </li>
+        <li class="flex justify-center">
+          <div class="flex items-center justify-center">
+            <%= icon "check", class: "size-5 shrink-0 text-green-500", variant: :solid %>
+            <span class="block lg:hidden w-full ml-2">Pro</span>
+          </div>
+        </li>
+        <li class="flex justify-center">
+          <div class="flex items-center justify-center">
+            <%= icon "check", class: "size-5 shrink-0 text-green-500", variant: :solid %>
+            <span class="block lg:hidden w-full ml-2">Premium</span>
+          </div>
+        </li>
+      </ul>
+    </li>
+    <li class="py-4">
+      <ul class="lg:px-4 list-none grid lg:grid-cols-4 grid-cols-3 lg:gap-10 gap-4 items-center">
+        <li class="lg:col-span-1 col-span-3">
+          Priority phone support
+        </li>
+        <li class="flex justify-center">
+          <div class="flex items-center justify-center">
+            <%= icon "check", class: "size-5 shrink-0 text-green-500", variant: :solid %>
+            <span class="block lg:hidden w-full ml-2">Startup</span>
+          </div>
+        </li>
+        <li class="flex justify-center">
+          <div class="flex items-center justify-center">
+            <%= icon "check", class: "size-5 shrink-0 text-green-500", variant: :solid %>
+            <span class="block lg:hidden w-full ml-2">Pro</span>
+          </div>
+        </li>
+        <li class="flex justify-center">
+          <div class="flex items-center justify-center">
+            <%= icon "check", class: "size-5 shrink-0 text-green-500", variant: :solid %>
+            <span class="block lg:hidden w-full ml-2">Premium</span>
+          </div>
+        </li>
+      </ul>
+    </li>
+    <li class="py-4">
+      <ul class="lg:px-4 list-none grid lg:grid-cols-4 grid-cols-3 lg:gap-10 gap-4 items-center">
+        <li class="lg:col-span-1 col-span-3">
+          Dedicated account manager
+        </li>
+        <li class="flex justify-center">
+          <div class="flex items-center justify-center">
+            <%= icon "check", class: "size-5 shrink-0 text-green-500", variant: :solid %>
+            <span class="block lg:hidden w-full ml-2">Startup</span>
+          </div>
+        </li>
+        <li class="flex justify-center">
+          <div class="flex items-center justify-center">
+            <%= icon "check", class: "size-5 shrink-0 text-green-500", variant: :solid %>
+            <span class="block lg:hidden w-full ml-2">Pro</span>
+          </div>
+        </li>
+        <li class="flex justify-center">
+          <div class="flex items-center justify-center">
+            <%= icon "check", class: "size-5 shrink-0 text-green-500", variant: :solid %>
+            <span class="block lg:hidden w-full ml-2">Premium</span>
+          </div>
+        </li>
+      </ul>
+    </li>
+    <li class="py-4">
+      <ul class="lg:px-4 list-none grid lg:grid-cols-4 grid-cols-3 lg:gap-10 gap-4 items-center">
+        <li class="lg:col-span-1 col-span-3">
+          Custom onboarding
+        </li>
+        <li class="flex justify-center">
+          <div class="flex items-center justify-center">
+            <%= icon "check", class: "size-5 shrink-0 text-green-500", variant: :solid %>
+            <span class="block lg:hidden w-full ml-2">Startup</span>
+          </div>
+        </li>
+        <li class="flex justify-center">
+          <div class="flex items-center justify-center">
+            <%= icon "check", class: "size-4 shrink-0 text-green-500", variant: :solid %>
+            <span class="block lg:hidden w-full ml-2">Pro</span>
+          </div>
+        </li>
+        <li class="flex justify-center">
+          <div class="flex items-center justify-center">
+            <%= icon "check", class: "size-5 shrink-0 text-green-500", variant: :solid %>
+            <span class="block lg:hidden w-full ml-2">Premium</span>
+          </div>
+        </li>
+      </ul>
+    </li>
+    <li class="py-4">
+      <ul class="lg:px-4 list-none grid lg:grid-cols-4 grid-cols-3 lg:gap-10 gap-4 items-center">
+        <li class="lg:col-span-1 col-span-3">
+          24/7 phone support
+        </li>
+        <li class="flex justify-center">
+          <div class="flex items-center justify-center">
+            <%= icon "minus", class: "size-5 shrink-0 text-slate-400", variant: :solid %>
+            <span class="block lg:hidden w-full ml-2">Startup</span>
+          </div>
+        </li>
+        <li class="flex justify-center">
+          <div class="flex items-center justify-center">
+            <%= icon "minus", class: "size-5 shrink-0 text-slate-400", variant: :solid %>
+            <span class="block lg:hidden w-full ml-2">Pro</span>
+          </div>
+        </li>
+        <li class="flex justify-center">
+          <div class="flex items-center justify-center">
+            <%= icon "check", class: "size-5 shrink-0 text-green-500", variant: :solid %>
+            <span class="block lg:hidden w-full ml-2">Premium</span>
+          </div>
+        </li>
+      </ul>
+    </li>
+  </ul>
+
+  <ul class="list-none hidden lg:grid grid-cols-1 lg:grid-cols-4 lg:gap-10 gap-4 items-center pt-6 mb-6">
+    <li></li>
+    <li>
+      <%= link_to "Try Startup for free", "#", class: "btn btn-primary w-full" %>
+    </li>
+    <li>
+      <%= link_to "Try Professional for free", "#", class: "btn btn-secondary w-full" %>
+    </li>
+    <li>
+      <%= link_to "Try Premium for free", "#", class: "btn btn-dark w-full" %>
+    </li>
+  </ul>
+</div>
+
+<div class="container mx-auto px-4 my-24">
+
+  <div class="max-w-2xl mx-auto mt-6">
+    <h2 class="h3">FAQs</h2>
+    <div class="my-6">
+      <h3 class="mb-3 h6">What payment methods do you accept?</h3>
+      <div class="prose prose-primary dark:prose-invert">
+        <p>We accept all major credit cards, including Visa, MasterCard, American Express, and Discover. We also support payments through PayPal and bank transfers for annual subscriptions. If you have any specific payment requirements, please don't hesitate to contact our support team.</p>
+      </div>
+    </div>
+
+    <div class="my-6">
+      <h3 class="mb-3 h6">Can I upgrade or downgrade my plan at any time?</h3>
+      <div class="prose prose-primary dark:prose-invert">
+        <p>Yes, you can upgrade or downgrade your plan at any time. When you upgrade, the new features will be immediately available, and we'll prorate the cost for the remainder of your billing cycle. If you downgrade, the changes will take effect at the start of your next billing cycle.</p>
+
+        <p>Keep in mind that downgrading may result in the loss of certain features or reduced usage limits. We recommend reviewing the plan details carefully before making any changes to ensure it meets your needs.</p>
+      </div>
+    </div>
+
+    <div class="my-6">
+      <h3 class="mb-3 h6">Is there a free trial available?</h3>
+      <div class="prose prose-primary dark:prose-invert">
+        <p>Yes, we offer a 14-day free trial for all our plans. During this period, you'll have full access to all the features included in your chosen plan. No credit card is required to start the trial, and you can cancel at any time before the trial period ends without any charges.</p>
+
+        <p>If you decide to continue using our service after the trial, you can easily upgrade to a paid plan. Your data and settings will be preserved, ensuring a smooth transition from the trial to a full subscription.</p>
+      </div>
+    </div>
+    <div class="my-6">
+      <h3 class="mb-3 h6">What kind of customer support do you provide?</h3>
+      <div class="prose prose-primary dark:prose-invert">
+        <p>We offer comprehensive customer support to ensure you have the best experience with our product. Our support channels include email, live chat, and phone support during business hours. Additionally, we have an extensive knowledge base and FAQ section on our website, which covers most common questions and issues. For enterprise customers, we also provide dedicated account managers for personalized assistance.</p>
+      </div>
+    </div>
+  </div>
+</div>
+
+<%= render "rui/shared/footer" %>