+
+);
diff --git a/web/src/components/Footer.tsx b/web/src/components/Footer.tsx
new file mode 100644
index 000000000..543350d97
--- /dev/null
+++ b/web/src/components/Footer.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+import { Link, useLocation } from "react-router-dom";
+
+export const Footer: React.FC = () => {
+ const location = useLocation();
+
+ return (
+
+ );
+};
diff --git a/web/src/components/Hero.tsx b/web/src/components/Hero.tsx
new file mode 100644
index 000000000..b4172bbcc
--- /dev/null
+++ b/web/src/components/Hero.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+
+export const Hero: React.FC = () => (
+ // Load separate placeholder images based on screen size
+
+ 
+ Powered by HTML.COM
+
+
+
+ {bodyText}
+
+
+
+
+ 
+
+ 1920 x 650
+
+ Powered by HTML.COM
+ 
+
+ 600 x 600
+
+
+
+
+
+
+ Hello Developer!
++ Lorem ipsum dolor sit amet, consectetur adipiscing elit +
+
+ {/* Bullet points are not centred along with the content and will remain on the left */}
+
+ {parse(section.content)}
+
+
+ );
+};
diff --git a/web/src/constants.ts b/web/src/constants.ts
new file mode 100644
index 000000000..55080c14b
--- /dev/null
+++ b/web/src/constants.ts
@@ -0,0 +1,5 @@
+export interface ISection {
+ id: number;
+ title: string;
+ content: string;
+ }
\ No newline at end of file
diff --git a/data.json b/web/src/data.json
similarity index 96%
rename from data.json
rename to web/src/data.json
index c1304b844..f44a66b39 100644
--- a/data.json
+++ b/web/src/data.json
@@ -1,17 +1,21 @@
[
{
+ "id": 1,
"title": "Section 1",
"content": "
+ {sections.map((item: ISection) => (
+
+
+
+
+ ))}
+ {activeItem !== null && (
+
+ )}
+
+ {sections.map((item: ISection) => (
+
+ Maecenas nec semper ante, pellentesque posuere lorem. Nullam ipsum massa, consequat eget urna ut, pulvinar dignissim lorem. Nulla facilisi. Nam mattis eleifend metus. Fusce at commodo lorem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus pellentesque elit sem, vel blandit posuere.
" }, { + "id": 2, "title": "Section 2", "content": "Mauris a orci sodales, scelerisque velit vitae, gravida nisl. Ut non laoreet eros, vel laoreet nisi. Praesent sed dolor dui. Proin non fringilla quam. Aliquam erat volutpat. Vestibulum vel arcu semper, lobortis turpis ac, ultricies nisi. Praesent id.
" }, { + "id": 3, "title": "Section 3", "content": "Sed elementum sapien ut sapien imperdiet, eu venenatis enim rhoncus. Praesent euismod tincidunt rhoncus. Duis cras amet:
- List item one
- List item two
- List item three
Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est.
Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
" } diff --git a/web/src/main.tsx b/web/src/main.tsx new file mode 100644 index 000000000..bbf15f3cd --- /dev/null +++ b/web/src/main.tsx @@ -0,0 +1,10 @@ +import { StrictMode } from "react"; +import { createRoot } from "react-dom/client"; +import { App } from "./App.tsx"; +import "./styles/index.scss"; + +createRoot(document.getElementById("root")!).render( +
+
+ ),
+}));
+
+vi.mock("../../components/TabAccordion", () => ({
+ TabAccordion: ({ sections }: { sections: ISection[] }) => (
+ Hello Developer!
+
+ {sections.map((section: ISection) => (
+
+ ),
+}));
+
+describe("DynamicContent", () => {
+ it("should render the hero section with correct text", () => {
+ render(
+ {section.title}
+
+ ))}
+
+
+
+ )}
+
+ );
+};
diff --git a/web/src/pages/landingPage/LandingPage.test.tsx b/web/src/pages/landingPage/LandingPage.test.tsx
new file mode 100644
index 000000000..88fbb2e29
--- /dev/null
+++ b/web/src/pages/landingPage/LandingPage.test.tsx
@@ -0,0 +1,47 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { LandingPage } from ".";
+
+vi.mock("../../components/Hero", () => ({
+ Hero: () => (
+
+
+ ),
+}));
+
+vi.mock("../../components/Card", () => ({
+ Card: ({ bodyText }: { bodyText: string }) => (
+ Hello Developer!
+Lorem ipsum dolor sit amet, consectetur adipiscing elit
+{bodyText}
+ ),
+}));
+
+describe("LandingPage", () => {
+ it("should render the hero section with correct text", () => {
+ render(
+
+
+
+ );
+};
diff --git a/web/src/setupTests.ts b/web/src/setupTests.ts
new file mode 100644
index 000000000..bbd195152
--- /dev/null
+++ b/web/src/setupTests.ts
@@ -0,0 +1,4 @@
+import * as matchers from "@testing-library/jest-dom/matchers";
+import { expect } from "vitest";
+
+expect.extend(matchers);
diff --git a/web/src/styles/index.scss b/web/src/styles/index.scss
new file mode 100644
index 000000000..ef63b301a
--- /dev/null
+++ b/web/src/styles/index.scss
@@ -0,0 +1,200 @@
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+
+body, h1, h2, h3, h4, h5, h6 {
+ @apply font-sans;
+}
+
+.powered-by {
+ @apply absolute bottom-1 right-1 text-stone-500 tracking-wide;
+ font-size: clamp(0.35rem, 1.5vw, 0.75rem);
+ width: 60%;
+ text-align: right;
+ font-family: 'Public Sans', sans-serif;
+ z-index: 10;
+
+ &__card {
+ @apply text-stone-400;
+ }
+}
+
+.navbar {
+ @apply absolute top-0 left-0 right-0 z-10;
+
+ &__container {
+ @apply container mx-auto px-4 py-4 flex justify-center;
+ }
+
+ &__list {
+ @apply flex space-x-8;
+ }
+
+ &__link {
+ @apply text-white text-lg font-semibold hover:text-gray-300 transition-colors;
+
+ &--active {
+ @apply border-b-2 border-white;
+ }
+ }
+}
+
+.card {
+ @apply bg-white rounded-md shadow overflow-hidden flex flex-col h-full border border-gray-200;
+
+ &__image-container {
+ @apply relative h-0 pb-[75%] mb-5;
+ }
+
+ &__image {
+ @apply absolute inset-0 w-full h-full object-cover rounded-md;
+ }
+
+ &__body {
+ @apply flex flex-col flex-grow text-center;
+ }
+
+ &__text {
+ @apply text-black mb-4 flex-grow;
+ }
+
+ &__button {
+ @apply bg-white border-3 border-black rounded-full transition-colors duration-300 py-1.5 px-4 ;
+
+ .expand-text {
+ @apply text-black font-black uppercase text-sm tracking-[0.2em] hover:text-white;
+ }
+
+ &:hover {
+ @apply bg-black text-white;
+ }
+ }
+ }
+
+ @mixin hero-image {
+ @apply absolute inset-0 w-full h-full object-cover;
+ }
+
+ .hero {
+ @apply relative overflow-hidden;
+ height: 100vw;
+ max-height: 600px;
+
+ @screen md {
+ height: 650px;
+ }
+
+ &__image-container {
+ @apply relative w-full h-full;
+ }
+
+ &__image-desktop {
+ @apply hidden md:block h-full;
+ @include hero-image;
+ }
+
+ &__image-mobile {
+ @apply md:hidden h-full;
+ @include hero-image;
+ }
+
+ &__image-text {
+ @apply absolute inset-0 flex items-center justify-center text-neutral-450;
+ font-size: clamp(1.5rem, 3vw, 2.5rem);
+ font-family: 'Public Sans', sans-serif;
+ // Scale height
+ transform: scaleY(1.2);
+
+ @media (min-width: 768px) {
+ font-size: clamp(6rem, 10vw, 8rem);
+ }
+ }
+
+ &__image-text-desktop {
+ @apply hidden md:flex;
+ }
+
+ &__image-text-mobile {
+ @apply md:hidden;
+ }
+
+ &__overlay {
+ @apply absolute inset-0 flex items-center justify-center bg-zinc-600 bg-opacity-50;
+ }
+
+ &__content {
+ @apply text-center;
+ }
+
+ &__title {
+ @apply text-4xl text-white md:text-6xl font-bold mb-4 tracking-wider;
+
+ @media (max-width: 767px) {
+ line-height: 1.75;
+ }
+ }
+
+ &__subtitle {
+ @apply text-xl text-white md:text-4xl font-light tracking-wide;
+
+ @media (max-width: 767px) {
+ margin-top: -1rem;
+ }
+ }
+}
+
+ .tab-accordion {
+ &__container {
+ @apply md:flex md:justify-between border-b border-gray-200 relative;
+ }
+
+ &__button {
+ @apply py-6 px-4 text-xl font-semibold transition-colors duration-200 focus:outline-none flex items-center justify-center w-full;
+
+ &--active {
+ @apply text-blue-600;
+ }
+
+ &--inactive {
+ @apply text-gray-600 hover:text-gray-800;
+ }
+ }
+
+ &__icon {
+ @apply w-6 h-6 transition-transform duration-300 ease-in-out ml-2 md:hidden;
+ }
+
+ &__underline {
+ @apply hidden md:block absolute bottom-0 left-0 w-full h-0.5 bg-blue-600 transition-all duration-300;
+ }
+
+ &__desktop-content {
+ @apply mt-6 hidden md:block;
+ }
+ }
+
+.animated-content {
+ @apply py-4 text-gray-600 text-center;
+}
+
+.rendered-html-content {
+ p {
+ @apply mb-4;
+ }
+
+ ul {
+ @apply list-disc pl-8 mb-4;
+ }
+
+ li {
+ @apply mb-2;
+ }
+}
+
+.dynamic-content {
+ @apply min-h-screen bg-white;
+
+ &__data {
+ @apply container mx-auto px-4 py-8 md:py-12;
+ }
+}
diff --git a/web/src/vite-env.d.ts b/web/src/vite-env.d.ts
new file mode 100644
index 000000000..11f02fe2a
--- /dev/null
+++ b/web/src/vite-env.d.ts
@@ -0,0 +1 @@
+///
+ {cardContent.map((text, index) => (
+
+