more tailwind

.stylelintrc.json

@@ -0,0 +1 @@
+{ "extends": ["stylelint-config-standard"] }

package.json

@@ -22,5 +22,9 @@
     "react-icons": "^4.8.0",
     "tailwindcss": "^3.3.2",
     "typewriter-effect": "^2.19.0"
+  },
+  "devDependencies": {
+    "stylelint": "^15.6.0",
+    "stylelint-config-standard": "^33.0.0"
   }
 }

robots.txt

@@ -0,0 +1,3 @@
+User-Agent: *
+Allow: /
+

src/components/Navbar/Navbar.jsx

@@ -8,8 +8,8 @@ function Navbar() {
     const toggleNav = () => setNav(!nav)
 
     return (
-        <div class='navbar'>
+        <div class='w-full h-20 flex justify-between items-center whitespace-nowrap gap-9 bg-[#031418] pt-[75px] pb-[3%] px-[7%]'>
-            <div class="logo">
+            <div class="bg-[url(../../src/assets/lume-logo.webp)] bg-no-repeat bg-contain h-[55px] min-w-[210px] z-[998] ml-[5px]">
             </div>
             <ul class='transition-opacity duration-150 ease-out md:max-lg:opacity-0 lg:opacity-100 nav-menu'>
                 <li><a href="#">Home</a></li>

src/components/Navbar/NavbarStyles.css

@@ -1,33 +1,3 @@
-.logo {
-    background-image: url(../../assets/lume-logo.webp);
-    background-repeat: no-repeat;
-    background-size: contain;
-    margin-left: 5px;
-    height: 55px;
-    min-width: 210px;
-    z-index: 998 !important;
-}
-
-.navbar-container {
-    white-space: nowrap;
-    display: inline-block;
-}
-
-.navbar {
-    width: 100%;
-    height: 80px;
-    display: flex;
-    padding-top: 75px;
-    padding-left: 7%;
-    padding-right: 7%;
-    padding-bottom: 3%;
-    justify-content: space-between;
-    align-items: center;
-    white-space: nowrap;
-    gap: 36px;
-    background-color: #031418;
-}
-
 .nav-menu {
     display: flex;
     align-items: flex-end;
@@ -40,7 +10,7 @@ li {
 
 .download-btn-container {
     color: var(--black);
-    font-family: var(--font-family-jetbrains_mono);
+    font-family: var(--font-family-jetbrains-mono);
     font-size: var(--font-size-s);
     font-weight: 400;
     font-style: normal;
@@ -57,7 +27,7 @@ li {
 
 .header-alt {
     color: var(--aquamarine);
-    font-family: var(--font-family-jetbrains_mono);
+    font-family: var(--font-family-jetbrains-mono);
 }
 
 .download-btn-container a {
@@ -85,7 +55,7 @@ li {
     display: none;
 }
 
-@media screen and (max-width: 940px) {
+@media screen and (width <=940px) {
     .nav-menu {
         display: none;
     }
@@ -97,12 +67,6 @@ li {
         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 {
@@ -118,10 +82,8 @@ li {
         align-items: flex-end;
         background-color: #031418;
         border-radius: 10px;
-        outline-style: solid;
+        outline: solid #07363fa7 0.1px;
-        outline-width: 0.1px;
+        box-shadow: 0.1px 4px 4px #00000096;
-        outline-color: #07363fa7;
-        box-shadow: 0px 4px 4px #00000096;
         transition: 0.55s;
         z-index: 998 !important;
     }

src/components/P1/Header/Header.astro

@@ -1,9 +1,8 @@
 ---
-import "./HeaderStyles.css";
 import HeaderContent from "./HeaderContent.jsx";
 ---
 
-<div class="mt-[7%] items-start flex header-container">
+<div class="mt-[7%] items-start flex items-start flex z-[-1]">
   <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/HeaderContent.jsx

@@ -1,4 +1,3 @@
-import React, {useState, useEffect} from "react";
 import Typewriter from "typewriter-effect";
 
 const HeaderContent = () => {
@@ -20,7 +19,7 @@ const HeaderContent = () => {
                     typewriter.changeDelay(50).typeString(`${
                         randomString.substring(0, lastIndex)
                     }` + ' ').start();
-                    typewriter.typeString(`<span class="header-alt">${
+                    typewriter.typeString(`<span class="text-[color:var(--aquamarine)]">${
                         lastWord(randomString)
                     }</span>`)
                 }

src/components/P1/Header/HeaderStyles.css

@@ -1,45 +0,0 @@
-.header-container {
-  align-items: flex-start;
-  display: flex;
-  margin-block: calc(77px + 1.5625vw);
-  /* padding-bottom: calc(77px + 1.5625vw); */
-  z-index: -1 !important;
-}
-
-.header {
-  color: var(--white);
-  font-family: var(--font-family-jetbrains_mono);
-  font-weight: 400;
-  font-style: normal;
-  letter-spacing: -6px;
-  line-height: calc(75px + (110 - 75) * ((100vw - 300px) / (1600 - 300)));
-  text-align: center;
-  width: 100%;
-}
-
-.header-alt {
-  color: var(--aquamarine);
-  font-family: var(--font-family-jetbrains_mono);
-}
-
-.header-alignment {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-
-.header-underscore {
-  animation: blink 1.3s step-end infinite;
-}
-
-@keyframes blink {
-
-  from,
-  to {
-    color: transparent
-  }
-
-  50% {
-    color: rgba(245, 245, 245)
-  }
-}

src/components/P1/Vision/Vision.astro

@@ -2,8 +2,13 @@
 import "./VisionStyles.css";
 ---
 
-<div class="mt-[10%] items-start flex vision-container">
+<div
-    <div class="bg-contain bg-no-repeat vision-wrapper">
+    class="mt-[10%] items-start flex pb-[5vh]"
+    style="padding-bottom: 5vh; vertical-align: center; padding-inline: 15%;"
+>
+    <div
+        class="bg-[url(../../../src/assets/video-placeholder.webp)] bg-[100%_50%] bg-no-repeat bg-contain transition-[0.5s]"
+    >
         <span id="vision"></span>
         <h2
             class="text-[calc(15px_+_(25_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] text-[color:var(--aquamarine)] uppercase font-bold"
@@ -16,14 +21,14 @@ import "./VisionStyles.css";
             Make Web3 easy for <wbr /> everyone
         </h3>
         <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]"
+            class="left vt transition-[0.5s] rounded-[15px] 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.
         </h4>
         <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]"
+            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"

src/components/P1/Vision/VisionStyles.css

@@ -1,32 +1,9 @@
-.vision-container {
+.vt {
-    margin-block: 5vh;
+    background-color: rgba(0 0 0 0%);
-    padding-bottom: 5vh;
-    vertical-align: center;
-    padding-inline: 15%;
 }
 
-.vision-wrapper {
+@media screen and (width <=1200px) {
-    background-image: url(../../../assets/video-placeholder.webp);
+    .vt {
-    background-position: 100% 50%;
-    transition: 0.5s;
-}
-
-.vision-btn {
-    letter-spacing: 0;
-    min-height: 26px;
-    text-align: center;
-    width: 234px;
-    display: block;
-}
-
-.vision-transluscent {
-    background-color: none;
-    border-radius: 15px;
-    transition: 0.5s;
-}
-
-@media screen and (max-width: 1200px) {
-    .vision-transluscent {
         background-color: #031418a7;
         border-radius: 15px;
         transition: 0.5s;

src/components/P1/Whatisweb3/Whatisweb3.astro

@@ -3,9 +3,15 @@ import "./Whatisweb3Styles.css";
 ---
 
 <div class="centered">
-    <div class="Whatisweb3-container">
+    <div
-        <div class="Whatisweb3-wrapper">
+        class="self-start relative w-full justify-center;"
-            <div class="img-left"></div>
+        style="padding-block: 5vh;"
+    >
+        <div class="whatisweb3-wrapper">
+            <div
+                class="bg-[url(../../../src/assets/img-left.webp)] bg-[50%_50%] bg-contain bg-no-repeat h-[817px] absolute flex w-[637px] z-[998] left-[11%]"
+            >
+            </div>
             <div class="w3-container">
                 <span id="whatisweb3"></span>
                 <h2

src/components/P1/Whatisweb3/Whatisweb3Styles.css

@@ -1,12 +1,3 @@
-.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%;
@@ -14,9 +5,8 @@
     transition: 0.5s;
 }
 
-.Whatisweb3-wrapper {
+.whatisweb3-wrapper {
-    align-items: flex-start;
+    background-image: url("../../../assets/tilted-rectangle.webp");
-    background-image: url(../../../assets/tilted-rectangle.webp);
     background-size: 100% 100%;
     background-position: center;
     background-repeat: no-repeat;
@@ -29,19 +19,6 @@
     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;
@@ -82,15 +59,14 @@
     max-width: 71.5%;
 }
 
-@media screen and (max-width: 1050px) {
+@media screen and (width <=1050px) {
     .w3-container {
-        z-index: 999 !important;
         width: 100%;
         padding-inline: 12%;
         z-index: 999 !important;
     }
 
-    .Whatisweb3-wrapper {
+    .whatisweb3-wrapper {
         width: 100%;
     }
 
@@ -104,7 +80,7 @@
     }
 }
 
-@media screen and (min-width: 2200px) {
+@media screen and (width >=2200px) {
     .w3-container {
         padding-inline: 96vw;
         width: 100%;

src/index.css

@@ -1,8 +1,8 @@
 @import url("https://fonts.googleapis.com/css?family=Jaldi:400|JetBrains+Mono:400,700|IBM+Plex+Sans+Devanagari:400");
 
 :root {
-  --primary-dark: #000000;
+  --primary-dark: #000;
-  --primary-light: #ffffff;
+  --primary-light: #fff;
 }
 
 :root {
@@ -31,7 +31,7 @@
 
   --font-family-ibm_plex_sans_devanagari: "IBM Plex Sans Devanagari";
   --font-family-jaldi: "Jaldi";
-  --font-family-jetbrains_mono: "JetBrains Mono";
+  --font-family-jetbrains-mono: "JetBrains Mono";
 }
 
 * {