diff --git a/.claude/settings.local.json b/.claude/settings.local.json new file mode 100644 index 0000000..235b619 --- /dev/null +++ b/.claude/settings.local.json @@ -0,0 +1,9 @@ +{ + "permissions": { + "allow": [ + "Bash(Remove-Item \"C:\\Users\\iaramako\\Documents\\GitHub\\rainbow-engineering\\src\\app\\(frontend)\\components\\HomePageSection.tsx\")" + ], + "deny": [], + "ask": [] + } +} diff --git a/src/app/(frontend)/components/AboutUsSection.tsx b/src/app/(frontend)/components/AboutUsSection.tsx new file mode 100644 index 0000000..a7e0a12 --- /dev/null +++ b/src/app/(frontend)/components/AboutUsSection.tsx @@ -0,0 +1,102 @@ +"use client"; +import Image from "next/image"; +import { useEffect, useState } from "react"; + +type AboutUsType = { + Title: string; + Image: { url: string; alt?: string }; + "About Us Description": string; + "Bullet Points Description": string; + "Bullet Points"?: { Point: string }[]; +}; + +interface AboutUsSectionProps { + aboutus: AboutUsType; +} + +export default function AboutUsSection({ aboutus }: AboutUsSectionProps) { + const [isDark, setIsDark] = useState(false); + + useEffect(() => { + const saved = localStorage.getItem("darkMode") === "true"; + setIsDark(saved); + + const onThemeChange = (e: Event) => { + const { isDark } = (e as CustomEvent).detail ?? {}; + if (typeof isDark === "boolean") setIsDark(isDark); + }; + window.addEventListener("themechange", onThemeChange); + + const onStorage = (e: StorageEvent) => { + if (e.key === "darkMode" && e.newValue != null) { + setIsDark(e.newValue === "true"); + } + }; + window.addEventListener("storage", onStorage); + + return () => { + window.removeEventListener("themechange", onThemeChange); + window.removeEventListener("storage", onStorage); + }; + }, []); + + const sectionBg = isDark ? "#2A2342" : "#E2D6F6"; + const titleColor = isDark ? "#F4EFFF" : "#5f249f"; + const textColor = isDark ? "#B8ADDA" : "#334155"; + + return ( +
+ {/* background coloured block */} + +

+ {aboutus.Title} +

+
+ {/* code for about us image */} +
+ {aboutus.Image?.alt +
+ + {/* code for about us text */} +
+

+ {aboutus["About Us Description"]} +
+
+ {aboutus["Bullet Points Description"]} +

+
    + { + aboutus["Bullet Points"]?.map( + ( + item, index) => ( +
  • + {item.Point} +
    • + ) + + ) + } +
+
+
+
+ ); +} diff --git a/src/app/(frontend)/components/Banner.tsx b/src/app/(frontend)/components/Banner.tsx index eba2761..2fa90eb 100644 --- a/src/app/(frontend)/components/Banner.tsx +++ b/src/app/(frontend)/components/Banner.tsx @@ -1,3 +1,6 @@ +"use client"; + +import { useEffect, useState } from "react"; import BannerAnimation from "./BannerAnimation"; interface BannerProps { @@ -5,10 +8,49 @@ interface BannerProps { } export default function Banner({ title }: BannerProps) { + //this part tracks whether dark mode is currently active + const [isDark, setIsDark] = useState(false); + + useEffect(() => { + //checks what NAvbar has saved for dark mode preference + const saved = localStorage.getItem("darkMode") === "true"; + setIsDark(saved); + + const onThemeChange = (e: Event) => { + const { isDark } = (e as CustomEvent).detail ?? {}; + if (typeof isDark === "boolean") setIsDark(isDark); + }; + window.addEventListener("themechange", onThemeChange); + + //in case dark mode changes in another browser/tab + const onStorage = (e: StorageEvent) => { + if (e.key === "darkMode" && e.newValue != null) { + setIsDark(e.newValue === "true"); + } + }; + window.addEventListener("storage", onStorage); + + return () => { + window.removeEventListener("themechange", onThemeChange); + window.removeEventListener("storage", onStorage); + }; + }, []); + + //dark and light mode colours + const bannerBg = isDark ? "#121022" : "#F1EAFB"; + const bannerText = isDark ? "#F4EFFF" : "#5f249f"; + return ( <> -