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">
|
||||
<div class="feature-group">
|
||||
<h2>Community-Powered</h2>
|
||||
<h3>Building the open, user-owned web you deserve</h3>
|
||||
<p>
|
||||
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.
|
||||
<section id="cto" class="w-full my-24 mx-20 xl:mx-40 flex flex-row">
|
||||
<div class="flex flex-col max-w-xl space-y-10">
|
||||
<h2 class="font-display text-primary font-bold text-2xl uppercase">
|
||||
Community-Powered
|
||||
</h2>
|
||||
<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>
|
||||
<div class="bio">
|
||||
<img src={avatar.src} />
|
||||
<div>
|
||||
<strong>Derrick Hammer</strong><br />
|
||||
CTO
|
||||
<div class="flex flex-row items-center gap-6">
|
||||
<img src={avatar.src} class="w-20 h-20" />
|
||||
<div class="flex flex-col font-body">
|
||||
<h6 class="text-xl">Derrick Hammer</h6>
|
||||
<p class="text-lg text-body">CTO</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<img
|
||||
src={abstractBg.src}
|
||||
class="float-right -z-10 absolute right-0 w-[800px]"
|
||||
/>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
<section id="vision">
|
||||
<div class="space-y-10 mx-40">
|
||||
<section id="vision" class="space-y-10 mx-20 xl:mx-40">
|
||||
<h2 class="font-display text-primary font-bold text-2xl uppercase">
|
||||
Our Vision
|
||||
</h2>
|
||||
|
|
@ -16,5 +15,4 @@
|
|||
>Download Extension</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ function getActiveClass(linkView) {
|
|||
</a>
|
||||
</div>
|
||||
<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>
|
||||
<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