Update content

Author: adamwathan

src/app/course/page.tsx

@@ -31,7 +31,7 @@ export default async function Course() {
           <GridContainer>
             <p className="font-mono text-sm/6 tracking-wider text-gray-400 uppercase">5-day mini-course</p>
             <h1 className="mt-2 text-5xl tracking-tighter text-balance text-white sm:text-8xl">
-              Build UIs that don't suck.
+              Build UIs that don’t suck.
             </h1>
           </GridContainer>
           <GridContainer>
@@ -47,33 +47,42 @@ export default async function Course() {
         </div>
       </div>
       <div className="px-2 pt-14 pb-28">
-        <div className="max-w-xl space-y-8 text-[0.9375rem]/7 text-gray-300">
+        <div className="max-w-xl space-y-8 text-base/7 text-gray-400 **:[strong]:font-medium **:[strong]:text-white">
           <p>
-            When you build UI components that are used by tens of thousands of developers, you learn to really care
-            about the details, like:
+            When you build UI components that are used by <strong>tens of thousands of developers</strong>, you learn to
+            really care about the details, like:
           </p>
           <ul className="list-[square] space-y-4 pl-8 marker:text-white/60">
             <li className="pl-2">
-              Building layouts that don't break when the content is longer than you planned for in Figma
+              <strong>Building layouts that don't break</strong> when the content is longer than you planned for in
+              Figma
             </li>
-            <li className="pl-2">Getting avatars to stand out from the page, no matter what colors are in the image</li>
             <li className="pl-2">
-              Fine-tuning click targets for mobile, without making everything else harder to maintain
+              Making a table scrollable, <strong>without the content getting cropped</strong> by the page padding
             </li>
-            <li className="pl-2">Making sure keyboards shortcuts are perfectly aligned in menus</li>
-            <li className="pl-2">Getting the border radius mathematically perfect on nested elements</li>
             <li className="pl-2">
-              Adding horizontal scrolling to a table, without the content getting cropped by the page padding
+              <strong>Automatically aligning icons</strong> in dropdown menus, even when some items are just text
+            </li>
+            <li className="pl-2">
+              Making an entire card clickable, <strong>without destroying the experience</strong> for screen readers
+            </li>
+            <li className="pl-2">
+              <strong>Fine-tuning click targets for mobile</strong>, without making everything else harder to maintain
+            </li>
+            <li className="pl-2">
+              Getting the border radius <strong>mathematically perfect</strong> on nested elements, without hard-coding
+              magic numbers
             </li>
           </ul>
           <p>
-            Build UIs that don't suck is a crash course in some of the coolest tricks I've picked up over the years
-            building things that need to be both beautiful and bullet-proof.
+            <strong>“Build UIs that don’t suck”</strong> is a crash course in some of the coolest tricks I've picked up
+            over the years building things that need to be both beautiful and bullet-proof.
           </p>
 
           <p>
-            Every day for a week I'll send you a short video lesson walking you through an interesting UI problem, as
-            well as the code so you can play with it yourself and adapt it for your own projects.
+            <strong>Every day for a week I'll send you a short video lesson</strong> walking you through an interesting
+            UI problem, <strong>as well as the code</strong> so you can play with it yourself and adapt it for your own
+            projects.
           </p>
         </div>
         <div className="mt-8">