header -> client:load
This commit is contained in:
roryjshelton
parent
8351654c8c
commit
3535cfff78
|
|
@ -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()]
|
||||
});
|
||||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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)}
|
||||
<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>
|
||||
|
|
@ -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;
|
||||
|
|
@ -2,22 +2,33 @@
|
|||
import "./VisionStyles.css";
|
||||
---
|
||||
|
||||
<div class="vision-container">
|
||||
<div class="vision-wrapper">
|
||||
<div class="items-start flex vision-container">
|
||||
<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">
|
||||
<a class="vision-btn" href="#"> Download Extension</a>
|
||||
<div
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue