Compare commits
3 Commits
2dc5401179
...
goodboy
| Author | SHA1 | Date | |
|---|---|---|---|
| 346ec484fa | |||
|
217bbdc6a7 | ||
|
|
7e8d40878b |
73
package-lock.json
generated
73
package-lock.json
generated
@@ -39,6 +39,7 @@
|
||||
"@react-three/fiber": "^8.18.0",
|
||||
"@tabler/icons-react": "^3.36.1",
|
||||
"@tanstack/react-query": "^5.83.0",
|
||||
"appwrite": "^22.0.0",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"cmdk": "^1.1.1",
|
||||
@@ -48,6 +49,7 @@
|
||||
"lucide-react": "^0.462.0",
|
||||
"motion": "^12.29.2",
|
||||
"next-themes": "^0.3.0",
|
||||
"ogl": "^1.0.11",
|
||||
"react": "^18.3.1",
|
||||
"react-day-picker": "^8.10.1",
|
||||
"react-dom": "^18.3.1",
|
||||
@@ -136,6 +138,7 @@
|
||||
"integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@babel/code-frame": "^7.29.0",
|
||||
"@babel/generator": "^7.29.0",
|
||||
@@ -3050,8 +3053,7 @@
|
||||
"resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
|
||||
"integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/babel__core": {
|
||||
"version": "7.20.5",
|
||||
@@ -3199,6 +3201,7 @@
|
||||
"integrity": "sha512-bJFoMATwIGaxxx8VJPeM8TonI8t579oRvgAuT8zFugJsJZgzqv0Fu8Mhp68iecjzG7cnN3mO2dJQ5uUM2EFrgQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"undici-types": "~6.21.0"
|
||||
}
|
||||
@@ -3214,6 +3217,7 @@
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.23.tgz",
|
||||
"integrity": "sha512-/LDXMQh55EzZQ0uVAZmKKhfENivEvWz6E+EYzh+/MCjMhNsotd+ZHhBGIjFDTi6+fz0OhQQQLbTgdQIxxCsC0w==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@types/prop-types": "*",
|
||||
"csstype": "^3.0.2"
|
||||
@@ -3225,6 +3229,7 @@
|
||||
"integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
|
||||
"devOptional": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"peerDependencies": {
|
||||
"@types/react": "^18.0.0"
|
||||
}
|
||||
@@ -3290,6 +3295,7 @@
|
||||
"integrity": "sha512-Zhy8HCvBUEfBECzIl1PKqF4p11+d0aUJS1GeUiuqK9WmOug8YCmC4h4bjyBvMyAMI9sbRczmrYL5lKg/YMbrcQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@typescript-eslint/scope-manager": "8.38.0",
|
||||
"@typescript-eslint/types": "8.38.0",
|
||||
@@ -3652,6 +3658,7 @@
|
||||
"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"acorn": "bin/acorn"
|
||||
},
|
||||
@@ -3769,6 +3776,16 @@
|
||||
"node": ">= 8"
|
||||
}
|
||||
},
|
||||
"node_modules/appwrite": {
|
||||
"version": "22.0.0",
|
||||
"resolved": "https://registry.npmjs.org/appwrite/-/appwrite-22.0.0.tgz",
|
||||
"integrity": "sha512-iFlfshYttuQheIyar6m789+Z/gvfKWQxWQCDhHzH9cEkFkn+laJZV8nMvGRH+1rTYNfAcFuycWKBGZiEDFxXug==",
|
||||
"license": "BSD-3-Clause",
|
||||
"dependencies": {
|
||||
"bignumber.js": "9.0.0",
|
||||
"json-bigint": "1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/arg": {
|
||||
"version": "5.0.2",
|
||||
"resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
|
||||
@@ -3885,6 +3902,15 @@
|
||||
],
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/bignumber.js": {
|
||||
"version": "9.0.0",
|
||||
"resolved": "https://registry.npmjs.org/bignumber.js/-/bignumber.js-9.0.0.tgz",
|
||||
"integrity": "sha512-t/OYhhJ2SD+YGBQcjY8GzzDHEk9f3nerxjtfa6tlMXfe7frs/WozhvCNoGvpM0P3bNf3Gq5ZRMlGr5f3r4/N8A==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/binary-extensions": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
|
||||
@@ -3940,6 +3966,7 @@
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"caniuse-lite": "^1.0.30001726",
|
||||
"electron-to-chromium": "^1.5.173",
|
||||
@@ -4417,6 +4444,7 @@
|
||||
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
|
||||
"integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/kossnocorp"
|
||||
@@ -4513,8 +4541,7 @@
|
||||
"resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
|
||||
"integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/dom-helpers": {
|
||||
"version": "5.2.1",
|
||||
@@ -4572,7 +4599,8 @@
|
||||
"version": "8.6.0",
|
||||
"resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.6.0.tgz",
|
||||
"integrity": "sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==",
|
||||
"license": "MIT"
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/embla-carousel-react": {
|
||||
"version": "8.6.0",
|
||||
@@ -4761,6 +4789,7 @@
|
||||
"integrity": "sha512-LSehfdpgMeWcTZkWZVIJl+tkZ2nuSkyyB9C27MZqFWXuph7DvaowgcTvKqxvpLW1JZIk8PN7hFY3Rj9LQ7m7lg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@eslint-community/eslint-utils": "^4.2.0",
|
||||
"@eslint-community/regexpp": "^4.12.1",
|
||||
@@ -5688,6 +5717,7 @@
|
||||
"integrity": "sha512-SYhBvTh89tTfCD/CRdSOm13mOBa42iTaTyfyEWBdKcGdPxPtLFBXuHR8XHb33YNYaP+lLbmSvBTsnoesCNJEsQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"abab": "^2.0.6",
|
||||
"acorn": "^8.8.1",
|
||||
@@ -5741,6 +5771,15 @@
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/json-bigint": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/json-bigint/-/json-bigint-1.0.0.tgz",
|
||||
"integrity": "sha512-SiPv/8VpZuWbvLSMtTDU8hEfrZWg/mH/nV/b4o0CYbSxu1UIQPLdwKOCIyLQX+VIPO5vrLX3i8qtqFyhdPSUSQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"bignumber.js": "^9.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/json-buffer": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
|
||||
@@ -6343,7 +6382,6 @@
|
||||
"integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"lz-string": "bin/bin.js"
|
||||
}
|
||||
@@ -6590,6 +6628,12 @@
|
||||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/ogl": {
|
||||
"version": "1.0.11",
|
||||
"resolved": "https://registry.npmjs.org/ogl/-/ogl-1.0.11.tgz",
|
||||
"integrity": "sha512-kUpC154AFfxi16pmZUK4jk3J+8zxwTWGPo03EoYA8QPbzikHoaC82n6pNTbd+oEaJonaE8aPWBlX7ad9zrqLsA==",
|
||||
"license": "Unlicense"
|
||||
},
|
||||
"node_modules/optionator": {
|
||||
"version": "0.9.4",
|
||||
"resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
|
||||
@@ -6785,6 +6829,7 @@
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"nanoid": "^3.3.11",
|
||||
"picocolors": "^1.1.1",
|
||||
@@ -6925,7 +6970,6 @@
|
||||
"integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"ansi-regex": "^5.0.1",
|
||||
"ansi-styles": "^5.0.0",
|
||||
@@ -6941,7 +6985,6 @@
|
||||
"integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
@@ -6952,7 +6995,6 @@
|
||||
"integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
@@ -6965,8 +7007,7 @@
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
||||
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/prop-types": {
|
||||
"version": "15.8.1",
|
||||
@@ -7040,6 +7081,7 @@
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
|
||||
"integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.1.0"
|
||||
},
|
||||
@@ -7066,6 +7108,7 @@
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
|
||||
"integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.1.0",
|
||||
"scheduler": "^0.23.2"
|
||||
@@ -7079,6 +7122,7 @@
|
||||
"resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.61.1.tgz",
|
||||
"integrity": "sha512-2vbXUFDYgqEgM2RcXcAT2PwDW/80QARi+PKmHy5q2KhuKvOlG8iIYgf7eIlIANR5trW9fJbP4r5aub3a4egsew==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=18.0.0"
|
||||
},
|
||||
@@ -7804,6 +7848,7 @@
|
||||
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
|
||||
"integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@alloc/quick-lru": "^5.2.0",
|
||||
"arg": "^5.0.2",
|
||||
@@ -7870,7 +7915,8 @@
|
||||
"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"
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/tiny-invariant": {
|
||||
"version": "1.3.3",
|
||||
@@ -7933,6 +7979,7 @@
|
||||
"integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
@@ -8055,6 +8102,7 @@
|
||||
"integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
|
||||
"dev": true,
|
||||
"license": "Apache-2.0",
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"tsc": "bin/tsc",
|
||||
"tsserver": "bin/tsserver"
|
||||
@@ -8255,6 +8303,7 @@
|
||||
"integrity": "sha512-qO3aKv3HoQC8QKiNSTuUM1l9o/XX3+c+VTgLHbJWHZGeTPVAg2XwazI9UWzoxjIJCGCV2zU60uqMzjeLZuULqA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"esbuild": "^0.21.3",
|
||||
"postcss": "^8.4.43",
|
||||
|
||||
@@ -44,6 +44,7 @@
|
||||
"@react-three/fiber": "^8.18.0",
|
||||
"@tabler/icons-react": "^3.36.1",
|
||||
"@tanstack/react-query": "^5.83.0",
|
||||
"appwrite": "^22.0.0",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"cmdk": "^1.1.1",
|
||||
@@ -53,6 +54,7 @@
|
||||
"lucide-react": "^0.462.0",
|
||||
"motion": "^12.29.2",
|
||||
"next-themes": "^0.3.0",
|
||||
"ogl": "^1.0.11",
|
||||
"react": "^18.3.1",
|
||||
"react-day-picker": "^8.10.1",
|
||||
"react-dom": "^18.3.1",
|
||||
|
||||
BIN
public/project pics/emailsorter.png
Normal file
BIN
public/project pics/emailsorter.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
64
scripts/create-appwrite-collection.mjs
Normal file
64
scripts/create-appwrite-collection.mjs
Normal file
@@ -0,0 +1,64 @@
|
||||
/**
|
||||
* Script zum Erstellen der Appwrite-Collection für Kontaktformulare.
|
||||
* Einmalig ausführen mit: node scripts/create-appwrite-collection.mjs
|
||||
*
|
||||
* Benötigt: API-Key aus Appwrite Console (Settings > API Keys)
|
||||
* Umgebungsvariable: APPWRITE_API_KEY=your-secret-key
|
||||
*/
|
||||
|
||||
import { Client, Databases, Permission, Role } from "appwrite";
|
||||
|
||||
const ENDPOINT = "https://appwrite.webklar.com/v1";
|
||||
const PROJECT_ID = "696b82270034001dab69";
|
||||
const DATABASE_ID = "698124a20035e8f6dc42";
|
||||
const COLLECTION_ID = "contact_submissions";
|
||||
|
||||
const apiKey = process.env.APPWRITE_API_KEY;
|
||||
if (!apiKey) {
|
||||
console.error(
|
||||
"Fehler: APPWRITE_API_KEY Umgebungsvariable fehlt.\n" +
|
||||
"Beispiel: $env:APPWRITE_API_KEY='your-key'; node scripts/create-appwrite-collection.mjs"
|
||||
);
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
const client = new Client().setEndpoint(ENDPOINT).setProject(PROJECT_ID).setKey(apiKey);
|
||||
const databases = new Databases(client);
|
||||
|
||||
async function createCollection() {
|
||||
try {
|
||||
// 1. Collection erstellen
|
||||
// Permission: "any" darf Dokumente erstellen (für öffentliches Kontaktformular)
|
||||
await databases.createCollection(
|
||||
DATABASE_ID,
|
||||
COLLECTION_ID,
|
||||
"Kontaktanfragen",
|
||||
[Permission.create(Role.any())],
|
||||
true
|
||||
);
|
||||
console.log("✓ Collection erstellt:", COLLECTION_ID);
|
||||
|
||||
// 2. Attribute hinzufügen (Appwrite erfordert kleine Wartezeit zwischen den Schritten)
|
||||
const delay = (ms) => new Promise((r) => setTimeout(r, ms));
|
||||
|
||||
await databases.createStringAttribute(DATABASE_ID, COLLECTION_ID, "name", 256, true);
|
||||
await delay(500);
|
||||
await databases.createStringAttribute(DATABASE_ID, COLLECTION_ID, "email", 512, true);
|
||||
await delay(500);
|
||||
await databases.createStringAttribute(DATABASE_ID, COLLECTION_ID, "company", 256, false);
|
||||
await delay(500);
|
||||
await databases.createStringAttribute(DATABASE_ID, COLLECTION_ID, "message", 4096, true);
|
||||
|
||||
console.log("✓ Attribute erstellt: name, email, company, message");
|
||||
console.log("\nCollection ist bereit. Kontaktformular kann jetzt genutzt werden.");
|
||||
} catch (err) {
|
||||
if (err.code === 409) {
|
||||
console.log("Collection existiert bereits:", COLLECTION_ID);
|
||||
} else {
|
||||
console.error("Fehler:", err.message || err);
|
||||
process.exit(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
createCollection();
|
||||
@@ -5,6 +5,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||
import { BrowserRouter, Routes, Route } from "react-router-dom";
|
||||
import Index from "./pages/Index";
|
||||
import ContactPage from "./pages/Contact";
|
||||
import AGBPage from "./pages/AGB";
|
||||
import NotFound from "./pages/NotFound";
|
||||
|
||||
const queryClient = new QueryClient();
|
||||
@@ -18,6 +19,7 @@ const App = () => (
|
||||
<Routes>
|
||||
<Route path="/" element={<Index />} />
|
||||
<Route path="/kontakt" element={<ContactPage />} />
|
||||
<Route path="/agb" element={<AGBPage />} />
|
||||
{/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
|
||||
<Route path="*" element={<NotFound />} />
|
||||
</Routes>
|
||||
|
||||
@@ -36,13 +36,13 @@ const Contact = () => {
|
||||
{/* Contact Info */}
|
||||
<div className="divider mb-12" />
|
||||
<div className="flex flex-col sm:flex-row gap-8 text-muted-foreground">
|
||||
<a href="mailto:hello@webklar.de" className="flex items-center gap-3 hover:text-foreground transition-colors group">
|
||||
<a href="mailto:support@webklar.com" className="flex items-center gap-3 hover:text-foreground transition-colors group">
|
||||
<Mail className="w-5 h-5" />
|
||||
<span>hello@webklar.de</span>
|
||||
<span>support@webklar.com</span>
|
||||
</a>
|
||||
<a href="tel:+4912345678" className="flex items-center gap-3 hover:text-foreground transition-colors group">
|
||||
<a href="tel:+491704969375" className="flex items-center gap-3 hover:text-foreground transition-colors group">
|
||||
<Phone className="w-5 h-5" />
|
||||
<span>+49 123 456 78</span>
|
||||
<span>0170 4969375</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { ArrowRight } from "lucide-react";
|
||||
import { useState, useEffect } from "react";
|
||||
import React, { useState, useEffect, useRef } from "react";
|
||||
import Silk from "@/components/Silk";
|
||||
import CountUp from "@/components/CountUp";
|
||||
|
||||
@@ -15,10 +15,28 @@ const SPARKLE_SVG = (
|
||||
);
|
||||
|
||||
function DemoButtonLetters({ text }: { text: string }) {
|
||||
// #region agent log
|
||||
const chars = text.split("");
|
||||
const spaceIndex = chars.findIndex((c) => c === " ");
|
||||
const lastIndex = chars.length - 1;
|
||||
const lastChar = chars[lastIndex];
|
||||
fetch("http://127.0.0.1:7244/ingest/72f53105-0a54-4d4c-a295-fb93aa72afcc", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
location: "Hero.tsx:DemoButtonLetters",
|
||||
message: "Letter split for button text",
|
||||
data: { text, len: chars.length, spaceIndex, spaceChar: spaceIndex >= 0 ? chars[spaceIndex] : null, lastIndex, lastChar },
|
||||
timestamp: Date.now(),
|
||||
sessionId: "debug-session",
|
||||
hypothesisId: "A,C",
|
||||
}),
|
||||
}).catch(() => {});
|
||||
// #endregion
|
||||
return (
|
||||
<>
|
||||
{text.split("").map((char, i) => (
|
||||
<span key={i} className="btn-letter">
|
||||
{chars.map((char, i) => (
|
||||
<span key={i} className={char === " " ? "btn-letter btn-letter-space" : "btn-letter"}>
|
||||
{char}
|
||||
</span>
|
||||
))}
|
||||
@@ -31,6 +49,31 @@ const FOUNDING_DATE = new Date("2026-01-25"); // Samstag, 25. Januar 2026
|
||||
const Hero = () => {
|
||||
const navigate = useNavigate();
|
||||
const [companyAge, setCompanyAge] = useState("");
|
||||
const secondBtnRef = useRef<HTMLButtonElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const el = secondBtnRef.current;
|
||||
if (!el) return;
|
||||
const firstTxtWrapper = el.querySelector(".txt-wrapper");
|
||||
const letters = firstTxtWrapper ? firstTxtWrapper.querySelectorAll(".btn-letter") : [];
|
||||
const spaceIdx = 8;
|
||||
const lastIdx = 16;
|
||||
const wSpace = letters[spaceIdx]?.getBoundingClientRect?.()?.width ?? -1;
|
||||
const wLast = letters[lastIdx]?.getBoundingClientRect?.()?.width ?? -1;
|
||||
fetch("http://127.0.0.1:7244/ingest/72f53105-0a54-4d4c-a295-fb93aa72afcc", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
location: "Hero.tsx:useEffect:measure",
|
||||
message: "Measured btn-letter widths (space + last)",
|
||||
data: { letterCount: letters.length, wSpace, wLast, spaceIdx, lastIdx },
|
||||
timestamp: Date.now(),
|
||||
sessionId: "debug-session",
|
||||
runId: "post-fix",
|
||||
hypothesisId: "B,D,E",
|
||||
}),
|
||||
}).catch(() => {});
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const calculateAge = () => {
|
||||
@@ -63,7 +106,7 @@ const Hero = () => {
|
||||
<Silk
|
||||
speed={3}
|
||||
scale={0.5}
|
||||
color="#373737"
|
||||
color="#6a6a6a"
|
||||
noiseIntensity={4
|
||||
}
|
||||
rotation={0}
|
||||
@@ -113,21 +156,26 @@ const Hero = () => {
|
||||
</div>
|
||||
<div className="btn-wrapper w-full sm:w-auto">
|
||||
<button
|
||||
ref={secondBtnRef}
|
||||
type="button"
|
||||
className="btn w-full sm:w-auto justify-center"
|
||||
onClick={() => navigate("/kontakt")}
|
||||
aria-label="System-Demo anfordern"
|
||||
onClick={() => {
|
||||
const el = document.getElementById("projects");
|
||||
if (el) el.scrollIntoView({ behavior: "smooth" });
|
||||
else navigate("/#projects");
|
||||
}}
|
||||
aria-label="Projekte ansehen"
|
||||
>
|
||||
{SPARKLE_SVG}
|
||||
<div className="txt-wrapper">
|
||||
<span className="txt-width-helper" aria-hidden="true">
|
||||
<DemoButtonLetters text="System-Demo anfordern" />
|
||||
<DemoButtonLetters text="Projekte ansehen" />
|
||||
</span>
|
||||
<div className="txt-1">
|
||||
<DemoButtonLetters text="System-Demo anfordern" />
|
||||
<DemoButtonLetters text="Projekte ansehen" />
|
||||
</div>
|
||||
<div className="txt-2">
|
||||
<DemoButtonLetters text="Wird angefordert..." />
|
||||
<DemoButtonLetters text="Wird geladen..." />
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
16
src/components/LightRays.css
Normal file
16
src/components/LightRays.css
Normal file
@@ -0,0 +1,16 @@
|
||||
.light-rays-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
pointer-events: none;
|
||||
z-index: 3;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.light-rays-fallback {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
486
src/components/LightRays.tsx
Normal file
486
src/components/LightRays.tsx
Normal file
@@ -0,0 +1,486 @@
|
||||
"use client";
|
||||
|
||||
import { useRef, useEffect, useState } from "react";
|
||||
// @ts-expect-error ogl has no type definitions
|
||||
import { Renderer, Program, Triangle, Mesh } from "ogl";
|
||||
import "./LightRays.css";
|
||||
|
||||
const DEFAULT_COLOR = "#ffffff";
|
||||
|
||||
const hexToRgb = (hex: string): [number, number, number] => {
|
||||
const m = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||
return m
|
||||
? [
|
||||
parseInt(m[1], 16) / 255,
|
||||
parseInt(m[2], 16) / 255,
|
||||
parseInt(m[3], 16) / 255,
|
||||
]
|
||||
: [1, 1, 1];
|
||||
};
|
||||
|
||||
type RaysOrigin =
|
||||
| "top-left"
|
||||
| "top-right"
|
||||
| "top-center"
|
||||
| "left"
|
||||
| "right"
|
||||
| "bottom-left"
|
||||
| "bottom-center"
|
||||
| "bottom-right";
|
||||
|
||||
const getAnchorAndDir = (
|
||||
origin: RaysOrigin,
|
||||
w: number,
|
||||
h: number
|
||||
): { anchor: [number, number]; dir: [number, number] } => {
|
||||
const outside = 0.2;
|
||||
switch (origin) {
|
||||
case "top-left":
|
||||
return { anchor: [0, -outside * h], dir: [0, 1] };
|
||||
case "top-right":
|
||||
return { anchor: [w, -outside * h], dir: [0, 1] };
|
||||
case "left":
|
||||
return { anchor: [-outside * w, 0.5 * h], dir: [1, 0] };
|
||||
case "right":
|
||||
return { anchor: [(1 + outside) * w, 0.5 * h], dir: [-1, 0] };
|
||||
case "bottom-left":
|
||||
return { anchor: [0, (1 + outside) * h], dir: [0, -1] };
|
||||
case "bottom-center":
|
||||
return { anchor: [0.5 * w, (1 + outside) * h], dir: [0, -1] };
|
||||
case "bottom-right":
|
||||
return { anchor: [w, (1 + outside) * h], dir: [0, -1] };
|
||||
default:
|
||||
return { anchor: [0.5 * w, -outside * h], dir: [0, 1] };
|
||||
}
|
||||
};
|
||||
|
||||
export interface LightRaysProps {
|
||||
raysOrigin?: RaysOrigin;
|
||||
raysColor?: string;
|
||||
raysSpeed?: number;
|
||||
lightSpread?: number;
|
||||
rayLength?: number;
|
||||
pulsating?: boolean;
|
||||
fadeDistance?: number;
|
||||
saturation?: number;
|
||||
followMouse?: boolean;
|
||||
mouseInfluence?: number;
|
||||
noiseAmount?: number;
|
||||
distortion?: number;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export default function LightRays({
|
||||
raysOrigin = "top-center",
|
||||
raysColor = DEFAULT_COLOR,
|
||||
raysSpeed = 1,
|
||||
lightSpread = 1,
|
||||
rayLength = 2,
|
||||
pulsating = false,
|
||||
fadeDistance = 1.0,
|
||||
saturation = 1.0,
|
||||
followMouse = true,
|
||||
mouseInfluence = 0.1,
|
||||
noiseAmount = 0.0,
|
||||
distortion = 0.0,
|
||||
className = "",
|
||||
}: LightRaysProps) {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const uniformsRef = useRef<Record<string, { value: unknown }> | null>(null);
|
||||
const rendererRef = useRef<InstanceType<typeof Renderer> | null>(null);
|
||||
const mouseRef = useRef({ x: 0.5, y: 0.5 });
|
||||
const smoothMouseRef = useRef({ x: 0.5, y: 0.5 });
|
||||
const animationIdRef = useRef<number | null>(null);
|
||||
const meshRef = useRef<InstanceType<typeof Mesh> | null>(null);
|
||||
const cleanupFunctionRef = useRef<(() => void) | null>(null);
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
const [useFallback, setUseFallback] = useState(false);
|
||||
const observerRef = useRef<IntersectionObserver | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!containerRef.current) return;
|
||||
|
||||
observerRef.current = new IntersectionObserver(
|
||||
(entries) => {
|
||||
const entry = entries[0];
|
||||
setIsVisible(entry.isIntersecting);
|
||||
},
|
||||
{ threshold: 0.1 }
|
||||
);
|
||||
|
||||
observerRef.current.observe(containerRef.current);
|
||||
|
||||
return () => {
|
||||
if (observerRef.current) {
|
||||
observerRef.current.disconnect();
|
||||
observerRef.current = null;
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isVisible || !containerRef.current) return;
|
||||
|
||||
setUseFallback(false);
|
||||
if (cleanupFunctionRef.current) {
|
||||
cleanupFunctionRef.current();
|
||||
cleanupFunctionRef.current = null;
|
||||
}
|
||||
|
||||
const initializeWebGL = async () => {
|
||||
if (!containerRef.current) return;
|
||||
|
||||
await new Promise((resolve) => setTimeout(resolve, 10));
|
||||
|
||||
if (!containerRef.current) return;
|
||||
|
||||
const isMobile =
|
||||
typeof window !== "undefined" &&
|
||||
(window.innerWidth <= 768 || "ontouchstart" in window);
|
||||
const dpr = isMobile ? 1 : Math.min(window.devicePixelRatio, 2);
|
||||
|
||||
try {
|
||||
const renderer = new Renderer({
|
||||
dpr,
|
||||
alpha: true,
|
||||
});
|
||||
rendererRef.current = renderer;
|
||||
|
||||
const gl = renderer.gl;
|
||||
gl.canvas.style.width = "100%";
|
||||
gl.canvas.style.height = "100%";
|
||||
|
||||
while (containerRef.current.firstChild) {
|
||||
containerRef.current.removeChild(containerRef.current.firstChild);
|
||||
}
|
||||
containerRef.current.appendChild(gl.canvas);
|
||||
|
||||
const vert = `
|
||||
attribute vec2 position;
|
||||
varying vec2 vUv;
|
||||
void main() {
|
||||
vUv = position * 0.5 + 0.5;
|
||||
gl_Position = vec4(position, 0.0, 1.0);
|
||||
}`;
|
||||
|
||||
const frag = `precision mediump float;
|
||||
|
||||
uniform float iTime;
|
||||
uniform vec2 iResolution;
|
||||
|
||||
uniform vec2 rayPos;
|
||||
uniform vec2 rayDir;
|
||||
uniform vec3 raysColor;
|
||||
uniform float raysSpeed;
|
||||
uniform float lightSpread;
|
||||
uniform float rayLength;
|
||||
uniform float pulsating;
|
||||
uniform float fadeDistance;
|
||||
uniform float saturation;
|
||||
uniform vec2 mousePos;
|
||||
uniform float mouseInfluence;
|
||||
uniform float noiseAmount;
|
||||
uniform float distortion;
|
||||
|
||||
varying vec2 vUv;
|
||||
|
||||
float noise(vec2 st) {
|
||||
return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123);
|
||||
}
|
||||
|
||||
float rayStrength(vec2 raySource, vec2 rayRefDirection, vec2 coord,
|
||||
float seedA, float seedB, float speed) {
|
||||
vec2 sourceToCoord = coord - raySource;
|
||||
vec2 dirNorm = normalize(sourceToCoord);
|
||||
float cosAngle = dot(dirNorm, rayRefDirection);
|
||||
|
||||
float distortedAngle = cosAngle + distortion * sin(iTime * 2.0 + length(sourceToCoord) * 0.01) * 0.2;
|
||||
|
||||
float spreadFactor = pow(max(distortedAngle, 0.0), 1.0 / max(lightSpread, 0.001));
|
||||
|
||||
float distance = length(sourceToCoord);
|
||||
float maxDistance = iResolution.x * rayLength;
|
||||
float lengthFalloff = clamp((maxDistance - distance) / maxDistance, 0.0, 1.0);
|
||||
|
||||
float fadeFalloff = clamp((iResolution.x * fadeDistance - distance) / (iResolution.x * fadeDistance), 0.5, 1.0);
|
||||
float pulse = pulsating > 0.5 ? (0.8 + 0.2 * sin(iTime * speed * 3.0)) : 1.0;
|
||||
|
||||
float baseStrength = clamp(
|
||||
(0.45 + 0.15 * sin(distortedAngle * seedA + iTime * speed)) +
|
||||
(0.3 + 0.2 * cos(-distortedAngle * seedB + iTime * speed)),
|
||||
0.0, 1.0
|
||||
);
|
||||
|
||||
return baseStrength * lengthFalloff * fadeFalloff * spreadFactor * pulse;
|
||||
}
|
||||
|
||||
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
|
||||
vec2 coord = vec2(fragCoord.x, iResolution.y - fragCoord.y);
|
||||
|
||||
vec2 finalRayDir = rayDir;
|
||||
if (mouseInfluence > 0.0) {
|
||||
vec2 mouseScreenPos = mousePos * iResolution.xy;
|
||||
vec2 mouseDirection = normalize(mouseScreenPos - rayPos);
|
||||
finalRayDir = normalize(mix(rayDir, mouseDirection, mouseInfluence));
|
||||
}
|
||||
|
||||
vec4 rays1 = vec4(1.0) *
|
||||
rayStrength(rayPos, finalRayDir, coord, 36.2214, 21.11349,
|
||||
1.5 * raysSpeed);
|
||||
vec4 rays2 = vec4(1.0) *
|
||||
rayStrength(rayPos, finalRayDir, coord, 22.3991, 18.0234,
|
||||
1.1 * raysSpeed);
|
||||
|
||||
fragColor = rays1 * 0.5 + rays2 * 0.4;
|
||||
|
||||
if (noiseAmount > 0.0) {
|
||||
float n = noise(coord * 0.01 + iTime * 0.1);
|
||||
fragColor.rgb *= (1.0 - noiseAmount + noiseAmount * n);
|
||||
}
|
||||
|
||||
float brightness = 1.0 - (coord.y / iResolution.y);
|
||||
fragColor.x *= 0.1 + brightness * 0.8;
|
||||
fragColor.y *= 0.3 + brightness * 0.6;
|
||||
fragColor.z *= 0.5 + brightness * 0.5;
|
||||
|
||||
if (saturation != 1.0) {
|
||||
float gray = dot(fragColor.rgb, vec3(0.299, 0.587, 0.114));
|
||||
fragColor.rgb = mix(vec3(gray), fragColor.rgb, saturation);
|
||||
}
|
||||
|
||||
fragColor.rgb *= raysColor;
|
||||
}
|
||||
|
||||
void main() {
|
||||
vec4 color;
|
||||
mainImage(color, gl_FragCoord.xy);
|
||||
gl_FragColor = color;
|
||||
}`;
|
||||
|
||||
const uniforms = {
|
||||
iTime: { value: 0 },
|
||||
iResolution: { value: [1, 1] as [number, number] },
|
||||
|
||||
rayPos: { value: [0, 0] as [number, number] },
|
||||
rayDir: { value: [0, 1] as [number, number] },
|
||||
|
||||
raysColor: { value: hexToRgb(raysColor) },
|
||||
raysSpeed: { value: raysSpeed },
|
||||
lightSpread: { value: lightSpread },
|
||||
rayLength: { value: rayLength },
|
||||
pulsating: { value: pulsating ? 1.0 : 0.0 },
|
||||
fadeDistance: { value: fadeDistance },
|
||||
saturation: { value: saturation },
|
||||
mousePos: { value: [0.5, 0.5] as [number, number] },
|
||||
mouseInfluence: { value: mouseInfluence },
|
||||
noiseAmount: { value: noiseAmount },
|
||||
distortion: { value: distortion },
|
||||
};
|
||||
uniformsRef.current = uniforms as Record<string, { value: unknown }>;
|
||||
|
||||
const geometry = new Triangle(gl);
|
||||
const program = new Program(gl, {
|
||||
vertex: vert,
|
||||
fragment: frag,
|
||||
uniforms,
|
||||
});
|
||||
const mesh = new Mesh(gl, { geometry, program });
|
||||
meshRef.current = mesh;
|
||||
|
||||
const updatePlacement = () => {
|
||||
if (!containerRef.current || !renderer) return;
|
||||
|
||||
renderer.dpr = isMobile ? 1 : Math.min(window.devicePixelRatio, 2);
|
||||
|
||||
const { clientWidth: wCSS, clientHeight: hCSS } = containerRef.current;
|
||||
renderer.setSize(wCSS, hCSS);
|
||||
|
||||
const dpr = renderer.dpr;
|
||||
const w = wCSS * dpr;
|
||||
const h = hCSS * dpr;
|
||||
|
||||
uniforms.iResolution.value = [w, h];
|
||||
|
||||
const { anchor, dir } = getAnchorAndDir(raysOrigin, w, h);
|
||||
uniforms.rayPos.value = anchor;
|
||||
uniforms.rayDir.value = dir;
|
||||
};
|
||||
|
||||
const loop = (t: number) => {
|
||||
if (!rendererRef.current || !uniformsRef.current || !meshRef.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
const uniforms = uniformsRef.current as typeof uniforms;
|
||||
uniforms.iTime.value = t * 0.001;
|
||||
|
||||
if (followMouse && mouseInfluence > 0.0) {
|
||||
const smoothing = 0.92;
|
||||
|
||||
smoothMouseRef.current.x =
|
||||
smoothMouseRef.current.x * smoothing +
|
||||
mouseRef.current.x * (1 - smoothing);
|
||||
smoothMouseRef.current.y =
|
||||
smoothMouseRef.current.y * smoothing +
|
||||
mouseRef.current.y * (1 - smoothing);
|
||||
|
||||
uniforms.mousePos.value = [
|
||||
smoothMouseRef.current.x,
|
||||
smoothMouseRef.current.y,
|
||||
];
|
||||
}
|
||||
|
||||
try {
|
||||
renderer.render({ scene: mesh });
|
||||
animationIdRef.current = requestAnimationFrame(loop);
|
||||
} catch (error) {
|
||||
console.warn("WebGL rendering error:", error);
|
||||
return;
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener("resize", updatePlacement);
|
||||
const resizeObserver =
|
||||
typeof ResizeObserver !== "undefined" &&
|
||||
new ResizeObserver(() => updatePlacement());
|
||||
if (resizeObserver && containerRef.current) {
|
||||
resizeObserver.observe(containerRef.current);
|
||||
}
|
||||
updatePlacement();
|
||||
animationIdRef.current = requestAnimationFrame(loop);
|
||||
|
||||
cleanupFunctionRef.current = () => {
|
||||
if (resizeObserver && containerRef.current) {
|
||||
resizeObserver.unobserve(containerRef.current);
|
||||
}
|
||||
if (animationIdRef.current) {
|
||||
cancelAnimationFrame(animationIdRef.current);
|
||||
animationIdRef.current = null;
|
||||
}
|
||||
|
||||
window.removeEventListener("resize", updatePlacement);
|
||||
|
||||
if (renderer) {
|
||||
try {
|
||||
const canvas = renderer.gl.canvas;
|
||||
const loseContextExt =
|
||||
renderer.gl.getExtension("WEBGL_lose_context");
|
||||
if (loseContextExt) {
|
||||
loseContextExt.loseContext();
|
||||
}
|
||||
|
||||
if (canvas && canvas.parentNode) {
|
||||
canvas.parentNode.removeChild(canvas);
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn("Error during WebGL cleanup:", error);
|
||||
}
|
||||
}
|
||||
|
||||
rendererRef.current = null;
|
||||
uniformsRef.current = null;
|
||||
meshRef.current = null;
|
||||
};
|
||||
} catch (error) {
|
||||
console.warn("LightRays WebGL init failed (e.g. on mobile):", error);
|
||||
setUseFallback(true);
|
||||
}
|
||||
};
|
||||
|
||||
initializeWebGL();
|
||||
|
||||
return () => {
|
||||
if (cleanupFunctionRef.current) {
|
||||
cleanupFunctionRef.current();
|
||||
cleanupFunctionRef.current = null;
|
||||
}
|
||||
};
|
||||
}, [
|
||||
isVisible,
|
||||
raysOrigin,
|
||||
raysColor,
|
||||
raysSpeed,
|
||||
lightSpread,
|
||||
rayLength,
|
||||
pulsating,
|
||||
fadeDistance,
|
||||
saturation,
|
||||
followMouse,
|
||||
mouseInfluence,
|
||||
noiseAmount,
|
||||
distortion,
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!uniformsRef.current || !containerRef.current || !rendererRef.current)
|
||||
return;
|
||||
|
||||
const u = uniformsRef.current as Record<string, { value: unknown }>;
|
||||
const renderer = rendererRef.current;
|
||||
|
||||
u.raysColor.value = hexToRgb(raysColor);
|
||||
u.raysSpeed.value = raysSpeed;
|
||||
u.lightSpread.value = lightSpread;
|
||||
u.rayLength.value = rayLength;
|
||||
u.pulsating.value = pulsating ? 1.0 : 0.0;
|
||||
u.fadeDistance.value = fadeDistance;
|
||||
u.saturation.value = saturation;
|
||||
u.mouseInfluence.value = mouseInfluence;
|
||||
u.noiseAmount.value = noiseAmount;
|
||||
u.distortion.value = distortion;
|
||||
|
||||
const { clientWidth: wCSS, clientHeight: hCSS } = containerRef.current;
|
||||
const dpr = renderer.dpr;
|
||||
const { anchor, dir } = getAnchorAndDir(
|
||||
raysOrigin,
|
||||
wCSS * dpr,
|
||||
hCSS * dpr
|
||||
);
|
||||
u.rayPos.value = anchor;
|
||||
u.rayDir.value = dir;
|
||||
}, [
|
||||
raysColor,
|
||||
raysSpeed,
|
||||
lightSpread,
|
||||
raysOrigin,
|
||||
rayLength,
|
||||
pulsating,
|
||||
fadeDistance,
|
||||
saturation,
|
||||
mouseInfluence,
|
||||
noiseAmount,
|
||||
distortion,
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
const handleMouseMove = (e: MouseEvent) => {
|
||||
if (!containerRef.current || !rendererRef.current) return;
|
||||
const rect = containerRef.current.getBoundingClientRect();
|
||||
const x = (e.clientX - rect.left) / rect.width;
|
||||
const y = (e.clientY - rect.top) / rect.height;
|
||||
mouseRef.current = { x, y };
|
||||
};
|
||||
|
||||
if (followMouse) {
|
||||
window.addEventListener("mousemove", handleMouseMove);
|
||||
return () => window.removeEventListener("mousemove", handleMouseMove);
|
||||
}
|
||||
}, [followMouse]);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={containerRef}
|
||||
className={`light-rays-container ${className}`.trim()}
|
||||
>
|
||||
{useFallback && (
|
||||
<div
|
||||
className="light-rays-fallback"
|
||||
style={{
|
||||
background: `linear-gradient(to bottom, ${raysColor}50 0%, ${raysColor}20 25%, ${raysColor}08 50%, transparent 85%)`,
|
||||
}}
|
||||
aria-hidden
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,4 +1,6 @@
|
||||
import { Calendar, MessageSquareOff, TrendingDown, Folders } from "lucide-react";
|
||||
import { LampTop } from "@/components/ui/lamp";
|
||||
import LightRays from "@/components/LightRays";
|
||||
|
||||
const ProblemSection = () => {
|
||||
const problems = [
|
||||
@@ -21,8 +23,25 @@ const ProblemSection = () => {
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="py-24 md:py-32 bg-background relative">
|
||||
<div className="container mx-auto px-6">
|
||||
<section className="section-problem-solution py-24 md:py-32 relative overflow-hidden">
|
||||
<div className="absolute inset-0 w-full overflow-hidden z-0">
|
||||
<LightRays
|
||||
raysOrigin="top-center"
|
||||
raysColor="#ef4444"
|
||||
raysSpeed={1}
|
||||
lightSpread={0.5}
|
||||
rayLength={3}
|
||||
followMouse={false}
|
||||
mouseInfluence={0}
|
||||
noiseAmount={0}
|
||||
distortion={0}
|
||||
pulsating
|
||||
fadeDistance={2}
|
||||
saturation={2}
|
||||
/>
|
||||
</div>
|
||||
<LampTop />
|
||||
<div className="container mx-auto px-6 relative z-10">
|
||||
{/* Section Header */}
|
||||
<div className="mb-16 md:mb-20 max-w-4xl">
|
||||
<div className="label-tag mb-4">Das Problem</div>
|
||||
@@ -39,7 +58,7 @@ const ProblemSection = () => {
|
||||
{problems.map((problem, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-start gap-4 p-6 border border-border rounded-lg bg-card/50 hover:border-foreground/20 transition-colors"
|
||||
className="problem-section-tint flex items-start gap-4 p-6 border border-border rounded-lg bg-card/50 hover:border-foreground/20 transition-colors"
|
||||
>
|
||||
<div className="w-10 h-10 rounded-full border border-destructive/30 bg-destructive/10 flex items-center justify-center flex-shrink-0">
|
||||
<problem.icon className="w-5 h-5 text-destructive" />
|
||||
|
||||
@@ -1,30 +1,42 @@
|
||||
import { ArrowUpRight } from "lucide-react";
|
||||
|
||||
const projects = [
|
||||
type Project = {
|
||||
title: string;
|
||||
description: string;
|
||||
image: string;
|
||||
url: string;
|
||||
};
|
||||
|
||||
const projects: Project[] = [
|
||||
{
|
||||
title: "Triple AI",
|
||||
description: "Webentwicklung / UI Design / Custom Code",
|
||||
image: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=800&h=600&fit=crop",
|
||||
title: "Email Sorter",
|
||||
description: "E-Mails automatisch sortieren",
|
||||
image: "/project%20pics/emailsorter.png",
|
||||
url: "https://emailsorter.webklar.com/",
|
||||
},
|
||||
{
|
||||
title: "Neutral",
|
||||
description: "Webentwicklung / Custom Code",
|
||||
image: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&h=600&fit=crop",
|
||||
url: "#",
|
||||
},
|
||||
{
|
||||
title: "Verbatim Labs",
|
||||
description: "Webentwicklung / UI Design / Custom Code",
|
||||
image: "https://images.unsplash.com/photo-1559028012-481c04fa702d?w=800&h=600&fit=crop",
|
||||
url: "#",
|
||||
},
|
||||
{
|
||||
title: "JMK Engineers",
|
||||
description: "Webentwicklung / UI Design / Custom Code",
|
||||
image: "https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?w=800&h=600&fit=crop",
|
||||
url: "#",
|
||||
},
|
||||
{
|
||||
title: "GOODZ Club",
|
||||
description: "Webentwicklung / Custom Code / Lokalisierung",
|
||||
image: "https://images.unsplash.com/photo-1542744094-3a31f272c490?w=800&h=600&fit=crop",
|
||||
url: "#",
|
||||
},
|
||||
];
|
||||
|
||||
@@ -45,7 +57,9 @@ const ProjectShowcase = () => {
|
||||
{projects.map((project, index) => (
|
||||
<a
|
||||
key={project.title}
|
||||
href="#"
|
||||
href={project.url}
|
||||
target={project.url.startsWith("http") ? "_blank" : undefined}
|
||||
rel={project.url.startsWith("http") ? "noopener noreferrer" : undefined}
|
||||
className="group block project-card rounded-lg p-6 md:p-8"
|
||||
style={{ animationDelay: `${index * 0.1}s` }}
|
||||
>
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
import { Link } from "react-router-dom";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { ArrowRight, CheckCircle2 } from "lucide-react";
|
||||
import { LampTop } from "@/components/ui/lamp";
|
||||
import LightRays from "@/components/LightRays";
|
||||
|
||||
const SolutionSection = () => {
|
||||
const benefits = [
|
||||
@@ -10,8 +12,25 @@ const SolutionSection = () => {
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="py-24 md:py-32 bg-background relative">
|
||||
<div className="container mx-auto px-6">
|
||||
<section className="section-problem-solution py-24 md:py-32 relative overflow-hidden">
|
||||
<div className="absolute inset-0 w-full overflow-hidden z-0">
|
||||
<LightRays
|
||||
raysOrigin="top-center"
|
||||
raysColor="#22d3ee"
|
||||
raysSpeed={1}
|
||||
lightSpread={0.5}
|
||||
rayLength={3}
|
||||
followMouse={false}
|
||||
mouseInfluence={0}
|
||||
noiseAmount={0}
|
||||
distortion={0}
|
||||
pulsating
|
||||
fadeDistance={2}
|
||||
saturation={2}
|
||||
/>
|
||||
</div>
|
||||
<LampTop lineClassName="bg-cyan-400" />
|
||||
<div className="container mx-auto px-6 relative z-10">
|
||||
<div className="grid lg:grid-cols-2 gap-16 items-center">
|
||||
{/* Left Content */}
|
||||
<div>
|
||||
@@ -47,7 +66,7 @@ const SolutionSection = () => {
|
||||
|
||||
{/* Right Content - Visual Element */}
|
||||
<div className="relative">
|
||||
<div className="aspect-square bg-secondary/50 rounded-2xl border border-border p-8 md:p-12 flex flex-col justify-center">
|
||||
<div className="solution-section-tint aspect-square bg-secondary/50 rounded-2xl border border-border p-8 md:p-12 flex flex-col justify-center">
|
||||
<div className="space-y-6">
|
||||
<div className="text-sm uppercase tracking-wider text-muted-foreground">Das Ergebnis</div>
|
||||
<h3 className="text-2xl md:text-3xl font-display font-medium text-foreground uppercase tracking-tight">
|
||||
|
||||
39
src/components/ui/lamp.tsx
Normal file
39
src/components/ui/lamp.tsx
Normal file
@@ -0,0 +1,39 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import { motion } from "motion/react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const S = 2.5;
|
||||
|
||||
export const LampTop = ({
|
||||
className,
|
||||
lineClassName = "bg-red-500",
|
||||
children,
|
||||
}: {
|
||||
className?: string;
|
||||
lineClassName?: string;
|
||||
children?: React.ReactNode;
|
||||
}) => {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"absolute top-0 left-0 right-0 w-full min-h-0 pointer-events-none z-50 flex items-start justify-center",
|
||||
className
|
||||
)}
|
||||
>
|
||||
<motion.div
|
||||
initial={{ width: `${15 * S}rem` }}
|
||||
whileInView={{ width: `${30 * S}rem` }}
|
||||
transition={{
|
||||
delay: 0.3,
|
||||
duration: 0.8,
|
||||
ease: "easeInOut",
|
||||
}}
|
||||
className={cn("absolute top-0 left-1/2 -translate-x-1/2 h-0.5", lineClassName)}
|
||||
style={{ width: `${30 * S}rem` }}
|
||||
/>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -154,6 +154,37 @@
|
||||
}
|
||||
|
||||
@layer components {
|
||||
/* Gemeinsamer Hintergrund für Problem- und Lösungs-Sektion */
|
||||
.section-problem-solution {
|
||||
background-color: hsl(var(--background));
|
||||
}
|
||||
|
||||
/* Leichter roter Tint auf Inhaltsblöcken der Problem-Sektion */
|
||||
.problem-section-tint {
|
||||
position: relative;
|
||||
}
|
||||
.problem-section-tint::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-color: rgb(239 68 68 / 0.06);
|
||||
pointer-events: none;
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
/* Leichter blauer Tint auf dem Ergebnis-Block der Lösungs-Sektion */
|
||||
.solution-section-tint {
|
||||
position: relative;
|
||||
}
|
||||
.solution-section-tint::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-color: rgb(34 211 238 / 0.06);
|
||||
pointer-events: none;
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
/* Minimal glass nav */
|
||||
.glass-nav {
|
||||
@apply backdrop-blur-xl border-b;
|
||||
@@ -370,7 +401,7 @@
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
min-width: 0;
|
||||
padding-right: 2px;
|
||||
padding-right: 6px;
|
||||
}
|
||||
|
||||
.txt-width-helper {
|
||||
@@ -385,6 +416,10 @@
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.btn-letter-space {
|
||||
min-width: 0.25em;
|
||||
}
|
||||
|
||||
.txt-1,
|
||||
.txt-2 {
|
||||
position: absolute;
|
||||
|
||||
14
src/lib/appwrite.ts
Normal file
14
src/lib/appwrite.ts
Normal file
@@ -0,0 +1,14 @@
|
||||
import { Client, Databases } from "appwrite";
|
||||
|
||||
const APPWRITE_ENDPOINT = "https://appwrite.webklar.com/v1";
|
||||
const APPWRITE_PROJECT = "696b82270034001dab69";
|
||||
const DATABASE_ID = "698124a20035e8f6dc42";
|
||||
export const CONTACTS_COLLECTION_ID = "contact_submissions";
|
||||
|
||||
const client = new Client()
|
||||
.setEndpoint(APPWRITE_ENDPOINT)
|
||||
.setProject(APPWRITE_PROJECT);
|
||||
|
||||
export const databases = new Databases(client);
|
||||
|
||||
export { DATABASE_ID };
|
||||
292
src/pages/AGB.tsx
Normal file
292
src/pages/AGB.tsx
Normal file
@@ -0,0 +1,292 @@
|
||||
import { Link } from "react-router-dom";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { ArrowLeft, FileText } from "lucide-react";
|
||||
|
||||
const contractDivider = (
|
||||
<div className="my-8 border-t border-border" aria-hidden />
|
||||
);
|
||||
|
||||
const AGB = () => {
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
{/* Header */}
|
||||
<header className="fixed top-0 left-0 right-0 z-50 glass-nav py-4">
|
||||
<div className="container mx-auto px-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<Link to="/" className="flex items-center gap-2 group">
|
||||
<span className="text-xl font-display font-medium text-foreground tracking-tight">
|
||||
Webklar
|
||||
</span>
|
||||
</Link>
|
||||
<Link to="/">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
Zurück
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="pt-32 pb-24">
|
||||
<div className="container mx-auto px-6">
|
||||
<div className="max-w-3xl mx-auto">
|
||||
{/* Page Header */}
|
||||
<div className="mb-12">
|
||||
<div className="label-tag mb-4 flex items-center gap-2">
|
||||
<FileText className="w-4 h-4" />
|
||||
Vertrag
|
||||
</div>
|
||||
<h1 className="text-4xl md:text-5xl font-display font-medium text-foreground tracking-tight uppercase mb-2">
|
||||
Kaufvertrag – WEBklar
|
||||
</h1>
|
||||
<p className="text-muted-foreground text-lg mb-8">
|
||||
(Modularer Projektvertrag)
|
||||
</p>
|
||||
<div className="text-muted-foreground space-y-1">
|
||||
<p><strong className="text-foreground">zwischen</strong></p>
|
||||
<p>WEBklar<br /><span className="text-sm">(im Folgenden „Anbieter“)</span></p>
|
||||
<p className="pt-2"><strong className="text-foreground">und</strong></p>
|
||||
<p>Kunde laut Angebot<br /><span className="text-sm">(im Folgenden „Kunde“)</span></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Contract Content */}
|
||||
<article className="space-y-8 text-foreground">
|
||||
{/* 1. Vertragsgegenstand */}
|
||||
<section>
|
||||
<h2 className="text-lg font-display font-medium uppercase tracking-tight text-foreground mb-4">
|
||||
1. Vertragsgegenstand
|
||||
</h2>
|
||||
<ol className="list-decimal list-inside space-y-2 text-muted-foreground leading-relaxed [&>li]:pl-2">
|
||||
<li>Gegenstand dieses Vertrages ist die Erbringung der im Angebot definierten Leistungen.</li>
|
||||
<li>Der Vertrag besteht aus diesem Grundvertrag sowie den ausgewählten Leistungsmodulen.</li>
|
||||
<li>Maßgeblich ist das jeweils angenommene Angebot von WEBklar.</li>
|
||||
</ol>
|
||||
</section>
|
||||
{contractDivider}
|
||||
|
||||
{/* 2. Leistungsart */}
|
||||
<section>
|
||||
<h2 className="text-lg font-display font-medium uppercase tracking-tight text-foreground mb-4">
|
||||
2. Leistungsart
|
||||
</h2>
|
||||
<ol className="list-decimal list-inside space-y-2 text-muted-foreground leading-relaxed [&>li]:pl-2">
|
||||
<li>Sämtliche Leistungen von WEBklar stellen Dienst- und Entwicklungsleistungen dar.</li>
|
||||
<li>Ein bestimmter wirtschaftlicher, technischer oder rechtlicher Erfolg wird nicht geschuldet.</li>
|
||||
<li>WEBklar erbringt keinen laufenden Betrieb, sofern dieser nicht explizit vereinbart wurde.</li>
|
||||
</ol>
|
||||
</section>
|
||||
{contractDivider}
|
||||
|
||||
{/* 3. Leistungsmodul A – Webseite */}
|
||||
<section>
|
||||
<h2 className="text-lg font-display font-medium uppercase tracking-tight text-foreground mb-2">
|
||||
3. Leistungsmodul A – Webseite (einmalig)
|
||||
</h2>
|
||||
<p className="text-sm text-muted-foreground mb-4">(aktiv, wenn im Angebot enthalten)</p>
|
||||
<ol className="list-decimal list-inside space-y-2 text-muted-foreground leading-relaxed [&>li]:pl-2">
|
||||
<li>WEBklar erstellt eine individuelle Webseite gemäß Angebot.</li>
|
||||
<li>Die Umsetzung erfolgt nach den vom Kunden gelieferten Inhalten und Vorgaben.</li>
|
||||
<li>Zusätzliche Leistungen wie Domain, Hosting, Wartung oder SEO sind nicht Bestandteil, sofern sie nicht gesondert beauftragt wurden.</li>
|
||||
<li>Der Kunde ist nicht berechtigt, Änderungen am Quellcode selbst vorzunehmen.</li>
|
||||
<li>Änderungen erfolgen ausschließlich durch WEBklar gegen gesonderte Vergütung.</li>
|
||||
</ol>
|
||||
</section>
|
||||
{contractDivider}
|
||||
|
||||
{/* 4. Leistungsmodul B – Automatisierung / Virtualisierung */}
|
||||
<section>
|
||||
<h2 className="text-lg font-display font-medium uppercase tracking-tight text-foreground mb-2">
|
||||
4. Leistungsmodul B – Automatisierung / Virtualisierung (einmalig)
|
||||
</h2>
|
||||
<p className="text-sm text-muted-foreground mb-4">(aktiv, wenn im Angebot enthalten)</p>
|
||||
<ol className="list-decimal list-inside space-y-2 text-muted-foreground leading-relaxed [&>li]:pl-2">
|
||||
<li>WEBklar entwickelt individuelle Automatisierungen, Apps oder Virtualisierungssysteme.</li>
|
||||
<li>Die Leistung stellt eine reine Entwicklungsleistung dar.</li>
|
||||
<li>Optional kann eine Beratungsleistung Bestandteil des Projektes sein.</li>
|
||||
<li>Ein laufender Betrieb, Monitoring oder Wartung ist nicht geschuldet, außer dies wurde explizit vereinbart.</li>
|
||||
<li>Der Kunde entscheidet über Inhalte, Daten und Prozesse und trägt dafür die rechtliche Verantwortung.</li>
|
||||
</ol>
|
||||
</section>
|
||||
{contractDivider}
|
||||
|
||||
{/* 5. Leistungsmodul C – Hosting */}
|
||||
<section>
|
||||
<h2 className="text-lg font-display font-medium uppercase tracking-tight text-foreground mb-2">
|
||||
5. Leistungsmodul C – Hosting (jährlich)
|
||||
</h2>
|
||||
<p className="text-sm text-muted-foreground mb-4">(aktiv, wenn im Angebot enthalten)</p>
|
||||
<ol className="list-decimal list-inside space-y-2 text-muted-foreground leading-relaxed [&>li]:pl-2">
|
||||
<li>WEBklar stellt optional Hosting-Leistungen zur Verfügung.</li>
|
||||
<li>Hostingverträge haben eine jährliche Laufzeit und verlängern sich automatisch, sofern nicht fristgerecht gekündigt wird.</li>
|
||||
<li>WEBklar ist berechtigt, externe Anbieter (z. B. Rechenzentren) einzusetzen.</li>
|
||||
<li>WEBklar übernimmt keine Haftung für Ausfälle externer Anbieter.</li>
|
||||
</ol>
|
||||
</section>
|
||||
{contractDivider}
|
||||
|
||||
{/* 6. Quellcode und Eigentum */}
|
||||
<section>
|
||||
<h2 className="text-lg font-display font-medium uppercase tracking-tight text-foreground mb-4">
|
||||
6. Quellcode und Eigentum
|
||||
</h2>
|
||||
<div className="space-y-4 text-muted-foreground">
|
||||
<div>
|
||||
<h3 className="text-foreground font-medium mb-2">6.1 Webseite</h3>
|
||||
<ol className="list-decimal list-inside space-y-2 leading-relaxed [&>li]:pl-2">
|
||||
<li>Der Kunde erhält ein einfaches, zeitlich unbegrenztes Nutzungsrecht an der fertigen Webseite.</li>
|
||||
<li>Der Quellcode der Webseite wird nur auf ausdrückliche Anfrage und nach Vereinbarung herausgegeben.</li>
|
||||
<li>Ohne Vereinbarung verbleibt der Quellcode bei WEBklar und wird archiviert.</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-foreground font-medium mb-2">6.2 Apps, Automatisierungen und Backend</h3>
|
||||
<ol className="list-decimal list-inside space-y-2 leading-relaxed [&>li]:pl-2">
|
||||
<li>Der Quellcode von Apps, Automatisierungen und Backend-Systemen verbleibt vollständig bei WEBklar.</li>
|
||||
<li>Eine Herausgabe erfolgt ausschließlich nach gesonderter schriftlicher Vereinbarung.</li>
|
||||
<li>Der Kunde erhält lediglich Zugriff auf die Bedienoberfläche bzw. das Frontend.</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{contractDivider}
|
||||
|
||||
{/* 7. Mitwirkungspflichten */}
|
||||
<section>
|
||||
<h2 className="text-lg font-display font-medium uppercase tracking-tight text-foreground mb-4">
|
||||
7. Mitwirkungspflichten des Kunden
|
||||
</h2>
|
||||
<ol className="list-decimal list-inside space-y-2 text-muted-foreground leading-relaxed [&>li]:pl-2">
|
||||
<li>Der Kunde stellt alle benötigten Inhalte, Daten und Freigaben rechtzeitig bereit.</li>
|
||||
<li>Verzögerungen durch fehlende Mitwirkung gehen nicht zu Lasten von WEBklar.</li>
|
||||
<li>WEBklar ist nicht verpflichtet, rechtliche Prüfungen der Inhalte vorzunehmen.</li>
|
||||
</ol>
|
||||
</section>
|
||||
{contractDivider}
|
||||
|
||||
{/* 8. Abnahme */}
|
||||
<section>
|
||||
<h2 className="text-lg font-display font-medium uppercase tracking-tight text-foreground mb-4">
|
||||
8. Abnahme
|
||||
</h2>
|
||||
<ol className="list-decimal list-inside space-y-2 text-muted-foreground leading-relaxed [&>li]:pl-2">
|
||||
<li>Nach Fertigstellung wird dem Kunden die Leistung zur Abnahme bereitgestellt.</li>
|
||||
<li>Erfolgt innerhalb von 14 Tagen keine Rückmeldung, gilt die Leistung als abgenommen.</li>
|
||||
<li>Nach Abnahme sind nur noch kostenpflichtige Änderungen möglich.</li>
|
||||
</ol>
|
||||
</section>
|
||||
{contractDivider}
|
||||
|
||||
{/* 9. Vergütung und Zahlung */}
|
||||
<section>
|
||||
<h2 className="text-lg font-display font-medium uppercase tracking-tight text-foreground mb-4">
|
||||
9. Vergütung und Zahlung
|
||||
</h2>
|
||||
<ol className="list-decimal list-inside space-y-2 text-muted-foreground leading-relaxed [&>li]:pl-2">
|
||||
<li>Die Vergütung ergibt sich aus dem Angebot.</li>
|
||||
<li>Projektleistungen sind nach Vereinbarung fällig.</li>
|
||||
<li>Hosting-Leistungen sind jährlich im Voraus zu zahlen.</li>
|
||||
</ol>
|
||||
</section>
|
||||
{contractDivider}
|
||||
|
||||
{/* 10. Zahlungsverzug */}
|
||||
<section>
|
||||
<h2 className="text-lg font-display font-medium uppercase tracking-tight text-foreground mb-4">
|
||||
10. Zahlungsverzug
|
||||
</h2>
|
||||
<ol className="list-decimal list-inside space-y-2 text-muted-foreground leading-relaxed [&>li]:pl-2">
|
||||
<li>Bei Zahlungsverzug erfolgen bis zu zwei Mahnungen.</li>
|
||||
<li>Danach ist WEBklar berechtigt:
|
||||
<ul className="list-disc list-inside mt-2 space-y-1 pl-2">
|
||||
<li>Leistungen zu sperren</li>
|
||||
<li>Verzugszinsen zu berechnen</li>
|
||||
<li>den Vertrag außerordentlich zu kündigen</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
</section>
|
||||
{contractDivider}
|
||||
|
||||
{/* 11. Haftung */}
|
||||
<section>
|
||||
<h2 className="text-lg font-display font-medium uppercase tracking-tight text-foreground mb-4">
|
||||
11. Haftung
|
||||
</h2>
|
||||
<ol className="list-decimal list-inside space-y-2 text-muted-foreground leading-relaxed [&>li]:pl-2">
|
||||
<li>WEBklar haftet nur bei Vorsatz und grober Fahrlässigkeit.</li>
|
||||
<li>Keine Haftung für:
|
||||
<ul className="list-disc list-inside mt-2 space-y-1 pl-2">
|
||||
<li>Umsatzausfälle</li>
|
||||
<li>Datenverlust</li>
|
||||
<li>Systemausfälle</li>
|
||||
<li>externe Dienste</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Die Haftung ist der Höhe nach auf den Auftragswert begrenzt.</li>
|
||||
</ol>
|
||||
</section>
|
||||
{contractDivider}
|
||||
|
||||
{/* 12. Kündigung */}
|
||||
<section>
|
||||
<h2 className="text-lg font-display font-medium uppercase tracking-tight text-foreground mb-4">
|
||||
12. Kündigung
|
||||
</h2>
|
||||
<ol className="list-decimal list-inside space-y-2 text-muted-foreground leading-relaxed [&>li]:pl-2">
|
||||
<li>Laufzeitverträge (z. B. Hosting, Wartung) können zum Ende der jeweiligen Laufzeit gekündigt werden.</li>
|
||||
<li>Das Recht zur außerordentlichen Kündigung bleibt unberührt.</li>
|
||||
</ol>
|
||||
</section>
|
||||
{contractDivider}
|
||||
|
||||
{/* 13. Referenzen */}
|
||||
<section>
|
||||
<h2 className="text-lg font-display font-medium uppercase tracking-tight text-foreground mb-4">
|
||||
13. Referenzen
|
||||
</h2>
|
||||
<p className="text-muted-foreground leading-relaxed">
|
||||
WEBklar darf das Projekt nur nach ausdrücklicher Zustimmung des Kunden als Referenz verwenden.
|
||||
</p>
|
||||
</section>
|
||||
{contractDivider}
|
||||
|
||||
{/* 14. Schlussbestimmungen */}
|
||||
<section>
|
||||
<h2 className="text-lg font-display font-medium uppercase tracking-tight text-foreground mb-4">
|
||||
14. Schlussbestimmungen
|
||||
</h2>
|
||||
<ol className="list-decimal list-inside space-y-2 text-muted-foreground leading-relaxed [&>li]:pl-2">
|
||||
<li>Es gilt deutsches Recht.</li>
|
||||
<li>Gerichtsstand ist der Sitz von WEBklar, soweit zulässig.</li>
|
||||
<li>Sollten einzelne Bestimmungen unwirksam sein, bleibt der Vertrag im Übrigen wirksam.</li>
|
||||
</ol>
|
||||
</section>
|
||||
</article>
|
||||
|
||||
{/* Back / Contact */}
|
||||
<div className="mt-16 pt-12 border-t border-border flex flex-wrap gap-4">
|
||||
<Link to="/">
|
||||
<Button variant="outline" className="rounded-full">
|
||||
Zur Startseite
|
||||
</Button>
|
||||
</Link>
|
||||
<Link to="/kontakt">
|
||||
<Button className="btn-minimal rounded-full">
|
||||
Kontakt
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AGB;
|
||||
@@ -6,6 +6,7 @@ import { Textarea } from "@/components/ui/textarea";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { ArrowLeft, Send } from "lucide-react";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { ID, databases, DATABASE_ID, CONTACTS_COLLECTION_ID } from "@/lib/appwrite";
|
||||
|
||||
const Contact = () => {
|
||||
const { toast } = useToast();
|
||||
@@ -30,8 +31,22 @@ const Contact = () => {
|
||||
e.preventDefault();
|
||||
setIsSubmitting(true);
|
||||
|
||||
// Simulate form submission
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000));
|
||||
try {
|
||||
const doc: Record<string, string> = {
|
||||
name: formData.name.trim(),
|
||||
email: formData.email.trim(),
|
||||
message: formData.message.trim(),
|
||||
};
|
||||
if (formData.company.trim()) {
|
||||
doc.company = formData.company.trim();
|
||||
}
|
||||
|
||||
await databases.createDocument(
|
||||
DATABASE_ID,
|
||||
CONTACTS_COLLECTION_ID,
|
||||
ID.unique(),
|
||||
doc
|
||||
);
|
||||
|
||||
toast({
|
||||
title: "Nachricht gesendet!",
|
||||
@@ -39,7 +54,16 @@ const Contact = () => {
|
||||
});
|
||||
|
||||
setFormData({ name: "", email: "", company: "", message: "" });
|
||||
} catch (err) {
|
||||
console.error("Fehler beim Senden:", err);
|
||||
toast({
|
||||
title: "Fehler",
|
||||
description: "Die Nachricht konnte nicht gesendet werden. Bitte versuchen Sie es später erneut oder kontaktieren Sie uns direkt per E-Mail.",
|
||||
variant: "destructive",
|
||||
});
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -171,19 +195,19 @@ const Contact = () => {
|
||||
<div>
|
||||
<div className="label-tag mb-2">E-Mail</div>
|
||||
<a
|
||||
href="mailto:hello@webklar.de"
|
||||
href="mailto:support@webklar.com"
|
||||
className="text-foreground hover:text-muted-foreground transition-colors"
|
||||
>
|
||||
hello@webklar.de
|
||||
support@webklar.com
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<div className="label-tag mb-2">Telefon</div>
|
||||
<a
|
||||
href="tel:+4912345678"
|
||||
href="tel:+491704969375"
|
||||
className="text-foreground hover:text-muted-foreground transition-colors"
|
||||
>
|
||||
+49 123 456 78
|
||||
0170 4969375
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user