add: puffer branding

merkl.config.ts

@@ -42,34 +42,13 @@ import { eip712WalletActions } from "viem/zksync";
 import { coinbaseWallet, walletConnect } from "wagmi/connectors";
 
 export default createConfig({
-  appName: "Merkl",
-  modes: ["dark", "light"],
-  defaultTheme: "ignite",
+  appName: "Puffer",
+  modes: ["light"],
+  defaultTheme: "puffer",
   deposit: false,
   themes: {
-    ignite: {
-      base: createColoring(["#1755F4", "#FF7900", "#0D1530"], ["#1755F4", "#FF7900", "#FFFFFF"]),
-      info: createColoring(["#2ABDFF", "#2ABDFF", "#131620"], ["#FFFFFF", "#40B66B", "white"]),
-      good: createColoring(["#40B66B", "#40B66B", "#131620"], ["#FFFFFF", "#40B66B", "white"]),
-      warn: createColoring(["#ff9600", "#ff9600", "#131620"], ["#FFFFFF", "#40B66B", "white"]),
-      harm: createColoring(["#d22e14", "#d22e14", "#131620"], ["#FFFFFF", "#40B66B", "white"]),
-    },
-    merkl: {
-      base: createColoring(["#1755F4", "#FF7900", "#0D1530"], ["#1755F4", "#FF7900", "#FFFFFF"]),
-      info: createColoring(["#2ABDFF", "#2ABDFF", "#131620"], ["#FFFFFF", "#40B66B", "white"]),
-      good: createColoring(["#40B66B", "#40B66B", "#131620"], ["#FFFFFF", "#40B66B", "white"]),
-      warn: createColoring(["#ff9600", "#ff9600", "#131620"], ["#FFFFFF", "#40B66B", "white"]),
-      harm: createColoring(["#d22e14", "#d22e14", "#131620"], ["#FFFFFF", "#40B66B", "white"]),
-    },
-    backoffice: {
-      base: createColoring(["#8B8D98", "#9984D2", "#000000"], ["#8B8D98", "#9984D2", "#FFFFFF"]),
-      info: createColoring(["#2ABDFF", "#2ABDFF", "#131620"], ["#FFFFFF", "#40B66B", "white"]),
-      good: createColoring(["#40B66B", "#40B66B", "#131620"], ["#FFFFFF", "#40B66B", "white"]),
-      warn: createColoring(["#ff9600", "#ff9600", "#131620"], ["#FFFFFF", "#40B66B", "white"]),
-      harm: createColoring(["#d22e14", "#d22e14", "#131620"], ["#FFFFFF", "#40B66B", "white"]),
-    },
     puffer: {
-      base: createColoring(["#2A35BD", "#BFFF38", "#FFFFFF"], ["#2A35BD", "#BFFF38", "#FFFFFF"]),
+      base: createColoring(["#2A35BD", "#F5F9FF", "#FFFFFF"], ["#2A35BD", "#F5F9FF", "#FFFFFF"]),
       info: createColoring(["#2ABDFF", "#2ABDFF", "#131620"], ["#FFFFFF", "#40B66B", "white"]),
       good: createColoring(["#40B66B", "#40B66B", "#131620"], ["#FFFFFF", "#40B66B", "white"]),
       warn: createColoring(["#ff9600", "#ff9600", "#131620"], ["#FFFFFF", "#40B66B", "white"]),
@@ -128,13 +107,12 @@ export default createConfig({
     // },
   },
   socials: {
-    discord: "",
-    telegram: "https://t.me/+2T0RNabX2ANkMzAx",
-    x: "https://x.com/zksyncignite",
-    github: "",
+    discord: "https://discord.com/invite/pufferfi",
+    telegram: "https://t.me/puffer_fi",
+    x: "https://x.com/puffer_finance",
+    github: "https://github.com/PufferFinance",
   },
   links: {
-    docs: "https://docs.merkl.xyz/",
     merkl: "https://merkl.xyz/",
     merklTermsConditions: "https://app.merkl.xyz/merklTerms.pdf",
     merklPrivacy: "https://privacy.angle.money",
@@ -192,8 +170,8 @@ export default createConfig({
         customStoragePrefix: "wagmi",
         projectId: "26c912aadd2132cd869a5edc00aeea0f",
         metadata: {
-          name: "Merkl Lite",
-          description: "Merkl Lite",
+          name: "Puffer",
+          description: "Puffer",
           url: "https://app.merkl.xyz.com",
           icons: [],
         },

public/site.webmanifest

@@ -0,0 +1,21 @@
+{
+  "name": "Puffer app",
+  "short_name": "Puffer",
+  "icons": [
+    {
+      "src": "/web-app-manifest-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/web-app-manifest-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}

src/components/composite/Hero.tsx

@@ -1,6 +1,18 @@
 import { useLocation } from "@remix-run/react";
-import { Container, Divider, Group, Icon, type IconProps, Icons, Tabs, Text, Title, Value } from "dappkit";
-import { Button } from "dappkit";
+import {
+  Button,
+  Container,
+  Divider,
+  Group,
+  Icon,
+  type IconProps,
+  Icons,
+  OverrideTheme,
+  Tabs,
+  Text,
+  Title,
+  Value,
+} from "dappkit";
 import config from "merkl.config";
 import type { PropsWithChildren, ReactNode } from "react";
 
@@ -35,90 +47,89 @@ export default function Hero({
   const location = useLocation();
   return (
     <>
-      {/* TODO: Align lines & descriptions on all pages  */}
-      {/* TODO: On sub-pages (all pages except Opportunities): Replace the banner by a color  */}
-      <Group
-        className={`${
-          location?.pathname === "/" || location?.pathname === "/opportunities" ? "bg-cover" : "bg-main-6"
-        } flex-row justify-between bg-no-repeat xl:aspect-auto xl:min-h-[350px] aspect-[1440/300]`}
-        style={{
-          backgroundImage:
-            location?.pathname === "/" || location?.pathname === "/opportunities"
-              ? `url('${config.images.hero}')`
-              : "none",
-        }}>
-        <Container>
-          <Group className="flex-col h-full py-xl gap-xl lg:gap-xs">
-            <Group className="items-center" size="sm">
-              <Button to={navigation?.link ?? "/"} look="soft" bold size="xs">
-                Home
-              </Button>
-              {breadcrumbs?.map(breadcrumb => {
-                if (breadcrumb.component) return <>{breadcrumb.component}</>;
-                return (
-                  <Button key={breadcrumb.link} to={breadcrumb.link} look="soft" size="xs">
-                    <Icon remix="RiArrowRightSLine" />
-                    {breadcrumb.name}
-                  </Button>
-                );
-              })}
-            </Group>
-            <Group className="grow items-center justify-between gap-xl lg:gap-xl*4">
-              <Group className="flex-col flex-1 gap-xl lg:gap-lg">
-                <Group>
-                  <Group className="items-center gap-0 md:gap-lg">
-                    {!!icons && (
-                      <Icons size="lg">
-                        {icons?.length > 1
-                          ? icons?.map(icon => (
-                              <Icon
-                                className="hidden md:block text-main-12 !w-lg*4 !h-lg*4"
-                                key={`${Object.values(icon)}`}
-                                {...icon}
-                              />
-                            ))
-                          : icons?.map(icon => (
-                              <Icon
-                                className="hidden md:block text-main-12 !w-xl*4 !h-xl*4"
-                                key={`${Object.values(icon)}`}
-                                {...icon}
-                              />
-                            ))}
-                      </Icons>
-                    )}
-                    <Title h={1} size={2}>
-                      {title}
-                    </Title>
+      <OverrideTheme mode="light">
+        <Group
+          className={`${
+            location?.pathname === "/" || location?.pathname === "/opportunities" ? "bg-cover" : "bg-main-6"
+          } flex-row justify-between bg-no-repeat xl:aspect-auto xl:min-h-[350px] aspect-[1440/300]`}
+          style={{
+            backgroundImage:
+              location?.pathname === "/" || location?.pathname === "/opportunities"
+                ? `url('${config.images.hero}')`
+                : "none",
+          }}>
+          <Container>
+            <Group className="flex-col h-full py-xl gap-xl lg:gap-xs">
+              <Group className="items-center" size="sm">
+                <Button to={navigation?.link ?? "/"} look="soft" bold size="xs">
+                  Home
+                </Button>
+                {breadcrumbs?.map(breadcrumb => {
+                  if (breadcrumb.component) return <>{breadcrumb.component}</>;
+                  return (
+                    <Button key={breadcrumb.link} to={breadcrumb.link} look="soft" size="xs">
+                      <Icon remix="RiArrowRightSLine" />
+                      {breadcrumb.name}
+                    </Button>
+                  );
+                })}
+              </Group>
+              <Group className="grow items-center justify-between gap-xl lg:gap-xl*4">
+                <Group className="flex-col flex-1 gap-xl lg:gap-lg">
+                  <Group>
+                    <Group className="items-center gap-0 md:gap-lg">
+                      {!!icons && (
+                        <Icons size="lg">
+                          {icons?.length > 1
+                            ? icons?.map(icon => (
+                                <Icon
+                                  className="hidden md:block text-main-12 !w-lg*4 !h-lg*4"
+                                  key={`${Object.values(icon)}`}
+                                  {...icon}
+                                />
+                              ))
+                            : icons?.map(icon => (
+                                <Icon
+                                  className="hidden md:block text-main-12 !w-xl*4 !h-xl*4"
+                                  key={`${Object.values(icon)}`}
+                                  {...icon}
+                                />
+                              ))}
+                        </Icons>
+                      )}
+                      <Title h={1} size={2}>
+                        {title}
+                      </Title>
+                    </Group>
                   </Group>
+                  <Divider look="base" />
+                  {!!description && (
+                    <Text size="lg" bold>
+                      {description}
+                    </Text>
+                  )}
+                  {!!tags && <Group className="mb-lg">{tags}</Group>}
                 </Group>
-                <Divider look="base" />
-                {!!description && (
-                  <Text size="lg" bold>
-                    {description}
-                  </Text>
+                {!!sideDatas && (
+                  <Group className="w-full lg:w-auto lg:flex-col mr-xl*2" size="lg">
+                    {sideDatas.map(data => (
+                      <Group key={data.key} className="flex-col" size="xs">
+                        <Text size={4} className="!text-main-12">
+                          {data.data}
+                        </Text>
+
+                        <Text size="md" bold>
+                          {data.label}
+                        </Text>
+                      </Group>
+                    ))}
+                  </Group>
                 )}
-                {!!tags && <Group className="mb-lg">{tags}</Group>}
               </Group>
-              {!!sideDatas && (
-                <Group className="w-full lg:w-auto lg:flex-col mr-xl*2" size="lg">
-                  {sideDatas.map(data => (
-                    <Group key={data.key} className="flex-col" size="xs">
-                      <Text size={4} className="!text-main-12">
-                        {data.data}
-                      </Text>
-
-                      <Text size="md" bold>
-                        {data.label}
-                      </Text>
-                    </Group>
-                  ))}
-                </Group>
-              )}
             </Group>
-          </Group>
-        </Container>
-      </Group>
-
+          </Container>
+        </Group>
+      </OverrideTheme>
       {!!tabs && <Tabs tabs={tabs} look="base" size="lg" />}
 
       <div>{children}</div>

src/config/type.ts

@@ -18,6 +18,7 @@ export type MerklConfig<T extends Themes> = {
     spacing: { [Size in (typeof sizeScale)[number]]: number };
     radius: { [Size in (typeof sizeScale)[number]]: number };
   };
+  fonts?: { title: string[]; text: string[]; mono: string[] };
   tags?: string[];
   defaultTheme: keyof T;
   deposit?: boolean;