diff --git a/public/assets/homepage-students-image.png b/public/assets/homepage-students-image.png new file mode 100644 index 0000000000..a195aff3d4 Binary files /dev/null and b/public/assets/homepage-students-image.png differ diff --git a/public/assets/why-choose-us.png b/public/assets/why-choose-us.png new file mode 100644 index 0000000000..2cdf6a4757 Binary files /dev/null and b/public/assets/why-choose-us.png differ diff --git a/src/app/components/site/Homepage.tsx b/src/app/components/site/Homepage.tsx index 1072133c52..e9b01f50eb 100644 --- a/src/app/components/site/Homepage.tsx +++ b/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 = () => { +
+
+ +

Why choose us

+ + + A teacher sat with students in a library, talking about content in a textbook in front of them. + + +

Why should you choose Isaac Computer Science:

+
    +
  • Free computer science learning resources backed by experts
  • +
  • Teachers save 2.8 hours a week on teaching and lesson planning when using Isaac
  • +
  • Smooth progression for GCSE students to A level computer science
  • +
  • Connect computer science to real-world application and careers
  • +
  • Funded by the Department for Education
  • +
+
+ + +
+ +
+
+
+
+ {!user?.loggedIn && (
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"); + }); +});