From 3535cfff78404cc9df5b9bb50fdbe63eb9422a84 Mon Sep 17 00:00:00 2001 From: roryjshelton <76418221+roryjshelton@users.noreply.github.com> Date: Thu, 27 Apr 2023 17:40:05 -0700 Subject: [PATCH] header -> client:load --- astro.config.mjs | 4 +-- package-lock.json | 13 +++---- package.json | 2 ++ src/components/P1/Header/Header.astro | 4 +-- .../P1/Header/HeaderContent BACKUP.astro | 34 ------------------- src/components/P1/Header/HeaderContent.astro | 30 ---------------- src/components/P1/Header/HeaderContent.jsx | 30 ++++++++++++++++ src/components/P1/Vision/Vision.astro | 21 +++++++++--- src/components/P1/Vision/VisionStyles.css | 27 --------------- 9 files changed, 57 insertions(+), 108 deletions(-) delete mode 100644 src/components/P1/Header/HeaderContent BACKUP.astro delete mode 100644 src/components/P1/Header/HeaderContent.astro create mode 100644 src/components/P1/Header/HeaderContent.jsx diff --git a/astro.config.mjs b/astro.config.mjs index e8f9037..55e4f46 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -1,9 +1,9 @@ import { defineConfig } from 'astro/config'; import tailwind from "@astrojs/tailwind"; - +import react from '@astrojs/react'; import image from "@astrojs/image"; // https://astro.build/config export default defineConfig({ - integrations: [tailwind(), image()] + integrations: [tailwind(), image(), react()] }); \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 85d27f3..226aa89 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,8 @@ "@astrojs/image": "^0.16.6", "@astrojs/react": "^2.1.1", "@astrojs/tailwind": "^3.1.1", + "@types/react": "^18.2.0", + "@types/react-dom": "^18.2.1", "astro": "^2.3.2", "astro-icon": "^0.8.0", "react": "^18.2.0", @@ -1105,14 +1107,12 @@ "node_modules/@types/prop-types": { "version": "15.7.5", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", - "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==", - "peer": true + "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==" }, "node_modules/@types/react": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.0.tgz", "integrity": "sha512-0FLj93y5USLHdnhIhABk83rm8XEGA7kH3cr+YUlvxoUGp1xNt/DINUMvqPxLyOQMzLmZe8i4RTHbvb8MC7NmrA==", - "peer": true, "dependencies": { "@types/prop-types": "*", "@types/scheduler": "*", @@ -1123,7 +1123,6 @@ "version": "18.2.1", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.1.tgz", "integrity": "sha512-8QZEV9+Kwy7tXFmjJrp3XUKQSs9LTnE0KnoUb0YCguWBiNW0Yfb2iBMYZ08WPg35IR6P3Z0s00B15SwZnO26+w==", - "peer": true, "dependencies": { "@types/react": "*" } @@ -1136,8 +1135,7 @@ "node_modules/@types/scheduler": { "version": "0.16.3", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz", - "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==", - "peer": true + "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==" }, "node_modules/@types/unist": { "version": "2.0.6", @@ -1935,8 +1933,7 @@ "node_modules/csstype": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", - "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==", - "peer": true + "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" }, "node_modules/data-uri-to-buffer": { "version": "4.0.1", diff --git a/package.json b/package.json index 047b0f3..8d89b0f 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,8 @@ "@astrojs/image": "^0.16.6", "@astrojs/react": "^2.1.1", "@astrojs/tailwind": "^3.1.1", + "@types/react": "^18.2.0", + "@types/react-dom": "^18.2.1", "astro": "^2.3.2", "astro-icon": "^0.8.0", "react": "^18.2.0", diff --git a/src/components/P1/Header/Header.astro b/src/components/P1/Header/Header.astro index 14c9df4..c4c49de 100644 --- a/src/components/P1/Header/Header.astro +++ b/src/components/P1/Header/Header.astro @@ -1,6 +1,6 @@ --- import "./HeaderStyles.css"; -import HeaderContent from "./HeaderContent.astro"; +import HeaderContent from "./HeaderContent.jsx"; ---
@@ -8,7 +8,7 @@ import HeaderContent from "./HeaderContent.astro"; class="text-[color:var(--white)] font-normal not-italic tracking-[-6px] leading-[calc(75px_+_(110_-_75)_*_((100vw_-_300px)_/_(1600_-_300)))] text-center w-full" >

- +

