diff --git a/.DS_Store b/.DS_Store deleted file mode 100644 index be4a0b1..0000000 Binary files a/.DS_Store and /dev/null differ diff --git a/.gitignore b/.gitignore index b512c09..f06235c 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ -node_modules \ No newline at end of file +node_modules +dist diff --git a/astro.config.mjs b/astro.config.mjs index 55e4f46..b37627f 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -1,9 +1,9 @@ import { defineConfig } from 'astro/config'; -import tailwind from "@astrojs/tailwind"; +import tailwind from '@astrojs/tailwind'; import react from '@astrojs/react'; -import image from "@astrojs/image"; +import image from '@astrojs/image'; // https://astro.build/config export default defineConfig({ - integrations: [tailwind(), image(), react()] -}); \ No newline at end of file + integrations: [tailwind({ config: { applyBaseStyles: false } }), image(), react()], +}); diff --git a/package-lock.json b/package-lock.json index 2bd3c1c..2db38c6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,7 @@ "@types/react-dom": "^18.2.1", "astro": "^2.3.2", "astro-icon": "^0.8.0", + "autoprefixer": "^10.4.14", "dynamic-react-grid": "^0.2.0", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/package.json b/package.json index 8791389..2d52ea3 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "@types/react-dom": "^18.2.1", "astro": "^2.3.2", "astro-icon": "^0.8.0", + "autoprefixer": "^10.4.14", "dynamic-react-grid": "^0.2.0", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/postcss.config.cjs b/postcss.config.cjs new file mode 100644 index 0000000..47421eb --- /dev/null +++ b/postcss.config.cjs @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + "tailwindcss/nesting": {}, + "tailwindcss": {}, + }, +}; diff --git a/robots.txt b/public/robots.txt similarity index 58% rename from robots.txt rename to public/robots.txt index bb01aaf..26b4d70 100644 --- a/robots.txt +++ b/public/robots.txt @@ -1,3 +1,2 @@ User-Agent: * -Allow: / - +Allow: / \ No newline at end of file diff --git a/src/.DS_Store b/src/.DS_Store deleted file mode 100644 index d969133..0000000 Binary files a/src/.DS_Store and /dev/null differ diff --git a/src/assets/lume-logo.png b/src/assets/lume-logo.png new file mode 100644 index 0000000..54e05aa Binary files /dev/null and b/src/assets/lume-logo.png differ diff --git a/src/assets/meme-1.png b/src/assets/meme-1.png new file mode 100644 index 0000000..180c97b Binary files /dev/null and b/src/assets/meme-1.png differ diff --git a/src/assets/meme-2.png b/src/assets/meme-2.png new file mode 100644 index 0000000..d8d3758 Binary files /dev/null and b/src/assets/meme-2.png differ diff --git a/src/assets/meme-3.png b/src/assets/meme-3.png new file mode 100644 index 0000000..63c867d Binary files /dev/null and b/src/assets/meme-3.png differ diff --git a/src/assets/meme-4.png b/src/assets/meme-4.png new file mode 100644 index 0000000..5d68765 Binary files /dev/null and b/src/assets/meme-4.png differ diff --git a/src/assets/meme.webp b/src/assets/meme.webp deleted file mode 100644 index a94eef3..0000000 Binary files a/src/assets/meme.webp and /dev/null differ diff --git a/src/assets/meme2.webp b/src/assets/meme2.webp deleted file mode 100644 index bc9c458..0000000 Binary files a/src/assets/meme2.webp and /dev/null differ diff --git a/src/components/.DS_Store b/src/components/.DS_Store deleted file mode 100644 index a3056f9..0000000 Binary files a/src/components/.DS_Store and /dev/null differ diff --git a/src/components/Footer/Footer.astro b/src/components/Footer/Footer.astro new file mode 100644 index 0000000..6fb2a8a --- /dev/null +++ b/src/components/Footer/Footer.astro @@ -0,0 +1,62 @@ +--- +import "./FooterStyles.css"; +import logo from "../../../src/assets/lume-logo.webp"; +--- + + diff --git a/src/components/Footer/FooterStyles.css b/src/components/Footer/FooterStyles.css new file mode 100644 index 0000000..bf66506 --- /dev/null +++ b/src/components/Footer/FooterStyles.css @@ -0,0 +1,87 @@ +footer { + display: flex; + gap: 2.5rem; + padding: 4% 12%; + background-color: #020E10; + + > div { + flex-basis: 0; + flex-grow: 1; + + &:first-child { + flex-grow: 2 !important; + display: flex; + flex-direction: column; + } + } + + h5 { + @apply text-2xl; + white-space: nowrap; + margin-bottom: 0.5rem; + } + + li { + @apply text-xl leading-8; + font-family: var(--font-family-jaldi); + color: var(--cloud); + list-style-type: none; + white-space: nowrap; + } +} + +.footer-logo { + a { + display: inline-block; + } + + img { + width: 126px; + } +} + +.footer-contact { + margin: auto 0; + color: var(--cloud); + + a { + display: flex; + align-items: center; + } + + span { + display: block; + background-image: url('../../assets/email-icon.webp'); + background-size: cover; + margin-right: 0.5rem; + width: 1.0625rem; + height: 0.875rem; + } +} + +.footer-phrase { + @apply text-xl; + margin: auto 0 0; + color: var(--aquamarine); +} + +@media screen and (width <= 900px) { + footer { + flex-direction: column; + padding: 12% 8% 12%; + text-align: center; + + > div:first-child {; + margin-top: 1.5rem; + order: 2; + } + } + + .footer-contact { + margin: 4% 0; + + a { + justify-content: center; + } + } +} diff --git a/src/components/P1/CTO/CTO.astro b/src/components/Home/CTO/CTO.astro similarity index 100% rename from src/components/P1/CTO/CTO.astro rename to src/components/Home/CTO/CTO.astro diff --git a/src/components/P1/CTO/CTOStyles.css b/src/components/Home/CTO/CTOStyles.css similarity index 100% rename from src/components/P1/CTO/CTOStyles.css rename to src/components/Home/CTO/CTOStyles.css diff --git a/src/components/P1/Grid/Grid.astro b/src/components/Home/Grid/Grid.astro similarity index 100% rename from src/components/P1/Grid/Grid.astro rename to src/components/Home/Grid/Grid.astro diff --git a/src/components/P1/Grid/GridStyles.css b/src/components/Home/Grid/GridStyles.css similarity index 100% rename from src/components/P1/Grid/GridStyles.css rename to src/components/Home/Grid/GridStyles.css diff --git a/src/components/P1/Header/Header.astro b/src/components/Home/Header/Header.astro similarity index 100% rename from src/components/P1/Header/Header.astro rename to src/components/Home/Header/Header.astro diff --git a/src/components/P1/Header/HeaderContent.jsx b/src/components/Home/Header/HeaderContent.jsx similarity index 100% rename from src/components/P1/Header/HeaderContent.jsx rename to src/components/Home/Header/HeaderContent.jsx diff --git a/src/components/Home/Meme/Meme.astro b/src/components/Home/Meme/Meme.astro new file mode 100644 index 0000000..a42d6b4 --- /dev/null +++ b/src/components/Home/Meme/Meme.astro @@ -0,0 +1,39 @@ +--- +import "./MemeStyles.css"; + +import meme1 from '../../../assets/meme-1.png'; +import meme2 from '../../../assets/meme-2.png'; +import meme3 from '../../../assets/meme-3.png'; +import meme4 from '../../../assets/meme-4.png'; +--- + +
+
+

