railsui 3.1.0

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

@@ -0,0 +1,166 @@
+<% content_for :header do %>
+  <%= render "rui/shared/admin/nav",  { header_title: "John Smith" } do %>
+    <%= link_to "Message John", "#", class:"btn btn-primary" %>
+  <% end %>
+<% end %>
+
+<div class="container mx-auto sm:my-16 my-10 px-4 grid md:grid-cols-12 md:gap-16 gap-0">
+  <aside
+    class="bg-white dark:bg-slate-800 dark:border-slate-600/50 border border-slate-300 lg:col-span-4 md:col-span-6 px-6 pt-10 rounded-lg col-span-1 md:max-w-[350px] shadow-xs shadow-slate-300/20 dark:shadow-none">
+    <div class="flex flex-col items-center justify-center mb-6">
+      <div class="relative">
+        <%= image_tag demo_avatar_url, class: "size-16 rounded-full", alt: "John Smith" %>
+        <div class="bg-green-500 rounded-full w-3 h-3 right-1 -bottom-1 absolute border-2 border-white box-content">
+        </div>
+      </div>
+
+      <h3 class="font-semibold text-slate-900 text-lg dark:text-slate-200 mt-2">John Smith</h3>
+      <p class="text-sm text-slate-400">Team lead</p>
+    </div>
+
+    <div class="flex items-center gap-4">
+      <%= link_to "#" do %>
+        <%= icon "twitter.svg", custom_path: "/railsui/social/twitter.svg", class: "fill-current size-6 text-slate-400 hover:text-primary-500" %>
+      <% end %>
+
+      <%= link_to "#" do %>
+        <%= icon "window", class: "size-6 hover:text-primary-500 text-slate-400" %>
+      <% end %>
+    </div>
+
+    <div class="my-6">
+      <h4 class="text-sm font-medium text-primary-600 dark:text-primary-400 mb-1">Bio</h4>
+      <p class="text-slate-500 leading-relaxed md:text-sm text-base dark:text-slate-400">I'm a seasoned sales
+        professional renowned for
+        delivering
+        exceptional results and building strong client
+        relationships.
+        With excellent communication skills and a strategic approach, I consistently achieves success in sales
+        campaigns, while
+        inspiring others with my dedication to growth.</p>
+    </div>
+
+    <div class="my-6">
+      <h4 class="text-sm font-medium text-primary-600 mb-1 dark:text-primary-400">Hobbies</h4>
+      <ul class="list-disc pl-4 md:text-sm text-base text-slate-500 dark:text-slate-400 space-y-1 mt-2">
+        <li>Reading, Books, Podcasts</li>
+        <li>Rugby</li>
+        <li>Family</li>
+        <li>Weightlifting</li>
+      </ul>
+    </div>
+
+    <div class="my-6">
+      <h4 class="text-sm font-medium text-primary-600 mb-1 dark:text-primary-400">Current Timezone</h4>
+      <p class="text-slate-500 dark:text-slate-400 md:text-sm text-base">CDT - Chicago (12:41 pm CDT)</p>
+    </div>
+
+    <div class="my-6">
+      <h4 class="text-sm font-medium text-primary-600 mb-1 dark:text-primary-400">Favorite food</h4>
+      <p class="text-slate-500 dark:text-slate-400 md:text-sm text-base">Tacos</p>
+    </div>
+
+    <% if respond_to?(:admin_assignments_path) %>
+      <%= link_to "View assignments", admin_assignments_path, class: "btn btn-white mb-6" %>
+    <% else %>
+      <%= link_to "View assignments", "#", class: "btn btn-white mb-6" %>
+    <% end %>
+  </aside>
+
+  <section class="lg:col-span-8 md:col-span-6 col-span-1">
+    <div class="max-w-3xl relative mb-10 sm:-mt-16">
+      <div class="h-full w-px bg-slate-300/80 absolute sm:left-2 left-4 top-0 bottom-0 z-0 dark:bg-slate-700"></div>
+
+      <ul class="pt-10 flex flex-col sm:pl-0 px-4 space-y-10">
+        <li class="flex flex-wrap items-start justify-between">
+          <div
+            class="rounded-full bg-blue-600 text-white flex items-center justify-center shrink-0 sm:w-8 h-6 sm:h-8 w-6 box-content relative top-0 border-4 border-slate-50 -left-3 dark:border-slate-900">
+            <%= icon "calendar", class: "sm:size-5 size-4" %>
+          </div>
+          <div class="flex-1 sm:flex sm:justify-between">
+            <div
+              class="sm:pt-2 prose prose-slate prose-a:text-primary-500 dark:prose-invert prose-a:hover:text-primary-600 prose-a:font-medium sm:pr-16 sm:w-auto w-full">
+              <p><%= link_to "John Smith", "#" %> created a new event <%= link_to "Product Demo for Pork Corp", "#" %> scheduled for July 5, 2023, at 10:00 AM.(Assigned to: <%= link_to "Sarah Johnson", "#" %>)</p>
+            </div>
+            <time datetime="2023-06-30T10:30" class="text-sm text-slate-500/80 dark:text-slate-400/80 pt-2 block">Jun
+              30</time>
+          </div>
+        </li>
+
+        <li class="flex flex-wrap items-start">
+          <div>
+            <%= image_tag demo_avatar_url(id: "4", variant: "women"), class: "border-4 border-slate-50 dark:border-slate-900 box-content top-0 -left-4 relative sm:size-8 size-6 rounded-full", alt: "Avatar" %>
+          </div>
+          <div class="flex-1 sm:flex sm:flex-wrap w-full sm:justify-between">
+            <div
+              class="sm:pt-2 prose prose-slate dark:prose-invert prose-a:text-primary-500 prose-a:hover:text-primary-600 prose-a:font-medium sm:pr-16 sm:w-auto w-full">
+              <p>
+                <%= link_to "Sarah Johnson", "#" %> commented on event <%= link_to "Product Demo for Pork Chop", "#" %>.
+              </p>
+            </div>
+            <time datetime="2023-06-30T10:30" class="text-sm text-slate-500/80 dark:text-slate-400/80 pt-2 block">Jun
+              30</time>
+
+            <div
+              class="bg-white border rounded shadow-xs shadow-slate-300 p-4 w-full max-w-xl mt-4 prose relative dark:bg-slate-700 dark:text-slate-100 dark:border-slate-600 dark:shadow-none">
+              <p>Wow, the Product Demo for Pork Chop sounds exciting! I can't wait to see what our team has in store for this event. Let's make sure to prepare thoroughly and deliver a top-notch presentation. If anyone needs assistance or has any ideas,feel free to reach out to me. Together, we'll make it a great success!</p>
+              <%= link_to "Post reply", "#", class: "font-semibold text-primary-600 hover:text-primary-700 absolute bottom-3 px-3 py-2 hover:bg-slate-50 rounded-lg no-underline right-4 text-sm focus:ring-4 focus:ring-primary-50 dark:text-primary-400 dark:hover:bg-slate-800 dark:hover:text-slate-300 dark:focus:ring-slate-600" %>
+            </div>
+          </div>
+        </li>
+
+        <li class="flex flex-wrap items-start justify-between">
+          <div
+            class="size-4 relative flex items-center justify-center box-border border-4 border-slate-50 rounded-full bg-slate-400/50 sm:left-px -left-[7px] dark:bg-slate-300/50 dark:border-slate-700">
+            <div class="size-[3px] flex items-center bg-slate-50 rounded-full shrink-0 dark:bg-slate-700">
+            </div>
+          </div>
+          <div class="sm:pl-6 pl-4 flex-1 sm:flex sm:justify-between -mt-2">
+            <div
+              class="prose prose-slate prose-a:text-primary-500 prose-a:hover:text-primary-600 prose-a:font-medium sm:pr-16 sm:w-auto w-full dark:prose-invert">
+              <p><%= link_to "Jennifer Thompson", "#" %> assigned the <%= link_to "Follow-up Call", "#" %> task to John Smith for
+                the
+                <%= link_to "Product Demo for Pork Chop", "#" %> event.
+              </p>
+            </div>
+            <time datetime="2023-06-29T10:30"
+              class="text-sm text-slate-500/80 dark:text-slate-400/80 block sm:pt-0 pt-2">Jun 29</time>
+          </div>
+        </li>
+
+        <li class="flex flex-wrap items-start justify-between">
+          <div
+            class="size-4 relative flex items-center justify-center box-border border-4 border-slate-50 rounded-full bg-slate-400/50 sm:left-px -left-[7px] dark:bg-slate-300/50 dark:border-slate-700">
+            <div class="size-[3px] flex items-center bg-slate-50 rounded-full shrink-0 dark:bg-slate-700">
+            </div>
+          </div>
+          <div class="sm:pl-6 pl-4 flex-1 sm:flex sm:justify-between -mt-2">
+            <div
+              class="prose prose-slate prose-a:text-primary-500 prose-a:hover:text-primary-600 prose-a:font-medium sm:pr-16 sm:w-auto w-full dark:prose-invert">
+              <p><%= link_to "Mark Davis", "#" %> updated the event <%= link_to "Sales Training Workshop", "#" %> scheduled for July 10, 2023, to include a new guest speaker.</p>
+            </div>
+            <time datetime="2023-06-28T10:30"
+              class="text-sm text-slate-500/80 dark:text-slate-400/80 block sm:pt-0 pt-2">Jun 28</time>
+          </div>
+        </li>
+
+        <li class="flex flex-wrap items-start justify-between">
+          <div
+            class="rounded-full bg-emerald-600 text-white flex items-center justify-center shrink-0 sm:w-8 sm:h-8 size-6 box-content relative top-0 border-4 border-slate-50 -left-3 dark:border-slate-900">
+            <%= icon "check", class: "sm:size-5 size-3" %>
+          </div>
+          <div class="flex-1 sm:flex sm:justify-between">
+            <div
+              class="prose prose-slate prose-a:text-primary-500 prose-a:hover:text-primary-600 prose-a:font-medium sm:pr-16 sm:w-auto w-full dark:prose-invert">
+              <p><%= link_to "Emily Carter", "#" %> completed the task <%= link_to "Lead Generation Research", "#" %> assigned by
+                <%= link_to "Mark Davis", "#" %>.
+              </p>
+            </div>
+            <time datetime="2023-06-28T10:30" class="text-sm text-slate-500/80 dark:text-slate-400/80 block">Jun
+              28</time>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </section>
+</div>

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

