Add new section homepage

src/app/components/site/Homepage.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 import { useAppSelector, selectors, isaacApi } from "../../state";
 import { Link } from "react-router-dom";
-import { Col, Container, Row } from "reactstrap";
+import { Button, Col, Container, Row } from "reactstrap";
 import { SITE_SUBJECT_TITLE } from "../../services";
 import { NewsCarousel } from "../elements/NewsCarousel";
 import { EventsCarousel } from "../elements/EventsCarousel";
@@ -48,6 +48,55 @@ export const Homepage = () => {
           </Container>
         </section>
 
+        <section id="why-choose-us" className="bg-white">
+          <div className="why-choose-us-section pt-5 pb-4">
+            <Container className="pt-4 pb-5">
+              <h1 className="primary-heading mb-4">Why choose us</h1>
+              <Row className="pt-4 mb-2 why-choose-us-row">
+                <Col lg={6} xs={12} className="pb-3 pb-lg-0">
+                  <img
+                    src="/assets/why-choose-us.png"
+                    alt="A teacher sat with students in a library, talking about content in a textbook in front of them."
+                    className="img-fluid d-block"
+                  />
+                </Col>
+                <Col lg={6} xs={12} className="why-choose-us-copy">
+                  <p className="body-text why-choose-us-intro">Why should you choose Isaac Computer Science:</p>
+                  <ul className="body-text mt-0 why-choose-us-list">
+                    <li>Free computer science learning resources backed by experts</li>
+                    <li>Teachers save 2.8 hours a week on teaching and lesson planning when using Isaac</li>
+                    <li>Smooth progression for GCSE students to A level computer science</li>
+                    <li>Connect computer science to real-world application and careers</li>
+                    <li>Funded by the Department for Education</li>
+                  </ul>
+                  <div className="why-choose-us-buttons">
+                    <Button
+                      size="lg"
+                      tag={Link}
+                      to="/pages/teacher_landing_page"
+                      target="_blank"
+                      className="primary-button text-light"
+                      block
+                    >
+                      Benefits for teachers
+                    </Button>
+                    <Button
+                      size="lg"
+                      tag={Link}
+                      to="/pages/student_landing_page"
+                      target="_blank"
+                      className="primary-button text-light"
+                      block
+                    >
+                      Benefits for students
+                    </Button>
+                  </div>
+                </Col>
+              </Row>
+            </Container>
+          </div>
+        </section>
+
         {!user?.loggedIn && (
           <section id="events" className="event-section">
             <div className="event-section-background-img">

src/scss/cs/isaac.scss

@@ -451,6 +451,73 @@ h2.h-title {
   height: 3.5rem;
 }
 
+
+
+// ----------------------------------------------
+// Homepage Why choose us Section
+// ----------------------------------------------
+
+.why-choose-us-section {
+  background-color: white;
+
+  .why-choose-us-row {
+    @include media-breakpoint-up(lg) {
+      align-items: stretch;
+    }
+  }
+
+  .why-choose-us-copy {
+    display: flex;
+    flex-direction: column;
+
+    @include media-breakpoint-down(md) {
+      margin-top: 1.5rem;
+    }
+  }
+
+  .why-choose-us-intro {
+    margin-top: 0;
+    margin-bottom: 1rem;
+    // Trim half-leading above caps so the line aligns with the image top
+    text-box: trim-start cap alphabetic;
+  }
+
+  .why-choose-us-list {
+    padding-left: 1.25rem;
+    margin-bottom: 0;
+  }
+
+  .why-choose-us-buttons {
+    display: flex;
+    flex-direction: column;
+    margin-top: auto;
+    padding-top: 1.5rem;
+
+    @include media-breakpoint-up(md) {
+      flex-direction: row;
+      justify-content: space-between;
+    }
+
+    .btn {
+      margin: 0;
+      width: 100%;
+
+      @include media-breakpoint-up(md) {
+        width: auto;
+        flex: 0 1 47%;
+      }
+
+      &:not(:last-child) {
+        margin-bottom: 1rem;
+
+        @include media-breakpoint-up(md) {
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+}
+
 // ----------------------------------------------
 // Homepage Event Section
 // ----------------------------------------------

src/test/pages/Homepage.test.tsx

@@ -0,0 +1,28 @@
+import { screen } from "@testing-library/react";
+import { Homepage } from "../../app/components/site/Homepage";
+import { renderTestEnvironment } from "../utils";
+
+describe("Homepage", () => {
+  it("renders the 'Why choose us' section with the correct content and links", () => {
+    renderTestEnvironment({
+      PageComponent: Homepage,
+      initialRouteEntries: ["/"],
+      role: "ANONYMOUS",
+    });
+
+    const section = document.getElementById("why-choose-us");
+    expect(section).toBeInTheDocument();
+
+    expect(
+      screen.getByRole("img", {
+        name: "A teacher sat with students in a library, talking about content in a textbook in front of them.",
+      }),
+    ).toHaveAttribute("src", "/assets/why-choose-us.png");
+
+    const teacherLink = screen.getByRole("link", { name: /Benefits for teachers/i });
+    const studentLink = screen.getByRole("link", { name: /Benefits for students/i });
+
+    expect(teacherLink).toHaveAttribute("target", "_blank");
+    expect(studentLink).toHaveAttribute("target", "_blank");
+  });
+});