Create and style redesign About Us page

Author: achen178

app/assets/images/marketing_redesign/man-learning-from-home.jpg

@@ -7,3 +7,7 @@ main {
   margin: auto;
   max-width: var(--container--medium);
 }
+
+.grid-full {
+  grid-column: 1 / -1;
+}

app/assets/stylesheets/marketing_redesign/base/_layout.css

@@ -1,9 +1,4 @@
-:where(
-  img,
-  figure,
-  picture,
-  video
-) {
+:where(img, figure, picture, video) {
   display: block;
   height: auto;
   margin: 0;

app/assets/stylesheets/marketing_redesign/base/_media.css

@@ -1,9 +1,10 @@
-section.section {
+:where(section.section) {
   align-items: center;
   display: grid;
   gap: var(--space--base);
   grid-template-columns: repeat(12, [col-start] 1fr);
   justify-content: center;
+  justify-content: center;
   padding: var(--space--large) 0;
 }
 
@@ -38,9 +39,44 @@ section.section {
 }
 
 .section-cta {
-  margin: var(--space--base);
+  margin-block: var(--space--base);
+}
+
+.about-us {
+  gap: var(--space--base) var(--space--large);
+  grid-template-columns: 1fr;
+
+  .image-crop {
+    border-radius: var(--border-radius--large);
+    height: 100%;
+    overflow: hidden;
+    width: 100%;
+
+    img {
+      height: 100%;
+      object-fit: cover;
+      object-position: 65% 25%;
+      width: 100%;
+    }
+  }
 }
 
-.test {
-  grid-column: col-start 3 / span 3;
+@media screen and (min-width: 600px) {
+  .about-us .image-crop img {
+    height: 20rem;
+  }
+}
+
+@media screen and (min-width: 998px) {
+  .about-us {
+    grid-template-columns: 3fr 2fr;
+
+    .image-crop {
+      order: 2;
+
+      img {
+        height: 100%;
+      }
+    }
+  }
 }

app/assets/stylesheets/marketing_redesign/components/_section.css

@@ -1,3 +1,19 @@
 <%= content_for(:page_title, t(".page_title")) %>
+<section class="section about-us">
+  <div class="image-crop">
+    <%= image_tag "marketing_redesign/man-learning-from-home.jpg", alt: "Man wearing a blue cap and green jacket sits at a table and uses a laptop, with a red mug in front of him in a well-lit room."%>
+  </div>
+  <div class="about-content">
+    <h1><%= t(".section_title") %></h1>
 
-Hello world
+    <p><%= t(".content_1") %></p>
+    <p><%= t(".content_2") %></p>
+    <p><%= t(".content_3") %></p>
+
+    <%= link_to(
+          t(".classic_cta"),
+          {controller: "/marketing", action: :show},
+          class: "section-cta button button--primary"
+        ) %>
+  </div>
+</section>

app/views/marketing_redesign/about/show.html.erb

@@ -283,10 +283,14 @@ en:
             patrick_cushing_quote_html:
               thoughtbot is a best-in-class organization for development and DevOps.
               <strong>They can level up your team and transform your technical culture for the better.</strong>
-
     about:
       show:
         page_title: About Us
+        section_title: About Upcase
+        classic_cta: View Upcase Classic
+        content_1: Since 2012, one way we’ve shared thoughtbot expertise is through the learning platform you find yourself on today - Upcase. We’ve helped thousands of developers level up their skills through workshops, videos, flash cards, and coding exercises.
+        content_2: In 2018, Upcase became completely free from a subscription model. Teaching and mentoring is core to our mission and a big part of what keeps us happy in our work here at thoughtbot. It felt right to make Upcase free and allow folks to share and reference it however they’d like.
+        content_3: 2025 marks the archival of the outdated content. We’re calling this Upcase Classic. Moving forward, Upcase for Teams will focus on providing customized upskilling; our talented developers work directly with your team to provide the best learning experience.
     opportunities:
       new:
         page_title: Contact Us