Add sdg help page

In this page we will render a list of clickable Goals icons that will show their
targets and related local targets

Co-authored-by: Senen <senenrodero@gmail.com>

app/components/sdg/goals/help_page_component.html.erb

@@ -0,0 +1,25 @@
+<% provide(:title) { t("sdg.goals.help.title") } %>
+
+<section class="row sdg-help-content">
+  <h1><%= t("sdg.goals.help.title") %></h1>
+  <p><%= t("sdg.goals.help.description") %></p>
+  <ul class="tabs" id="help_tabs" data-deep-link="true" data-tabs>
+    <% @goals.each do |goal| %>
+      <li class="tabs-title <%= is_active?(goal) %>">
+        <%= link_to "#goal_#{goal.code}_tab" do %>
+          <% render SDG::Goals::IconComponent.new(goal) %>
+        <% end %>
+      </li>
+    <% end %>
+  </ul>
+
+  <div class="tabs-content" data-tabs-content="help_tabs">
+    <% @goals.each do |goal| %>
+      <div id="goal_<%= goal.code %>_tab" class="tabs-panel <%= is_active?(goal) %>">
+        <h2><%= goal.code_and_title %></h2>
+        <p><%= sanitize t("sdg.goals.goal_#{goal.code}.description") %></p>
+        <%= render SDG::Goals::TargetsComponent.new(goal) %>
+      </div>
+    <% end %>
+  </div>
+</section>

app/components/sdg/goals/help_page_component.rb

@@ -0,0 +1,17 @@
+class SDG::Goals::HelpPageComponent < ApplicationComponent
+  attr_reader :goals
+
+  def initialize(goals)
+    @goals = goals
+  end
+
+  def render?
+    feature?("sdg")
+  end
+
+  private
+
+    def is_active?(goal)
+      "is-active" if goal.code == 1
+    end
+end