enhancements of the homepage in the guest pwa
This commit is contained in:
Codex Agent
92
package-lock.json
generated
92
package-lock.json
generated
@@ -26,6 +26,7 @@
|
||||
"@radix-ui/react-toggle": "^1.1.2",
|
||||
"@radix-ui/react-toggle-group": "^1.1.11",
|
||||
"@radix-ui/react-tooltip": "^1.2.8",
|
||||
"@react-spring/web": "^10.0.3",
|
||||
"@stripe/stripe-js": "^8.5.3",
|
||||
"@tailwindcss/vite": "^4.1.17",
|
||||
"@tamagui/button": "~1.139.2",
|
||||
@@ -42,6 +43,7 @@
|
||||
"@tanstack/react-query": "^5.90.12",
|
||||
"@types/react": "^19.2.7",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"@use-gesture/react": "^10.3.1",
|
||||
"@vitejs/plugin-react": "^4.7.0",
|
||||
"canvas-confetti": "^1.9.4",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
@@ -4810,6 +4812,78 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@react-spring/animated": {
|
||||
"version": "10.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-10.0.3.tgz",
|
||||
"integrity": "sha512-7MrxADV3vaUADn2V9iYhaIL6iOWRx9nCJjYrsk2AHD2kwPr6fg7Pt0v+deX5RnCDmCKNnD6W5fasiyM8D+wzJQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@react-spring/shared": "~10.0.3",
|
||||
"@react-spring/types": "~10.0.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@react-spring/core": {
|
||||
"version": "10.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@react-spring/core/-/core-10.0.3.tgz",
|
||||
"integrity": "sha512-D4DwNO68oohDf/0HG2G0Uragzb9IA1oXblxrd6MZAcBcUQG2EHUWXewjdECMPLNmQvlYVyyBRH6gPxXM5DX7DQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@react-spring/animated": "~10.0.3",
|
||||
"@react-spring/shared": "~10.0.3",
|
||||
"@react-spring/types": "~10.0.3"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/react-spring/donate"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@react-spring/rafz": {
|
||||
"version": "10.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@react-spring/rafz/-/rafz-10.0.3.tgz",
|
||||
"integrity": "sha512-Ri2/xqt8OnQ2iFKkxKMSF4Nqv0LSWnxXT4jXFzBDsHgeeH/cHxTLupAWUwmV9hAGgmEhBmh5aONtj3J6R/18wg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@react-spring/shared": {
|
||||
"version": "10.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-10.0.3.tgz",
|
||||
"integrity": "sha512-geCal66nrkaQzUVhPkGomylo+Jpd5VPK8tPMEDevQEfNSWAQP15swHm+MCRG4wVQrQlTi9lOzKzpRoTL3CA84Q==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@react-spring/rafz": "~10.0.3",
|
||||
"@react-spring/types": "~10.0.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@react-spring/types": {
|
||||
"version": "10.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@react-spring/types/-/types-10.0.3.tgz",
|
||||
"integrity": "sha512-H5Ixkd2OuSIgHtxuHLTt7aJYfhMXKXT/rK32HPD/kSrOB6q6ooeiWAXkBy7L8F3ZxdkBb9ini9zP9UwnEFzWgQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@react-spring/web": {
|
||||
"version": "10.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@react-spring/web/-/web-10.0.3.tgz",
|
||||
"integrity": "sha512-ndU+kWY81rHsT7gTFtCJ6mrVhaJ6grFmgTnENipzmKqot4HGf5smPNK+cZZJqoGeDsj9ZsiWPW4geT/NyD484A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@react-spring/animated": "~10.0.3",
|
||||
"@react-spring/core": "~10.0.3",
|
||||
"@react-spring/shared": "~10.0.3",
|
||||
"@react-spring/types": "~10.0.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@react-stately/flags": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@react-stately/flags/-/flags-3.1.2.tgz",
|
||||
@@ -7667,6 +7741,24 @@
|
||||
"url": "https://opencollective.com/typescript-eslint"
|
||||
}
|
||||
},
|
||||
"node_modules/@use-gesture/core": {
|
||||
"version": "10.3.1",
|
||||
"resolved": "https://registry.npmjs.org/@use-gesture/core/-/core-10.3.1.tgz",
|
||||
"integrity": "sha512-WcINiDt8WjqBdUXye25anHiNxPc0VOrlT8F6LLkU6cycrOGUDyY/yyFmsg3k8i5OLvv25llc0QC45GhR/C8llw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@use-gesture/react": {
|
||||
"version": "10.3.1",
|
||||
"resolved": "https://registry.npmjs.org/@use-gesture/react/-/react-10.3.1.tgz",
|
||||
"integrity": "sha512-Yy19y6O2GJq8f7CHf7L0nxL8bf4PZCPaVOCgJrusOeFHY1LvHgYXnmnXg6N5iwAnbgbZCDjo60SiM6IPJi9C5g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@use-gesture/core": "10.3.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">= 16.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@vitejs/plugin-react": {
|
||||
"version": "4.7.0",
|
||||
"resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.7.0.tgz",
|
||||
|
||||
@@ -63,6 +63,7 @@
|
||||
"@radix-ui/react-toggle": "^1.1.2",
|
||||
"@radix-ui/react-toggle-group": "^1.1.11",
|
||||
"@radix-ui/react-tooltip": "^1.2.8",
|
||||
"@react-spring/web": "^10.0.3",
|
||||
"@stripe/stripe-js": "^8.5.3",
|
||||
"@tailwindcss/vite": "^4.1.17",
|
||||
"@tamagui/button": "~1.139.2",
|
||||
@@ -79,6 +80,7 @@
|
||||
"@tanstack/react-query": "^5.90.12",
|
||||
"@types/react": "^19.2.7",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"@use-gesture/react": "^10.3.1",
|
||||
"@vitejs/plugin-react": "^4.7.0",
|
||||
"canvas-confetti": "^1.9.4",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
@@ -96,8 +98,8 @@
|
||||
"laravel-vite-plugin": "^2.0.1",
|
||||
"lucide-react": "^0.475.0",
|
||||
"pdf-lib": "^1.17.1",
|
||||
"react-colorful": "^5.6.1",
|
||||
"react": "^19.2.1",
|
||||
"react-colorful": "^5.6.1",
|
||||
"react-dom": "^19.2.1",
|
||||
"react-hot-toast": "^2.6.0",
|
||||
"react-i18next": "^16.4.1",
|
||||
|
||||
1
public/patterns/pattern-hearts-dark.svg
Normal file
1
public/patterns/pattern-hearts-dark.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="58" height="87"><rect width="100%" height="100%" fill="#2b2b31"/><path fill="none" stroke="#ecc94b" stroke-linecap="square" d="M43.5 5.829a2.125 2.125 0 1 0 0 4.25 2.125 2.125 0 0 0 0-4.25zm-25.057 5.67a2.125 2.125 0 1 0 0 4.251 2.125 2.125 0 0 0 0-4.25zM14.5 49.33a2.125 2.125 0 1 0 0 4.25 2.125 2.125 0 0 0 0-4.25zM47.443 55a2.125 2.125 0 1 0 0 4.25 2.125 2.125 0 0 0 0-4.25z"/><path fill="none" stroke="#f44034" stroke-linecap="square" d="M9.75 36.005h-4.5m2.25-2.25v4.5m35.572-12.63h-4.5m2.25-2.25v4.5m-26.75 41.25h-4.5m2.25-2.25v4.5m26.928 8.13h-4.5m2.25-2.25v4.5"/><path fill="none" stroke="#00bdd6" stroke-linecap="square" d="m9.123-3.597-.005.002A5.26 5.26 0 0 0 7.581-7.1a5.283 5.283 0 0 0-7.47 0L0-6.99l-.11-.11a5.283 5.283 0 0 0-7.472 0 5.26 5.26 0 0 0-1.536 3.505l-.005-.002s-.899 5.66 9.112 11.543l.008.008q.002 0 .002-.002l.002.002.008-.008C10.022 2.063 9.123-3.597 9.123-3.597zm58 0-.005.002A5.26 5.26 0 0 0 65.582-7.1a5.283 5.283 0 0 0-7.471 0L58-6.99l-.11-.11a5.283 5.283 0 0 0-7.471 0 5.26 5.26 0 0 0-1.537 3.505l-.006-.002s-.899 5.66 9.113 11.543l.008.008s.002 0 .002-.002l.002.002.008-.008C68.02 2.063 67.122-3.597 67.122-3.597zm-29 43.5-.005.002a5.26 5.26 0 0 0-1.536-3.505 5.283 5.283 0 0 0-7.471 0l-.111.11-.11-.11a5.283 5.283 0 0 0-7.472 0 5.26 5.26 0 0 0-1.536 3.505l-.005-.002s-.899 5.66 9.113 11.543l.008.008s.002 0 .002-.002l.002.002.008-.008c10.012-5.883 9.113-11.543 9.113-11.543zm-29 43.5h-.005A5.26 5.26 0 0 0 7.581 79.9a5.283 5.283 0 0 0-7.47 0L0 80.01l-.11-.11a5.283 5.283 0 0 0-7.472 0 5.26 5.26 0 0 0-1.536 3.505l-.005-.001s-.899 5.66 9.112 11.543l.008.008q.002 0 .002-.002l.002.002.008-.008c10.013-5.883 9.114-11.543 9.114-11.543zm58 0h-.005a5.26 5.26 0 0 0-1.536-3.504 5.283 5.283 0 0 0-7.471 0l-.111.11-.11-.11a5.283 5.283 0 0 0-7.471 0 5.26 5.26 0 0 0-1.537 3.505l-.006-.001s-.899 5.66 9.113 11.543l.008.008s.002 0 .002-.002l.002.002.008-.008c10.012-5.883 9.113-11.543 9.113-11.543z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
1
public/patterns/pattern-hearts-red.svg
Normal file
1
public/patterns/pattern-hearts-red.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="53.101" height="79.65"><rect width="100%" height="100%" fill="#e4446e"/><path fill="none" stroke="#ecc94b" d="M57.589 69.148 45.16 81.466M55.4 65.24 41.735 78.784M50.49 64.03 38.873 75.544m5.424-11.453L37 71.324m20.642-1.662-.006.002a5.98 5.98 0 0 0-1.747-3.985 6.006 6.006 0 0 0-8.495 0l-.125.125-.125-.125a6.006 6.006 0 0 0-8.495 0 5.98 5.98 0 0 0-1.747 3.985l-.006-.002s-1.022 6.436 10.362 13.126l.009.009.003-.002.003.002.009-.01c11.382-6.689 10.36-13.125 10.36-13.125Zm-.053-80.164L45.16 1.816M55.4-14.408 41.735-.866M50.49-15.62 38.873-4.106m5.424-11.453L37-8.326m20.642-1.662-.006.002a5.98 5.98 0 0 0-1.747-3.985 6.006 6.006 0 0 0-8.495 0l-.125.125-.125-.125a6.006 6.006 0 0 0-8.495 0 5.98 5.98 0 0 0-1.747 3.985l-.006-.002S35.874-3.552 47.258 3.138l.009.009.003-.002.003.002.009-.01c11.382-6.689 10.36-13.125 10.36-13.125ZM4.488 69.148-7.94 81.466M2.299 65.24l-13.663 13.543m8.752-14.753-11.615 11.513m5.423-11.453-7.297 7.233m20.642-1.662-.006.002a5.98 5.98 0 0 0-1.746-3.985 6.006 6.006 0 0 0-8.495 0l-.125.125-.126-.125a6.006 6.006 0 0 0-8.495 0 5.98 5.98 0 0 0-1.746 3.985l-.006-.002s-1.023 6.436 10.361 13.126l.01.009.002-.002.003.002.01-.01c11.382-6.689 10.36-13.125 10.36-13.125ZM33.283 29.32 20.854 41.639m10.24-16.224L17.43 38.957m8.753-14.753L14.567 35.717m5.424-11.452-7.297 7.232m20.642-1.662-.006.002a5.98 5.98 0 0 0-1.747-3.985 6.006 6.006 0 0 0-8.494 0l-.126.125-.125-.125a6.006 6.006 0 0 0-8.495 0 5.98 5.98 0 0 0-1.747 3.985l-.006-.002s-1.022 6.437 10.362 13.126l.009.009.003-.002.003.002.009-.01c11.382-6.688 10.36-13.125 10.36-13.125ZM4.488-10.502-7.94 1.816M2.299-14.408-11.364-.866m8.752-14.753L-14.227-4.106m5.423-11.453-7.297 7.233M4.541-9.988l-.006.002a5.98 5.98 0 0 0-1.746-3.985 6.006 6.006 0 0 0-8.495 0l-.125.125-.126-.125a6.006 6.006 0 0 0-8.495 0 5.98 5.98 0 0 0-1.746 3.985l-.006-.002S-17.227-3.552-5.843 3.138l.01.009.002-.002.003.002.01-.01C5.563-3.551 4.541-9.987 4.541-9.987Z"/><path fill="none" stroke="#4051b5" d="M31.106 13.62h4m-2-2v4m9.462 11.313h4m-2-2v4M6.806 53.445h4m-2-2v4m4.962 11.313h4m-2-2v4"/></svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
1
public/patterns/pattern-triangles-dark.svg
Normal file
1
public/patterns/pattern-triangles-dark.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="35.783" height="83.523"><rect width="100%" height="100%"/><path fill="none" stroke="#ecc94b" stroke-linecap="square" stroke-width=".5" d="m14.13 80.123 3.694-8.621-3.694-8.621-3.694 8.62zM7.597 78.13l6.533 15.25 6.533-15.25-2.84-6.628-3.693 8.621-3.694-8.621zm0 0-2.84 6.628 9.373 21.878 9.372-21.878-2.84-6.628-6.532 15.25zm24.425-39.768 3.693-8.622-3.693-8.62-3.694 8.62zm-6.534-1.993 6.534 15.249 6.532-15.25-2.839-6.628-3.693 8.622-3.694-8.622zm0 0-2.84 6.628 9.374 21.877 9.372-21.877-2.84-6.628-6.532 15.249zM19.81 49.625 32.022 78.13l12.212-28.505-2.84-6.628-9.372 21.877-9.373-21.877zm0 0-2.84 6.628 15.053 35.133 15.051-35.133-2.839-6.628L32.022 78.13zM14.13 62.88l17.892 41.761 17.89-41.761-2.839-6.628-15.051 35.133L16.97 56.253zM-.067 29.74l-3.694-8.622-3.694 8.621 3.694 8.622zm-7.388 0-2.84 6.628 6.534 15.249 6.533-15.25-2.84-6.628-3.693 8.622zm3.694 21.877-6.533-15.25-2.84 6.629 9.373 21.877L5.61 42.997l-2.84-6.628zm-9.373-8.621-2.84 6.628L-3.76 78.13 8.45 49.625l-2.84-6.628-9.372 21.877zm9.373 35.133-12.213-28.505-2.84 6.628L-3.76 91.386l15.05-35.133-2.839-6.628zm-15.052-21.877-2.84 6.628 17.892 41.761 17.891-41.76-2.84-6.628-15.05 35.133zm38.622-90.151-2.84 6.628L32.023 7.863l15.05-35.133-2.839-6.628L32.022-5.392zM14.13-20.642l17.892 41.761 17.89-41.761-2.839-6.628L32.022 7.863 16.97-27.27zM-3.761-5.392l-12.213-28.506-2.84 6.628L-3.76 7.863 11.29-27.27l-2.839-6.628zM-18.813-27.27l-2.84 6.628L-3.76 21.119l17.89-41.761-2.84-6.628L-3.76 7.863zm29.25 15.249-2.84 6.628 6.533 15.25 6.533-15.25-2.84-6.628L14.13-3.4zM14.13 9.856 7.597-5.393l-2.84 6.628 9.373 21.878 9.372-21.878-2.84-6.628zm-9.373-8.62-2.84 6.627L14.13 36.37 26.342 7.863l-2.84-6.628-9.372 21.878zm9.373 35.133L1.918 7.863l-2.84 6.629L14.13 49.625l15.052-35.133-2.84-6.629zM-.922 14.492l-2.84 6.627L14.13 62.881l17.891-41.762-2.84-6.627L14.13 49.625zM40.54 1.235 37.7 7.863 49.914 36.37 62.126 7.863l-2.84-6.628-9.373 21.878zm9.373 35.134L37.701 7.863l-2.84 6.629 15.052 35.133 15.052-35.133-2.84-6.629zM34.861 14.492l-2.84 6.627 17.892 41.762 17.891-41.762-2.84-6.627-15.05 35.133z"/></svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
1
public/patterns/rays-sunburst.svg
Normal file
1
public/patterns/rays-sunburst.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 800 800'><rect fill='#ffffff' width='800' height='800'/><defs><radialGradient id='a' cx='400' cy='400' r='50%' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='#ffffff'/><stop offset='1' stop-color='#FF540B'/></radialGradient><radialGradient id='b' cx='400' cy='400' r='70%' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='#ffffff'/><stop offset='1' stop-color='#FFBD19'/></radialGradient></defs><rect fill='url(#a)' width='800' height='800'/><g fill-opacity='.8'><path fill='url(#b)' d='M998.7 439.2c1.7-26.5 1.7-52.7 0.1-78.5L401 399.9c0 0 0-0.1 0-0.1l587.6-116.9c-5.1-25.9-11.9-51.2-20.3-75.8L400.9 399.7c0 0 0-0.1 0-0.1l537.3-265c-11.6-23.5-24.8-46.2-39.3-67.9L400.8 399.5c0 0 0-0.1-0.1-0.1l450.4-395c-17.3-19.7-35.8-38.2-55.5-55.5l-395 450.4c0 0-0.1 0-0.1-0.1L733.4-99c-21.7-14.5-44.4-27.6-68-39.3l-265 537.4c0 0-0.1 0-0.1 0l192.6-567.4c-24.6-8.3-49.9-15.1-75.8-20.2L400.2 399c0 0-0.1 0-0.1 0l39.2-597.7c-26.5-1.7-52.7-1.7-78.5-0.1L399.9 399c0 0-0.1 0-0.1 0L282.9-188.6c-25.9 5.1-51.2 11.9-75.8 20.3l192.6 567.4c0 0-0.1 0-0.1 0l-265-537.3c-23.5 11.6-46.2 24.8-67.9 39.3l332.8 498.1c0 0-0.1 0-0.1 0.1L4.4-51.1C-15.3-33.9-33.8-15.3-51.1 4.4l450.4 395c0 0 0 0.1-0.1 0.1L-99 66.6c-14.5 21.7-27.6 44.4-39.3 68l537.4 265c0 0 0 0.1 0 0.1l-567.4-192.6c-8.3 24.6-15.1 49.9-20.2 75.8L399 399.8c0 0 0 0.1 0 0.1l-597.7-39.2c-1.7 26.5-1.7 52.7-0.1 78.5L399 400.1c0 0 0 0.1 0 0.1l-587.6 116.9c5.1 25.9 11.9 51.2 20.3 75.8l567.4-192.6c0 0 0 0.1 0 0.1l-537.3 265c11.6 23.5 24.8 46.2 39.3 67.9l498.1-332.8c0 0 0 0.1 0.1 0.1l-450.4 395c17.3 19.7 35.8 38.2 55.5 55.5l395-450.4c0 0 0.1 0 0.1 0.1L66.6 899c21.7 14.5 44.4 27.6 68 39.3l265-537.4c0 0 0.1 0 0.1 0L207.1 968.3c24.6 8.3 49.9 15.1 75.8 20.2L399.8 401c0 0 0.1 0 0.1 0l-39.2 597.7c26.5 1.7 52.7 1.7 78.5 0.1L400.1 401c0 0 0.1 0 0.1 0l116.9 587.6c25.9-5.1 51.2-11.9 75.8-20.3L400.3 400.9c0 0 0.1 0 0.1 0l265 537.3c23.5-11.6 46.2-24.8 67.9-39.3L400.5 400.8c0 0 0.1 0 0.1-0.1l395 450.4c19.7-17.3 38.2-35.8 55.5-55.5l-450.4-395c0 0 0-0.1 0.1-0.1L899 733.4c14.5-21.7 27.6-44.4 39.3-68l-537.4-265c0 0 0-0.1 0-0.1l567.4 192.6c8.3-24.6 15.1-49.9 20.2-75.8L401 400.2c0 0 0-0.1 0-0.1L998.7 439.2z'/></g></svg>
|
||||
@@ -11,7 +11,7 @@
|
||||
|
||||
@theme {
|
||||
--font-sans:
|
||||
'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
'Montserrat', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
--font-display: 'Playfair Display', serif;
|
||||
--font-serif: 'Lora', serif;
|
||||
--font-sans-marketing: 'Montserrat', sans-serif;
|
||||
@@ -123,7 +123,7 @@
|
||||
--guest-link: #007aff;
|
||||
--guest-font-family: 'Montserrat', 'Inter', 'Helvetica Neue', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
--guest-body-font: 'Montserrat', 'Inter', 'Helvetica Neue', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
--guest-heading-font: 'Montserrat', 'Inter', 'Helvetica Neue', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
--guest-heading-font: 'Playfair Display', 'Montserrat', 'Inter', 'Helvetica Neue', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
--guest-serif-font: 'Lora', serif;
|
||||
}
|
||||
|
||||
|
||||
@@ -110,10 +110,11 @@ export default function EmotionPicker({
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="relative">
|
||||
<div
|
||||
className={cn(
|
||||
'grid gap-3 pb-2',
|
||||
variant === 'standalone' ? 'grid-cols-2 sm:grid-cols-3' : 'grid-cols-2 sm:grid-cols-3'
|
||||
'grid grid-rows-2 grid-flow-col auto-cols-[170px] sm:auto-cols-[190px] gap-3 overflow-x-auto pb-2 pr-12',
|
||||
'scrollbar-thin scrollbar-thumb-muted scrollbar-track-transparent'
|
||||
)}
|
||||
aria-label="Emotions"
|
||||
>
|
||||
@@ -138,16 +139,16 @@ export default function EmotionPicker({
|
||||
key={emotion.id}
|
||||
type="button"
|
||||
onClick={() => handleEmotionSelect(emotion)}
|
||||
className="group flex min-w-[180px] flex-col gap-2 rounded-2xl border border-white/40 bg-white/80 px-4 py-3 text-left shadow-sm transition hover:-translate-y-0.5 hover:border-pink-200 hover:shadow-md dark:border-gray-700/60 dark:bg-gray-900/70"
|
||||
className="group flex flex-col gap-2 rounded-2xl border border-muted/40 bg-white/80 px-4 py-3 text-left shadow-sm transition hover:-translate-y-0.5 hover:border-foreground/10 hover:shadow-md dark:border-gray-700/60 dark:bg-gray-900/70"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-2xl" aria-hidden>
|
||||
{emotion.emoji}
|
||||
</span>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="font-medium text-sm text-foreground line-clamp-1">{localizedName}</div>
|
||||
<div className="font-medium text-sm text-foreground">{localizedName}</div>
|
||||
{localizedDescription && (
|
||||
<div className="text-xs text-muted-foreground line-clamp-1">{localizedDescription}</div>
|
||||
<div className="text-xs text-muted-foreground line-clamp-2">{localizedDescription}</div>
|
||||
)}
|
||||
</div>
|
||||
<ChevronRight className="h-4 w-4 text-muted-foreground opacity-0 transition group-hover:opacity-100" />
|
||||
@@ -156,6 +157,8 @@ export default function EmotionPicker({
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="pointer-events-none absolute inset-y-0 right-0 w-10 bg-gradient-to-l from-[var(--guest-background)] via-[var(--guest-background)]/90 to-transparent dark:from-black dark:via-black/80" aria-hidden />
|
||||
</div>
|
||||
|
||||
{/* Skip option */}
|
||||
{shouldShowSkip && (
|
||||
|
||||
@@ -6,6 +6,7 @@ import { getDeviceId } from '../lib/device';
|
||||
import { usePollGalleryDelta } from '../polling/usePollGalleryDelta';
|
||||
import { Heart } from 'lucide-react';
|
||||
import { useTranslation } from '../i18n/useTranslation';
|
||||
import { useEventBranding } from '../context/EventBrandingContext';
|
||||
|
||||
type Props = { token: string };
|
||||
|
||||
@@ -27,10 +28,15 @@ type PreviewPhoto = {
|
||||
|
||||
export default function GalleryPreview({ token }: Props) {
|
||||
const { locale } = useTranslation();
|
||||
const { branding } = useEventBranding();
|
||||
const { photos, loading } = usePollGalleryDelta(token, locale);
|
||||
const [mode, setMode] = React.useState<PreviewFilter>('latest');
|
||||
const typedPhotos = React.useMemo(() => photos as PreviewPhoto[], [photos]);
|
||||
const hasPhotobooth = React.useMemo(() => typedPhotos.some((p) => p.ingest_source === 'photobooth'), [typedPhotos]);
|
||||
const radius = branding.buttons?.radius ?? 12;
|
||||
const linkColor = branding.buttons?.linkColor ?? branding.secondaryColor;
|
||||
const headingFont = branding.typography?.heading ?? branding.fontFamily ?? undefined;
|
||||
const bodyFont = branding.typography?.body ?? branding.fontFamily ?? undefined;
|
||||
|
||||
const items = React.useMemo(() => {
|
||||
let arr = typedPhotos.slice();
|
||||
@@ -84,15 +90,17 @@ export default function GalleryPreview({ token }: Props) {
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="space-y-4">
|
||||
<Card className="border border-muted/30 shadow-sm" style={{ borderRadius: radius, background: 'var(--guest-surface)', fontFamily: bodyFont }}>
|
||||
<CardContent className="space-y-3 p-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-xs uppercase tracking-wide text-muted-foreground">Live-Galerie</p>
|
||||
<h3 className="text-lg font-semibold text-foreground">Alle Uploads auf einen Blick</h3>
|
||||
<p className="text-xs uppercase tracking-wide text-muted-foreground" style={headingFont ? { fontFamily: headingFont } : undefined}>Live-Galerie</p>
|
||||
<h3 className="text-lg font-semibold text-foreground" style={headingFont ? { fontFamily: headingFont } : undefined}>Alle Uploads auf einen Blick</h3>
|
||||
</div>
|
||||
<Link
|
||||
to={`/e/${encodeURIComponent(token)}/gallery?mode=${mode}`}
|
||||
className="text-sm font-semibold text-pink-600 hover:text-pink-700"
|
||||
className="text-sm font-semibold transition"
|
||||
style={{ color: linkColor }}
|
||||
>
|
||||
Alle ansehen →
|
||||
</Link>
|
||||
@@ -104,11 +112,14 @@ export default function GalleryPreview({ token }: Props) {
|
||||
key={filter.value}
|
||||
type="button"
|
||||
onClick={() => setMode(filter.value)}
|
||||
className={`rounded-full border px-4 py-1 transition ${
|
||||
mode === filter.value
|
||||
? 'border-pink-500 bg-pink-500 text-white shadow'
|
||||
: 'border-transparent bg-white/70 text-muted-foreground hover:border-pink-200'
|
||||
}`}
|
||||
style={{
|
||||
borderRadius: radius,
|
||||
border: mode === filter.value ? `1px solid ${branding.primaryColor}` : `1px solid ${branding.primaryColor}22`,
|
||||
background: mode === filter.value ? branding.primaryColor : 'var(--guest-surface)',
|
||||
color: mode === filter.value ? '#ffffff' : 'var(--foreground)',
|
||||
boxShadow: mode === filter.value ? `0 8px 18px ${branding.primaryColor}33` : 'none',
|
||||
}}
|
||||
className="px-4 py-1 transition"
|
||||
>
|
||||
{filter.label}
|
||||
</button>
|
||||
@@ -117,31 +128,44 @@ export default function GalleryPreview({ token }: Props) {
|
||||
|
||||
{loading && <p className="text-sm text-muted-foreground">Lädt…</p>}
|
||||
{!loading && items.length === 0 && (
|
||||
<Card>
|
||||
<CardContent className="p-3 text-sm text-muted-foreground">
|
||||
<div className="flex items-center gap-3 rounded-xl border border-muted/30 bg-[var(--guest-surface)] p-3 text-sm text-muted-foreground">
|
||||
<Heart className="h-4 w-4" style={{ color: branding.secondaryColor }} aria-hidden />
|
||||
Noch keine Fotos. Starte mit deinem ersten Upload!
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
<div className="grid gap-2 sm:grid-cols-2">
|
||||
{items.map((p: PreviewPhoto) => (
|
||||
<Link
|
||||
key={p.id}
|
||||
to={`/e/${encodeURIComponent(token)}/gallery?photoId=${p.id}`}
|
||||
className="group relative block overflow-hidden rounded-3xl border border-white/30 bg-gray-900 text-white shadow-lg"
|
||||
className="group relative block overflow-hidden text-foreground"
|
||||
style={{
|
||||
borderRadius: radius,
|
||||
border: `1px solid ${branding.primaryColor}22`,
|
||||
background: 'var(--guest-surface)',
|
||||
boxShadow: `0 12px 26px ${branding.primaryColor}22`,
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={p.thumbnail_path || p.file_path}
|
||||
alt={p.title || 'Foto'}
|
||||
className="h-48 w-full object-cover transition duration-300 group-hover:scale-105"
|
||||
className="h-40 w-full object-cover transition duration-300 group-hover:scale-105"
|
||||
loading="lazy"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/10 to-transparent" aria-hidden />
|
||||
<div className="absolute bottom-0 left-0 right-0 p-4">
|
||||
<p className="text-sm font-semibold leading-tight line-clamp-2">{p.title || getPhotoTitle(p)}</p>
|
||||
<div className="mt-2 flex items-center gap-1 text-xs text-white/80">
|
||||
<Heart className="h-4 w-4 fill-current" aria-hidden />
|
||||
<div
|
||||
className="absolute inset-0"
|
||||
style={{
|
||||
background: `linear-gradient(180deg, transparent 50%, ${branding.primaryColor}33 100%)`,
|
||||
}}
|
||||
aria-hidden
|
||||
/>
|
||||
<div className="absolute bottom-0 left-0 right-0 space-y-1 p-3">
|
||||
<p className="text-sm font-semibold leading-tight line-clamp-2" style={headingFont ? { fontFamily: headingFont } : undefined}>
|
||||
{p.title || getPhotoTitle(p)}
|
||||
</p>
|
||||
<div className="flex items-center gap-1 text-xs text-foreground/80">
|
||||
<Heart className="h-4 w-4" style={{ color: branding.primaryColor }} aria-hidden />
|
||||
{p.likes_count ?? 0}
|
||||
</div>
|
||||
</div>
|
||||
@@ -151,10 +175,11 @@ export default function GalleryPreview({ token }: Props) {
|
||||
|
||||
<p className="text-center text-sm text-muted-foreground">
|
||||
Lust auf mehr?{' '}
|
||||
<Link to={`/e/${encodeURIComponent(token)}/gallery`} className="font-semibold text-pink-600 hover:text-pink-700">
|
||||
<Link to={`/e/${encodeURIComponent(token)}/gallery`} className="font-semibold transition" style={{ color: linkColor }}>
|
||||
Zur Galerie →
|
||||
</Link>
|
||||
</p>
|
||||
</section>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -172,19 +172,13 @@ export default function Header({ eventToken, title = '' }: { eventToken?: string
|
||||
}, [notificationsOpen]);
|
||||
|
||||
if (!eventToken) {
|
||||
const guestName = identity?.name && identity?.hydrated ? identity.name : null;
|
||||
return (
|
||||
<div
|
||||
className="guest-header sticky top-0 z-20 flex items-center justify-between border-b bg-white/70 px-4 py-2 backdrop-blur dark:bg-black/40"
|
||||
className="guest-header z-20 flex items-center justify-between border-b bg-white/70 px-4 py-2 dark:bg-black/40"
|
||||
style={branding.fontFamily ? { fontFamily: branding.fontFamily } : undefined}
|
||||
>
|
||||
<div className="flex flex-col">
|
||||
<div className="font-semibold">{title}</div>
|
||||
{guestName && (
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{`${t('common.hi')} ${guestName}`}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<AppearanceToggleDropdown />
|
||||
@@ -194,20 +188,20 @@ export default function Header({ eventToken, title = '' }: { eventToken?: string
|
||||
);
|
||||
}
|
||||
|
||||
const guestName =
|
||||
identity && identity.eventKey === eventToken && identity.hydrated && identity.name ? identity.name : null;
|
||||
const headerFont = branding.typography?.heading ?? branding.fontFamily ?? undefined;
|
||||
const bodyFont = branding.typography?.body ?? branding.fontFamily ?? undefined;
|
||||
|
||||
const headerStyle: React.CSSProperties = {
|
||||
background: `linear-gradient(135deg, ${branding.primaryColor}, ${branding.secondaryColor})`,
|
||||
color: headerTextColor,
|
||||
fontFamily: branding.fontFamily ?? undefined,
|
||||
fontFamily: headerFont,
|
||||
};
|
||||
|
||||
const accentColor = branding.secondaryColor;
|
||||
|
||||
if (status === 'loading') {
|
||||
return (
|
||||
<div className="guest-header sticky top-0 z-20 flex items-center justify-between border-b border-white/10 px-4 py-2 text-white shadow-sm backdrop-blur" style={headerStyle}>
|
||||
<div className="guest-header z-20 flex items-center justify-between border-b border-white/10 px-4 py-2 text-white shadow-sm backdrop-blur" style={headerStyle}>
|
||||
<div className="font-semibold" style={branding.fontFamily ? { fontFamily: branding.fontFamily } : undefined}>{t('header.loading')}</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<AppearanceToggleDropdown />
|
||||
@@ -225,19 +219,14 @@ export default function Header({ eventToken, title = '' }: { eventToken?: string
|
||||
statsContext && statsContext.eventKey === eventToken ? statsContext : undefined;
|
||||
return (
|
||||
<div
|
||||
className="guest-header sticky top-0 z-20 flex items-center justify-between border-b border-white/10 px-4 py-3 text-white shadow-sm backdrop-blur"
|
||||
className="guest-header z-20 flex items-center justify-between border-b border-white/10 px-4 py-3 text-white shadow-sm backdrop-blur"
|
||||
style={headerStyle}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
{renderEventAvatar(event.name, event.type?.icon, accentColor, headerTextColor, branding.logo)}
|
||||
<div className="flex flex-col" style={branding.fontFamily ? { fontFamily: branding.fontFamily } : undefined}>
|
||||
<div className="font-semibold text-base">{event.name}</div>
|
||||
{guestName && (
|
||||
<span className="text-xs text-white/80">
|
||||
{`${t('common.hi')} ${guestName}`}
|
||||
</span>
|
||||
)}
|
||||
<div className="flex items-center gap-2 text-xs text-white/70">
|
||||
<div className="flex flex-col" style={headerFont ? { fontFamily: headerFont } : undefined}>
|
||||
<div className="font-semibold text-lg">{event.name}</div>
|
||||
<div className="flex items-center gap-2 text-xs text-white/70" style={bodyFont ? { fontFamily: bodyFont } : undefined}>
|
||||
{stats && (
|
||||
<>
|
||||
<span className="flex items-center gap-1">
|
||||
|
||||
@@ -10,7 +10,7 @@ export const DEFAULT_EVENT_BRANDING: EventBranding = {
|
||||
primaryColor: '#f43f5e',
|
||||
secondaryColor: '#fb7185',
|
||||
backgroundColor: '#ffffff',
|
||||
fontFamily: null,
|
||||
fontFamily: 'Montserrat, Inter, "Helvetica Neue", system-ui, -apple-system, BlinkMacSystemFont, sans-serif',
|
||||
logoUrl: null,
|
||||
palette: {
|
||||
primary: '#f43f5e',
|
||||
@@ -19,8 +19,8 @@ export const DEFAULT_EVENT_BRANDING: EventBranding = {
|
||||
surface: '#ffffff',
|
||||
},
|
||||
typography: {
|
||||
heading: null,
|
||||
body: null,
|
||||
heading: 'Playfair Display, "Times New Roman", serif',
|
||||
body: 'Montserrat, Inter, "Helvetica Neue", system-ui, -apple-system, BlinkMacSystemFont, sans-serif',
|
||||
sizePreset: 'm',
|
||||
},
|
||||
logo: {
|
||||
@@ -71,7 +71,7 @@ function resolveBranding(input?: EventBranding | null): EventBranding {
|
||||
primaryColor: normaliseHexColor(palettePrimary, DEFAULT_EVENT_BRANDING.primaryColor),
|
||||
secondaryColor: normaliseHexColor(paletteSecondary, DEFAULT_EVENT_BRANDING.secondaryColor),
|
||||
backgroundColor: normaliseHexColor(paletteBackground, DEFAULT_EVENT_BRANDING.backgroundColor),
|
||||
fontFamily: bodyFont?.trim() || null,
|
||||
fontFamily: bodyFont?.trim() || DEFAULT_EVENT_BRANDING.fontFamily,
|
||||
logoUrl: logoMode === 'upload' ? (logoValue?.trim() || null) : null,
|
||||
palette: {
|
||||
primary: normaliseHexColor(palettePrimary, DEFAULT_EVENT_BRANDING.primaryColor),
|
||||
@@ -80,8 +80,8 @@ function resolveBranding(input?: EventBranding | null): EventBranding {
|
||||
surface: normaliseHexColor(paletteSurface, paletteBackground ?? DEFAULT_EVENT_BRANDING.backgroundColor),
|
||||
},
|
||||
typography: {
|
||||
heading: headingFont?.trim() || null,
|
||||
body: bodyFont?.trim() || null,
|
||||
heading: headingFont?.trim() || DEFAULT_EVENT_BRANDING.typography?.heading || null,
|
||||
body: bodyFont?.trim() || DEFAULT_EVENT_BRANDING.typography?.body || DEFAULT_EVENT_BRANDING.fontFamily,
|
||||
sizePreset,
|
||||
},
|
||||
logo: {
|
||||
|
||||
@@ -132,6 +132,19 @@ export const messages: Record<LocaleCode, NestedMessages> = {
|
||||
},
|
||||
home: {
|
||||
fallbackGuestName: 'Gast',
|
||||
welcomeLine: 'Willkommen {name}!',
|
||||
introRotating: {
|
||||
0: 'Hilf uns, diesen besonderen Tag mit deinen schönsten Momenten festzuhalten.',
|
||||
1: 'Fang die Stimmung des Events ein und teile sie mit allen Gästen.',
|
||||
2: 'Deine Sicht zählt: Halte Augenblicke fest, die sonst niemand bemerkt.',
|
||||
3: 'Erfülle kleine Fotoaufgaben und fülle die gemeinsame Galerie mit Leben.',
|
||||
4: 'Zeig uns, was du siehst – deine Fotos erzählen die Geschichte dieses Tages.',
|
||||
5: 'Mach aus Schnappschüssen gemeinsame Erinnerungen in einer großen Event-Galerie.',
|
||||
6: 'Diese App ist eure Fotozentrale – fotografiere, lade hoch und begeistere die anderen.',
|
||||
7: 'Sorge dafür, dass kein wichtiger Moment verloren geht – mit deinen Bildern.',
|
||||
8: 'Lass dich von Fotoaufgaben inspirieren und halte die besonderen Szenen fest.',
|
||||
9: 'Mach mit beim Fotospiel: Deine Fotos machen dieses Event unvergesslich.',
|
||||
},
|
||||
hero: {
|
||||
subtitle: 'Willkommen zur Party',
|
||||
title: 'Hey {name}!',
|
||||
@@ -776,6 +789,19 @@ export const messages: Record<LocaleCode, NestedMessages> = {
|
||||
},
|
||||
home: {
|
||||
fallbackGuestName: 'Guest',
|
||||
welcomeLine: 'Welcome {name}!',
|
||||
introRotating: {
|
||||
0: 'Help us capture this special day with your favourite moments.',
|
||||
1: 'Capture the mood of the event and share it with everyone.',
|
||||
2: 'Your view matters: save the moments that others might miss.',
|
||||
3: 'Complete playful photo missions and fill the shared gallery with life.',
|
||||
4: 'Show us what you see – your photos tell the story of this day.',
|
||||
5: 'Turn quick snapshots into shared memories in one big event gallery.',
|
||||
6: 'This app is your photo hub – shoot, upload, and delight the other guests.',
|
||||
7: 'Make sure no important moment gets lost – with your pictures.',
|
||||
8: 'Let photo missions inspire you and capture the scenes that really matter.',
|
||||
9: 'Join the photo game: your pictures make this event unforgettable.',
|
||||
},
|
||||
hero: {
|
||||
subtitle: 'Welcome to the party',
|
||||
title: 'Hey {name}!',
|
||||
|
||||
@@ -322,7 +322,7 @@ export default function GalleryPage() {
|
||||
styleOverride={{ borderRadius: radius, fontFamily: headingFont }}
|
||||
/>
|
||||
{loading && <p className="px-4" style={bodyFont ? { fontFamily: bodyFont } : undefined}>{t('galleryPage.loading', 'Lade…')}</p>}
|
||||
<div className="grid gap-3 px-4 pb-16 sm:grid-cols-2 lg:grid-cols-3">
|
||||
<div className="grid grid-cols-3 gap-2 px-4 pb-16 sm:grid-cols-3 md:grid-cols-4">
|
||||
{list.map((p: GalleryPhoto) => {
|
||||
const imageUrl = normalizeImageUrl(p.thumbnail_path || p.file_path);
|
||||
const createdLabel = p.created_at
|
||||
@@ -357,7 +357,7 @@ export default function GalleryPage() {
|
||||
<img
|
||||
src={imageUrl}
|
||||
alt={altText}
|
||||
className="h-64 w-full object-cover transition duration-500 group-hover:scale-105"
|
||||
className="aspect-[3/4] w-full object-cover transition duration-500 group-hover:scale-105"
|
||||
onError={(e) => {
|
||||
(e.target as HTMLImageElement).src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjRjNGNEY2Ii8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0iIzk5OSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPk5vIEltYWdlPC90ZXh0Pjwvc3ZnPg==';
|
||||
}}
|
||||
@@ -425,6 +425,20 @@ export default function GalleryPage() {
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{list.length === 0 && Array.from({ length: 6 }).map((_, idx) => (
|
||||
<div
|
||||
key={`placeholder-${idx}`}
|
||||
className="relative overflow-hidden border border-muted/40 bg-[var(--guest-surface,#f7f7f7)] shadow-sm"
|
||||
style={{ borderRadius: radius }}
|
||||
>
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-white/60 via-white/30 to-transparent dark:from-white/5 dark:via-white/0" aria-hidden />
|
||||
<div className="flex aspect-[3/4] items-center justify-center gap-2 p-4 text-muted-foreground/70">
|
||||
<ImageIcon className="h-6 w-6" aria-hidden />
|
||||
<div className="h-2 w-10 rounded-full bg-muted/40" />
|
||||
</div>
|
||||
<div className="absolute inset-0 animate-pulse bg-white/30 dark:bg-white/5" aria-hidden />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{currentPhotoIndex !== null && list.length > 0 && (
|
||||
<PhotoLightbox
|
||||
|
||||
@@ -12,6 +12,8 @@ import { Sparkles, UploadCloud, X, RefreshCw } from 'lucide-react';
|
||||
import { useTranslation, type TranslateFn } from '../i18n/useTranslation';
|
||||
import { useEventBranding } from '../context/EventBrandingContext';
|
||||
import type { EventBranding } from '../types/event-branding';
|
||||
import { animated, useSpring } from '@react-spring/web';
|
||||
import { useGesture } from '@use-gesture/react';
|
||||
|
||||
export default function HomePage() {
|
||||
const { token } = useParams<{ token: string }>();
|
||||
@@ -25,17 +27,7 @@ export default function HomePage() {
|
||||
const radius = branding.buttons?.radius ?? 12;
|
||||
|
||||
const heroStorageKey = token ? `guestHeroDismissed_${token}` : 'guestHeroDismissed';
|
||||
const [heroVisible, setHeroVisible] = React.useState(() => {
|
||||
if (typeof window === 'undefined') {
|
||||
return true;
|
||||
}
|
||||
|
||||
try {
|
||||
return window.sessionStorage.getItem(heroStorageKey) !== '1';
|
||||
} catch {
|
||||
return true;
|
||||
}
|
||||
});
|
||||
const [heroVisible, setHeroVisible] = React.useState(false);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (typeof window === 'undefined') {
|
||||
@@ -43,9 +35,11 @@ export default function HomePage() {
|
||||
}
|
||||
|
||||
try {
|
||||
setHeroVisible(window.sessionStorage.getItem(heroStorageKey) !== '1');
|
||||
const stored = window.sessionStorage.getItem(heroStorageKey);
|
||||
// standardmäßig versteckt, nur sichtbar falls explizit gesetzt (kann später wieder aktiviert werden)
|
||||
setHeroVisible(stored === 'show');
|
||||
} catch {
|
||||
setHeroVisible(true);
|
||||
setHeroVisible(false);
|
||||
}
|
||||
}, [heroStorageKey]);
|
||||
|
||||
@@ -67,20 +61,37 @@ export default function HomePage() {
|
||||
const accentColor = branding.primaryColor;
|
||||
const secondaryAccent = branding.secondaryColor;
|
||||
|
||||
const [missionPreview, setMissionPreview] = React.useState<MissionPreview | null>(null);
|
||||
const [missionDeck, setMissionDeck] = React.useState<MissionPreview[]>([]);
|
||||
const [missionLoading, setMissionLoading] = React.useState(false);
|
||||
const missionPoolRef = React.useRef<MissionPreview[]>([]);
|
||||
|
||||
const shuffleMissionPreview = React.useCallback(() => {
|
||||
const drawRandom = React.useCallback((excludeIds: Set<number>) => {
|
||||
const pool = missionPoolRef.current.filter((item) => !excludeIds.has(item.id));
|
||||
if (!pool.length) return null;
|
||||
return pool[Math.floor(Math.random() * pool.length)];
|
||||
}, []);
|
||||
|
||||
const resetDeck = React.useCallback(() => {
|
||||
const pool = missionPoolRef.current;
|
||||
if (!pool.length) {
|
||||
setMissionPreview(null);
|
||||
setMissionDeck([]);
|
||||
return;
|
||||
}
|
||||
const choice = pool[Math.floor(Math.random() * pool.length)];
|
||||
setMissionPreview(choice);
|
||||
const shuffled = [...pool].sort(() => Math.random() - 0.5);
|
||||
setMissionDeck(shuffled.slice(0, 4));
|
||||
}, []);
|
||||
|
||||
const advanceDeck = React.useCallback(() => {
|
||||
setMissionDeck((prev) => {
|
||||
if (!prev.length) return prev;
|
||||
const [, ...rest] = prev;
|
||||
const exclude = new Set(rest.map((r) => r.id));
|
||||
const nextCandidate = drawRandom(exclude);
|
||||
const replenished = nextCandidate ? [...rest, nextCandidate] : rest;
|
||||
return replenished;
|
||||
});
|
||||
}, [drawRandom]);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!token) return;
|
||||
let cancelled = false;
|
||||
@@ -108,16 +119,16 @@ export default function HomePage() {
|
||||
duration: typeof task.duration === 'number' ? task.duration : 3,
|
||||
emotion: task.emotion ?? null,
|
||||
}));
|
||||
shuffleMissionPreview();
|
||||
resetDeck();
|
||||
} else {
|
||||
missionPoolRef.current = [];
|
||||
setMissionPreview(null);
|
||||
setMissionDeck([]);
|
||||
}
|
||||
} catch (err) {
|
||||
if (!cancelled) {
|
||||
console.warn('Mission preview failed', err);
|
||||
missionPoolRef.current = [];
|
||||
setMissionPreview(null);
|
||||
setMissionDeck([]);
|
||||
}
|
||||
} finally {
|
||||
if (!cancelled) {
|
||||
@@ -129,14 +140,35 @@ export default function HomePage() {
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [shuffleMissionPreview, token, locale]);
|
||||
}, [resetDeck, token, locale]);
|
||||
|
||||
if (!token) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const introArray: string[] = [];
|
||||
for (let i = 0; i < 12; i += 1) {
|
||||
const candidate = t(`home.introRotating.${i}`, '');
|
||||
if (candidate) {
|
||||
introArray.push(candidate);
|
||||
}
|
||||
}
|
||||
const introMessage =
|
||||
introArray.length > 0 ? introArray[Math.floor(Math.random() * introArray.length)] : '';
|
||||
|
||||
return (
|
||||
<div className="space-y-6 pb-32" style={bodyFont ? { fontFamily: bodyFont } : undefined}>
|
||||
<div className="space-y-0.5 pb-24" style={bodyFont ? { fontFamily: bodyFont } : undefined}>
|
||||
<section className="space-y-1 px-4">
|
||||
<p className="text-sm font-semibold text-foreground">
|
||||
{t('home.welcomeLine').replace('{name}', displayName)}
|
||||
</p>
|
||||
{introMessage && (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{introMessage}
|
||||
</p>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{heroVisible && (
|
||||
<HeroCard
|
||||
name={displayName}
|
||||
@@ -150,23 +182,17 @@ export default function HomePage() {
|
||||
/>
|
||||
)}
|
||||
|
||||
<section className="space-y-4" style={headingFont ? { fontFamily: headingFont } : undefined}>
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div>
|
||||
<h2 className="text-base font-semibold text-foreground">Starte dein Fotospiel</h2>
|
||||
<p className="text-xs text-muted-foreground">Wähle, wie du den nächsten Moment einfängst.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<section className="space-y-0.5" style={headingFont ? { fontFamily: headingFont } : undefined}>
|
||||
<div className="space-y-0.5">
|
||||
<MissionActionCard
|
||||
token={token}
|
||||
mission={missionPreview}
|
||||
mission={missionDeck[0] ?? null}
|
||||
loading={missionLoading}
|
||||
onShuffle={shuffleMissionPreview}
|
||||
onAdvance={advanceDeck}
|
||||
stack={missionDeck.slice(0, 3)}
|
||||
/>
|
||||
<EmotionActionCard />
|
||||
<UploadActionCard token={token} accentColor={accentColor} secondaryAccent={secondaryAccent} radius={radius} bodyFont={bodyFont} />
|
||||
<EmotionActionCard />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -254,58 +280,233 @@ function MissionActionCard({
|
||||
token,
|
||||
mission,
|
||||
loading,
|
||||
onShuffle,
|
||||
onAdvance,
|
||||
stack,
|
||||
}: {
|
||||
token: string;
|
||||
mission: MissionPreview | null;
|
||||
loading: boolean;
|
||||
onShuffle: () => void;
|
||||
onAdvance: () => void;
|
||||
stack: MissionPreview[];
|
||||
}) {
|
||||
const { branding } = useEventBranding();
|
||||
const radius = branding.buttons?.radius ?? 12;
|
||||
const primary = branding.buttons?.primary ?? branding.primaryColor;
|
||||
const secondary = branding.buttons?.secondary ?? branding.secondaryColor;
|
||||
const buttonStyle = branding.buttons?.style ?? 'filled';
|
||||
const headingFont = branding.typography?.heading ?? branding.fontFamily ?? undefined;
|
||||
const bodyFont = branding.typography?.body ?? branding.fontFamily ?? undefined;
|
||||
const textColor = '#1f2937';
|
||||
const subTextColor = '#334155';
|
||||
const swipeThreshold = 120;
|
||||
const stackLayers = stack.slice(1, 4);
|
||||
|
||||
const cardStyle: React.CSSProperties = {
|
||||
borderRadius: `${radius + 8}px`,
|
||||
backgroundColor: '#fcf7ef',
|
||||
backgroundImage: `linear-gradient(0deg, ${primary}33, ${primary}22), url(/patterns/rays-sunburst.svg)`,
|
||||
backgroundBlendMode: 'multiply, normal',
|
||||
backgroundSize: '330% 330%',
|
||||
backgroundPosition: 'center',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
filter: 'contrast(1.12) saturate(1.1)',
|
||||
border: `1px solid ${primary}26`,
|
||||
boxShadow: `0 12px 28px ${primary}22, 0 2px 6px ${primary}1f`,
|
||||
fontFamily: bodyFont,
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
};
|
||||
|
||||
const [{ x, y, rotateZ, rotateY, rotateX, scale, opacity }, api] = useSpring(() => ({
|
||||
x: 0,
|
||||
y: 0,
|
||||
rotateZ: 0,
|
||||
rotateY: 0,
|
||||
rotateX: 0,
|
||||
scale: 1,
|
||||
opacity: 1,
|
||||
config: { tension: 320, friction: 26 },
|
||||
}));
|
||||
|
||||
React.useEffect(() => {
|
||||
api.start({ x: 0, y: 0, rotateZ: 0, rotateY: 0, rotateX: 0, scale: 1, opacity: 1, immediate: false });
|
||||
}, [mission?.id, api]);
|
||||
|
||||
const bind = useGesture(
|
||||
{
|
||||
onDrag: ({ active, movement: [mx, my], velocity: [vx], direction: [dx], cancel }) => {
|
||||
if (active && Math.abs(mx) > swipeThreshold) {
|
||||
cancel?.();
|
||||
api.start({
|
||||
x: dx > 0 ? 520 : -520,
|
||||
y: my,
|
||||
rotateZ: dx > 0 ? 12 : -12,
|
||||
rotateY: dx > 0 ? 18 : -18,
|
||||
rotateX: -my / 10,
|
||||
opacity: 0,
|
||||
scale: 1,
|
||||
immediate: false,
|
||||
onRest: () => {
|
||||
onAdvance();
|
||||
api.start({ x: 0, y: 0, rotateZ: 0, rotateY: 0, rotateX: 0, opacity: 1, scale: 1, immediate: false });
|
||||
},
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
api.start({
|
||||
x: mx,
|
||||
y: my,
|
||||
rotateZ: mx / 18,
|
||||
rotateY: mx / 28,
|
||||
rotateX: -my / 36,
|
||||
scale: active ? 1.02 : 1,
|
||||
opacity: 1,
|
||||
immediate: false,
|
||||
});
|
||||
},
|
||||
onDragEnd: () => {
|
||||
api.start({ x: 0, y: 0, rotateZ: 0, rotateY: 0, rotateX: 0, scale: 1, opacity: 1, immediate: false });
|
||||
},
|
||||
},
|
||||
{
|
||||
drag: {
|
||||
filterTaps: true,
|
||||
bounds: { left: -200, right: 200, top: -120, bottom: 120 },
|
||||
rubberband: true,
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
return (
|
||||
<Card className="border-0 shadow-sm">
|
||||
<CardHeader className="flex flex-row items-start gap-3">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-2xl bg-pink-100 text-pink-600">
|
||||
<Card className="border-0 shadow-none bg-transparent" style={{ fontFamily: bodyFont }}>
|
||||
<CardContent className="px-0 py-0">
|
||||
<div className="relative min-h-[280px]">
|
||||
{stackLayers.map((item, index) => {
|
||||
const depth = index + 1;
|
||||
const scaleDown = 1 - depth * 0.03;
|
||||
const translateY = depth * 12;
|
||||
const fade = Math.max(0.25, 0.55 - depth * 0.08);
|
||||
return (
|
||||
<div
|
||||
key={item.id ?? index}
|
||||
className="absolute inset-0 pointer-events-none"
|
||||
style={{
|
||||
...cardStyle,
|
||||
transform: `translateY(${translateY}px) scale(${scaleDown})`,
|
||||
opacity: fade,
|
||||
filter: 'brightness(0.96) contrast(0.98)',
|
||||
}}
|
||||
aria-hidden
|
||||
/>
|
||||
);
|
||||
})}
|
||||
<animated.div
|
||||
className="relative overflow-hidden touch-pan-y"
|
||||
style={{
|
||||
...cardStyle,
|
||||
x,
|
||||
y,
|
||||
rotateZ,
|
||||
rotateY,
|
||||
rotateX,
|
||||
scale,
|
||||
opacity,
|
||||
transformOrigin: 'center center',
|
||||
willChange: 'transform',
|
||||
}}
|
||||
{...bind()}
|
||||
>
|
||||
<div
|
||||
className="absolute inset-x-0 top-0 h-12"
|
||||
style={{
|
||||
background: `linear-gradient(90deg, ${secondary}80, ${primary}cc)`,
|
||||
filter: 'saturate(1.05)',
|
||||
}}
|
||||
aria-hidden
|
||||
/>
|
||||
<div className="relative z-10 flex flex-col gap-3 px-5 pb-4 pt-1">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div
|
||||
className="flex h-11 w-11 items-center justify-center rounded-2xl bg-white/90 text-foreground shadow-sm"
|
||||
style={{ borderRadius: `${radius - 2}px` }}
|
||||
>
|
||||
<Sparkles className="h-5 w-5" aria-hidden />
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle className="text-base font-semibold text-foreground">Mission starten</CardTitle>
|
||||
<CardDescription className="text-xs text-muted-foreground">
|
||||
Wir haben bereits eine Aufgabe für dich vorbereitet. Tippe, um direkt loszulegen.
|
||||
</CardDescription>
|
||||
<p
|
||||
className="text-xs font-semibold uppercase tracking-wide"
|
||||
style={{ ...(headingFont ? { fontFamily: headingFont } : {}), color: subTextColor }}
|
||||
>
|
||||
Fotoaufgabe
|
||||
</p>
|
||||
<p className="text-sm" style={{ color: subTextColor }}>
|
||||
Wir haben schon etwas für dich vorbereitet.
|
||||
</p>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{mission ? (
|
||||
<>
|
||||
<p className="text-lg font-semibold text-foreground">{mission.title}</p>
|
||||
<div className="space-y-2">
|
||||
<div
|
||||
className="rounded-[14px] py-3 text-center"
|
||||
style={{
|
||||
background: 'rgba(255,255,255,0.6)',
|
||||
paddingLeft: '30px',
|
||||
paddingRight: '30px',
|
||||
}}
|
||||
>
|
||||
<p
|
||||
className="text-lg font-semibold leading-snug"
|
||||
style={{ ...(headingFont ? { fontFamily: headingFont } : {}), color: textColor }}
|
||||
>
|
||||
{mission.title}
|
||||
</p>
|
||||
{mission.description && (
|
||||
<p className="text-sm text-muted-foreground line-clamp-2">{mission.description}</p>
|
||||
)}
|
||||
<div className="flex gap-3 text-xs text-muted-foreground">
|
||||
<span>{mission.duration ?? 3} Min</span>
|
||||
{mission.emotion?.name && <span>{mission.emotion.name}</span>}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Ziehe deine erste Mission im Aufgaben-Tab oder lade deine Stimmung hoch.
|
||||
<p className="text-sm leading-relaxed" style={{ color: subTextColor }}>
|
||||
{mission.description}
|
||||
</p>
|
||||
)}
|
||||
<div className="flex flex-col gap-2 sm:flex-row">
|
||||
<Button asChild className="flex-1">
|
||||
<Link to={`/e/${encodeURIComponent(token)}/tasks`}>Mission starten</Link>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm text-center" style={{ color: subTextColor }}>
|
||||
Ziehe deine erste Mission im Aufgaben-Tab oder wähle eine Stimmung.
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-[2fr_1fr] gap-2 pt-1">
|
||||
<Button asChild className="w-full" style={{ borderRadius: `${radius}px` }}>
|
||||
<Link
|
||||
to={
|
||||
mission
|
||||
? `/e/${encodeURIComponent(token)}/upload?task=${mission.id}`
|
||||
: `/e/${encodeURIComponent(token)}/tasks`
|
||||
}
|
||||
>
|
||||
Aufgabe starten
|
||||
</Link>
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
className="flex-1"
|
||||
variant="secondary"
|
||||
className="w-full"
|
||||
onClick={onShuffle}
|
||||
disabled={loading}
|
||||
style={{
|
||||
borderRadius: `${radius}px`,
|
||||
backgroundColor: secondary,
|
||||
color: '#ffffff',
|
||||
}}
|
||||
>
|
||||
<RefreshCw className={`mr-2 h-4 w-4 ${loading ? 'animate-spin' : ''}`} aria-hidden />
|
||||
Andere Mission
|
||||
Andere Aufgabe
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</animated.div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
@@ -314,13 +515,13 @@ function MissionActionCard({
|
||||
function EmotionActionCard() {
|
||||
return (
|
||||
<Card className="border border-muted/40 shadow-sm">
|
||||
<CardHeader>
|
||||
<CardTitle>Foto nach Gefühlslage</CardTitle>
|
||||
<CardHeader className="py-[4px]">
|
||||
<CardTitle>Wähle eine Stimmung und erhalte eine passende Aufgabe</CardTitle>
|
||||
<CardDescription className="text-sm text-muted-foreground">
|
||||
Wähle deine Stimmung, wir schlagen dir passende Missionen vor.
|
||||
Tippe deinen Mood, wir picken die nächste Mission für dich.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<CardContent className="py-[4px]">
|
||||
<EmotionPicker variant="embedded" showSkip={false} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
@@ -342,30 +543,35 @@ function UploadActionCard({
|
||||
}) {
|
||||
return (
|
||||
<Card
|
||||
className="overflow-hidden border-0 text-white shadow-sm"
|
||||
className="overflow-hidden border border-muted/30 shadow-sm"
|
||||
style={{
|
||||
background: `linear-gradient(120deg, ${accentColor}, ${secondaryAccent})`,
|
||||
background: 'var(--guest-surface)',
|
||||
borderRadius: `${radius}px`,
|
||||
fontFamily: bodyFont,
|
||||
}}
|
||||
>
|
||||
<CardContent className="flex flex-col gap-3 py-5">
|
||||
<CardContent className="flex flex-col gap-1.5 py-[4px]">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="rounded-2xl bg-white/15 p-3">
|
||||
<UploadCloud className="h-5 w-5" aria-hidden />
|
||||
<div className="rounded-2xl p-3" style={{ background: `${accentColor}15` }}>
|
||||
<UploadCloud className="h-5 w-5" aria-hidden style={{ color: accentColor }} />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-lg font-semibold">Direkt hochladen</p>
|
||||
<p className="text-sm text-white/80">Kamera öffnen oder ein Foto aus deiner Galerie wählen.</p>
|
||||
<p className="text-lg font-semibold text-foreground">Direkt hochladen</p>
|
||||
<p className="text-sm text-muted-foreground">Kamera öffnen oder ein Foto aus deiner Galerie wählen.</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
asChild
|
||||
className="bg-white/90 text-slate-900 hover:bg-white"
|
||||
style={{ borderRadius: `${radius}px` }}
|
||||
className="text-white"
|
||||
style={{
|
||||
borderRadius: `${radius}px`,
|
||||
background: `linear-gradient(120deg, ${accentColor}, ${secondaryAccent})`,
|
||||
boxShadow: `0 12px 28px ${accentColor}25`,
|
||||
}}
|
||||
>
|
||||
<Link to={`/e/${encodeURIComponent(token)}/upload`}>Foto hochladen</Link>
|
||||
</Button>
|
||||
<p className="text-xs text-muted-foreground">Offline möglich – wir laden später hoch.</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user