Merge pull request #2650 from codecrafters-io/pk-branch-1

refactor: improve layout and styling of concept page

Author: rohitpaulk

app/components/concept-page/content.hbs

@@ -19,7 +19,7 @@
 
   <div class="container mx-auto lg:max-w-screen-lg px-3 md:px-6">
     <div class="flex flex-col-reverse items-stretch md:flex-row">
-      <div class="md:pr-8 pt-10 pb-[75vh] min-w-0 flex-grow">
+      <div class="md:pr-8 pt-6 md:pt-10 pb-[75vh] min-w-0 flex-grow">
         <Concept @concept={{@concept}} @latestConceptEngagement={{@latestConceptEngagement}} />
 
         {{#animated-if this.hasCompletedConcept}}

app/components/concept-page/header.hbs

@@ -1,51 +1,45 @@
-{{! @glint-nocheck: not typesafe yet }}
-<div class="py-10 md:py-20 border-b code-walkthrough-header-background">
+<div class="py-5 md:py-10 border-b code-walkthrough-header-background">
   <div class="container mx-auto lg:max-w-screen-lg px-3 md:px-6">
-    <div class="flex items-center justify-between">
-      <div>
-        <div class="text-gray-400 uppercase text-xs font-bold tracking-wider mb-2">
-          CONCEPT
-        </div>
-        <h1 class="text-gray-800 text-2xl md:text-5xl font-bold mb-4">
-          {{@concept.title}}
-        </h1>
-        <div class="text-gray-600 max-w-xl leading-relaxed mb-4">
-          {{markdown-to-html @concept.descriptionMarkdown}}
-        </div>
-        <a
-          href={{or @concept.author.githubProfileUrl "https://github.com/rohitpaulk"}}
-          class="inline-flex gap-x-2 items-center"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <img
-            alt="avatar"
-            src={{or @concept.author.avatarUrl "https://github.com/rohitpaulk.png"}}
-            class="w-12 h-12 filter drop-shadow-sm ring-1 ring-white rounded-full shadow brightness-110"
-          />
-          <div>
-            <div class="text-gray-700 text-xs font-bold mb-0.5">
-              {{or @concept.author.username "Paul Kuruvilla"}}
-            </div>
-            <div class="text-gray-500 text-xs">
-              {{#if @concept.author}}
-                Concept Author
-              {{else}}
-                CTO, CodeCrafters
-              {{/if}}
-            </div>
-          </div>
-        </a>
+    <div class="flex flex-col items-start">
+      <div class="text-gray-400 uppercase text-xs font-bold tracking-wider mb-1 md:mb-1.5">
+        CONCEPT
       </div>
-      <div class="self-start">
-        <div class="w-40 ml-4 hidden md:block">
-          {{!-- <img alt="Walkthrough" src={{@codeWalkthrough.logoURL}} /> --}}
-        </div>
+      <h1 class="text-gray-800 text-xl md:text-4xl font-bold mb-1 md:mb-2">
+        {{@concept.title}}
+      </h1>
+      <div class="text-gray-600 max-w-xl leading-relaxed text-sm md:text-base mb-2 md:mb-4">
+        {{markdown-to-html @concept.descriptionMarkdown}}
       </div>
-    </div>
+      <a
+        href={{or @concept.author.githubProfileUrl "https://github.com/rohitpaulk"}}
+        class="inline-flex gap-x-2 items-center"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <img
+          alt="avatar"
+          src={{or @concept.author.avatarUrl "https://github.com/rohitpaulk.png"}}
+          class="w-12 h-12 filter drop-shadow-sm ring-1 ring-white rounded-full shadow brightness-110"
+        />
+        <div>
+          <div class="text-gray-700 text-xs font-bold mb-0.5">
+            {{or @concept.author.username "Paul Kuruvilla"}}
+          </div>
+          <div class="text-gray-500 text-xs">
+            {{#if @concept.author}}
+              Concept Author
+            {{else}}
+              CTO, CodeCrafters
+            {{/if}}
+          </div>
+        </div>
+      </a>
 
-    {{#if (or (current-user-is-concept-author @concept) (current-user-is-staff))}}
-      <TertiaryLinkButton @size="small" @route="concept-admin" class="mt-4" target="_blank">Edit Concept</TertiaryLinkButton>
-    {{/if}}
+      {{#if (or (current-user-is-concept-author @concept) (current-user-is-staff))}}
+        <div class="mt-4">
+          <TertiaryLinkButton @size="small" @route="concept-admin" target="_blank">Edit Concept</TertiaryLinkButton>
+        </div>
+      {{/if}}
+    </div>
   </div>
 </div>