Create and style redesign About Us page (#2830)

* Add marketing redesign landing content and styles

* Nest CSS for readability and alphabetize

* Create and style redesign About Us page

* Fix issues based on comments

Author: achen178

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

@@ -5,5 +5,9 @@ body {
 
 main {
   margin: auto;
-  max-width: var(--container--base);
+  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

@@ -38,9 +38,44 @@
 }
 
 .section-cta {
-  margin: var(--space--base);
+  margin-block: var(--space--base);
 }
 
-.test {
-  grid-column: col-start 3 / span 3;
+.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%;
+    }
+  }
+}
+
+@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

@@ -10,12 +10,6 @@
   border-radius: var(--border-radius--base);
 }
 
-.quote {
-  grid-column: span 12;
-  order: 0;
-  text-indent: -0.65rem;
-}
-
 .author {
   align-items: center;
   background-color: var(--color--background-dark);
@@ -41,6 +35,12 @@
   width: 4.5rem;
 }
 
+.quote {
+  grid-column: span 12;
+  order: 0;
+  text-indent: -0.65rem;
+}
+
 .logo-container {
   display: flex;
   flex-direction: row;

app/assets/stylesheets/marketing_redesign/components/_testimonial.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: "Person wearing a blue cap and green jacket sits at a table and uses a laptop, with a red mug in front of them 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

@@ -22,13 +22,6 @@
         <%= t("marketing_redesign.home.show.testimonials.heading") %>
       </h2>
     </div>
-    <div class="section-content full logo-container">
-        <%= image_tag "marketing_redesign/brand-logos/moma.png", alt: "New York City Museum of Modern Art logo", class: "logo" %>
-        <%= image_tag "marketing_redesign/brand-logos/hbr.png", alt: "Harvard Business Review logo", class: "logo" %>
-        <%= image_tag "marketing_redesign/brand-logos/planned-parenthood.png", alt: "Planned Parenthood logo", class: "logo" %>
-        <%= image_tag "marketing_redesign/brand-logos/merck.png", alt: "Merck logo", class: "logo" %>
-        <%= image_tag "marketing_redesign/brand-logos/vimeo.png", alt: "Vimeo logo", class: "logo" %>
-    </div>
     <div class="quote-container full">
       <q class="quote text-xl"><%= t("marketing_redesign.home.show.testimonials.quotes.patrick_cushing_quote_html") %></q>
       <div class="author">
@@ -41,6 +34,13 @@
         </div>
       </div>
     </div>
+    <div class="section-content full logo-container">
+        <%= image_tag "marketing_redesign/brand-logos/moma.png", alt: "New York City Museum of Modern Art logo", class: "logo" %>
+        <%= image_tag "marketing_redesign/brand-logos/hbr.png", alt: "Harvard Business Review logo", class: "logo" %>
+        <%= image_tag "marketing_redesign/brand-logos/planned-parenthood.png", alt: "Planned Parenthood logo", class: "logo" %>
+        <%= image_tag "marketing_redesign/brand-logos/merck.png", alt: "Merck logo", class: "logo" %>
+        <%= image_tag "marketing_redesign/brand-logos/vimeo.png", alt: "Vimeo logo", class: "logo" %>
+    </div>
   </section>
 
   <section class="section">

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

@@ -286,10 +286,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