add components

package.json

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

src/components/Navbar/Navbar.jsx

@@ -8,33 +8,33 @@ function Navbar() {
     const toggleNav = () => setNav(!nav)
 
     return (
-        <div className='navbar'>
+        <div class='navbar'>
-            <div className="logo">
+            <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'>
+                <div class='download-btn-container class="transition duration-[0.3s]"'>
-                    <a className="download-btn" href="#">Download Extension</a>
+                    <a class='download-btn' href="#">Download Extension</a>
                 </div>
             </ul>
 
-            <div className="hamburger" onClick={toggleNav}>
+            <div class="transition-opacity duration-150 ease-out nav-menu hamburger" onClick={toggleNav}>
-                <HiOutlineMenuAlt4 className='icon items-end'/>
+                <HiOutlineMenuAlt4 class='icon'/>
             </div>
-            <div className={nav ? 'mobile-menu active' : 'mobile-menu'}>
+            <div class={nav ? 'mobile-menu active class="transition duration-[0.55s] linear"' : 'mobile-menu class="transition duration-[0.55s] linear"'}>
-                <ul className="mobile-nav">
+                <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'>
+                    <div class='download-btn-container'>
-                        <a className="download-btn" href="#">Download Extension</a>
+                        <a class="download-btn" href="#">Download Extension</a>
                     </div>
                 </ul>
-                <div className="mobile-menu-btn"></div>
+                <div class="mobile-menu-btn"></div>
             </div>
         </div>
     )

src/components/Navbar/NavbarStyles.css

@@ -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;
+        display: none;
-        visibility: hidden;
-        width: 1px;
-        transition: all 0s linear;
-        position: fixed;
     }
 
     .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 {

src/components/P1/Header/Header.astro

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

src/components/P1/Header/HeaderStyles.css

@@ -1,131 +1,45 @@
-.logo {
+.header-container {
-  /* background-image: url(../../../assets/lume-logo.webp); */
+  align-items: flex-start;
-  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;
   display: flex;
-  justify-content: space-between;
+  margin-block: calc(77px + 1.5625vw);
-  align-items: center;
+  /* padding-bottom: calc(77px + 1.5625vw); */
-  border-radius: 5px;
+  z-index: -1 !important;
-  white-space: nowrap;
-  gap: 36px;
 }
 
-.nav-menu {
+.header {
-  display: flex;
+  color: var(--white);
-  align-items: flex-end;
-  padding: 1em;
-}
-
-li {
-  padding: 1rem;
-}
-
-.download-btn-container {
-  color: var(--black);
   font-family: var(--font-family-jetbrains_mono);
-  font-size: var(--font-size-s);
   font-weight: 400;
   font-style: normal;
-  align-items: flex-end;
+  letter-spacing: -6px;
-  background-color: var(--aquamarine);
+  line-height: calc(75px + (110 - 75) * ((100vw - 300px) / (1600 - 300)));
-  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;
   text-align: center;
-  width: 234px;
+  width: 100%;
-  display: block;
 }
 
-.hamburger {
+.header-alt {
-  display: none;
+  color: var(--aquamarine);
+  font-family: var(--font-family-jetbrains_mono);
 }
 
-.mobile-menu {
+.header-alignment {
-  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 {
   display: flex;
   flex-direction: column;
-    width: 55%;
+  justify-content: center;
-    margin-left: 50%;
-    top: -100vh;
-    left: 0;
-    position: absolute;
-    justify-content: space-between;
-    align-items: flex-end;
-    background-color: #031418;
-    transition: 0.2s;
 }
 
-  .active {
+.header-underscore {
-    top: 2em;
+  animation: blink 1.3s step-end infinite;
 }
 
-  .mobile-menu li {
+@keyframes blink {
-    padding: 1em 0.5em;
+
-    margin: 0 1em;
+  from,
+  to {
+    color: transparent
   }
 
-  .download-btn-container {
+  50% {
-    transform: scale(0.7);
+    color: rgba(245, 245, 245)
-    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;
   }
 }

src/components/P1/Vision/Vision.astro

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

src/components/P1/Whatisweb3/Whatisweb3.astro

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

src/components/P1/Whatisweb3/Whatisweb3Styles.css

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

src/pages/index.astro

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

tailwind.config.cjs

@@ -1,28 +1,5 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
 	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
-	theme: {
+	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' },
-			},
-		  },
-		},
-	  },
 }