diff --git a/src/App.tsx b/src/App.tsx index 7831901..851e0f2 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,13 +1,17 @@ +import EthLogo from './EthLogo'; import Starter from './Starter'; import Projects from './Projects'; import './App.css'; + + function App() { return (
- {Starter()} - {Projects()} + + +
); } diff --git a/src/EthLogo.css b/src/EthLogo.css new file mode 100644 index 0000000..18b822f --- /dev/null +++ b/src/EthLogo.css @@ -0,0 +1,6 @@ +.eth-diamond-logo { + position: fixed; + max-width: 5vh; + bottom: 1rem; + left: 1rem; +} \ No newline at end of file diff --git a/src/EthLogo.tsx b/src/EthLogo.tsx new file mode 100644 index 0000000..9fe09b9 --- /dev/null +++ b/src/EthLogo.tsx @@ -0,0 +1,12 @@ + +import eth from './images/eth-diamond-color.png'; +import './EthLogo.css'; + + +function EthLogo() { + return ( + Ethereum logo + ); +} + +export default EthLogo; \ No newline at end of file diff --git a/src/Project.css b/src/ProjectCard.css similarity index 83% rename from src/Project.css rename to src/ProjectCard.css index 38812d3..63e98b0 100644 --- a/src/Project.css +++ b/src/ProjectCard.css @@ -1,5 +1,7 @@ .card { border-radius: .35rem; + box-shadow: -22px 10px 0px var(--gray); + border-color: var(--gray); } .card-footer { @@ -7,6 +9,7 @@ grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr)); gap: 1.0rem; background-color: transparent; + border-top: 3px solid var(--gray); } .link { diff --git a/src/Project.tsx b/src/ProjectCard.tsx similarity index 90% rename from src/Project.tsx rename to src/ProjectCard.tsx index a1dff85..3a55a1d 100644 --- a/src/Project.tsx +++ b/src/ProjectCard.tsx @@ -3,7 +3,7 @@ import github from './images/github.svg'; import discord from './images/discord.svg'; import twitter from './images/twitter.svg'; import telegram from './images/telegram.svg'; -import './Project.css' +import './ProjectCard.css' export interface ProjectProps { name: string; @@ -30,7 +30,7 @@ function renderLink(url: string, source: string, icon: string): any { ); } -function Project(props: ProjectProps) { +function ProjectCard(props: ProjectProps) { let links = props.links.map((link) => { if (link.github) { return renderLink(link.github, 'github', github); @@ -48,7 +48,7 @@ function Project(props: ProjectProps) { }); return ( -
+
{props.name}

{props.description}

@@ -58,4 +58,4 @@ function Project(props: ProjectProps) { ); } -export default Project; +export default ProjectCard; diff --git a/src/Projects.css b/src/Projects.css index 2555bab..ca84ec3 100644 --- a/src/Projects.css +++ b/src/Projects.css @@ -1,5 +1,5 @@ .Projects { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); - gap: 1.5rem; + gap: 2.5rem; } \ No newline at end of file diff --git a/src/Projects.tsx b/src/Projects.tsx index 6ff40cf..c38cbd1 100644 --- a/src/Projects.tsx +++ b/src/Projects.tsx @@ -1,5 +1,5 @@ import React, { useState, useEffect } from 'react'; -import Project, { ProjectProps } from './Project'; +import ProjectCard, { ProjectProps } from './ProjectCard'; import ProjectData from './Projects.json'; import './Projects.css'; @@ -11,7 +11,7 @@ function Projects() { }, []); let _projects = projects.map((project) => { - return (); + return (); }) return ( diff --git a/src/Starter.css b/src/Starter.css index d69299c..8f51351 100644 --- a/src/Starter.css +++ b/src/Starter.css @@ -37,4 +37,11 @@ .arrow img { height: auto; width: 48px; +} + +.intro { + max-width: 45rem; + border-radius: .35rem; + border-color: var(--gray); + box-shadow: -22px 10px 0px var(--gray); } \ No newline at end of file diff --git a/src/Starter.tsx b/src/Starter.tsx index 1afc0d6..9628456 100644 --- a/src/Starter.tsx +++ b/src/Starter.tsx @@ -3,13 +3,15 @@ import logo from './images/pse-logo.svg'; import arrow from './images/arrow.svg'; import discord from './images/discord.svg'; import twitter from './images/twitter.svg'; -import './Starter.css' +import './Starter.css'; function Starter() { return ( -
- eth pse logo -

+
+ eth pse logo + +
+

Welcome to
Privacy & Scaling Explorations @@ -18,30 +20,30 @@ function Starter() { A multidisciplinary team supported by the Ethereum Foundation. PSE explores new use cases for zero knowledge proofs and other cryptographic primitives through research and proof-of-concept implementation. -
- We facilitate the integration of ZK primitives into decentralized applications.

-
- - +

We facilitate the integration of ZK primitives into decentralized applications.

+
+
+ -
- -
- more info below -
+
+
+ +
+ more info below +
+
+
); } diff --git a/src/images/banner.png b/src/images/banner.png new file mode 100644 index 0000000..b953f12 Binary files /dev/null and b/src/images/banner.png differ diff --git a/src/images/eth-diamond-color.png b/src/images/eth-diamond-color.png new file mode 100644 index 0000000..bc4c7aa Binary files /dev/null and b/src/images/eth-diamond-color.png differ diff --git a/src/images/footer.png b/src/images/footer.png new file mode 100644 index 0000000..b7e393f Binary files /dev/null and b/src/images/footer.png differ diff --git a/src/images/pse-deco.png b/src/images/pse-deco.png new file mode 100644 index 0000000..f7a1ec0 Binary files /dev/null and b/src/images/pse-deco.png differ diff --git a/src/images/pse-deco.svg b/src/images/pse-deco.svg new file mode 100644 index 0000000..8a14b6b --- /dev/null +++ b/src/images/pse-deco.svg @@ -0,0 +1,58 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/index.css b/src/index.css index b427b08..9d2c640 100644 --- a/src/index.css +++ b/src/index.css @@ -1,10 +1,36 @@ +:root { + --light-purple: #CFC4FB; + --light-purple2: rgb(195, 181, 250); + --green: #A6E275; + --aqua: #53D3E0; + --light-aqua: #CBF2F6; + --pink: #FF9C92; + --light-pink: #FFE1DE; + --gold: #FFE94D; + --gray: #282A2D; +} + +.bg-light-purple { + background-color: var(--light-purple2); +} + +.bg-light-pink { + background-color: var(--light-pink) +} + +.bg-light-aqua { + background-color: var(--light-aqua) +} + body { color: black; background: rgb(195, 181, 250); - background: linear-gradient(180deg, rgba(219, 211, 252, 1) 0%, rgba(219, 211, 252, 1) 100%); background-attachment: fixed; height: 100vh; font-family: 'Inter', sans-serif; + background-image: url('./images/pse-deco.png'); + background-repeat: no-repeat; + background-position: right -20em bottom 5em; } @media screen and (max-width: 800px) {