feat: add legal pages and copyright notice

lib/atomic_web/components/sidebar.ex

@@ -23,6 +23,8 @@ defmodule AtomicWeb.Components.Sidebar do
     </div>
     <!-- Navigation -->
     <.navigation current_user={@current_user} current_organization={@current_organization} current_page={@current_page} is_authenticated={@is_authenticated} />
+    <!-- Legal pages and copyright notice -->
+    <.legal_pages />
     """
   end
 
@@ -64,6 +66,19 @@ defmodule AtomicWeb.Components.Sidebar do
                 <.live_component id="mobile-organizations" module={AtomicWeb.Components.Organizations} current_user={@current_user} current_organization={@current_organization} organizations={@organizations} />
               <% end %>
             </div>
+            <!-- Legal Pages Links -->
+            <div class="flex-colunm group mt-2 mb-4 flex w-full flex-wrap place-items-center justify-center gap-x-6 gap-y-1">
+              <.link navigate={~p"/tos"} class="shrink-0 select-none">
+                <p class="text-xs font-semibold text-zinc-400">Terms of Service</p>
+              </.link>
+              <.link navigate={~p"/privacy"} class="shrink-0 select-none">
+                <p class="text-xs font-semibold text-zinc-400">Privacy Policy</p>
+              </.link>
+              <.link navigate={~p"/cookies"} class="shrink-0 select-none">
+                <p class="text-xs font-semibold text-zinc-400">Cookie Policy</p>
+              </.link>
+              <span class="flex text-xs font-semibold text-zinc-400">&#169; 2024 CeSIUM</span>
+            </div>
           </div>
         </div>
       </div>
@@ -146,6 +161,23 @@ defmodule AtomicWeb.Components.Sidebar do
     """
   end
 
+  defp legal_pages(assigns) do
+    ~H"""
+    <div class="group mt-2 flex w-full shrink-0 flex-wrap gap-x-2 gap-y-1">
+      <.link navigate={~p"/tos"} class="shrink-0 select-none">
+        <p class="text-xs font-semibold text-zinc-400 hover:text-zinc-500">Terms of Service</p>
+      </.link>
+      <.link navigate={~p"/privacy"} class="shrink-0 select-none">
+        <p class="text-xs font-semibold text-zinc-400 hover:text-zinc-500">Privacy Policy</p>
+      </.link>
+      <.link navigate={~p"/cookies"} class="shrink-0 select-none">
+        <p class="text-xs font-semibold text-zinc-400 hover:text-zinc-500">Cookie Policy</p>
+      </.link>
+      <span class="flex select-none text-xs font-semibold text-zinc-400">&#169; 2024 CeSIUM</span>
+    </div>
+    """
+  end
+
   defp dropdown_items(nil), do: []
   defp dropdown_items(current_user), do: authenticated_dropdown_items(current_user)
 

lib/atomic_web/live/home_live/index.html.heex

@@ -108,5 +108,18 @@
         <.schedule schedule={@schedule_default} current_user={@current_user} tab="all" />
       <% end %>
     </section>
+    <!-- Legal Pages Links -->
+    <section class="w-full flex flex-wrap justify-center gap-y-1 gap-x-6 group px-2 mb-4 mt-2">
+      <.link navigate={~p"/tos"} class="shrink-0 select-none">
+        <p class="text-xs font-semibold text-zinc-400 hover:underline">Terms of Service</p>
+      </.link>
+      <.link navigate={~p"/privacy"} class="shrink-0 select-none">
+        <p class="text-xs font-semibold text-zinc-400 hover:underline">Privacy Policy</p>
+      </.link>
+      <.link navigate={~p"/cookies"} class="shrink-0 select-none">
+        <p class="text-xs font-semibold text-zinc-400 hover:underline">Cookie Policy</p>
+      </.link>
+      <span class="flex text-xs font-semibold text-zinc-400">&#169; 2024 CeSIUM</span>
+    </section>
   </div>
 </div>

lib/atomic_web/live/legal_terms_live/components/black_bar.ex

