diff --git a/src/scss/cs/isaac.scss b/src/scss/cs/isaac.scss
index 8a883b3a1d..11ca3eb46f 100644
--- a/src/scss/cs/isaac.scss
+++ b/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
// ----------------------------------------------
diff --git a/src/test/pages/Homepage.test.tsx b/src/test/pages/Homepage.test.tsx
new file mode 100644
index 0000000000..30d9d48cc3
--- /dev/null
+++ b/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");
+ });
+});