NoSys pages initial commit
This commit is contained in:
Lucas
304
package-lock.json
generated
304
package-lock.json
generated
@@ -11,8 +11,10 @@
|
||||
"@tailwindcss/vite": "^4.1.17",
|
||||
"clsx": "^2.1.1",
|
||||
"lucide-vue-next": "^0.556.0",
|
||||
"radix-vue": "^1.9.17",
|
||||
"tailwind-merge": "^3.4.0",
|
||||
"vue": "^3.5.25"
|
||||
"vue": "^3.5.25",
|
||||
"vue-router": "^4.6.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^6.0.2",
|
||||
@@ -897,6 +899,86 @@
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@floating-ui/core": {
|
||||
"version": "1.7.3",
|
||||
"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.3.tgz",
|
||||
"integrity": "sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@floating-ui/utils": "^0.2.10"
|
||||
}
|
||||
},
|
||||
"node_modules/@floating-ui/dom": {
|
||||
"version": "1.7.4",
|
||||
"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.4.tgz",
|
||||
"integrity": "sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@floating-ui/core": "^1.7.3",
|
||||
"@floating-ui/utils": "^0.2.10"
|
||||
}
|
||||
},
|
||||
"node_modules/@floating-ui/utils": {
|
||||
"version": "0.2.10",
|
||||
"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz",
|
||||
"integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@floating-ui/vue": {
|
||||
"version": "1.1.9",
|
||||
"resolved": "https://registry.npmjs.org/@floating-ui/vue/-/vue-1.1.9.tgz",
|
||||
"integrity": "sha512-BfNqNW6KA83Nexspgb9DZuz578R7HT8MZw1CfK9I6Ah4QReNWEJsXWHN+SdmOVLNGmTPDi+fDT535Df5PzMLbQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@floating-ui/dom": "^1.7.4",
|
||||
"@floating-ui/utils": "^0.2.10",
|
||||
"vue-demi": ">=0.13.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@floating-ui/vue/node_modules/vue-demi": {
|
||||
"version": "0.14.10",
|
||||
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
|
||||
"integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
|
||||
"hasInstallScript": true,
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
"vue-demi-fix": "bin/vue-demi-fix.js",
|
||||
"vue-demi-switch": "bin/vue-demi-switch.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/antfu"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@vue/composition-api": "^1.0.0-rc.1",
|
||||
"vue": "^3.0.0-0 || ^2.6.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@vue/composition-api": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@internationalized/date": {
|
||||
"version": "3.10.0",
|
||||
"resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.10.0.tgz",
|
||||
"integrity": "sha512-oxDR/NTEJ1k+UFVQElaNIk65E/Z83HK1z1WI3lQyhTtnNg4R5oVXaPzK3jcpKG8UHKDVuDQHzn+wsxSz8RP3aw==",
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"@swc/helpers": "^0.5.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@internationalized/number": {
|
||||
"version": "3.6.5",
|
||||
"resolved": "https://registry.npmjs.org/@internationalized/number/-/number-3.6.5.tgz",
|
||||
"integrity": "sha512-6hY4Kl4HPBvtfS62asS/R22JzNNy8vi/Ssev7x6EobfCp+9QIB2hKvI2EtbdJ0VSQacxVNtqhE/NmF/NZ0gm6g==",
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"@swc/helpers": "^0.5.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@jridgewell/gen-mapping": {
|
||||
"version": "0.3.13",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
|
||||
@@ -1242,6 +1324,15 @@
|
||||
"win32"
|
||||
]
|
||||
},
|
||||
"node_modules/@swc/helpers": {
|
||||
"version": "0.5.17",
|
||||
"resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.17.tgz",
|
||||
"integrity": "sha512-5IKx/Y13RsYd+sauPb2x+U/xZikHjolzfuDgTAl/Tdf3Q8rslRvC19NKDLgAJQ6wsqADk10ntlv08nPFw/gO/A==",
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"tslib": "^2.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@tailwindcss/node": {
|
||||
"version": "4.1.17",
|
||||
"resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.17.tgz",
|
||||
@@ -1499,12 +1590,44 @@
|
||||
"vite": "^5.2.0 || ^6 || ^7"
|
||||
}
|
||||
},
|
||||
"node_modules/@tanstack/virtual-core": {
|
||||
"version": "3.13.13",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.13.13.tgz",
|
||||
"integrity": "sha512-uQFoSdKKf5S8k51W5t7b2qpfkyIbdHMzAn+AMQvHPxKUPeo1SsGaA4JRISQT87jm28b7z8OEqPcg1IOZagQHcA==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/tannerlinsley"
|
||||
}
|
||||
},
|
||||
"node_modules/@tanstack/vue-virtual": {
|
||||
"version": "3.13.13",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/vue-virtual/-/vue-virtual-3.13.13.tgz",
|
||||
"integrity": "sha512-Cf2xIEE8nWAfsX0N5nihkPYMeQRT+pHt4NEkuP8rNCn6lVnLDiV8rC8IeIxbKmQC0yPnj4SIBLwXYVf86xxKTQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@tanstack/virtual-core": "3.13.13"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/tannerlinsley"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": "^2.7.0 || ^3.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/estree": {
|
||||
"version": "1.0.8",
|
||||
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
|
||||
"integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/web-bluetooth": {
|
||||
"version": "0.0.20",
|
||||
"resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
|
||||
"integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@vitejs/plugin-vue": {
|
||||
"version": "6.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-6.0.2.tgz",
|
||||
@@ -1625,6 +1748,12 @@
|
||||
"@vue/shared": "3.5.25"
|
||||
}
|
||||
},
|
||||
"node_modules/@vue/devtools-api": {
|
||||
"version": "6.6.4",
|
||||
"resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
|
||||
"integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@vue/devtools-core": {
|
||||
"version": "8.0.5",
|
||||
"resolved": "https://registry.npmjs.org/@vue/devtools-core/-/devtools-core-8.0.5.tgz",
|
||||
@@ -1738,6 +1867,94 @@
|
||||
"integrity": "sha512-AbOPdQQnAnzs58H2FrrDxYj/TJfmeS2jdfEEhgiKINy+bnOANmVizIEgq1r+C5zsbs6l1CCQxtcj71rwNQ4jWg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@vueuse/core": {
|
||||
"version": "10.11.1",
|
||||
"resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.11.1.tgz",
|
||||
"integrity": "sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/web-bluetooth": "^0.0.20",
|
||||
"@vueuse/metadata": "10.11.1",
|
||||
"@vueuse/shared": "10.11.1",
|
||||
"vue-demi": ">=0.14.8"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/antfu"
|
||||
}
|
||||
},
|
||||
"node_modules/@vueuse/core/node_modules/vue-demi": {
|
||||
"version": "0.14.10",
|
||||
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
|
||||
"integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
|
||||
"hasInstallScript": true,
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
"vue-demi-fix": "bin/vue-demi-fix.js",
|
||||
"vue-demi-switch": "bin/vue-demi-switch.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/antfu"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@vue/composition-api": "^1.0.0-rc.1",
|
||||
"vue": "^3.0.0-0 || ^2.6.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@vue/composition-api": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@vueuse/metadata": {
|
||||
"version": "10.11.1",
|
||||
"resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.11.1.tgz",
|
||||
"integrity": "sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/antfu"
|
||||
}
|
||||
},
|
||||
"node_modules/@vueuse/shared": {
|
||||
"version": "10.11.1",
|
||||
"resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.11.1.tgz",
|
||||
"integrity": "sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"vue-demi": ">=0.14.8"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/antfu"
|
||||
}
|
||||
},
|
||||
"node_modules/@vueuse/shared/node_modules/vue-demi": {
|
||||
"version": "0.14.10",
|
||||
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
|
||||
"integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
|
||||
"hasInstallScript": true,
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
"vue-demi-fix": "bin/vue-demi-fix.js",
|
||||
"vue-demi-switch": "bin/vue-demi-switch.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/antfu"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@vue/composition-api": "^1.0.0-rc.1",
|
||||
"vue": "^3.0.0-0 || ^2.6.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@vue/composition-api": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/ansis": {
|
||||
"version": "4.2.0",
|
||||
"resolved": "https://registry.npmjs.org/ansis/-/ansis-4.2.0.tgz",
|
||||
@@ -1748,6 +1965,18 @@
|
||||
"node": ">=14"
|
||||
}
|
||||
},
|
||||
"node_modules/aria-hidden": {
|
||||
"version": "1.2.6",
|
||||
"resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.6.tgz",
|
||||
"integrity": "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"tslib": "^2.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/autoprefixer": {
|
||||
"version": "10.4.22",
|
||||
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.22.tgz",
|
||||
@@ -1976,6 +2205,12 @@
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/defu": {
|
||||
"version": "6.1.4",
|
||||
"resolved": "https://registry.npmjs.org/defu/-/defu-6.1.4.tgz",
|
||||
"integrity": "sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/detect-libc": {
|
||||
"version": "2.1.2",
|
||||
"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
|
||||
@@ -2084,6 +2319,12 @@
|
||||
"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/fast-deep-equal": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
|
||||
"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/fdir": {
|
||||
"version": "6.5.0",
|
||||
"resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
|
||||
@@ -2694,6 +2935,46 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/radix-vue": {
|
||||
"version": "1.9.17",
|
||||
"resolved": "https://registry.npmjs.org/radix-vue/-/radix-vue-1.9.17.tgz",
|
||||
"integrity": "sha512-mVCu7I2vXt1L2IUYHTt0sZMz7s1K2ZtqKeTIxG3yC5mMFfLBG4FtE1FDeRMpDd+Hhg/ybi9+iXmAP1ISREndoQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@floating-ui/dom": "^1.6.7",
|
||||
"@floating-ui/vue": "^1.1.0",
|
||||
"@internationalized/date": "^3.5.4",
|
||||
"@internationalized/number": "^3.5.3",
|
||||
"@tanstack/vue-virtual": "^3.8.1",
|
||||
"@vueuse/core": "^10.11.0",
|
||||
"@vueuse/shared": "^10.11.0",
|
||||
"aria-hidden": "^1.2.4",
|
||||
"defu": "^6.1.4",
|
||||
"fast-deep-equal": "^3.1.3",
|
||||
"nanoid": "^5.0.7"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": ">= 3.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/radix-vue/node_modules/nanoid": {
|
||||
"version": "5.1.6",
|
||||
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.1.6.tgz",
|
||||
"integrity": "sha512-c7+7RQ+dMB5dPwwCp4ee1/iV/q2P6aK1mTZcfr1BTuVlyW9hJYiMPybJCcnBlQtuSmTIWNeazm/zqNoZSSElBg==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/ai"
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
"nanoid": "bin/nanoid.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^18 || >=20"
|
||||
}
|
||||
},
|
||||
"node_modules/rfdc": {
|
||||
"version": "1.4.1",
|
||||
"resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
|
||||
@@ -2867,6 +3148,12 @@
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/tslib": {
|
||||
"version": "2.8.1",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
|
||||
"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
|
||||
"license": "0BSD"
|
||||
},
|
||||
"node_modules/unplugin-utils": {
|
||||
"version": "0.3.1",
|
||||
"resolved": "https://registry.npmjs.org/unplugin-utils/-/unplugin-utils-0.3.1.tgz",
|
||||
@@ -3114,6 +3401,21 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/vue-router": {
|
||||
"version": "4.6.3",
|
||||
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.6.3.tgz",
|
||||
"integrity": "sha512-ARBedLm9YlbvQomnmq91Os7ck6efydTSpRP3nuOKCvgJOHNrhRoJDSKtee8kcL1Vf7nz6U+PMBL+hTvR3bTVQg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@vue/devtools-api": "^6.6.4"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/posva"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": "^3.5.0"
|
||||
}
|
||||
},
|
||||
"node_modules/wsl-utils": {
|
||||
"version": "0.1.0",
|
||||
"resolved": "https://registry.npmjs.org/wsl-utils/-/wsl-utils-0.1.0.tgz",
|
||||
|
||||
@@ -15,8 +15,10 @@
|
||||
"@tailwindcss/vite": "^4.1.17",
|
||||
"clsx": "^2.1.1",
|
||||
"lucide-vue-next": "^0.556.0",
|
||||
"radix-vue": "^1.9.17",
|
||||
"tailwind-merge": "^3.4.0",
|
||||
"vue": "^3.5.25"
|
||||
"vue": "^3.5.25",
|
||||
"vue-router": "^4.6.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^6.0.2",
|
||||
|
||||
157
src/App.vue
157
src/App.vue
@@ -1,151 +1,20 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { MessageSquare, Shield, Lock, Users, Clock, AlertTriangle, Eye, Zap } from 'lucide-vue-next';
|
||||
import Button from '@/components/ui/Button.vue';
|
||||
import Input from '@/components/ui/Input.vue';
|
||||
import FeatureCard from '@/components/FeatureCard.vue';
|
||||
const email = ref('');
|
||||
const submitted = ref(false);
|
||||
const handleSubmit = () => {
|
||||
if (email.value) {
|
||||
submitted.value = true;
|
||||
setTimeout(() => {
|
||||
email.value = '';
|
||||
submitted.value = false;
|
||||
}, 3000);
|
||||
}
|
||||
};
|
||||
import Navbar from './components/Navbar.vue';
|
||||
import Footer from './components/Footer.vue';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="min-h-screen bg-gradient-to-b from-[#0a0a0a] via-[#1a1a2e] to-[#0a0a0a] text-white">
|
||||
<!-- Hero Section -->
|
||||
<div class="container mx-auto px-4 py-20">
|
||||
<div class="flex flex-col items-center justify-center text-center space-y-8 max-w-4xl mx-auto">
|
||||
<!-- Logo/Brand -->
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-[#ff6b6b] to-[#ee5a6f] rounded-lg flex items-center justify-center shadow-lg shadow-[#ff6b6b]/50">
|
||||
<MessageSquare class="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h1 class="text-6xl font-bold bg-gradient-to-r from-[#ff6b6b] to-[#ee5a6f] bg-clip-text text-transparent">
|
||||
NoSys
|
||||
</h1>
|
||||
</div>
|
||||
<!-- Tagline -->
|
||||
<h2 class="text-4xl md:text-5xl font-bold leading-tight">
|
||||
Reclaim Your Right to
|
||||
<span class="bg-gradient-to-r from-[#ff6b6b] to-[#ee5a6f] bg-clip-text text-transparent">
|
||||
Free Speech
|
||||
</span>
|
||||
</h2>
|
||||
<!-- Description -->
|
||||
<p class="text-xl text-gray-300 max-w-2xl leading-relaxed">
|
||||
A decentralized, peer-to-peer social media platform where your voice can't be silenced.
|
||||
No big tech. No government control. Just pure, unfiltered freedom of expression.
|
||||
</p>
|
||||
<!-- Coming Soon Badge -->
|
||||
<div class="inline-flex items-center gap-2 bg-[#ff6b6b]/20 border border-[#ff6b6b]/50 rounded-full px-6 py-3 backdrop-blur-sm">
|
||||
<Clock class="w-5 h-5 text-[#ff6b6b]" />
|
||||
<span class="font-semibold text-[#ff6b6b]">Coming Soon</span>
|
||||
</div>
|
||||
<!-- Email Signup -->
|
||||
<!-- <div class="w-full max-w-md mt-8">
|
||||
<form @submit.prevent="handleSubmit" class="flex flex-col sm:flex-row gap-3">
|
||||
<Input
|
||||
type="email"
|
||||
placeholder="Enter your email"
|
||||
v-model="email"
|
||||
required
|
||||
class="flex-1 bg-white/10 border-white/20 text-white placeholder:text-gray-400 focus:border-[#ff6b6b] focus:ring-[#ff6b6b]"
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
class="bg-gradient-to-r from-[#ff6b6b] to-[#ee5a6f] hover:from-[#ee5a6f] hover:to-[#ff6b6b] text-white font-semibold px-8 shadow-lg shadow-[#ff6b6b]/50"
|
||||
>
|
||||
Notify Me
|
||||
</Button>
|
||||
</form>
|
||||
<p v-if="submitted" class="text-sm text-[#ff6b6b] mt-3 text-center">
|
||||
✓ Thanks! We'll notify you when we launch.
|
||||
</p>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- Features Section -->
|
||||
<div class="container mx-auto px-4 py-20">
|
||||
<div class="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
|
||||
<FeatureCard
|
||||
:icon="Shield"
|
||||
title="Decentralized"
|
||||
description="Built on peer-to-peer technology. No central servers, no single point of failure or censorship."
|
||||
/>
|
||||
<FeatureCard
|
||||
:icon="Lock"
|
||||
title="Privacy First"
|
||||
description="End-to-end encryption ensures your conversations remain private and secure from prying eyes."
|
||||
/>
|
||||
<FeatureCard
|
||||
:icon="Users"
|
||||
title="Community Owned"
|
||||
description="Governed by the people, for the people. Your platform, your rules, your freedom."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Why NoSys Section -->
|
||||
<div class="container mx-auto px-4 py-20">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h3 class="text-3xl font-bold text-center mb-12">
|
||||
Why We're Building <span class="text-[#ff6b6b]">NoSys</span>
|
||||
</h3>
|
||||
<div class="space-y-6 text-lg text-gray-300 leading-relaxed">
|
||||
<div class="flex gap-4 items-start">
|
||||
<div class="flex-shrink-0 w-8 h-8 bg-[#ff6b6b]/20 rounded-full flex items-center justify-center mt-1">
|
||||
<AlertTriangle class="w-5 h-5 text-[#ff6b6b]" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold text-white mb-2">Big Tech Censorship</h4>
|
||||
<p>Major platforms decide what you can and cannot say, silencing voices that don't fit their narrative.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-4 items-start">
|
||||
<div class="flex-shrink-0 w-8 h-8 bg-[#ff6b6b]/20 rounded-full flex items-center justify-center mt-1">
|
||||
<Eye class="w-5 h-5 text-[#ff6b6b]" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold text-white mb-2">Government Surveillance</h4>
|
||||
<p>Your data is constantly monitored, collected, and analyzed without your meaningful consent.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-4 items-start">
|
||||
<div class="flex-shrink-0 w-8 h-8 bg-[#ff6b6b]/20 rounded-full flex items-center justify-center mt-1">
|
||||
<Zap class="w-5 h-5 text-[#ff6b6b]" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold text-white mb-2">Time for Change</h4>
|
||||
<p>We deserve a platform that respects fundamental human rights and values true freedom of expression.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Footer -->
|
||||
<footer class="border-t border-white/10 py-12">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="flex flex-col items-center justify-center space-y-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<MessageSquare class="w-6 h-6 text-[#ff6b6b]" />
|
||||
<span class="font-bold text-xl">NoSys</span>
|
||||
</div>
|
||||
<p class="text-gray-400 text-sm text-center max-w-md">
|
||||
Fighting for free speech, one decentralized connection at a time.
|
||||
</p>
|
||||
<p class="text-gray-500 text-xs">
|
||||
© 2026 NoSys. No rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<Navbar></Navbar>
|
||||
|
||||
<div class="">
|
||||
<router-view />
|
||||
</div>
|
||||
|
||||
<Footer></Footer>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
||||
@@ -1,16 +0,0 @@
|
||||
<template>
|
||||
<div class="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-6 hover:bg-white/10 transition-all duration-300 hover:border-[#ff6b6b]/50 hover:shadow-lg hover:shadow-[#ff6b6b]/20">
|
||||
<div class="w-12 h-12 bg-gradient-to-br from-[#ff6b6b] to-[#ee5a6f] rounded-lg flex items-center justify-center mb-4 shadow-lg shadow-[#ff6b6b]/30">
|
||||
<component :is="icon" class="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-2 text-white">{{ title }}</h3>
|
||||
<p class="text-gray-300 leading-relaxed">{{ description }}</p>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
defineProps({
|
||||
icon: Object,
|
||||
title: String,
|
||||
description: String,
|
||||
});
|
||||
</script>
|
||||
117
src/components/Footer.vue
Normal file
117
src/components/Footer.vue
Normal file
@@ -0,0 +1,117 @@
|
||||
<script setup>
|
||||
import { RouterLink } from "vue-router"
|
||||
import { Github, Heart } from "lucide-vue-next"
|
||||
|
||||
const currentYear = new Date().getFullYear()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<footer class="border-t border-border bg-card">
|
||||
<div class="container py-12">
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
|
||||
<!-- Brand -->
|
||||
<div>
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<div class="h-8 w-8 rounded-lg bg-primary flex items-center justify-center">
|
||||
<div class="h-4 w-4 rounded-full border-2 border-primary-foreground" />
|
||||
</div>
|
||||
<span class="font-bold text-lg">NoSys</span>
|
||||
</div>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
A social network no one can control. 100% decentralized.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Product -->
|
||||
<div>
|
||||
<h3 class="font-semibold mb-4">Product</h3>
|
||||
<ul class="space-y-3">
|
||||
<li>
|
||||
<RouterLink to="/about" class="text-sm text-muted-foreground hover:text-foreground transition-colors">
|
||||
About
|
||||
</RouterLink>
|
||||
</li>
|
||||
<li>
|
||||
<RouterLink to="/how-it-works" class="text-sm text-muted-foreground hover:text-foreground transition-colors">
|
||||
How It Works
|
||||
</RouterLink>
|
||||
</li>
|
||||
<li>
|
||||
<RouterLink to="/downloads" class="text-sm text-muted-foreground hover:text-foreground transition-colors">
|
||||
Downloads
|
||||
</RouterLink>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Resources -->
|
||||
<div>
|
||||
<h3 class="font-semibold mb-4">Resources</h3>
|
||||
<ul class="space-y-3">
|
||||
<li>
|
||||
<RouterLink to="/documentation" class="text-sm text-muted-foreground hover:text-foreground transition-colors">
|
||||
Documentation
|
||||
</RouterLink>
|
||||
</li>
|
||||
<li>
|
||||
<RouterLink to="/community" class="text-sm text-muted-foreground hover:text-foreground transition-colors">
|
||||
Community
|
||||
</RouterLink>
|
||||
</li>
|
||||
<li>
|
||||
<RouterLink to="/blog" class="text-sm text-muted-foreground hover:text-foreground transition-colors">
|
||||
Blog
|
||||
</RouterLink>
|
||||
</li>
|
||||
<li>
|
||||
<RouterLink to="/support" class="text-sm text-muted-foreground hover:text-foreground transition-colors">
|
||||
Support
|
||||
</RouterLink>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Legal -->
|
||||
<div>
|
||||
<h3 class="font-semibold mb-4">Legal</h3>
|
||||
<ul class="space-y-3">
|
||||
<li>
|
||||
<RouterLink to="/privacy" class="text-sm text-muted-foreground hover:text-foreground transition-colors">
|
||||
Privacy Policy
|
||||
</RouterLink>
|
||||
</li>
|
||||
<li>
|
||||
<RouterLink to="/license" class="text-sm text-muted-foreground hover:text-foreground transition-colors">
|
||||
Open Source License
|
||||
</RouterLink>
|
||||
</li>
|
||||
<li>
|
||||
<RouterLink
|
||||
to="/community#donate"
|
||||
class="text-sm text-muted-foreground hover:text-foreground transition-colors flex items-center gap-2"
|
||||
>
|
||||
<Heart class="h-4 w-4" />
|
||||
Donate
|
||||
</RouterLink>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="text-sm text-muted-foreground hover:text-foreground transition-colors flex items-center gap-2"
|
||||
>
|
||||
<Github class="h-4 w-4" />
|
||||
GitHub
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-8 pt-8 border-t border-border text-center text-sm text-muted-foreground">
|
||||
<p>© {{ currentYear }} NoSys. Open source and decentralized.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
82
src/components/Navbar.vue
Normal file
82
src/components/Navbar.vue
Normal file
@@ -0,0 +1,82 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { RouterLink } from 'vue-router'
|
||||
import { Menu, X } from 'lucide-vue-next'
|
||||
|
||||
import Button from '@/components/ui/Button.vue'
|
||||
|
||||
const mobileMenuOpen = ref(false)
|
||||
|
||||
const navLinks = [
|
||||
{ href: "/", label: "Home" },
|
||||
{ href: "/about", label: "About" },
|
||||
{ href: "/how-it-works", label: "How It Works" },
|
||||
{ href: "/downloads", label: "Downloads" },
|
||||
{ href: "/documentation", label: "Docs" },
|
||||
{ href: "/community", label: "Community" },
|
||||
{ href: "/blog", label: "Blog" },
|
||||
{ href: "/support", label: "Support" },
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header
|
||||
class="sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60"
|
||||
>
|
||||
<div class="container flex h-16 items-center justify-between">
|
||||
<RouterLink to="/" class="flex items-center gap-2">
|
||||
<div class="h-8 w-8 rounded-lg bg-primary flex items-center justify-center">
|
||||
<div class="h-4 w-4 rounded-full border-2 border-primary-foreground" />
|
||||
</div>
|
||||
<span class="font-bold text-lg">NoSys</span>
|
||||
</RouterLink>
|
||||
|
||||
<!-- Desktop Navigation -->
|
||||
<nav class="hidden md:flex items-center gap-6">
|
||||
<RouterLink
|
||||
v-for="link in navLinks"
|
||||
:key="link.href"
|
||||
:to="link.href"
|
||||
class="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
{{ link.label }}
|
||||
</RouterLink>
|
||||
</nav>
|
||||
|
||||
<div class="hidden md:flex items-center gap-4">
|
||||
<Button>
|
||||
<RouterLink to="/downloads">Download</RouterLink>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu Button -->
|
||||
<button
|
||||
class="md:hidden"
|
||||
@click="mobileMenuOpen = !mobileMenuOpen"
|
||||
aria-label="Toggle menu"
|
||||
>
|
||||
<X v-if="mobileMenuOpen" class="h-6 w-6" />
|
||||
<Menu v-else class="h-6 w-6"></Menu>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Navigation -->
|
||||
<div v-if="mobileMenuOpen" class="md:hidden border-t border-border">
|
||||
<nav class="container py-4 flex flex-col gap-4">
|
||||
<RouterLink
|
||||
v-for="link in navLinks"
|
||||
:key="link.href"
|
||||
:to="link.href"
|
||||
class="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
|
||||
@click="mobileMenuOpen = false"
|
||||
>
|
||||
{{ link.label }}
|
||||
</RouterLink>
|
||||
|
||||
<Button class="w-full">
|
||||
<RouterLink to="/downloads">Download</RouterLink>
|
||||
</Button>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
18
src/components/ui/Card.vue
Normal file
18
src/components/ui/Card.vue
Normal file
@@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<div
|
||||
class="rounded-2xl border bg-card text-card-foreground shadow-sm"
|
||||
:class="customClass"
|
||||
>
|
||||
<slot>
|
||||
|
||||
</slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
class: { type: String, default: "" }
|
||||
})
|
||||
|
||||
const customClass = props.class
|
||||
</script>
|
||||
15
src/components/ui/CardContent.vue
Normal file
15
src/components/ui/CardContent.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div class="p-6" :class="customClass">
|
||||
<slot>
|
||||
|
||||
</slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
class: { type: String, default: "" }
|
||||
})
|
||||
|
||||
const customClass = props.class
|
||||
</script>
|
||||
11
src/components/ui/Label.vue
Normal file
11
src/components/ui/Label.vue
Normal file
@@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<label :for="for" class="block text-sm font-medium text-gray-700 mb-1">
|
||||
<slot></slot>
|
||||
</label>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
for: String
|
||||
})
|
||||
</script>
|
||||
13
src/components/ui/TextArea.vue
Normal file
13
src/components/ui/TextArea.vue
Normal file
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<textarea
|
||||
:id="id"
|
||||
v-bind="$attrs"
|
||||
class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary"
|
||||
></textarea>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
id: String
|
||||
})
|
||||
</script>
|
||||
240
src/components/ui/canvas/DotsMouse.vue
Normal file
240
src/components/ui/canvas/DotsMouse.vue
Normal file
File diff suppressed because one or more lines are too long
@@ -1,4 +1,7 @@
|
||||
import { createApp } from 'vue'
|
||||
import router from './router'
|
||||
import App from './App.vue'
|
||||
|
||||
createApp(App).mount('#app')
|
||||
const app = createApp(App);
|
||||
app.use(router);
|
||||
app.mount('#app')
|
||||
|
||||
70
src/router.js
Normal file
70
src/router.js
Normal file
@@ -0,0 +1,70 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router';
|
||||
import Home from './views/Home.vue';
|
||||
import About from './views/About.vue';
|
||||
import Blog from './views/Blog.vue';
|
||||
import Community from './views/Community.vue';
|
||||
import Docs from './views/Docs.vue';
|
||||
import Downloads from './views/Downloads.vue';
|
||||
import HowItWorks from './views/HowItWorks.vue';
|
||||
import Support from './views/Support.vue';
|
||||
import Article from './views/Article.vue';
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'Home',
|
||||
component: Home,
|
||||
},
|
||||
{
|
||||
path: '/about',
|
||||
name: 'About',
|
||||
component: About,
|
||||
},
|
||||
{
|
||||
path: '/how-it-works',
|
||||
name: 'HowItWorks',
|
||||
component: HowItWorks,
|
||||
},
|
||||
{
|
||||
path: '/downloads',
|
||||
name: 'Downloads',
|
||||
component: Downloads,
|
||||
},
|
||||
{
|
||||
path: '/documentation',
|
||||
name: 'Documentation',
|
||||
component: Docs,
|
||||
},
|
||||
{
|
||||
path: '/community',
|
||||
name: 'Community',
|
||||
component: Community,
|
||||
},
|
||||
{
|
||||
path: '/blog',
|
||||
name: 'Blog',
|
||||
component: Blog,
|
||||
},
|
||||
{
|
||||
path: "/blog/:slug",
|
||||
name: "Article",
|
||||
component: Article,
|
||||
props: true
|
||||
},
|
||||
{
|
||||
path: '/support',
|
||||
name: 'Support',
|
||||
component: Support,
|
||||
},
|
||||
{
|
||||
path: "/:pathMatch(.*)*",
|
||||
redirect: "/"
|
||||
}
|
||||
];
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes,
|
||||
});
|
||||
|
||||
export default router;
|
||||
275
src/views/About.vue
Normal file
275
src/views/About.vue
Normal file
@@ -0,0 +1,275 @@
|
||||
<template>
|
||||
<div class="flex flex-col">
|
||||
<!-- Hero -->
|
||||
<section class="container py-24 md:py-32">
|
||||
<div class="max-w-3xl">
|
||||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-balance">
|
||||
Taking Control Back from Big Tech
|
||||
</h1>
|
||||
<p class="text-xl text-muted-foreground leading-relaxed">
|
||||
In a world where social media platforms control what you see, what you can say,
|
||||
and how your data is used, we're building something different.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- The Problem -->
|
||||
<section class="border-t border-border bg-card">
|
||||
<div class="container py-24">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
<div>
|
||||
<div
|
||||
class="inline-flex items-center gap-2 px-3 py-1 text-sm bg-destructive/10
|
||||
text-destructive rounded-full border border-destructive/20 mb-6"
|
||||
>
|
||||
<AlertCircle class="h-4 w-4" />
|
||||
The Problem
|
||||
</div>
|
||||
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-6">
|
||||
Centralized Platforms Are Broken
|
||||
</h2>
|
||||
|
||||
<div class="space-y-4 text-muted-foreground leading-relaxed">
|
||||
<p>
|
||||
Today's social media landscape is dominated by corporations that control the
|
||||
digital lives of billions. These platforms:
|
||||
</p>
|
||||
|
||||
<ul class="space-y-2 list-disc list-inside">
|
||||
<li>Censor content based on opaque algorithms and pressure</li>
|
||||
<li>Surveil users and track every click</li>
|
||||
<li>Sell your personal data</li>
|
||||
<li>Manipulate reach with algorithms</li>
|
||||
<li>Ban users without warning</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
This centralized control contradicts the promise of free communication.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Card class="border-2">
|
||||
<CardContent class="p-8">
|
||||
<div class="space-y-6">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="h-2 w-2 rounded-full bg-destructive mt-2" />
|
||||
<div>
|
||||
<h3 class="font-semibold mb-1">Censorship</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Arbitrary content removal without transparency
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="h-2 w-2 rounded-full bg-destructive mt-2" />
|
||||
<div>
|
||||
<h3 class="font-semibold mb-1">Surveillance</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Constant tracking of user activities
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="h-2 w-2 rounded-full bg-destructive mt-2" />
|
||||
<div>
|
||||
<h3 class="font-semibold mb-1">Data Exploitation</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Personal information sold as a commodity
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="h-2 w-2 rounded-full bg-destructive mt-2" />
|
||||
<div>
|
||||
<h3 class="font-semibold mb-1">Algorithmic Control</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Manipulation of what content you see
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Mission -->
|
||||
<section class="border-t border-border">
|
||||
<div class="container py-24">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
<Card class="border-2 order-2 lg:order-1">
|
||||
<CardContent class="p-8">
|
||||
<div class="space-y-6">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="h-2 w-2 rounded-full bg-primary mt-2" />
|
||||
<div>
|
||||
<h3 class="font-semibold mb-1">No Central Authority</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Peer-to-peer connections remove central control
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="h-2 w-2 rounded-full bg-primary mt-2" />
|
||||
<div>
|
||||
<h3 class="font-semibold mb-1">End-to-End Encryption</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Communications secured and private
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="h-2 w-2 rounded-full bg-primary mt-2" />
|
||||
<div>
|
||||
<h3 class="font-semibold mb-1">User Ownership</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
You own your identity and data
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="h-2 w-2 rounded-full bg-primary mt-2" />
|
||||
<div>
|
||||
<h3 class="font-semibold mb-1">Open Source</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Transparency through open code
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div class="order-1 lg:order-2">
|
||||
<div
|
||||
class="inline-flex items-center gap-2 px-3 py-1 text-sm bg-primary/10
|
||||
text-primary rounded-full border border-primary/20 mb-6"
|
||||
>
|
||||
<Target class="h-4 w-4" />
|
||||
Our Mission
|
||||
</div>
|
||||
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-6">
|
||||
Giving Control Back to Users
|
||||
</h2>
|
||||
|
||||
<div class="space-y-4 text-muted-foreground leading-relaxed">
|
||||
<p>
|
||||
We're building a social network based on privacy, free expression and autonomy.
|
||||
</p>
|
||||
|
||||
<p class="text-lg font-semibold text-foreground">
|
||||
A truly peer-to-peer network where no one can censor or exploit you.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Decentralization + encryption + open source = independence.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Technology -->
|
||||
<section class="border-t border-border bg-card">
|
||||
<div class="container py-24">
|
||||
<div class="max-w-3xl mx-auto text-center mb-16">
|
||||
<div
|
||||
class="inline-flex items-center gap-2 px-3 py-1 text-sm bg-accent/10
|
||||
text-accent rounded-full border border-accent/20 mb-6"
|
||||
>
|
||||
<Zap class="h-4 w-4" />
|
||||
Technology
|
||||
</div>
|
||||
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-6">
|
||||
Built on Modern P2P Technology
|
||||
</h2>
|
||||
|
||||
<p class="text-xl text-muted-foreground">
|
||||
Modern decentralized tech for privacy and reliability.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<Card>
|
||||
<CardContent class="pt-6">
|
||||
<h3 class="text-xl font-bold mb-3">Peer-to-Peer Architecture</h3>
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
Direct peer communication without servers.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent class="pt-6">
|
||||
<h3 class="text-xl font-bold mb-3">Strong Encryption</h3>
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
End-to-end encrypted messages and posts.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent class="pt-6">
|
||||
<h3 class="text-xl font-bold mb-3">Modular Design</h3>
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
Expand with modules: chat, files, social media, etc.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent class="pt-6">
|
||||
<h3 class="text-xl font-bold mb-3">Distributed Network</h3>
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
No servers to shut down, no central DB to hack.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA -->
|
||||
<section class="border-t border-border">
|
||||
<div class="container py-24">
|
||||
<div class="max-w-3xl mx-auto text-center space-y-6">
|
||||
<h2 class="text-3xl md:text-4xl font-bold">Join the Movement</h2>
|
||||
|
||||
<p class="text-xl text-muted-foreground">
|
||||
Download the app and experience social media without corporate control.
|
||||
</p>
|
||||
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<RouterLink to="/downloads">
|
||||
<Button size="lg">Download Now</Button>
|
||||
</RouterLink>
|
||||
|
||||
<RouterLink to="/how-it-works">
|
||||
<Button size="lg" variant="outline">Learn How It Works</Button>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Card from "@/components/ui/Card.vue"
|
||||
import CardContent from "@/components/ui/CardContent.vue"
|
||||
import Button from "@/components/ui/Button.vue"
|
||||
|
||||
import { AlertCircle, Target, Zap } from "lucide-vue-next"
|
||||
</script>
|
||||
96
src/views/Article.vue
Normal file
96
src/views/Article.vue
Normal file
@@ -0,0 +1,96 @@
|
||||
<template>
|
||||
<div class="flex flex-col">
|
||||
<!-- Hero -->
|
||||
<section class="container py-24 md:py-32">
|
||||
<div class="max-w-3xl mx-auto text-center">
|
||||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">{{ article?.title }}</h1>
|
||||
<div class="flex justify-center items-center gap-6 text-sm text-muted-foreground mb-4">
|
||||
<span class="flex items-center gap-1">
|
||||
<User class="h-4 w-4" /> {{ article?.author }}
|
||||
</span>
|
||||
<span class="flex items-center gap-1">
|
||||
<Calendar class="h-4 w-4" /> {{ article?.date }}
|
||||
</span>
|
||||
<span class="px-2 py-1 bg-muted rounded text-xs">{{ article?.category }}</span>
|
||||
</div>
|
||||
<p class="text-muted-foreground leading-relaxed">{{ article?.excerpt }}</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Article Content -->
|
||||
<section class="border-t border-border bg-card">
|
||||
<div class="container py-16">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<Card>
|
||||
<CardContent class="p-8">
|
||||
<div v-html="articleContent"></div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Back to Blog -->
|
||||
<section class="container py-16 text-center">
|
||||
<Button asChild variant="outline">
|
||||
<RouterLink to="/blog" class="flex items-center gap-2">
|
||||
<ArrowRight class="h-4 w-4 rotate-180" />
|
||||
Back to Blog
|
||||
</RouterLink>
|
||||
</Button>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Card from "@/components/ui/Card.vue"
|
||||
import CardContent from "@/components/ui/CardContent.vue"
|
||||
import Button from "@/components/ui/Button.vue"
|
||||
import { RouterLink, useRoute } from "vue-router"
|
||||
import { Calendar, User, ArrowRight } from "lucide-vue-next"
|
||||
|
||||
// Dados de posts (mesmos da página de blog)
|
||||
const posts = [
|
||||
{
|
||||
title: "The Case for Decentralized Social Media",
|
||||
excerpt:
|
||||
"Why the future of social networking must be peer-to-peer, and how centralized platforms have failed users through censorship, surveillance, and data exploitation.",
|
||||
author: "Core Team",
|
||||
date: "December 5, 2024",
|
||||
category: "Philosophy",
|
||||
slug: "case-for-decentralization",
|
||||
content: "<p>The future of social networking must shift toward peer-to-peer (P2P) models because centralized platforms have consistently failed users by enabling censorship, surveillance, and data exploitation, undermining user privacy and freedom of expression. P2P networks decentralize control, empowering individuals to communicate directly without intermediaries, thereby reducing the risks of arbitrary content suppression and government or corporate overreach. Additionally, P2P systems inherently enhance privacy, as data is distributed rather than stored in centralized servers vulnerable to breaches and misuse. This paradigm shift fosters a more open, resilient, and user-centric social networking environment, restoring trust and sovereignty over personal information and online interactions.</p>"
|
||||
},
|
||||
{
|
||||
title: "Understanding P2P Networking",
|
||||
excerpt:
|
||||
"A deep dive into how peer-to-peer networks function, the challenges they solve, and why they're more resilient than traditional client-server architectures.",
|
||||
author: "Tech Team",
|
||||
date: "November 28, 2024",
|
||||
category: "Technology",
|
||||
slug: "understanding-p2p",
|
||||
content: "<p>Here we explain how P2P networks work and why they're important...</p>"
|
||||
},
|
||||
{
|
||||
title: "Building Privacy-First Applications",
|
||||
excerpt:
|
||||
"How we designed our platform with privacy as the foundation, not an afterthought. Learn about the cryptographic principles that protect user data.",
|
||||
author: "Security Team",
|
||||
date: "November 20, 2024",
|
||||
category: "Security",
|
||||
slug: "privacy-first-apps",
|
||||
content: "<p>Content about privacy-first applications and cryptography...</p>"
|
||||
},
|
||||
// ... adicionar os demais posts conforme necessário
|
||||
]
|
||||
|
||||
// Pegar o slug da rota
|
||||
const route = useRoute()
|
||||
const slug = route.params.slug
|
||||
|
||||
// Encontrar o artigo correspondente
|
||||
const article = posts.find((p) => p.slug === slug)
|
||||
|
||||
// Para demo, o conteúdo do artigo pode vir de Markdown convertido para HTML ou API
|
||||
const articleContent = article?.content || "<p>Article not found.</p>"
|
||||
</script>
|
||||
164
src/views/Blog.vue
Normal file
164
src/views/Blog.vue
Normal file
@@ -0,0 +1,164 @@
|
||||
<template>
|
||||
<div class="flex flex-col">
|
||||
<!-- Hero -->
|
||||
<section class="container py-24 md:py-32">
|
||||
<div class="max-w-3xl mx-auto text-center">
|
||||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-balance">Blog</h1>
|
||||
<p class="text-xl text-muted-foreground">
|
||||
Thoughts on digital freedom, decentralization, privacy, and the future of social networking
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Featured Post -->
|
||||
<section class="border-t border-border bg-card">
|
||||
<div class="container py-16">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<Card class="border-2">
|
||||
<CardContent class="p-8">
|
||||
<div class="inline-block px-3 py-1 text-sm bg-primary/10 text-primary rounded-full mb-4">
|
||||
Featured
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold mb-4">{{ posts[0].title }}</h2>
|
||||
<div class="flex items-center gap-4 text-sm text-muted-foreground mb-4">
|
||||
<span class="flex items-center gap-1">
|
||||
<User class="h-4 w-4" />
|
||||
{{ posts[0].author }}
|
||||
</span>
|
||||
<span class="flex items-center gap-1">
|
||||
<Calendar class="h-4 w-4" />
|
||||
{{ posts[0].date }}
|
||||
</span>
|
||||
<span class="px-2 py-1 bg-muted rounded text-xs">{{ posts[0].category }}</span>
|
||||
</div>
|
||||
<p class="text-muted-foreground leading-relaxed mb-6">{{ posts[0].excerpt }}</p>
|
||||
<Button asChild>
|
||||
<RouterLink :to="`/blog/${posts[0].slug}`" class="flex items-center gap-1">
|
||||
Read Article
|
||||
<ArrowRight class="ml-2 h-4 w-4" />
|
||||
</RouterLink>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Recent Posts -->
|
||||
<section class="border-t border-border">
|
||||
<div class="container py-24">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h2 class="text-3xl font-bold mb-8">Recent Articles</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<Card v-for="post in posts.slice(1)" :key="post.slug">
|
||||
<CardContent class="pt-6">
|
||||
<div class="mb-3">
|
||||
<span class="px-2 py-1 bg-muted rounded text-xs text-muted-foreground">{{ post.category }}</span>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-3">{{ post.title }}</h3>
|
||||
<p class="text-sm text-muted-foreground leading-relaxed mb-4">{{ post.excerpt }}</p>
|
||||
<div class="flex items-center gap-3 text-xs text-muted-foreground mb-4">
|
||||
<span class="flex items-center gap-1">
|
||||
<User class="h-3 w-3" />
|
||||
{{ post.author }}
|
||||
</span>
|
||||
<span class="flex items-center gap-1">
|
||||
<Calendar class="h-3 w-3" />
|
||||
{{ post.date }}
|
||||
</span>
|
||||
</div>
|
||||
<Button asChild variant="ghost" size="sm" class="p-0 h-auto">
|
||||
<RouterLink :to="`/blog/${post.slug}`" class="flex items-center gap-1">
|
||||
Read More
|
||||
<ArrowRight class="h-4 w-4" />
|
||||
</RouterLink>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Categories -->
|
||||
<section class="border-t border-border bg-card">
|
||||
<div class="container py-24">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h2 class="text-3xl font-bold mb-8">Browse by Category</h2>
|
||||
<div class="flex flex-wrap gap-3">
|
||||
<Button v-for="category in categories" :key="category" asChild variant="outline">
|
||||
<RouterLink :to="`/blog/category/${category.toLowerCase()}`">{{ category }}</RouterLink>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Card from "@/components/ui/Card.vue"
|
||||
import CardContent from "@/components/ui/CardContent.vue"
|
||||
import Button from "@/components/ui/Button.vue"
|
||||
import { RouterLink } from "vue-router"
|
||||
import { Calendar, User, ArrowRight } from "lucide-vue-next"
|
||||
|
||||
const posts = [
|
||||
{
|
||||
title: "The Case for Decentralized Social Media",
|
||||
excerpt:
|
||||
"Why the future of social networking must be peer-to-peer, and how centralized platforms have failed users through censorship, surveillance, and data exploitation.",
|
||||
author: "Core Team",
|
||||
date: "December 5, 2024",
|
||||
category: "Philosophy",
|
||||
slug: "case-for-decentralization",
|
||||
},
|
||||
{
|
||||
title: "Understanding P2P Networking",
|
||||
excerpt:
|
||||
"A deep dive into how peer-to-peer networks function, the challenges they solve, and why they're more resilient than traditional client-server architectures.",
|
||||
author: "Tech Team",
|
||||
date: "November 28, 2024",
|
||||
category: "Technology",
|
||||
slug: "understanding-p2p",
|
||||
},
|
||||
{
|
||||
title: "Building Privacy-First Applications",
|
||||
excerpt:
|
||||
"How we designed our platform with privacy as the foundation, not an afterthought. Learn about the cryptographic principles that protect user data.",
|
||||
author: "Security Team",
|
||||
date: "November 20, 2024",
|
||||
category: "Security",
|
||||
slug: "privacy-first-apps",
|
||||
},
|
||||
{
|
||||
title: "The Network Effect in Decentralized Systems",
|
||||
excerpt:
|
||||
"Can decentralized platforms compete with established giants? Exploring how P2P networks can grow and sustain themselves without corporate backing.",
|
||||
author: "Core Team",
|
||||
date: "November 10, 2024",
|
||||
category: "Philosophy",
|
||||
slug: "network-effect",
|
||||
},
|
||||
{
|
||||
title: "Module Development Guide",
|
||||
excerpt:
|
||||
"A comprehensive guide for developers looking to extend the platform. Learn how to create custom modules while respecting privacy and security.",
|
||||
author: "Dev Team",
|
||||
date: "November 1, 2024",
|
||||
category: "Development",
|
||||
slug: "module-development",
|
||||
},
|
||||
{
|
||||
title: "Digital Freedom in the Modern Age",
|
||||
excerpt:
|
||||
"Why digital freedom matters more than ever in an age of increasing surveillance, censorship, and corporate control over online spaces.",
|
||||
author: "Core Team",
|
||||
date: "October 25, 2024",
|
||||
category: "Philosophy",
|
||||
slug: "digital-freedom",
|
||||
},
|
||||
]
|
||||
|
||||
const categories = ["Philosophy", "Technology", "Security", "Development", "Community", "Updates"]
|
||||
</script>
|
||||
382
src/views/Community.vue
Normal file
382
src/views/Community.vue
Normal file
@@ -0,0 +1,382 @@
|
||||
<script setup>
|
||||
import Card from "@/components/ui/Card.vue"
|
||||
import CardContent from "@/components/ui/CardContent.vue"
|
||||
import Button from "@/components/ui/Button.vue"
|
||||
import { Github, MessageCircle, Bug, Code, Lightbulb, Calendar, Heart, Wallet } from "lucide-vue-next"
|
||||
|
||||
const currentYear = new Date().getFullYear()
|
||||
|
||||
// Contribution Guide items
|
||||
const contributionItems = [
|
||||
{
|
||||
title: "Code Contributions",
|
||||
description: "We welcome contributions to the core platform and modules. Fork the repository, make your changes, and submit a pull request.",
|
||||
points: [
|
||||
"Follow the existing code style and conventions",
|
||||
"Write tests for new features",
|
||||
"Update documentation as needed",
|
||||
"Ensure all tests pass before submitting",
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Documentation",
|
||||
description: "Help improve our documentation by fixing errors, adding examples, or writing guides. Clear documentation makes the platform more accessible to everyone.",
|
||||
},
|
||||
{
|
||||
title: "Bug Reports",
|
||||
description: "Found a bug? Report it on our issue tracker with detailed steps to reproduce, your system information, and any relevant logs.",
|
||||
},
|
||||
{
|
||||
title: "Feature Requests",
|
||||
description: "Have an idea for a new feature? Open an issue describing the feature, its use case, and how it fits with the project's goals of decentralization and privacy.",
|
||||
},
|
||||
{
|
||||
title: "Testing",
|
||||
description: "Test beta releases, provide feedback, and help us identify issues before they reach stable releases.",
|
||||
},
|
||||
]
|
||||
|
||||
// Roadmap items
|
||||
const roadmap = [
|
||||
{
|
||||
title: "Q1 2025 - In Progress",
|
||||
dotColor: "bg-primary",
|
||||
tasks: [
|
||||
"Mobile iOS app development",
|
||||
"Improved NAT traversal for restrictive networks",
|
||||
"Group video calling module",
|
||||
"Enhanced content discovery algorithms",
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Q2 2025 - Planned",
|
||||
dotColor: "bg-muted-foreground",
|
||||
tasks: [
|
||||
"Distributed storage for larger media files",
|
||||
"Advanced reputation and trust metrics",
|
||||
"Built-in Tor integration for enhanced anonymity",
|
||||
"Marketplace module for P2P commerce",
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Q3-Q4 2025 - Future",
|
||||
dotColor: "bg-muted-foreground",
|
||||
tasks: [
|
||||
"Cross-platform desktop synchronization",
|
||||
"Blockchain integration for identity verification (optional)",
|
||||
"Plugin ecosystem marketplace",
|
||||
"Advanced analytics dashboard for users",
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
// Recent updates
|
||||
const updates = [
|
||||
{
|
||||
title: "v1.2.0 Released",
|
||||
date: "Dec 1, 2024",
|
||||
description: "Major update with group Waves, improved encryption performance, and enhanced NAT traversal. See full release notes on the downloads page.",
|
||||
},
|
||||
{
|
||||
title: "Community Milestone: 10K Users",
|
||||
date: "Nov 25, 2024",
|
||||
description: "We've reached 10,000 active users on the network! Thank you to everyone who's joined the movement for decentralized social media.",
|
||||
},
|
||||
{
|
||||
title: "New Documentation Portal",
|
||||
date: "Nov 15, 2024",
|
||||
description: "Launched comprehensive documentation with guides for developers, API references, and security best practices.",
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col">
|
||||
<!-- Hero -->
|
||||
<section class="container py-24 md:py-32">
|
||||
<div class="max-w-3xl mx-auto text-center">
|
||||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-balance">Join Our Community</h1>
|
||||
<p class="text-xl text-muted-foreground">
|
||||
Connect with developers, contributors, and users who are building the future of decentralized social media
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Community Links -->
|
||||
<section class="border-t border-border bg-card">
|
||||
<div class="container py-24">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto">
|
||||
<Card class="border-2">
|
||||
<CardContent class="pt-6">
|
||||
<div class="flex items-start gap-4 mb-4">
|
||||
<div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center">
|
||||
<Github class="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-bold mb-2">GitHub</h3>
|
||||
<p class="text-muted-foreground text-sm mb-4">
|
||||
View our source code, report issues, and contribute to development
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button class="w-full">
|
||||
<a href="https://github.com" target="_blank" rel="noopener noreferrer">Visit GitHub</a>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card class="border-2">
|
||||
<CardContent class="pt-6">
|
||||
<div class="flex items-start gap-4 mb-4">
|
||||
<div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center">
|
||||
<MessageCircle class="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-bold mb-2">Discord</h3>
|
||||
<p class="text-muted-foreground text-sm mb-4">
|
||||
Chat with the community, get help, and discuss the platform
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button class="w-full">
|
||||
<a href="https://discord.gg" target="_blank" rel="noopener noreferrer">Join Discord</a>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card class="border-2">
|
||||
<CardContent class="pt-6">
|
||||
<div class="flex items-start gap-4 mb-4">
|
||||
<div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center">
|
||||
<MessageCircle class="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-bold mb-2">Matrix</h3>
|
||||
<p class="text-muted-foreground text-sm mb-4">
|
||||
Decentralized chat alternative for those who prefer Matrix
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button variant="outline" class="w-full bg-transparent">
|
||||
<a href="https://matrix.to" target="_blank" rel="noopener noreferrer">Join Matrix</a>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card class="border-2">
|
||||
<CardContent class="pt-6">
|
||||
<div class="flex items-start gap-4 mb-4">
|
||||
<div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center">
|
||||
<Bug class="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-bold mb-2">Issue Tracker</h3>
|
||||
<p class="text-muted-foreground text-sm mb-4">
|
||||
Report bugs, request features, and track development
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button variant="outline" class="w-full bg-transparent">
|
||||
<a href="https://github.com/issues" target="_blank" rel="noopener noreferrer">View Issues</a>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Support the Project -->
|
||||
<section id="donate" class="border-t border-border bg-primary/5">
|
||||
<div class="container py-24">
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<div class="flex items-center gap-3 mb-8 justify-center">
|
||||
<Heart class="h-8 w-8 text-primary" />
|
||||
<h2 class="text-3xl md:text-4xl font-bold">Support the Project</h2>
|
||||
</div>
|
||||
<div class="text-center mb-8">
|
||||
<p class="text-muted-foreground leading-relaxed text-lg">
|
||||
P2P Network is a 100% open-source project built by volunteers who believe in a free and decentralized
|
||||
internet. Your donations help us cover development costs, infrastructure, and keep the project sustainable.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center mb-12">
|
||||
<Button size="lg" class="text-lg px-8 py-6 h-auto">
|
||||
<Heart class="h-5 w-5 mr-2" />
|
||||
Support Our Mission
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<Card class="border-2">
|
||||
<CardContent class="pt-6">
|
||||
<div class="flex flex-col items-center text-center">
|
||||
<div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4">
|
||||
<Github class="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-2">GitHub Sponsors</h3>
|
||||
<p class="text-muted-foreground text-sm mb-4">
|
||||
Support us directly through GitHub's sponsorship program
|
||||
</p>
|
||||
<Button variant="outline" class="w-full bg-transparent">
|
||||
<a href="https://github.com/sponsors" target="_blank" rel="noopener noreferrer">
|
||||
Sponsor on GitHub
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card class="border-2">
|
||||
<CardContent class="pt-6">
|
||||
<div class="flex flex-col items-center text-center">
|
||||
<div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4">
|
||||
<Heart class="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-2">Patreon</h3>
|
||||
<p class="text-muted-foreground text-sm mb-4">
|
||||
Become a patron and get exclusive updates and perks
|
||||
</p>
|
||||
<Button variant="outline" class="w-full bg-transparent">
|
||||
<a href="https://patreon.com" target="_blank" rel="noopener noreferrer">Join on Patreon</a>
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card class="border-2">
|
||||
<CardContent class="pt-6">
|
||||
<div class="flex flex-col items-center text-center">
|
||||
<div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4">
|
||||
<Wallet class="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-2">Crypto</h3>
|
||||
<p class="text-muted-foreground text-sm mb-4">
|
||||
Donate using Bitcoin, Ethereum, or other cryptocurrencies
|
||||
</p>
|
||||
<Button variant="outline" class="w-full bg-transparent">
|
||||
<a href="#crypto-wallets">View Wallets</a>
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<!-- Crypto Wallets -->
|
||||
<div class="mt-12 p-6 bg-card rounded-lg border border-border">
|
||||
<h3 class="text-lg font-bold mb-4 flex items-center gap-2">
|
||||
<Wallet class="h-5 w-5 text-primary" />
|
||||
Cryptocurrency Wallets
|
||||
</h3>
|
||||
<div class="space-y-4" id="crypto-wallets">
|
||||
<div>
|
||||
<p class="text-sm font-semibold mb-1">Bitcoin (BTC)</p>
|
||||
<code class="text-xs bg-muted p-2 rounded block break-all">
|
||||
bc1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh
|
||||
</code>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-semibold mb-1">Ethereum (ETH)</p>
|
||||
<code class="text-xs bg-muted p-2 rounded block break-all">
|
||||
0x742d35Cc6634C0532925a3b844Bc9e7595f0bEb
|
||||
</code>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-semibold mb-1">Monero (XMR)</p>
|
||||
<code class="text-xs bg-muted p-2 rounded block break-all">
|
||||
4AdUndXHHZ6cfufTMvppY6JwXNouMBzSkbLYfpAV5Usx3skxNgYeYTRj5UzqtReoS44qo9mtmXCqY45DJ852K5Jv2684Rge
|
||||
</code>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-muted-foreground mt-4">
|
||||
All donations go directly to supporting development, infrastructure, and community initiatives. Thank
|
||||
you for your support!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contribution Guide -->
|
||||
<section class="border-t border-border">
|
||||
<div class="container py-24">
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<div class="flex items-center gap-3 mb-8">
|
||||
<Code class="h-8 w-8 text-primary" />
|
||||
<h2 class="text-3xl md:text-4xl font-bold">How to Contribute</h2>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
<Card v-for="(item, index) in contributionItems" :key="index">
|
||||
<CardContent class="pt-6">
|
||||
<h3 class="text-xl font-bold mb-3">{{ item.title }}</h3>
|
||||
<p class="text-muted-foreground leading-relaxed mb-4" v-if="item.description">{{ item.description }}</p>
|
||||
<ul class="space-y-2 text-muted-foreground text-sm" v-if="item.points">
|
||||
<li class="flex gap-2" v-for="(point, i) in item.points" :key="i">
|
||||
<span class="text-primary">•</span>
|
||||
<span>{{ point }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Roadmap -->
|
||||
<section class="border-t border-border bg-card">
|
||||
<div class="container py-24">
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<div class="flex items-center gap-3 mb-8">
|
||||
<div class="h-8 w-8 rounded-lg bg-primary/10 flex items-center justify-center">
|
||||
<Lightbulb class="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<h2 class="text-3xl md:text-4xl font-bold">Development Roadmap</h2>
|
||||
</div>
|
||||
|
||||
<div class="space-y-8">
|
||||
<div v-for="(quarter, index) in roadmap" :key="index">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div :class="['h-3 w-3 rounded-full', quarter.dotColor]" />
|
||||
<h3 class="text-xl font-bold">{{ quarter.title }}</h3>
|
||||
</div>
|
||||
<ul class="space-y-2 text-muted-foreground ml-6">
|
||||
<li class="flex gap-2" v-for="(task, i) in quarter.tasks" :key="i">
|
||||
<span class="text-primary">•</span>
|
||||
<span>{{ task }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Updates -->
|
||||
<section class="border-t border-border">
|
||||
<div class="container py-24">
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<div class="flex items-center gap-3 mb-8">
|
||||
<div class="h-8 w-8 rounded-lg bg-primary/10 flex items-center justify-center">
|
||||
<Calendar class="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<h2 class="text-3xl md:text-4xl font-bold">Recent Updates</h2>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
<Card v-for="(update, index) in updates" :key="index">
|
||||
<CardContent class="pt-6">
|
||||
<div class="flex items-start justify-between mb-2">
|
||||
<h3 class="text-lg font-bold">{{ update.title }}</h3>
|
||||
<span class="text-sm text-muted-foreground">{{ update.date }}</span>
|
||||
</div>
|
||||
<p class="text-muted-foreground text-sm">{{ update.description }}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
189
src/views/Docs.vue
Normal file
189
src/views/Docs.vue
Normal file
@@ -0,0 +1,189 @@
|
||||
<script setup>
|
||||
import Card from "@/components/ui/Card.vue"
|
||||
import CardContent from "@/components/ui/CardContent.vue"
|
||||
import {
|
||||
AccordionRoot,
|
||||
AccordionItem,
|
||||
AccordionHeader,
|
||||
AccordionTrigger,
|
||||
AccordionContent
|
||||
} from "radix-vue"
|
||||
import { Book, Code, Shield, HelpCircle } from "lucide-vue-next"
|
||||
import { RouterLink } from "vue-router"
|
||||
import Button from "@/components/ui/Button.vue"
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col">
|
||||
|
||||
<!-- Hero -->
|
||||
<section class="container py-24 md:py-32">
|
||||
<div class="max-w-3xl mx-auto text-center">
|
||||
<div class="inline-flex items-center gap-2 px-3 py-1 text-sm bg-primary/10 text-primary rounded-full border border-primary/20 mb-6">
|
||||
<Book class="h-4 w-4" />
|
||||
Documentation
|
||||
</div>
|
||||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">Developer Documentation</h1>
|
||||
<p class="text-xl text-muted-foreground">
|
||||
Everything you need to use, customize, and build on our P2P platform
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Quick Links -->
|
||||
<section class="border-t border-border bg-card">
|
||||
<div class="container py-12">
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 max-w-5xl mx-auto">
|
||||
<Button asChild variant="outline" class="h-auto py-4 flex-col gap-2 bg-transparent">
|
||||
<RouterLink to="#installation" class="flex flex-col items-center gap-2">
|
||||
<Book class="h-5 w-5" />
|
||||
<span>Installation</span>
|
||||
</RouterLink>
|
||||
</Button>
|
||||
<Button asChild variant="outline" class="h-auto py-4 flex-col gap-2 bg-transparent">
|
||||
<RouterLink to="#architecture" class="flex flex-col items-center gap-2">
|
||||
<Code class="h-5 w-5" />
|
||||
<span>Architecture</span>
|
||||
</RouterLink>
|
||||
</Button>
|
||||
<Button asChild variant="outline" class="h-auto py-4 flex-col gap-2 bg-transparent">
|
||||
<RouterLink to="#security" class="flex flex-col items-center gap-2">
|
||||
<Shield class="h-5 w-5" />
|
||||
<span>Security</span>
|
||||
</RouterLink>
|
||||
</Button>
|
||||
<Button asChild variant="outline" class="h-auto py-4 flex-col gap-2 bg-transparent">
|
||||
<RouterLink to="#faq" class="flex flex-col items-center gap-2">
|
||||
<HelpCircle class="h-5 w-5" />
|
||||
<span>FAQ</span>
|
||||
</RouterLink>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Installation Guide -->
|
||||
<section id="installation" class="border-t border-border">
|
||||
<div class="container py-24">
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-8">Installation Guide</h2>
|
||||
|
||||
<div class="space-y-6">
|
||||
<!-- Windows -->
|
||||
<Card>
|
||||
<CardContent class="pt-6">
|
||||
<h3 class="text-xl font-bold mb-4">Windows Installation</h3>
|
||||
<ol class="space-y-3 text-muted-foreground">
|
||||
<li class="flex gap-3"><span class="font-semibold text-foreground">1.</span>Download the Windows installer from the downloads page</li>
|
||||
<li class="flex gap-3"><span class="font-semibold text-foreground">2.</span>Verify the SHA256 checksum matches the published value</li>
|
||||
<li class="flex gap-3"><span class="font-semibold text-foreground">3.</span>Run the installer and follow the setup wizard</li>
|
||||
<li class="flex gap-3"><span class="font-semibold text-foreground">4.</span>Launch the application and create your cryptographic identity</li>
|
||||
<li class="flex gap-3"><span class="font-semibold text-foreground">5.</span>Back up your private keys in a secure location</li>
|
||||
</ol>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Linux -->
|
||||
<Card>
|
||||
<CardContent class="pt-6">
|
||||
<h3 class="text-xl font-bold mb-4">Linux Installation</h3>
|
||||
<ol class="space-y-3 text-muted-foreground">
|
||||
<li class="flex gap-3"><span class="font-semibold text-foreground">1.</span>Download the Linux package (.deb or .rpm) or AppImage</li>
|
||||
<li class="flex gap-3"><span class="font-semibold text-foreground">2.</span>Verify checksum: sha256sum p2p-network.deb</li>
|
||||
<li class="flex gap-3"><span class="font-semibold text-foreground">3.</span>Install: sudo dpkg -i p2p-network.deb (for Debian/Ubuntu)</li>
|
||||
<li class="flex gap-3"><span class="font-semibold text-foreground">4.</span>Or make AppImage executable: chmod +x p2p-network.AppImage</li>
|
||||
<li class="flex gap-3"><span class="font-semibold text-foreground">5.</span>Run the application and complete setup</li>
|
||||
</ol>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- macOS -->
|
||||
<Card>
|
||||
<CardContent class="pt-6">
|
||||
<h3 class="text-xl font-bold mb-4">macOS Installation</h3>
|
||||
<ol class="space-y-3 text-muted-foreground">
|
||||
<li class="flex gap-3"><span class="font-semibold text-foreground">1.</span>Download the macOS .dmg file</li>
|
||||
<li class="flex gap-3"><span class="font-semibold text-foreground">2.</span>Verify checksum using Terminal</li>
|
||||
<li class="flex gap-3"><span class="font-semibold text-foreground">3.</span>Open the .dmg file and drag the app to Applications</li>
|
||||
<li class="flex gap-3"><span class="font-semibold text-foreground">4.</span>Right-click the app and select Open to bypass Gatekeeper</li>
|
||||
<li class="flex gap-3"><span class="font-semibold text-foreground">5.</span>Complete the initial setup and back up your keys</li>
|
||||
</ol>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Android -->
|
||||
<Card>
|
||||
<CardContent class="pt-6">
|
||||
<h3 class="text-xl font-bold mb-4">Android Installation</h3>
|
||||
<ol class="space-y-3 text-muted-foreground">
|
||||
<li class="flex gap-3"><span class="font-semibold text-foreground">1.</span>Enable "Install from Unknown Sources" in Android settings</li>
|
||||
<li class="flex gap-3"><span class="font-semibold text-foreground">2.</span>Download the APK file to your device</li>
|
||||
<li class="flex gap-3"><span class="font-semibold text-foreground">3.</span>Verify the checksum if possible</li>
|
||||
<li class="flex gap-3"><span class="font-semibold text-foreground">4.</span>Tap the APK file to install</li>
|
||||
<li class="flex gap-3"><span class="font-semibold text-foreground">5.</span>Open the app and create your account</li>
|
||||
</ol>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Module Architecture -->
|
||||
<section id="architecture" class="border-t border-border bg-card">
|
||||
<div class="container py-24">
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-8">Module Architecture</h2>
|
||||
<p class="text-muted-foreground leading-relaxed mb-8">
|
||||
The P2P Network is built on a modular architecture where each module handles specific functionality. All
|
||||
modules communicate through encrypted channels and respect the decentralized nature of the network.
|
||||
</p>
|
||||
|
||||
<Card class="mb-8">
|
||||
<CardContent class="pt-6">
|
||||
<h3 class="text-xl font-bold mb-4">Core Modules</h3>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<code class="text-sm font-mono bg-muted px-2 py-1 rounded">core/network</code>
|
||||
<p class="text-sm text-muted-foreground mt-1">Handles peer discovery, connection management, and network protocol</p>
|
||||
</div>
|
||||
<div>
|
||||
<code class="text-sm font-mono bg-muted px-2 py-1 rounded">core/crypto</code>
|
||||
<p class="text-sm text-muted-foreground mt-1">Manages encryption, key generation, and cryptographic operations</p>
|
||||
</div>
|
||||
<div>
|
||||
<code class="text-sm font-mono bg-muted px-2 py-1 rounded">core/storage</code>
|
||||
<p class="text-sm text-muted-foreground mt-1">Local data storage and persistence layer</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardContent class="pt-6">
|
||||
<h3 class="text-xl font-bold mb-4">Feature Modules</h3>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<code class="text-sm font-mono bg-muted px-2 py-1 rounded">modules/chat</code>
|
||||
<p class="text-sm text-muted-foreground mt-1">Direct messaging and group conversations</p>
|
||||
</div>
|
||||
<div>
|
||||
<code class="text-sm font-mono bg-muted px-2 py-1 rounded">modules/social</code>
|
||||
<p class="text-sm text-muted-foreground mt-1">Waves, Currents, profiles, and feeds</p>
|
||||
</div>
|
||||
<div>
|
||||
<code class="text-sm font-mono bg-muted px-2 py-1 rounded">modules/files</code>
|
||||
<p class="text-sm text-muted-foreground mt-1">Peer-to-peer file transfer</p>
|
||||
</div>
|
||||
<div>
|
||||
<code class="text-sm font-mono bg-muted px-2 py-1 rounded">modules/filter</code>
|
||||
<p class="text-sm text-muted-foreground mt-1">Content filtering and preferences</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
219
src/views/Downloads.vue
Normal file
219
src/views/Downloads.vue
Normal file
@@ -0,0 +1,219 @@
|
||||
<script setup>
|
||||
import Card from "@/components/ui/Card.vue"
|
||||
import CardContent from "@/components/ui/CardContent.vue"
|
||||
import Button from "@/components/ui/Button.vue"
|
||||
import { Download, Shield, AlertTriangle } from "lucide-vue-next"
|
||||
import { RouterLink } from "vue-router"
|
||||
|
||||
const downloads = [
|
||||
{
|
||||
platform: "Windows",
|
||||
version: "v1.2.0",
|
||||
size: "45 MB",
|
||||
sha256: "a3f5e9d2c8b1a7f4e6d3c9b2a5f8e1d4c7b0a3f6e9d2c5b8a1f4e7d0c3b6a9f2",
|
||||
},
|
||||
{
|
||||
platform: "Linux",
|
||||
version: "v1.2.0",
|
||||
size: "42 MB",
|
||||
sha256: "b4g6f0e3d9c2b8g5f7e4d0c3b6a9f2e5d8c1b4g7f0e3d6c9b2a5f8e1d4c7b0a3",
|
||||
},
|
||||
{
|
||||
platform: "macOS",
|
||||
version: "v1.2.0",
|
||||
size: "48 MB",
|
||||
sha256: "c5h7g1f4e0d3c9h6g8f5e1d4c7b0a3g8f1e4d7c0b3a6f9e2d5c8b1a4g7f0e3d6",
|
||||
},
|
||||
{
|
||||
platform: "Android APK",
|
||||
version: "v1.2.0",
|
||||
size: "38 MB",
|
||||
sha256: "d6i8h2g5f1e4d0i7h9g6f2e5d8c1b4h9g2f5e8d1c4b7a0f3e6d9c2b5a8g1f4e7",
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col">
|
||||
<!-- Hero -->
|
||||
<section class="container py-24 md:py-32">
|
||||
<div class="max-w-3xl mx-auto text-center">
|
||||
<div
|
||||
class="inline-flex items-center gap-2 px-3 py-1 text-sm bg-primary/10 text-primary rounded-full border border-primary/20 mb-6"
|
||||
>
|
||||
<Download class="h-4 w-4" />
|
||||
Latest Release
|
||||
</div>
|
||||
|
||||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">
|
||||
Download NoSys
|
||||
</h1>
|
||||
|
||||
<p class="text-xl text-muted-foreground mb-8">
|
||||
Get started with decentralized social networking. Choose your platform and join the revolution.
|
||||
</p>
|
||||
|
||||
<Card class="text-left">
|
||||
<CardContent>
|
||||
<Shield class="h-4 w-4" />
|
||||
All downloads are signed and include SHA256 checksums. Always verify checksums before installing.
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Downloads -->
|
||||
<section class="border-t border-border bg-card">
|
||||
<div class="container py-24">
|
||||
<div class="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<Card
|
||||
v-for="download in downloads"
|
||||
:key="download.platform"
|
||||
class="border-2"
|
||||
>
|
||||
<CardContent class="p-6">
|
||||
<div class="flex items-start justify-between mb-4">
|
||||
<div>
|
||||
<h3 class="text-2xl font-bold mb-1">{{ download.platform }}</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
{{ download.version }} • {{ download.size }}
|
||||
</p>
|
||||
</div>
|
||||
<Download class="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
|
||||
<Button class="w-full mb-3">
|
||||
Download for {{ download.platform }}
|
||||
</Button>
|
||||
|
||||
<details class="text-sm">
|
||||
<summary class="cursor-pointer text-muted-foreground hover:text-foreground mb-2">
|
||||
SHA256 Checksum
|
||||
</summary>
|
||||
|
||||
<code class="block p-2 bg-muted rounded text-xs font-mono break-all">
|
||||
{{ download.sha256 }}
|
||||
</code>
|
||||
</details>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Disclaimer -->
|
||||
<section class="border-t border-border">
|
||||
<div class="container py-24">
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<Card class="border-primary/50 bg-primary/5">
|
||||
<AlertTriangle class="h-4 w-4 text-primary" />
|
||||
<CardContent class="text-muted-foreground leading-relaxed">
|
||||
<strong class="text-foreground">Important:</strong>
|
||||
This application is fully decentralized. You must back up your encryption keys. Losing your private key
|
||||
means permanent loss of access.
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Release Notes -->
|
||||
<section class="border-t border-border bg-card">
|
||||
<div class="container py-24">
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<h2 class="text-3xl font-bold mb-8">Release Notes</h2>
|
||||
|
||||
<!-- v1.2.0 -->
|
||||
<div class="space-y-8">
|
||||
<div>
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<h3 class="text-xl font-bold">v1.2.0</h3>
|
||||
<span class="text-sm px-2 py-1 bg-primary/10 text-primary rounded">Latest</span>
|
||||
</div>
|
||||
|
||||
<p class="text-sm text-muted-foreground mb-3">
|
||||
Released on December 1, 2024
|
||||
</p>
|
||||
|
||||
<ul class="space-y-2 text-muted-foreground">
|
||||
<li class="flex gap-2"><span class="text-primary">•</span> Added support for group Waves</li>
|
||||
<li class="flex gap-2"><span class="text-primary">•</span> Improved encryption performance</li>
|
||||
<li class="flex gap-2"><span class="text-primary">•</span> Enhanced NAT traversal</li>
|
||||
<li class="flex gap-2"><span class="text-primary">•</span> Fixed memory leak in file transfer</li>
|
||||
<li class="flex gap-2"><span class="text-primary">•</span> Dark mode improvements</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- v1.1.5 -->
|
||||
<div class="border-t border-border pt-8">
|
||||
<h3 class="text-xl font-bold mb-4">v1.1.5</h3>
|
||||
<p class="text-sm text-muted-foreground mb-3">
|
||||
Released on November 15, 2024
|
||||
</p>
|
||||
<ul class="space-y-2 text-muted-foreground">
|
||||
<li class="flex gap-2"><span class="text-primary">•</span> Network Contract editor</li>
|
||||
<li class="flex gap-2"><span class="text-primary">•</span> Improved peer discovery</li>
|
||||
<li class="flex gap-2"><span class="text-primary">•</span> Fixed large file transfer bug</li>
|
||||
<li class="flex gap-2"><span class="text-primary">•</span> Mobile optimizations</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- v1.1.0 -->
|
||||
<div class="border-t border-border pt-8">
|
||||
<h3 class="text-xl font-bold mb-4">v1.1.0</h3>
|
||||
<p class="text-sm text-muted-foreground mb-3">
|
||||
Released on October 30, 2024
|
||||
</p>
|
||||
<ul class="space-y-2 text-muted-foreground">
|
||||
<li class="flex gap-2"><span class="text-primary">•</span> Introduced Currents</li>
|
||||
<li class="flex gap-2"><span class="text-primary">•</span> Added Filter Module</li>
|
||||
<li class="flex gap-2"><span class="text-primary">•</span> Security improvements</li>
|
||||
<li class="flex gap-2"><span class="text-primary">•</span> Android APK now available</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Verification Guide -->
|
||||
<section class="border-t border-border">
|
||||
<div class="container py-24">
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<h2 class="text-3xl font-bold mb-8">How to Verify Your Download</h2>
|
||||
|
||||
<Card>
|
||||
<CardContent class="pt-6">
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<h3 class="font-semibold mb-2">Windows</h3>
|
||||
<code class="block p-3 bg-muted rounded text-sm font-mono">
|
||||
certutil -hashfile p2p-network-setup.exe SHA256
|
||||
</code>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="font-semibold mb-2">Linux / macOS</h3>
|
||||
<code class="block p-3 bg-muted rounded text-sm font-mono">
|
||||
sha256sum p2p-network-installer.dmg
|
||||
</code>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="font-semibold mb-2">Android</h3>
|
||||
<code class="block p-3 bg-muted rounded text-sm font-mono">
|
||||
sha256sum p2p-network.apk
|
||||
</code>
|
||||
</div>
|
||||
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Compare the output to the checksums above. They must match exactly.
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
116
src/views/Home.vue
Normal file
116
src/views/Home.vue
Normal file
@@ -0,0 +1,116 @@
|
||||
<script setup>
|
||||
import { RouterLink } from 'vue-router'
|
||||
import { Shield, Users, Unlock } from 'lucide-vue-next'
|
||||
|
||||
import Button from '@/components/ui/Button.vue'
|
||||
import Card from '@/components/ui/Card.vue'
|
||||
import CardContent from '@/components/ui/CardContent.vue'
|
||||
|
||||
import DotsMouse from '@/components/ui/canvas/DotsMouse.vue'
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col">
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="container py-24 md:py-32 lg:py-40">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
|
||||
<div class="space-y-6">
|
||||
<div class="inline-block px-3 py-1 text-sm bg-primary/10 text-primary rounded-full border border-primary/20">
|
||||
100% Peer-to-Peer
|
||||
</div>
|
||||
|
||||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight text-balance">
|
||||
A Social Network No One Can Control
|
||||
</h1>
|
||||
|
||||
<p class="text-xl text-muted-foreground text-pretty">
|
||||
Experience true digital freedom with our fully decentralized P2P social network.
|
||||
No central servers. No censorship. No surveillance. Just pure peer-to-peer connections.
|
||||
</p>
|
||||
|
||||
<div class="flex flex-col sm:flex-row gap-4">
|
||||
<Button size="lg" class="text-lg px-8">
|
||||
<RouterLink to="/downloads">Download Now</RouterLink>
|
||||
</Button>
|
||||
|
||||
<Button variant="outline" size="lg" class="text-lg px-8 bg-transparent">
|
||||
<RouterLink to="/how-it-works">Learn More</RouterLink>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<DotsMouse></DotsMouse>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Three Pillars -->
|
||||
<section class="container py-24 border-t border-border">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4">Built on Three Core Principles</h2>
|
||||
<p class="text-xl text-muted-foreground max-w-2xl mx-auto">
|
||||
Our mission is to give you back control of your digital life
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
|
||||
<Card class="border-2">
|
||||
<CardContent class="pt-6">
|
||||
<div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4">
|
||||
<Shield class="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold mb-3">Privacy</h3>
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
End-to-end encryption ensures your data belongs only to you.
|
||||
No corporate surveillance, no data mining, no third-party access.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card class="border-2">
|
||||
<CardContent class="pt-6">
|
||||
<div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4">
|
||||
<Unlock class="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold mb-3">Autonomy</h3>
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
You own your content, connections, and identity.
|
||||
No platform can ban you, shadow ban you, or restrict your reach.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card class="border-2">
|
||||
<CardContent class="pt-6">
|
||||
<div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4">
|
||||
<Users class="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold mb-3">Decentralization</h3>
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
No single point of failure or control.
|
||||
The network runs on peer-to-peer connections,
|
||||
making it resilient and censorship-resistant.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA -->
|
||||
<section class="container py-24 border-t border-border">
|
||||
<div class="max-w-3xl mx-auto text-center space-y-6">
|
||||
<h2 class="text-3xl md:text-4xl font-bold">Ready to Join the Revolution?</h2>
|
||||
<p class="text-xl text-muted-foreground">
|
||||
Download our app and experience a social network built for freedom, not profit.
|
||||
</p>
|
||||
<Button size="lg" class="text-lg px-8">
|
||||
<RouterLink to="/downloads">Get Started</RouterLink>
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
368
src/views/HowItWorks.vue
Normal file
368
src/views/HowItWorks.vue
Normal file
@@ -0,0 +1,368 @@
|
||||
<template>
|
||||
<div class="flex flex-col">
|
||||
|
||||
<!-- Hero -->
|
||||
<section class="container py-24 md:py-32">
|
||||
<div class="max-w-3xl mx-auto text-center">
|
||||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-balance">
|
||||
How Our P2P Network Works
|
||||
</h1>
|
||||
<p class="text-xl text-muted-foreground">
|
||||
Understanding the technology that makes decentralized social networking possible
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- P2P Explanation -->
|
||||
<section class="border-t border-border bg-card">
|
||||
<div class="container py-24">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
|
||||
<!-- Left Text -->
|
||||
<div>
|
||||
<div class="inline-flex items-center gap-2 px-3 py-1 text-sm bg-primary/10 text-primary rounded-full border border-primary/20 mb-6">
|
||||
<Network class="h-4 w-4" />
|
||||
Peer-to-Peer
|
||||
</div>
|
||||
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-6">
|
||||
Direct Connections, No Middlemen
|
||||
</h2>
|
||||
|
||||
<div class="space-y-4 text-muted-foreground leading-relaxed">
|
||||
<p>
|
||||
In traditional social media, all your data flows through corporate servers...
|
||||
</p>
|
||||
<p>
|
||||
<strong class="text-foreground">
|
||||
With P2P, you connect directly to other users.
|
||||
</strong>
|
||||
</p>
|
||||
<p>
|
||||
This architecture makes the network censorship-resistant and resilient...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card -->
|
||||
<Card class="border-2">
|
||||
<CardContent class="p-8">
|
||||
<div class="space-y-8">
|
||||
<div>
|
||||
<h3 class="font-semibold mb-4 text-destructive">Traditional Model</h3>
|
||||
<div class="flex items-center justify-center gap-4">
|
||||
<div class="h-12 w-12 rounded-full bg-muted flex items-center justify-center text-xs">User</div>
|
||||
<div class="text-muted-foreground">→</div>
|
||||
<div class="h-16 w-16 rounded-lg bg-destructive/20 border-2 border-destructive flex items-center justify-center text-xs text-center">
|
||||
Server
|
||||
</div>
|
||||
<div class="text-muted-foreground">→</div>
|
||||
<div class="h-12 w-12 rounded-full bg-muted flex items-center justify-center text-xs">User</div>
|
||||
</div>
|
||||
<p class="text-sm text-muted-foreground mt-4">
|
||||
All data flows through corporate servers
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="font-semibold mb-4 text-primary">P2P Model</h3>
|
||||
<div class="flex items-center justify-center gap-4">
|
||||
<div class="h-12 w-12 rounded-full bg-primary/20 border-2 border-primary flex items-center justify-center text-xs">
|
||||
Peer
|
||||
</div>
|
||||
<div class="text-primary">↔</div>
|
||||
<div class="h-12 w-12 rounded-full bg-primary/20 border-2 border-primary flex items-center justify-center text-xs">
|
||||
Peer
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-sm text-muted-foreground mt-4">
|
||||
Direct connections between users
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Security & Cryptography -->
|
||||
<section class="border-t border-border">
|
||||
<div class="container py-24">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
|
||||
<!-- Card -->
|
||||
<Card class="border-2 order-2 lg:order-1">
|
||||
<CardContent class="p-8">
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<h3 class="font-semibold mb-2">End-to-End Encryption</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Messages are encrypted on your device...
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="font-semibold mb-2">Public Key Cryptography</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
Each user has a cryptographic identity...
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="font-semibold mb-2">Zero-Knowledge Architecture</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
The network operates without any central authority...
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="font-semibold mb-2">Secure by Default</h3>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
All connections are encrypted automatically
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Right Text -->
|
||||
<div class="order-1 lg:order-2">
|
||||
<div class="inline-flex items-center gap-2 px-3 py-1 text-sm bg-primary/10 text-primary rounded-full border border-primary/20 mb-6">
|
||||
<Lock class="h-4 w-4" />
|
||||
Security
|
||||
</div>
|
||||
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-6">
|
||||
Military-Grade Encryption
|
||||
</h2>
|
||||
|
||||
<div class="space-y-4 text-muted-foreground leading-relaxed">
|
||||
<p>
|
||||
Security isn't optional—it's fundamental to our network...
|
||||
</p>
|
||||
<p>
|
||||
Unlike traditional platforms, our encryption ensures only recipients can read content.
|
||||
</p>
|
||||
<p>
|
||||
Your identity is protected by cryptographic keys...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Core Features -->
|
||||
<section class="border-t border-border bg-card">
|
||||
<div class="container py-24">
|
||||
<div class="max-w-3xl mx-auto text-center mb-16">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-6">Understanding the Core Features</h2>
|
||||
<p class="text-xl text-muted-foreground">
|
||||
Our platform consists of key components...
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="max-w-4xl mx-auto space-y-6">
|
||||
|
||||
<!-- Waves -->
|
||||
<Card>
|
||||
<CardContent class="p-6">
|
||||
<div class="flex gap-4">
|
||||
<div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center flex-shrink-0">
|
||||
<FileText class="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-bold mb-2">Waves (Posts)</h3>
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
Waves propagate through peer-to-peer connections...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Currents -->
|
||||
<Card>
|
||||
<CardContent class="p-6">
|
||||
<div class="flex gap-4">
|
||||
<div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center flex-shrink-0">
|
||||
<MessageSquare class="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-bold mb-2">Currents (Comments)</h3>
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
Currents are replies that travel with Waves...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Network Contracts -->
|
||||
<Card>
|
||||
<CardContent class="p-6">
|
||||
<div class="flex gap-4">
|
||||
<div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center flex-shrink-0">
|
||||
<FileText class="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-bold mb-2">Network Contracts</h3>
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
JSON-based rules define how the network operates...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Modules -->
|
||||
<section class="border-t border-border">
|
||||
<div class="container py-24">
|
||||
|
||||
<div class="max-w-3xl mx-auto text-center mb-16">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-6">Modular Architecture</h2>
|
||||
<p class="text-xl text-muted-foreground">
|
||||
Our platform is built with independent modules...
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<AccordionRoot type="single" collapsible class="space-y-4">
|
||||
|
||||
<AccordionItem value="item-1" class="border rounded-lg px-6 bg-card">
|
||||
<AccordionTrigger class="hover:no-underline">
|
||||
<div class="flex items-center gap-3">
|
||||
<MessageSquare class="h-5 w-5 text-primary" />
|
||||
<span class="font-semibold">Chat Module</span>
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent class="text-muted-foreground pt-2 leading-relaxed">
|
||||
Secure peer-to-peer messaging...
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="item-2" class="border rounded-lg px-6 bg-card">
|
||||
<AccordionTrigger class="hover:no-underline">
|
||||
<div class="flex items-center gap-3">
|
||||
<Share2 class="h-5 w-5 text-primary" />
|
||||
<span class="font-semibold">File Transfer Module</span>
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent class="text-muted-foreground pt-2 leading-relaxed">
|
||||
Direct encrypted file-sharing...
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="item-3" class="border rounded-lg px-6 bg-card">
|
||||
<AccordionTrigger class="hover:no-underline">
|
||||
<div class="flex items-center gap-3">
|
||||
<Network class="h-5 w-5 text-primary" />
|
||||
<span class="font-semibold">Middle Man Module</span>
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent class="text-muted-foreground pt-2 leading-relaxed">
|
||||
Relay functionality for restrictive networks...
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="item-4" class="border rounded-lg px-6 bg-card">
|
||||
<AccordionTrigger class="hover:no-underline">
|
||||
<div class="flex items-center gap-3">
|
||||
<Network class="h-5 w-5 text-primary" />
|
||||
<span class="font-semibold">Rendezvous Client/Server</span>
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent class="text-muted-foreground pt-2 leading-relaxed">
|
||||
Peer discovery without revealing identity...
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="item-5" class="border rounded-lg px-6 bg-card">
|
||||
<AccordionTrigger class="hover:no-underline">
|
||||
<div class="flex items-center gap-3">
|
||||
<FileText class="h-5 w-5 text-primary" />
|
||||
<span class="font-semibold">Social Media Module</span>
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent class="text-muted-foreground pt-2 leading-relaxed">
|
||||
Waves, Currents, profiles, feeds — all P2P.
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="item-6" class="border rounded-lg px-6 bg-card">
|
||||
<AccordionTrigger class="hover:no-underline">
|
||||
<div class="flex items-center gap-3">
|
||||
<Filter class="h-5 w-5 text-primary" />
|
||||
<span class="font-semibold">Filter Module</span>
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent class="text-muted-foreground pt-2 leading-relaxed">
|
||||
Client-side content filtering...
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
</AccordionRoot>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA -->
|
||||
<section class="border-t border-border bg-card">
|
||||
<div class="container py-24">
|
||||
<div class="max-w-3xl mx-auto text-center space-y-6">
|
||||
<h2 class="text-3xl md:text-4xl font-bold">
|
||||
Ready to Experience True P2P?
|
||||
</h2>
|
||||
<p class="text-xl text-muted-foreground">
|
||||
Download the app and see decentralized social networking in action
|
||||
</p>
|
||||
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Button size="lg">
|
||||
<RouterLink to="/downloads">Download Now</RouterLink>
|
||||
</Button>
|
||||
|
||||
<Button size="lg" variant="outline">
|
||||
<RouterLink to="/documentation">Read Documentation</RouterLink>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
import Card from '@/components/ui/Card.vue'
|
||||
import CardContent from '@/components/ui/CardContent.vue'
|
||||
|
||||
import {
|
||||
AccordionRoot,
|
||||
AccordionItem,
|
||||
AccordionHeader,
|
||||
AccordionTrigger,
|
||||
AccordionContent
|
||||
} from "radix-vue"
|
||||
|
||||
import Button from '@/components/ui/Button.vue'
|
||||
|
||||
import {
|
||||
Network,
|
||||
Lock,
|
||||
FileText,
|
||||
MessageSquare,
|
||||
Share2,
|
||||
Filter
|
||||
} from 'lucide-vue-next'
|
||||
|
||||
</script>
|
||||
191
src/views/Support.vue
Normal file
191
src/views/Support.vue
Normal file
@@ -0,0 +1,191 @@
|
||||
<script setup>
|
||||
import { ref } from "vue"
|
||||
import Card from "@/components/ui/Card.vue"
|
||||
import CardContent from "@/components/ui/CardContent.vue"
|
||||
import {
|
||||
AccordionRoot,
|
||||
AccordionItem,
|
||||
AccordionHeader,
|
||||
AccordionTrigger,
|
||||
AccordionContent
|
||||
} from "radix-vue"
|
||||
import Button from "@/components/ui/Button.vue"
|
||||
import Input from "@/components/ui/Input.vue"
|
||||
import TextArea from "@/components/ui/TextArea.vue"
|
||||
import Label from "@/components/ui/Label.vue"
|
||||
import { Search, BookOpen, Zap, Mail } from "lucide-vue-next"
|
||||
import { RouterLink } from "vue-router"
|
||||
|
||||
const metadata = {
|
||||
title: "Support - P2P Network",
|
||||
description: "Get help with our decentralized P2P social network platform",
|
||||
}
|
||||
|
||||
const quickLinks = [
|
||||
{ icon: BookOpen, title: "Documentation", description: "Complete technical guides and API reference", href: "/documentation", buttonText: "View Docs" },
|
||||
{ icon: Zap, title: "Quick Start", description: "Get up and running in minutes", href: "#quick-start", buttonText: "Get Started" },
|
||||
{ icon: Mail, title: "Contact Us", description: "Send us a message directly", href: "#contact", buttonText: "Contact Form" }
|
||||
]
|
||||
|
||||
const faqs = [
|
||||
{ value: "item-1", question: "How do I get started?", answer: "Download the app for your platform from the downloads page, install it, and run the setup wizard. The app will generate your cryptographic keys and connect you to the network. Make sure to back up your private key in a secure location." },
|
||||
{ value: "item-2", question: "Is the app really free?", answer: "Yes, completely free and open source. There are no subscriptions, ads, or hidden costs. The project is maintained by the community and supported by voluntary donations." },
|
||||
{ value: "item-3", question: "What if I lose my private key?", answer: "Unfortunately, if you lose your private key, you permanently lose access to your account. There's no password reset or account recovery—this is the trade-off for true decentralization. Always keep secure backups of your keys." },
|
||||
{ value: "item-4", question: "How do I find other users?", answer: "Users can share their public keys through external channels (email, social media, etc.). Once you have someone's public key, you can add them as a connection. The app also has peer discovery features that help you find users based on shared interests." },
|
||||
{ value: "item-5", question: "Why is the app asking for firewall permissions?", answer: "P2P applications need to accept incoming connections from other peers. Your firewall might prompt you to allow this. It's safe—the app uses encrypted connections and doesn't expose your system to security risks." },
|
||||
{ value: "item-6", question: "Can I use this on multiple devices?", answer: "Yes, but you'll need to export your private key from one device and import it on others. Be extremely careful when transferring keys—use secure, encrypted channels and delete the key from insecure locations immediately after import." },
|
||||
{ value: "item-7", question: "How do I report inappropriate content?", answer: "There's no central authority to report to. Instead, use the Filter Module to block content or users you don't want to see. Communities can also establish their own moderation through Network Contracts with democratic voting systems." },
|
||||
{ value: "item-8", question: "Is my internet activity monitored?", answer: "No. All connections are encrypted, and there's no central server logging your activity. Your ISP can see that you're using P2P software but cannot see the content. For maximum privacy, you can route connections through Tor." }
|
||||
]
|
||||
|
||||
const quickStart = [
|
||||
{ title: "Download and Install", description: "Visit the downloads page and get the version for your operating system. Verify the SHA256 checksum before installing." },
|
||||
{ title: "Create Your Identity", description: "Launch the app and follow the setup wizard. The app will generate your cryptographic key pair. Choose a strong passphrase to protect your private key." },
|
||||
{ title: "Back Up Your Keys", description: "Export your private key and store it securely offline. Consider using an encrypted USB drive or password manager. This is critical—without this backup, you can never recover your account." },
|
||||
{ title: "Connect with Peers", description: "Share your public key with friends or join community channels. Add peers by their public keys to start connecting. The app will automatically discover and connect to the network." },
|
||||
{ title: "Start Sharing", description: "Create your first Wave (post), send messages, share files, and explore the decentralized network. You're now part of a social network no one can control!" }
|
||||
]
|
||||
|
||||
const tutorials = [
|
||||
{ title: "Getting Started with P2P Network", duration: "15 minutes" },
|
||||
{ title: "Understanding Network Contracts", duration: "10 minutes" },
|
||||
{ title: "Backing Up and Securing Your Keys", duration: "8 minutes" },
|
||||
{ title: "Advanced Privacy Settings", duration: "12 minutes" }
|
||||
]
|
||||
|
||||
const contactFields = [
|
||||
{ id: "name", label: "Name", component: Input, props: { placeholder: "Your name" } },
|
||||
{ id: "email", label: "Email", component: Input, props: { type: "email", placeholder: "your@email.com" } },
|
||||
{ id: "subject", label: "Subject", component: Input, props: { placeholder: "How can we help?" } },
|
||||
{ id: "message", label: "Message", component: TextArea, props: { placeholder: "Describe your issue or question in detail...", class: "min-h-32" } }
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col">
|
||||
<!-- Hero -->
|
||||
<section class="container py-24 md:py-32">
|
||||
<div class="max-w-3xl mx-auto text-center">
|
||||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-balance">How Can We Help?</h1>
|
||||
<p class="text-xl text-muted-foreground mb-8">
|
||||
Find answers to common questions or reach out to our community
|
||||
</p>
|
||||
|
||||
<!-- Search -->
|
||||
<div class="relative">
|
||||
<Search class="absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
|
||||
<Input placeholder="Search for help..." class="pl-12 h-14 text-lg" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Quick Links -->
|
||||
<section class="border-t border-border bg-card">
|
||||
<div class="container py-12">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto">
|
||||
<Card class="border-2" v-for="(link, i) in quickLinks" :key="i">
|
||||
<CardContent class="pt-6 text-center">
|
||||
<div class="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center mx-auto mb-4">
|
||||
<component :is="link.icon" class="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<h3 class="font-bold mb-2">{{ link.title }}</h3>
|
||||
<p class="text-sm text-muted-foreground mb-4">{{ link.description }}</p>
|
||||
<Button asChild variant="outline" class="w-full bg-transparent">
|
||||
<RouterLink :to="link.href">{{ link.buttonText }}</RouterLink>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FAQ -->
|
||||
<section class="border-t border-border">
|
||||
<div class="container py-24">
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-8">Frequently Asked Questions</h2>
|
||||
<AccordionRoot type="single" collapsible class="space-y-4">
|
||||
<AccordionItem v-for="(item, i) in faqs" :key="i" :value="item.value" class="border rounded-lg px-6 bg-card">
|
||||
<AccordionTrigger>{{ item.question }}</AccordionTrigger>
|
||||
<AccordionContent class="text-muted-foreground leading-relaxed">{{ item.answer }}</AccordionContent>
|
||||
</AccordionItem>
|
||||
</AccordionRoot>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Quick Start Guide -->
|
||||
<section id="quick-start" class="border-t border-border bg-card">
|
||||
<div class="container py-24">
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-8">Quick Start Guide</h2>
|
||||
|
||||
<div class="space-y-6">
|
||||
<Card v-for="(step, i) in quickStart" :key="i">
|
||||
<CardContent class="pt-6">
|
||||
<div class="flex gap-4">
|
||||
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-primary text-primary-foreground flex items-center justify-center font-bold">
|
||||
{{ i + 1 }}
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-lg font-bold mb-2">{{ step.title }}</h3>
|
||||
<p class="text-muted-foreground text-sm leading-relaxed">{{ step.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Tutorials -->
|
||||
<section class="border-t border-border">
|
||||
<div class="container py-24">
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-8">Video Tutorials</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<Card v-for="(video, i) in tutorials" :key="i">
|
||||
<CardContent class="pt-6">
|
||||
<div class="aspect-video bg-muted rounded-lg mb-4 flex items-center justify-center">
|
||||
<span class="text-muted-foreground">Tutorial Video</span>
|
||||
</div>
|
||||
<h3 class="font-bold mb-2">{{ video.title }}</h3>
|
||||
<p class="text-sm text-muted-foreground">{{ video.duration }}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contact Form -->
|
||||
<section id="contact" class="border-t border-border bg-card">
|
||||
<div class="container py-24">
|
||||
<div class="max-w-2xl mx-auto">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-4 text-center">Still Need Help?</h2>
|
||||
<p class="text-muted-foreground text-center mb-8">
|
||||
Send us a message and we'll get back to you as soon as possible
|
||||
</p>
|
||||
|
||||
<Card>
|
||||
<CardContent class="pt-6">
|
||||
<form class="space-y-6">
|
||||
<div class="space-y-2" v-for="field in contactFields" :key="field.id">
|
||||
<Label :for="field.id">{{ field.label }}</Label>
|
||||
<component :is="field.component" v-bind="field.props" />
|
||||
</div>
|
||||
<Button type="submit" class="w-full">Send Message</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<p class="text-sm text-muted-foreground text-center mt-6">
|
||||
You can also reach us at
|
||||
<a href="mailto:support@p2pnetwork.org" class="text-primary hover:underline">support@nosys.org</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user