feat(landingpage): add blur bg pattern (#1123)

inovex · Dec 6, 2023 · 067d812 · 067d812
1 parent 99fbbc2
commit 067d812
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 0 deletions.
diff --git a/packages/landingpage/components/layout.tsx b/packages/landingpage/components/layout.tsx
@@ -10,6 +10,7 @@ export default function Layout({ children }: { children: ReactNode }) {
 
   return (
     <div className="inovex-elements-typo inovex-elements-theme">
+      <div className="blur-bg"></div>
       <Head>
         <meta
           name="viewport"

diff --git a/packages/landingpage/styles/globals.css b/packages/landingpage/styles/globals.css
@@ -8,6 +8,24 @@ body {
   margin: 0;
   font-family: Lato, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  position: relative;
+}
+
+:root .blur-bg {
+  position: absolute;
+  inset: 0;
+  z-index: -10;
+  background: radial-gradient(
+      circle at 15% 11%,
+      var(--inovex-elements-p-2) 2%,
+      transparent 17%
+    ),
+    radial-gradient(
+      circle at 75% 50%,
+      var(--inovex-elements-p-2) 1%,
+      transparent 50%
+    );
+  filter: blur(10rem);
 }
 
 :root h1.header-d2,