TITLE

+

Building a new world for your data

+

+ Right now, Lume has only one full-time developer and limited + helper staff! We need help from developers, fundraisers, + funders, and contributors to bring the new internet to the + masses. +

+
+
+
+ Web 1 + Web1 +
+
+ + Web2 +
+
+ + Crypto & Defi +
+
+ + Web3 +
+
+
diff --git a/src/components/Home/Meme/MemeStyles.css b/src/components/Home/Meme/MemeStyles.css new file mode 100644 index 0000000..9d40569 --- /dev/null +++ b/src/components/Home/Meme/MemeStyles.css @@ -0,0 +1,56 @@ +.meme-wrapper { + display: flex; + justify-content: center; + align-items: center; + padding: 8% 12%; + background-image: url("../../../assets/tilted-rectangle.webp"); + background-size: 100% 100%; +} + +.meme-text { + width: 60%; + margin-right: 5%; + flex-shrink: 0; + + p { + margin-top: 1rem; + font-size: calc(15px + (21 - 15) * ((100vw - 300px) / (1600 - 300))); + color: var(--cloud); + font-family: var(--font-family-jaldi); + font-weight: 400; + font-style: normal; + } +} + +.meme-grid { + display: grid; + grid-template-columns: 50% 50%; + gap: 1rem; + max-width: 31.25rem; + + img { + margin-bottom: 0.5rem; + } + + > div { + color: var(--aquamarine); + font-size: calc(15px + (25 - 10) * ((100vw - 300px) / (1600 - 300)) / 2.5); + text-align: center; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } +} + +@media screen and (width <=900px) { + .meme-wrapper { + flex-direction: column; + padding: 20% 8%; + text-align: center; + } + + .meme-text { + width: auto; + margin: 0 0 10%; + } +} diff --git a/src/components/P1/Message/Message.astro b/src/components/Home/Message/Message.astro similarity index 100% rename from src/components/P1/Message/Message.astro rename to src/components/Home/Message/Message.astro diff --git a/src/components/P1/Message/MessageStyles.css b/src/components/Home/Message/MessageStyles.css similarity index 100% rename from src/components/P1/Message/MessageStyles.css rename to src/components/Home/Message/MessageStyles.css diff --git a/src/components/P1/Powered/Powered.astro b/src/components/Home/Powered/Powered.astro similarity index 100% rename from src/components/P1/Powered/Powered.astro rename to src/components/Home/Powered/Powered.astro diff --git a/src/components/P1/Powered/PoweredStyles.css b/src/components/Home/Powered/PoweredStyles.css similarity index 100% rename from src/components/P1/Powered/PoweredStyles.css rename to src/components/Home/Powered/PoweredStyles.css diff --git a/src/components/P1/Socials/Socials.astro b/src/components/Home/Socials/Socials.astro similarity index 100% rename from src/components/P1/Socials/Socials.astro rename to src/components/Home/Socials/Socials.astro diff --git a/src/components/P1/Socials/SocialsStyles.css b/src/components/Home/Socials/SocialsStyles.css similarity index 100% rename from src/components/P1/Socials/SocialsStyles.css rename to src/components/Home/Socials/SocialsStyles.css diff --git a/src/components/Home/Vision/Vision.astro b/src/components/Home/Vision/Vision.astro new file mode 100644 index 0000000..7eb60bb --- /dev/null +++ b/src/components/Home/Vision/Vision.astro @@ -0,0 +1,32 @@ +--- +import "./VisionStyles.css"; +--- + +
+
+ +

