temp
This commit is contained in:
parent
104937057b
commit
96f92082c3
@ -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
106
src/layout.tsx
@ -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
8
src/leader-badge.tsx
Normal 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>
|
||||
}
|
@ -5,6 +5,7 @@ export default {
|
||||
extend: {
|
||||
colors: {
|
||||
nostr: "#5b2cb3",
|
||||
link: "#AC88FF",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
Loading…
Reference in New Issue
Block a user