Add Projects section and new AppShell/Navbar components for new home …

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 (
+    <Grommet theme={Theme}>
+      <main
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          minHeight: "100vh",
+        }}
+      >
+        <Helmet>
+          <meta charSet="utf-8" />
+          <title>{title}</title>
+          <link rel="stylesheet" href="/layout.css" />
+          <link rel="stylesheet" href="https://use.typekit.net/twt1ywc.css" />
+          <meta property="og:title" content={title} />
+          <meta name="icon" href="images/favicon-32x32.png" />
+          <script
+            defer
+            data-domain="uli.tattle.co.in"
+            src="https://plausible.io/js/plausible.js"
+          ></script>
+        </Helmet>
+
+        {/* NEW NAVBAR */}
+        <NavBarNew />
+
+        {/* PAGE CONTENT */}
+        <Box flex="grow">{children}</Box>
+        <Projects/>
+        {/* FOOTER */}
+        <Footer />
+      </main>
+    </Grommet>
+  );
+}

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 ---------- */}
+      <Box
+        height="20px"
+        style={{
+          backgroundImage: `url(${navbarBg})`,
+          backgroundRepeat: "repeat-x",
+          backgroundPosition: "top left",
+          backgroundSize: "auto 20px",
+        }}
+      />
+
+      {/* ---------- NAVBAR ---------- */}
+      <Box
+        align="center"
+        background="#fff6e9"
+        pad={{ vertical: "medium", horizontal: "small" }}
+      >
+        <Box
+          width="xlarge"
+          direction="row"
+          align="center"
+          justify="between"
+          style={{
+            position: "relative",
+          }}
+        >
+          {/* ---------- LEFT ---------- */}
+          <Box direction="row" gap="medium">
+            <NavLink to="/">
+              <Text size="small">Tattle</Text>
+            </NavLink>
+          </Box>
+
+          {/* ---------- CENTER LOGO ---------- */}
+          <Box
+            style={{
+              position: size === "small" ? "static" : "absolute",
+              left: "50%",
+              transform: size === "small" ? "none" : "translateX(-50%)",
+              cursor: "pointer",
+            }}
+            onClick={() => navigate("/")}
+          >
+            <img
+              src="/Uli_Logo.png"
+              alt="Uli Logo"
+              style={{ height: "40px" }}
+            />
+          </Box>
+
+          {/* ---------- RIGHT ---------- */}
+          <Box direction="row" gap="medium">
+            <NavLink to="/contact">
+              <Text size="small">Contact</Text>
+            </NavLink>
+            <NavLink to="/about">
+              <Text size="small">About us</Text>
+            </NavLink>
+            <NavLink to="/data">
+              <Text size="small">Data Y</Text>
+            </NavLink>
+          </Box>
+        </Box>
+      </Box>
+    </>
+  );
+}

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 (
+    <div
+      style={{
+        background: "#fde9d9",
+        padding: "10px",
+        clipPath: pixelCutShape,
+      }}
+    >
+      <div
+        style={{
+          backgroundColor: "#fde9d9",
+          padding: "44px 56px",
+          clipPath: pixelCutShape,
+        }}
+      >
+        <div
+          style={{
+            display: "flex",
+            flexDirection: reverse ? "row-reverse" : "row",
+            alignItems: "center",
+            justifyContent: "space-between",
+            gap: "48px",
+          }}
+        >
+          {/* LEFT ICON */}
+          <img
+            src={projectImage}
+            alt=""
+            style={{ width: "180px" }}
+          />
+
+          {/* TEXT */}
+          <div style={{ maxWidth: "55%" }}>
+            <h3 style={{ marginBottom: "16px" }}>{title}</h3>
+
+            <p style={{ marginBottom: "24px", lineHeight: "1.6" }}>
+              {description}
+            </p>
+
+            <div style={{ display: "flex", gap: "18px" }}>
+              <button style={btnStyle}>Install</button>
+              <button style={btnStyle}>Install</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const btnStyle = {
+  background: "transparent",
+  border: "2px dashed #000",
+  padding: "10px 28px",
+  cursor: "pointer",
+};
+
+export default ProjectCard;

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 (
+    <section
+      style={{
+        backgroundColor: "#fff6eb",
+        position: "relative",
+      }}
+    >
+      {/* 🔝 TOP BORDER */}
+      <div
+        style={{
+          height: "50px",
+          backgroundImage: `url(${topBorder})`,
+          backgroundSize: "auto 100%",
+        }}
+      />
+
+      {/* ⬅️➡️ SIDE BORDERS WRAPPER */}
+      <div
+        style={{
+          backgroundImage: `url(${sideBorder}), url(${sideBorder})`,
+          backgroundRepeat: "repeat-y, repeat-y",
+          backgroundPosition: "left top, right top",
+          backgroundSize: "auto 100%",
+          padding: "80px 40px",
+        }}
+      >
+        <div
+          style={{
+            maxWidth: "1200px",
+            margin: "0 auto",
+            display: "flex",
+            flexDirection: "column",
+            gap: "40px",
+          }}
+        >
+          {projects.map((project) => (
+            <ProjectCard key={project.id} {...project} />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Projects;

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,
+  },
+];

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 (
-    <AppShell>
-      <main style={{ padding: "2rem" }}>
-
+    <AppShellNew>
+      <main>
         <AnnouncementBanner>
           <Box>
             <Text size="xlarge">Announcement</Text>
@@ -18,10 +17,8 @@ const NewHome = () => {
           </Box>
 
         </AnnouncementBanner>
-        <h1>New Home</h1>
-        <p>This is a temporary placeholder for the new homepage design.</p>
       </main>
-    </AppShell >
+    </AppShellNew >
   )
 }