@@ -0,0 +1,17 @@
+defmodule AtomicWeb.LegalTermsLive.Components.BlackBar do
+  @moduledoc """
+  Component for Legal Pages Black Bar.
+  """
+  use Phoenix.Component
+  use AtomicWeb, :component
+
+  def black_bar(assigns) do
+    ~H"""
+    <section class="flex justify-center bg-zinc-800 p-10 font-semibold text-white">
+      <p class="flex w-full justify-center md:w-2/3">
+        Lorem ipsum dolor sit amet.
+      </p>
+    </section>
+    """
+  end
+end

lib/atomic_web/live/legal_terms_live/components/header.ex

@@ -0,0 +1,43 @@
+defmodule AtomicWeb.LegalTermsLive.Components.Header do
+  @moduledoc """
+  Component for Legal Pages Header.
+  """
+  use Phoenix.Component
+  use AtomicWeb, :component
+
+  def header(assigns) do
+    ~H"""
+    <header class="fixed flex w-full place-items-center justify-between bg-white px-8 pt-8 pb-4">
+      <div class="flex place-items-center gap-x-6 md:gap-x-12 lg:pl-12">
+        <div class="flex place-items-center gap-x-4">
+          <!-- Atomic Logo -->
+          <.link navigate={~p"/"}>
+            <img src={~p"/images/atomic.svg"} class="h-14 w-auto" />
+          </.link>
+          <!-- Section Name -->
+          <p class="hidden select-none text-2xl font-semibold text-zinc-400 sm:block"><%= @page_name %></p>
+        </div>
+        <div class="flex hidden place-items-center gap-x-2 text-sm font-semibold text-zinc-300 sm:block sm:gap-x-4 sm:space-x-2 md:space-x-4">
+          <%= if @page_name == "Terms of Service" do %>
+            <.link class="hover:text-zinc-400" navigate={~p"/privacy"}>Privacy Policy</.link>
+            <.link class="hover:text-zinc-400" navigate={~p"/cookies"}>Cookie Policy</.link>
+          <% end %>
+          <%= if @page_name == "Privacy Policy" do %>
+            <.link class="hover:text-zinc-400" navigate={~p"/tos"}>Terms of Service</.link>
+            <.link class="hover:text-zinc-400" navigate={~p"/cookies"}>Cookie Policy</.link>
+          <% end %>
+          <%= if @page_name == "Cookie Policy" do %>
+            <.link class="hover:text-zinc-400" navigate={~p"/tos"}>Terms of Service</.link>
+            <.link class="hover:text-zinc-400" navigate={~p"/privacy"}>Privacy Policy</.link>
+          <% end %>
+        </div>
+      </div>
+      <!-- Link to Home (hidden on mobile) -->
+      <div class="flex place-items-center lg:pr-12">
+        <.link class="atomic-button atomic-button--white atomic-button--md hidden sm:block" navigate={~p"/"}>Back home</.link>
+        <.link class="atomic-button atomic-button--md hero-home block text-zinc-400 sm:hidden" navigate={~p"/"}></.link>
+      </div>
+    </header>
+    """
+  end
+end

lib/atomic_web/live/legal_terms_live/components/main_title.ex

@@ -0,0 +1,15 @@
+defmodule AtomicWeb.LegalTermsLive.Components.MainTitle do
+  @moduledoc """
+  Component for Legal Pages Main Title.
+  """
+  use Phoenix.Component
+  use AtomicWeb, :component
+
+  def main_title(assigns) do
+    ~H"""
+    <section class="align-center pt-138 flex h-fit place-items-center px-4 py-40 xl:px-12">
+      <span class="w-86 text-7xl font-semibold text-zinc-800 sm:text-9xl lg:w-8/12 2xl:w-2/5"><%= @page_title %></span>
+    </section>
+    """
+  end
+end

lib/atomic_web/live/legal_terms_live/cookies_live/show.ex

@@ -0,0 +1,18 @@
+defmodule AtomicWeb.CookiesLive.Show do
+  use AtomicWeb, :live_view
+
+  import AtomicWeb.LegalTermsLive.Components.{Header, MainTitle, BlackBar}
+
+  @impl true
+  def mount(_params, _session, socket) do
+    {:ok, socket, layout: false}
+  end
+
+  @impl true
+  def handle_params(_params, _, socket) do
+    {:noreply,
+     socket
+     |> assign(:current_page, :cookies)
+     |> assign(:page_title, gettext("Cookie Policy"))}
+  end
+end

