beginning of supporters section

src/views/annual-report/annual-report.jsx

@@ -312,26 +312,39 @@ const AnnualReport = () => (
                 </div>
             </div>
         </div>
-        <div className="supporters" id="supporters">
+        <div className="supporters-section" id="supporters">
             <div className="inner">
-                <section className="ttt-section">
+                <div className="supporters-heading">
-                    <div className="ttt-head">
+                    <h1>
+                        <FormattedMessage id="annualReport.supportersTitle" />
+                    </h1>
+                    <p>
+                        <FormattedHTMLMessage id="annualReport.supportersIntro" />
+                    </p>
+                </div>
+                <div className="donor-spotlight">
+                    <div className="subsection-tag">
+                        <FormattedHTMLMessage id="annualReport.supportersSpotlightTitle" />
+                    </div>
+                    <div className="sfe-info">
                         <h2>
-                            <FormattedMessage id="ideas.activityGuidesTitle" />
+                            <FormattedMessage id="annualReport.supportersSFETitle" />
                         </h2>
                         <p>
-                            <FormattedHTMLMessage id="ideas.activityGuidesText" />
+                            <FormattedMessage id="annualReport.supportersSFEDescription" />
                         </p>
                     </div>
-                    <a
+                    <div className="david-siegel">
-                        className="wide-button"
+                        <div className="ds-info">
-                        href="/projects/editor/?tutorial=all"
+                            <img src="/images/annual-report/david-siegel-photo.svg" />
-                    >
+                            <h3>David Siegel</h3>
-                        <Button className="ideas-button wide-button">
+                            <div>Co-Founder and Co-Chairman Two Sigma</div>
-                            <FormattedMessage id="ideas.seeAllTutorials" />
+                        </div>
-                        </Button>
+                        <div className="ds-quote">
-                    </a>
+                            Making sure that Scratch remains free and accessible for kids everywhere is one of the most impactful ways we can help young learners engage and thrive in an increasingly digital world. Supporting Scratch is more important today than ever before.
-                </section>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
         <div className="donate-section" id="donate">

src/views/annual-report/annual-report.scss

@@ -263,6 +263,75 @@ $base-bg: $ui-white;
     }
 }
 
+.subsection-tag {
+    color: $ui-white;
+    font-size: 16px;
+    font-weight: bold;
+
+    background-color: $ui-blue;
+    text-align: center;
+    border-radius: 36px;
+
+    display:inline-flex;
+    width: max-content;
+    padding: 12px 36px;
+}
+
+.supporters-section {
+    background-color: #EDEDFF;
+    padding: 84px 0;
+
+    .inner {
+        width: 780px;
+    }
+
+    .supporters-heading {
+        margin-bottom: 48px;
+
+        h1 {
+            font-size: 52px;
+            padding-bottom: 52px;
+        }
+
+        p { 
+            font-size: 24px;
+            margin: 0;
+        }
+    }
+
+    .subsection-tag {
+        background-color: $ui-orange;
+        align-self: flex-start;
+
+        margin-bottom: 48px;
+    }
+
+    .donor-spotlight {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        h2 {
+            font-size: 24px;
+            font-color: #575E75;
+        }
+
+        p {
+            font-size: 16px;
+        }
+    }
+
+    .sfe-info {
+        width: 620px;
+    }
+
+    .david-siegel {
+        display: flex;
+        align-items: flex-start;
+    }
+    
+}
+
 .donate-section {
     height: 500px;
     background-color: #0EBD8C;

src/views/annual-report/l10n.json

@@ -74,6 +74,12 @@
     "annualReport.financialsFundraising": "Fundraising (Gala & Others)",
     "annualReport.financialsButton": "2019 Audited Financials",
 
+    "annualReport.supportersTitle": "Thank You to Our Supporters",
+    "annualReport.supportersIntro": "Thank you to our generous supporters. Your contribution helps us expand creative learning opportunities for children of all ages, from all backgrounds, around the globe.",
+    "annualReport.supportersSpotlightTitle": "Donor - Spotlight Story",
+    "annualReport.supportersSFETitle": "Siegel Family Endowment",
+    "annualReport.supportersSFEDescription": "In May 2012, David Siegel attended Scratch Day at the MIT Media Lab along with his son Zach, an active and enthusiastic Scratcher. Watching Zach and other children using Scratch to code their own games, animations, and robotic creatures, David saw how Scratch could help children learn practical coding skills and develop as computational thinkers. A few days later, David made his first donation to support Scratch.",
+
     "annualReport.donateTitle": "Donate",
     "annualReport.donateMessage": "Your support enables us to make Scratch free for everyone, keeps our servers running, and most importantly, we are able to provide kids around the world an opportunity to imagine, create and share. Thank you!",
     "annualReport.donateButton": "Donate"