feat: add legal pages and copyright notice

lib/atomic_web/components/legal_pages_links.ex

@@ -0,0 +1,23 @@
+defmodule AtomicWeb.Components.LegalPagesLinks do
+  @moduledoc """
+  Contains the structure for the legal pages navigation
+  """
+  use AtomicWeb, :component
+
+  def legal_pages_links(assigns) do
+    ~H"""
+    <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 px-8">
+      <.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>
+    </div>
+    """
+  end
+end

lib/atomic_web/components/sidebar.ex

@@ -4,6 +4,7 @@ defmodule AtomicWeb.Components.Sidebar do
 
   alias Phoenix.LiveView.JS
   import AtomicWeb.Components.Icon
+  import AtomicWeb.Components.LegalPagesLinks
   alias Atomic.Organizations
 
   attr :current_user, :map, required: true
@@ -64,6 +65,8 @@ 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 -->
+            <.legal_pages_links />
           </div>
         </div>
       </div>

lib/atomic_web/live/home_live/index.ex

@@ -4,6 +4,7 @@ defmodule AtomicWeb.HomeLive.Index do
 
   import AtomicWeb.Components.{Activity, Announcement, Tabs, Unauthenticated, Dropdown}
   import AtomicWeb.HomeLive.Components.{FollowSuggestions, Schedule}
+  import AtomicWeb.Components.LegalPagesLinks
 
   alias Atomic.Activities
   alias Atomic.Feed

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

@@ -108,5 +108,7 @@
         <.schedule schedule={@schedule_default} current_user={@current_user} tab="all" />
       <% end %>
     </section>
+    <!-- Legal Pages Links -->
+    <.legal_pages_links />
   </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,53 @@
+defmodule AtomicWeb.LegalTermsLive.Components.Header do
+  @moduledoc """
+  Component for Legal Pages Header.
+  """
+  use Phoenix.Component
+  use AtomicWeb, :component
+
+  @pages [
+    {"Terms of Service", "tos"},
+    {"Privacy Policy", "privacy"},
+    {"Cookie Policy", "cookies"}
+  ]
+
+  defp link_pages(current_page) do
+    Enum.map(@pages, fn {title, path} ->
+      if title == current_page do
+        {:current, title, path}
+      else
+        {:link, title, path}
+      end
+    end)
+  end
+
+  def header(assigns) do
+    ~H"""
+    <header class="max-w-[2000px] fixed flex w-full place-items-center justify-between bg-white pt-8 pr-8 pb-4 pl-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>
+        </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">
+          <%= for {type, title, path} <- link_pages(@page_name) do %>
+            <%= case type do %>
+              <% :current -> %>
+                <span class="text-lg text-zinc-400"><%= title %></span>
+              <% :link -> %>
+                <.link class="hover:text-zinc-400" navigate={"/" <> path}><%= title %></.link>
+            <% end %>
+          <% 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-7xl 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,78 @@
+<main class="px-4 w-full flex justify-center">
+  <div class="flex flex-col max-w-[2000px]">
+    <!-- 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="w-full 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>
+  </div>
+</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