import components

This commit is contained in:
roryjshelton 2023-05-05 08:02:45 +02:00
parent db8a30d8f3
commit 67d490c385
18 changed files with 784 additions and 14 deletions

255
package-lock.json generated
View File

@ -15,6 +15,7 @@
"@types/react-dom": "^18.2.1",
"astro": "^2.3.2",
"astro-icon": "^0.8.0",
"dynamic-react-grid": "^0.2.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^4.8.0",
@ -502,6 +503,17 @@
"@babel/core": "^7.0.0-0"
}
},
"node_modules/@babel/runtime": {
"version": "7.21.5",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.5.tgz",
"integrity": "sha512-8jI69toZqqcsnqGGqwGS4Qb1VwLOEp4hz+CXPywcvjs60u3B4Pom/U/7rm4W8tMOYEB+E9wgD0mW1l3r8qlI9Q==",
"dependencies": {
"regenerator-runtime": "^0.13.11"
},
"engines": {
"node": ">=6.9.0"
}
},
"node_modules/@babel/template": {
"version": "7.20.7",
"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.20.7.tgz",
@ -631,6 +643,158 @@
"resolved": "https://registry.npmjs.org/@emmetio/scanner/-/scanner-1.0.2.tgz",
"integrity": "sha512-1ESCGgXRgn1r29hRmz8K0G4Ywr5jDWezMgRnICComBCWmg3znLWU8+tmakuM1og1Vn4W/sauvlABl/oq2pve8w=="
},
"node_modules/@emotion/babel-plugin": {
"version": "11.10.8",
"resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.10.8.tgz",
"integrity": "sha512-gxNky50AJL3AlkbjvTARiwAqei6/tNUxDZPSKd+3jqWVM3AmdVTTdpjHorR/an/M0VJqdsuq5oGcFH+rjtyujQ==",
"dependencies": {
"@babel/helper-module-imports": "^7.16.7",
"@babel/runtime": "^7.18.3",
"@emotion/hash": "^0.9.0",
"@emotion/memoize": "^0.8.0",
"@emotion/serialize": "^1.1.1",
"babel-plugin-macros": "^3.1.0",
"convert-source-map": "^1.5.0",
"escape-string-regexp": "^4.0.0",
"find-root": "^1.1.0",
"source-map": "^0.5.7",
"stylis": "4.1.4"
}
},
"node_modules/@emotion/babel-plugin/node_modules/escape-string-regexp": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
"integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
"engines": {
"node": ">=10"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/@emotion/babel-plugin/node_modules/source-map": {
"version": "0.5.7",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
"integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/@emotion/cache": {
"version": "11.10.8",
"resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.10.8.tgz",
"integrity": "sha512-5fyqGHi51LU95o7qQ/vD1jyvC4uCY5GcBT+UgP4LHdpO9jPDlXqhrRr9/wCKmfoAvh5G/F7aOh4MwQa+8uEqhA==",
"dependencies": {
"@emotion/memoize": "^0.8.0",
"@emotion/sheet": "^1.2.1",
"@emotion/utils": "^1.2.0",
"@emotion/weak-memoize": "^0.3.0",
"stylis": "4.1.4"
}
},
"node_modules/@emotion/hash": {
"version": "0.9.0",
"resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.0.tgz",
"integrity": "sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ=="
},
"node_modules/@emotion/is-prop-valid": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz",
"integrity": "sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg==",
"dependencies": {
"@emotion/memoize": "^0.8.0"
}
},
"node_modules/@emotion/memoize": {
"version": "0.8.0",
"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.0.tgz",
"integrity": "sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA=="
},
"node_modules/@emotion/react": {
"version": "11.10.8",
"resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.10.8.tgz",
"integrity": "sha512-ZfGfiABtJ1P1OXqOBsW08EgCDp5fK6C5I8hUJauc/VcJBGSzqAirMnFslhFWnZJ/w5HxPI36XbvMV0l4KZHl+w==",
"dependencies": {
"@babel/runtime": "^7.18.3",
"@emotion/babel-plugin": "^11.10.8",
"@emotion/cache": "^11.10.8",
"@emotion/serialize": "^1.1.1",
"@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
"@emotion/utils": "^1.2.0",
"@emotion/weak-memoize": "^0.3.0",
"hoist-non-react-statics": "^3.3.1"
},
"peerDependencies": {
"react": ">=16.8.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@emotion/serialize": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.1.tgz",
"integrity": "sha512-Zl/0LFggN7+L1liljxXdsVSVlg6E/Z/olVWpfxUTxOAmi8NU7YoeWeLfi1RmnB2TATHoaWwIBRoL+FvAJiTUQA==",
"dependencies": {
"@emotion/hash": "^0.9.0",
"@emotion/memoize": "^0.8.0",
"@emotion/unitless": "^0.8.0",
"@emotion/utils": "^1.2.0",
"csstype": "^3.0.2"
}
},
"node_modules/@emotion/sheet": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.1.tgz",
"integrity": "sha512-zxRBwl93sHMsOj4zs+OslQKg/uhF38MB+OMKoCrVuS0nyTkqnau+BM3WGEoOptg9Oz45T/aIGs1qbVAsEFo3nA=="
},
"node_modules/@emotion/styled": {
"version": "11.10.8",
"resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.10.8.tgz",
"integrity": "sha512-gow0lF4Uw/QEdX2REMhI8v6wLOabPKJ+4HKNF0xdJ2DJdznN6fxaXpQOx6sNkyBhSUL558Rmcu1Lq/MYlVo4vw==",
"dependencies": {
"@babel/runtime": "^7.18.3",
"@emotion/babel-plugin": "^11.10.8",
"@emotion/is-prop-valid": "^1.2.0",
"@emotion/serialize": "^1.1.1",
"@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
"@emotion/utils": "^1.2.0"
},
"peerDependencies": {
"@emotion/react": "^11.0.0-rc.0",
"react": ">=16.8.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@emotion/unitless": {
"version": "0.8.0",
"resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.0.tgz",
"integrity": "sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw=="
},
"node_modules/@emotion/use-insertion-effect-with-fallbacks": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.0.tgz",
"integrity": "sha512-1eEgUGmkaljiBnRMTdksDV1W4kUnmwgp7X9G8B++9GYwl1lUdqSndSriIrTJ0N7LQaoauY9JJ2yhiOYK5+NI4A==",
"peerDependencies": {
"react": ">=16.8.0"
}
},
"node_modules/@emotion/utils": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.0.tgz",
"integrity": "sha512-sn3WH53Kzpw8oQ5mgMmIzzyAaH2ZqFEbozVVBSYp538E06OSE6ytOp7pRAjNQR+Q/orwqdQYJSe2m3hCOeznkw=="
},
"node_modules/@emotion/weak-memoize": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.0.tgz",
"integrity": "sha512-AHPmaAx+RYfZz0eYu6Gviiagpmiyw98ySSlQvCUhVGDRtDFe4DBS0x1bSjdF3gqUDYOczB+yYvBTtEylYSdRhg=="
},
"node_modules/@esbuild/android-arm": {
"version": "0.17.18",
"resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.17.18.tgz",
@ -1178,6 +1342,11 @@
"integrity": "sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==",
"dev": true
},
"node_modules/@types/parse-json": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
"integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA=="
},
"node_modules/@types/parse5": {
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/@types/parse5/-/parse5-6.0.3.tgz",
@ -1525,6 +1694,43 @@
"postcss": "^8.1.0"
}
},
"node_modules/babel-plugin-macros": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
"integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
"dependencies": {
"@babel/runtime": "^7.12.5",
"cosmiconfig": "^7.0.0",
"resolve": "^1.19.0"
},
"engines": {
"node": ">=10",
"npm": ">=6"
}
},
"node_modules/babel-plugin-macros/node_modules/cosmiconfig": {
"version": "7.1.0",
"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
"integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
"dependencies": {
"@types/parse-json": "^4.0.0",
"import-fresh": "^3.2.1",
"parse-json": "^5.0.0",
"path-type": "^4.0.0",
"yaml": "^1.10.0"
},
"engines": {
"node": ">=10"
}
},
"node_modules/babel-plugin-macros/node_modules/yaml": {
"version": "1.10.2",
"resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
"integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
"engines": {
"node": ">= 6"
}
},
"node_modules/bail": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz",
@ -1751,7 +1957,6 @@
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
"integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
"dev": true,
"engines": {
"node": ">=6"
}
@ -2350,6 +2555,19 @@
"node": ">=4"
}
},
"node_modules/dynamic-react-grid": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/dynamic-react-grid/-/dynamic-react-grid-0.2.0.tgz",
"integrity": "sha512-ehkiJXSw6KXer+9xadVSovBybJU3YK2MXyeVT48R2wjGNum0rzWw4AUVQxYTSfom6IdOaMJWeBWCY8VVT1BgHQ==",
"dependencies": {
"@emotion/react": "^11.9.3",
"@emotion/styled": "^11.9.3"
},
"peerDependencies": {
"react": ">=17.0.2",
"react-dom": ">=17.0.2"
}
},
"node_modules/eastasianwidth": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@ -2386,7 +2604,6 @@
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
"integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
"dev": true,
"dependencies": {
"is-arrayish": "^0.2.1"
}
@ -2597,6 +2814,11 @@
"node": ">=8"
}
},
"node_modules/find-root": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
"integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
},
"node_modules/find-up": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@ -3005,6 +3227,14 @@
"url": "https://opencollective.com/unified"
}
},
"node_modules/hoist-non-react-statics": {
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
"dependencies": {
"react-is": "^16.7.0"
}
},
"node_modules/hosted-git-info": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz",
@ -3120,7 +3350,6 @@
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
"integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
"dev": true,
"dependencies": {
"parent-module": "^1.0.0",
"resolve-from": "^4.0.0"
@ -3136,7 +3365,6 @@
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
"integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
"dev": true,
"engines": {
"node": ">=4"
}
@ -3200,8 +3428,7 @@
"node_modules/is-arrayish": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
"integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
"dev": true
"integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg=="
},
"node_modules/is-binary-path": {
"version": "2.1.0",
@ -3426,8 +3653,7 @@
"node_modules/json-parse-even-better-errors": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
"integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
"dev": true
"integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="
},
"node_modules/json-schema-traverse": {
"version": "1.0.0",
@ -4817,7 +5043,6 @@
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
"integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
"dev": true,
"dependencies": {
"callsites": "^3.0.0"
},
@ -4829,7 +5054,6 @@
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
"integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
"dev": true,
"dependencies": {
"@babel/code-frame": "^7.0.0",
"error-ex": "^1.3.1",
@ -4900,7 +5124,6 @@
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
"integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
"dev": true,
"engines": {
"node": ">=8"
}
@ -5519,6 +5742,11 @@
"node": ">=8"
}
},
"node_modules/regenerator-runtime": {
"version": "0.13.11",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
"integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
},
"node_modules/rehype": {
"version": "12.0.1",
"resolved": "https://registry.npmjs.org/rehype/-/rehype-12.0.1.tgz",
@ -6371,6 +6599,11 @@
"node": ">=8"
}
},
"node_modules/stylis": {
"version": "4.1.4",
"resolved": "https://registry.npmjs.org/stylis/-/stylis-4.1.4.tgz",
"integrity": "sha512-USf5pszRYwuE6hg9by0OkKChkQYEXfkeTtm0xKw+jqQhwyjCVLdYyMBK7R+n7dhzsblAWJnGxju4vxq5eH20GQ=="
},
"node_modules/sucrase": {
"version": "3.32.0",
"resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.32.0.tgz",

View File

@ -17,6 +17,7 @@
"@types/react-dom": "^18.2.1",
"astro": "^2.3.2",
"astro-icon": "^0.8.0",
"dynamic-react-grid": "^0.2.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^4.8.0",

BIN
src/components/.DS_Store vendored Normal file

Binary file not shown.

View File

@ -22,7 +22,7 @@ function Navbar() {
</ul>
<div class="transition-opacity duration-150 ease-out nav-menu hamburger" onClick={toggleNav}>
<HiOutlineMenuAlt4 class='icon'/>
</div>
<div class={nav ? 'mobile-menu active class="transition duration-[0.55s] linear"' : 'mobile-menu class="transition duration-[0.55s] linear"'}>
<ul class="mobile-nav">

View File

@ -49,6 +49,7 @@ li {
.hamburger {
display: none;
cursor: default;
}
.mobile-menu {
@ -67,6 +68,7 @@ li {
z-index: 999;
font-size: var(--font-size-xl);
-webkit-tap-highlight-color: transparent;
cursor: default;
}
.mobile-menu {

BIN
src/components/P1/.DS_Store vendored Normal file

Binary file not shown.

View File

@ -0,0 +1,37 @@
---
import "./CtoStyles.css";
---
<div class="cto-container">
<div class="cto-geometric-bg">
<div class="cto-shadow">
<span id="cto"></span>
<div class="shadowdrop">
<h2
class="text-[calc(15px_+_(25_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] text-[color:var(--aquamarine)] uppercase font-bold"
>
community-powered
</h2>
<h3
class="left meme-bp text-[calc(30px_+_(45_-_30)_*_((100vw_-_300px)_/_(1600_-_300)))] min-w-[75vw] z-[999] mt-[0.5em]"
>
Building a new world <wbr /> for your data
</h3>
<h4
class="left rounded-[15px] text-[calc(15px_+_(21_-_15)_*_((100vw_-_300px)_/_(1600_-_300)))] text-[color:var(--cloud)] text-[length:var(--font-size-m)] font-normal not-italic max-w-[550px] leading-[35px] mt-[0.5em]"
>
Right now, Lume has only one full-time developer and limited
helper staff! We need help from developers, fundraisers,
funders, and contributors to bring the new internet to the
masses.
</h4>
<div class="cto-mini-bio">
<div class="cto-info">
<h5 class="cto-name">Derrick Hammer</h5>
<h6 class="cto-title">CTO</h6>
</div>
</div>
</div>
</div>
</div>
</div>

View File

@ -0,0 +1,112 @@
.cto-container {
width: 100%;
transition: 0.5s;
}
.cto-bp {
padding-right: 0%;
transition: 0.5s;
}
.cto-geometric-bg {
background-image: url(../../../assets/geometric-bg.webp);
background-position: 75vh -2vh;
background-size: contain;
background-repeat: no-repeat;
position: relative;
height: 588px;
width: 100%;
transition: 0.5s;
}
.cto-shadow {
border-radius: 72.5px;
width: 100%;
transition: 0.5s;
}
.shadowdrop {
border-radius: 72.5px;
box-shadow: 0px 4px 4px #00000040;
width: 100%;
transition: 0.5s;
}
.cto-mini-bio {
height: 96px;
width: 100%;
object-fit: contain;
display: inline-flex;
justify-content: center;
flex-direction: column;
background-repeat: no-repeat;
background-image: url(../../../assets/cto-avatar.webp);
margin-top: 3vh;
z-index: 999 !important;
}
.cto-info {
margin-left: 7em;
transition: 0.5s;
}
.cto-translucent {
background-color: #020e10ac;
border-radius: 15px;
transition: 0.5s;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
.cto-container {
margin-left: -3em;
background-position: 100px 50px;
background-size: cover;
background-repeat: no-repeat;
background-origin: content-box;
transition: 0.5s;
justify-content: center;
}
.cto-bp {
padding-right: 0%;
transition: 0.5s;
}
.shadowdrop {
border-radius: 72.5px;
box-shadow: 0px 4px 4px #00000040;
margin-left: 12%;
transition: 0.5s;
justify-content: center;
}
.cto-shadow {
align-items: flex-start;
display: flex;
vertical-align: center;
padding-left: 15%;
}
}
@media screen and (min-width: 601px) {
.cto-container {
background-position: 100px 50px;
background-size: cover;
background-repeat: no-repeat;
background-origin: content-box;
transition: 0.5s;
width: 100%;
}
.cto-bp {
padding-right: 0%;
transition: 0.5s;
}
.cto-shadow {
align-items: flex-start;
display: flex;
vertical-align: center;
padding-inline: 15%;
}
}

View File

@ -0,0 +1,63 @@
---
import React from "react";
import Grid from "dynamic-react-grid";
import "./FooterStyles.css";
---
<div class="justify-center bg-[black] list-none items-start pl-[5%];">
<div class="flex flex-row;" style={{ padding: 15 }}>
<Grid row spacing={1}>
<Grid>
<h6>
<div class="footer-logo"></div>
<ul>
<li class="footer-li">
<span class="footer-email"
></span>contact@lumeweb.com
</li>
<li>
<span class="footer-h2"
>Freedom, privacy, <br />ownership.</span
>
</li>
</ul>
</h6>
</Grid>
<Grid>
<h5 class="footer-padding">General</h5><br /><h6>
<li class="footer-li">Home</li>
<li class="footer-li">Get Started</li>
<li class="footer-li">Documentation</li>
<li class="footer-li">Projects</li>
</h6>
</Grid>
<Grid>
<h5 class="footer-padding">Community</h5><br /><h6>
<li class="footer-li">GitHub</li>
<li class="footer-li">Discord</li>
<li class="footer-li">Twitter</li>
<li class="footer-li">facebook</li>
</h6>
</Grid>
<Grid>
<h5 class="footer-padding">Other</h5><br /><h6>
<li class="footer-li">BrowserUniversal</li>
<li class="footer-li">Storage</li>
</h6>
</Grid>
<Grid>
<h5 class="footer-padding">Other</h5><br /><h6>
<li class="footer-li">BrowserUniversal</li>
<li class="footer-li">Storage</li>
</h6>
</Grid>
<Grid>
<h5 class="footer-padding">Support Us</h5><br /><h6>
<li class="footer-li">Donate</li>
<li class="footer-li">Download App</li>
<li class="footer-li">Partnerships</li>
</h6>
</Grid>
</Grid>
</div>
</div>

View File

@ -0,0 +1,68 @@
.footer-logo {
background-image: url(../../../assets/lume-logo.webp);
background-repeat: no-repeat;
background-size: contain;
margin-left: 5px;
height: 55px;
min-width: 150px;
display: inline-block;
text-align: left;
margin-inline: 5px;
margin-top: 3vh;
z-index: 998 !important;
}
.footer-email {
background-image: url(../../../assets/email-icon.webp);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
padding-inline: 10px;
margin-inline: 10px;
height: 14px;
object-fit: cover;
width: 17px;
}
.footer-column {
justify-content: center;
background-color: black;
list-style-type: none;
align-items: flex-start;
vertical-align: center;
padding-inline: 1%;
padding-left: 5%;
}
.footer-container {
display: flex;
flex-direction: row;
}
.footer-padding {
display: inline-block;
text-align: left;
font-family: var(--font-family-jaldi);
font-size: calc(15px + (21 - 10) * ((100vw - 300px) / (1600 - 300)));
margin-inline: 5px;
margin-top: 5vh;
}
.footer-li {
color: #808687;
font-family: var(--font-family-jaldi);
font-size: calc(10px + (21 - 10) * ((100vw - 300px) / (1600 - 300)));
font-weight: 100;
font-style: normal;
padding-left: 0;
line-height: 1px;
margin-inline: 5px;
}
.footer-h2 {
font-size: calc(15px + (25 - 10) * ((100vw - 300px) / (1600 - 300)));
color: var(--aquamarine);
line-height: 1vh;
z-index: 999;
}

View File

@ -0,0 +1,80 @@
---
import React from "react";
import Grid from "dynamic-react-grid";
import "./GridStyles.css";
---
<div class="grid-grid">
<div class="top-left bordered">
<h5
class="text-[calc(15px_+_(29_-_15)_*_((100vw_-_300px)_/_(1600_-_300)))] text-[color:var(--white)] font-normal not-italic max-w-[300] leading-8;"
>
Web3 Universal Storage
</h5><br /><h6
class="text-[calc(15px_+_(19_-_15)_*_((100vw_-_300px)_/_(1600_-_300)))] text-[color:var(--cloud)] font-thin not-italic max-w-[300];"
>
Get access to a universal network drive, powered by the Web3/dWeb
cloud. Enjoy portability to any device or platform you wish.
</h6>
</div>
<div class="top-mid bordered">
<h5
class="text-[calc(15px_+_(29_-_15)_*_((100vw_-_300px)_/_(1600_-_300)))] text-[color:var(--white)] font-normal not-italic max-w-[300] leading-8;"
>
Web3 Gateway
</h5><br /><h6
class="text-[calc(15px_+_(19_-_15)_*_((100vw_-_300px)_/_(1600_-_300)))] text-[color:var(--cloud)] font-thin not-italic max-w-[300];"
>
Install the Lume Web3 Extension and have a 1-click gateway into the
Web3 internet on Opera, Vivaldi, Edge, and Firefox.
</h6>
</div>
<div class="top-right bordered">
<h5
class="text-[calc(15px_+_(29_-_15)_*_((100vw_-_300px)_/_(1600_-_300)))] text-[color:var(--white)] font-normal not-italic max-w-[300] leading-8;"
>
Build Your Site,<br />Censorship Free
</h5><br /><h6
class="text-[calc(15px_+_(19_-_15)_*_((100vw_-_300px)_/_(1600_-_300)))] text-[color:var(--cloud)] font-thin not-italic max-w-[300];"
>
Combining Lume and Skynet technologies, you can build a website just
like you are on the Web2 internet.
</h6>
</div>
<div class="bot-left bordered">
<h5
class="text-[calc(15px_+_(29_-_15)_*_((100vw_-_300px)_/_(1600_-_300)))] text-[color:var(--white)] font-normal not-italic max-w-[300] leading-8;"
>
Web3 Universal Storage
</h5><br /><h6
class="text-[calc(15px_+_(19_-_15)_*_((100vw_-_300px)_/_(1600_-_300)))] text-[color:var(--cloud)] font-thin not-italic max-w-[300];"
>
Get access to a universal network drive, powered by the Web3/dWeb
cloud. Enjoy portability to any device or platform you wish.
</h6>
</div>
<div class="bot-mid bordered">
<h5
class="text-[calc(15px_+_(29_-_15)_*_((100vw_-_300px)_/_(1600_-_300)))] text-[color:var(--white)] font-normal not-italic max-w-[300] leading-8;"
>
Web3 Gateway
</h5><br /><h6
class="text-[calc(15px_+_(19_-_15)_*_((100vw_-_300px)_/_(1600_-_300)))] text-[color:var(--cloud)] font-thin not-italic max-w-[300];"
>
Install the Lume Web3 Extension and have a 1-click gateway into the
Web3 internet on Opera, Vivaldi, Edge, and Firefox.
</h6>
</div>
<div class="bot-right bordered">
<h5
class="text-[calc(15px_+_(29_-_15)_*_((100vw_-_300px)_/_(1600_-_300)))] text-[color:var(--white)] font-normal not-italic max-w-[300] leading-8;"
>
Build Your Site,<br />Censorship Free
</h5><br /><h6
class="text-[calc(15px_+_(19_-_15)_*_((100vw_-_300px)_/_(1600_-_300)))] text-[color:var(--cloud)] font-thin not-italic max-w-[300];"
>
Combining Lume and Skynet technologies, you can build a website just
like you are on the Web2 internet.
</h6>
</div>
</div>

View File

@ -0,0 +1,59 @@
.grid-grid {
display: grid;
grid-template-columns: 25% 25% 25%;
grid-template-rows: 5% 5%;
gap: 44.5% 0.5%;
margin-block: 15vh;
grid-auto-flow: row;
justify-content: center;
align-content: center;
justify-items: center;
align-items: center;
grid-template-areas:
"top-left top-mid top-right"
"bot-left bot-mid bot-right";
}
.top-left {
grid-area: top-left;
padding: 30px;
}
.top-mid {
grid-area: top-mid;
padding: 30px;
}
.top-right {
grid-area: top-right;
padding: 30px;
}
.bot-left {
grid-area: bot-left;
padding: 30px;
}
.bot-mid {
grid-area: bot-mid;
padding: 30px;
}
.bot-right {
grid-area: bot-right;
padding: 30px;
}
.bordered {
border: 2px solid transparent;
border-radius: 5px;
background-color: var(--blue-charcoal);
transition: 0.3s;
margin: 0.5em;
}
.bordered:hover {
border: 2px solid var(--aquamarine);
border-radius: 5px;
transition: 0.1s;
}

View File

@ -0,0 +1,12 @@
---
import "./MessageStyles.css";
---
<div class="message-container">
<div class="message-header">A message from Derrick</div>
<div class="message-content">
Web3 gives people control over their data, privacy, and ownership.
Lume's affordable Web3 tech aims to speed up the transition from Web2 to
Web3, which matters for privacy and security.
</div>
</div>

View File

@ -0,0 +1,29 @@
.message-container {
align-items: flex-start;
background-color: var(--aquamarine);
display: flex;
flex-direction: column;
gap: 7px;
min-height: 237px;
padding: 5% 12%;
width: 120%;
margin-left: -1em;
}
.message-header {
color: var(--blue-charcoal-2);
font-family: var(--font-family-jetbrains_mono);
font-size: calc(25px + (32 - 24) * ((100vw - 300px) / (1600 - 300)));
font-weight: 700;
line-height: 2em;
font-style: normal;
}
.message-content {
color: var(--blue-charcoal-2);
font-family: var(--font-family-jaldi);
font-size: calc(15px + (21 - 14) * ((100vw - 300px) / (1600 - 300)));
max-width: 85%;
font-weight: 400;
font-style: normal;
}

View File

@ -0,0 +1,17 @@
---
import "./SocialsStyles.css";
---
<div class="centered">
<div>
<h2 class="centered">get in touch</h2>
<div class="centered">
<div class="socials-wrapper">
<div class="gitHub"></div>
<div class="discord"></div>
<div class="twitter"></div>
<div class="fb"></div>
</div>
</div>
</div>
</div>

View File

@ -0,0 +1,47 @@
.socials-wrapper {
display: flex;
margin-left: -5%;
padding-bottom: 5vh;
margin-bottom: 5vh;
}
.gitHub {
background-image: url(../../../assets/github-logo.webp);
background-position: 50% 50%;
background-size: contain;
background-repeat: no-repeat;
height: 48.3px;
width: 55px;
}
.discord {
background-image: url(../../../assets/discord-logo.webp);
background-position: 50% 50%;
background-size: contain;
background-repeat: no-repeat;
height: 48.3px;
width: 48.3px;
margin-top: 0.4vh;
margin-left: 18px;
}
.twitter {
background-image: url(../../../assets/twitter-logo.webp);
background-position: 50% 50%;
background-size: contain;
background-repeat: no-repeat;
height: 48.3px;
width: 55px;
margin-left: 18px;
}
.fb {
background-image: url(../../../assets/fb-logo.webp);
background-position: 50% 50%;
background-size: contain;
background-repeat: no-repeat;
margin-top: 0.5vh;
height: 42px;
width: 50px;
margin-left: 18px;
}

View File

@ -46,7 +46,7 @@ a:visited {
body {
font-family: "JetBrains Mono", sans-serif;
background-color: #031418;
background-color: rgb(3 20 24);
color: white;
}
@ -65,7 +65,7 @@ body {
}
.home {
background-color: #031418;
background-color: rgb(3 20 24);
flex-direction: column;
align-items: center;
display: absolute;

View File

@ -1,8 +1,13 @@
---
import Navbar from "../components/Navbar/Navbar.jsx";
import CTO from "../components/P1/CTO/CTO.astro";
import Footer from "../components/P1/Footer/Footer.astro";
import Grids from "../components/P1/Grid/Grid.astro";
import Header from "../components/P1/Header/Header.astro";
import Meme from "../components/P1/Meme/Meme.astro";
import Message from "../components/P1/Message/Message.astro";
import Powered from "../components/P1/Powered/Powered.astro";
import Socials from "../components/P1/Socials/Socials.astro";
import Vision from "../components/P1/Vision/Vision.astro";
import Whatisweb3 from "../components/P1/Whatisweb3/Whatisweb3.astro";
import "../index.css";
@ -31,5 +36,10 @@ import "../index.css";
<Whatisweb3 />
<Powered />
<Meme />
<Grids />
<Socials />
<CTO />
<Message />
<Footer />
</body>
</html>