From 756a2ad4e2c43167f10ed569dd6abdf249a2e2b0 Mon Sep 17 00:00:00 2001 From: Manisha Kumari Date: Fri, 30 Jan 2026 15:22:26 +0530 Subject: [PATCH 1/3] Add Projects section and new AppShell/Navbar components for new home page design --- .../src/components/molecules/AppShellNew.jsx | 74 +++++++++++++++++ .../src/components/molecules/NavBarNew.jsx | 80 +++++++++++++++++++ .../src/components/molecules/ProjectCard.jsx | 70 ++++++++++++++++ .../src/components/molecules/Projects.jsx | 52 ++++++++++++ uli-website/src/config/projects.js | 31 +++++++ uli-website/src/images/ProjectsTitle.svg | 14 ++++ uli-website/src/images/left-border.svg | 9 +++ uli-website/src/images/navbar-bg.svg | 9 +++ uli-website/src/images/projectImage.svg | 9 +++ uli-website/src/pages/new-home.js | 11 +-- 10 files changed, 352 insertions(+), 7 deletions(-) create mode 100644 uli-website/src/components/molecules/AppShellNew.jsx create mode 100644 uli-website/src/components/molecules/NavBarNew.jsx create mode 100644 uli-website/src/components/molecules/ProjectCard.jsx create mode 100644 uli-website/src/components/molecules/Projects.jsx create mode 100644 uli-website/src/config/projects.js create mode 100644 uli-website/src/images/ProjectsTitle.svg create mode 100644 uli-website/src/images/left-border.svg create mode 100644 uli-website/src/images/navbar-bg.svg create mode 100644 uli-website/src/images/projectImage.svg diff --git a/uli-website/src/components/molecules/AppShellNew.jsx b/uli-website/src/components/molecules/AppShellNew.jsx new file mode 100644 index 00000000..7a897007 --- /dev/null +++ b/uli-website/src/components/molecules/AppShellNew.jsx @@ -0,0 +1,74 @@ +import * as React from "react"; +import { Grommet, Box } from "grommet"; +import { Helmet } from "react-helmet"; +import { Theme } from "../atoms/UliCore"; +import NavBarNew from "./NavBarNew"; +import Footer from "./Footer"; +import { useTranslation } from "react-i18next"; +import { useLocation } from "@reach/router"; +import Projects from "./Projects"; + +export default function AppShellNew({ children }) { + const { i18n } = useTranslation(); + const location = useLocation(); + + /* ---------- Set language from localStorage ---------- */ + React.useEffect(() => { + const lang = localStorage.getItem("uli-lang"); + if (lang) { + i18n.changeLanguage(lang); + } + }, []); + + /* ---------- Page title ---------- */ + let fullPath = location.pathname; + if (fullPath.endsWith("/")) { + fullPath = fullPath.slice(0, -1); + } + + let title = fullPath.split("/").at(-1); + + if (["hi", "en", "ta", "ma"].includes(title)) { + title = "Uli"; + } + + title = title + .split("-") + .map((w) => w.charAt(0).toUpperCase() + w.slice(1)) + .join(" "); + + return ( + +
+ + + {title} + + + + + + + + {/* NEW NAVBAR */} + + + {/* PAGE CONTENT */} + {children} + + {/* FOOTER */} +
+
+ + ); +} diff --git a/uli-website/src/components/molecules/NavBarNew.jsx b/uli-website/src/components/molecules/NavBarNew.jsx new file mode 100644 index 00000000..c8be91f4 --- /dev/null +++ b/uli-website/src/components/molecules/NavBarNew.jsx @@ -0,0 +1,80 @@ +import React from "react"; +import { Box, Text, ResponsiveContext } from "grommet"; +import { NavLink } from "../atoms/UliCore"; +import { navigate } from "gatsby"; +import { useContext } from "react"; +import navbarBg from "../../images/navbar-bg.svg"; + + +export default function NavBarNew() { + const size = useContext(ResponsiveContext); + + return ( + <> + {/* ---------- TOP SVG STRIP ---------- */} + + + {/* ---------- NAVBAR ---------- */} + + + {/* ---------- LEFT ---------- */} + + + Tattle + + + + {/* ---------- CENTER LOGO ---------- */} + navigate("/")} + > + Uli Logo + + + {/* ---------- RIGHT ---------- */} + + + Contact + + + About us + + + Data Y + + + + + + ); +} diff --git a/uli-website/src/components/molecules/ProjectCard.jsx b/uli-website/src/components/molecules/ProjectCard.jsx new file mode 100644 index 00000000..3a9b230e --- /dev/null +++ b/uli-website/src/components/molecules/ProjectCard.jsx @@ -0,0 +1,70 @@ +import React from "react"; +import projectImage from "../../images/projectImage.svg"; + +const pixelCutShape = + "polygon(" + + "0% 20%, 3% 20%, 3% 10%, 6% 10%, 6% 0%, " + + "94% 0%, 94% 10%, 97% 10%, 97% 20%, 100% 20%, " + + "100% 80%, 97% 80%, 97% 90%, 94% 90%, 94% 100%, " + + "6% 100%, 6% 90%, 3% 90%, 3% 80%, 0% 80%" + + ")"; + +const ProjectCard = ({ title, description, reverse }) => { + return ( +
+
+
+ {/* LEFT ICON */} + + + {/* TEXT */} +
+

{title}

+ +

+ {description} +

+ +
+ + +
+
+
+
+
+ ); +}; + +const btnStyle = { + background: "transparent", + border: "2px dashed #000", + padding: "10px 28px", + cursor: "pointer", +}; + +export default ProjectCard; diff --git a/uli-website/src/components/molecules/Projects.jsx b/uli-website/src/components/molecules/Projects.jsx new file mode 100644 index 00000000..ffa750d5 --- /dev/null +++ b/uli-website/src/components/molecules/Projects.jsx @@ -0,0 +1,52 @@ +import React from "react"; +import { projects } from "../../config/projects"; +import ProjectCard from "./ProjectCard"; +import topBorder from "../../images/ProjectsTitle.svg"; +import sideBorder from "../../images/left-border.svg"; + +const Projects = () => { + return ( +
+ {/* 🔝 TOP BORDER */} +
+ + {/* ⬅️➡️ SIDE BORDERS WRAPPER */} +
+
+ {projects.map((project) => ( + + ))} +
+
+
+ ); +}; + +export default Projects; diff --git a/uli-website/src/config/projects.js b/uli-website/src/config/projects.js new file mode 100644 index 00000000..84949689 --- /dev/null +++ b/uli-website/src/config/projects.js @@ -0,0 +1,31 @@ +// src/config/projects.js +export const projects = [ + { + id: 1, + title: "Title", + description: + "Use Uli to redact slurs and abusive content, archive problematic content, and collectively push back against online gender based violence", + reverse: false, + }, + { + id: 2, + title: "Title", + description: + "Use Uli to redact slurs and abusive content, archive problematic content, and collectively push back against online gender based violence", + reverse: true, + }, + { + id: 3, + title: "Title", + description: + "Use Uli to redact slurs and abusive content, archive problematic content, and collectively push back against online gender based violence", + reverse: false, + }, + { + id: 4, + title: "Title", + description: + "Use Uli to redact slurs and abusive content, archive problematic content, and collectively push back against online gender based violence", + reverse: true, + }, +]; diff --git a/uli-website/src/images/ProjectsTitle.svg b/uli-website/src/images/ProjectsTitle.svg new file mode 100644 index 00000000..98b2b1c2 --- /dev/null +++ b/uli-website/src/images/ProjectsTitle.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/uli-website/src/images/left-border.svg b/uli-website/src/images/left-border.svg new file mode 100644 index 00000000..3b1149ee --- /dev/null +++ b/uli-website/src/images/left-border.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/uli-website/src/images/navbar-bg.svg b/uli-website/src/images/navbar-bg.svg new file mode 100644 index 00000000..277a124f --- /dev/null +++ b/uli-website/src/images/navbar-bg.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/uli-website/src/images/projectImage.svg b/uli-website/src/images/projectImage.svg new file mode 100644 index 00000000..97abbef7 --- /dev/null +++ b/uli-website/src/images/projectImage.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/uli-website/src/pages/new-home.js b/uli-website/src/pages/new-home.js index 51339056..83689375 100644 --- a/uli-website/src/pages/new-home.js +++ b/uli-website/src/pages/new-home.js @@ -1,14 +1,13 @@ import * as React from "react" -import AppShell from "../components/molecules/AppShell" +import AppShellNew from "../components/molecules/AppShellNew" import AnnouncementBanner from "../components/molecules/AnnouncementBanner" import { Box, Text } from "grommet" const NewHome = () => { return ( - -
- + +
Announcement @@ -18,10 +17,8 @@ const NewHome = () => { -

New Home

-

This is a temporary placeholder for the new homepage design.

- + ) } From 52ea664be64268ea1a24f0946f23536be43a6388 Mon Sep 17 00:00:00 2001 From: Manisha Kumari Date: Mon, 9 Feb 2026 10:55:15 +0530 Subject: [PATCH 2/3] Create a new footer for new home page --- .../src/components/molecules/AppShellNew.jsx | 4 +- .../src/components/molecules/FooterNew.jsx | 95 +++++++++++++++++++ 2 files changed, 97 insertions(+), 2 deletions(-) create mode 100644 uli-website/src/components/molecules/FooterNew.jsx diff --git a/uli-website/src/components/molecules/AppShellNew.jsx b/uli-website/src/components/molecules/AppShellNew.jsx index 7a897007..805cb601 100644 --- a/uli-website/src/components/molecules/AppShellNew.jsx +++ b/uli-website/src/components/molecules/AppShellNew.jsx @@ -3,7 +3,7 @@ import { Grommet, Box } from "grommet"; import { Helmet } from "react-helmet"; import { Theme } from "../atoms/UliCore"; import NavBarNew from "./NavBarNew"; -import Footer from "./Footer"; +import FooterNew from "./FooterNew"; import { useTranslation } from "react-i18next"; import { useLocation } from "@reach/router"; import Projects from "./Projects"; @@ -67,7 +67,7 @@ export default function AppShellNew({ children }) { {children} {/* FOOTER */} -
+
); diff --git a/uli-website/src/components/molecules/FooterNew.jsx b/uli-website/src/components/molecules/FooterNew.jsx new file mode 100644 index 00000000..373cad26 --- /dev/null +++ b/uli-website/src/components/molecules/FooterNew.jsx @@ -0,0 +1,95 @@ +import React from "react"; +import { Box, Text } from "grommet"; + +const FooterNew = () => { + return ( + + {/* Stay Updated Section */} + + + Stay Updated + + + + Short Statement about what Uli is
+ Use Uli to redact slurs and abusive content, archive problematic + content, and collectively push back against online gender based + violence. + + + {/* Email Input */} + + ✉️ + + + your email address + + + + + subscribe + + + + + + {/* Bottom Section */} + + + + Uli by Tattle + + + Email & Other contacts + + + + + + Link 1 + + + Link 2 + + + Link 3 + + + + + ); +}; + +export default FooterNew; From 3660164bff3737ce35ff317caac887fd428caa08 Mon Sep 17 00:00:00 2001 From: Manisha Kumari Date: Wed, 11 Feb 2026 14:50:20 +0530 Subject: [PATCH 3/3] Create a new update and resources section on the new home page --- .../src/components/molecules/AppShellNew.jsx | 4 + .../components/molecules/ResourcesSection.jsx | 138 ++++++++++++++++++ .../components/molecules/UpdatesSection.jsx | 69 +++++++++ 3 files changed, 211 insertions(+) create mode 100644 uli-website/src/components/molecules/ResourcesSection.jsx create mode 100644 uli-website/src/components/molecules/UpdatesSection.jsx diff --git a/uli-website/src/components/molecules/AppShellNew.jsx b/uli-website/src/components/molecules/AppShellNew.jsx index 805cb601..3066a1fa 100644 --- a/uli-website/src/components/molecules/AppShellNew.jsx +++ b/uli-website/src/components/molecules/AppShellNew.jsx @@ -7,6 +7,8 @@ import FooterNew from "./FooterNew"; import { useTranslation } from "react-i18next"; import { useLocation } from "@reach/router"; import Projects from "./Projects"; +import UpdatesSection from "./UpdatesSection"; +import ResourcesSection from "./ResourcesSection"; export default function AppShellNew({ children }) { const { i18n } = useTranslation(); @@ -66,6 +68,8 @@ export default function AppShellNew({ children }) { {/* PAGE CONTENT */} {children} + + {/* FOOTER */} diff --git a/uli-website/src/components/molecules/ResourcesSection.jsx b/uli-website/src/components/molecules/ResourcesSection.jsx new file mode 100644 index 00000000..a7261fc5 --- /dev/null +++ b/uli-website/src/components/molecules/ResourcesSection.jsx @@ -0,0 +1,138 @@ +import React from "react"; +import { Box, Text } from "grommet"; +import sideBorder from "../../images/left-border.svg"; + +const resources = [ + { + heading: "For Platforms", + items: [ + { type: "Report", title: "Make It Real - Mapping AI-Facilitated Gendered Harm" }, + { type: "Guidelines", title: "Make It Real - Mapping AI-Facilitated Gendered Harm" }, + { type: "Database", title: "Make It Real - Mapping AI-Facilitated Gendered Harm" }, + ], + }, + { + heading: "For Educators", + items: [ + { type: "Report", title: "Make It Real - Mapping AI-Facilitated Gendered Harm" }, + { type: "Guidelines", title: "Make It Real - Mapping AI-Facilitated Gendered Harm" }, + { type: "Database", title: "Make It Real - Mapping AI-Facilitated Gendered Harm" }, + ], + }, + { + heading: "For Technologists", + items: [ + { type: "Report", title: "Make It Real - Mapping AI-Facilitated Gendered Harm" }, + { type: "Guidelines", title: "Make It Real - Mapping AI-Facilitated Gendered Harm" }, + { type: "Database", title: "Make It Real - Mapping AI-Facilitated Gendered Harm" }, + ], + }, +]; + +const ResourcesSection = () => { + return ( + + + {/* Top Decorative Border */} + + + {/* Centered Content Wrapper */} + + + + {/* Title */} + + Resources + + + {/* Sections */} + {resources.map((section, index) => ( + + + + + {/* Left Heading */} + + + {section.heading} + + + + {/* Right Content */} + + {section.items.map((item, idx) => ( + + {/* Type */} + + {item.type} + + + {/* Title */} + + {item.title} + + + ))} + + + + + {/* Divider Line */} + {index !== resources.length - 1 && ( + + )} + + + ))} + + + + + {/* Bottom Decorative Border */} + + + + ); +}; + +export default ResourcesSection; diff --git a/uli-website/src/components/molecules/UpdatesSection.jsx b/uli-website/src/components/molecules/UpdatesSection.jsx new file mode 100644 index 00000000..f6a734f3 --- /dev/null +++ b/uli-website/src/components/molecules/UpdatesSection.jsx @@ -0,0 +1,69 @@ +import React from "react"; +import { Box, Text } from "grommet"; +import sideBorder from "../../images/left-border.svg"; + + +const updates = [ + { date: "03 Nov 2023", title: "Make It Real - Mapping AI-Facilitated" }, + { date: "03 Nov 2023", title: "Make It Real - Mapping AI-Facilitated" }, + { date: "03 Nov 2023", title: "Make It Real - Mapping AI-Facilitated" }, + { date: "03 Nov 2023", title: "Make It Real - Mapping AI-Facilitated" }, +]; + +const UpdatesSection = () => { + return ( + + {/* Top Border */} + + + {/* Content */} + + + + {updates.map((item, index) => ( + + + {item.date} + + + + {item.title} + + + ))} + + + + {/* Bottom Border */} + + + ); +}; + +export default UpdatesSection;