feat: comprehensive SaaS UI redesign — Hero mesh, ToolCard accent, How-it-Works, bottom CTA banner, Header CTA
Agent-Logs-Url: https://github.com/aborayan2022/SaaS-PDF/sessions/b8e294e5-c1b0-4395-a003-cfa8f003bf27 Co-authored-by: aborayan2022 <119736744+aborayan2022@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot]
committed by
GitHub
GitHub
parent
cf03d963fc
commit
f55d726df2
428
frontend/package-lock.json
generated
428
frontend/package-lock.json
generated
@@ -2240,29 +2240,6 @@
|
|||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"optional": true
|
"optional": true
|
||||||
},
|
},
|
||||||
"node_modules/base64-js": {
|
|
||||||
"version": "1.5.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
|
|
||||||
"integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
|
|
||||||
"dev": true,
|
|
||||||
"funding": [
|
|
||||||
{
|
|
||||||
"type": "github",
|
|
||||||
"url": "https://github.com/sponsors/feross"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"type": "patreon",
|
|
||||||
"url": "https://www.patreon.com/feross"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"type": "consulting",
|
|
||||||
"url": "https://feross.org/support"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"license": "MIT",
|
|
||||||
"optional": true,
|
|
||||||
"peer": true
|
|
||||||
},
|
|
||||||
"node_modules/baseline-browser-mapping": {
|
"node_modules/baseline-browser-mapping": {
|
||||||
"version": "2.10.0",
|
"version": "2.10.0",
|
||||||
"resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.0.tgz",
|
"resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.0.tgz",
|
||||||
@@ -2299,20 +2276,6 @@
|
|||||||
"url": "https://github.com/sponsors/sindresorhus"
|
"url": "https://github.com/sponsors/sindresorhus"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/bl": {
|
|
||||||
"version": "4.1.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
|
|
||||||
"integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
|
|
||||||
"dev": true,
|
|
||||||
"license": "MIT",
|
|
||||||
"optional": true,
|
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
|
||||||
"buffer": "^5.5.0",
|
|
||||||
"inherits": "^2.0.4",
|
|
||||||
"readable-stream": "^3.4.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/brace-expansion": {
|
"node_modules/brace-expansion": {
|
||||||
"version": "1.1.12",
|
"version": "1.1.12",
|
||||||
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
|
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
|
||||||
@@ -2371,33 +2334,6 @@
|
|||||||
"node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
|
"node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/buffer": {
|
|
||||||
"version": "5.7.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
|
|
||||||
"integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
|
|
||||||
"dev": true,
|
|
||||||
"funding": [
|
|
||||||
{
|
|
||||||
"type": "github",
|
|
||||||
"url": "https://github.com/sponsors/feross"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"type": "patreon",
|
|
||||||
"url": "https://www.patreon.com/feross"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"type": "consulting",
|
|
||||||
"url": "https://feross.org/support"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"license": "MIT",
|
|
||||||
"optional": true,
|
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
|
||||||
"base64-js": "^1.3.1",
|
|
||||||
"ieee754": "^1.1.13"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/call-bind-apply-helpers": {
|
"node_modules/call-bind-apply-helpers": {
|
||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
|
||||||
@@ -2442,23 +2378,6 @@
|
|||||||
],
|
],
|
||||||
"license": "CC-BY-4.0"
|
"license": "CC-BY-4.0"
|
||||||
},
|
},
|
||||||
"node_modules/canvas": {
|
|
||||||
"version": "3.2.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/canvas/-/canvas-3.2.1.tgz",
|
|
||||||
"integrity": "sha512-ej1sPFR5+0YWtaVp6S1N1FVz69TQCqmrkGeRvQxZeAB1nAIcjNTHVwrZtYtWFFBmQsF40/uDLehsW5KuYC99mg==",
|
|
||||||
"dev": true,
|
|
||||||
"hasInstallScript": true,
|
|
||||||
"license": "MIT",
|
|
||||||
"optional": true,
|
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
|
||||||
"node-addon-api": "^7.0.0",
|
|
||||||
"prebuild-install": "^7.1.3"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": "^18.12.0 || >= 20.9.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/chai": {
|
"node_modules/chai": {
|
||||||
"version": "6.2.2",
|
"version": "6.2.2",
|
||||||
"resolved": "https://registry.npmjs.org/chai/-/chai-6.2.2.tgz",
|
"resolved": "https://registry.npmjs.org/chai/-/chai-6.2.2.tgz",
|
||||||
@@ -2507,15 +2426,6 @@
|
|||||||
"node": ">= 6"
|
"node": ">= 6"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/chownr": {
|
|
||||||
"version": "1.1.4",
|
|
||||||
"resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
|
|
||||||
"integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==",
|
|
||||||
"dev": true,
|
|
||||||
"license": "ISC",
|
|
||||||
"optional": true,
|
|
||||||
"peer": true
|
|
||||||
},
|
|
||||||
"node_modules/cli-width": {
|
"node_modules/cli-width": {
|
||||||
"version": "4.1.0",
|
"version": "4.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/cli-width/-/cli-width-4.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/cli-width/-/cli-width-4.1.0.tgz",
|
||||||
@@ -2775,36 +2685,6 @@
|
|||||||
"devOptional": true,
|
"devOptional": true,
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
"node_modules/decompress-response": {
|
|
||||||
"version": "6.0.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
|
|
||||||
"integrity": "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==",
|
|
||||||
"dev": true,
|
|
||||||
"license": "MIT",
|
|
||||||
"optional": true,
|
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
|
||||||
"mimic-response": "^3.1.0"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": ">=10"
|
|
||||||
},
|
|
||||||
"funding": {
|
|
||||||
"url": "https://github.com/sponsors/sindresorhus"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/deep-extend": {
|
|
||||||
"version": "0.6.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
|
|
||||||
"integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
|
|
||||||
"dev": true,
|
|
||||||
"license": "MIT",
|
|
||||||
"optional": true,
|
|
||||||
"peer": true,
|
|
||||||
"engines": {
|
|
||||||
"node": ">=4.0.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/delayed-stream": {
|
"node_modules/delayed-stream": {
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
|
||||||
@@ -2915,18 +2795,6 @@
|
|||||||
"devOptional": true,
|
"devOptional": true,
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
"node_modules/end-of-stream": {
|
|
||||||
"version": "1.4.5",
|
|
||||||
"resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.5.tgz",
|
|
||||||
"integrity": "sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg==",
|
|
||||||
"dev": true,
|
|
||||||
"license": "MIT",
|
|
||||||
"optional": true,
|
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
|
||||||
"once": "^1.4.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/entities": {
|
"node_modules/entities": {
|
||||||
"version": "6.0.1",
|
"version": "6.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
|
||||||
@@ -3107,18 +2975,6 @@
|
|||||||
"node": ">=0.10.0"
|
"node": ">=0.10.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/expand-template": {
|
|
||||||
"version": "2.0.3",
|
|
||||||
"resolved": "https://registry.npmjs.org/expand-template/-/expand-template-2.0.3.tgz",
|
|
||||||
"integrity": "sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==",
|
|
||||||
"dev": true,
|
|
||||||
"license": "(MIT OR WTFPL)",
|
|
||||||
"optional": true,
|
|
||||||
"peer": true,
|
|
||||||
"engines": {
|
|
||||||
"node": ">=6"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/expect-type": {
|
"node_modules/expect-type": {
|
||||||
"version": "1.3.0",
|
"version": "1.3.0",
|
||||||
"resolved": "https://registry.npmjs.org/expect-type/-/expect-type-1.3.0.tgz",
|
"resolved": "https://registry.npmjs.org/expect-type/-/expect-type-1.3.0.tgz",
|
||||||
@@ -3546,15 +3402,6 @@
|
|||||||
"url": "https://github.com/sponsors/rawify"
|
"url": "https://github.com/sponsors/rawify"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/fs-constants": {
|
|
||||||
"version": "1.0.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
|
|
||||||
"integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==",
|
|
||||||
"dev": true,
|
|
||||||
"license": "MIT",
|
|
||||||
"optional": true,
|
|
||||||
"peer": true
|
|
||||||
},
|
|
||||||
"node_modules/fs-minipass": {
|
"node_modules/fs-minipass": {
|
||||||
"version": "2.1.0",
|
"version": "2.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
|
||||||
@@ -3705,15 +3552,6 @@
|
|||||||
"node": ">= 0.4"
|
"node": ">= 0.4"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/github-from-package": {
|
|
||||||
"version": "0.0.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/github-from-package/-/github-from-package-0.0.0.tgz",
|
|
||||||
"integrity": "sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw==",
|
|
||||||
"dev": true,
|
|
||||||
"license": "MIT",
|
|
||||||
"optional": true,
|
|
||||||
"peer": true
|
|
||||||
},
|
|
||||||
"node_modules/glob": {
|
"node_modules/glob": {
|
||||||
"version": "7.2.3",
|
"version": "7.2.3",
|
||||||
"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
|
"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
|
||||||
@@ -3919,29 +3757,6 @@
|
|||||||
"node": ">=0.10.0"
|
"node": ">=0.10.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/ieee754": {
|
|
||||||
"version": "1.2.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
|
|
||||||
"integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
|
|
||||||
"dev": true,
|
|
||||||
"funding": [
|
|
||||||
{
|
|
||||||
"type": "github",
|
|
||||||
"url": "https://github.com/sponsors/feross"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"type": "patreon",
|
|
||||||
"url": "https://www.patreon.com/feross"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"type": "consulting",
|
|
||||||
"url": "https://feross.org/support"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"license": "BSD-3-Clause",
|
|
||||||
"optional": true,
|
|
||||||
"peer": true
|
|
||||||
},
|
|
||||||
"node_modules/indent-string": {
|
"node_modules/indent-string": {
|
||||||
"version": "4.0.0",
|
"version": "4.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
|
||||||
@@ -3971,15 +3786,6 @@
|
|||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
"optional": true
|
"optional": true
|
||||||
},
|
},
|
||||||
"node_modules/ini": {
|
|
||||||
"version": "1.3.8",
|
|
||||||
"resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
|
|
||||||
"integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
|
|
||||||
"dev": true,
|
|
||||||
"license": "ISC",
|
|
||||||
"optional": true,
|
|
||||||
"peer": true
|
|
||||||
},
|
|
||||||
"node_modules/invariant": {
|
"node_modules/invariant": {
|
||||||
"version": "2.2.4",
|
"version": "2.2.4",
|
||||||
"resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
|
"resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
|
||||||
@@ -4307,21 +4113,6 @@
|
|||||||
"node": ">= 0.6"
|
"node": ">= 0.6"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/mimic-response": {
|
|
||||||
"version": "3.1.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
|
|
||||||
"integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==",
|
|
||||||
"dev": true,
|
|
||||||
"license": "MIT",
|
|
||||||
"optional": true,
|
|
||||||
"peer": true,
|
|
||||||
"engines": {
|
|
||||||
"node": ">=10"
|
|
||||||
},
|
|
||||||
"funding": {
|
|
||||||
"url": "https://github.com/sponsors/sindresorhus"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/min-indent": {
|
"node_modules/min-indent": {
|
||||||
"version": "1.0.1",
|
"version": "1.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
|
||||||
@@ -4345,18 +4136,6 @@
|
|||||||
"node": "*"
|
"node": "*"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/minimist": {
|
|
||||||
"version": "1.2.8",
|
|
||||||
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
|
|
||||||
"integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
|
|
||||||
"dev": true,
|
|
||||||
"license": "MIT",
|
|
||||||
"optional": true,
|
|
||||||
"peer": true,
|
|
||||||
"funding": {
|
|
||||||
"url": "https://github.com/sponsors/ljharb"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/minipass": {
|
"node_modules/minipass": {
|
||||||
"version": "5.0.0",
|
"version": "5.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/minipass/-/minipass-5.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/minipass/-/minipass-5.0.0.tgz",
|
||||||
@@ -4414,15 +4193,6 @@
|
|||||||
"node": ">=10"
|
"node": ">=10"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/mkdirp-classic": {
|
|
||||||
"version": "0.5.3",
|
|
||||||
"resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz",
|
|
||||||
"integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==",
|
|
||||||
"dev": true,
|
|
||||||
"license": "MIT",
|
|
||||||
"optional": true,
|
|
||||||
"peer": true
|
|
||||||
},
|
|
||||||
"node_modules/ms": {
|
"node_modules/ms": {
|
||||||
"version": "2.1.3",
|
"version": "2.1.3",
|
||||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
|
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
|
||||||
@@ -4523,54 +4293,6 @@
|
|||||||
"node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
|
"node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/napi-build-utils": {
|
|
||||||
"version": "2.0.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/napi-build-utils/-/napi-build-utils-2.0.0.tgz",
|
|
||||||
"integrity": "sha512-GEbrYkbfF7MoNaoh2iGG84Mnf/WZfB0GdGEsM8wz7Expx/LlWf5U8t9nvJKXSp3qr5IsEbK04cBGhol/KwOsWA==",
|
|
||||||
"dev": true,
|
|
||||||
"license": "MIT",
|
|
||||||
"optional": true,
|
|
||||||
"peer": true
|
|
||||||
},
|
|
||||||
"node_modules/node-abi": {
|
|
||||||
"version": "3.87.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.87.0.tgz",
|
|
||||||
"integrity": "sha512-+CGM1L1CgmtheLcBuleyYOn7NWPVu0s0EJH2C4puxgEZb9h8QpR9G2dBfZJOAUhi7VQxuBPMd0hiISWcTyiYyQ==",
|
|
||||||
"dev": true,
|
|
||||||
"license": "MIT",
|
|
||||||
"optional": true,
|
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
|
||||||
"semver": "^7.3.5"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": ">=10"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/node-abi/node_modules/semver": {
|
|
||||||
"version": "7.7.4",
|
|
||||||
"resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
|
|
||||||
"integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
|
|
||||||
"dev": true,
|
|
||||||
"license": "ISC",
|
|
||||||
"optional": true,
|
|
||||||
"peer": true,
|
|
||||||
"bin": {
|
|
||||||
"semver": "bin/semver.js"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": ">=10"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/node-addon-api": {
|
|
||||||
"version": "7.1.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
|
|
||||||
"integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
|
|
||||||
"dev": true,
|
|
||||||
"license": "MIT",
|
|
||||||
"optional": true,
|
|
||||||
"peer": true
|
|
||||||
},
|
|
||||||
"node_modules/node-fetch": {
|
"node_modules/node-fetch": {
|
||||||
"version": "2.7.0",
|
"version": "2.7.0",
|
||||||
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
|
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
|
||||||
@@ -4989,36 +4711,6 @@
|
|||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
"node_modules/prebuild-install": {
|
|
||||||
"version": "7.1.3",
|
|
||||||
"resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-7.1.3.tgz",
|
|
||||||
"integrity": "sha512-8Mf2cbV7x1cXPUILADGI3wuhfqWvtiLA1iclTDbFRZkgRQS0NqsPZphna9V+HyTEadheuPmjaJMsbzKQFOzLug==",
|
|
||||||
"deprecated": "No longer maintained. Please contact the author of the relevant native addon; alternatives are available.",
|
|
||||||
"dev": true,
|
|
||||||
"license": "MIT",
|
|
||||||
"optional": true,
|
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
|
||||||
"detect-libc": "^2.0.0",
|
|
||||||
"expand-template": "^2.0.3",
|
|
||||||
"github-from-package": "0.0.0",
|
|
||||||
"minimist": "^1.2.3",
|
|
||||||
"mkdirp-classic": "^0.5.3",
|
|
||||||
"napi-build-utils": "^2.0.0",
|
|
||||||
"node-abi": "^3.3.0",
|
|
||||||
"pump": "^3.0.0",
|
|
||||||
"rc": "^1.2.7",
|
|
||||||
"simple-get": "^4.0.0",
|
|
||||||
"tar-fs": "^2.0.0",
|
|
||||||
"tunnel-agent": "^0.6.0"
|
|
||||||
},
|
|
||||||
"bin": {
|
|
||||||
"prebuild-install": "bin.js"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": ">=10"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/pretty-format": {
|
"node_modules/pretty-format": {
|
||||||
"version": "27.5.1",
|
"version": "27.5.1",
|
||||||
"resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
|
"resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
|
||||||
@@ -5073,19 +4765,6 @@
|
|||||||
"url": "https://github.com/sponsors/lupomontero"
|
"url": "https://github.com/sponsors/lupomontero"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/pump": {
|
|
||||||
"version": "3.0.4",
|
|
||||||
"resolved": "https://registry.npmjs.org/pump/-/pump-3.0.4.tgz",
|
|
||||||
"integrity": "sha512-VS7sjc6KR7e1ukRFhQSY5LM2uBWAUPiOPa/A3mkKmiMwSmRFUITt0xuj+/lesgnCv+dPIEYlkzrcyXgquIHMcA==",
|
|
||||||
"dev": true,
|
|
||||||
"license": "MIT",
|
|
||||||
"optional": true,
|
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
|
||||||
"end-of-stream": "^1.1.0",
|
|
||||||
"once": "^1.3.1"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/punycode": {
|
"node_modules/punycode": {
|
||||||
"version": "2.3.1",
|
"version": "2.3.1",
|
||||||
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
|
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
|
||||||
@@ -5124,24 +4803,6 @@
|
|||||||
],
|
],
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
"node_modules/rc": {
|
|
||||||
"version": "1.2.8",
|
|
||||||
"resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
|
|
||||||
"integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
|
|
||||||
"dev": true,
|
|
||||||
"license": "(BSD-2-Clause OR MIT OR Apache-2.0)",
|
|
||||||
"optional": true,
|
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
|
||||||
"deep-extend": "^0.6.0",
|
|
||||||
"ini": "~1.3.0",
|
|
||||||
"minimist": "^1.2.0",
|
|
||||||
"strip-json-comments": "~2.0.1"
|
|
||||||
},
|
|
||||||
"bin": {
|
|
||||||
"rc": "cli.js"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/react": {
|
"node_modules/react": {
|
||||||
"version": "18.3.1",
|
"version": "18.3.1",
|
||||||
"resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
|
"resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
|
||||||
@@ -5598,34 +5259,6 @@
|
|||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"optional": true
|
"optional": true
|
||||||
},
|
},
|
||||||
"node_modules/simple-get": {
|
|
||||||
"version": "4.0.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/simple-get/-/simple-get-4.0.1.tgz",
|
|
||||||
"integrity": "sha512-brv7p5WgH0jmQJr1ZDDfKDOSeWWg+OVypG99A/5vYGPqJ6pxiaHLy8nxtFjBA7oMa01ebA9gfh1uMCFqOuXxvA==",
|
|
||||||
"dev": true,
|
|
||||||
"funding": [
|
|
||||||
{
|
|
||||||
"type": "github",
|
|
||||||
"url": "https://github.com/sponsors/feross"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"type": "patreon",
|
|
||||||
"url": "https://www.patreon.com/feross"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"type": "consulting",
|
|
||||||
"url": "https://feross.org/support"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"license": "MIT",
|
|
||||||
"optional": true,
|
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
|
||||||
"decompress-response": "^6.0.0",
|
|
||||||
"once": "^1.3.1",
|
|
||||||
"simple-concat": "^1.0.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/sonner": {
|
"node_modules/sonner": {
|
||||||
"version": "1.7.4",
|
"version": "1.7.4",
|
||||||
"resolved": "https://registry.npmjs.org/sonner/-/sonner-1.7.4.tgz",
|
"resolved": "https://registry.npmjs.org/sonner/-/sonner-1.7.4.tgz",
|
||||||
@@ -5738,18 +5371,6 @@
|
|||||||
"node": ">=8"
|
"node": ">=8"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/strip-json-comments": {
|
|
||||||
"version": "2.0.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
|
|
||||||
"integrity": "sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==",
|
|
||||||
"dev": true,
|
|
||||||
"license": "MIT",
|
|
||||||
"optional": true,
|
|
||||||
"peer": true,
|
|
||||||
"engines": {
|
|
||||||
"node": ">=0.10.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/sucrase": {
|
"node_modules/sucrase": {
|
||||||
"version": "3.35.1",
|
"version": "3.35.1",
|
||||||
"resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.1.tgz",
|
"resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.1.tgz",
|
||||||
@@ -5863,40 +5484,6 @@
|
|||||||
"node": ">=10"
|
"node": ">=10"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/tar-fs": {
|
|
||||||
"version": "2.1.4",
|
|
||||||
"resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.4.tgz",
|
|
||||||
"integrity": "sha512-mDAjwmZdh7LTT6pNleZ05Yt65HC3E+NiQzl672vQG38jIrehtJk/J3mNwIg+vShQPcLF/LV7CMnDW6vjj6sfYQ==",
|
|
||||||
"dev": true,
|
|
||||||
"license": "MIT",
|
|
||||||
"optional": true,
|
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
|
||||||
"chownr": "^1.1.1",
|
|
||||||
"mkdirp-classic": "^0.5.2",
|
|
||||||
"pump": "^3.0.0",
|
|
||||||
"tar-stream": "^2.1.4"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/tar-stream": {
|
|
||||||
"version": "2.2.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
|
|
||||||
"integrity": "sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==",
|
|
||||||
"dev": true,
|
|
||||||
"license": "MIT",
|
|
||||||
"optional": true,
|
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
|
||||||
"bl": "^4.0.3",
|
|
||||||
"end-of-stream": "^1.4.1",
|
|
||||||
"fs-constants": "^1.0.0",
|
|
||||||
"inherits": "^2.0.3",
|
|
||||||
"readable-stream": "^3.1.1"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": ">=6"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/tar/node_modules/chownr": {
|
"node_modules/tar/node_modules/chownr": {
|
||||||
"version": "2.0.0",
|
"version": "2.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
|
||||||
@@ -6084,21 +5671,6 @@
|
|||||||
"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
|
"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
|
||||||
"license": "0BSD"
|
"license": "0BSD"
|
||||||
},
|
},
|
||||||
"node_modules/tunnel-agent": {
|
|
||||||
"version": "0.6.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
|
|
||||||
"integrity": "sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==",
|
|
||||||
"dev": true,
|
|
||||||
"license": "Apache-2.0",
|
|
||||||
"optional": true,
|
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
|
||||||
"safe-buffer": "^5.0.1"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": "*"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/type-fest": {
|
"node_modules/type-fest": {
|
||||||
"version": "5.4.4",
|
"version": "5.4.4",
|
||||||
"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-5.4.4.tgz",
|
"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-5.4.4.tgz",
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import { useState, useEffect, useRef } from 'react';
|
import { useState, useEffect, useRef } from 'react';
|
||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import { FileText, Moon, Sun, Menu, X, ChevronDown, UserRound, Coins } from 'lucide-react';
|
import { FileText, Moon, Sun, Menu, X, ChevronDown, UserRound, Coins, ArrowRight } from 'lucide-react';
|
||||||
import { useAuthStore } from '@/stores/authStore';
|
import { useAuthStore } from '@/stores/authStore';
|
||||||
import { ensureLanguageResources } from '@/i18n';
|
import { ensureLanguageResources } from '@/i18n';
|
||||||
interface LangOption {
|
interface LangOption {
|
||||||
@@ -67,49 +67,54 @@ export default function Header() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<header className="sticky top-0 z-50 border-b border-slate-200 bg-white/80 backdrop-blur-lg dark:border-slate-700 dark:bg-slate-900/80">
|
<header className="sticky top-0 z-50 border-b border-slate-200/80 bg-white/85 backdrop-blur-xl dark:border-slate-700/60 dark:bg-slate-900/85">
|
||||||
<div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
|
<div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
|
||||||
{/* Logo */}
|
{/* Logo */}
|
||||||
<Link to="/" className="flex items-center gap-2 text-xl font-bold text-primary-600 dark:text-primary-400">
|
<Link to="/" className="flex items-center gap-2.5 group">
|
||||||
<FileText className="h-7 w-7" />
|
<div className="flex h-9 w-9 items-center justify-center rounded-xl bg-primary-600 shadow-sm shadow-primary-200 group-hover:bg-primary-700 transition-colors dark:shadow-primary-900/40">
|
||||||
<span>{t('common.appName')}</span>
|
<FileText className="h-5 w-5 text-white" />
|
||||||
|
</div>
|
||||||
|
<span className="text-lg font-extrabold tracking-tight text-slate-900 dark:text-white">
|
||||||
|
{t('common.appName')}
|
||||||
|
</span>
|
||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
{/* Desktop Navigation */}
|
{/* Desktop Navigation */}
|
||||||
<nav className="hidden items-center gap-6 md:flex">
|
<nav className="hidden items-center gap-1 md:flex">
|
||||||
<Link
|
<Link
|
||||||
to="/"
|
to="/"
|
||||||
className="text-sm font-medium text-slate-600 transition-colors hover:text-primary-600 dark:text-slate-300 dark:hover:text-primary-400"
|
className="rounded-lg px-3 py-2 text-sm font-medium text-slate-600 transition-colors hover:bg-slate-100 hover:text-slate-900 dark:text-slate-300 dark:hover:bg-slate-800 dark:hover:text-white"
|
||||||
>
|
>
|
||||||
{t('common.home')}
|
{t('common.home')}
|
||||||
</Link>
|
</Link>
|
||||||
<Link
|
<Link
|
||||||
to="/about"
|
to="/pricing"
|
||||||
className="text-sm font-medium text-slate-600 transition-colors hover:text-primary-600 dark:text-slate-300 dark:hover:text-primary-400"
|
className="rounded-lg px-3 py-2 text-sm font-medium text-slate-600 transition-colors hover:bg-slate-100 hover:text-slate-900 dark:text-slate-300 dark:hover:bg-slate-800 dark:hover:text-white"
|
||||||
>
|
>
|
||||||
{t('common.about')}
|
{t('common.pricing')}
|
||||||
</Link>
|
|
||||||
<Link
|
|
||||||
to="/account"
|
|
||||||
className="text-sm font-medium text-slate-600 transition-colors hover:text-primary-600 dark:text-slate-300 dark:hover:text-primary-400"
|
|
||||||
>
|
|
||||||
{t('common.account')}
|
|
||||||
</Link>
|
</Link>
|
||||||
<Link
|
<Link
|
||||||
to="/developers"
|
to="/developers"
|
||||||
className="text-sm font-medium text-slate-600 transition-colors hover:text-primary-600 dark:text-slate-300 dark:hover:text-primary-400"
|
className="rounded-lg px-3 py-2 text-sm font-medium text-slate-600 transition-colors hover:bg-slate-100 hover:text-slate-900 dark:text-slate-300 dark:hover:bg-slate-800 dark:hover:text-white"
|
||||||
>
|
>
|
||||||
{t('common.developers')}
|
{t('common.developers')}
|
||||||
</Link>
|
</Link>
|
||||||
|
<Link
|
||||||
|
to="/about"
|
||||||
|
className="rounded-lg px-3 py-2 text-sm font-medium text-slate-600 transition-colors hover:bg-slate-100 hover:text-slate-900 dark:text-slate-300 dark:hover:bg-slate-800 dark:hover:text-white"
|
||||||
|
>
|
||||||
|
{t('common.about')}
|
||||||
|
</Link>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
{/* Actions */}
|
{/* Actions */}
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
|
{/* Account / credits pill */}
|
||||||
<Link
|
<Link
|
||||||
to="/account"
|
to="/account"
|
||||||
className="hidden max-w-[220px] items-center gap-2 rounded-xl border border-slate-200 px-3 py-2 text-sm font-medium text-slate-600 transition-colors hover:bg-slate-50 md:flex dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-800"
|
className="hidden max-w-[200px] items-center gap-2 rounded-xl border border-slate-200 px-3 py-2 text-sm font-medium text-slate-600 transition-colors hover:bg-slate-50 md:flex dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-800"
|
||||||
>
|
>
|
||||||
<UserRound className="h-4 w-4" />
|
<UserRound className="h-4 w-4 flex-shrink-0" />
|
||||||
<span className="truncate">{user?.email || t('common.account')}</span>
|
<span className="truncate">{user?.email || t('common.account')}</span>
|
||||||
{user && credits && (
|
{user && credits && (
|
||||||
<span className="flex items-center gap-1 rounded-full bg-primary-100 px-2 py-0.5 text-xs font-semibold text-primary-700 dark:bg-primary-900/30 dark:text-primary-300">
|
<span className="flex items-center gap-1 rounded-full bg-primary-100 px-2 py-0.5 text-xs font-semibold text-primary-700 dark:bg-primary-900/30 dark:text-primary-300">
|
||||||
@@ -119,6 +124,17 @@ export default function Header() {
|
|||||||
)}
|
)}
|
||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
|
{/* CTA — Start Free */}
|
||||||
|
{!user && (
|
||||||
|
<Link
|
||||||
|
to="/account"
|
||||||
|
className="hidden md:inline-flex items-center gap-1.5 rounded-xl bg-primary-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm shadow-primary-200 transition-all hover:bg-primary-700 hover:shadow-md hover:-translate-y-px active:translate-y-0 dark:shadow-primary-900/40"
|
||||||
|
>
|
||||||
|
{t('home.startFree', 'Start Free')}
|
||||||
|
<ArrowRight className="h-3.5 w-3.5" />
|
||||||
|
</Link>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* Dark Mode Toggle */}
|
{/* Dark Mode Toggle */}
|
||||||
<button
|
<button
|
||||||
onClick={toggleDark}
|
onClick={toggleDark}
|
||||||
@@ -190,6 +206,13 @@ export default function Header() {
|
|||||||
>
|
>
|
||||||
{t('common.home')}
|
{t('common.home')}
|
||||||
</Link>
|
</Link>
|
||||||
|
<Link
|
||||||
|
to="/pricing"
|
||||||
|
onClick={() => setMobileOpen(false)}
|
||||||
|
className="block rounded-lg px-3 py-2.5 text-sm font-medium text-slate-600 transition-colors hover:bg-slate-50 dark:text-slate-300 dark:hover:bg-slate-800"
|
||||||
|
>
|
||||||
|
{t('common.pricing')}
|
||||||
|
</Link>
|
||||||
<Link
|
<Link
|
||||||
to="/about"
|
to="/about"
|
||||||
onClick={() => setMobileOpen(false)}
|
onClick={() => setMobileOpen(false)}
|
||||||
@@ -217,6 +240,16 @@ export default function Header() {
|
|||||||
>
|
>
|
||||||
{t('common.developers')}
|
{t('common.developers')}
|
||||||
</Link>
|
</Link>
|
||||||
|
{!user && (
|
||||||
|
<Link
|
||||||
|
to="/account"
|
||||||
|
onClick={() => setMobileOpen(false)}
|
||||||
|
className="mt-2 flex items-center justify-center gap-2 rounded-xl bg-primary-600 px-4 py-3 text-sm font-semibold text-white hover:bg-primary-700"
|
||||||
|
>
|
||||||
|
{t('home.startFree', 'Start Free')}
|
||||||
|
<ArrowRight className="h-4 w-4" />
|
||||||
|
</Link>
|
||||||
|
)}
|
||||||
</nav>
|
</nav>
|
||||||
)}
|
)}
|
||||||
</header>
|
</header>
|
||||||
|
|||||||
@@ -2,7 +2,7 @@ import { useState, useCallback } from 'react';
|
|||||||
import { useDropzone } from 'react-dropzone';
|
import { useDropzone } from 'react-dropzone';
|
||||||
import { useNavigate } from 'react-router-dom';
|
import { useNavigate } from 'react-router-dom';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import { UploadCloud, Sparkles, PenLine } from 'lucide-react';
|
import { UploadCloud, PenLine, ChevronRight, FileCheck } from 'lucide-react';
|
||||||
import ToolSelectorModal from '@/components/shared/ToolSelectorModal';
|
import ToolSelectorModal from '@/components/shared/ToolSelectorModal';
|
||||||
import { useFileStore } from '@/stores/fileStore';
|
import { useFileStore } from '@/stores/fileStore';
|
||||||
import { getToolsForFile, detectFileCategory, getCategoryLabel } from '@/utils/fileRouting';
|
import { getToolsForFile, detectFileCategory, getCategoryLabel } from '@/utils/fileRouting';
|
||||||
@@ -24,6 +24,15 @@ const ACCEPTED_TYPES = {
|
|||||||
'application/vnd.openxmlformats-officedocument.wordprocessingml.document': ['.docx'],
|
'application/vnd.openxmlformats-officedocument.wordprocessingml.document': ['.docx'],
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const FORMAT_BADGES = [
|
||||||
|
{ label: 'PDF', color: 'bg-red-50 text-red-700 ring-red-100 dark:bg-red-900/20 dark:text-red-400 dark:ring-red-800/40' },
|
||||||
|
{ label: 'Word', color: 'bg-blue-50 text-blue-700 ring-blue-100 dark:bg-blue-900/20 dark:text-blue-400 dark:ring-blue-800/40' },
|
||||||
|
{ label: 'JPG', color: 'bg-amber-50 text-amber-700 ring-amber-100 dark:bg-amber-900/20 dark:text-amber-400 dark:ring-amber-800/40' },
|
||||||
|
{ label: 'PNG', color: 'bg-green-50 text-green-700 ring-green-100 dark:bg-green-900/20 dark:text-green-400 dark:ring-green-800/40' },
|
||||||
|
{ label: 'WebP', color: 'bg-violet-50 text-violet-700 ring-violet-100 dark:bg-violet-900/20 dark:text-violet-400 dark:ring-violet-800/40' },
|
||||||
|
{ label: 'MP4', color: 'bg-slate-100 text-slate-600 ring-slate-200 dark:bg-slate-700 dark:text-slate-300 dark:ring-slate-600' },
|
||||||
|
];
|
||||||
|
|
||||||
export default function HeroUploadZone() {
|
export default function HeroUploadZone() {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
@@ -81,6 +90,16 @@ export default function HeroUploadZone() {
|
|||||||
setMatchedTools([]);
|
setMatchedTools([]);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
const iconGlowClass = isDragActive
|
||||||
|
? 'bg-primary-300/50 scale-125'
|
||||||
|
: 'bg-primary-100/0 group-hover:bg-primary-200/40 group-hover:scale-110';
|
||||||
|
const iconContainerClass = isDragActive
|
||||||
|
? 'bg-primary-100 shadow-primary-200 dark:bg-primary-900/50'
|
||||||
|
: 'bg-primary-50 shadow-sm dark:bg-slate-700/80';
|
||||||
|
const uploadIconClass = isDragActive
|
||||||
|
? 'text-primary-600 dark:text-primary-400'
|
||||||
|
: 'text-primary-400 group-hover:text-primary-600 dark:text-primary-500 dark:group-hover:text-primary-400';
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="mx-auto mt-8 max-w-2xl">
|
<div className="mx-auto mt-8 max-w-2xl">
|
||||||
@@ -90,38 +109,30 @@ export default function HeroUploadZone() {
|
|||||||
>
|
>
|
||||||
<input {...getInputProps()} />
|
<input {...getInputProps()} />
|
||||||
|
|
||||||
{/* Animated icon */}
|
{/* Cloud icon with animated ring */}
|
||||||
<div
|
<div className="relative mb-6">
|
||||||
className={`mb-5 flex h-20 w-20 items-center justify-center rounded-2xl shadow-sm transition-all duration-300 group-hover:-translate-y-2 ${
|
{/* Outer glow ring */}
|
||||||
isDragActive
|
<div className={`absolute inset-0 rounded-3xl blur-xl transition-all duration-500 ${iconGlowClass}`} />
|
||||||
? 'bg-primary-100 shadow-glow dark:bg-primary-900/40'
|
<div className={`relative flex h-20 w-20 items-center justify-center rounded-2xl transition-all duration-300 group-hover:-translate-y-2 group-hover:shadow-lg ${iconContainerClass}`}>
|
||||||
: 'bg-white dark:bg-slate-700/60'
|
<UploadCloud className={`h-10 w-10 transition-colors duration-300 ${uploadIconClass}`} />
|
||||||
}`}
|
</div>
|
||||||
>
|
|
||||||
<UploadCloud
|
|
||||||
className={`h-10 w-10 transition-colors duration-300 ${
|
|
||||||
isDragActive
|
|
||||||
? 'text-primary-600 dark:text-primary-400'
|
|
||||||
: 'text-slate-400 group-hover:text-primary-500 dark:text-slate-400 dark:group-hover:text-primary-400'
|
|
||||||
}`}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Heading */}
|
{/* Heading */}
|
||||||
<h3 className="mb-1.5 text-lg font-semibold text-slate-800 dark:text-slate-100">
|
<h3 className="mb-2 text-xl font-bold text-slate-800 dark:text-slate-100">
|
||||||
{isDragActive
|
{isDragActive
|
||||||
? t('home.dropFileHere', 'Drop your file here…')
|
? t('home.dropFileHere', 'Drop your file here…')
|
||||||
: t('home.dragDropTitle', 'Drag & drop your file here')}
|
: t('home.dragDropTitle', 'Drag & drop your file here')}
|
||||||
</h3>
|
</h3>
|
||||||
<p className="mb-6 text-sm text-slate-500 dark:text-slate-400">
|
<p className="mb-7 text-sm text-slate-500 dark:text-slate-400">
|
||||||
{t('common.dragDrop', 'or click the button to browse from your device')}
|
{t('common.dragDrop', 'or click the button to browse from your device')}
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
{/* CTA Buttons */}
|
{/* CTA Buttons */}
|
||||||
<div className="mb-5 flex gap-3 justify-center z-10 relative flex-wrap">
|
<div className="relative z-10 mb-6 flex flex-wrap items-center justify-center gap-3">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="px-6 py-2.5 bg-primary-600 hover:bg-primary-700 active:scale-95 text-white font-semibold rounded-full shadow-md hover:shadow-lg transition-all duration-200"
|
className="inline-flex items-center gap-2 rounded-xl bg-primary-600 px-7 py-3 text-sm font-semibold text-white shadow-md shadow-primary-200 transition-all duration-200 hover:bg-primary-700 hover:shadow-lg hover:-translate-y-px active:translate-y-0 dark:shadow-primary-900/40"
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
const input = document.createElement('input');
|
const input = document.createElement('input');
|
||||||
@@ -135,9 +146,11 @@ export default function HeroUploadZone() {
|
|||||||
input.click();
|
input.click();
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
<FileCheck className="h-4 w-4" />
|
||||||
{t('home.uploadCta', 'Choose File')}
|
{t('home.uploadCta', 'Choose File')}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
|
type="button"
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
const input = document.createElement('input');
|
const input = document.createElement('input');
|
||||||
@@ -153,28 +166,37 @@ export default function HeroUploadZone() {
|
|||||||
};
|
};
|
||||||
input.click();
|
input.click();
|
||||||
}}
|
}}
|
||||||
className="px-6 py-2.5 bg-slate-900 hover:bg-slate-700 active:scale-95 text-white font-semibold rounded-full shadow-md hover:shadow-lg transition-all duration-200 flex items-center gap-2 dark:bg-slate-700 dark:hover:bg-slate-600"
|
className="inline-flex items-center gap-2 rounded-xl border border-slate-200 bg-white px-6 py-3 text-sm font-semibold text-slate-700 shadow-sm transition-all duration-200 hover:border-slate-300 hover:bg-slate-50 hover:shadow-md hover:-translate-y-px active:translate-y-0 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-200 dark:hover:border-slate-500 dark:hover:bg-slate-700"
|
||||||
>
|
>
|
||||||
<PenLine className="h-4 w-4" />
|
<PenLine className="h-4 w-4" />
|
||||||
{t('home.editNow')}
|
{t('home.editNow')}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Supported formats */}
|
{/* Divider */}
|
||||||
|
<div className="mb-5 flex items-center gap-3 w-full max-w-xs">
|
||||||
|
<div className="flex-1 h-px bg-slate-200 dark:bg-slate-700" />
|
||||||
|
<span className="text-xs text-slate-400 dark:text-slate-500 font-medium">
|
||||||
|
{t('home.supportedFormats', 'Supported formats')}
|
||||||
|
</span>
|
||||||
|
<div className="flex-1 h-px bg-slate-200 dark:bg-slate-700" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Coloured format badges */}
|
||||||
<div className="flex flex-wrap items-center justify-center gap-2">
|
<div className="flex flex-wrap items-center justify-center gap-2">
|
||||||
{['PDF', 'Word', 'JPG', 'PNG', 'WebP', 'MP4'].map((format) => (
|
{FORMAT_BADGES.map(({ label, color }) => (
|
||||||
<span
|
<span
|
||||||
key={format}
|
key={label}
|
||||||
className="rounded-full bg-slate-100 px-3 py-1 text-xs font-medium text-slate-600 dark:bg-slate-700 dark:text-slate-300"
|
className={`rounded-lg px-3 py-1 text-xs font-semibold ring-1 ${color}`}
|
||||||
>
|
>
|
||||||
{format}
|
{label}
|
||||||
</span>
|
</span>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* File size hint */}
|
{/* Size hint */}
|
||||||
<p className="mt-4 flex items-center justify-center gap-1.5 text-xs text-slate-400 dark:text-slate-500">
|
<p className="mt-4 flex items-center justify-center gap-1.5 text-xs text-slate-400 dark:text-slate-500">
|
||||||
<Sparkles className="h-3.5 w-3.5" />
|
<ChevronRight className="h-3 w-3" />
|
||||||
{t('home.uploadSubtitle')}
|
{t('home.uploadSubtitle')}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
import type { ReactNode } from 'react';
|
import type { ReactNode } from 'react';
|
||||||
|
import { ArrowRight } from 'lucide-react';
|
||||||
|
|
||||||
interface ToolCardProps {
|
interface ToolCardProps {
|
||||||
/** Tool route path */
|
/** Tool route path */
|
||||||
@@ -23,18 +24,28 @@ export default function ToolCard({
|
|||||||
}: ToolCardProps) {
|
}: ToolCardProps) {
|
||||||
return (
|
return (
|
||||||
<Link to={to} className="group block h-full">
|
<Link to={to} className="group block h-full">
|
||||||
<div className="flex h-full flex-col gap-3 rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200 transition-all duration-200 hover:-translate-y-1 hover:shadow-md hover:ring-primary-300 dark:bg-slate-800 dark:ring-slate-700 dark:hover:ring-primary-500">
|
<div className="relative flex h-full flex-col gap-3 overflow-hidden rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200/80 transition-all duration-200 hover:-translate-y-1 hover:shadow-lg hover:shadow-slate-200/60 hover:ring-primary-200 dark:bg-slate-800/80 dark:ring-slate-700 dark:hover:ring-primary-700/60 dark:hover:shadow-slate-900/60">
|
||||||
<div className="flex items-center gap-4">
|
{/* Top color accent bar — slides in on hover */}
|
||||||
|
<div className="absolute inset-x-0 top-0 h-[3px] origin-left scale-x-0 rounded-t-2xl bg-gradient-to-r from-primary-500 to-accent-500 transition-transform duration-300 group-hover:scale-x-100" />
|
||||||
|
|
||||||
|
<div className="flex items-start justify-between gap-3">
|
||||||
|
{/* Icon + title */}
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
<div
|
<div
|
||||||
className={`flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-xl transition-colors ${bgColor} dark:bg-slate-700 dark:group-hover:bg-slate-600`}
|
className={`flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-xl ring-1 ring-black/5 transition-transform duration-200 group-hover:scale-110 ${bgColor} dark:ring-white/5 dark:brightness-90`}
|
||||||
>
|
>
|
||||||
{icon}
|
{icon}
|
||||||
</div>
|
</div>
|
||||||
<h3 className="text-base font-bold text-slate-900 transition-colors group-hover:text-primary-600 dark:text-slate-100 dark:group-hover:text-primary-400">
|
<h3 className="text-sm font-bold leading-snug text-slate-800 transition-colors group-hover:text-primary-700 dark:text-slate-100 dark:group-hover:text-primary-400">
|
||||||
{title}
|
{title}
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
<p className="text-sm text-slate-500 line-clamp-2 dark:text-slate-400 mt-1">
|
|
||||||
|
{/* Arrow indicator */}
|
||||||
|
<ArrowRight className="mt-0.5 h-4 w-4 flex-shrink-0 text-slate-300 transition-all duration-200 group-hover:translate-x-0.5 group-hover:text-primary-500 dark:text-slate-600 dark:group-hover:text-primary-400" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-xs leading-relaxed text-slate-500 line-clamp-2 dark:text-slate-400">
|
||||||
{description}
|
{description}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
import { useDeferredValue } from 'react';
|
import { useDeferredValue } from 'react';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import { useSearchParams } from 'react-router-dom';
|
import { useSearchParams } from 'react-router-dom';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
import SEOHead from '@/components/seo/SEOHead';
|
import SEOHead from '@/components/seo/SEOHead';
|
||||||
import { generateOrganization, generateWebSite, getSiteOrigin } from '@/utils/seo';
|
import { generateOrganization, generateWebSite, getSiteOrigin } from '@/utils/seo';
|
||||||
import {
|
import {
|
||||||
@@ -38,6 +39,15 @@ import {
|
|||||||
Wrench,
|
Wrench,
|
||||||
Presentation,
|
Presentation,
|
||||||
Barcode,
|
Barcode,
|
||||||
|
ShieldCheck,
|
||||||
|
Zap,
|
||||||
|
Globe,
|
||||||
|
UploadCloud,
|
||||||
|
MousePointerClick,
|
||||||
|
Download,
|
||||||
|
ArrowRight,
|
||||||
|
Star,
|
||||||
|
CheckCircle2,
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
import ToolCard from '@/components/shared/ToolCard';
|
import ToolCard from '@/components/shared/ToolCard';
|
||||||
import HeroUploadZone from '@/components/shared/HeroUploadZone';
|
import HeroUploadZone from '@/components/shared/HeroUploadZone';
|
||||||
@@ -78,6 +88,39 @@ function manifestToToolInfo(tools: readonly ToolEntry[]): ToolInfo[] {
|
|||||||
const pdfTools: ToolInfo[] = manifestToToolInfo(getHomepageTools('pdf'));
|
const pdfTools: ToolInfo[] = manifestToToolInfo(getHomepageTools('pdf'));
|
||||||
const otherTools: ToolInfo[] = manifestToToolInfo(getHomepageTools('other'));
|
const otherTools: ToolInfo[] = manifestToToolInfo(getHomepageTools('other'));
|
||||||
|
|
||||||
|
const HOW_IT_WORKS = [
|
||||||
|
{
|
||||||
|
step: '01',
|
||||||
|
icon: UploadCloud,
|
||||||
|
titleKey: 'home.howStep1Title',
|
||||||
|
titleDefault: 'Upload your file',
|
||||||
|
descKey: 'home.howStep1Desc',
|
||||||
|
descDefault: 'Drag & drop or click to select. PDF, Word, images and more — up to 200 MB.',
|
||||||
|
color: 'bg-blue-600',
|
||||||
|
glow: 'shadow-blue-200 dark:shadow-blue-900/40',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
step: '02',
|
||||||
|
icon: MousePointerClick,
|
||||||
|
titleKey: 'home.howStep2Title',
|
||||||
|
titleDefault: 'Choose a tool',
|
||||||
|
descKey: 'home.howStep2Desc',
|
||||||
|
descDefault: 'We detect your file type and suggest the best tools automatically.',
|
||||||
|
color: 'bg-violet-600',
|
||||||
|
glow: 'shadow-violet-200 dark:shadow-violet-900/40',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
step: '03',
|
||||||
|
icon: Download,
|
||||||
|
titleKey: 'home.howStep3Title',
|
||||||
|
titleDefault: 'Download instantly',
|
||||||
|
descKey: 'home.howStep3Desc',
|
||||||
|
descDefault: 'Your file is ready in seconds. No account needed — files are auto-deleted.',
|
||||||
|
color: 'bg-emerald-600',
|
||||||
|
glow: 'shadow-emerald-200 dark:shadow-emerald-900/40',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
export default function HomePage() {
|
export default function HomePage() {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const siteOrigin = getSiteOrigin(typeof window !== 'undefined' ? window.location.origin : '');
|
const siteOrigin = getSiteOrigin(typeof window !== 'undefined' ? window.location.origin : '');
|
||||||
@@ -122,41 +165,103 @@ export default function HomePage() {
|
|||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* Hero Section */}
|
{/* ── Hero Section ──────────────────────────────────────────── */}
|
||||||
<section className="py-16 sm:py-24 bg-gradient-to-b from-slate-50 via-white to-white dark:from-slate-900 dark:via-slate-950 dark:to-slate-950 px-4 mb-10 rounded-b-[3rem]">
|
<section className="hero-gradient-bg relative overflow-hidden py-16 sm:py-24 px-4 mb-10 rounded-b-[3rem]">
|
||||||
<div className="max-w-4xl mx-auto text-center">
|
{/* Decorative blobs */}
|
||||||
{/* Badge */}
|
<div className="pointer-events-none absolute -top-32 left-1/2 h-[600px] w-[600px] -translate-x-1/2 rounded-full bg-primary-400/10 blur-3xl dark:bg-primary-600/10" />
|
||||||
<div className="inline-flex items-center gap-2 rounded-full bg-primary-50 border border-primary-100 px-4 py-1.5 mb-6 dark:bg-primary-900/30 dark:border-primary-800">
|
<div className="pointer-events-none absolute top-0 right-0 h-80 w-80 rounded-full bg-accent-400/8 blur-3xl dark:bg-accent-600/8" />
|
||||||
|
|
||||||
|
<div className="relative max-w-4xl mx-auto text-center">
|
||||||
|
{/* Animated badge */}
|
||||||
|
<div className="inline-flex items-center gap-2 rounded-full border border-primary-200 bg-primary-50 px-4 py-1.5 mb-6 dark:border-primary-800 dark:bg-primary-900/30">
|
||||||
<span className="h-2 w-2 rounded-full bg-primary-500 animate-pulse" />
|
<span className="h-2 w-2 rounded-full bg-primary-500 animate-pulse" />
|
||||||
<span className="text-xs font-semibold text-primary-700 dark:text-primary-300 uppercase tracking-wide">
|
<span className="text-xs font-semibold uppercase tracking-widest text-primary-700 dark:text-primary-300">
|
||||||
{t('home.heroBadge', 'Free Online PDF Tools')}
|
{t('home.heroBadge', 'Free Online PDF & File Tools')}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h1 className="text-4xl font-extrabold tracking-tight text-slate-900 sm:text-6xl lg:text-7xl dark:text-white mb-6 leading-[1.1]">
|
<h1 className="text-4xl font-extrabold tracking-tight text-slate-900 sm:text-6xl lg:text-7xl dark:text-white mb-6 leading-[1.1]">
|
||||||
{t('home.hero')}
|
{t('home.hero')}
|
||||||
</h1>
|
</h1>
|
||||||
<p className="mx-auto max-w-2xl text-lg text-slate-500 dark:text-slate-400 mb-10 leading-relaxed">
|
<p className="mx-auto max-w-2xl text-lg text-slate-500 dark:text-slate-400 mb-4 leading-relaxed">
|
||||||
{t('home.heroSub')}
|
{t('home.heroSub')}
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
{/* Trust strip */}
|
||||||
|
<div className="flex flex-wrap items-center justify-center gap-x-6 gap-y-2 mb-10">
|
||||||
|
{[
|
||||||
|
{ icon: ShieldCheck, text: t('home.trustNoSignup', 'No sign-up needed') },
|
||||||
|
{ icon: Zap, text: t('home.trustFast', 'Results in seconds') },
|
||||||
|
{ icon: Lock, text: t('home.trustSecure', 'Files auto-deleted') },
|
||||||
|
{ icon: Globe, text: t('home.trust30Tools', '30+ free tools') },
|
||||||
|
].map(({ icon: Icon, text }) => (
|
||||||
|
<div key={text} className="flex items-center gap-1.5 text-sm text-slate-500 dark:text-slate-400">
|
||||||
|
<Icon className="h-4 w-4 text-primary-500 flex-shrink-0" />
|
||||||
|
<span>{text}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Smart Upload Zone */}
|
{/* Smart Upload Zone */}
|
||||||
<HeroUploadZone />
|
<HeroUploadZone />
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* Ad Slot */}
|
{/* ── Ad Slot ───────────────────────────────────────────────── */}
|
||||||
<AdSlot slot="home-top" format="horizontal" className="mb-8" />
|
<AdSlot slot="home-top" format="horizontal" className="mb-8" />
|
||||||
|
|
||||||
|
{/* ── Social Proof Strip ────────────────────────────────────── */}
|
||||||
<SocialProofStrip className="mb-10" />
|
<SocialProofStrip className="mb-10" />
|
||||||
|
|
||||||
<section className="mb-10 rounded-3xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-700 dark:bg-slate-900/70">
|
{/* ── How It Works ──────────────────────────────────────────── */}
|
||||||
|
<section className="mb-14 px-2">
|
||||||
|
<div className="mb-10 text-center">
|
||||||
|
<p className="mb-2 text-xs font-bold uppercase tracking-[0.2em] text-primary-600 dark:text-primary-400">
|
||||||
|
{t('home.howItWorksLabel', 'Simple process')}
|
||||||
|
</p>
|
||||||
|
<h2 className="text-3xl font-extrabold tracking-tight text-slate-900 dark:text-white">
|
||||||
|
{t('home.howItWorksTitle', 'Convert & edit in 3 steps')}
|
||||||
|
</h2>
|
||||||
|
<p className="mt-3 text-slate-500 dark:text-slate-400 max-w-xl mx-auto">
|
||||||
|
{t('home.howItWorksSubtitle', 'No account, no installation, no waiting. Just upload, choose a tool, and download.')}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="relative grid gap-6 sm:grid-cols-3">
|
||||||
|
{HOW_IT_WORKS.map(({ step, icon: Icon, titleKey, titleDefault, descKey, descDefault, color, glow }, idx) => (
|
||||||
|
<div key={step} className="relative">
|
||||||
|
{/* Connector line (between steps, hidden on mobile) */}
|
||||||
|
{idx < HOW_IT_WORKS.length - 1 && (
|
||||||
|
<div className="step-connector" />
|
||||||
|
)}
|
||||||
|
<div className="flex flex-col items-center text-center rounded-2xl bg-white p-7 shadow-sm ring-1 ring-slate-200/80 dark:bg-slate-800/70 dark:ring-slate-700/60">
|
||||||
|
{/* Numbered icon */}
|
||||||
|
<div className={`relative mb-5 flex h-16 w-16 items-center justify-center rounded-2xl ${color} shadow-lg ${glow} text-white`}>
|
||||||
|
<Icon className="h-8 w-8" />
|
||||||
|
<span className="absolute -right-2 -top-2 flex h-6 w-6 items-center justify-center rounded-full bg-white text-xs font-black text-slate-700 shadow-sm ring-1 ring-slate-200 dark:bg-slate-700 dark:text-slate-200 dark:ring-slate-600">
|
||||||
|
{parseInt(step, 10)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<h3 className="mb-2 text-base font-bold text-slate-900 dark:text-white">
|
||||||
|
{t(titleKey, titleDefault)}
|
||||||
|
</h3>
|
||||||
|
<p className="text-sm leading-relaxed text-slate-500 dark:text-slate-400">
|
||||||
|
{t(descKey, descDefault)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── Search & Tools ────────────────────────────────────────── */}
|
||||||
|
<section className="mb-8 rounded-3xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-700 dark:bg-slate-900/70">
|
||||||
<div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
|
<div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
|
||||||
<div>
|
<div>
|
||||||
<h2 className="text-xl font-semibold text-slate-900 dark:text-white">
|
<h2 className="text-xl font-semibold text-slate-900 dark:text-white">
|
||||||
{t('common.search')}
|
{t('common.search')}
|
||||||
</h2>
|
</h2>
|
||||||
<p className="mt-1 text-sm text-slate-600 dark:text-slate-400">
|
<p className="mt-1 text-sm text-slate-500 dark:text-slate-400">
|
||||||
{t('home.searchToolsPlaceholder')}
|
{t('home.searchToolsPlaceholder')}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -184,41 +289,17 @@ export default function HomePage() {
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section className="mb-12 rounded-[2rem] border border-slate-200 bg-white p-8 shadow-sm dark:border-slate-700 dark:bg-slate-900/70">
|
{/* ── PDF Tools Grid ────────────────────────────────────────── */}
|
||||||
<div className="flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
|
<section className="mb-12">
|
||||||
<div className="max-w-2xl">
|
<div className="mb-6 flex items-center justify-between">
|
||||||
<p className="text-sm font-semibold uppercase tracking-[0.2em] text-primary-600 dark:text-primary-400">
|
<h2 className="text-xl font-bold text-slate-800 dark:text-slate-200">
|
||||||
{t('common.developers')}
|
|
||||||
</p>
|
|
||||||
<h2 className="mt-2 text-2xl font-bold text-slate-900 dark:text-white">
|
|
||||||
{t('pages.developers.ctaTitle')}
|
|
||||||
</h2>
|
|
||||||
<p className="mt-2 text-slate-600 dark:text-slate-400">
|
|
||||||
{t('pages.developers.ctaSubtitle')}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col gap-3 sm:flex-row">
|
|
||||||
<a
|
|
||||||
href="/developers"
|
|
||||||
className="inline-flex items-center justify-center rounded-xl bg-primary-600 px-5 py-3 text-sm font-semibold text-white transition-colors hover:bg-primary-700"
|
|
||||||
>
|
|
||||||
{t('pages.developers.openDocs')}
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="/account"
|
|
||||||
className="inline-flex items-center justify-center rounded-xl border border-slate-200 px-5 py-3 text-sm font-semibold text-slate-700 transition-colors hover:bg-slate-50 dark:border-slate-700 dark:text-slate-200 dark:hover:bg-slate-800"
|
|
||||||
>
|
|
||||||
{t('pages.developers.getApiKey')}
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* Tools Grid */}
|
|
||||||
<section>
|
|
||||||
<h2 className="mb-6 text-center text-xl font-semibold text-slate-800 dark:text-slate-200">
|
|
||||||
{t('home.pdfTools')}
|
{t('home.pdfTools')}
|
||||||
</h2>
|
</h2>
|
||||||
|
<Link to="/tools" className="flex items-center gap-1 text-sm font-medium text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300">
|
||||||
|
{t('common.allTools')}
|
||||||
|
<ArrowRight className="h-3.5 w-3.5" />
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mb-10">
|
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mb-10">
|
||||||
{filteredPdfTools.map((tool) => (
|
{filteredPdfTools.map((tool) => (
|
||||||
<ToolCard
|
<ToolCard
|
||||||
@@ -232,7 +313,7 @@ export default function HomePage() {
|
|||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h2 className="mb-6 text-center text-xl font-semibold text-slate-800 dark:text-slate-200">
|
<h2 className="mb-6 text-xl font-bold text-slate-800 dark:text-slate-200">
|
||||||
{t('home.otherTools', 'Other Tools')}
|
{t('home.otherTools', 'Other Tools')}
|
||||||
</h2>
|
</h2>
|
||||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mb-12">
|
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mb-12">
|
||||||
@@ -257,49 +338,149 @@ export default function HomePage() {
|
|||||||
)}
|
)}
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* Features / Why Choose Us */}
|
{/* ── Features / Why Choose Us ──────────────────────────────── */}
|
||||||
<section className="py-16 bg-slate-50 dark:bg-slate-900 rounded-3xl mb-12 px-6 sm:px-12 text-center">
|
<section className="mb-14 overflow-hidden rounded-3xl bg-slate-50 px-6 py-16 dark:bg-slate-900 sm:px-12">
|
||||||
<h2 className="text-3xl font-bold tracking-tight text-slate-900 dark:text-white mb-10">
|
<div className="mb-12 text-center">
|
||||||
{t('home.featuresTitle', 'A smarter way to convert and edit online')}
|
<p className="mb-2 text-xs font-bold uppercase tracking-[0.2em] text-primary-600 dark:text-primary-400">
|
||||||
|
{t('home.whyChooseLabel', 'Why Dociva')}
|
||||||
|
</p>
|
||||||
|
<h2 className="text-3xl font-extrabold tracking-tight text-slate-900 dark:text-white">
|
||||||
|
{t('home.featuresTitle', 'A smarter way to work with files')}
|
||||||
</h2>
|
</h2>
|
||||||
<div className="grid gap-8 sm:grid-cols-3 text-center">
|
|
||||||
<div className="flex flex-col items-center">
|
|
||||||
<div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400 mb-6">
|
|
||||||
<Layers className="h-8 w-8" />
|
|
||||||
</div>
|
</div>
|
||||||
<h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">
|
|
||||||
{t('home.feature1Title', 'One complete workspace')}
|
<div className="grid gap-8 sm:grid-cols-3">
|
||||||
|
{[
|
||||||
|
{
|
||||||
|
icon: Layers,
|
||||||
|
bg: 'bg-blue-100 dark:bg-blue-900/30',
|
||||||
|
color: 'text-blue-600 dark:text-blue-400',
|
||||||
|
titleKey: 'home.feature1Title',
|
||||||
|
titleDefault: 'One complete workspace',
|
||||||
|
descKey: 'home.feature1Desc',
|
||||||
|
descDefault: 'Edit, convert, compress, merge, split — without switching tabs.',
|
||||||
|
perks: [
|
||||||
|
t('home.feature1Perk1', '30+ tools in one place'),
|
||||||
|
t('home.feature1Perk2', 'PDF, image & video support'),
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: CheckCircle2,
|
||||||
|
bg: 'bg-emerald-100 dark:bg-emerald-900/30',
|
||||||
|
color: 'text-emerald-600 dark:text-emerald-400',
|
||||||
|
titleKey: 'home.feature2Title',
|
||||||
|
titleDefault: 'Accuracy you can trust',
|
||||||
|
descKey: 'home.feature2Desc',
|
||||||
|
descDefault: 'Pixel-perfect, editable output in seconds with zero quality loss.',
|
||||||
|
perks: [
|
||||||
|
t('home.feature2Perk1', 'Preserve fonts & layouts'),
|
||||||
|
t('home.feature2Perk2', 'Batch-tested quality'),
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: ShieldCheck,
|
||||||
|
bg: 'bg-violet-100 dark:bg-violet-900/30',
|
||||||
|
color: 'text-violet-600 dark:text-violet-400',
|
||||||
|
titleKey: 'home.feature3Title',
|
||||||
|
titleDefault: 'Built-in security',
|
||||||
|
descKey: 'home.feature3Desc',
|
||||||
|
descDefault: 'Files are automatically deleted after processing. No account required.',
|
||||||
|
perks: [
|
||||||
|
t('home.feature3Perk1', 'Auto-deletion after 1 hour'),
|
||||||
|
t('home.feature3Perk2', 'Encrypted transfers'),
|
||||||
|
],
|
||||||
|
},
|
||||||
|
].map(({ icon: Icon, bg, color, titleKey, titleDefault, descKey, descDefault, perks }) => (
|
||||||
|
<div key={titleKey} className="flex flex-col rounded-2xl bg-white p-7 shadow-sm ring-1 ring-slate-200/80 dark:bg-slate-800 dark:ring-slate-700">
|
||||||
|
<div className={`mb-5 flex h-14 w-14 items-center justify-center rounded-2xl ${bg}`}>
|
||||||
|
<Icon className={`h-7 w-7 ${color}`} />
|
||||||
|
</div>
|
||||||
|
<h3 className="mb-2 text-lg font-bold text-slate-900 dark:text-slate-100">
|
||||||
|
{t(titleKey, titleDefault)}
|
||||||
</h3>
|
</h3>
|
||||||
<p className="text-slate-500 dark:text-slate-400">
|
<p className="mb-5 text-sm leading-relaxed text-slate-500 dark:text-slate-400">
|
||||||
{t('home.feature1Desc', 'Edit, convert, compress, merge, split without switching tabs.')}
|
{t(descKey, descDefault)}
|
||||||
|
</p>
|
||||||
|
<ul className="mt-auto space-y-2">
|
||||||
|
{perks.map((perk) => (
|
||||||
|
<li key={perk} className="flex items-center gap-2 text-xs font-medium text-slate-600 dark:text-slate-300">
|
||||||
|
<Star className="h-3.5 w-3.5 flex-shrink-0 text-amber-400" />
|
||||||
|
{perk}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── Developer API Banner ──────────────────────────────────── */}
|
||||||
|
<section className="mb-10 rounded-[2rem] border border-slate-200 bg-white p-8 shadow-sm dark:border-slate-700 dark:bg-slate-900/70">
|
||||||
|
<div className="flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
|
||||||
|
<div className="max-w-2xl">
|
||||||
|
<p className="text-sm font-semibold uppercase tracking-[0.2em] text-primary-600 dark:text-primary-400">
|
||||||
|
{t('common.developers')}
|
||||||
|
</p>
|
||||||
|
<h2 className="mt-2 text-2xl font-bold text-slate-900 dark:text-white">
|
||||||
|
{t('pages.developers.ctaTitle')}
|
||||||
|
</h2>
|
||||||
|
<p className="mt-2 text-slate-500 dark:text-slate-400">
|
||||||
|
{t('pages.developers.ctaSubtitle')}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col items-center">
|
<div className="flex flex-col gap-3 sm:flex-row">
|
||||||
<div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-emerald-100 text-emerald-600 dark:bg-emerald-900/30 dark:text-emerald-400 mb-6">
|
<Link
|
||||||
<span className="text-2xl font-bold inline-block">100%</span>
|
to="/developers"
|
||||||
</div>
|
className="inline-flex items-center justify-center gap-2 rounded-xl bg-primary-600 px-5 py-3 text-sm font-semibold text-white shadow-sm transition-all hover:bg-primary-700 hover:-translate-y-px"
|
||||||
<h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">
|
>
|
||||||
{t('home.feature2Title', 'Accuracy you can trust')}
|
{t('pages.developers.openDocs')}
|
||||||
</h3>
|
<ArrowRight className="h-4 w-4" />
|
||||||
<p className="text-slate-500 dark:text-slate-400">
|
</Link>
|
||||||
{t('home.feature2Desc', 'Get pixel-perfect, editable files in seconds with zero quality loss.')}
|
<Link
|
||||||
</p>
|
to="/account"
|
||||||
</div>
|
className="inline-flex items-center justify-center rounded-xl border border-slate-200 px-5 py-3 text-sm font-semibold text-slate-700 transition-colors hover:bg-slate-50 dark:border-slate-700 dark:text-slate-200 dark:hover:bg-slate-800"
|
||||||
<div className="flex flex-col items-center">
|
>
|
||||||
<div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-red-100 text-red-600 dark:bg-red-900/30 dark:text-red-400 mb-6">
|
{t('pages.developers.getApiKey')}
|
||||||
<Lock className="h-8 w-8" />
|
</Link>
|
||||||
</div>
|
|
||||||
<h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">
|
|
||||||
{t('home.feature3Title', 'Built-in security')}
|
|
||||||
</h3>
|
|
||||||
<p className="text-slate-500 dark:text-slate-400">
|
|
||||||
{t('home.feature3Desc', 'Access files securely, protected by automatic encryption.')}
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* Ad Slot - Bottom */}
|
{/* ── Bottom CTA Banner ─────────────────────────────────────── */}
|
||||||
|
<section className="relative mb-14 overflow-hidden rounded-[2rem] bg-gradient-to-br from-primary-600 via-primary-700 to-accent-700 px-8 py-16 text-center">
|
||||||
|
{/* Decorative blobs */}
|
||||||
|
<div className="pointer-events-none absolute -right-16 -top-16 h-64 w-64 rounded-full bg-white/10 blur-3xl" />
|
||||||
|
<div className="pointer-events-none absolute -bottom-16 -left-16 h-64 w-64 rounded-full bg-white/10 blur-3xl" />
|
||||||
|
|
||||||
|
<div className="relative">
|
||||||
|
<p className="mb-2 text-sm font-bold uppercase tracking-widest text-primary-200">
|
||||||
|
{t('home.ctaBannerLabel', 'Get started today')}
|
||||||
|
</p>
|
||||||
|
<h2 className="mb-4 text-3xl font-extrabold text-white sm:text-4xl">
|
||||||
|
{t('home.ctaBannerTitle', 'Ready to convert your files?')}
|
||||||
|
</h2>
|
||||||
|
<p className="mx-auto mb-10 max-w-xl text-lg text-primary-100">
|
||||||
|
{t('home.ctaBannerSubtitle', 'Join thousands of users who convert, compress, and edit their files every day — completely free.')}
|
||||||
|
</p>
|
||||||
|
<div className="flex flex-wrap items-center justify-center gap-4">
|
||||||
|
<Link
|
||||||
|
to="/tools"
|
||||||
|
className="inline-flex items-center gap-2 rounded-xl bg-white px-8 py-3.5 text-sm font-bold text-primary-700 shadow-lg transition-all hover:shadow-xl hover:-translate-y-0.5 active:translate-y-0"
|
||||||
|
>
|
||||||
|
{t('home.ctaBrowseTools', 'Browse All Tools')}
|
||||||
|
<ArrowRight className="h-4 w-4" />
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
to="/account"
|
||||||
|
className="inline-flex items-center gap-2 rounded-xl border-2 border-white/30 bg-white/10 px-8 py-3.5 text-sm font-bold text-white backdrop-blur transition-all hover:bg-white/20 hover:-translate-y-0.5"
|
||||||
|
>
|
||||||
|
{t('home.ctaCreateAccount', 'Create Free Account')}
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* ── Ad Slot - Bottom ──────────────────────────────────────── */}
|
||||||
<AdSlot slot="home-bottom" className="mt-12" />
|
<AdSlot slot="home-bottom" className="mt-12" />
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -114,17 +114,84 @@
|
|||||||
animation: fadeSlideIn 0.15s ease-out;
|
animation: fadeSlideIn 0.15s ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Hero upload zone — larger variant for the homepage */
|
/* ──────────────────────────────────────────────────────────────────────────
|
||||||
|
Hero Upload Zone — premium glassmorphism card for the homepage
|
||||||
|
────────────────────────────────────────────────────────────────────────── */
|
||||||
.hero-upload-zone {
|
.hero-upload-zone {
|
||||||
@apply flex flex-col items-center justify-center rounded-3xl border-2 border-dashed border-slate-300 bg-gradient-to-b from-slate-50 to-white p-10 text-center transition-all duration-300 ease-in-out cursor-pointer sm:p-14 dark:border-slate-600 dark:from-slate-800/60 dark:to-slate-800/30;
|
@apply relative flex flex-col items-center justify-center rounded-3xl border border-slate-200/80 bg-white/80 backdrop-blur-sm p-10 text-center transition-all duration-300 ease-in-out cursor-pointer sm:p-14 shadow-sm dark:border-slate-700/60 dark:bg-slate-800/60 dark:backdrop-blur-sm;
|
||||||
|
background-image: radial-gradient(ellipse at top, rgba(219, 234, 254, 0.3) 0%, transparent 70%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .hero-upload-zone {
|
||||||
|
background-image: radial-gradient(ellipse at top, rgba(30, 58, 138, 0.15) 0%, transparent 70%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-upload-zone::before {
|
||||||
|
content: '';
|
||||||
|
@apply absolute inset-0 rounded-3xl transition-opacity duration-300 opacity-0;
|
||||||
|
background: linear-gradient(135deg, rgba(59, 130, 246, 0.06) 0%, rgba(168, 85, 247, 0.04) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-upload-zone:hover::before {
|
||||||
|
@apply opacity-100;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-upload-zone:hover {
|
.hero-upload-zone:hover {
|
||||||
@apply border-primary-400 bg-gradient-to-b from-primary-50 to-white shadow-xl -translate-y-0.5 dark:border-primary-500 dark:from-primary-900/20 dark:to-slate-800/30;
|
@apply border-primary-300 shadow-lg shadow-primary-100/50 -translate-y-1 dark:border-primary-600/60 dark:shadow-primary-900/30;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-upload-zone.drag-active {
|
.hero-upload-zone.drag-active {
|
||||||
@apply border-primary-500 bg-gradient-to-b from-primary-100 to-primary-50/80 ring-2 ring-primary-300 shadow-2xl scale-[1.02] dark:border-primary-400 dark:from-primary-900/30 dark:to-primary-900/10 dark:ring-primary-600;
|
@apply border-primary-500 shadow-2xl shadow-primary-200/60 scale-[1.02] dark:border-primary-400 dark:shadow-primary-900/40;
|
||||||
|
background-image: radial-gradient(ellipse at top, rgba(191, 219, 254, 0.5) 0%, rgba(219, 234, 254, 0.2) 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ──────────────────────────────────────────────────────────────────────────
|
||||||
|
Glassmorphism card utility
|
||||||
|
────────────────────────────────────────────────────────────────────────── */
|
||||||
|
.glass-card {
|
||||||
|
@apply bg-white/70 backdrop-blur-md border border-white/50 shadow-sm dark:bg-slate-800/60 dark:border-slate-700/50;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ──────────────────────────────────────────────────────────────────────────
|
||||||
|
Gradient hero mesh background
|
||||||
|
────────────────────────────────────────────────────────────────────────── */
|
||||||
|
.hero-gradient-bg {
|
||||||
|
background:
|
||||||
|
radial-gradient(ellipse 80% 60% at 50% -20%, rgba(59, 130, 246, 0.12) 0%, transparent 70%),
|
||||||
|
radial-gradient(ellipse 60% 40% at 80% 20%, rgba(168, 85, 247, 0.06) 0%, transparent 60%),
|
||||||
|
linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .hero-gradient-bg {
|
||||||
|
background:
|
||||||
|
radial-gradient(ellipse 80% 60% at 50% -20%, rgba(30, 58, 138, 0.3) 0%, transparent 70%),
|
||||||
|
radial-gradient(ellipse 60% 40% at 80% 20%, rgba(88, 28, 135, 0.15) 0%, transparent 60%),
|
||||||
|
linear-gradient(180deg, #0f172a 0%, #0f172a 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ──────────────────────────────────────────────────────────────────────────
|
||||||
|
Shimmer loading effect
|
||||||
|
────────────────────────────────────────────────────────────────────────── */
|
||||||
|
@keyframes shimmer-sweep {
|
||||||
|
0% { background-position: -200% center; }
|
||||||
|
100% { background-position: 200% center; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.shimmer-text {
|
||||||
|
background: linear-gradient(90deg, #1e40af 30%, #7c3aed 50%, #1e40af 70%);
|
||||||
|
background-size: 200% auto;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
background-clip: text;
|
||||||
|
animation: shimmer-sweep 4s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ──────────────────────────────────────────────────────────────────────────
|
||||||
|
How it Works — connector line between steps
|
||||||
|
────────────────────────────────────────────────────────────────────────── */
|
||||||
|
.step-connector {
|
||||||
|
@apply absolute top-8 left-[calc(50%+2.5rem)] hidden h-px w-[calc(100%-5rem)] sm:block;
|
||||||
|
background: linear-gradient(90deg, rgba(59, 130, 246, 0.4) 0%, rgba(59, 130, 246, 0.1) 100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Modal animations */
|
/* Modal animations */
|
||||||
|
|||||||
@@ -49,6 +49,40 @@ export default {
|
|||||||
transitionTimingFunction: {
|
transitionTimingFunction: {
|
||||||
'smooth': 'cubic-bezier(0.4, 0, 0.2, 1)',
|
'smooth': 'cubic-bezier(0.4, 0, 0.2, 1)',
|
||||||
},
|
},
|
||||||
|
animation: {
|
||||||
|
'float': 'float 3s ease-in-out infinite',
|
||||||
|
'shimmer': 'shimmer 2.5s linear infinite',
|
||||||
|
'fade-up': 'fadeUp 0.5s ease-out forwards',
|
||||||
|
'fade-in': 'fadeIn 0.4s ease-out forwards',
|
||||||
|
'scale-in': 'scaleIn 0.3s ease-out forwards',
|
||||||
|
'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
|
||||||
|
},
|
||||||
|
keyframes: {
|
||||||
|
float: {
|
||||||
|
'0%, 100%': { transform: 'translateY(0px)' },
|
||||||
|
'50%': { transform: 'translateY(-10px)' },
|
||||||
|
},
|
||||||
|
shimmer: {
|
||||||
|
'0%': { backgroundPosition: '-200% center' },
|
||||||
|
'100%': { backgroundPosition: '200% center' },
|
||||||
|
},
|
||||||
|
fadeUp: {
|
||||||
|
'0%': { opacity: '0', transform: 'translateY(24px)' },
|
||||||
|
'100%': { opacity: '1', transform: 'translateY(0)' },
|
||||||
|
},
|
||||||
|
fadeIn: {
|
||||||
|
'0%': { opacity: '0' },
|
||||||
|
'100%': { opacity: '1' },
|
||||||
|
},
|
||||||
|
scaleIn: {
|
||||||
|
'0%': { opacity: '0', transform: 'scale(0.92)' },
|
||||||
|
'100%': { opacity: '1', transform: 'scale(1)' },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
backgroundImage: {
|
||||||
|
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
|
||||||
|
'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
plugins: [],
|
plugins: [],
|
||||||
|
|||||||
Reference in New Issue
Block a user