@@ -0,0 +1,267 @@
+<% content_for :header do %>
+  <%= render "rui/shared/admin/nav" do %>
+    <div class="flex justify-between w-full py-4">
+      <nav aria-label="breadcrumb" class="font-medium flex text-slate-100 dark:text-slate-200 text-sm flex-1">
+        <ol class="flex items-center gap-3 list-none m-0 p-0">
+          <li class="flex gap-3">
+            <%= link_to "Projects", rui_projects_path, class: "hover:underline hover:text-slate-300 dark:hover:text-slate-400" %>
+          </li>
+          <li class="flex gap-3">
+            <div class="flex items-center">
+              <span class="text-slate-500 dark:text-slate-500">/</span>
+            </div>
+            <%= link_to "Enhanced User Authentication System", rui_project_path, class: "text-primary-300 dark:text-primary-400 line-clamp-1", "aria-current": "page" %>
+          </li>
+        </ol>
+      </nav>
+      <%= link_to "#", class: "btn btn-transparent space-x-1 rounded-full text-slate-50 border-slate-100 group focus:ring-slate-700 dark:border-slate-500 dark:text-slate-200" do %>
+        <%= icon "cog-6-tooth", class: "size-5 text-slate-100 stroke-current group-hover:text-slate-800 dark:group-hover:text-slate-300 dark:text-slate-300" %>
+        <span>Settings</span>
+      <% end %>
+    </div>
+  <% end %>
+<% end %>
+
+<div class="sm:mt-16 mt-8 container mx-auto relative">
+  <div class="flex items-center -space-x-2 justify-center">
+    <%= image_tag demo_avatar_url(id: "22", variant: "men"), class: "size-12 rounded-full border-4 border-slate-50 dark:border-slate-900" %>
+
+    <%= image_tag demo_avatar_url(id: "23", variant: "men"), class: "size-12 rounded-full border-4 border-slate-50 dark:border-slate-900" %>
+
+    <%= image_tag demo_avatar_url(id: "12", variant: "women"), class: "size-12 rounded-full border-4 border-slate-50 dark:border-slate-900" %>
+
+    <%= image_tag demo_avatar_url(id: "22", variant: "women"), class: "size-12 rounded-full border-4 border-slate-50 dark:border-slate-900" %>
+
+    <%= image_tag demo_avatar_url(id: "19", variant: "men"), class: "size-12 rounded-full border-4 border-slate-50 dark:border-slate-900" %>
+  </div>
+
+  <div class="w-full text-center mt-3 px-4">
+    <h1 class="md:mt-4 mt-2 md:h2 h4">Enhanced User Authentication System</h1>
+  </div>
+</div>
+
+<div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-6xl mx-auto mt-10 px-4">
+  <!-- start project messages -->
+  <div>
+    <%= link_to rui_messages_path, class: "md:col-span-6 col-span-1 lg:col-span-3 sm:col-span-6 border border-slate-300/80 hover:border-slate-400/70 rounded-lg shadow-xs p-6 focus:ring-4 focus:ring-slate-200/50 bg-white group block max-h-[300px] overflow-hidden relative dark:bg-slate-800 dark:border-slate-700 dark:focus:ring-slate-500/50 dark:hover:border-slate-600" do %>
+      <div class="h-48 bg-gradient-to-t from-white absolute left-0 right-0 bottom-0 z-10 dark:from-slate-800"></div>
+      <div class="flex items-center justify-between pb-2">
+        <h2 class="mb-2 line-clamp-1 group-hover:text-primary-600 dark:text-slate-100 dark:group-hover:text-primary-100 h5">
+          Messages
+        </h2>
+        <%= icon "chevron-right", class: "size-5 stroke-current text-slate-500 opacity-0 group-hover:opacity-100 transition ease-in-out duration-200 group-hover:transform group-hover:translate-x-1" %>
+      </div>
+
+      <ul class="divide-y dark:divide-slate-600">
+        <li class="py-3">
+          <div class="flex items-start gap-3">
+            <%= image_tag demo_avatar_url, alt: "Avatar", class: "w-10 h-10 rounded-full border-2 border-white dark:border-slate-700" %>
+            <div>
+              <p class="font-medium">This is a title</p>
+              <p class="line-clamp-1 text-sm text-slate-600 dark:text-slate-400">Lorem ipsum dolor sit amet consectetur
+                adipisicing elit.
+                Eveniet temporibus nisi
+              </p>
+            </div>
+            <div
+                class="rounded-full size-6 flex items-center text-white bg-primary-600 font-semibold text-xs justify-center shrink-0">
+              <div>10</div>
+            </div>
+          </div>
+        </li>
+        <li class="py-3">
+          <div class="flex items-start gap-3">
+            <%= image_tag demo_avatar_url(id: "33", variant: "women"), alt: "Avatar", class: "w-10 h-10 rounded-full border-2 border-white dark:border-slate-700" %>
+            <div>
+              <p class="font-medium">This is a title</p>
+              <p class="line-clamp-1 text-sm text-slate-600 dark:text-slate-400">Lorem ipsum dolor sit amet consectetur
+                adipisicing elit.
+                Eveniet temporibus nisi
+              </p>
+            </div>
+            <div
+                class="rounded-full size-6 flex items-center text-white bg-primary-600 font-semibold text-xs justify-center shrink-0">
+              <div>2</div>
+            </div>
+          </div>
+        </li>
+        <li class="py-3">
+          <div class="flex items-start gap-3">
+            <%= image_tag demo_avatar_url(id: "35", variant: "men"), alt: "Avatar", class: "w-10 h-10 rounded-full border-2 border-white dark:border-slate-700" %>
+            <div>
+              <p class="font-medium">This is a title</p>
+              <p class="line-clamp-1 text-sm text-slate-600 dark:text-slate-400">Lorem ipsum dolor sit amet consectetur
+                adipisicing elit.
+                Eveniet temporibus nisi
+              </p>
+            </div>
+            <div
+                class="rounded-full size-6 flex items-center text-white bg-primary-600 font-semibold text-xs justify-center shrink-0">
+              <div>10</div>
+            </div>
+          </div>
+        </li>
+        <li class="py-3">
+          <div class="flex items-start gap-3">
+            <%= image_tag demo_avatar_url(id: "59", variant: "women"), class: "w-10 h-10 rounded-full border-2 border-white dark:border-slate-700", alt: "Avatar" %>
+            <div>
+              <p class="font-medium">This is a title</p>
+              <p class="line-clamp-1 text-sm text-slate-600 dark:text-slate-400">Lorem ipsum dolor sit amet consectetur
+                adipisicing elit.
+                Eveniet temporibus nisi
+              </p>
+            </div>
+            <div
+                class="rounded-full size-6 flex items-center text-white bg-primary-600 font-semibold text-xs justify-center shrink-0">
+              <div>2</div>
+            </div>
+          </div>
+        </li>
+      </ul>
+
+    <% end %>
+  </div>
+  <!-- end project messages -->
+
+  <!-- start project assignments -->
+  <div>
+    <%= link_to rui_assignments_path, class:"md:col-span-6 col-span-1 lg:col-span-3 sm:col-span-6 border border-slate-300/80 hover:border-slate-400/70 rounded-lg shadow-xs p-6 focus:ring-4 focus:ring-slate-200/50 bg-white group block max-h-[300px] overflow-hidden relative dark:bg-slate-800 dark:border-slate-700 dark:focus:ring-slate-500/50 dark:hover:border-slate-600" do %>
+      <div class="h-48 bg-gradient-to-t from-white absolute left-0 right-0 bottom-0 z-10 dark:from-slate-800"></div>
+      <div class="flex items-center justify-between pb-2">
+        <h2 class="mb-2 line-clamp-1 group-hover:text-primary-600 dark:text-slate-100 dark:group-hover:text-primary-100 h5">Assignments</h2>
+        <%= icon "chevron-right", class: "size-5 stroke-current text-slate-500 opacity-0 group-hover:opacity-100 transition ease-in-out duration-200 group-hover:transform group-hover:translate-x-1" %>
+      </div>
+      <ul class="divide-y space-y-2 pointer-events-none dark:divide-slate-600">
+        <% [
+          {title: "Develop Preliminary Concept Drawings" },
+          {title: "Create wireframe designs for homepage" },
+          {title: "Conduct market research for competitor analysis" },
+          {title: "Develop API integration plan for third-party software" },
+          {title: "Acquire the bacon" }
+        ].each do |assignment| %>
+          <li class="flex items-center gap-3 py-2">
+            <input type="checkbox" class="form-input-checkbox size-5 rounded border-slate-300" />
+            <p class="hover:underline text-base"><%= assignment[:title] %></p>
+            <div>
+              <%= image_tag demo_avatar_url, alt: "John Smith", class: "size-6 rounded-full ml-1" %>
+            </div>
+          </li>
+        <% end %>
+      </ul>
+    <% end %>
+  </div>
+  <!-- end project assignments -->
+
+  <!-- start project schedule -->
+  <div>
+    <%= link_to rui_calendar_path, class: "md:col-span-6 col-span-1 lg:col-span-3 sm:col-span-6 border border-slate-300/80 hover:border-slate-400/70 rounded-lg shadow-xs p-6 focus:ring-4 focus:ring-slate-200/50 bg-white group block max-h-[300px] overflow-hidden relative dark:bg-slate-800 dark:border-slate-700 dark:focus:ring-slate-500/50 dark:hover:border-slate-600" do %>
+      <div class="h-48 bg-gradient-to-t from-white absolute left-0 right-0 bottom-0 z-10 dark:from-slate-800"></div>
+      <div class="flex items-center justify-between pb-2">
+        <h2
+          class="mb-2 line-clamp-1 group-hover:text-primary-600 dark:text-slate-100 dark:group-hover:text-primary-100 h5">Schedule</h2>
+        <%= icon "chevron-right", class: "size-5 stroke-current text-slate-500 opacity-0 group-hover:opacity-100 transition ease-in-out duration-200 group-hover:transform group-hover:translate-x-1" %>
+      </div>
+
+      <ul class="divide-y dark:divide-slate-600">
+        <% [
+        {
+          title: "Weekly standup",
+          img_1: { id: "23", variant: "men" },
+          img_2: { id: "22", variant: "men" },
+          img_3: { id: "12", variant: "women" },
+          description: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet temporibus nisi",
+          date: "Jul 24",
+          time: "10:30 AM"
+        },
+        {
+          title: "Weekly standup",
+          img_1: { id: "23", variant: "men" },
+          img_2: { id: "22", variant: "men" },
+          img_3: { id: "12", variant: "women" },
+          description: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet temporibus nisi",
+          date: "Aug 4",
+          time: "10:30 AM"
+        },
+        {
+          title: "Weekly standup",
+          img_1: { id: "23", variant: "men" },
+          img_2: { id: "22", variant: "men" },
+          img_3: { id: "12", variant: "women" },
+          description: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet temporibus nisi",
+          date: "Aug 11",
+          time: "10:30 AM"
+        }].each do |event| %>
+          <li class="py-3">
+            <div class="flex items-start sm:space-x-10 space-x-12">
+              <div class="flex items-center -space-x-3">
+                <%= image_tag demo_avatar_url(id: event[:img_1][:id], variant: event[:img_1][:variant]), alt: "Avatar", class: "w-8 h-8 rounded-full border-2 border-white dark:border-slate-700" %>
+                <%= image_tag demo_avatar_url(id: event[:img_2][:id], variant: event[:img_2][:variant]), alt: "Avatar", class: "w-8 h-8 rounded-full border-2 border-white dark:border-slate-700" %>
+                <%= image_tag demo_avatar_url(id: event[:img_3][:id], variant: event[:img_3][:variant]), alt: "Avatar", class: "w-8 h-8 rounded-full border-2 border-white dark:border-slate-700" %>
+              </div>
+              <div>
+                <p class="font-medium"><%= event[:title] %></p>
+                <p class="line-clamp-1 text-sm text-slate-600 dark:text-slate-400"><%= event[:description] %></p>
+              </div>
+              <div class="text-sm shrink-0 text-right">
+                <time class="font-semibold"><%= event[:date] %></time>
+                <p><%= event[:time] %></p>
+              </div>
+            </div>
+          </li>
+        <% end %>
+      </ul>
+    <% end %>
+  </div>
+
+  <!-- start project chat -->
+  <div>
+    <%= link_to "#", class: "md:col-span-6 col-span-1 lg:col-span-3 sm:col-span-6 border border-slate-300/80 hover:border-slate-400/70 rounded-lg shadow-xs p-6 focus:ring-4 focus:ring-slate-200/50 bg-white group block max-h-[300px] overflow-hidden relative dark:bg-slate-800 dark:border-slate-700 dark:focus:ring-slate-500/50 dark:hover:border-slate-600" do %>
+      <div class="h-48 bg-gradient-to-t from-white absolute left-0 right-0 bottom-0 z-10 dark:from-slate-800"></div>
+      <div class="flex items-center justify-between pb-2">
+        <h2 class="mb-2 line-clamp-1 group-hover:text-primary-600 dark:text-slate-100 dark:group-hover:text-primary-100 h5">Chat</h2>
+        <%= icon "chevron-right", class: "size-5 stroke-current text-slate-500 opacity-0 group-hover:opacity-100 transition ease-in-out duration-200 group-hover:transform group-hover:translate-x-1" %>
+      </div>
+
+      <ul>
+        <li class="py-2">
+          <div class="flex items-center space-x-4">
+            <%= image_tag demo_avatar_url(id: "23", variant: "men"), alt: "Avatar", class: "w-10 h-10 rounded-full border-2 border-white dark:border-slate-700" %>
+            <div>
+              <p class="line-clamp-1 text-base text-slate-600 dark:text-slate-200">Well I'll tell you something
+              </p>
+            </div>
+          </div>
+        </li>
+        <li class="py-2">
+          <div class="flex items-center space-x-4">
+            <%= image_tag demo_avatar_url(id: "23", variant: "men"), alt: "Avatar", class: "size-10 rounded-full border-2 border-white dark:border-slate-700" %>
+            <div>
+              <p class="line-clamp-1 text-base text-slate-600 dark:text-slate-200">A lot of people go to college for seven years...</p>
+            </div>
+          </div>
+        </li>
+        <li class="py-2">
+          <div class="flex items-center space-x-4">
+            <div class="flex items-center -space-x-3">
+              <%= image_tag demo_avatar_url, alt: "Avatar", class: "w-10 h-10 rounded-full border-2 border-white dark:border-slate-700" %>
+            </div>
+            <div>
+              <p class="line-clamp-1 text-base text-slate-600 dark:text-slate-200">Yeah, they're called doctors...
+              </p>
+            </div>
+          </div>
+        </li>
+        <li class="py-2">
+          <div class="flex items-center space-x-4">
+            <%= image_tag demo_avatar_url(id: "12", variant: "women"), alt: "Avatar", class: "size-10 rounded-full border-2 border-white dark:border-slate-700" %>
+            <div>
+              <div class="w-10 h-8 rounded-xl border border-primary-300 bg-primary-50 flex items-center justify-center px-2 py-1">
+                <%= icon "ellipsis-horizontal", class: "size-6 stroke-current text-primary-500" %>
+              </div>
+            </div>
+          </div>
+        </li>
+      </ul>
+    <% end %>
+  </div>
+  <!-- end project -->

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