diff --git a/src/components/P1/Header/HeaderContent BACKUP.astro b/src/components/P1/Header/HeaderContent BACKUP.astro deleted file mode 100644 index 605ba30..0000000 --- a/src/components/P1/Header/HeaderContent BACKUP.astro +++ /dev/null @@ -1,34 +0,0 @@ ---- -import react from "@astrojs/react"; -import Typewriter from "typewriter-effect"; - -var headerStrings = [ - `Access to the web
for the masses`, - `An open web for business`, - `Web3 for the masses`, - `Web3 for you`, - ], - randomString = - headerStrings[Math.floor(Math.random() * headerStrings.length)]; -function lastWord(words) { - var n = words.split(" "); - return n[n.length - 1]; -} -var lastIndex = randomString.lastIndexOf(" "); ---- - - -
- { - typewriter - .changeDelay(50) - .typeString(`${randomString.substring(0, lastIndex)}` + " ") - .start(); - typewriter.typeString( - `${lastWord(randomString)}` - ); - }} - /> -
diff --git a/src/components/P1/Header/HeaderContent.astro b/src/components/P1/Header/HeaderContent.astro deleted file mode 100644 index 9fc2152..0000000 --- a/src/components/P1/Header/HeaderContent.astro +++ /dev/null @@ -1,30 +0,0 @@ ---- -import react from "@astrojs/react"; -import Typewriter from "typewriter-effect"; - -var headerStrings = [ - `Access to the web for the masses`, - `An open web for business`, - `Web3 for the masses`, - `Web3 for you`, - ], - randomString = - headerStrings[Math.floor(Math.random() * headerStrings.length)]; -function lastWord(words) { - var n = words.split(" "); - return n[n.length - 1]; -} -var lastIndex = randomString.lastIndexOf(" "); ---- - -
-

- {randomString.substring(0, lastIndex)}  - {lastWord(randomString)} - -

-
diff --git a/src/components/P1/Header/HeaderContent.jsx b/src/components/P1/Header/HeaderContent.jsx new file mode 100644 index 0000000..1fdb350 --- /dev/null +++ b/src/components/P1/Header/HeaderContent.jsx @@ -0,0 +1,30 @@ +import React, {useState, useEffect} from "react"; +import Typewriter from "typewriter-effect"; + +const HeaderContent = () => { + var headerStrings = [ + `Access to the web
for the masses`, `An open web for business`, `Web3 for the masses`, `Web3 for you` + ], + randomString = headerStrings[Math.floor(Math.random() * headerStrings.length)]; + function lastWord(words) { + var n = words.split(" "); + return n[n.length - 1]; + } + var lastIndex = randomString.lastIndexOf(" "); + return
+ { + typewriter.changeDelay(50).typeString(`${ + randomString.substring(0, lastIndex) + }` + ' ').start(); + typewriter.typeString(`${ + lastWord(randomString) + }`) + } + }/>
; +}; + +export default HeaderContent; diff --git a/src/components/P1/Vision/Vision.astro b/src/components/P1/Vision/Vision.astro index a24bfea..33ac52f 100644 --- a/src/components/P1/Vision/Vision.astro +++ b/src/components/P1/Vision/Vision.astro @@ -2,22 +2,33 @@ import "./VisionStyles.css"; --- -
-
+
+

OUR VISION

-

Make Web3 easy for everyone

+

+ Make Web3 easy for everyone +

Web3 offers freedom of speech, data sovereignty, and privacy. We simplify Web3 by bridging the gap between the two webs, enabling easy usage without censorship or backdoors.

-
- Download Extension +
+ + Download Extension
diff --git a/src/components/P1/Vision/VisionStyles.css b/src/components/P1/Vision/VisionStyles.css index a097284..3df83b6 100644 --- a/src/components/P1/Vision/VisionStyles.css +++ b/src/components/P1/Vision/VisionStyles.css @@ -1,6 +1,4 @@ .vision-container { - align-items: flex-start; - display: flex; margin-block: 5vh; padding-bottom: 5vh; vertical-align: center; @@ -10,34 +8,9 @@ .vision-wrapper { background-image: url(../../../assets/video-placeholder.webp); background-position: 100% 50%; - background-size: contain; - background-repeat: no-repeat; transition: 0.5s; } -.vision-btn-container { - align-items: center; - background-color: var(--aquamarine); - border-radius: 5px; - display: flex; - height: 49px; - margin-left: -1.5px; - margin-top: 22px; - max-width: 195px; - padding: 0 3px; - transform: scale(1); - transition: 0.3s; -} - -.vision-btn-container:hover { - transform: scale(1.01); - transition: 0.3s; -} - -.vision-btn-container a { - color: black; -} - .vision-btn { letter-spacing: 0; min-height: 26px;