Merge pull request 'get-started-logic' (#14) from get-started-logic into staging

Reviewed-on: #14
login-session
Subhodip Ghosh 2025-03-27 13:50:35 +00:00
commit 026c6c34b2
30 changed files with 2528 additions and 86 deletions

BIN
dist.zip

Binary file not shown.

759
package-lock.json generated
View File

@ -10,14 +10,20 @@
"dependencies": {
"@astrojs/react": "^4.2.1",
"@astrojs/tailwind": "^6.0.0",
"@radix-ui/react-dialog": "^1.1.6",
"@radix-ui/react-select": "^2.1.6",
"@shadcn/ui": "^0.0.4",
"@types/react": "^19.0.12",
"astro": "^5.5.2",
"autoprefixer": "^10.4.21",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"lucide-react": "^0.484.0",
"pocketbase": "^0.25.2",
"postcss": "^8.5.3",
"tailwind-merge": "^3.0.2",
"tailwindcss": "^3.4.17"
"tailwindcss": "^3.4.17",
"tailwindcss-animate": "^1.0.7"
}
},
"node_modules/@alloc/quick-lru": {
@ -842,6 +848,44 @@
"node": ">=18"
}
},
"node_modules/@floating-ui/core": {
"version": "1.6.9",
"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.9.tgz",
"integrity": "sha512-uMXCuQ3BItDUbAMhIXw7UPXRfAlOAvZzdK9BWpE60MCn+Svt3aLn9jsPTi/WNGlRUu2uI0v5S7JiIUsbsvh3fw==",
"license": "MIT",
"dependencies": {
"@floating-ui/utils": "^0.2.9"
}
},
"node_modules/@floating-ui/dom": {
"version": "1.6.13",
"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.13.tgz",
"integrity": "sha512-umqzocjDgNRGTuO7Q8CU32dkHkECqI8ZdMZ5Swb6QAM0t5rnlrN3lGo1hdpscRd3WS8T6DKYK4ephgIH9iRh3w==",
"license": "MIT",
"dependencies": {
"@floating-ui/core": "^1.6.0",
"@floating-ui/utils": "^0.2.9"
}
},
"node_modules/@floating-ui/react-dom": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.2.tgz",
"integrity": "sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==",
"license": "MIT",
"dependencies": {
"@floating-ui/dom": "^1.0.0"
},
"peerDependencies": {
"react": ">=16.8.0",
"react-dom": ">=16.8.0"
}
},
"node_modules/@floating-ui/utils": {
"version": "0.2.9",
"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.9.tgz",
"integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==",
"license": "MIT"
},
"node_modules/@img/sharp-darwin-arm64": {
"version": "0.33.5",
"resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.5.tgz",
@ -1359,6 +1403,543 @@
"node": ">=14"
}
},
"node_modules/@radix-ui/number": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.0.tgz",
"integrity": "sha512-V3gRzhVNU1ldS5XhAPTom1fOIo4ccrjjJgmE+LI2h/WaFpHmx0MQApT+KZHnx8abG6Avtfcz4WoEciMnpFT3HQ==",
"license": "MIT"
},
"node_modules/@radix-ui/primitive": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.1.tgz",
"integrity": "sha512-SJ31y+Q/zAyShtXJc8x83i9TYdbAfHZ++tUZnvjJJqFjzsdUnKsxPL6IEtBlxKkU7yzer//GQtZSV4GbldL3YA==",
"license": "MIT"
},
"node_modules/@radix-ui/react-arrow": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.2.tgz",
"integrity": "sha512-G+KcpzXHq24iH0uGG/pF8LyzpFJYGD4RfLjCIBfGdSLXvjLHST31RUiRVrupIBMvIppMgSzQ6l66iAxl03tdlg==",
"license": "MIT",
"dependencies": {
"@radix-ui/react-primitive": "2.0.2"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-collection": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.2.tgz",
"integrity": "sha512-9z54IEKRxIa9VityapoEYMuByaG42iSy1ZXlY2KcuLSEtq8x4987/N6m15ppoMffgZX72gER2uHe1D9Y6Unlcw==",
"license": "MIT",
"dependencies": {
"@radix-ui/react-compose-refs": "1.1.1",
"@radix-ui/react-context": "1.1.1",
"@radix-ui/react-primitive": "2.0.2",
"@radix-ui/react-slot": "1.1.2"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-compose-refs": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.1.tgz",
"integrity": "sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw==",
"license": "MIT",
"peerDependencies": {
"@types/react": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-context": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz",
"integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==",
"license": "MIT",
"peerDependencies": {
"@types/react": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-dialog": {
"version": "1.1.6",
"resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.6.tgz",
"integrity": "sha512-/IVhJV5AceX620DUJ4uYVMymzsipdKBzo3edo+omeskCKGm9FRHM0ebIdbPnlQVJqyuHbuBltQUOG2mOTq2IYw==",
"license": "MIT",
"dependencies": {
"@radix-ui/primitive": "1.1.1",
"@radix-ui/react-compose-refs": "1.1.1",
"@radix-ui/react-context": "1.1.1",
"@radix-ui/react-dismissable-layer": "1.1.5",
"@radix-ui/react-focus-guards": "1.1.1",
"@radix-ui/react-focus-scope": "1.1.2",
"@radix-ui/react-id": "1.1.0",
"@radix-ui/react-portal": "1.1.4",
"@radix-ui/react-presence": "1.1.2",
"@radix-ui/react-primitive": "2.0.2",
"@radix-ui/react-slot": "1.1.2",
"@radix-ui/react-use-controllable-state": "1.1.0",
"aria-hidden": "^1.2.4",
"react-remove-scroll": "^2.6.3"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-direction": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.0.tgz",
"integrity": "sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==",
"license": "MIT",
"peerDependencies": {
"@types/react": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-dismissable-layer": {
"version": "1.1.5",
"resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.5.tgz",
"integrity": "sha512-E4TywXY6UsXNRhFrECa5HAvE5/4BFcGyfTyK36gP+pAW1ed7UTK4vKwdr53gAJYwqbfCWC6ATvJa3J3R/9+Qrg==",
"license": "MIT",
"dependencies": {
"@radix-ui/primitive": "1.1.1",
"@radix-ui/react-compose-refs": "1.1.1",
"@radix-ui/react-primitive": "2.0.2",
"@radix-ui/react-use-callback-ref": "1.1.0",
"@radix-ui/react-use-escape-keydown": "1.1.0"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-focus-guards": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.1.tgz",
"integrity": "sha512-pSIwfrT1a6sIoDASCSpFwOasEwKTZWDw/iBdtnqKO7v6FeOzYJ7U53cPzYFVR3geGGXgVHaH+CdngrrAzqUGxg==",
"license": "MIT",
"peerDependencies": {
"@types/react": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-focus-scope": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.2.tgz",
"integrity": "sha512-zxwE80FCU7lcXUGWkdt6XpTTCKPitG1XKOwViTxHVKIJhZl9MvIl2dVHeZENCWD9+EdWv05wlaEkRXUykU27RA==",
"license": "MIT",
"dependencies": {
"@radix-ui/react-compose-refs": "1.1.1",
"@radix-ui/react-primitive": "2.0.2",
"@radix-ui/react-use-callback-ref": "1.1.0"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-id": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.0.tgz",
"integrity": "sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==",
"license": "MIT",
"dependencies": {
"@radix-ui/react-use-layout-effect": "1.1.0"
},
"peerDependencies": {
"@types/react": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-popper": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.2.tgz",
"integrity": "sha512-Rvqc3nOpwseCyj/rgjlJDYAgyfw7OC1tTkKn2ivhaMGcYt8FSBlahHOZak2i3QwkRXUXgGgzeEe2RuqeEHuHgA==",
"license": "MIT",
"dependencies": {
"@floating-ui/react-dom": "^2.0.0",
"@radix-ui/react-arrow": "1.1.2",
"@radix-ui/react-compose-refs": "1.1.1",
"@radix-ui/react-context": "1.1.1",
"@radix-ui/react-primitive": "2.0.2",
"@radix-ui/react-use-callback-ref": "1.1.0",
"@radix-ui/react-use-layout-effect": "1.1.0",
"@radix-ui/react-use-rect": "1.1.0",
"@radix-ui/react-use-size": "1.1.0",
"@radix-ui/rect": "1.1.0"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-portal": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.4.tgz",
"integrity": "sha512-sn2O9k1rPFYVyKd5LAJfo96JlSGVFpa1fS6UuBJfrZadudiw5tAmru+n1x7aMRQ84qDM71Zh1+SzK5QwU0tJfA==",
"license": "MIT",
"dependencies": {
"@radix-ui/react-primitive": "2.0.2",
"@radix-ui/react-use-layout-effect": "1.1.0"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-presence": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.2.tgz",
"integrity": "sha512-18TFr80t5EVgL9x1SwF/YGtfG+l0BS0PRAlCWBDoBEiDQjeKgnNZRVJp/oVBl24sr3Gbfwc/Qpj4OcWTQMsAEg==",
"license": "MIT",
"dependencies": {
"@radix-ui/react-compose-refs": "1.1.1",
"@radix-ui/react-use-layout-effect": "1.1.0"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-primitive": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.2.tgz",
"integrity": "sha512-Ec/0d38EIuvDF+GZjcMU/Ze6MxntVJYO/fRlCPhCaVUyPY9WTalHJw54tp9sXeJo3tlShWpy41vQRgLRGOuz+w==",
"license": "MIT",
"dependencies": {
"@radix-ui/react-slot": "1.1.2"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-select": {
"version": "2.1.6",
"resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.1.6.tgz",
"integrity": "sha512-T6ajELxRvTuAMWH0YmRJ1qez+x4/7Nq7QIx7zJ0VK3qaEWdnWpNbEDnmWldG1zBDwqrLy5aLMUWcoGirVj5kMg==",
"license": "MIT",
"dependencies": {
"@radix-ui/number": "1.1.0",
"@radix-ui/primitive": "1.1.1",
"@radix-ui/react-collection": "1.1.2",
"@radix-ui/react-compose-refs": "1.1.1",
"@radix-ui/react-context": "1.1.1",
"@radix-ui/react-direction": "1.1.0",
"@radix-ui/react-dismissable-layer": "1.1.5",
"@radix-ui/react-focus-guards": "1.1.1",
"@radix-ui/react-focus-scope": "1.1.2",
"@radix-ui/react-id": "1.1.0",
"@radix-ui/react-popper": "1.2.2",
"@radix-ui/react-portal": "1.1.4",
"@radix-ui/react-primitive": "2.0.2",
"@radix-ui/react-slot": "1.1.2",
"@radix-ui/react-use-callback-ref": "1.1.0",
"@radix-ui/react-use-controllable-state": "1.1.0",
"@radix-ui/react-use-layout-effect": "1.1.0",
"@radix-ui/react-use-previous": "1.1.0",
"@radix-ui/react-visually-hidden": "1.1.2",
"aria-hidden": "^1.2.4",
"react-remove-scroll": "^2.6.3"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-slot": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.2.tgz",
"integrity": "sha512-YAKxaiGsSQJ38VzKH86/BPRC4rh+b1Jpa+JneA5LRE7skmLPNAyeG8kPJj/oo4STLvlrs8vkf/iYyc3A5stYCQ==",
"license": "MIT",
"dependencies": {
"@radix-ui/react-compose-refs": "1.1.1"
},
"peerDependencies": {
"@types/react": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-use-callback-ref": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz",
"integrity": "sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==",
"license": "MIT",
"peerDependencies": {
"@types/react": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-use-controllable-state": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz",
"integrity": "sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==",
"license": "MIT",
"dependencies": {
"@radix-ui/react-use-callback-ref": "1.1.0"
},
"peerDependencies": {
"@types/react": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-use-escape-keydown": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.0.tgz",
"integrity": "sha512-L7vwWlR1kTTQ3oh7g1O0CBF3YCyyTj8NmhLR+phShpyA50HCfBFKVJTpshm9PzLiKmehsrQzTYTpX9HvmC9rhw==",
"license": "MIT",
"dependencies": {
"@radix-ui/react-use-callback-ref": "1.1.0"
},
"peerDependencies": {
"@types/react": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-use-layout-effect": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz",
"integrity": "sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==",
"license": "MIT",
"peerDependencies": {
"@types/react": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-use-previous": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.0.tgz",
"integrity": "sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og==",
"license": "MIT",
"peerDependencies": {
"@types/react": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-use-rect": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.0.tgz",
"integrity": "sha512-0Fmkebhr6PiseyZlYAOtLS+nb7jLmpqTrJyv61Pe68MKYW6OWdRE2kI70TaYY27u7H0lajqM3hSMMLFq18Z7nQ==",
"license": "MIT",
"dependencies": {
"@radix-ui/rect": "1.1.0"
},
"peerDependencies": {
"@types/react": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-use-size": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.0.tgz",
"integrity": "sha512-XW3/vWuIXHa+2Uwcc2ABSfcCledmXhhQPlGbfcRXbiUQI5Icjcg19BGCZVKKInYbvUCut/ufbbLLPFC5cbb1hw==",
"license": "MIT",
"dependencies": {
"@radix-ui/react-use-layout-effect": "1.1.0"
},
"peerDependencies": {
"@types/react": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-visually-hidden": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.1.2.tgz",
"integrity": "sha512-1SzA4ns2M1aRlvxErqhLHsBHoS5eI5UUcI2awAMgGUp4LoaoWOKYmvqDY2s/tltuPkh3Yk77YF/r3IRj+Amx4Q==",
"license": "MIT",
"dependencies": {
"@radix-ui/react-primitive": "2.0.2"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@radix-ui/rect": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.0.tgz",
"integrity": "sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg==",
"license": "MIT"
},
"node_modules/@rollup/pluginutils": {
"version": "5.1.4",
"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.4.tgz",
@ -1830,11 +2411,10 @@
}
},
"node_modules/@types/react": {
"version": "19.0.11",
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.0.11.tgz",
"integrity": "sha512-vrdxRZfo9ALXth6yPfV16PYTLZwsUWhVjjC+DkfE5t1suNSbBrWC9YqSuuxJZ8Ps6z1o2ycRpIqzZJIgklq4Tw==",
"version": "19.0.12",
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.0.12.tgz",
"integrity": "sha512-V6Ar115dBDrjbtXSrS+/Oruobc+qVbbUxDFC1RSbRqLt5SYvxxyIDrSC85RWml54g+jfNeEMZhEj7wW07ONQhA==",
"license": "MIT",
"peer": true,
"dependencies": {
"csstype": "^3.0.2"
}
@ -2009,6 +2589,18 @@
"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
"license": "Python-2.0"
},
"node_modules/aria-hidden": {
"version": "1.2.4",
"resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.4.tgz",
"integrity": "sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==",
"license": "MIT",
"dependencies": {
"tslib": "^2.0.0"
},
"engines": {
"node": ">=10"
}
},
"node_modules/aria-query": {
"version": "5.3.2",
"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
@ -2639,8 +3231,7 @@
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
"license": "MIT",
"peer": true
"license": "MIT"
},
"node_modules/data-uri-to-buffer": {
"version": "4.0.1",
@ -2724,6 +3315,12 @@
"node": ">=8"
}
},
"node_modules/detect-node-es": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
"integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==",
"license": "MIT"
},
"node_modules/deterministic-object-hash": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/deterministic-object-hash/-/deterministic-object-hash-2.0.2.tgz",
@ -3138,6 +3735,15 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/get-nonce": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
"integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
"license": "MIT",
"engines": {
"node": ">=6"
}
},
"node_modules/get-stream": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
@ -3807,6 +4413,15 @@
"integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
"license": "ISC"
},
"node_modules/lucide-react": {
"version": "0.484.0",
"resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.484.0.tgz",
"integrity": "sha512-oZy8coK9kZzvqhSgfbGkPtTgyjpBvs3ukLgDPv14dSOZtBtboryWF5o8i3qen7QbGg7JhiJBz5mK1p8YoMZTLQ==",
"license": "ISC",
"peerDependencies": {
"react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
}
},
"node_modules/magic-string": {
"version": "0.30.17",
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
@ -5097,6 +5712,12 @@
"node": ">= 6"
}
},
"node_modules/pocketbase": {
"version": "0.25.2",
"resolved": "https://registry.npmjs.org/pocketbase/-/pocketbase-0.25.2.tgz",
"integrity": "sha512-ONZl1+qHJMnhR2uacBlBJ90lm7njtL/zy0606+1ROfK9hSL4LRBRc8r89rMcNRzPzRqCNyoFTh2Qg/lYXdEC1w==",
"license": "MIT"
},
"node_modules/postcss": {
"version": "8.5.3",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",
@ -5339,6 +5960,75 @@
"node": ">=0.10.0"
}
},
"node_modules/react-remove-scroll": {
"version": "2.6.3",
"resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.6.3.tgz",
"integrity": "sha512-pnAi91oOk8g8ABQKGF5/M9qxmmOPxaAnopyTHYfqYEwJhyFrbbBtHuSgtKEoH0jpcxx5o3hXqH1mNd9/Oi+8iQ==",
"license": "MIT",
"dependencies": {
"react-remove-scroll-bar": "^2.3.7",
"react-style-singleton": "^2.2.3",
"tslib": "^2.1.0",
"use-callback-ref": "^1.3.3",
"use-sidecar": "^1.1.3"
},
"engines": {
"node": ">=10"
},
"peerDependencies": {
"@types/react": "*",
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/react-remove-scroll-bar": {
"version": "2.3.8",
"resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.8.tgz",
"integrity": "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==",
"license": "MIT",
"dependencies": {
"react-style-singleton": "^2.2.2",
"tslib": "^2.0.0"
},
"engines": {
"node": ">=10"
},
"peerDependencies": {
"@types/react": "*",
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/react-style-singleton": {
"version": "2.2.3",
"resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
"integrity": "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==",
"license": "MIT",
"dependencies": {
"get-nonce": "^1.0.0",
"tslib": "^2.0.0"
},
"engines": {
"node": ">=10"
},
"peerDependencies": {
"@types/react": "*",
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/read-cache": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@ -6139,6 +6829,15 @@
"node": ">=14.0.0"
}
},
"node_modules/tailwindcss-animate": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz",
"integrity": "sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==",
"license": "MIT",
"peerDependencies": {
"tailwindcss": ">=3.0.0 || insiders"
}
},
"node_modules/tailwindcss/node_modules/chokidar": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
@ -6304,8 +7003,7 @@
"version": "2.8.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
"license": "0BSD",
"optional": true
"license": "0BSD"
},
"node_modules/type-fest": {
"version": "4.37.0",
@ -6624,6 +7322,49 @@
"browserslist": ">= 4.21.0"
}
},
"node_modules/use-callback-ref": {
"version": "1.3.3",
"resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.3.tgz",
"integrity": "sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==",
"license": "MIT",
"dependencies": {
"tslib": "^2.0.0"
},
"engines": {
"node": ">=10"
},
"peerDependencies": {
"@types/react": "*",
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/use-sidecar": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.3.tgz",
"integrity": "sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==",
"license": "MIT",
"dependencies": {
"detect-node-es": "^1.1.0",
"tslib": "^2.0.0"
},
"engines": {
"node": ">=10"
},
"peerDependencies": {
"@types/react": "*",
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/util-deprecate": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",

View File

@ -12,14 +12,20 @@
"dependencies": {
"@astrojs/react": "^4.2.1",
"@astrojs/tailwind": "^6.0.0",
"@radix-ui/react-dialog": "^1.1.6",
"@radix-ui/react-select": "^2.1.6",
"@shadcn/ui": "^0.0.4",
"@types/react": "^19.0.12",
"astro": "^5.5.2",
"autoprefixer": "^10.4.21",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"lucide-react": "^0.484.0",
"pocketbase": "^0.25.2",
"postcss": "^8.5.3",
"tailwind-merge": "^3.0.2",
"tailwindcss": "^3.4.17"
"tailwindcss": "^3.4.17",
"tailwindcss-animate": "^1.0.7"
},
"packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
}

View File

@ -0,0 +1 @@
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M4.4955 7.44088C3.54724 8.11787 2.77843 8.84176 2.1893 9.47978C0.857392 10.9222 0.857393 13.0778 2.1893 14.5202C3.9167 16.391 7.18879 19 12 19C13.2958 19 14.4799 18.8108 15.5523 18.4977L13.8895 16.8349C13.2936 16.9409 12.6638 17 12 17C7.9669 17 5.18832 14.82 3.65868 13.1634C3.03426 12.4872 3.03426 11.5128 3.65868 10.8366C4.23754 10.2097 4.99526 9.50784 5.93214 8.87753L4.4955 7.44088Z" fill="#6d9e37"></path> <path d="M8.53299 11.4784C8.50756 11.6486 8.49439 11.8227 8.49439 12C8.49439 13.933 10.0614 15.5 11.9944 15.5C12.1716 15.5 12.3458 15.4868 12.516 15.4614L8.53299 11.4784Z" fill="#6d9e37"></path> <path d="M15.4661 12.4471L11.5473 8.52829C11.6937 8.50962 11.8429 8.5 11.9944 8.5C13.9274 8.5 15.4944 10.067 15.4944 12C15.4944 12.1515 15.4848 12.3007 15.4661 12.4471Z" fill="#6d9e37"></path> <path d="M18.1118 15.0928C19.0284 14.4702 19.7715 13.7805 20.3413 13.1634C20.9657 12.4872 20.9657 11.5128 20.3413 10.8366C18.8117 9.18002 16.0331 7 12 7C11.3594 7 10.7505 7.05499 10.1732 7.15415L8.50483 5.48582C9.5621 5.1826 10.7272 5 12 5C16.8112 5 20.0833 7.60905 21.8107 9.47978C23.1426 10.9222 23.1426 13.0778 21.8107 14.5202C21.2305 15.1486 20.476 15.8603 19.5474 16.5284L18.1118 15.0928Z" fill="#6d9e37"></path> <path d="M2.00789 3.42207C1.61736 3.03155 1.61736 2.39838 2.00789 2.00786C2.39841 1.61733 3.03158 1.61733 3.4221 2.00786L22.0004 20.5862C22.391 20.9767 22.391 21.6099 22.0004 22.0004C21.6099 22.3909 20.9767 22.3909 20.5862 22.0004L2.00789 3.42207Z" fill="#6d9e37"></path> </g></svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

1
public/assets/eye.svg Normal file
View File

@ -0,0 +1 @@
<svg width="30px" height="30px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path fill-rule="evenodd" clip-rule="evenodd" d="M11.9944 15.5C13.9274 15.5 15.4944 13.933 15.4944 12C15.4944 10.067 13.9274 8.5 11.9944 8.5C10.0614 8.5 8.49439 10.067 8.49439 12C8.49439 13.933 10.0614 15.5 11.9944 15.5ZM11.9944 13.4944C11.1691 13.4944 10.5 12.8253 10.5 12C10.5 11.1747 11.1691 10.5056 11.9944 10.5056C12.8197 10.5056 13.4888 11.1747 13.4888 12C13.4888 12.8253 12.8197 13.4944 11.9944 13.4944Z" fill="#6d9e37"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M12 5C7.18879 5 3.9167 7.60905 2.1893 9.47978C0.857392 10.9222 0.857393 13.0778 2.1893 14.5202C3.9167 16.391 7.18879 19 12 19C16.8112 19 20.0833 16.391 21.8107 14.5202C23.1426 13.0778 23.1426 10.9222 21.8107 9.47978C20.0833 7.60905 16.8112 5 12 5ZM3.65868 10.8366C5.18832 9.18002 7.9669 7 12 7C16.0331 7 18.8117 9.18002 20.3413 10.8366C20.9657 11.5128 20.9657 12.4872 20.3413 13.1634C18.8117 14.82 16.0331 17 12 17C7.9669 17 5.18832 14.82 3.65868 13.1634C3.03426 12.4872 3.03426 11.5128 3.65868 10.8366Z" fill="#6d9e37"></path> </g></svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -0,0 +1 @@
<svg width="40px" height="40px" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <circle cx="16" cy="16" r="14" fill="url(#paint0_linear_87_7208)"></circle> <path d="M21.2137 20.2816L21.8356 16.3301H17.9452V13.767C17.9452 12.6857 18.4877 11.6311 20.2302 11.6311H22V8.26699C22 8.26699 20.3945 8 18.8603 8C15.6548 8 13.5617 9.89294 13.5617 13.3184V16.3301H10V20.2816H13.5617V29.8345C14.2767 29.944 15.0082 30 15.7534 30C16.4986 30 17.2302 29.944 17.9452 29.8345V20.2816H21.2137Z" fill="white"></path> <defs> <linearGradient id="paint0_linear_87_7208" x1="16" y1="2" x2="16" y2="29.917" gradientUnits="userSpaceOnUse"> <stop stop-color="#18ACFE"></stop> <stop offset="1" stop-color="#0163E0"></stop> </linearGradient> </defs> </g></svg>

After

Width:  |  Height:  |  Size: 909 B

1
public/assets/github.svg Normal file
View File

@ -0,0 +1 @@
<svg width="40px" height="40px" viewBox="-1.6 -1.6 19.20 19.20" xmlns="http://www.w3.org/2000/svg" fill="#000000" class="bi bi-github"><g id="SVGRepo_bgCarrier" stroke-width="0" transform="translate(1.3600000000000003,1.3600000000000003), scale(0.83)"><rect x="-1.6" y="-1.6" width="19.20" height="19.20" rx="9.6" fill="#ffffff" strokewidth="0"></rect></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path> </g></svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

1
public/assets/google.svg Normal file
View File

@ -0,0 +1 @@
<svg width="40px" height="40px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="none"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path fill="#4285F4" d="M14.9 8.161c0-.476-.039-.954-.121-1.422h-6.64v2.695h3.802a3.24 3.24 0 01-1.407 2.127v1.75h2.269c1.332-1.22 2.097-3.02 2.097-5.15z"></path><path fill="#34A853" d="M8.14 15c1.898 0 3.499-.62 4.665-1.69l-2.268-1.749c-.631.427-1.446.669-2.395.669-1.836 0-3.393-1.232-3.952-2.888H1.85v1.803A7.044 7.044 0 008.14 15z"></path><path fill="#FBBC04" d="M4.187 9.342a4.17 4.17 0 010-2.68V4.859H1.849a6.97 6.97 0 000 6.286l2.338-1.803z"></path><path fill="#EA4335" d="M8.14 3.77a3.837 3.837 0 012.7 1.05l2.01-1.999a6.786 6.786 0 00-4.71-1.82 7.042 7.042 0 00-6.29 3.858L4.186 6.66c.556-1.658 2.116-2.89 3.952-2.89z"></path></g></svg>

After

Width:  |  Height:  |  Size: 901 B

View File

@ -18,7 +18,7 @@ export const DomainSetupForm = ({ defaultSubdomain }) => {
const [customDomain, setCustomDomain] = useState('');
const [customSubdomain, setCustomSubdomain] = useState('');
const [domainType, setDomainType] = useState('domain'); // 'domain' or 'subdomain'
// Domain validation states
const [isValidating, setIsValidating] = useState(false);
const [isValidDomain, setIsValidDomain] = useState(false);
@ -43,15 +43,6 @@ export const DomainSetupForm = ({ defaultSubdomain }) => {
// File upload reference
const fileInputRef = React.useRef(null);
// Function to clean domain input
const cleanDomainInput = (input) => {
// Remove http://, https://, www., and trailing slashes
return input
.replace(/^(https?:\/\/)?(www\.)?/i, '')
.replace(/\/+$/, '')
.trim();
};
// Effect for handling domain type changes
useEffect(() => {
if (!useCustomDomain) {
@ -140,12 +131,12 @@ export const DomainSetupForm = ({ defaultSubdomain }) => {
// Handle domain and subdomain input changes
const handleDomainChange = (e) => {
const cleanedValue = cleanDomainInput(e.target.value);
const cleanedValue = e.target.value.replace(/^(https?:\/\/)?(www\.)?/i, '').replace(/\/+$/, '').trim();
setCustomDomain(cleanedValue);
};
const handleSubdomainChange = (e) => {
const cleanedValue = cleanDomainInput(e.target.value);
const cleanedValue = e.target.value.replace(/^(https?:\/\/)?/i, '').replace(/\/+$/, '').trim();
setCustomSubdomain(cleanedValue);
};
@ -210,6 +201,38 @@ export const DomainSetupForm = ({ defaultSubdomain }) => {
};
// Check DNS configuration
const checkSubDomainCname = () => {
const domainToCheck = customDomain || customSubdomain;
fetch('http://localhost:2058/host-api/v1/check-c-name/', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: `domain=${encodeURIComponent(domainToCheck)}`
})
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.json();
})
.then(data => {
if (data.status === 'success') {
checkDnsConfig('cname');
showToast(`Checking ${type}... (This would verify DNS in a real app)`);
console.log('CNAME record:', data.cname);
// Handle success - update UI
} else {
console.error('Error:', data.message);
// Handle error
}
})
.catch(error => {
console.error('Fetch error:', error);
// Show error to user
});
};
const checkDnsConfig = (type) => {
showToast(`Checking ${type}... (This would verify DNS in a real app)`);
@ -544,10 +567,10 @@ export const DomainSetupForm = ({ defaultSubdomain }) => {
{/* Domain Validation */}
<button
disabled={!customDomain}
disabled={!customDomain && !customSubdomain}
type="button"
onClick={validateDomain}
className={`px-4 py-2 ${!customDomain ? 'bg-neutral-600 cursor-not-allowed' : 'bg-[#6d9e37] focus:ring-[#6d9e37] transition-colors'} text-white font-medium rounded-md transition-colors focus:outline-none`}
className={`px-4 py-2 ${ !customDomain && !customSubdomain ? 'bg-neutral-600 cursor-not-allowed' : 'bg-[#6d9e37] focus:ring-[#6d9e37] transition-colors'} text-white font-medium rounded-md transition-colors focus:outline-none`}
>
Validate Domain
</button>
@ -607,7 +630,7 @@ export const DomainSetupForm = ({ defaultSubdomain }) => {
<div className="mt-2 text-right">
<button
type="button"
onClick={() => checkDnsConfig('cname')}
onClick={() => (checkSubDomainCname())}
className={`px-3 py-1 text-white text-sm rounded
${dnsVerified.cname
? 'bg-green-700 hover:bg-green-600'

View File

@ -0,0 +1,333 @@
"use client";
import { useState } from "react";
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./ui/card";
import { Button } from "./ui/button";
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "./ui/dialog";
import { Input } from "./ui/input";
// Define the AI Agent type
interface AIAgent {
id: number;
title: string;
description: string;
capabilities: string[];
responseTime: string;
pricing: string;
useCases: string[];
}
// AI Agent types data
const aiAgentTypes: AIAgent[] = [
{
id: 1,
title: "Code Assistant",
description: "AI-powered coding assistant that helps write, debug, and optimize code across multiple languages",
capabilities: ["Code Generation", "Code Review", "Bug Detection", "Code Explanation", "Documentation"],
responseTime: "Instant",
pricing: "$29/month",
useCases: ["Software Development", "Web Development", "Mobile Apps", "Enterprise Applications"]
},
{
id: 2,
title: "Data Analyst",
description: "Specialized AI for data analytics, visualization, and insights extraction",
capabilities: ["Data Cleaning", "Statistical Analysis", "Data Visualization", "Predictive Modeling"],
responseTime: "Within minutes",
pricing: "$49/month",
useCases: ["Business Intelligence", "Market Research", "Financial Analysis", "Customer Insights"]
},
{
id: 3,
title: "Content Creator",
description: "AI agent for generating and optimizing various types of content",
capabilities: ["Blog Writing", "Social Media Content", "Email Marketing", "SEO Optimization"],
responseTime: "Instant to minutes",
pricing: "$39/month",
useCases: ["Marketing Teams", "Content Publishers", "Social Media Managers", "Small Businesses"]
},
{
id: 4,
title: "UI/UX Design Assistant",
description: "AI that helps create design mockups, wireframes, and UI elements",
capabilities: ["Wireframing", "UI Design", "Visual Elements", "Design Feedback"],
responseTime: "Within minutes",
pricing: "$59/month",
useCases: ["Product Teams", "Web Designers", "App Developers", "Creative Agencies"]
},
{
id: 5,
title: "Research Assistant",
description: "AI agent that helps with research, information gathering, and summarization",
capabilities: ["Literature Review", "Data Collection", "Summarization", "Citation Management"],
responseTime: "Within minutes",
pricing: "$45/month",
useCases: ["Academic Research", "Market Research", "Competitive Analysis", "Legal Research"]
}
];
export default function HireAIAgent() {
const [selectedAgent, setSelectedAgent] = useState<AIAgent | null>(null);
const [dialogOpen, setDialogOpen] = useState(false);
const [searchTerm, setSearchTerm] = useState("");
// Filter AI agents based on search term
const filteredAgents = aiAgentTypes.filter(agent =>
agent.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
agent.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
agent.capabilities.some(cap => cap.toLowerCase().includes(searchTerm.toLowerCase())) ||
agent.useCases.some(useCase => useCase.toLowerCase().includes(searchTerm.toLowerCase()))
);
return (
<div className="container mx-auto px-4 py-12">
<h1 className="text-center text-3xl sm:text-4xl font-bold text-[#6d9e37] mb-3 sm:mb-4">Hire an AI Agent</h1>
<p className="text-center text-lg sm:text-xl max-w-3xl mx-auto text-neutral-300 mb-10">
Leverage our AI agents to automate tasks, generate content, analyze data, and more
</p>
{/* Hero Banner */}
<div className="bg-neutral-800 text-white rounded-lg p-8 mb-12">
<div className="flex flex-col md:flex-row md:items-center">
<div className="md:w-2/3 mb-6 md:mb-0 md:pr-6">
<h2 className="text-2xl md:text-3xl font-bold mb-4 text-[#6d9e37]">Why Choose AI Agents?</h2>
<p className="mb-4">
Our AI agents work 24/7, provide instant results, and cost a fraction of human labor. They excel at repetitive tasks, data processing, and creative content generation.
</p>
<div className="grid grid-cols-2 gap-4 mt-6">
<div className="flex items-start">
<div className="bg-white bg-opacity-20 p-2 rounded mr-3">
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="#6d9e37">
<path fillRule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clipRule="evenodd" />
</svg>
</div>
<div>
<h3 className="font-semibold text-sm">Instant Results</h3>
<p className="text-xs text-zinc-300">No waiting for human availability</p>
</div>
</div>
<div className="flex items-start">
<div className="bg-white bg-opacity-20 p-2 rounded mr-3">
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="#6d9e37">
<path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
</svg>
</div>
<div>
<h3 className="font-semibold text-sm">Cost Effective</h3>
<p className="text-xs text-zinc-300">Fraction of human labor costs</p>
</div>
</div>
</div>
</div>
<div className="md:w-1/3">
<div className="bg-white bg-opacity-10 p-6 rounded-lg text-center">
<h3 className="font-bold mb-2">Start with an AI Agent Today</h3>
<p className="text-sm mb-4 text-zinc-300">
All plans come with a 7-day free trial
</p>
<Button className="w-full">View All Agents</Button>
</div>
</div>
</div>
</div>
{/* Search */}
<div className="mb-8">
<div className="max-w-md mx-auto">
<Input
type="text"
placeholder="Search AI agents by capability or use case..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="mb-4"
/>
</div>
</div>
{/* AI Agent Grid */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{filteredAgents.map((agent) => (
<Card key={agent.id} className="hover:shadow-md transition">
<CardHeader>
<CardTitle>{agent.title}</CardTitle>
<CardDescription>{agent.description}</CardDescription>
</CardHeader>
<CardContent>
<div className="mb-4">
<h4 className="text-sm font-semibold mb-2">Key Capabilities:</h4>
<div className="flex flex-wrap gap-2">
{agent.capabilities.map((capability, index) => (
<span
key={index}
className="inline-block bg-zinc-100 text-zinc-800 text-xs px-2 py-1 rounded"
>
{capability}
</span>
))}
</div>
</div>
<div className="space-y-2 text-sm">
<div className="flex justify-between">
<span className="text-zinc-500">Response Time:</span>
<span className="font-medium text-green-600">{agent.responseTime}</span>
</div>
<div className="flex justify-between">
<span className="text-zinc-500">Pricing:</span>
<span className="font-medium">{agent.pricing}</span>
</div>
</div>
</CardContent>
<CardFooter>
<Button className="w-full" onClick={() => {setSelectedAgent(agent); setDialogOpen(true);}}>View Details</Button>
</CardFooter>
</Card>
))}
</div>
{/* AI Agent Details Dialog */}
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
<DialogContent className="sm:max-w-md">
{selectedAgent && (
<>
<DialogHeader>
<DialogTitle>{selectedAgent.title}</DialogTitle>
<DialogDescription>
{selectedAgent.description}
</DialogDescription>
</DialogHeader>
<div className="space-y-4 py-4">
<div>
<h4 className="text-sm font-semibold mb-1">Capabilities:</h4>
<div className="flex flex-wrap gap-2">
{selectedAgent.capabilities.map((capability, index) => (
<span
key={index}
className="inline-block bg-zinc-100 text-zinc-800 text-xs px-2 py-1 rounded"
>
{capability}
</span>
))}
</div>
</div>
<div>
<h4 className="text-sm font-semibold mb-1">Common Use Cases:</h4>
<ul className="list-disc pl-5 text-zinc-600 text-sm">
{selectedAgent.useCases.map((useCase, index) => (
<li key={index}>{useCase}</li>
))}
</ul>
</div>
<div className="grid grid-cols-2 gap-4">
<div>
<h4 className="text-sm font-semibold mb-1">Response Time:</h4>
<p className="font-medium text-green-600">{selectedAgent.responseTime}</p>
</div>
<div>
<h4 className="text-sm font-semibold mb-1">Pricing:</h4>
<p className="font-medium">{selectedAgent.pricing}</p>
</div>
</div>
<div className="border-t border-gray-200 pt-4">
<h4 className="text-sm font-semibold mb-1">Subscription Includes:</h4>
<ul className="text-sm text-zinc-600 space-y-1">
<li className="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-green-500 mr-2" viewBox="0 0 20 20" fill="#6d9e37">
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
</svg>
Unlimited requests
</li>
<li className="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-green-500 mr-2" viewBox="0 0 20 20" fill="#6d9e37">
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
</svg>
24/7 availability
</li>
<li className="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-green-500 mr-2" viewBox="0 0 20 20" fill="#6d9e37">
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
</svg>
API access
</li>
<li className="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-green-500 mr-2" viewBox="0 0 20 20" fill="#6d9e37">
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
</svg>
Export capabilities
</li>
</ul>
</div>
</div>
<DialogFooter>
<Button type="button" variant="outline" onClick={() => setDialogOpen(false)}>
Cancel
</Button>
<Button type="button">
Subscribe Now
</Button>
</DialogFooter>
</>
)}
</DialogContent>
</Dialog>
{/* Comparison Section */}
<div className="mt-16">
<h2 className="text-2xl font-bold mb-8 text-center">AI Agents vs. Human Developers</h2>
<div className="overflow-x-auto">
<table className="w-full border-collapse">
<thead>
<tr className="bg-neutral-800 text-white">
<th className="p-4 text-center border-[1px] border-[#6d9e37] w-1/3">Feature</th>
<th className="p-4 text-center border-[1px] border-[#6d9e37] w-1/3">AI Agents</th>
<th className="p-4 text-center border-[1px] border-[#6d9e37] w-1/3">Human Developers</th>
</tr>
</thead>
<tbody>
<tr>
<td className="p-4 border-[1px] border-[#6d9e37] font-medium">Availability</td>
<td className="p-4 border-[1px] border-[#6d9e37]">24/7, instant access</td>
<td className="p-4 border-[1px] border-[#6d9e37]">Limited by working hours and availability</td>
</tr>
<tr className="bg-neutral-800 text-white">
<td className="p-4 border-[1px] border-[#6d9e37] font-medium">Cost</td>
<td className="p-4 border-[1px] border-[#6d9e37]">Low monthly subscription</td>
<td className="p-4 border-[1px] border-[#6d9e37]">Higher hourly or project-based rates</td>
</tr>
<tr>
<td className="p-4 border-[1px] border-[#6d9e37] font-medium">Task Complexity</td>
<td className="p-4 border-[1px] border-[#6d9e37]">Best for repetitive, well-defined tasks</td>
<td className="p-4 border-[1px] border-[#6d9e37]">Better for complex, novel problems</td>
</tr>
<tr className="bg-neutral-800 text-white">
<td className="p-4 border-[1px] border-[#6d9e37] font-medium">Creativity</td>
<td className="p-4 border-[1px] border-[#6d9e37]">Limited to patterns in training data</td>
<td className="p-4 border-[1px] border-[#6d9e37]">Higher level of creativity and innovation</td>
</tr>
<tr>
<td className="p-4 border-[1px] border-[#6d9e37] font-medium">Scalability</td>
<td className="p-4 border-[1px] border-[#6d9e37]">Highly scalable at no extra cost</td>
<td className="p-4 border-[1px] border-[#6d9e37]">Requires additional hiring and onboarding</td>
</tr>
</tbody>
</table>
</div>
</div>
{/* CTA Section */}
<div className="mt-16 bg-neutral-800 p-8 rounded-lg text-center">
<h2 className="text-2xl font-bold mb-4 text-[#6d9e37]">Not sure which AI agent is right for you?</h2>
<p className="text-neutral-300 max-w-2xl mx-auto mb-8">
Our AI solution experts can help you determine which AI agent best fits your specific needs and use cases.
</p>
<Button size="lg">
Schedule a Consultation
</Button>
</div>
</div>
);
}

View File

@ -0,0 +1,263 @@
"use client";
import { useState } from "react";
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./ui/card";
import { Button } from "./ui/button";
import { Input } from "./ui/input";
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "./ui/dialog";
// Define the Developer type
interface Developer {
id: number;
title: string;
description: string;
skills: string[];
availability: "High" | "Medium" | "Low";
minBudget: string;
contractFee: string;
}
// Developer types data
const developerTypes: Developer[] = [
{
id: 1,
title: "Web Developer",
description: "Frontend, backend or full-stack developers specialized in web technologies",
skills: ["React", "Angular", "Vue", "Node.js", "Django", "Ruby on Rails", "Laravel", "Express", "Flask", "PHP", "JavaScript", "TypeScript", "HTML", "CSS", "SASS", "LESS", "Bootstrap", "Tailwind CSS", "Material-UI", "Ant Design", "REST APIs", "GraphQL", "WebSockets", "OAuth", "JWT", "WebRTC", "PWA", "SEO", "Accessibility", "Performance", "Security"],
availability: "High",
minBudget: "Budget-friendly",
contractFee: "Nominal"
},
{
id: 2,
title: "App Developer",
description: "iOS and Android native or cross-platform mobile app developers",
skills: ["Swift", "Kotlin", "React Native", "Flutter", "Xamarin", "Ionic", "PhoneGap", "Cordova", "NativeScript", "Appcelerator", "Java", "Objective-C", "Firebase", "Realm", "Core Data", "SQLite", "Push Notifications", "In-App Purchases", "ARKit", "Core ML", "Android Jetpack", "Material Design", "Google Play Services", "App Store Connect", "Google Play Console"],
availability: "Medium",
minBudget: "Limited",
contractFee: "Modest"
},
{
id: 3,
title: "C/C++ Developer",
description: "Systems programmers and embedded systems specialists",
skills: ["C", "C++", "Embedded Systems", "Linux Kernel", "Real-time Systems", "RTOS", "Device Drivers", "Firmware", "Microcontrollers", "ARM", "AVR", "PIC", "Raspberry Pi", "Arduino", "BeagleBone", "Zephyr", "FreeRTOS", "VxWorks", "QNX", "Bare Metal"],
availability: "Low",
minBudget: "Increased",
contractFee: "Considerable"
},
{
id: 4,
title: "Go Developer",
description: "Backend and systems engineers specializing in Go language",
skills: ["Go", "Microservices", "Docker", "Kubernetes", "API Development", "gRPC", "Protobuf", "WebSockets", "WebAssembly", "Concurrency", "Performance Tuning", "Module Building", "Error Handling", "Testing", "Security"],
availability: "Medium",
minBudget: "Boosted",
contractFee: "Elevated"
},
{
id: 5,
title: "Machine Learning Engineer",
description: "AI and ML specialists for implementing intelligent solutions",
skills: ["Python", "TensorFlow", "PyTorch", "Data Science", "MLOps", "NLP", "Computer Vision", "Reinforcement Learning", "Time Series Analysis", "Anomaly Detection", "Recommendation Systems", "Predictive Modeling", "Deep Learning", "Fraud Detection", "Sentiment Analysis", "Speech Recognition", "Image Processing", "Object Detection", "Generative Models", "AutoML", "Image Recognition", "Text Classification", "Chatbots", "AI Ethics"],
availability: "Low",
minBudget: "Premium",
contractFee: "Lavish"
},
{
id: 6,
title: "DevOps Engineer",
description: "Specialists in CI/CD, cloud infrastructure, and deployment automation",
skills: ["AWS", "Azure", "GCP", "Terraform", "Ansible", "Jenkins", "Docker", "Kubernetes", "GitOps", "Monitoring", "Logging", "Security", "Compliance", "Scalability", "Reliability", "Resilience", "Performance", "Cost Optimization", "Disaster Recovery", "Incident Response", "SRE"],
availability: "Medium",
minBudget: "Pricier",
contractFee: "Substantial"
}
];
export default function HireHumanDeveloper() {
const [selectedType, setSelectedType] = useState<Developer | null>(null);
const [searchTerm, setSearchTerm] = useState("");
const [dialogOpen, setDialogOpen] = useState(false);
// Filter developers based on search term
const filteredDevelopers = developerTypes.filter(dev =>
dev.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
dev.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
dev.skills.some(skill => skill.toLowerCase().includes(searchTerm.toLowerCase()))
);
return (
<div className="container mx-auto px-4 py-12">
<h1 className="text-center text-3xl sm:text-4xl font-bold text-[#6d9e37] mb-3 sm:mb-4">Hire a Human Developer</h1>
<p className="text-center text-lg sm:text-xl max-w-3xl mx-auto text-neutral-300 mb-10">
Connect with skilled developers across various technologies and specialties
</p>
{/* Search and Filter */}
<div className="mb-8">
<div className="max-w-md mx-auto">
<Input
type="text"
placeholder="Search by technology, skill, or type..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="mb-4"
/>
</div>
</div>
{/* Developer Types Grid */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{filteredDevelopers.map((developer) => (
<Card key={developer.id} className="hover:shadow-md transition">
<CardHeader>
<CardTitle>{developer.title}</CardTitle>
<CardDescription>{developer.description}</CardDescription>
</CardHeader>
<CardContent>
<div className="mb-4">
<h4 className="text-sm font-semibold mb-2 text-neutral-300">Key Skills:</h4>
<div className="flex flex-wrap gap-2">
{developer.skills.map((skill, index) => (
<span
key={index}
className="inline-block bg-neutral-300 text-zinc-800 text-xs px-2 py-1 rounded"
>
{skill}
</span>
))}
</div>
</div>
<div className="space-y-2 text-sm">
<div className="flex justify-between">
<span className="text-zinc-500">Availability:</span>
<span className={`font-medium ${
developer.availability === "High" ? "text-green-600" :
developer.availability === "Medium" ? "text-amber-600" : "text-red-600"
}`}>
{developer.availability}
</span>
</div>
<div className="flex justify-between">
<span className="text-zinc-500">Starting at:</span>
<span className="font-medium">{developer.minBudget}</span>
</div>
<div className="flex justify-between">
<span className="text-zinc-500">Contract Fee:</span>
<span className="font-medium">{developer.contractFee}</span>
</div>
</div>
</CardContent>
<CardFooter>
<Button
className="w-full"
onClick={() => {
setSelectedType(developer);
setDialogOpen(true);
}}
>
Hire Developer
</Button>
</CardFooter>
</Card>
))}
</div>
{/* Developer Details Dialog */}
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
<DialogContent className="sm:max-w-md">
{selectedType && (
<>
<DialogHeader>
<DialogTitle>{selectedType.title} Details</DialogTitle>
<DialogDescription>
Review the details and proceed to hire
</DialogDescription>
</DialogHeader>
<div className="space-y-4 py-4">
<div>
<h4 className="text-sm font-semibold mb-1 text-neutral-950">Overview:</h4>
<p className="text-neutral-400">{selectedType.description}</p>
</div>
<div>
<h4 className="text-sm font-semibold mb-1 text-neutral-950">Specialized Skills:</h4>
<div className="flex flex-wrap gap-2">
{selectedType.skills.map((skill, index) => (
<span
key={index}
className="inline-block bg-zinc-100 text-zinc-800 text-xs px-2 py-1 rounded"
>
{skill}
</span>
))}
</div>
</div>
<div className="grid grid-cols-2 gap-4">
<div>
<h4 className="text-sm font-semibold mb-1 text-neutral-950">Availability:</h4>
<p className={`font-medium ${
selectedType.availability === "High" ? "text-green-600" :
selectedType.availability === "Medium" ? "text-amber-600" : "text-red-600"
}`}>
{selectedType.availability}
</p>
</div>
<div>
<h4 className="text-sm font-semibold mb-1 text-neutral-950">Minimum Budget:</h4>
<p className="font-medium text-neutral-950">{selectedType.minBudget}</p>
</div>
<div>
<h4 className="text-sm font-semibold mb-1 text-neutral-950">Contract Fee:</h4>
<p className="font-medium text-neutral-950">{selectedType.contractFee}</p>
</div>
<div>
<h4 className="text-sm font-semibold mb-1 text-neutral-950">Usual Turnaround:</h4>
<p className="font-medium text-neutral-950">1-3 weeks</p>
</div>
</div>
</div>
<DialogFooter>
<Button type="button" variant="outline" onClick={() => setDialogOpen(false)}>
Cancel
</Button>
<Button type="button">
Proceed to Hire
</Button>
</DialogFooter>
</>
)}
</DialogContent>
</Dialog>
{/* Additional Information */}
<div className="mt-16 bg-neutral-800 p-8 rounded-lg">
<h2 className="text-2xl font-bold mb-4 text-[#6d9e37]">Why Hire Our Human Developers?</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<div>
<h3 className="text-lg font-semibold mb-2 text-[#6d9e37]">Vetted Experts</h3>
<p className="text-[#fff]">
All our developers go through a rigorous vetting process to ensure top-quality talent.
</p>
</div>
<div>
<h3 className="text-lg font-semibold mb-2 text-[#6d9e37]">Flexible Engagement</h3>
<p className="text-[#fff]">
Hire on hourly, project-based, or long-term contracts based on your needs.
</p>
</div>
<div>
<h3 className="text-lg font-semibold mb-2 text-[#6d9e37]">Satisfaction Guarantee</h3>
<p className="text-[#fff]">
Not satisfied with the talent? We'll match you with another developer at no extra cost.
</p>
</div>
</div>
</div>
</div>
);
}

266
src/components/Login.tsx Normal file
View File

@ -0,0 +1,266 @@
import { useState } from 'react';
import type { FormEvent } from 'react';
import PocketBase from 'pocketbase';
import { Input } from "./ui/input";
import { Button } from "./ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "./ui/card";
import { Eye, EyeOff, Loader2 } from "lucide-react";
import { Separator } from "./ui/separator";
import { Label } from "./ui/label";
interface AuthStatus {
message: string;
isError: boolean;
}
interface UserRecord {
id: string;
email: string;
name?: string;
avatar?: string;
[key: string]: any;
}
interface AuthResponse {
token: string;
record: UserRecord;
}
const LoginPage = () => {
const [email, setEmail] = useState('suvodip@siliconpin.com');
const [password, setPassword] = useState('Simple2pass');
const [passwordVisible, setPasswordVisible] = useState(false);
const [status, setStatus] = useState<AuthStatus>({ message: '', isError: false });
const [isLoading, setIsLoading] = useState(false);
const pb = new PocketBase("https://tst-pb.s38.siliconpin.com");
const handleSubmit = async (e: FormEvent) => {
e.preventDefault();
setIsLoading(true);
setStatus({ message: '', isError: false });
try {
const authData = await pb.collection("users").authWithPassword(email, password);
const authResponse: AuthResponse = {
token: authData.token,
record: {
query: 'new',
id: authData.record.id,
email: authData.record.email,
name: authData.record.name || '',
avatar: authData.record.avatar || ''
}
};
await syncSessionWithBackend(authResponse);
// window.location.href = '/profile';
} catch (error) {
console.error("Login failed:", error);
setStatus({
message: "Login failed. Please check your credentials.",
isError: true
});
} finally {
setIsLoading(false);
}
};
const loginWithOAuth2 = async (provider: 'google' | 'facebook' | 'github') => {
try {
setIsLoading(true);
setStatus({ message: '', isError: false });
const authData = await pb.collection('users').authWithOAuth2({ provider });
if (!authData?.record) {
throw new Error("No user record found");
}
const authResponse: AuthResponse = {
token: authData.token,
record: {
query: 'new',
id: authData.record.id,
email: authData.record.email || '',
name: authData.record.name || '',
avatar: authData.record.avatar || ''
}
};
await syncSessionWithBackend(authResponse);
// window.location.href = '/profile';
} catch (error) {
console.error(`${provider} Login failed:`, error);
setStatus({
message: `${provider} login failed. Please try again.`,
isError: true
});
} finally {
setIsLoading(false);
}
};
const syncSessionWithBackend = async (authData: AuthResponse) => {
try {
const response = await fetch('http://localhost:2058/host-api/v1/users/session/', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
query: 'new',
accessToken: authData.token,
email: authData.record.email,
name: authData.record.name,
avatar: authData.record.avatar
? pb.files.getUrl(authData.record, authData.record.avatar)
: '',
isAuthenticated: true,
id: authData.record.id
})
});
if (!response.ok) {
throw new Error('Failed to sync session');
}
const data = await response.json();
console.log('Session synced with backend:', data);
} catch (error) {
console.error('Error syncing session:', error);
}
};
return (
<div className="min-h-screen flex items-center justify-center p-4">
<Card className="w-full max-w-md shadow-lg rounded-xl overflow-hidden">
<CardHeader className="text-center space-y-1">
<CardTitle className="text-2xl font-bold">Welcome Back</CardTitle>
<CardDescription className="">
Sign in to access your account
</CardDescription>
</CardHeader>
<CardContent className="space-y-6">
{status.message && (
<div className={`p-3 rounded-md text-sm ${status.isError ? 'bg-red-50 text-red-600' : 'bg-green-50 text-green-600'}`}>
{status.message}
</div>
)}
<form onSubmit={handleSubmit} className="space-y-4">
<div className="space-y-2">
<Label htmlFor="email" className="">
Email Address
</Label>
<Input
id="email"
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="you@example.com"
required
className="focus:ring-2 focus:ring-blue-500"
/>
</div>
<div className="space-y-2">
<div className="flex justify-between items-center">
<Label htmlFor="password" className="">
Password
</Label>
<button
type="button"
onClick={() => setPasswordVisible(!passwordVisible)}
className="text-sm text-[#6d9e37]"
>
</button>
</div>
<div className="relative">
<Input
id="password"
type={passwordVisible ? "text" : "password"}
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="••••••••"
required
className="focus:ring-2 focus:ring-blue-500 pr-10"
/>
<button
type="button"
onClick={() => setPasswordVisible(!passwordVisible)}
className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
>
{passwordVisible ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}
</button>
</div>
</div>
<Button
type="submit"
disabled={isLoading}
className="w-full"
>
{isLoading ? (
<>
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
Signing in...
</>
) : (
'Sign In'
)}
</Button>
</form>
<div className="relative">
<div className="absolute inset-0 flex items-center">
<Separator className="w-full" />
</div>
<div className="relative flex justify-center text-xs uppercase">
<span className="bg-background px-2 text-muted-foreground">
Or continue with
</span>
</div>
</div>
<div className="grid grid-cols-3 gap-3">
<Button
variant="outline"
onClick={() => loginWithOAuth2('google')}
disabled={isLoading}
className="flex items-center justify-center gap-2"
>
<img src="/assets/google.svg" alt="Google" className="h-6 w-6" />
</Button>
<Button
variant="outline"
onClick={() => loginWithOAuth2('facebook')}
disabled={isLoading}
className="flex items-center justify-center gap-2"
>
<img src="/assets/facebook.svg" alt="Facebook" className="h-6 w-6" />
</Button>
<Button
variant="outline"
onClick={() => loginWithOAuth2('github')}
disabled={isLoading}
className="flex items-center justify-center gap-2"
>
<img src="/assets/github.svg" alt="GitHub" className="h-6 w-6" />
</Button>
</div>
</CardContent>
<div className="px-6 pb-6 text-center text-sm text-gray-500">
Don't have an account?{' '}
<a href="/sign-up" className="font-medium text-[#6d9e37] hover:underline">
Sign up
</a>
</div>
</Card>
</div>
);
};
export default LoginPage;

View File

@ -36,7 +36,7 @@ export function ServiceCard({ title, description, imageUrl, features, learnMoreU
>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
</svg>
<span>{feature}</span>
<span className='text-zinc-600'>{feature}</span>
</li>
))}
</ul>

View File

@ -0,0 +1,210 @@
import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
import { Button } from "./ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "./ui/card";
import { Input } from "./ui/input";
import { Label } from "./ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue,} from "./ui/select";
import { Separator } from "./ui/separator";
import { Textarea } from "./ui/textarea";
import React, { useState, useEffect } from 'react';
interface SessionData {
[key: string]: any;
}
interface UserData {
success: boolean;
session_data: SessionData;
user_avatar: string;
}
export default function ProfilePage() {
const [userData, setUserData] = useState<UserData | null>(null);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch(
'http://localhost:2058/host-api/v1/users/get-profile-data/',
{
credentials: 'include',
headers: {
'Accept': 'application/json',
}
}
);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data: UserData = await response.json();
// console.log('success message', data.success);
if(data.success === true){
setUserData(data);
// console.log('User Data', data);
}
} catch (error) {
console.error('Fetch error:', error);
setError(error instanceof Error ? error.message : 'An unknown error occurred');
}
};
fetchData();
}, []);
if (error) {
return <div>Error: {error}</div>;
}
if (!userData) {
return <div>Loading profile data...</div>;
}
return (
<div className="space-y-6 container mx-auto">
<div>
<h3 className="text-lg font-medium">Profile</h3>
<p className="text-sm text-muted-foreground">
Update your profile settings.
</p>
</div>
<Separator />
<div className="flex flex-col space-y-8 lg:flex-row lg:space-x-12 lg:space-y-0">
<div className="flex-1 lg:max-w-2xl">
<Card>
<CardHeader>
<CardTitle>Personal Information</CardTitle>
<CardDescription>
Update your personal information and avatar.
</CardDescription>
</CardHeader>
<CardContent className="space-y-6">
<div className="flex items-center space-x-4">
<Avatar className="h-16 w-16">
<AvatarImage src={userData.session_data?.user_avatar} />
<AvatarFallback>JP</AvatarFallback>
</Avatar>
<div className="space-y-1">
<Button size="sm">
Change avatar
</Button>
<p className="text-xs text-muted-foreground">
JPG, GIF or PNG. 1MB max.
</p>
</div>
</div>
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
<div className="space-y-2">
<Label htmlFor="firstName">Full Name</Label>
<Input id="firstName" defaultValue={userData.session_data?.user_name || 'Jhon'} />
</div>
<div className="space-y-2">
<Label htmlFor="phone">Phone</Label>
<Input id="phone" defaultValue={userData.session_data?.user_vatar || ''} />
</div>
</div>
<div className="space-y-2">
<Label htmlFor="email">Email</Label>
<Input id="email" type="email" defaultValue={userData.session_data?.user_email || ''} />
</div>
<div className="space-y-2">
<Label htmlFor="bio">Bio</Label>
<Textarea
id="bio"
defaultValue="I'm a software developer based in New York."
className="resize-none"
rows={5}
/>
</div>
</CardContent>
</Card>
<Card className="mt-6">
<CardHeader>
<CardTitle>Preferences</CardTitle>
<CardDescription>
Configure your application preferences.
</CardDescription>
</CardHeader>
<CardContent className="space-y-6">
<div className="space-y-2">
<Label htmlFor="language">Language</Label>
<Select defaultValue="english">
<SelectTrigger id="language">
<SelectValue placeholder="Select language" />
</SelectTrigger>
<SelectContent>
<SelectItem value="english">English</SelectItem>
<SelectItem value="french">French</SelectItem>
<SelectItem value="german">German</SelectItem>
<SelectItem value="spanish">Spanish</SelectItem>
</SelectContent>
</Select>
</div>
<div className="space-y-2">
<Label htmlFor="timezone">Timezone</Label>
<Select defaultValue="est">
<SelectTrigger id="timezone">
<SelectValue placeholder="Select timezone" />
</SelectTrigger>
<SelectContent>
<SelectItem value="est">Eastern Standard Time (EST)</SelectItem>
<SelectItem value="cst">Central Standard Time (CST)</SelectItem>
<SelectItem value="mst">Mountain Standard Time (MST)</SelectItem>
<SelectItem value="pst">Pacific Standard Time (PST)</SelectItem>
</SelectContent>
</Select>
</div>
</CardContent>
</Card>
</div>
<div className="flex-1 space-y-6 lg:max-w-md">
<Card>
<CardHeader>
<CardTitle>Security</CardTitle>
<CardDescription>
Update your password and security settings.
</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<div className="space-y-2">
<Label htmlFor="currentPassword">Current password</Label>
<Input id="currentPassword" type="password" />
</div>
<div className="space-y-2">
<Label htmlFor="newPassword">New password</Label>
<Input id="newPassword" type="password" />
</div>
<div className="space-y-2">
<Label htmlFor="confirmPassword">Confirm password</Label>
<Input id="confirmPassword" type="password" />
</div>
<Button className="mt-4">Update password</Button>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Danger Zone</CardTitle>
<CardDescription>
These actions are irreversible. Proceed with caution.
</CardDescription>
</CardHeader>
<CardContent>
<div className="flex flex-col space-y-4">
<Button >Delete account</Button>
<Button variant="outline">Export data</Button>
</div>
</CardContent>
</Card>
</div>
</div>
</div>
);
}

View File

@ -0,0 +1,57 @@
import * as React from "react"
import { cn } from "../../lib/utils"
const Avatar = React.forwardRef<
HTMLSpanElement,
React.HTMLAttributes<HTMLSpanElement> & {
size?: "sm" | "md" | "lg"
}
>(({ className, size = "md", ...props }, ref) => {
const sizeClasses = {
sm: "h-8 w-8",
md: "h-10 w-10",
lg: "h-12 w-12",
};
return (
<span
ref={ref}
className={cn(
"relative flex shrink-0 overflow-hidden rounded-full",
sizeClasses[size],
className
)}
{...props}
/>
)
})
Avatar.displayName = "Avatar"
const AvatarImage = React.forwardRef<
HTMLImageElement,
React.ImgHTMLAttributes<HTMLImageElement>
>(({ className, ...props }, ref) => (
<img
ref={ref}
className={cn("aspect-square h-full w-full", className)}
{...props}
/>
))
AvatarImage.displayName = "AvatarImage"
const AvatarFallback = React.forwardRef<
HTMLSpanElement,
React.HTMLAttributes<HTMLSpanElement>
>(({ className, ...props }, ref) => (
<span
ref={ref}
className={cn(
"flex h-full w-full items-center justify-center rounded-full bg-muted",
className
)}
{...props}
/>
))
AvatarFallback.displayName = "AvatarFallback"
export { Avatar, AvatarImage, AvatarFallback }

View File

@ -8,7 +8,7 @@ export interface ButtonProps
}
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
({ className, variant = "default", size = "default", ...props }, ref) => {
({ className, variant = "default", type = '', size = "default", ...props }, ref) => {
return (
<button
className={cn(

View File

@ -8,7 +8,7 @@ const Card = React.forwardRef<
<div
ref={ref}
className={cn(
"rounded-lg border border-neutral-200 bg-white text-neutral-950 shadow-sm dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
"rounded-lg border border-[#6d9e37] bg-neutral-800 text-[#6d9e37] shadow-sm dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
className
)}
{...props}

View File

@ -0,0 +1,122 @@
"use client"
import * as React from "react"
import * as DialogPrimitive from "@radix-ui/react-dialog"
import { X } from "lucide-react"
import { cn } from "../../lib/utils"
const Dialog = DialogPrimitive.Root
const DialogTrigger = DialogPrimitive.Trigger
const DialogPortal = DialogPrimitive.Portal
const DialogClose = DialogPrimitive.Close
const DialogOverlay = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Overlay>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
>(({ className, ...props }, ref) => (
<DialogPrimitive.Overlay
ref={ref}
className={cn(
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
className
)}
{...props}
/>
))
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
const DialogContent = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
>(({ className, children, ...props }, ref) => (
<DialogPortal>
<DialogOverlay />
<DialogPrimitive.Content
ref={ref}
className={cn(
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-[#fff] p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
className
)}
{...props}
>
{children}
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-[#fff] transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
<X className="h-4 w-4 text-black" />
<span className="sr-only">Close</span>
</DialogPrimitive.Close>
</DialogPrimitive.Content>
</DialogPortal>
))
DialogContent.displayName = DialogPrimitive.Content.displayName
const DialogHeader = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col space-y-1.5 text-center sm:text-left",
className
)}
{...props}
/>
)
DialogHeader.displayName = "DialogHeader"
const DialogFooter = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
className
)}
{...props}
/>
)
DialogFooter.displayName = "DialogFooter"
const DialogTitle = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Title>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
>(({ className, ...props }, ref) => (
<DialogPrimitive.Title
ref={ref}
className={cn(
"text-lg font-semibold leading-none tracking-tight text-[#6d9e37]",
className
)}
{...props}
/>
))
DialogTitle.displayName = DialogPrimitive.Title.displayName
const DialogDescription = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Description>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
>(({ className, ...props }, ref) => (
<DialogPrimitive.Description
ref={ref}
className={cn("text-sm text-neutral-400", className)}
{...props}
/>
))
DialogDescription.displayName = DialogPrimitive.Description.displayName
export {
Dialog,
DialogPortal,
DialogOverlay,
DialogTrigger,
DialogClose,
DialogContent,
DialogHeader,
DialogFooter,
DialogTitle,
DialogDescription,
}

View File

@ -1,25 +1,130 @@
import * as React from "react";
import * as SelectPrimitive from "@radix-ui/react-select";
import { cn } from "../../lib/utils";
export interface SelectProps
extends React.SelectHTMLAttributes<HTMLSelectElement> {}
const Select = SelectPrimitive.Root;
const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
({ className, children, ...props }, ref) => {
return (
<select
className={cn(
"flex h-10 w-full rounded-md border border-neutral-600 bg-neutral-800 px-3 py-2 text-sm ring-offset-neutral-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#6d9e37] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
className
)}
ref={ref}
{...props}
>
const SelectGroup = SelectPrimitive.Group;
const SelectValue = SelectPrimitive.Value;
const SelectTrigger = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Trigger>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
<SelectPrimitive.Trigger
ref={ref}
className={cn(
"flex h-10 w-full items-center justify-between rounded-md border border-neutral-600 bg-neutral-800 px-3 py-2 text-sm",
"focus:outline-none focus:ring-2 focus:ring-[#6d9e37] focus:ring-offset-2 focus:ring-offset-neutral-900",
"disabled:cursor-not-allowed disabled:opacity-50",
className
)}
{...props}
>
{children}
<SelectPrimitive.Icon asChild>
<ChevronDownIcon className="h-4 w-4 opacity-50" />
</SelectPrimitive.Icon>
</SelectPrimitive.Trigger>
));
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
const SelectContent = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
>(({ className, children, ...props }, ref) => (
<SelectPrimitive.Portal>
<SelectPrimitive.Content
ref={ref}
className={cn(
"relative z-50 min-w-[8rem] overflow-hidden rounded-md border border-neutral-600 bg-neutral-800 shadow-md animate-in fade-in-80",
className
)}
{...props}
>
<SelectPrimitive.Viewport className="p-1">
{children}
</select>
);
}
);
Select.displayName = "Select";
</SelectPrimitive.Viewport>
</SelectPrimitive.Content>
</SelectPrimitive.Portal>
));
SelectContent.displayName = SelectPrimitive.Content.displayName;
export { Select };
const SelectLabel = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Label>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
>(({ className, ...props }, ref) => (
<SelectPrimitive.Label
ref={ref}
className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
{...props}
/>
));
SelectLabel.displayName = SelectPrimitive.Label.displayName;
const SelectItem = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Item>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
>(({ className, children, ...props }, ref) => (
<SelectPrimitive.Item
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
"focus:bg-neutral-700 focus:text-white",
"data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className
)}
{...props}
>
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
</SelectPrimitive.Item>
));
SelectItem.displayName = SelectPrimitive.Item.displayName;
const SelectSeparator = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Separator>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
>(({ className, ...props }, ref) => (
<SelectPrimitive.Separator
ref={ref}
className={cn("-mx-1 my-1 h-px bg-neutral-600", className)}
{...props}
/>
));
SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
// ChevronDownIcon component
const ChevronDownIcon = React.forwardRef<
SVGSVGElement,
React.SVGProps<SVGSVGElement>
>((props, ref) => (
<svg
ref={ref}
width="15"
height="15"
viewBox="0 0 15 15"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z"
fill="currentColor"
fillRule="evenodd"
clipRule="evenodd"
></path>
</svg>
));
ChevronDownIcon.displayName = "ChevronDownIcon";
export {
Select,
SelectGroup,
SelectValue,
SelectTrigger,
SelectContent,
SelectLabel,
SelectItem,
SelectSeparator,
};

View File

@ -0,0 +1,23 @@
import * as React from "react"
import { cn } from "../../lib/utils"
const Separator = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement> & {
orientation?: "horizontal" | "vertical"
}
>(({ className, orientation = "horizontal", ...props }, ref) => (
<div
ref={ref}
className={cn(
"shrink-0 bg-border",
orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
className
)}
role="separator"
{...props}
/>
))
Separator.displayName = "Separator"
export { Separator }

View File

@ -174,8 +174,8 @@ const organizationSchema = {
<ul class="space-y-2 text-neutral-400">
<li class="flex items-center gap-2">📦 <a href="/services" class="hover:text-[#6d9e37] transition-colors">All Services</a></li>
<li class="flex items-center gap-2">🚀 <a href="/get-started" class="hover:text-[#6d9e37] transition-colors">Get Started</a></li>
<li class="flex items-center gap-2">👨‍💻 <a href="/services/hire-developer" class="hover:text-[#6d9e37] transition-colors">Hire a Human Developer</a></li>
<li class="flex items-center gap-2">🤖 <a href="/services/hire-ai-agent" class="hover:text-[#6d9e37] transition-colors">Hire an AI Agent</a></li>
<li class="flex items-center gap-2">👨‍💻 <a href="/hire-developer" class="hover:text-[#6d9e37] transition-colors">Hire a Human Developer</a></li>
<li class="flex items-center gap-2">🤖 <a href="/hire-ai-agent" class="hover:text-[#6d9e37] transition-colors">Hire an AI Agent</a></li>
</ul>
</div>

View File

@ -7,7 +7,7 @@ import Layout from "../../layouts/Layout.astro"
</div>
<script is:inline>
fetch('/host-api/add-domain/')
fetch('http://localhost:2058/host-api/v1/add-domain/')
.then(response => {
if (!response.ok) throw new Error('Network error');
return response.json();

View File

@ -20,7 +20,7 @@ import Layout from "../../layouts/Layout.astro"
responseElement.textContent = "Deleting domain...";
try {
const response = await fetch('/host-api/delete-domain/', {
const response = await fetch('http://localhost:2058/host-api/v1/delete-domain/', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',

View File

@ -7,7 +7,7 @@ import Layout from "../../layouts/Layout.astro"
</div>
<script is:inline>
fetch('/host-api/list-domain/')
fetch('http://localhost:2058/host-api/v1/list-domain/')
.then(response => {
if (!response.ok) throw new Error('Network error');
return response.json();

View File

@ -0,0 +1,9 @@
---
import Layout from "../layouts/Layout.astro";
import HireAIAgent from "../components/HireAIAgent";
---
<Layout title="">
<div>
<HireAIAgent client:load />
</div>
</Layout>

View File

@ -0,0 +1,9 @@
---
import Layout from "../layouts/Layout.astro";
import Developer from "../components/HireDeveloper";
---
<Layout title="">
<div>
<Developer client:load />
</div>
</Layout>

7
src/pages/login.astro Normal file
View File

@ -0,0 +1,7 @@
---
import Layout from "../layouts/Layout.astro";
import LoginPage from "../components/Login";
---
<Layout title="">
<LoginPage client:load />
</Layout>

265
src/pages/login_old.astro Normal file
View File

@ -0,0 +1,265 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PocketBase Sign-In</title>
</head>
<style>
.login-main-conatiner{
display: flex;
justify-content: center;
}
.login-container{
max-width: 380px;
width: 100%;
background: #222;
padding: 40px;
border-radius: 12px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
display: flex;
flex-direction: column;
margin: 100px 0;
}
#loginForm{
display: flex;
flex-direction: column;
gap: 10px;
}
.auth-title {
color: #ffffff;
font-size: 24px;
font-weight: 600;
margin-bottom: 20px;
text-align: center;
}
.auth-input {
background: #333;
border: 1px solid #444;
color: #fff;
border-radius: 8px;
outline: none;
font-size: 15px;
transition: border 0.3s;
}
.auth-input:focus {
border-color: #00bcd4;
}
.auth-btn {
background: linear-gradient(135deg, #00bcd4, #0288d1);
color: white;
padding: 14px;
width: 100%;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 16px;
font-weight: 500;
margin-top: 10px;
transition: background 0.3s ease;
}
.auth-btn:hover {
background: linear-gradient(135deg, #0288d1, #00bcd4);
}
.auth-social {
display: flex;
flex-direction: column;
gap: 10px;
}
.auth-social-btn {
display: flex;
align-items: center;
justify-content: center;
padding: 12px;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
color: white;
transition: opacity 0.3s;
width: 100%;
margin-top: 10px;
}
.auth-social-btn:hover {
opacity: 0.8;
}
.auth-google {
background: #db4437;
}
.auth-facebook {
background: #1877f2;
}
.auth-github {
background: #333;
}
.auth-divider {
margin: 20px 0;
color: #777;
font-size: 14px;
position: relative;
text-align: center;
}
.auth-divider::before,
.auth-divider::after {
content: "";
position: absolute;
width: 37%;
height: 1px;
background: #444;
top: 50%;
}
.auth-divider::before {
left: 0;
}
.auth-divider::after {
right: 0;
}
.auth-error {
color: #ff4c4c;
font-size: 14px;
margin-top: 10px;
text-align: center;
}
.auth-footer {
margin-top: 15px;
font-size: 13px;
color: #999;
text-align: center;
}
.auth-footer a {
color: #00bcd4;
text-decoration: none;
}
.auth-footer a:hover {
text-decoration: underline;
}
.pass-view-button{
border: none;
background: transparent;
font-size: 10px;
}
</style>
<body>
<div class="login-main-conatiner">
<div class="login-container">
<h2 class="auth-title">Login to Your Account</h2>
<form id="loginForm">
<input class="auth-input" id="email" type="email" name="email" placeholder="Email Address" required value="suvodip@siliconpin.com">
<div class="auth-input" style="display: flex; position: relative;">
<input class="auth-input" id="password" type="text" name="password" placeholder="Password" required style="width: 100%;" value="Simple2pass" />
<button onclick="toggleInputType();" type="button" class="pass-view-button" style="position: absolute; right: 0; margin-top: 3px;">
<img src="/assets/eye.svg" id="eyeToggle" alt="">
</button>
</div>
<button class="auth-btn" type="submit">Sign In</button>
</form>
<p class="auth-divider">Or continue with</p>
<div class="">
<button id="loginGoogleBtn" onclick="loginWithOAuth2('google')" class="auth-social-btn auth-google">Login with Google</button>
<button id="loginFacebookBtn" onclick="loginWithOAuth2('facebook')" class="auth-social-btn auth-facebook">Login with Facebook</button>
<button id="loginGitHubBtn" onclick="loginWithOAuth2('github')" class="auth-social-btn auth-github">Login with GitHub</button>
</div>
<p id="status" style="display: none;"></p>
<p class="auth-footer">Don't have an account? <a href="/sign-up">Sign up</a></p>
</div>
</div>
<script is:inline type="module">
import PocketBase from 'https://cdn.jsdelivr.net/npm/pocketbase@0.19.0/+esm';
const pb = new PocketBase("https://tst-pb.s38.siliconpin.com");
let isAuthenticated = false;
document.getElementById("loginForm").addEventListener("submit", async function(event) {
event.preventDefault();
const email = document.getElementById("email").value;
const password = document.getElementById("password").value;
const status = document.getElementById("status");
try {
const authData = await pb.collection("users").authWithPassword(email, password);
console.log("User signed in:", authData);
status.style.display = 'block';
status.textContent = "Login successful!";
status.style.color = "green";
isAuthenticated = true;
updateUI(authData.record, authData.token);
window.location.href = '/profile';
} catch (error) {
console.error("Login failed:", error);
status.style.display = 'block';
status.textContent = "Login failed. Please check your credentials.";
status.style.color = "red";
}
});
async function loginWithOAuth2(provider) {
try {
const authData = await pb.collection('users').authWithOAuth2({ provider: provider });
if (!authData || !authData.record) {
console.error("Login failed: No user record found.");
return;
}
let accessToken = authData.token;
isAuthenticated = true;
console.log("Google Auth Response:", authData);
updateUI(authData.record, authData.token);
window.location.href = '/profile';
} catch (error) {
console.error("Google Login failed:", error);
}
}
function updateUI(user, token) {
if (!user || !user.email) {
console.error("User data is missing:", user);
return;
}
// Send user data to PHP session
fetch('http://localhost:2058/host-api/v1/users/session/', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
accessToken: token,
email: user.email,
name: user.name,
avatar: user.avatar ? pb.files.getUrl(user, user.avatar) : '',
isAuthenticated : true,
id: user.id
})
})
.then(response => response.json())
.then(data => console.log('Session updated:', data))
.catch(error => console.error('Error saving session:', error));
}
window.loginWithOAuth2 = loginWithOAuth2;
if (pb.authStore.isValid) {
updateUI(pb.authStore.model);
}
const inputType = document.getElementById('password');
const eyeToggle = document.getElementById('eyeToggle');
function toggleInputType(){
if(inputType.type === 'password'){
inputType.type = 'text';
eyeToggle.src = '/assets/eye-close.svg';
}else{
inputType.type = 'password';
eyeToggle.src = '/assets/eye.svg';
}
}
window.toggleInputType = toggleInputType;
</script>
</body>
</html>

View File

@ -1,10 +1,12 @@
---
import Layout from "../layouts/Layout.astro";
const phpHello = `$_SESSION['userName']`;
// const phpHello = `$_SESSION['userName']`;
import UserProfile from "../components/UserProfile";
---
<Layout title="Profile Page">
<div class="flex items-center justify-center min-h-screen bg-gray-700">
<UserProfile client:load />
<!-- <div class="flex items-center justify-center min-h-screen bg-gray-700">
<div class="w-96 p-6 shadow-lg rounded-lg bg-white text-center">
<img class="w-24 h-24 rounded-full border-4 border-blue-500 mx-auto" src="/profile.jpg" alt="Profile Picture" />
<h2 class="text-2xl font-semibold mt-4" set:html={phpHello ? phpHello : 'User Name'}></h2>
@ -15,5 +17,5 @@ const phpHello = `$_SESSION['userName']`;
<button class="bg-gray-200 text-black px-4 py-2 rounded-lg">Message</button>
</div>
</div>
</div>
</div> -->
</Layout>

View File

@ -10,43 +10,25 @@ const pageImage = "https://images.unsplash.com/photo-1551731409-43eb3e517a1a?q=8
// Service data
const services = [
{
title: 'PHP Hosting',
description: 'Fast, secure, and reliable PHP hosting solutions for your web applications.',
title: 'Deploy an App',
description: 'WordPress, Joomla, Drupal, PrestaShop, Wiki, Moodle, Directus, PocketBase, StarAPI and more.',
imageUrl: 'https://images.unsplash.com/photo-1599507593499-a3f7d7d97667?q=80&w=2000&auto=format&fit=crop',
features: [
'PHP 8.x support',
'One-click installation of popular CMS',
'Free SSL certificates',
'Optimized for WordPress, Laravel, etc.',
'24/7 Technical support'
],
learnMoreUrl: '/services/php'
features: [ 'WordPress', 'Joomla', 'Drupal', 'PrestaShop', 'Wiki', 'Moodle', 'Directus', 'PocketBase', 'StarAPI' ],
learnMoreUrl: '/services/deploy-an-app'
},
{
title: 'Node.js Hosting',
description: 'High-performance Node.js hosting with seamless deployment pipelines.',
imageUrl: 'https://images.unsplash.com/photo-1570063578733-6a33b69d1538?q=80&w=2000&auto=format&fit=crop',
features: [
'Latest Node.js versions',
'NPM/Yarn support',
'Express, Next.js, and more',
'Managed SSL certificates',
'Automatic scaling'
],
learnMoreUrl: '/services/nodejs'
title: 'Deploy From Source Code',
description: 'Node.js, Python, Ruby, Go, Rust, and more. Deploy your custom applications with ease.',
imageUrl: 'https://images.unsplash.com/photo-1599507593499-a3f7d7d97667?q=80&w=2000&auto=format&fit=crop',
features: ['Node.js', 'Python', 'Ruby', 'Go', 'Rust', 'Docker', 'Kubernetes', 'JAMstack', 'Serverless'],
learnMoreUrl: '/services/deploy-from-source-code'
},
{
title: 'Python Hosting',
description: 'Scalable Python hosting for web applications, APIs, and data science projects.',
title: 'Static Site Hosting',
description: 'Secure and scalable hosting for static websites and JAMstack applications.',
imageUrl: 'https://images.unsplash.com/photo-1526379879527-8559ecfcaec0?q=80&w=2000&auto=format&fit=crop',
features: [
'Python 3.x support',
'Django, Flask, and FastAPI ready',
'Virtual environments',
'Jupyter notebook integration',
'Seamless deployment'
],
learnMoreUrl: '/services/python'
features: ['JAMstack', 'Gatsby', 'Hugo', 'Next.js', 'Nuxt.js', 'VuePress', 'Eleventy', 'SvelteKit', 'Astro'],
learnMoreUrl: '/services/static-site-hosting'
},
{
title: 'Kubernetes (K8s)',
@ -73,6 +55,20 @@ const services = [
'Simplified management'
],
learnMoreUrl: '/services/k3s'
},
{
title: 'Hire a Human Developer',
description: 'Need a custom solution? Our experts can design a tailored App or WebApp for your specific needs.',
imageUrl: 'https://images.unsplash.com/photo-1558494949-ef010cbdcc31?q=80&w=2000&auto=format&fit=crop',
features: ['Node.js', 'Python', 'Ruby', 'Go', 'Rust', 'Docker', 'Kubernetes', 'JAMstack', 'Serverless'],
learnMoreUrl: '/services/hire-a-human-developer'
},
{
title: 'Hire an AI Agent',
description: 'Need a custom solution? Our experts can design a tailored AI Agent for your specific needs.',
imageUrl: 'https://images.unsplash.com/photo-1558494949-ef010cbdcc31?q=80&w=2000&auto=format&fit=crop',
features: ['Reactive Agents (Stateless, Rule-Based)', 'Proactive Agents (Stateful, Machine Learning)', 'Hybrid Agents (Reactive + Proactive)', 'Model-Based Agents (Stateful, Uses Memory)', 'Goal-Based Agents (Optimizes for an Objective)', 'Utility-Based Agents', 'Self Learning Agents', 'Autonomous AI Agents'],
learnMoreUrl: '/services/hire-an-ai-agent'
}
];
---