add components
This commit is contained in:
roryjshelton
parent
c9ae52b5ef
commit
8ee8671ead
|
|
@ -3,7 +3,7 @@
|
|||
"type": "module",
|
||||
"version": "0.0.1",
|
||||
"scripts": {
|
||||
"dev": "astro dev",
|
||||
"dev": "TAILWIND_MODE=watch astro dev",
|
||||
"start": "astro dev",
|
||||
"build": "astro build",
|
||||
"preview": "astro preview",
|
||||
|
|
|
|||
|
|
@ -8,33 +8,33 @@ function Navbar() {
|
|||
const toggleNav = () => setNav(!nav)
|
||||
|
||||
return (
|
||||
<div className='navbar'>
|
||||
<div className="logo">
|
||||
<div class='navbar'>
|
||||
<div class="logo">
|
||||
</div>
|
||||
<ul className="nav-menu">
|
||||
<ul class='transition-opacity duration-150 ease-out md:max-lg:opacity-0 lg:opacity-100 nav-menu'>
|
||||
<li><a href="#">Home</a></li>
|
||||
<li><a href="#vision">Vision</a></li>
|
||||
<li><a href="#whatisweb3">What is Web3</a></li>
|
||||
<li>Donate</li>
|
||||
<div className='download-btn-container'>
|
||||
<a className="download-btn" href="#">Download Extension</a>
|
||||
<div class='download-btn-container class="transition duration-[0.3s]"'>
|
||||
<a class='download-btn' href="#">Download Extension</a>
|
||||
</div>
|
||||
</ul>
|
||||
|
||||
<div className="hamburger" onClick={toggleNav}>
|
||||
<HiOutlineMenuAlt4 className='icon items-end'/>
|
||||
<div class="transition-opacity duration-150 ease-out nav-menu hamburger" onClick={toggleNav}>
|
||||
<HiOutlineMenuAlt4 class='icon'/>
|
||||
</div>
|
||||
<div className={nav ? 'mobile-menu active' : 'mobile-menu'}>
|
||||
<ul className="mobile-nav">
|
||||
<div class={nav ? 'mobile-menu active class="transition duration-[0.55s] linear"' : 'mobile-menu class="transition duration-[0.55s] linear"'}>
|
||||
<ul class="mobile-nav">
|
||||
<li onClick={toggleNav}><a href="#">Home</a></li>
|
||||
<li onClick={toggleNav}><a href="#vision">Vision</a></li>
|
||||
<li onClick={toggleNav}><a href="#whatisweb3">What is Web3</a></li>
|
||||
<li onClick={toggleNav}>Donate</li>
|
||||
<div className='download-btn-container'>
|
||||
<a className="download-btn" href="#">Download Extension</a>
|
||||
<div class='download-btn-container'>
|
||||
<a class="download-btn" href="#">Download Extension</a>
|
||||
</div>
|
||||
</ul>
|
||||
<div className="mobile-menu-btn"></div>
|
||||
<div class="mobile-menu-btn"></div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -32,7 +32,6 @@
|
|||
display: flex;
|
||||
align-items: flex-end;
|
||||
padding: 1em;
|
||||
transition: all 1s linear;
|
||||
}
|
||||
|
||||
li {
|
||||
|
|
@ -56,6 +55,11 @@ li {
|
|||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.header-alt {
|
||||
color: var(--aquamarine);
|
||||
font-family: var(--font-family-jetbrains_mono);
|
||||
}
|
||||
|
||||
.download-btn-container a {
|
||||
color: black;
|
||||
}
|
||||
|
|
@ -75,14 +79,6 @@ li {
|
|||
|
||||
.hamburger {
|
||||
display: none;
|
||||
font-size: var(--font-size-xl);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.mobile-menu {
|
||||
|
|
@ -91,11 +87,7 @@ li {
|
|||
|
||||
@media screen and (max-width: 940px) {
|
||||
.nav-menu {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
width: 1px;
|
||||
transition: all 0s linear;
|
||||
position: fixed;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hamburger {
|
||||
|
|
@ -103,6 +95,14 @@ li {
|
|||
position: flex;
|
||||
max-width: fit-content;
|
||||
z-index: 999;
|
||||
font-size: var(--font-size-xl);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.mobile-menu {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import "./HeaderStyles.css";
|
|||
import HeaderContent from "./HeaderContent.jsx";
|
||||
---
|
||||
|
||||
<div class="items-start flex header-container">
|
||||
<div class="mt-[7%] items-start flex header-container">
|
||||
<div
|
||||
class="text-[color:var(--white)] font-normal not-italic tracking-[-6px] leading-[calc(75px_+_(110_-_75)_*_((100vw_-_300px)_/_(1600_-_300)))] text-center w-full"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,131 +1,45 @@
|
|||
.logo {
|
||||
/* background-image: url(../../../assets/lume-logo.webp); */
|
||||
background-position: 50%;
|
||||
background-size: cover;
|
||||
margin-left: 5px;
|
||||
height: 70px;
|
||||
width: 210px;
|
||||
}
|
||||
|
||||
.navbar-container {
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
.header-container {
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-radius: 5px;
|
||||
white-space: nowrap;
|
||||
gap: 36px;
|
||||
margin-block: calc(77px + 1.5625vw);
|
||||
/* padding-bottom: calc(77px + 1.5625vw); */
|
||||
z-index: -1 !important;
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
li {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.download-btn-container {
|
||||
color: var(--black);
|
||||
.header {
|
||||
color: var(--white);
|
||||
font-family: var(--font-family-jetbrains_mono);
|
||||
font-size: var(--font-size-s);
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
align-items: flex-end;
|
||||
background-color: var(--aquamarine);
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
height: 52px;
|
||||
min-width: 245px;
|
||||
padding: 12px 5.2px;
|
||||
transform: scale(1);
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.download-btn-container a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.download-btn-container:hover {
|
||||
transform: scale(1.01);
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.download-btn {
|
||||
letter-spacing: 0;
|
||||
min-height: 26px;
|
||||
letter-spacing: -6px;
|
||||
line-height: calc(75px + (110 - 75) * ((100vw - 300px) / (1600 - 300)));
|
||||
text-align: center;
|
||||
width: 234px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hamburger {
|
||||
display: none;
|
||||
.header-alt {
|
||||
color: var(--aquamarine);
|
||||
font-family: var(--font-family-jetbrains_mono);
|
||||
}
|
||||
|
||||
.mobile-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 940px) {
|
||||
.nav-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hamburger {
|
||||
display: block;
|
||||
position: flex;
|
||||
max-width: fit-content;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.mobile-menu {
|
||||
.header-alignment {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 55%;
|
||||
margin-left: 50%;
|
||||
top: -100vh;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
background-color: #031418;
|
||||
transition: 0.2s;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.active {
|
||||
top: 2em;
|
||||
.header-underscore {
|
||||
animation: blink 1.3s step-end infinite;
|
||||
}
|
||||
|
||||
.mobile-menu li {
|
||||
padding: 1em 0.5em;
|
||||
margin: 0 1em;
|
||||
@keyframes blink {
|
||||
|
||||
from,
|
||||
to {
|
||||
color: transparent
|
||||
}
|
||||
|
||||
.download-btn-container {
|
||||
transform: scale(0.7);
|
||||
transition: 0.3s;
|
||||
margin-left: -0.8em;
|
||||
}
|
||||
|
||||
.download-btn-container:hover {
|
||||
transform: scale(0.75);
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.download-btn {
|
||||
letter-spacing: 0;
|
||||
min-height: 26px;
|
||||
text-align: center;
|
||||
width: 234px;
|
||||
display: block;
|
||||
50% {
|
||||
color: rgba(245, 245, 245)
|
||||
}
|
||||
}
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
import "./VisionStyles.css";
|
||||
---
|
||||
|
||||
<div class="items-start flex vision-container">
|
||||
<div class="mt-[10%] items-start flex vision-container">
|
||||
<div class="bg-contain bg-no-repeat vision-wrapper">
|
||||
<span id="vision"></span>
|
||||
<h2
|
||||
|
|
@ -15,7 +15,9 @@ import "./VisionStyles.css";
|
|||
>
|
||||
Make Web3 easy for <wbr /> everyone
|
||||
</h3>
|
||||
<h4 class="left vision-transluscent">
|
||||
<h4
|
||||
class="left vision-transluscent 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]"
|
||||
>
|
||||
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.
|
||||
|
|
|
|||
|
|
@ -0,0 +1,36 @@
|
|||
---
|
||||
import React from "react";
|
||||
import "./Whatisweb3Styles.css";
|
||||
---
|
||||
|
||||
<div class="centered">
|
||||
<div class="Whatisweb3-container">
|
||||
<div class="Whatisweb3-wrapper">
|
||||
<div class="img-left"></div>
|
||||
<div class="w3-container">
|
||||
<span id="whatisweb3"></span>
|
||||
<h2
|
||||
class="text-[calc(15px_+_(25_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] text-[color:var(--aquamarine)] uppercase font-bold"
|
||||
>
|
||||
what is the web?
|
||||
</h2>
|
||||
<h3
|
||||
class="text-[calc(30px_+_(45_-_30)_*_((100vw_-_300px)_/_(1600_-_300)))] min-w-[75vw] z-[999] mt-[0.5em]"
|
||||
>
|
||||
Why Web3 matters
|
||||
</h3>
|
||||
<h4
|
||||
class="w3-transluscent 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]"
|
||||
>
|
||||
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.
|
||||
</h4>
|
||||
<div class="w3-btn-container">
|
||||
<a class="w3-btn" href="#">Learn More</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,122 @@
|
|||
.Whatisweb3-container {
|
||||
align-self: flex-start;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
padding-block: 5vh;
|
||||
/* padding-top: 15vh; */
|
||||
}
|
||||
|
||||
.w3-container {
|
||||
z-index: 999 !important;
|
||||
width: 100%;
|
||||
padding-left: 53vw;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.Whatisweb3-wrapper {
|
||||
align-items: flex-start;
|
||||
background-image: url(../../../assets/tilted-rectangle.webp);
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
width: 80%;
|
||||
padding-block: 10em;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
padding-left: calc(8px + 1.5625vw);
|
||||
}
|
||||
|
||||
.img-left {
|
||||
background-image: url(../../../assets/img-left.webp);
|
||||
background-position: 50% 50%;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
height: 817px;
|
||||
left: 11%;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
width: 637px;
|
||||
z-index: 998 !important;
|
||||
}
|
||||
|
||||
.w3-btn-container {
|
||||
align-items: center;
|
||||
z-index: 999 !important;
|
||||
background-color: var(--aquamarine);
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
height: 49px;
|
||||
margin-left: -1.5px;
|
||||
margin-top: 22px;
|
||||
max-width: 105px;
|
||||
padding: 0 3px;
|
||||
transform: scale(1);
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.w3-btn-container:hover {
|
||||
transform: scale(1.01);
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.w3-btn-container a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.w3-btn {
|
||||
letter-spacing: 0;
|
||||
min-height: 26px;
|
||||
text-align: center;
|
||||
width: 105px;
|
||||
display: block;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.w3-transluscent {
|
||||
background-color: #020e1076;
|
||||
border-radius: 15px;
|
||||
transition: 0.5s;
|
||||
max-width: 71.5%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1050px) {
|
||||
.w3-container {
|
||||
z-index: 999 !important;
|
||||
width: 100%;
|
||||
padding-inline: 12%;
|
||||
z-index: 999 !important;
|
||||
}
|
||||
|
||||
.Whatisweb3-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.img-left {
|
||||
left: 15%;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.w3-transluscent {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 2200px) {
|
||||
.w3-container {
|
||||
padding-inline: 96vw;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.img-left {
|
||||
left: 5.5%;
|
||||
}
|
||||
|
||||
.w3-transluscent {
|
||||
max-width: 30%;
|
||||
}
|
||||
}
|
||||
|
|
@ -2,6 +2,7 @@
|
|||
import Navbar from "../components/Navbar/Navbar.jsx";
|
||||
import Header from "../components/P1/Header/Header.astro";
|
||||
import Vision from "../components/P1/Vision/Vision.astro";
|
||||
import Whatisweb3 from "../components/P1/Whatisweb3/Whatisweb3.astro";
|
||||
import "../index.css";
|
||||
---
|
||||
|
||||
|
|
@ -25,5 +26,6 @@ import "../index.css";
|
|||
<Navbar client:load />
|
||||
<Header />
|
||||
<Vision />
|
||||
<Whatisweb3 />
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,28 +1,5 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
|
||||
theme: {
|
||||
extend: {
|
||||
animation: {
|
||||
cursor: 'cursor .6s linear infinite alternate',
|
||||
type: 'type 1.8s ease-out .8s 1 normal both',
|
||||
'type-reverse': 'type 1.8s ease-out 0s infinite alternate-reverse both',
|
||||
},
|
||||
keyframes: {
|
||||
type: {
|
||||
'0%': { width: '0ch' },
|
||||
'5%, 10%': { width: '1ch' },
|
||||
'15%, 20%': { width: '2ch' },
|
||||
'25%, 30%': { width: '3ch' },
|
||||
'35%, 40%': { width: '4ch' },
|
||||
'45%, 50%': { width: '5ch' },
|
||||
'55%, 60%': { width: '6ch' },
|
||||
'65%, 70%': { width: '7ch' },
|
||||
'75%, 80%': { width: '8ch' },
|
||||
'85%, 90%': { width: '9ch' },
|
||||
'95%': { width: '10ch' },
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
theme: { }
|
||||
}
|
||||
Loading…
Reference in New Issue