import components

package-lock.json

@@ -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==",
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg=="
-      "dev": true
     },
     "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==",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="
-      "dev": true
     },
     "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",

package.json

@@ -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",

src/components/Navbar/Navbar.jsx

@@ -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">

src/components/Navbar/NavbarStyles.css

@@ -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 {

src/components/P1/CTO/CTO.astro

@@ -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>

src/components/P1/CTO/CTOStyles.css

@@ -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%;
+    }
+}

src/components/P1/Footer/Footer.astro

@@ -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>

src/components/P1/Footer/FooterStyles.css

@@ -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;
+
+}

src/components/P1/Grid/Grid.astro

@@ -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>

src/components/P1/Grid/GridStyles.css

@@ -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;
+}

src/components/P1/Message/Message.astro

@@ -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>

src/components/P1/Message/MessageStyles.css

@@ -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;
+}

src/components/P1/Socials/Socials.astro

@@ -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>

src/components/P1/Socials/SocialsStyles.css

@@ -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;
+}

src/index.css

@@ -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;

src/pages/index.astro

@@ -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>