feat: finish all new design implementations
This commit is contained in:
Juan Di Toro
parent
3552e8bb84
commit
486bc6ae72
|
|
@ -1,21 +1,31 @@
|
||||||
---
|
---
|
||||||
import './CTO.scss';
|
import avatar from "/src/assets/cto-avatar.png";
|
||||||
import avatar from '/src/assets/cto-avatar.png';
|
import abstractBg from "/src/assets/single-brand-bg-1.png";
|
||||||
---
|
---
|
||||||
|
|
||||||
<section id="cto">
|
<section id="cto" class="w-full my-24 mx-20 xl:mx-40 flex flex-row">
|
||||||
<div class="feature-group">
|
<div class="flex flex-col max-w-xl space-y-10">
|
||||||
<h2>Community-Powered</h2>
|
<h2 class="font-display text-primary font-bold text-2xl uppercase">
|
||||||
<h3>Building the open, user-owned web you deserve</h3>
|
Community-Powered
|
||||||
<p>
|
</h2>
|
||||||
Right now, Lume has only one full-time developer, a few freelancers, and limited helper staff! We need help from developers, fundraisers, funders, and contributors to bring the new internet to the masses.
|
<h3 class="font-display text-6xl font-bold">
|
||||||
|
Building a new world for your data
|
||||||
|
</h3>
|
||||||
|
<p class="font-body text-2xl text-body">
|
||||||
|
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.
|
||||||
</p>
|
</p>
|
||||||
<div class="bio">
|
<div class="flex flex-row items-center gap-6">
|
||||||
<img src={avatar.src} />
|
<img src={avatar.src} class="w-20 h-20" />
|
||||||
<div>
|
<div class="flex flex-col font-body">
|
||||||
<strong>Derrick Hammer</strong><br />
|
<h6 class="text-xl">Derrick Hammer</h6>
|
||||||
CTO
|
<p class="text-lg text-body">CTO</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<img
|
||||||
|
src={abstractBg.src}
|
||||||
|
class="float-right -z-10 absolute right-0 w-[800px]"
|
||||||
|
/>
|
||||||
</section>
|
</section>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,4 @@
|
||||||
<section id="vision">
|
<section id="vision" class="space-y-10 mx-20 xl:mx-40">
|
||||||
<div class="space-y-10 mx-40">
|
|
||||||
<h2 class="font-display text-primary font-bold text-2xl uppercase">
|
<h2 class="font-display text-primary font-bold text-2xl uppercase">
|
||||||
Our Vision
|
Our Vision
|
||||||
</h2>
|
</h2>
|
||||||
|
|
@ -16,5 +15,4 @@
|
||||||
>Download Extension</a
|
>Download Extension</a
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,7 @@ function getActiveClass(linkView) {
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<menu
|
<menu
|
||||||
class="hidden flex-col items-center gap-14 z-20 max-sm:bg-black max-sm:absolute max-sm:right-0 max-sm:top-0 max-sm:bottom-0 max-sm:z-20 max-sm:py-20 max-sm:px-10 max-sm:bg-black md:flex-row md:flex"
|
class="hidden flex-col items-center gap-14 z-20 max-sm:bg-black max-sm:absolute max-sm:right-0 max-sm:top-0 max-sm:bottom-0 max-sm:z-20 max-sm:py-20 max-sm:px-10 max-sm:bg-black lg:flex-row lg:flex"
|
||||||
>
|
>
|
||||||
<li>
|
<li>
|
||||||
<a href="/" class={getActiveClass("home")}>Home</a>
|
<a href="/" class={getActiveClass("home")}>Home</a>
|
||||||
|
|
|
||||||
|
|
@ -1,74 +0,0 @@
|
||||||
import React, { useState, useEffect } from 'react';
|
|
||||||
import './Navbar.scss';
|
|
||||||
import logo from '/src/assets/lume-logo.png';
|
|
||||||
|
|
||||||
function Navbar({ view }) {
|
|
||||||
const [nav, setNav] = useState(false);
|
|
||||||
|
|
||||||
const toggleNav = () => {
|
|
||||||
if(nav) {
|
|
||||||
document.body.classList.remove("scroll-lock");
|
|
||||||
setNav(false);
|
|
||||||
} else {
|
|
||||||
document.body.classList.add("scroll-lock");
|
|
||||||
setNav(true);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const onMenuClick = function(event) {
|
|
||||||
if(!nav) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if(event.pageX < event.target.offsetLeft) {
|
|
||||||
// click outside of menu
|
|
||||||
toggleNav();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
let resizeTimeout;
|
|
||||||
const onResize = () => {
|
|
||||||
clearTimeout(resizeTimeout);
|
|
||||||
resizeTimeout = setTimeout(() => {
|
|
||||||
if(nav && window.innerWidth >= 900) {
|
|
||||||
toggleNav();
|
|
||||||
}
|
|
||||||
}, 25);
|
|
||||||
};
|
|
||||||
|
|
||||||
window.addEventListener('resize', onResize);
|
|
||||||
|
|
||||||
return () => window.removeEventListener('resize', onResize);
|
|
||||||
}, [nav]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<nav>
|
|
||||||
<div className="logo">
|
|
||||||
<a href="/">
|
|
||||||
<img src={logo.src} alt="Lume" />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<menu className={nav ? 'active' : undefined} onClick={onMenuClick}>
|
|
||||||
<li>
|
|
||||||
<a href="/" className={view === 'home' ? 'current' : undefined} aria-current={view === 'home' ? 'page' : undefined}>Home</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="/vision" className={view === 'vision' ? 'current' : undefined} aria-current={view === 'vision' ? 'page' : undefined}>Vision</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="/what-is-web3" className={view === 'what' ? 'current' : undefined} aria-current={view === 'what' ? 'page' : undefined}>What is Web3</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="/donate" className={view === 'donate' ? 'current' : undefined} aria-current={view === 'donate' ? 'page' : undefined}>Donate</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a className="btn-main download-btn" href="#">Download Extension</a>
|
|
||||||
</li>
|
|
||||||
</menu>
|
|
||||||
<button className="hamburger" onClick={toggleNav}>☰</button>
|
|
||||||
</nav>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Navbar
|
|
||||||
|
|
@ -1,115 +0,0 @@
|
||||||
@import "/src/styles/mixins.scss";
|
|
||||||
@import "/src/styles/vars.scss";
|
|
||||||
|
|
||||||
nav {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 2em 3.75%;
|
|
||||||
@include fluid-font-size(1.25rem);
|
|
||||||
white-space: nowrap;
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
flex-shrink: 0;
|
|
||||||
|
|
||||||
img {
|
|
||||||
@include fluid-width-height(13.125rem, 4.375rem);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
menu {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
li > a {
|
|
||||||
display: block;
|
|
||||||
padding: 0.55em 0.9em;
|
|
||||||
@include fluid-font-size(1.25rem);
|
|
||||||
text-decoration: underline;
|
|
||||||
text-decoration-color: transparent;
|
|
||||||
transition: text-decoration-color $transition-duration;
|
|
||||||
|
|
||||||
&.current, &:hover, &:active {
|
|
||||||
text-decoration-color: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.current {
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.download-btn {
|
|
||||||
margin-left: 0.9em;
|
|
||||||
@include fluid-font-size(1.25rem);
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.hamburger {
|
|
||||||
display: none;
|
|
||||||
font-size: 2rem;
|
|
||||||
cursor: pointer;
|
|
||||||
z-index: 1;
|
|
||||||
margin: 0 3.75% 0 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 56rem) {
|
|
||||||
nav {
|
|
||||||
position: sticky;
|
|
||||||
top: 0;
|
|
||||||
background: rgba($color-blue-charcoal-2, 0.8);
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
menu {
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
flex-direction: column;
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
right: min(-20rem, -100vw);
|
|
||||||
bottom: 0;
|
|
||||||
padding: 7.5em 7.5% 1em;
|
|
||||||
background: rgba($color-blue-charcoal-2, 0.8);
|
|
||||||
transition: right $transition-duration;
|
|
||||||
overflow-y: auto;
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
right: 0;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
content: "";
|
|
||||||
position: fixed;
|
|
||||||
inset: 0;
|
|
||||||
background: $color-black;
|
|
||||||
animation: $transition-duration bg-opacity forwards;
|
|
||||||
z-index: -1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
li > a {
|
|
||||||
font-size: 1.25rem;
|
|
||||||
padding-left: 0.8em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.download-btn {
|
|
||||||
font-size: 1.25rem;
|
|
||||||
margin: 1.1em 0 0 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.hamburger {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes bg-opacity {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue