diff --git a/DIRECTUS_CHECKLIST.md b/DIRECTUS_CHECKLIST.md index de084ff..dd97ca7 100644 --- a/DIRECTUS_CHECKLIST.md +++ b/DIRECTUS_CHECKLIST.md @@ -167,7 +167,7 @@ consent.hide | de | Ausblenden ## Collection: content_pages -Diese sind für **längere Inhalte**. Nutze den Rich-Text-Editor in Directus oder Markdown. +Diese sind für **längere Inhalte**. Nutze den Ric-Text-Editor in Directus oder Markdown. ### Home – Hero (langere Beschreibung) - **slug**: home-hero diff --git a/app/components/ShaderGradientBackground.tsx b/app/components/ShaderGradientBackground.tsx new file mode 100644 index 0000000..9e6746c --- /dev/null +++ b/app/components/ShaderGradientBackground.tsx @@ -0,0 +1,76 @@ +"use client"; + +import React from "react"; +import { ShaderGradientCanvas, ShaderGradient } from "@shadergradient/react"; + +const ShaderGradientBackground = () => { + return ( +
+ + + +
+ ); +}; + +export default ShaderGradientBackground; diff --git a/app/globals.css b/app/globals.css index 5d01c21..d9aecc9 100644 --- a/app/globals.css +++ b/app/globals.css @@ -27,7 +27,7 @@ } body { - background-color: var(--background); + background: linear-gradient(135deg, rgba(250, 248, 243, 0.95) 0%, rgba(250, 248, 243, 0.92) 100%); color: var(--foreground); font-family: "Inter", sans-serif; margin: 0; @@ -36,6 +36,7 @@ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; + position: relative; } /* Custom Selection */ diff --git a/app/layout.tsx b/app/layout.tsx index 4922f0f..ccef9b4 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -5,6 +5,7 @@ import React from "react"; import ClientProviders from "./components/ClientProviders"; import { cookies } from "next/headers"; import { getBaseUrl } from "@/lib/seo"; +import ShaderGradientBackground from "./components/ShaderGradientBackground"; const inter = Inter({ variable: "--font-inter", @@ -33,6 +34,7 @@ export default async function RootLayout({ + {children} diff --git a/package-lock.json b/package-lock.json index 4154b2b..a9d9173 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "@next/bundle-analyzer": "^15.1.7", "@prisma/client": "^5.22.0", "@sentry/nextjs": "^10.36.0", + "@shadergradient/react": "^2.4.20", "@tiptap/extension-color": "^3.15.3", "@tiptap/extension-highlight": "^3.15.3", "@tiptap/extension-link": "^3.15.3", @@ -19,6 +20,7 @@ "@tiptap/html": "^3.15.3", "@tiptap/react": "^3.15.3", "@tiptap/starter-kit": "^3.15.3", + "@types/three": "^0.182.0", "@vercel/og": "^0.6.5", "clsx": "^2.1.1", "dotenv": "^16.6.1", @@ -38,6 +40,7 @@ "redis": "^5.8.2", "sanitize-html": "^2.17.0", "tailwind-merge": "^2.6.0", + "three": "^0.182.0", "zod": "^4.3.5" }, "devDependencies": { @@ -1335,6 +1338,12 @@ "@jridgewell/sourcemap-codec": "^1.4.10" } }, + "node_modules/@dimforge/rapier3d-compat": { + "version": "0.12.0", + "resolved": "https://registry.npmjs.org/@dimforge/rapier3d-compat/-/rapier3d-compat-0.12.0.tgz", + "integrity": "sha512-uekIGetywIgopfD97oDL5PfeezkFpNhwlzlaEYNOA0N6ghdsOvh/HYjSMek5Q2O1PYvRSDFcqFVJl4r4ZBwOow==", + "license": "Apache-2.0" + }, "node_modules/@discoveryjs/json-ext": { "version": "0.5.7", "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz", @@ -5263,6 +5272,16 @@ "webpack": ">=4.40.0" } }, + "node_modules/@shadergradient/react": { + "version": "2.4.20", + "resolved": "https://registry.npmjs.org/@shadergradient/react/-/react-2.4.20.tgz", + "integrity": "sha512-MVYvYgTHK3d36C2jNKzt4OzWeyNyc/bWI0zKRyv5EgI2hmUee8nD0cmuNX9X1lw1RCcuof6n1Rnj63jWepZHJA==", + "license": "MIT", + "peerDependencies": { + "react": "^18.2.0 || ^19.0.0", + "react-dom": "^18.2.0 || ^19.0.0" + } + }, "node_modules/@shuding/opentype.js": { "version": "1.4.0-beta.0", "resolved": "https://registry.npmjs.org/@shuding/opentype.js/-/opentype.js-1.4.0-beta.0.tgz", @@ -6726,6 +6745,12 @@ "dev": true, "license": "MIT" }, + "node_modules/@tweenjs/tween.js": { + "version": "23.1.3", + "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-23.1.3.tgz", + "integrity": "sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==", + "license": "MIT" + }, "node_modules/@types/aria-query": { "version": "5.0.4", "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz", @@ -7094,6 +7119,12 @@ "dev": true, "license": "MIT" }, + "node_modules/@types/stats.js": { + "version": "0.17.4", + "resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.4.tgz", + "integrity": "sha512-jIBvWWShCvlBqBNIZt0KAshWpvSjhkwkEu4ZUcASoAvhmrgAUI2t1dXrjSL4xXVLB4FznPrIsX3nKXFl/Dt4vA==", + "license": "MIT" + }, "node_modules/@types/tedious": { "version": "4.0.14", "resolved": "https://registry.npmjs.org/@types/tedious/-/tedious-4.0.14.tgz", @@ -7103,6 +7134,27 @@ "@types/node": "*" } }, + "node_modules/@types/three": { + "version": "0.182.0", + "resolved": "https://registry.npmjs.org/@types/three/-/three-0.182.0.tgz", + "integrity": "sha512-WByN9V3Sbwbe2OkWuSGyoqQO8Du6yhYaXtXLoA5FkKTUJorZ+yOHBZ35zUUPQXlAKABZmbYp5oAqpA4RBjtJ/Q==", + "license": "MIT", + "dependencies": { + "@dimforge/rapier3d-compat": "~0.12.0", + "@tweenjs/tween.js": "~23.1.3", + "@types/stats.js": "*", + "@types/webxr": ">=0.5.17", + "@webgpu/types": "*", + "fflate": "~0.8.2", + "meshoptimizer": "~0.22.0" + } + }, + "node_modules/@types/three/node_modules/fflate": { + "version": "0.8.2", + "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz", + "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==", + "license": "MIT" + }, "node_modules/@types/tough-cookie": { "version": "4.0.5", "resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.5.tgz", @@ -7121,6 +7173,12 @@ "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==", "license": "MIT" }, + "node_modules/@types/webxr": { + "version": "0.5.24", + "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.24.tgz", + "integrity": "sha512-h8fgEd/DpoS9CBrjEQXR+dIDraopAEfu4wYVNY2tEPwk60stPWhvZMf4Foo5FakuQ7HFZoa8WceaWFervK2Ovg==", + "license": "MIT" + }, "node_modules/@types/whatwg-mimetype": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/@types/whatwg-mimetype/-/whatwg-mimetype-3.0.2.tgz", @@ -7592,6 +7650,12 @@ "@xtuc/long": "4.2.2" } }, + "node_modules/@webgpu/types": { + "version": "0.1.69", + "resolved": "https://registry.npmjs.org/@webgpu/types/-/types-0.1.69.tgz", + "integrity": "sha512-RPmm6kgRbI8e98zSD3RVACvnuktIja5+yLgDAkTmxLr90BEwdTXRQWNLF3ETTTyH/8mKhznZuN5AveXYFEsMGQ==", + "license": "BSD-3-Clause" + }, "node_modules/@xtuc/ieee754": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz", @@ -13365,6 +13429,12 @@ "node": ">= 8" } }, + "node_modules/meshoptimizer": { + "version": "0.22.0", + "resolved": "https://registry.npmjs.org/meshoptimizer/-/meshoptimizer-0.22.0.tgz", + "integrity": "sha512-IebiK79sqIy+E4EgOr+CAw+Ke8hAspXKzBd0JdgEmPHiAwmvEj2S4h1rfvo+o/BnfEYd/jAOg5IeeIjzlzSnDg==", + "license": "MIT" + }, "node_modules/micromark": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/micromark/-/micromark-4.0.2.tgz", @@ -14088,17 +14158,6 @@ } } }, - "node_modules/next-intl/node_modules/@swc/helpers": { - "version": "0.5.18", - "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.18.tgz", - "integrity": "sha512-TXTnIcNJQEKwThMMqBXsZ4VGAza6bvN4pa41Rkqoio6QBKMvo+5lexeTMScGCIxtzgQJzElcvIltani+adC5PQ==", - "license": "Apache-2.0", - "optional": true, - "peer": true, - "dependencies": { - "tslib": "^2.8.0" - } - }, "node_modules/next/node_modules/postcss": { "version": "8.4.31", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz", @@ -14837,7 +14896,6 @@ "version": "2.3.2", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", - "dev": true, "hasInstallScript": true, "license": "MIT", "optional": true, @@ -17029,6 +17087,12 @@ "node": ">=0.8" } }, + "node_modules/three": { + "version": "0.182.0", + "resolved": "https://registry.npmjs.org/three/-/three-0.182.0.tgz", + "integrity": "sha512-GbHabT+Irv+ihI1/f5kIIsZ+Ef9Sl5A1Y7imvS5RQjWgtTPfPnZ43JmlYI7NtCRDK9zir20lQpfg8/9Yd02OvQ==", + "license": "MIT" + }, "node_modules/tiny-inflate": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/tiny-inflate/-/tiny-inflate-1.0.3.tgz", diff --git a/package.json b/package.json index 13262d3..b2b9158 100644 --- a/package.json +++ b/package.json @@ -55,6 +55,7 @@ "@next/bundle-analyzer": "^15.1.7", "@prisma/client": "^5.22.0", "@sentry/nextjs": "^10.36.0", + "@shadergradient/react": "^2.4.20", "@tiptap/extension-color": "^3.15.3", "@tiptap/extension-highlight": "^3.15.3", "@tiptap/extension-link": "^3.15.3", @@ -63,6 +64,7 @@ "@tiptap/html": "^3.15.3", "@tiptap/react": "^3.15.3", "@tiptap/starter-kit": "^3.15.3", + "@types/three": "^0.182.0", "@vercel/og": "^0.6.5", "clsx": "^2.1.1", "dotenv": "^16.6.1", @@ -82,6 +84,7 @@ "redis": "^5.8.2", "sanitize-html": "^2.17.0", "tailwind-merge": "^2.6.0", + "three": "^0.182.0", "zod": "^4.3.5" }, "devDependencies": {