lib/atomic_web/live/legal_terms_live/cookies_live/show.html.heex

@@ -0,0 +1,76 @@
+<main class="px-4">
+  <!-- Header -->
+  <.header page_name="Cookie Policy" />
+  <!-- Main title -->
+  <.main_title page_title="Cookie Policy" />
+  <!-- Black container -->
+  <.black_bar black_bar_text="Lorem ipsum sit dor amet" />
+  <!-- Content Section -->
+  <section class="px-4 sm:px-8 md:px-36 2xl:px-96 pt-16">
+    <h2 class="text-2xl sm:text-4xl font-semibold mb-8">How We Use Cookies</h2>
+    <p class="text-md sm:text-lg">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic nesciunt fuga sint inventore laudantium, et quas cum at ad blanditiis magnam suscipit assumenda enim nemo quod qui animi provident eum!</p>
+    <br />
+    <ul class="list-disc mx-6 mb-8">
+      <li class="mb-4 text-md sm:text-lg text-zinc-900">Jonas ipsum dolor sit amet, consectetur Jonas elit.</li>
+      <li class="mb-4 text-md sm:text-lg text-zinc-900">Vivamus Jonas tincidunt, Jonas feugiat sapien Jonas, accumsan Jonas ligula erat Jonas.</li>
+      <li class="mb-4 text-md sm:text-lg text-zinc-900">Fusce Jonas fermentum Jonas ornare.</li>
+      <li class="mb-4 text-md sm:text-lg text-zinc-900">Curabitur Jonas vel urna Jonas pharetra Jonas semper.</li>
+      <li class="mb-4 text-md sm:text-lg text-zinc-900">Quisque Jonas purus nisl, aliquet Jonas varius a Jonas dictum a Jonas tempus.</li>
+      <li class="mb-4 text-md sm:text-lg text-zinc-900">Pellentesque habitant morbi Jonas tristique senectus Jonas netus Jonas malesuada fames ac turpis Jonas.</li>
+      <li class="mb-4 text-md sm:text-lg text-zinc-900">Proin Jonas scelerisque nunc Jonas sodales.</li>
+      <li class="mb-4 text-md sm:text-lg text-zinc-900">Sed Jonas dapibus risus vel Jonas porta, non Jonas interdum nisl.</li>
+    </ul>
+    <p class="text-md sm:text-lg">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic nesciunt fuga sint inventore laudantium, et quas cum at ad blanditiis magnam suscipit assumenda enim nemo quod qui animi provident eum!</p>
+
+    <div class="border my-8"></div>
+
+    <h2 class="text-2xl sm:text-4xl font-semibold mb-8">What are cookies, pixels, and local storage?</h2>
+    <p class="text-md sm:text-lg">
+      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic nesciunt fuga sint inventore laudantium, et quas cum at ad blanditiis magnam suscipit assumenda enim nemo quod qui animi provident eum! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Culpa accusamus facilis, animi saepe autem et vel, amet explicabo, cupiditate pariatur doloribus odit voluptates ad nisi at expedita corporis qui sunt.
+    </p>
+    <br />
+    <p class="text-md sm:text-lg">
+      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic nesciunt fuga sint inventore laudantium, et quas cum at ad blanditiis magnam suscipit assumenda enim nemo quod qui animi provident eum! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Culpa accusamus facilis, animi saepe autem et vel, amet explicabo, cupiditate pariatur doloribus odit voluptates ad nisi at expedita corporis qui sunt.
+    </p>
+    <br />
+    <p class="text-md sm:text-lg">
+      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic nesciunt fuga sint inventore laudantium, et quas cum at ad blanditiis magnam suscipit assumenda enim nemo quod qui animi provident eum! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Culpa accusamus facilis, animi saepe autem et vel, amet explicabo, cupiditate pariatur doloribus odit voluptates ad nisi at expedita corporis qui sunt.
+    </p>
+
+    <div class="border my-8"></div>
+
+    <h2 class="text-2xl sm:text-4xl font-semibold mb-8">Why do our services use these technologies?</h2>
+    <p class="text-md sm:text-lg">
+      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic nesciunt fuga sint inventore laudantium, et quas cum at ad blanditiis magnam suscipit assumenda enim nemo quod qui animi provident eum! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Culpa accusamus facilis, animi saepe autem et vel, amet explicabo, cupiditate pariatur doloribus odit voluptates ad nisi at expedita corporis qui sunt.
+    </p>
+
+    <div class="border my-8"></div>
+
+    <ul class="list-disc mx-6 mb-8">
+      <li class="mb-4 text-md sm:text-lg text-zinc-900">Jonas ipsum dolor sit amet, consectetur Jonas elit.</li>
+      <li class="mb-4 text-md sm:text-lg text-zinc-900">Vivamus Jonas tincidunt, Jonas feugiat sapien Jonas, accumsan Jonas ligula erat Jonas.</li>
+      <li class="mb-4 text-md sm:text-lg text-zinc-900">Fusce Jonas fermentum Jonas ornare.</li>
+      <li class="mb-4 text-md sm:text-lg text-zinc-900">Curabitur Jonas vel urna Jonas pharetra Jonas semper.</li>
+      <li class="mb-4 text-md sm:text-lg text-zinc-900">Quisque Jonas purus nisl, aliquet Jonas varius a Jonas dictum a Jonas tempus.</li>
+      <li class="mb-4 text-md sm:text-lg text-zinc-900">Pellentesque habitant morbi Jonas tristique senectus Jonas netus Jonas malesuada fames ac turpis Jonas.</li>
+      <li class="mb-4 text-md sm:text-lg text-zinc-900">Proin Jonas scelerisque nunc Jonas sodales.</li>
+      <li class="mb-4 text-md sm:text-lg text-zinc-900">Sed Jonas dapibus risus vel Jonas porta, non Jonas interdum nisl.</li>
+    </ul>
+
+    <div class="border my-8"></div>
+
+    <h2 class="text-2xl sm:text-4xl font-semibold mb-8">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</h2>
+    <p class="text-md sm:text-lg">
+      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic nesciunt fuga sint inventore laudantium, et quas cum at ad blanditiis magnam suscipit assumenda enim nemo quod qui animi provident eum! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Culpa accusamus facilis, animi saepe autem et vel, amet explicabo, cupiditate pariatur doloribus odit voluptates ad nisi at expedita corporis qui sunt. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, quisquam? Ex harum aliquam dolores est asperiores mollitia, similique magni illum ea repellendus doloribus consequuntur sit distinctio sed dignissimos fuga placeat!
+    </p>
+
+    <div class="border my-8"></div>
+
+    <h2 class="text-2xl sm:text-4xl font-semibold mb-8">Jonas Johanes Johnson</h2>
+    <p class="text-md sm:text-lg">
+      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic nesciunt fuga sint inventore laudantium, et quas cum at ad blanditiis magnam suscipit assumenda enim nemo quod qui animi provident eum! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Culpa accusamus facilis, animi saepe autem et vel, amet explicabo, cupiditate pariatur doloribus odit voluptates ad nisi at expedita corporis qui sunt.
+    </p>
+
+    <div class="border my-8"></div>
+  </section>
+</main>

lib/atomic_web/live/legal_terms_live/privacy_live/show.ex

@@ -0,0 +1,18 @@
+defmodule AtomicWeb.PrivacyLive.Show do
+  use AtomicWeb, :live_view
+
+  import AtomicWeb.LegalTermsLive.Components.{Header, MainTitle, BlackBar}
+
+  @impl true
+  def mount(_params, _session, socket) do
+    {:ok, socket, layout: false}
+  end
+
+  @impl true
+  def handle_params(_params, _, socket) do
+    {:noreply,
+     socket
+     |> assign(:current_page, :privacy)
+     |> assign(:page_title, gettext("Privacy Policy"))}
+  end
+end