+ OUR VISION +

+

+ Make Web3 easy for
everyone +

+

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

+
+ Download Extension +
+
+
diff --git a/src/components/Home/Vision/VisionStyles.css b/src/components/Home/Vision/VisionStyles.css new file mode 100644 index 0000000..1e5a3b2 --- /dev/null +++ b/src/components/Home/Vision/VisionStyles.css @@ -0,0 +1,11 @@ +.vt { + background-color: rgba(0 0 0 0%); +} + +@media screen and (width <=1200px) { + .vt { + background-color: #031418a7; + border-radius: 15px; + transition: 0.5s; + } +} diff --git a/src/components/P1/Whatisweb3/Whatisweb3.astro b/src/components/Home/Whatisweb3/Whatisweb3.astro similarity index 100% rename from src/components/P1/Whatisweb3/Whatisweb3.astro rename to src/components/Home/Whatisweb3/Whatisweb3.astro diff --git a/src/components/P1/Whatisweb3/Whatisweb3Styles.css b/src/components/Home/Whatisweb3/Whatisweb3Styles.css similarity index 100% rename from src/components/P1/Whatisweb3/Whatisweb3Styles.css rename to src/components/Home/Whatisweb3/Whatisweb3Styles.css diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx index 2e3f3bd..4fa87f4 100644 --- a/src/components/Navbar/Navbar.jsx +++ b/src/components/Navbar/Navbar.jsx @@ -1,41 +1,54 @@ -import React, {useState} from 'react' -import './NavbarStyles.css' +import React, { useState, useEffect } from 'react'; +import './NavbarStyles.css'; +import logo from '../../../src/assets/lume-logo.png'; -function Navbar() { - const [nav, setNav] = useState(false) - const toggleNav = () => setNav(!nav) +function Navbar({ view }) { + const [nav, setNav] = useState(false); + const toggleNav = () => setNav(!nav); - return ( -
-
-
- + useEffect(() => { + let resizeTimeout; + const onResize = () => { + clearTimeout(resizeTimeout); + resizeTimeout = setTimeout(() => { + if(nav && window.innerWidth > 940) { + setNav(false); + } + }, 25); + }; -
- ☰ -
-
- -
-
-
- ) + window.addEventListener('resize', onResize); + + return () => window.removeEventListener('resize', onResize); + }, [nav]); + + return ( + + ) } -export default Navbar \ No newline at end of file +export default Navbar diff --git a/src/components/Navbar/NavbarStyles.css b/src/components/Navbar/NavbarStyles.css index f2c6be2..2aa87cb 100644 --- a/src/components/Navbar/NavbarStyles.css +++ b/src/components/Navbar/NavbarStyles.css @@ -1,83 +1,73 @@ -.nav-menu { - display: flex; - align-items: flex-end; - padding: 1em; +nav { + display: flex; + justify-content: space-between; + align-items: center; + height: 9.375rem; + padding: 2.5rem 3%; + background: #031418; + font-size: 1.125rem; + white-space: nowrap; + + .logo { + flex-shrink: 0; + + img { + width: 13.125rem; + height: 4.274rem; + } + } } -li { - padding: 1rem; -} +menu { + display: flex; + align-items: center; -.header-alt { - color: var(--aquamarine); - font-family: var(--font-family-jetbrains-mono); -} - -.download-btn { - letter-spacing: 0; - min-height: 26px; - text-align: center; - width: 234px; + li > a { display: block; + padding: 1rem 1.125rem; + } + + .download-btn { + margin-left: 1.25rem; + } } .hamburger { - display: none; - cursor: default; -} - -.mobile-menu { - display: none; + display: none; + font-size: var(--font-size-xxl); + cursor: pointer; + z-index: 1; + margin: 0 2.125rem; } @media screen and (width <=940px) { - .nav-menu { - display: none; + menu { + display: flex; + align-items: flex-start; + flex-direction: column; + position: absolute; + top: -100vh; + right: 3%; + padding: 1rem; + border: 1px solid red; + border-radius: 0.5rem; + transition: top 250ms; + + &.active { + top: 2.25rem; } - .hamburger { - display: block; - position: flex; - max-width: fit-content; - z-index: 999; - font-size: var(--font-size-xl); - -webkit-tap-highlight-color: transparent; - cursor: default; - } - - .mobile-menu { - display: flex; - flex-direction: column; - width: auto; - margin-left: 50%; - top: -100vh; - right: 0; - opacity: 100; - position: absolute; - justify-content: space-between; - align-items: flex-end; - background-color: #031418; - border-radius: 10px; - outline: solid #07363fa7 0.1px; - box-shadow: 0.1px 4px 4px #00000096; - transition: 0.55s; - z-index: 998 !important; - } - - .active { - top: 2em; - } - - .mobile-menu li { - padding: 1em 0.5em; - margin: 0 1em; + li > a { + padding-top: 0.5rem; + padding-bottom: 0.5rem; } .download-btn { - letter-spacing: 0; - min-height: 26px; - text-align: center; - width: 234px; - display: block; + margin: 0.5rem 0 0 0; } -} \ No newline at end of file + } + + .hamburger { + display: block; + } +} diff --git a/src/components/P1/.DS_Store b/src/components/P1/.DS_Store deleted file mode 100644 index 4f57b8b..0000000 Binary files a/src/components/P1/.DS_Store and /dev/null differ diff --git a/src/components/P1/Footer/Footer.astro b/src/components/P1/Footer/Footer.astro deleted file mode 100644 index 4fd2fef..0000000 --- a/src/components/P1/Footer/Footer.astro +++ /dev/null @@ -1,144 +0,0 @@ ---- -import "./FooterStyles.css"; ---- - -
-
-
- -
    - contact@lumeweb.com - Freedom, privacy, ownership. -
    -
-
-
-
-
- General -

-
  • - Home -
    • -
  • - Get Started -
    • -
  • - Documentation -
    • -
  • - Projects -
    • -
    -
    -
    -
    - Community -

    -
  • - GitHub -
    • -
  • - Discord -
    • -
  • - Twitter -
    • -
  • - facebook -
    • -
    -
    -
    -
    - Ecosystem -

    -
  • - Browser -
    • -
  • - Extension -
    • -
  • - Universal Storage -
    • -
    -
    -
    -
    - Other -

    -
  • - BrowserUniversal -
    • -
  • - Storage -
    • -
    -
    -
    -
    - Support Us -

    -
  • - Donate -
    • -
  • - Download App -
    • -
  • - Partnerships -
    • -
    -
    -
    diff --git a/src/components/P1/Footer/FooterStyles.css b/src/components/P1/Footer/FooterStyles.css deleted file mode 100644 index e5e07c2..0000000 --- a/src/components/P1/Footer/FooterStyles.css +++ /dev/null @@ -1,86 +0,0 @@ -.footer-li { - font-family: var(--font-family-jaldi); - margin-inline: 0.5vw; - list-style-type: none; - white-space: nowrap; -} - -.footer-cards { - margin: 0 auto; - display: grid; - gap: 1rem; - padding: 7% 12%; - background-color: #020E10; - height: auto; -} - -@media (width >=600px) { - .footer-cards { - grid-template-columns: repeat(3, 1fr); - gap: 1rem; - } - - .footer-li { - margin-inline: 0.7vw; - } -} - -@media (width >=900px) { - .footer-cards { - grid-template-columns: repeat(6, 1fr); - } - - .footer-li { - margin-inline: 0.5vw; - } -} - -@media (width <=600px) { - .footer-li { - margin-inline: 1vw; - } -} - -.footer-logo { - background-image: url('../../../assets/lume-logo.webp'); - background-repeat: no-repeat; - background-size: contain; - height: 8.1vh; - min-width: 130px; - display: inline-block; - text-align: left; - z-index: 998 !important; -} - -.footer-email { - background-image: url('../../../assets/email-icon.webp'); - background-repeat: no-repeat; - background-size: contain; - background-position: left; - margin-right: 2%; - padding-inline: 10px; - height: 14px; - line-height: 5.5vh; -} - -.footer-h2 { - font-size: calc(12px + (20 - 10) * ((100vw - 300px) / (1600 - 300))); - color: var(--aquamarine); - line-height: 1vh; - z-index: 999; - margin-top: 5em; - white-space: nowrap; -} - -.footer-padding { - display: inline-block; - text-align: left; - font-family: var(--font-family-jaldi); - font-size: calc(15px + (21 - 10) * ((100vw - 300px) / (1600 - 300))); - margin-inline: -5px; - margin-top: 5vh; -} - -.footer-span { - margin-top: 1em; -} \ No newline at end of file diff --git a/src/components/P1/Meme/Meme.astro b/src/components/P1/Meme/Meme.astro deleted file mode 100644 index 6c974ab..0000000 --- a/src/components/P1/Meme/Meme.astro +++ /dev/null @@ -1,35 +0,0 @@ ---- -import "./MemeStyles.css"; ---- - -
    -
    -
    - web1
    web2
    crypto & defi
    web3     -
    -

    - TITLE -

    -

    - Building a new world for your data -

    -

    - Right now, Lume has only one full-time developer and limited - helper staff! We need help from developers, fundraisers, - funders, and contributors to bring the new internet to the - masses. -

    -
    -
    -
    -
    -
    diff --git a/src/components/P1/Meme/MemeStyles.css b/src/components/P1/Meme/MemeStyles.css deleted file mode 100644 index e737642..0000000 --- a/src/components/P1/Meme/MemeStyles.css +++ /dev/null @@ -1,107 +0,0 @@ -.meme-container { - align-self: flex-start; - position: relative; - width: 100%; - justify-content: center; - margin-block: 5vh; - padding-block: 5vh; -} - -.meme-bp { - padding-right: 45%; -} - -.meme-wrapper { - background-image: url("../../../assets/tilted-rectangle.webp"); - background-size: 100% 100%; - background-position: center; - background-repeat: no-repeat; - width: 100%; - padding-block: 2.1em; - justify-content: center; - align-items: center; - overflow: hidden; - display: flex; - height: 80vh; - transition: 0.5s; -} - -.meme-bg { - background-image: url("../../../assets/meme.webp"); - background-position: 60% 50%; - background-size: contain; - background-repeat: no-repeat; - height: calc(100% + 3vh); - transition: 0.5s; -} - -.meme-columns { - display: grid; - position: relative; - margin-block: calc(10% + 1.5625vh); -} - -@media screen and (width <=1050px) { - .meme-container { - z-index: 999 !important; - width: 100%; - transition: 0.5s; - } - - .meme-bp { - padding-right: 0%; - } - - .meme-wrapper { - width: 100%; - padding-inline: 15%; - padding-left: 18%; - height: 80vh; - transition: 0.5s; - } - - .meme-translucent { - max-width: 100%; - transition: 0.5s; - background-color: #020e10ac; - border-radius: 15px; - } - - .meme-bg { - background-position: 50% 50%; - z-index: 999 !important; - } - - .meme-columns { - display: grid; - position: relative; - margin-block: calc(25% + 1.5625vh); - transition: 0.5s; - } -} - -@media screen and (width >=2200px) { - .meme-container { - width: 100%; - justify-content: center; - display: inline-block; - transition: 0.5s; - } - - .meme-translucent { - max-width: 30%; - transition: 0.5s; - background-color: none; - border-radius: 15px; - } -} - -@keyframes textShine { - 0% { - background-position: 0% 50%; - } - - 100% { - background-position: 100% 50%; - } -} \ No newline at end of file diff --git a/src/components/P1/Vision/Vision.astro b/src/components/P1/Vision/Vision.astro deleted file mode 100644 index 33773b5..0000000 --- a/src/components/P1/Vision/Vision.astro +++ /dev/null @@ -1,39 +0,0 @@ ---- -import "./VisionStyles.css"; ---- - -
    -
    - -

    - OUR VISION -

    -

    - Make Web3 easy for
    everyone -

    -

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

    -
    - - Download Extension -
    -
    -
    diff --git a/src/components/P1/Vision/VisionStyles.css b/src/components/P1/Vision/VisionStyles.css deleted file mode 100644 index f839da7..0000000 --- a/src/components/P1/Vision/VisionStyles.css +++ /dev/null @@ -1,11 +0,0 @@ -.vt { - background-color: rgba(0 0 0 0%); -} - -@media screen and (width <=1200px) { - .vt { - background-color: #031418a7; - border-radius: 15px; - transition: 0.5s; - } -} \ No newline at end of file diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro new file mode 100644 index 0000000..476a097 --- /dev/null +++ b/src/layouts/Layout.astro @@ -0,0 +1,30 @@ +--- +import "../styles/global.css"; +import Navbar from "../components/Navbar/Navbar.jsx"; +import Footer from "../components/Footer/Footer.astro"; + +export interface Props { + view: string; + title: string; +} + +const { view, title } = Astro.props; +--- + + + + + {title} + + + + + + + +
    + +
    +