Kieran/snort_community
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

temp

Browse Source
This commit is contained in:
Kieran 2023-12-18 15:04:05 +00:00
parent 104937057b
commit 96f92082c3
Signed by: Kieran
GPG Key ID: DE71CEB3925BE941
4 changed files with 125 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/index.css
View File

@ -23,14 +23,34 @@ body {
fill: rgba(172, 136, 255, 0.2);
}
header {
z-index: 99;
top: 32px;
position: sticky;
background-color: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(20px);
border: 1px solid rgba(129, 30, 255, 0.3);
}
.bg-nostr-haze {
background: linear-gradient(78deg, rgba(140, 91, 251, 0.25) 11.54%, rgba(140, 91, 251, 0.16) 85.45%);
backdrop-filter: blur(8.571428298950195px);
}
.bg-earn {
background-color: #090909;
background-image: url("https://assets-global.website-files.com/656752313194d9d3d4cc4103/6567dc7d29344452f727476c_circles-small.png"),
url("https://assets-global.website-files.com/656752313194d9d3d4cc4103/656804a4b330bb3fe404982c_1col-bg-min.png");
background-position:
0 100%,
100%;
background-repeat: no-repeat, no-repeat;
background-size: 291px, 840px;
}
button.primary {
display: flex;
padding: 10px 12px;
padding: 14px 16px;
justify-content: center;
align-items: center;
gap: 6px;
@ -38,6 +58,37 @@ button.primary {
background: linear-gradient(90deg, #ef9644 0%, #7b41f6 100%);
}
button.primary:hover {
box-shadow: 0 0 10px #801dff;
}
.overflow-wrap {
overflow-wrap: break-word;
}
@keyframes slideInFromBottom {
0% {
transform: translateY(80px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
.slide-in {
animation: slideInFromBottom 1s ease-out forwards;
}
footer {
background-image: url("https://assets-global.website-files.com/656752313194d9d3d4cc4103/6567530e31efe21929868115_large-circle.svg");
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: 600px;
text-align: center;
margin-top: 100px;
margin-bottom: 100px;
padding: 120px 200px;
position: relative;
}

106
src/layout.tsx
View File

@ -1,25 +1,34 @@
import { ReactNode } from "react";
import AwardIcon from "./award";
import Radar from "./radar";
import { LeaderBadge } from "./leader-badge";
export function Layout() {
return (
<div className="flex flex-col gap-6 container mx-auto text-center">
<div className="flex items-center rounded-full py-2 px-8 mx-auto gap-6 border border-nostr mt-8 w-fit">
<div className="font-semibold">Snort</div>
<div>Overview</div>
<div>Benefits</div>
<div>Current Leaders</div>
<div className="flex flex-col gap-6 w-[1080px] mx-auto text-center">
<header className="flex items-center rounded-full py-2 px-8 gap-12 mt-8 justify-between mx-auto">
<div className="font-semibold text-2xl cursor-pointer">Snort</div>
<div className="cursor-pointer" onClick={() => {
document.querySelector("#overview")!.scrollIntoView({
behavior: "smooth",
});
}}>Overview</div>
<div className="cursor-pointer" onClick={() => {
document.querySelector("#benefits")!.scrollIntoView({
behavior: "smooth",
});
}}>Benefits</div>
<div>
<button className="primary">Become a Leader</button>
</div>
</div>
<div className="relative h-[800px] flex flex-col items-center justify-center">
</header>
<div className="relative h-[800px] flex flex-col items-center justify-center slide-in" id="overview">
<Radar />
<div className="flex flex-col items-center gap-6 z-10 overflow-wrap">
<div className="p-4 rounded-3xl border border-nostr w-fit bg-nostr-haze">
<AwardIcon size={64} />
</div>
<h1 className="text-3xl font-semibold">
<h1 className="text-4xl font-semibold">
Grow your local community as a nostr <span className="text-nostr-fade">community leader</span>
</h1>
<h2 className="text-gray-400 text-lg">
@ -29,47 +38,60 @@ export function Layout() {
<button className="primary">Become a Leader</button>
</div>
</div>
<div className="flex gap-4">
<div className="flex-1 rounded-xl bg-zinc-950 p-4 border border-zinc-900 flex flex-col gap-4">
<h2 className="text-2xl">Client-wide recognition</h2>
<h3>Leaders are recognized across Snort, and hopefully other clients to come</h3>
</div>
<div className="flex-1 rounded-xl bg-zinc-950 p-4 border border-zinc-900 flex flex-col gap-4">
<h2 className="text-2xl">Exclusive discussions</h2>
<h3>Join optional calls with other community leaders to share ideas and draw inspiration</h3>
</div>
<div className="flex gap-4" id="benefits">
<GridBox
title="Client-wide recognition"
image={<div className="flex gap-2">
<LeaderBadge />
</div>}
description="Leaders are recognized across Snort, and hopefully other clients to come" />
<GridBox
title="Exclusive discussions"
image={<img src="https://assets-global.website-files.com/656752313194d9d3d4cc4103/6567db139262cc71ead666c2_discussions-p-500.png" className="w-[279px]" />}
description="Join optional calls with other community leaders to share ideas and draw inspiration" />
</div>
<div className="rounded-xl bg-zinc-950 p-4 border border-zinc-900 flex flex-col gap-4">
<h2 className="text-2xl">Earn referral income</h2>
<h3>Community leaders earn subscription referral revenue for every person who signs up to the PRO plan</h3>
</div>
<div>
<GridBox
title="Earn referral income"
description="Community leaders earn subscription referral revenue for every person who signs up to the PRO plan"
className="bg-earn">
<button className="primary">Become a Leader</button>
</GridBox>
<div className="slide-in">
<h1 className="text-3xl">Onboard new people, have fun, and get the recognition you deserve</h1>
</div>
<div className="flex gap-4">
<div className="flex-1 rounded-xl bg-zinc-950 p-4 border border-zinc-900 flex flex-col gap-4">
<h2 className="text-2xl">Organize local meetups</h2>
<h3>Meetups are a great way to get your local community involved in nostr.</h3>
</div>
<div className="flex-1 rounded-xl bg-zinc-950 p-4 border border-zinc-900 flex flex-col gap-4">
<h2 className="text-2xl">Create educational content</h2>
<h3>Video, long form, newsletters, presentations all go a long way!</h3>
</div>
<GridBox
title="Organize local meetups"
image="https://assets-global.website-files.com/656752313194d9d3d4cc4103/6567f03c2113467a68eb8135_meetups.png"
description="Meetups are a great way to get your local community involved in nostr." />
<GridBox
title="Create educational content"
image="https://assets-global.website-files.com/656752313194d9d3d4cc4103/6567f03c8a2df92ee4e8ef5c_educational.png"
description="Video, long form, newsletters, presentations all go a long way!" />
</div>
<div className="flex gap-4">
<div className="flex-1 rounded-xl bg-zinc-950 p-4 border border-zinc-900 flex flex-col gap-4">
<h2 className="text-2xl">Stream content</h2>
<h3>Reach the younger generations with streamed content and video on demand.</h3>
</div>
<div className="flex-1 rounded-xl bg-zinc-950 p-4 border border-zinc-900 flex flex-col gap-4">
<h2 className="text-2xl">Create guides in your local language</h2>
<h3>Love writing? Create guides in your language to help onboard the local community.</h3>
</div>
<GridBox
title="Stream content"
image="https://assets-global.website-files.com/656752313194d9d3d4cc4103/6567f03c13f0c00c4ccfc1c4_stream.png"
description="Reach the younger generations with streamed content and video on demand." />
<GridBox
title="Create guides in your local language"
image="https://assets-global.website-files.com/656752313194d9d3d4cc4103/6567f03c2d3f7616f6bca2e8_guides.png"
description="Love writing? Create guides in your language to help onboard the local community." />
</div>
<div className="flex flex-col items-center gap-6">
<h1 className="text-3xl">Join the community leader program. It’s easy!</h1>
<footer className="flex flex-col items-center gap-6 slide-in">
<h1 className="text-3xl font-semibold">Join the community leader program. It’s easy!</h1>
<button className="primary">Become a Leader</button>
</div>
</footer>
</div>
);
}
function GridBox({ image, title, description, children, className }: { image?: ReactNode, title?: string, description?: string, children?: ReactNode, className?: string }) {
return <div className={`${className} flex-1 rounded-xl bg-zinc-950 px-6 py-12 border border-zinc-900 hover:border-zinc-800 flex flex-col gap-6 justify-center items-center slide-in transition`}>
{image && (typeof image === "string" ? <img src={image} className="w-[164px]" /> : image)}
{title && <h1 className="text-3xl font-semibold">{title}</h1>}
{description && <p className="text-zinc-400">{description}</p>}
{children}
</div>
}

8
src/leader-badge.tsx Normal file
View File

@ -0,0 +1,8 @@
import AwardIcon from "./award";
export function LeaderBadge() {
return <div className="flex gap-1 p-1 pr-2 items-center border border-nostr rounded-full">
<AwardIcon size={16} />
<div className="text-xs font-medium text-link">Community Leader</div>
</div>
}

1
tailwind.config.js
View File

@ -5,6 +5,7 @@ export default {
extend: {
colors: {
nostr: "#5b2cb3",
link: "#AC88FF",
},
},
},