diff --git a/apps/web/app/[lang]/layout.tsx b/apps/web/app/[lang]/layout.tsx
index 356aa6f..29e00e3 100644
--- a/apps/web/app/[lang]/layout.tsx
+++ b/apps/web/app/[lang]/layout.tsx
@@ -1,8 +1,11 @@
+"use client";
+
import Link from "next/link";
import "../globals.css";
import "@repo/design-system/styles";
import "@repo/design-system/themes/theme-default";
+import { Blobs } from "@repo/design-system/ui";
export default function RootLayout({
params: { lang },
@@ -22,6 +25,7 @@ export default function RootLayout({
+
Kalkulacka.1
diff --git a/packages/design-system/package.json b/packages/design-system/package.json
index 8e046c4..02e035a 100644
--- a/packages/design-system/package.json
+++ b/packages/design-system/package.json
@@ -4,6 +4,7 @@
"private": true,
"exports": {
"./ui": "./src/ui/index.ts",
+ "./svg": "./src/svg/index.ts",
"./themes/*": "./src/themes/*.css",
"./styles": "./dist/index.css",
"./fonts": "./dist/fonts",
diff --git a/packages/design-system/src/svg/blueBlob.tsx b/packages/design-system/src/svg/blueBlob.tsx
new file mode 100644
index 0000000..e08cadf
--- /dev/null
+++ b/packages/design-system/src/svg/blueBlob.tsx
@@ -0,0 +1,19 @@
+export function BlueBlob(
+ props: React.JSX.IntrinsicAttributes & React.SVGProps,
+) {
+ return (
+
+ );
+}
diff --git a/packages/design-system/src/svg/index.ts b/packages/design-system/src/svg/index.ts
new file mode 100644
index 0000000..a0b75ed
--- /dev/null
+++ b/packages/design-system/src/svg/index.ts
@@ -0,0 +1,2 @@
+export * from "./blueBlob";
+export * from "./redBlob";
diff --git a/packages/design-system/src/svg/redBlob.tsx b/packages/design-system/src/svg/redBlob.tsx
new file mode 100644
index 0000000..51e2b32
--- /dev/null
+++ b/packages/design-system/src/svg/redBlob.tsx
@@ -0,0 +1,19 @@
+export function RedBlob(
+ props: React.JSX.IntrinsicAttributes & React.SVGProps,
+) {
+ return (
+
+ );
+}
diff --git a/packages/design-system/src/ui/blobs/blobs.tsx b/packages/design-system/src/ui/blobs/blobs.tsx
new file mode 100644
index 0000000..d846c1b
--- /dev/null
+++ b/packages/design-system/src/ui/blobs/blobs.tsx
@@ -0,0 +1,16 @@
+import { RedBlob, BlueBlob } from "@repo/design-system/svg";
+
+const Blobs = () => {
+ return (
+ // background div - needs top placement
+
+ {/* blobs div */}
+
+
+
+
+
+ );
+};
+
+export { Blobs };
diff --git a/packages/design-system/src/ui/blobs/index.ts b/packages/design-system/src/ui/blobs/index.ts
new file mode 100644
index 0000000..4406f3a
--- /dev/null
+++ b/packages/design-system/src/ui/blobs/index.ts
@@ -0,0 +1 @@
+export * from "./blobs";
diff --git a/packages/design-system/src/ui/index.ts b/packages/design-system/src/ui/index.ts
index 53156a5..c0f6add 100644
--- a/packages/design-system/src/ui/index.ts
+++ b/packages/design-system/src/ui/index.ts
@@ -3,3 +3,4 @@ export * from "./button/index";
export * from "./card/index";
export * from "./progress/index";
export * from "./question/index";
+export * from "./blobs";