Radial gradient

components/dashboard/header-dao.tsx

@@ -32,12 +32,18 @@ export const HeaderDao = () => {
 
   return (
     <header className="relative flex w-full justify-center">
+      {/* Radial gradients */}
+      <section className="bg-ellipse-34 absolute top-[70px] right-[80px] -z-10 size-[180px] rounded-full blur-[120px] sm:right-[80px] sm:size-[320px]" />
+      <section className="bg-ellipse-35 absolute left-[68px] top-[170px] -z-10 size-[250px] rounded-full blur-[80px] sm:size-[400px]" />
+      <section className="bg-ellipse-36 absolute right-[400px] top-[153px] -z-10 hidden size-[540px] rounded-full blur-[120px] lg:block" />
+
       <div className="flex w-full max-w-screen-xl flex-col gap-y-6">
         <div className="flex flex-col gap-y-8">
           <div className="md:w-4/5">
             <Heading>{PUB_APP_NAME} DAO</Heading>
             <p className="text-xl leading-normal text-neutral-600 md:text-2xl">
-              Welcome to the {PUB_APP_NAME} DAO's Governance app. Use this tool to engage with the community and shape the future direction of the protocol.
+              Welcome to the {PUB_APP_NAME} DAO's Governance app. Use this tool to engage with the community and shape
+              the future direction of the protocol.
             </p>
           </div>
         </div>

tailwind.config.ts

@@ -10,6 +10,14 @@ const config: Config = {
   ],
   theme: {
     extend: {
+      backgroundImage: {
+        "ellipse-35":
+          "radial-gradient(50% 50% at 50% 50%, rgba(61, 136, 255, 0.14) 0%, rgba(207, 227, 255, 0.18) 100%)",
+        "ellipse-36":
+          "radial-gradient(50% 50% at 50% 50%, rgba(191, 255, 55, 0.11) 0%, rgba(189, 217, 255, 0.23) 100%)",
+        "ellipse-34":
+          "radial-gradient(50% 50% at 50% 50%, rgba(105, 164, 250, 0.65) 0%, rgba(207, 227, 255, 0.55) 100%)",
+      },
       colors: {
         primary: {
           50: "rgb(var(--ods-color-primary-50) / <alpha-value>)",