header -> client:load

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()]
 });

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==",
+      "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
-      "peer": true
     },
     "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==",
+      "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ=="
-      "peer": true
     },
     "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==",
+      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
-      "peer": true
     },
     "node_modules/data-uri-to-buffer": {
       "version": "4.0.1",

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

src/components/P1/Header/Header.astro

@@ -1,6 +1,6 @@
 ---
 import "./HeaderStyles.css";
-import HeaderContent from "./HeaderContent.astro";
+import HeaderContent from "./HeaderContent.jsx";
 ---
 
 <div class="items-start flex header-container">
@@ -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"
   >
     <h1 class="flex flex-col justify-center">
-      <HeaderContent />
+      <HeaderContent client:load />
     </h1>
   </div>
 </div>

src/components/P1/Header/HeaderContent BACKUP.astro

@@ -1,34 +0,0 @@
----
-import react from "@astrojs/react";
-import Typewriter from "typewriter-effect";
-
-var headerStrings = [
-        `Access to the web <br /> 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 client:load />
-<div>
-    <Typewriter
-        options={{ cursor: "_" }}
-        onInit={(typewriter) => {
-            typewriter
-                .changeDelay(50)
-                .typeString(`${randomString.substring(0, lastIndex)}` + " ")
-                .start();
-            typewriter.typeString(
-                `<span class="header-alt">${lastWord(randomString)}</span>`
-            );
-        }}
-    />
-</div>

src/components/P1/Header/HeaderContent.astro

@@ -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(" ");
----
-
-<header class="mb-16 group">
-    <h1
-        class="mb-1 text-4xl whitespace-nowrap text-gray-100 md:text-6xl inline-flex overflow-x-hidden animate-type"
-    >
-        {randomString.substring(0, lastIndex)}&nbsp;
-        <span class="header-alt">{lastWord(randomString)}</span>
-        <span
-            class="box-border inline-block w-1 h-10 ml-2 -mb-2 bg-white md:-mb-4 md:h-16 animate-cursor will-change-transform"
-        ></span>
-    </h1>
-</header>

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 <br /> 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 <div>
+        <Typewriter options={
+                {cursor: "_"}
+            }
+            onInit={
+                (typewriter) => {
+                    typewriter.changeDelay(50).typeString(`${
+                        randomString.substring(0, lastIndex)
+                    }` + ' ').start();
+                    typewriter.typeString(`<span class="header-alt">${
+                        lastWord(randomString)
+                    }</span>`)
+                }
+            }/></div>;
+};
+
+export default HeaderContent;

src/components/P1/Vision/Vision.astro

@@ -2,22 +2,33 @@
 import "./VisionStyles.css";
 ---
 
-<div class="vision-container">
+<div class="items-start flex vision-container">
-    <div class="vision-wrapper">
+    <div class="bg-contain bg-no-repeat vision-wrapper">
         <span id="vision"></span>
         <h2
             class="text-[calc(15px_+_(25_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] text-[color:var(--aquamarine)] uppercase font-bold"
         >
             OUR VISION
         </h2>
-        <h3>Make Web3 easy for <wbr /> everyone</h3>
+        <h3
+            class="text-[calc(30px_+_(45_-_30)_*_((100vw_-_300px)_/_(1600_-_300)))] min-w-[75vw] z-[999] mt-[0.5em]"
+        >
+            Make Web3 easy for <wbr /> everyone
+        </h3>
         <h4 class="left vision-transluscent">
             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.
         </h4>
-        <div class="vision-btn-container">
+        <div
-            <a class="vision-btn" href="#"> Download Extension</a>
+            class="items-center bg-[color:var(--aquamarine)] flex h-[49px] ml-[-1.5px] max-w-[195px] transition-[0.3s] text-[black] mt-[22px] px-[3px] py-0 rounded-[5px] scale-100 hover:transition-[0.3s] hover:scale-[1.01]"
+        >
+            <a
+                class="tracking-[0] min-h-[26px] text-center w-[234px] block"
+                href="#"
+            >
+                Download Extension</a
+            >
         </div>
     </div>
 </div>

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;