3 files changed, 47 insertions, 10 deletions
diff --git a/app/views/explore/projects/_nav.html.haml b/app/views/explore/projects/_nav.html.haml
index 65b7d055843..9d7a6f1ccfb 100644
--- a/app/views/explore/projects/_nav.html.haml
+++ b/app/views/explore/projects/_nav.html.haml
@@ -1,14 +1,8 @@
 .top-area
-  %ul.nav-links.nav.nav-tabs
-    = nav_link(page: [explore_projects_path, explore_root_path]) do
-      = link_to explore_projects_path do
-        = _('All')
-    = nav_link(page: starred_explore_projects_path) do
-      = link_to starred_explore_projects_path do
-        = _('Most stars')
-    = nav_link(page: trending_explore_projects_path) do
-      = link_to trending_explore_projects_path do
-        = _('Trending')
+  = gl_tabs_nav({ class: 'gl-display-flex gl-flex-grow-1 gl-border-none'}) do
+    = gl_tab_link_to _('All'), explore_projects_path, { item_active: current_page?(explore_projects_path) || current_page?(explore_root_path) }
+    = gl_tab_link_to _('Most stars'), starred_explore_projects_path
+    = gl_tab_link_to _('Trending'), trending_explore_projects_path
 
   .nav-controls
     - unless current_user
diff --git a/app/views/explore/projects/topic.html.haml b/app/views/explore/projects/topic.html.haml
new file mode 100644
index 00000000000..aeb040ea61f
--- /dev/null
+++ b/app/views/explore/projects/topic.html.haml
@@ -0,0 +1,31 @@
+- @hide_top_links = false
+- @no_container = true
+- page_title    @topic.name, _("Topics")
+- max_topic_name_length = 50
+
+= render_dashboard_ultimate_trial(current_user)
+
+.gl-text-center.gl-bg-gray-10.gl-pb-2.gl-pt-6
+  .gl-pb-5.gl-align-items-center.gl-justify-content-center.gl-display-flex
+    .avatar-container.rect-avatar.s60.gl-flex-shrink-0
+      = topic_icon(@topic, alt: _('Topic avatar'), class: 'avatar topic-avatar s60')
+    - if @topic.name.length > max_topic_name_length
+      %h1.gl-mt-3.str-truncated.has-tooltip{ title: @topic.name }
+        = truncate(@topic.name, length: max_topic_name_length)
+    - else
+      %h1.gl-mt-3
+        = @topic.name
+  - if @topic.description.present?
+    .topic-description.gl-ml-4.gl-mr-4
+      = markdown(@topic.description)
+
+%div{ class: container_class }
+  .gl-py-5.gl-border-gray-100.gl-border-b-solid.gl-border-b-1
+    %h3.gl-m-0= _('Projects with this topic')
+  .top-area.gl-pt-2.gl-pb-2
+    .nav-controls
+      = render 'shared/projects/search_form'
+      = render 'shared/projects/dropdown'
+      = render 'filter'
+
+  = render 'projects', projects: @projects
diff --git a/app/views/explore/projects/topics.html.haml b/app/views/explore/projects/topics.html.haml
new file mode 100644
index 00000000000..228304d25b6
--- /dev/null
+++ b/app/views/explore/projects/topics.html.haml
@@ -0,0 +1,12 @@
+- @hide_top_links = true
+- page_title    _("Topics")
+- header_title  _("Topics"), topics_explore_projects_path
+
+= render_dashboard_ultimate_trial(current_user)
+
+- if current_user
+  = render 'explore/topics/head'
+- else
+  = render 'explore/head'
+
+= render partial: 'shared/topics/list'