@@ -0,0 +1,161 @@
+<% content_for :header do%>
+  <%= render "rui/shared/admin/nav", { header_title: "Projects" } do %>
+    <%= render "rui/shared/admin/create_dropdown" %>
+  <% end %>
+<% end %>
+
+<div class="container mx-auto sm:my-16 my-10 px-4 sm:px-4">
+  <div class="flex items-center mb-6 mt-10">
+    <div class="h-px w-1/2 bg-gradient-to-l from-slate-200 dark:from-slate-600"></div>
+    <h2 class="text-base text-slate-600 font-semibold px-4 whitespace-nowrap dark:text-slate-300">Recent</h2>
+    <div class="h-px w-1/2 bg-gradient-to-r from-slate-200 dark:from-slate-600"></div>
+  </div>
+
+  <div class="grid grid-cols-1 sm:grid-cols-12 gap-4 my-4">
+    <% [
+      {
+        title: "Enhanced User Authentication System",
+        description: "Implementing a robust multi-factor authentication system with biometric integration to enhance security and user experience across all our digital platforms.",
+        img_1: { id: "22", variant: "men" },
+        img_2: { id: "23", variant: "men" },
+        img_3: { id: "12", variant: "women" },
+        img_4: { id: "22", variant: "women" },
+        img_5: { id: "19", variant: "men" },
+      },
+      {
+        title: "Automated Data Migration Tool",
+        description: "Developing a sophisticated tool to streamline the process of migrating large-scale databases, ensuring data integrity and minimizing downtime during system upgrades.",
+        img_1: { id: "22", variant: "men" },
+        img_2: { id: "23", variant: "men" },
+        img_3: { id: "11", variant: "women" },
+        img_4: { id: "21", variant: "women" },
+        img_5: { id: "13", variant: "men" },
+      },
+      {
+        title: "Real-time Data Visualization Dashboard",
+        description: "Creating an interactive dashboard that transforms complex data sets into intuitive visual representations, enabling quick insights and informed decision-making for our clients.",
+        img_1: { id: "22", variant: "men" },
+        img_2: { id: "43", variant: "men" },
+        img_3: { id: "55", variant: "women" },
+        img_4: { id: "65", variant: "women" },
+        img_5: { id: "87", variant: "men" },
+      },
+      {
+        title: "Intelligent Chatbot for Customer Support",
+        description: "Designing an AI-powered chatbot that leverages natural language processing to provide instant, accurate responses to customer inquiries, improving support efficiency and satisfaction.",
+        img_1: { id: "22", variant: "men" },
+        img_2: { id: "36", variant: "men" },
+        img_3: { id: "42", variant: "women" },
+        img_4: { id: "45", variant: "women" },
+        img_5: { id: "56", variant: "men" },
+      },
+      {
+        title: "Mobile App Performance Optimization",
+        description: "Refactoring our mobile application to enhance load times, reduce battery consumption, and improve overall user experience across various devices and network conditions.",
+        img_1: { id: "22", variant: "men" },
+        img_2: { id: "55", variant: "men" },
+        img_3: { id: "66", variant: "women" },
+        img_4: { id: "56", variant: "women" },
+        img_5: { id: "34", variant: "men" },
+      }
+    ].each do |item| %>
+      <%= link_to rui_project_path, class: "md:col-span-6 col-span-1 lg:col-span-3 sm:col-span-6 border border-slate-300/80 hover:border-slate-400/70 dark:hover:border-slate-300/40 rounded-lg shadow-xs p-4 focus:ring-4 focus:ring-slate-200/50 dark:focus:ring-slate-200/10 bg-white group dark:bg-slate-800 dark:border-slate-600" do %>
+        <h2
+          class="text-base mb-2 line-clamp-1 text-slate-800 dark:text-slate-200 leading-snug group-hover:text-primary-600 dark:group-hover:text-primary-300 font-bold"><%= item[:title] %></h2>
+        <p class="mb-4 text-sm text-slate-600 dark:text-slate-300 line-clamp-2"><%= item[:description] %></p>
+        <div class="flex items-center -space-x-2">
+          <%= image_tag demo_avatar_url(id: item[:img_1][:id], variant: item[:img_1][:variant]), alt: "Avatar", class: "size-8 rounded-full border-2 border-white dark:border-slate-500/50" %>
+
+          <%= image_tag demo_avatar_url(id: item[:img_2][:id], variant: item[:img_2][:variant]), alt: "Avatar", class: "size-8 rounded-full border-2 border-white dark:border-slate-500/50" %>
+
+          <%= image_tag demo_avatar_url(id: item[:img_3][:id], variant: item[:img_3][:variant]), alt: "Avatar", class: "size-8 rounded-full border-2 border-white dark:border-slate-500/50" %>
+
+          <%= image_tag demo_avatar_url(id: item[:img_4][:id], variant: item[:img_4][:variant]), alt: "Avatar", class: "size-8 rounded-full border-2 border-white dark:border-slate-500/50" %>
+
+          <%= image_tag demo_avatar_url(id: item[:img_5][:id], variant: item[:img_5][:variant]), alt: "Avatar", class: "size-8 rounded-full border-2 border-white dark:border-slate-500/50" %>
+        </div>
+      <% end %>
+    <% end %>
+
+  </div>
+
+  <div class="flex items-center mt-16 pb-3">
+    <div class="h-px w-1/2 bg-gradient-to-l from-slate-200 dark:from-slate-600"></div>
+    <h2 class="text-base text-slate-600 font-semibold px-4 whitespace-nowrap dark:text-slate-300">Active projects</h2>
+    <div class="h-px w-1/2 bg-gradient-to-r from-slate-200 dark:from-slate-600"></div>
+  </div>
+
+  <div class="grid grid-cols-1 sm:grid-cols-12 gap-4 my-4">
+    <% [
+      {
+        title: "Enhanced User Authentication System",
+        description: "Implement a robust multi-factor authentication system with biometric integration, enhancing security and user experience across all platforms.",
+        img_1: { id: "22", variant: "men" },
+        img_2: { id: "23", variant: "men" },
+        img_3: { id: "12", variant: "women" },
+        img_4: { id: "22", variant: "women" },
+        img_5: { id: "19", variant: "men" },
+      },
+      {
+        title: "Automated Data Migration Tool",
+        description: "Develop a powerful tool to seamlessly transfer data between different database systems, ensuring data integrity and minimizing downtime during migrations.",
+        img_1: { id: "22", variant: "men" },
+        img_2: { id: "23", variant: "men" },
+        img_3: { id: "11", variant: "women" },
+        img_4: { id: "21", variant: "women" },
+        img_5: { id: "13", variant: "men" },
+      },
+      {
+        title: "Real-time Data Visualization Dashboard",
+        description: "Create an interactive dashboard that transforms complex data into intuitive visual representations, enabling quick insights and informed decision-making for business users.",
+        img_1: { id: "22", variant: "men" },
+        img_2: { id: "43", variant: "men" },
+        img_3: { id: "55", variant: "women" },
+        img_4: { id: "65", variant: "women" },
+        img_5: { id: "87", variant: "men" },
+      },
+      {
+        title: "Intelligent Chatbot for Customer Support",
+        description: "Design an AI-powered chatbot capable of understanding context, providing accurate responses, and seamlessly escalating complex issues to human agents when necessary.",
+        img_1: { id: "22", variant: "men" },
+        img_2: { id: "36", variant: "men" },
+        img_3: { id: "42", variant: "women" },
+        img_4: { id: "45", variant: "women" },
+        img_5: { id: "56", variant: "men" },
+      },
+      {
+        title: "Mobile App Performance Optimization",
+        description: "Analyze and improve the performance of our mobile application, focusing on reducing load times, optimizing battery usage, and enhancing overall user experience across various devices.",
+        img_1: { id: "22", variant: "men" },
+        img_2: { id: "55", variant: "men" },
+        img_3: { id: "66", variant: "women" },
+        img_4: { id: "56", variant: "women" },
+        img_5: { id: "34", variant: "men" },
+      }
+    ].each do |item| %>
+
+      <%= link_to rui_project_path, class: "md:col-span-6 col-span-1 lg:col-span-3 sm:col-span-6 border border-slate-300/80 hover:border-slate-400/70 dark:hover:border-slate-300/40 rounded-lg shadow-xs p-4 focus:ring-4 focus:ring-slate-200/50 dark:focus:ring-slate-200/10 bg-white group dark:bg-slate-800 dark:border-slate-600" do %>
+        <h2
+          class="text-base mb-2 line-clamp-1 text-slate-800 dark:text-slate-200 leading-snug group-hover:text-primary-600 dark:group-hover:text-primary-300 font-bold"><%= item[:title] %></h2>
+        <p class="mb-4 text-sm text-slate-600 dark:text-slate-300 line-clamp-2"><%= item[:description] %></p>
+        <div class="flex items-center -space-x-2">
+          <%= image_tag demo_avatar_url(id: item[:img_1][:id], variant: item[:img_1][:variant]), alt: "Avatar", class: "size-8 rounded-full border-2 border-white dark:border-slate-500/50" %>
+
+          <%= image_tag demo_avatar_url(id: item[:img_2][:id], variant: item[:img_2][:variant]), alt: "Avatar", class: "size-8 rounded-full border-2 border-white dark:border-slate-500/50" %>
+
+          <%= image_tag demo_avatar_url(id: item[:img_3][:id], variant: item[:img_3][:variant]), alt: "Avatar", class: "size-8 rounded-full border-2 border-white dark:border-slate-500/50" %>
+
+          <%= image_tag demo_avatar_url(id: item[:img_4][:id], variant: item[:img_4][:variant]), alt: "Avatar", class: "size-8 rounded-full border-2 border-white dark:border-slate-500/50" %>
+
+          <%= image_tag demo_avatar_url(id: item[:img_5][:id], variant: item[:img_5][:variant]), alt: "Avatar", class: "size-8 rounded-full border-2 border-white dark:border-slate-500/50" %>
+        </div>
+      <% end %>
+    <% end %>
+  </div>
+
+  <div class="py-10 sm:flex sm:space-x-6 space-y-3 sm:space-y-0">
+    <%= link_to "View archived projects", "#", class: "text-center underline text-slate-500 text-sm sm:inline-block block" %>
+    <%= link_to "Project settings", "#", class: "text-center underline text-slate-500 text-sm sm:inline-block block" %>
+    <%= link_to "Notification settings", "#", class: "text-center underline text-slate-500 text-sm sm:inline-block block" %>
+  </div>
+</div>