Design v2

.gitignore

@@ -1,3 +1,5 @@
 .vscode
 dom-html.txt
 .scannerwork
+**/.DS_Store
+

uli-website/package.json

@@ -16,6 +16,7 @@
     "deploy": "gatsby-plugin-s3 deploy --yes"
   },
   "dependencies": {
+    "@chenglou/pretext": "^0.0.4",
     "@mdx-js/react": "3.0.0",
     "babel-plugin-styled-components": "2.1.4",
     "gatsby": "5.12.9",

uli-website/src/components/atoms/DashedButton.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+export default function DashedButton({content, onClick, className=""}) {
+  return (
+    <button
+      className={`font-labrada bg-transparent cursor-pointer border-[0.5px] border-solid [border-image-source:url('/dashed-btn-bg.png')] [border-image-slice:0%_fill] [border-image-repeat:round] hover:bg-[#FFC8A6] active:bg-[#F28948] ${className}`}
+      onClick={onClick}
+    >
+      {content}
+    </button>
+  );
+}

uli-website/src/components/atoms/NavLinkNew.jsx

@@ -0,0 +1,21 @@
+import { Link } from 'gatsby';
+import { Text } from 'grommet'
+import styled from "styled-components";
+import React from 'react'
+
+// // Navlink component for the new design
+// export default function NavLink({children, className=""}) {
+//   return (
+//     <Text className={`cursor-pointer hover:text-[#F28948] hover:underline #{className}`}>{children}</Text>
+
+//   )
+// }
+
+export const NavLinkNew = styled(Link)`
+  text-decoration: none;
+  color: inherit;
+  &:hover {
+  color: #F28948;
+  text-decoration: underline;
+  }
+`;

uli-website/src/components/molecules/Announcements.jsx

@@ -0,0 +1,48 @@
+import { Box, Text } from "grommet";
+import React, { useState, useEffect, useContext } from "react";
+import DashedButton from "../atoms/DashedButton";
+import { navigate } from "gatsby";
+
+function AnnouncementBanner({ children }) {
+  return (
+    <Box
+      align="center"
+      className="
+
+    w-fit
+    mx-auto
+    text-center
+    border-solid
+    border-[1.2em]
+    px-2
+    [border-image-source:url('/announcement-bg.svg')]
+    [border-image-slice:33%_4%_fill]
+    [border-image-repeat:round]>
+    animate-[fadeUp_1.2s_ease-out_forwards]
+
+    "
+    >
+      {children}
+    </Box>
+  );
+}
+
+export default function Announcements() {
+  return (
+    <AnnouncementBanner>
+      <Box className="flex flex-col gap-2 items-center">
+        <Text className="text-[13px] font-bold font-labrada">Happy to Announce</Text>
+        <Text className="text-[13px] font-labrada leading-[140%]">
+          That white background would typically be a solid fill with border
+          radius, and using Auto Layout <br /> would be able to grow and shrink
+          based on the label overrides per instance.
+        </Text>
+        <DashedButton
+          className="mt-1 w-fit px-10 py-2"
+          content={<Text className="text-[13px] font-labrada tracking-[-0.05em]">learn more</Text>}
+          onClick={() => navigate("/")}
+        />
+      </Box>
+    </AnnouncementBanner>
+  );
+}

uli-website/src/components/molecules/AppShellNew.jsx

@@ -0,0 +1,67 @@
+import { Grommet, Box } from "grommet";
+import * as React from "react";
+import { Helmet } from "react-helmet";
+import { Colors, NavLink, Theme } from "../atoms/UliCore";
+import NavBarNew from "./NavBarNew";
+import i18n from "../atoms/i18n";
+import { useTranslation } from "react-i18next";
+import { useLocation } from "@reach/router";
+import FooterNew from "./FooterNew";
+
+export default function AppShellNew({ children }) {
+  const { t, i18n } = useTranslation();
+  React.useEffect(() => {
+    const lang = localStorage.getItem("uli-lang");
+    i18n.changeLanguage(lang);
+  }, []);
+  const location = useLocation();
+
+  let fullPath = location.pathname;
+  if (fullPath.slice(-1) === "/") {
+    fullPath = fullPath.slice(0, -1);
+  }
+  let title = fullPath.split("/").at(-1);
+
+  if (["hi", "en", "ta", "ma"].includes(title)) {
+    title = "Uli";
+  }
+
+  title = formatTitle(title);
+
+  function formatTitle(str) {
+    return str
+      .split("-")
+      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+      .join(" ");
+  }
+  return (
+    <Grommet theme={Theme}>
+      <main
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          minHeight: "100vh",
+        }}
+      >
+        <Helmet>
+          <meta charSet="utf-8" />
+          <title>Uli</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>
+
+        <NavBarNew />
+        <Box flex="grow" className="font-labrada">{children}</Box>
+        <FooterNew />
+      </main>
+    </Grommet>
+  );
+}