AtHeartEngineer/website
1
0
Fork 0
mirror of https://github.com/tlsnotary/website.git synced 2026-01-07 22:13:56 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat: design v1.3

Browse Source
This commit is contained in:
Kalidou Diagne
2024-06-06 14:23:09 +02:00
parent 1550c10f63
commit 0ccb4fdcc9
27 changed files with 621 additions and 415 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.github/workflows/build_deploy_master.yml vendored
View File

@@ -29,7 +29,7 @@ jobs:
- name: Upload artifact 📡
uses: actions/upload-pages-artifact@v3
with:
path: out
path: ./landing-page/out
- name: Publish to GitHub Pages 🚀
uses: actions/deploy-pages@v4

67
app/about/page.tsx
View File

@@ -1,50 +1,55 @@
import { AppContainer } from "../../components/AppContainer";
import { Section } from "../../components/Section";
import { Button } from "../../components/ui/Button";
import Link from "next/link";
import React from "react";
import { LINKS } from "../settings";
import { Card } from "../../components/ui/Card";
import { COMMON_CONTENT } from "../../content/common";
import { Banner } from "../../components/ui/Banner";
import { LABELS } from "../../content";
import { AppLink } from "@/components/AppLink";
export default function AboutPage() {
return (
<main>
<AppContainer className="flex flex-col gap-12 md:gap-20 pt-20 pb-16" size="small">
<Section title={LABELS.ABOUT.WHO_WE_ARE.TITLE} description={LABELS.ABOUT.WHO_WE_ARE.DESCRIPTION} />
<Section title={LABELS.ABOUT.HOW_IT_WORKS.TITLE} description={LABELS.ABOUT.HOW_IT_WORKS.DESCRIPTION}>
<div className="grid grid-cols gap-8">
{LABELS.ABOUT.HOW_IT_WORKS.STEPS.map((step, index) => (
<Card.Base className="appear" spacing="medium" shadow={false} key={index}>
<div className="flex flex-col md:flex-row items-center gap-10 md:gap-16">
<div className="w-[120px] mx-auto md:mx-0">{step?.icon}</div>
<div className="flex flex-col gap-4">
<span className="text-lg text-primary font-semibold leading-[21px]">{step.TITLE}</span>
<span className="text-lg text-primary leading-[21px]">{step.DESCRIPTION}</span>
</div>
</div>
</Card.Base>
))}
<Section
title={
<h2 className="text-primary font-semibold font-inter text-center text-[32px]">
{LABELS.ABOUT.WHO_WE_ARE.TITLE}
</h2>
}
description={LABELS.ABOUT.WHO_WE_ARE.DESCRIPTION}
>
<div className="mx-auto">
<AppLink href="" external showExternalIcon>
<Button variant="transparent">{LABELS.COMMON.VIEW_DOCUMENTATION}</Button>
</AppLink>
</div>
</Section>
<Section title={LABELS.ABOUT.GET_INVOLVED.TITLE} description={LABELS.ABOUT.GET_INVOLVED.DESCRIPTION} />
<div className="flex flex-col w-full md:w-auto md:flex-row gap-4 mx-auto">
<Link href={LINKS.DOCUMENTATION} target="_blank">
<Button className="w-full">{COMMON_CONTENT.VIEW_DOCUMENTATION}</Button>
</Link>
<Link href={LINKS.GITHUB}>
<Button className="w-full" variant="transparent">
{COMMON_CONTENT.FORK_REPO}
</Button>
</Link>
</div>
<Section
title={
<h2 className="text-primary font-semibold font-inter text-center text-[32px]">
{LABELS.ABOUT.GET_INVOLVED.TITLE}
</h2>
}
description={LABELS.ABOUT.GET_INVOLVED.DESCRIPTION}
>
<div className="mx-auto">
<AppLink href={LINKS.GITHUB} external showExternalIcon>
<Button variant="transparent">{LABELS.COMMON.CHECKOUT_GITHUB}</Button>
</AppLink>
</div>
</Section>
</AppContainer>
<Banner title={LABELS.COMMON.CONNECT_WITH_US.TITLE} description={LABELS.COMMON.CONNECT_WITH_US.DESCRIPTION} />
<Banner
title={LABELS.COMMON.CONNECT_WITH_US.TITLE}
description={LABELS.COMMON.CONNECT_WITH_US.DESCRIPTION}
actions={
<AppLink href={LINKS.DISCORD} external>
<Button variant="primary">{LABELS.COMMON.JOIN_DISCORD}</Button>
</AppLink>
}
/>
</main>
);
}

10
app/faq/page.tsx
View File

@@ -9,8 +9,14 @@ import React from "react";
export default function FAQPage() {
return (
<main>
<AppContainer size="small" className="flex flex-col pt-20 pb-16">
<Section title={LABELS.COMMON.FAQ}>
<AppContainer size="small" className="flex flex-col py-16 md:py-[120px]">
<Section
title={
<h2 className="text-primary text-center font-bold font-inter text-[32px] md:text-[56px]">
{LABELS.COMMON.FAQ}
</h2>
}
>
<div className="flex flex-col gap-6">
{FAQS.map(({ answer, question }, index) => {
return (

8
app/layout.tsx
View File

@@ -1,11 +1,11 @@
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import { Inter, DM_Sans } from "next/font/google";
import "./globals.css";
import { AppFooter } from "../components/AppFooter";
import { AppHeader } from "../components/AppHeader";
import { cn } from "../shared/utils";
const inter = Inter({ subsets: ["latin"] });
const inter = Inter({ subsets: ["latin"], variable: "--font-inter", display: "swap" });
const sans = DM_Sans({ subsets: ["latin"], variable: "--font-sans", display: "swap" });
export const metadata: Metadata = {
title: "TLSNotary",
@@ -28,7 +28,7 @@ export default function RootLayout({
}>) {
return (
<html lang="en">
<body className={cn(inter.className)}>
<body className={`${inter.className} ${inter.variable} ${sans.variable} font-inter`}>
<AppHeader />
{children}
<AppFooter />

156
app/page.tsx
View File

@@ -1,58 +1,130 @@
import { AppLink } from "@/components/AppLink";
import { AppContainer } from "../components/AppContainer";
import { Banner } from "../components/ui/Banner";
import { Banner, BannerTitle, BannerWrapper } from "../components/ui/Banner";
import { Button } from "../components/ui/Button";
import { Card } from "../components/ui/Card";
import { Label } from "../components/ui/Label";
import { LABELS } from "../content";
import { COMMON_CONTENT } from "../content/common";
import { WHAT_WE_DO } from "../content/whatWeDo";
import { LINKS } from "./settings";
import { Icons } from "@/components/Icons";
import { Section } from "@/components/Section";
import Image from "next/image";
import { classed } from "@tw-classed/react";
interface ComparisonTableProps {
title: string;
tls: boolean;
tlsNotary: boolean;
}
const TableWrapper = classed.div("grid grid-cols-4 ");
const TableTitle = classed.h4("font-semibold text-[15px] text-inter text-brown-50 uppercase");
const TableContent = classed.div("p-4");
const ComparisonTable = ({ title, tls, tlsNotary }: ComparisonTableProps) => {
return (
<TableWrapper>
<TableContent className=" col-span-2">
<span className="text-primary font-semibold text-lg text-inter">{title}</span>
</TableContent>
<TableContent className="m-auto">{tls ? <Icons.Check /> : <Icons.X />}</TableContent>
<TableContent className="m-auto">{tlsNotary ? <Icons.Check /> : <Icons.X />}</TableContent>
</TableWrapper>
);
};
export default function Home() {
return (
<main>
<AppContainer className="flex flex-col gap-8 md:gap-12 lg:gap-16 pt-16 pb-6">
<div className="flex flex-col gap-2 lg:w-3/4">
<Label.Subtitle>{LABELS.HOMEPAGE.SUBTITLE}</Label.Subtitle>
<Label.Title>{LABELS.HOMEPAGE.TITLE}</Label.Title>
</div>
<div className="flex flex-col md:flex-row gap-4">
<Button>{LABELS.COMMON.VIEW_DOCUMENTATION}</Button>
<Button variant="transparent">{LABELS.COMMON.FORK_REPO}</Button>
</div>
</AppContainer>
<Banner title={LABELS.HOMEPAGE.INTRO.TITLE} description={LABELS.HOMEPAGE.INTRO.DESCRIPTION} />
<AppContainer className="py-[120px] ">
<div className="flex flex-col gap-10 md:gap-16">
<div className="grid grid-cols-1 gap-8 lg:grid-cols-5">
{WHAT_WE_DO.map(({ title, icon }, index) => {
return (
<Card.Base className="appear" shadow key={index}>
<div className="flex flex-col gap-14 items-center">
{icon}
<span className=" text-primary text-xl font-semibold leading-6">{title}</span>
</div>
</Card.Base>
);
})}
<AppContainer className="flex flex-col">
<div className="flex flex-col gap-8 md:gap-12 lg:gap-16 py-16 ">
<div className="flex flex-col gap-10">
<div className="flex flex-col gap-2 w-full lg:w-3/4">
<Label.Subtitle className=" ">{LABELS.HOMEPAGE.SUBTITLE}</Label.Subtitle>
<Label.Title>{LABELS.HOMEPAGE.TITLE}</Label.Title>
</div>
<span className="w-full lg:w-3/4 text-primary text-base font-inter md:text-xl font-medium">
{LABELS.HOMEPAGE.DESCRIPTION}
</span>
</div>
<AppLink href={LINKS.DOCUMENTATION} external>
<Button className="w-full md:w-auto">{LABELS.COMMON.CHECKOUT_DOCS}</Button>
</AppLink>
</div>
<Icons.DividerHomepage className="hidden md:flex mx-auto w-full" />
</AppContainer>
<AppContainer className="py-16 md:py-[120px] w-full lg:!max-w-[960px]">
<Section
title={
<h3 className="text-primary text-3xl text-center font-bold md:text-5xl md:leading-[49px]">
{LABELS.HOMEPAGE.WHY_USE_TLSNOTARY.TITLE}
</h3>
}
description={LABELS.HOMEPAGE.WHY_USE_TLSNOTARY.DESCRIPTION}
>
<div className="relative w-full h-[200px] py-16">
<Image src="/images/infographic.svg" alt="infographic" fill />
</div>
</Section>
</AppContainer>
<AppContainer className="pb-16 md:pb-[120px]">
<div className="!max-w-[640px] mx-auto">
<TableWrapper className="px-8">
<div className=" col-span-2"></div>
<TableContent className="text-center">
<span className="text-primary font-bold py-4 font-inter text-xs md:text-2xl">TLS</span>
</TableContent>
<TableContent className="text-center">
<span className="text-primary font-bold py-4 font-inter text-xs md:text-2xl">TLSNotary</span>
</TableContent>
</TableWrapper>
<div className=" p-8 border border-gray-100 bg-gray rounded-xl">
<TableContent>
<TableTitle>{LABELS.COMMON.SERVER_AUTHENTICATION}</TableTitle>
</TableContent>
<ComparisonTable title="Data Origin" tls tlsNotary />
<ComparisonTable title="Data Integrity" tls tlsNotary />
<TableContent>
<TableTitle>{LABELS.COMMON.SERVER_AUTHENTICATION}</TableTitle>
</TableContent>
<ComparisonTable title="Trustless" tls={false} tlsNotary />
<ComparisonTable title="Privacy Preserving" tls={false} tlsNotary />
</div>
<span className="appear text-center text-primary text-xl font-semibold leading-6">
{COMMON_CONTENT.AND_MORE}
</span>
</div>
</AppContainer>
<BannerWrapper color="gray">
<AppContainer className="flex flex-col gap-8">
<BannerTitle className="text-center" variant="primary">
{LABELS.COMMON.LEARN_THE_BASICS}
</BannerTitle>
<div className="mx-auto">
<iframe
className="w-full min-w-[360px] md:min-h-[320px] md:min-w-[560px]"
src="https://www.youtube.com/embed/bNGSdlvIPfI?si=xJSG43Go-JQGy_hs"
title="YouTube video player"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
// @ts-ignore
referrerPolicy="strict-origin-when-cross-origin"
allowFullScreen
/>
</div>
</AppContainer>
</BannerWrapper>
<Banner
title={LABELS.HOMEPAGE.DOWNLOAD.TITLE}
description={LABELS.HOMEPAGE.DOWNLOAD.DESCRIPTION}
titleSize="small"
inverse
>
<div className="flex justify-center items-center bg-slate-200 rounded-2xl h-[260px] md:h-[400px]">
<iframe width="400" height="260" src="https://www.youtube-nocookie.com/embed/bNGSdlvIPfI?si=ajKeL15xl1NLarrU" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerPolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
</Banner>
title={LABELS.HOMEPAGE.BUILD_WITH_US.TITLE}
description={LABELS.HOMEPAGE.BUILD_WITH_US.DESCRIPTION}
actions={
<AppLink href={LINKS.DISCORD} external>
<Button variant="primary">{LABELS.COMMON.JOIN_DISCORD}</Button>
</AppLink>
}
/>
</main>
);
}

20
app/settings.tsx
View File

@@ -12,7 +12,7 @@ type NavItem = {
export const LINKS = {
DISCORD: "https://discord.gg/9XwESXtcN7",
GITHUB: "https://github.com/tlsnotary/tlsn",
TWITTER: "https://github.com/tlsnotary/tlsn",
TWITTER: "https://twitter.com/tlsnotary",
DOCUMENTATION: "https://docs.tlsnotary.org/",
BLOG: "#",
};
@@ -23,18 +23,22 @@ export const NAVIGATION: NavItem[] = [
label: "About",
href: "/about",
},
{
label: "Use Cases",
href: "/use-cases",
},
{
label: "FAQ",
href: "/faq",
},
{
label: "API",
href: "https://tlsnotary.github.io/tlsn/",
label: "Documentation",
href: LINKS.DOCUMENTATION,
external: true,
},
{
label: "Documentation",
href: LINKS.DOCUMENTATION,
label: "API",
href: "https://tlsnotary.github.io/tlsn/",
external: true,
},
];
@@ -75,4 +79,10 @@ export const SOCIALS_HEADER: NavItem[] = [
external: true,
icon: <Icons.GithubCircle />,
},
{
label: "Twitter",
href: LINKS.TWITTER,
external: true,
icon: <Icons.TwitterCircle />,
},
];

90
app/use-cases/page.tsx Normal file
View File

@@ -0,0 +1,90 @@
import { AppLink } from "@/components/AppLink";
import { Banner } from "@/components/ui/Banner";
import { Button } from "@/components/ui/Button";
import { LABELS } from "@/content";
import React from "react";
import { LINKS } from "../settings";
import { AppContainer } from "@/components/AppContainer";
import { Section } from "@/components/Section";
import { ProjectList, WebsiteType } from "@/content/projects";
import { Card } from "@/components/ui/Card";
import { Icons } from "@/components/Icons";
const IconMapping: Record<WebsiteType, React.ReactNode> = {
twitter: <Icons.Twitter className="text-white hover:bg-brown-50 duration-200" />,
github: <Icons.Github className="text-white hover:bg-brown-50 duration-200" />,
website: <Icons.Website className="text-white hover:bg-brown-50 duration-200" />,
};
export default function UseCases() {
return (
<div className="flex flex-col">
<div className=" py-16">
<AppContainer className="flex flex-col gap-16 !max-w-[800px]">
<Section
title={
<h2 className=" text-primary font-semibold text-[32px] text-center">
{LABELS.USE_CASES.USE_CASES.TITLE}
</h2>
}
description={LABELS.USE_CASES.USE_CASES.DESCRIPTION}
></Section>
<Section
title={
<h2 className=" text-primary font-semibold text-[32px] text-center">
{LABELS.USE_CASES.BUILD_WITH_TLSNOTARY}
</h2>
}
>
<div className="grid grid-cols-1 gap-5 md:grid-cols-2">
{ProjectList.map((project) => {
return (
<Card.Base key={project.title}>
<div className="flex flex-col gap-3">
<h5 className=" text-white font-inter font-semibold text-[28px] leading-[28px]">
{project.title}
</h5>
<div className=" min-h-[100px]">
<span className="text-white text-sm font-normal font-inter line-clamp-5">{project.tldr}</span>
</div>
</div>
<div className="mt-5">
{Object.keys(project?.links ?? []).map((website, index) => {
// @ts-ignore
const url: string | undefined = project.links?.[website] ?? undefined;
const icon: any = IconMapping[website as WebsiteType];
if (!url) return null;
if (!icon) return null;
return (
<div key={index}>
<AppLink href={url} external>
{icon}
</AppLink>
</div>
);
})}
</div>
</Card.Base>
);
})}
</div>
</Section>
</AppContainer>
</div>
<Banner
title={LABELS.USE_CASES.BANNER.TITLE}
description={LABELS.USE_CASES.BANNER.DESCRIPTION}
descriptionClass="text-center"
actions={
<AppLink href={LINKS.DISCORD} external>
<Button variant="primary">{LABELS.COMMON.JOIN_DISCORD}</Button>
</AppLink>
}
/>
</div>
);
}

42
components/AppFooter.tsx
View File

@@ -17,18 +17,43 @@ export const AppFooter = () => {
return (
<div className="bg-primary">
<AppContainer className="py-8 flex gap-10 md:gap-0 flex-col md:flex-row justify-between">
<div className="flex items-center gap-[34px] my-auto">
<div className="flex flex-col md:flex-row items-center gap-[34px] my-auto">
<Link href="/">
<Icons.Logo className="text-gray" />
</Link>
<NavLabel className="max-w-52">{LABELS.COMMON.FOOTER.TITLE}</NavLabel>
<NavLabel className="text-center md:text-left md:max-w-[250px]">{LABELS.COMMON.FOOTER.TITLE}</NavLabel>
</div>
<div className="flex flex-col md:flex-row gap-10 md:gap-[100px]">
<div className="flex flex-col gap-6">
{NAVIGATION.map(({ label, href, external }, index) => {
if (external) return null;
return (
<Link className="uppercase" key={index} href={href} target={external ? "_blank" : undefined}>
<NavLabel hover>{label}</NavLabel>
<Link
className="flex md:block uppercase"
key={index}
href={href}
target={external ? "_blank" : undefined}
>
<NavLabel className="mx-auto" hover>
{label}
</NavLabel>
</Link>
);
})}
</div>
<div className="flex flex-col gap-6">
{NAVIGATION.map(({ label, href, external }, index) => {
if (!external) return null;
return (
<Link
className="flex md:block uppercase group"
key={index}
href={href}
target={external ? "_blank" : undefined}
>
<NavLabel className="mx-auto" hover>
{label}
</NavLabel>
</Link>
);
})}
@@ -36,8 +61,13 @@ export const AppFooter = () => {
<div className="flex flex-col gap-6">
{SOCIALS_FOOTER.map(({ label, href, external, icon }, index) => {
return (
<Link className="uppercase" key={index} href={href} target={external ? "_blank" : undefined}>
<NavLabel hover>
<Link
className="flex md:block uppercase"
key={index}
href={href}
target={external ? "_blank" : undefined}
>
<NavLabel className="mx-auto" hover>
{icon}
{label}
</NavLabel>

33
components/AppHeader.tsx
View File

@@ -10,14 +10,17 @@ import { useState } from "react";
import { cn } from "../shared/utils";
import { LABELS } from "../content";
const NavLabel = classed.span("text-lg font-semibold hover:text-gold duration-300", {
variants: {
active: {
false: "text-primary",
true: "text-gold",
const NavLabel = classed.span(
"relative overflow-hidden text-lg text-primary font-semibold group-hover:text-brown-50 hover:text-gold duration-300 after:content-[''] after:h-1 after:w-full after:bottom-0 after:left-0 after:absolute p-2 duration-200",
{
variants: {
active: {
false: "after:bg-transparent",
true: "after:bg-brown-50",
},
},
},
});
}
);
const AppMobileNav = () => {
const [isOpen, setIsOpen] = useState(false);
@@ -59,9 +62,12 @@ const AppMobileNav = () => {
key={index}
href={`${item.href}`}
onClick={() => setIsOpen(false)}
className="py-3 capitalize text-primary text-lg dark:text-white duration-200 font-semibold hover:text-gray-900"
className="flex items-center py-3 gap-3"
>
{item.label}
<span className="capitalize text-primary text-lg dark:text-white duration-200 font-semibold hover:text-gray-900">
{item.label}
</span>
{item.external && <Icons.ExternalLink className="text-primary" />}
</Link>
);
})}
@@ -81,7 +87,7 @@ const AppMobileNav = () => {
);
})}
</div>
<span className="text-center font-sans text-primary text-sm">{LABELS.COMMON.FOOTER.TITLE}</span>
<span className="text-center font-sans text-primary text-sm px-8">{LABELS.COMMON.FOOTER.TITLE}</span>
</div>
</div>
</div>
@@ -92,7 +98,7 @@ const AppDesktopNav = () => {
const pathname = usePathname();
return (
<AppContainer className="hidden md:py-[26px] md:grid items-center grid-cols-[200px_1fr_200px]">
<AppContainer className="hidden md:py-[25px] md:grid items-center grid-cols-[200px_1fr_200px]">
<Link href="/">
<Icons.Logo className="text-primary" />
</Link>
@@ -105,8 +111,9 @@ const AppDesktopNav = () => {
const isActive = isHome || (pathname !== null && pathParts[0] === pathname.split("/")[1]);
return (
<Link key={index} href={href} target={external ? "_blank" : undefined}>
<Link className="flex items-center group" key={index} href={href} target={external ? "_blank" : undefined}>
<NavLabel active={isActive}>{label}</NavLabel>
{external && <Icons.ExternalLink className="text-primary group-hover:text-brown-50 duration-200" />}
</Link>
);
})}
@@ -133,7 +140,7 @@ const AppDesktopNav = () => {
export const AppHeader = () => {
return (
<header className="sticky right-0 left-0 top-0 bg-white backdrop-blur-xl z-10">
<header className="sticky right-0 left-0 top-0 bg-gray backdrop-blur-xl z-10">
<AppDesktopNav />
<AppMobileNav />
</header>

35
components/AppLink.tsx Normal file
View File

@@ -0,0 +1,35 @@
import Link from "next/link";
import React from "react";
import { Icons } from "./Icons";
import { cn } from "@/shared/utils";
interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
children: React.ReactNode;
href: string;
external?: boolean;
showExternalIcon?: boolean;
}
/**
* This component easily manages internal and external links and adds the necessary attributes.
*
* @param {string} href - The URL of the link.
* @param {React.ReactNode} children - The content of the link.
* @param {boolean} external - If the link is external, in this case it will open in a new tab and also add rel="noreferrer noopener nofollow".
*/
export const AppLink = ({ href, children, external, className, showExternalIcon = false, ...props }: LinkProps) => {
return (
<Link
href={href}
target={external ? "_blank" : undefined}
rel={external ? "noreferrer noopener nofollow" : undefined}
className={cn(className, "flex items-center group")}
{...props}
>
{children}
{showExternalIcon && external && (
<Icons.ExternalLink className="text-brown-50 group-hover:text-brown-70 duration-300" />
)}
</Link>
);
};

9
components/AppMarkdown.tsx
View File

@@ -4,7 +4,7 @@ import rehypeRaw from "rehype-raw";
import { Label } from "./ui/Label";
import { createElement } from "react";
const createMarkdownElement = (tag: keyof JSX.IntrinsicElements, props: any) =>
export const createMarkdownElement = (tag: keyof JSX.IntrinsicElements, props: any) =>
createElement(tag, {
...props,
});
@@ -34,7 +34,12 @@ const REACT_MARKDOWN_CONFIG: Components = {
}),
strong: ({ node, ...props }) =>
createMarkdownElement("span", {
className: "font-bold",
className: "underline",
...props,
}),
b: ({ node, ...props }) =>
createMarkdownElement("b", {
className: "text-bold",
...props,
}),
span: ({ ...props }: any) => <Label.Paragraph {...props} />,

211
components/Icons.tsx
View File

@@ -3,6 +3,23 @@ interface IconProps extends React.SVGProps<SVGSVGElement> {
}
export const Icons: Record<string, any> = {
ExternalLink: (props: IconProps) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={props?.size || 20}
height={props?.size || 21}
viewBox="0 0 20 21"
fill="none"
{...props}
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M3.06704 17.2267C3.25735 17.4169 3.53223 17.5331 3.81769 17.5331L3.80606 17.5204C4.08094 17.5204 4.35583 17.4042 4.5567 17.214L4.55776 17.2151L13.3348 8.44422V15.4201C13.3348 16.0011 13.7999 16.4766 14.392 16.4766C14.9735 16.4766 15.4492 16.0011 15.4492 15.4201V5.9115C15.4492 5.66553 15.367 5.44146 15.2291 5.26361C15.1993 5.22394 15.1664 5.18588 15.1302 5.14977C14.8641 4.88451 14.5017 4.78617 14.1669 4.855H4.87679C4.28473 4.855 3.81954 5.31986 3.81954 5.9115C3.81954 6.49258 4.28473 6.96801 4.87679 6.96801H11.8105L3.05647 15.7159V15.7265C2.64414 16.1385 2.64414 16.8147 3.06704 17.2267Z"
fill="currentColor"
/>
</svg>
),
Logo: (props: IconProps) => (
<svg
xmlns="http://www.w3.org/2000/svg"
@@ -16,14 +33,8 @@ export const Icons: Record<string, any> = {
d="M25.5484 1.20899C25.5484 0.67436 26.1196 0.332624 26.5923 0.58442L33.6891 4.36446C33.9202 4.48756 34.0645 4.72766 34.0645 4.98902V9.94049H37.6129C38.0048 9.94049 38.3226 10.2575 38.3226 10.6485V21.9766L36.1936 20.5606V12.0645H34.0645V81.4919C34.0645 81.6134 34.0332 81.7328 33.9735 81.8388L30.4251 88.1388C30.1539 88.6204 29.459 88.6204 29.1878 88.1388L25.6394 81.8388C25.5797 81.7328 25.5484 81.6134 25.5484 81.4919V1.20899Z"
fill="currentColor"
/>
<path
d="M21.2903 26.2246V77.2012H12.7742V34.7207H0V26.2246H21.2903Z"
fill="currentColor"
/>
<path
d="M63.871 77.2012H72.3871V34.7207H76.6452V77.2012H85.1613V26.2246H63.871V77.2012Z"
fill="currentColor"
/>
<path d="M21.2903 26.2246V77.2012H12.7742V34.7207H0V26.2246H21.2903Z" fill="currentColor" />
<path d="M63.871 77.2012H72.3871V34.7207H76.6452V77.2012H85.1613V26.2246H63.871V77.2012Z" fill="currentColor" />
<path
d="M38.3226 26.2246H59.6129V34.7207H46.8387V47.4649H59.6129V77.2012H38.3226V68.7051H51.0968V55.9609H38.3226V26.2246Z"
fill="currentColor"
@@ -31,14 +42,7 @@ export const Icons: Record<string, any> = {
</svg>
),
Close: (props: IconProps) => (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
<path
id="Vector"
d="M12.0007 10.586L16.9507 5.63599L18.3647 7.04999L13.4147 12L18.3647 16.95L16.9507 18.364L12.0007 13.414L7.05072 18.364L5.63672 16.95L10.5867 12L5.63672 7.04999L7.05072 5.63599L12.0007 10.586Z"
@@ -47,19 +51,8 @@ export const Icons: Record<string, any> = {
</svg>
),
Burgher: (props: IconProps) => (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
id="Vector"
d="M18 18V20H6V18H18ZM21 11V13H3V11H21ZM18 4V6H6V4H18Z"
fill="currentColor"
/>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
<path id="Vector" d="M18 18V20H6V18H18ZM21 11V13H3V11H21ZM18 4V6H6V4H18Z" fill="currentColor" />
</svg>
),
Discord: (props: IconProps) => (
@@ -108,14 +101,7 @@ export const Icons: Record<string, any> = {
</svg>
),
DiscordCircle: (props: IconProps) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
viewBox="0 0 32 32"
fill="none"
{...props}
>
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none" {...props}>
<path
fillRule="evenodd"
clipRule="evenodd"
@@ -130,15 +116,18 @@ export const Icons: Record<string, any> = {
/>
</svg>
),
TwitterCircle: (props: IconProps) => (
<svg xmlns="http://www.w3.org/2000/svg" width="33" height="33" viewBox="0 0 33 33" fill="none" {...props}>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M0.532715 16.834C0.532715 8.00056 7.69367 0.8396 16.5272 0.8396C25.3606 0.8396 32.5216 8.00056 32.5216 16.834C32.5216 25.6675 25.3606 32.8285 16.5272 32.8285C7.69367 32.8285 0.532715 25.6675 0.532715 16.834ZM22.625 12.3356C23.3248 12.2356 23.9246 12.1357 24.5244 11.8358C24.1245 12.5355 23.5247 13.1353 22.825 13.5352C23.0249 18.2336 19.6261 23.3318 13.5282 23.3318C11.7288 23.3318 10.0294 22.732 8.52994 21.8323C10.2293 22.0322 12.0287 21.5324 13.2283 20.6327C11.7288 20.6327 10.5292 19.6331 10.1294 18.3335C10.6292 18.4335 11.129 18.3335 11.6289 18.2336C10.1294 17.8337 9.02976 16.4342 9.02976 14.9347C9.52959 15.1346 10.0294 15.3346 10.5292 15.3346C9.12973 14.3349 8.6299 12.4356 9.52959 10.9361C11.229 12.9354 13.6282 14.2349 16.3272 14.3349C15.8274 12.3356 17.4268 10.3363 19.5261 10.3363C20.4258 10.3363 21.3255 10.7362 21.9253 11.336C22.725 11.136 23.4248 10.9361 24.0246 10.5362C23.8246 11.336 23.3248 11.9357 22.625 12.3356Z"
fill="currentColor"
/>
</svg>
),
ArrowUp: (props: IconProps) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
{...props}
>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}>
<path
d="M12 10.828L7.04999 15.778L5.63599 14.364L12 8L18.364 14.364L16.95 15.778L12 10.828Z"
fill="currentColor"
@@ -146,14 +135,7 @@ export const Icons: Record<string, any> = {
</svg>
),
GithubCircle: (props: IconProps) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
viewBox="0 0 32 32"
fill="none"
{...props}
>
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none" {...props}>
<path
fillRule="evenodd"
clipRule="evenodd"
@@ -162,128 +144,27 @@ export const Icons: Record<string, any> = {
/>
</svg>
),
GeometricPattern1: (props: IconProps) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="121"
height="121"
viewBox="0 0 121 121"
fill="none"
{...props}
>
DividerHomepage: (props: IconProps) => (
<svg xmlns="http://www.w3.org/2000/svg" width="766" height="112" viewBox="0 0 766 112" fill="none" {...props}>
<path
d="M120.9 60.5L60.8999 0.5L0.899903 60.5L60.8999 120.5L120.9 60.5Z"
d="M7.08083 111.735C2.43838 111.735 -0.529098 106.775 1.65739 102.67L34.4815 41.045C35.5504 39.0382 37.6354 37.7849 39.9049 37.7849H82.9012V6.97233C82.9012 3.56887 85.6537 0.809822 89.0492 0.809822H187.417L175.121 19.2973H101.345V37.7849H704.221C705.276 37.7849 706.313 38.057 707.233 38.5749L761.94 69.3875C766.121 71.7428 766.121 77.7771 761.94 80.1324L707.233 110.945C706.313 111.463 705.276 111.735 704.221 111.735H7.08083Z"
fill="#243F5F"
/>
<path d="M60.8999 0.5L120.9 60.5H0.899902L60.8999 0.5Z" fill="#A27F3C" />
</svg>
),
GeometricPattern2: (props: IconProps) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="121"
height="121"
viewBox="0 0 121 121"
fill="none"
{...props}
>
Check: (props: IconProps) => (
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25" fill="none" {...props}>
<path
d="M60.7002 120.5C60.7002 87.363 87.5632 60.5 120.7 60.5V120.5H60.7002Z"
fill="#264770"
/>
<path
d="M60.7002 60.5C60.7002 27.363 87.5632 0.5 120.7 0.5V60.5H60.7002Z"
fill="#264770"
/>
<path
d="M60.7 120.5C60.7 87.363 33.837 60.5 0.699951 60.5V120.5H60.7Z"
fill="#B59963"
/>
<path
d="M60.7 60.5C60.7 27.363 33.837 0.5 0.699951 0.5V60.5H60.7Z"
fill="#B59963"
d="M17.3445 8.03185C17.5557 7.83075 17.8368 7.71957 18.1284 7.72178C18.4201 7.72399 18.6994 7.8394 18.9076 8.04367C19.1158 8.24794 19.2364 8.52509 19.2441 8.81663C19.2518 9.10818 19.146 9.39131 18.9489 9.6063L12.966 17.0887C12.8631 17.1995 12.739 17.2884 12.6009 17.3502C12.4629 17.4119 12.3138 17.4451 12.1627 17.4479C12.0115 17.4507 11.8613 17.423 11.7211 17.3665C11.5808 17.3099 11.4535 17.2256 11.3466 17.1187L7.37893 13.1511C7.26844 13.0481 7.17982 12.924 7.11835 12.786C7.05689 12.6481 7.02384 12.4991 7.02117 12.3481C7.01851 12.1971 7.04628 12.0471 7.10285 11.9071C7.15941 11.7671 7.2436 11.6399 7.35039 11.5331C7.45718 11.4263 7.58438 11.3421 7.72442 11.2855C7.86445 11.229 8.01444 11.2012 8.16545 11.2039C8.31645 11.2065 8.46537 11.2396 8.60332 11.301C8.74127 11.3625 8.86542 11.4511 8.96838 11.5616L12.1083 14.7L17.316 8.06483C17.3254 8.05329 17.3354 8.04228 17.346 8.03185H17.3445Z"
fill="#12E700"
/>
</svg>
),
GeometricPattern3: (props: IconProps) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="121"
height="121"
viewBox="0 0 121 121"
fill="none"
{...props}
>
X: (props: IconProps) => (
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25" fill="none" {...props}>
<path
d="M120.5 60.5C120.5 27.3629 93.6371 0.5 60.5 0.5C27.3629 0.5 0.5 27.3629 0.5 60.5C0.5 93.6371 27.3629 120.5 60.5 120.5C93.6371 120.5 120.5 93.6371 120.5 60.5Z"
fill="#243F5F"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M60.5 0.5V60.5H0.5C0.5 93.637 27.363 120.5 60.5 120.5V60.5H120.5C120.5 27.363 93.637 0.5 60.5 0.5Z"
fill="#B59963"
/>
</svg>
),
GeometricPattern4: (props: IconProps) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="121"
height="121"
viewBox="0 0 121 121"
fill="none"
{...props}
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M0.299805 60.5C0.299805 27.363 27.1628 0.5 60.2998 0.5C93.4368 0.5 120.3 27.363 120.3 60.5H90.2998C90.2998 43.9315 76.8683 30.5 60.2998 30.5C43.7313 30.5 30.2998 43.9315 30.2998 60.5H0.299805Z"
fill="#B59963"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M0.299805 120.5C0.299805 87.363 27.1628 60.5 60.2998 60.5C93.4368 60.5 120.3 87.363 120.3 120.5H90.2998C90.2998 103.931 76.8683 90.5 60.2998 90.5C43.7313 90.5 30.2998 103.931 30.2998 120.5H0.299805Z"
fill="#B59963"
/>
</svg>
),
GeometricPattern5: (props: IconProps) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="121"
height="121"
viewBox="0 0 121 121"
fill="none"
{...props}
>
<path d="M0.0999756 0.5H60.1V60.5L0.0999756 0.5Z" fill="#243F5F" />
<path d="M0.0999756 60.5H60.1V120.5L0.0999756 60.5Z" fill="#243F5F" />
<path d="M60.1 0.5H120.1V60.5L60.1 0.5Z" fill="#243F5F" />
<path d="M60.1 60.5H120.1V120.5L60.1 60.5Z" fill="#243F5F" />
</svg>
),
GeometricPattern6: (props: IconProps) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="121"
height="120"
viewBox="0 0 121 120"
fill="none"
{...props}
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M0.25 60C0.25 26.863 27.113 0 60.25 0C93.387 0 120.25 26.863 120.25 60H90.25C90.25 43.4315 76.8185 30 60.25 30C43.6815 30 30.25 43.4315 30.25 60H0.25Z"
fill="#B59963"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M0.25 120C0.25 86.863 27.113 60 60.25 60C93.387 60 120.25 86.863 120.25 120H90.25C90.25 103.431 76.8185 90 60.25 90C43.6815 90 30.25 103.431 30.25 120H0.25Z"
fill="#243F5F"
d="M7.86138 7.48757C7.93102 7.41775 8.01376 7.36236 8.10484 7.32456C8.19593 7.28677 8.29358 7.26731 8.39219 7.26731C8.49081 7.26731 8.58846 7.28677 8.67954 7.32456C8.77063 7.36236 8.85336 7.41775 8.92301 7.48757L12.8906 11.4567L16.8583 7.48757C16.928 7.41787 17.0107 7.36257 17.1018 7.32485C17.1929 7.28712 17.2905 7.2677 17.3891 7.2677C17.4876 7.2677 17.5853 7.28712 17.6763 7.32485C17.7674 7.36257 17.8502 7.41787 17.9199 7.48757C17.9896 7.55728 18.0449 7.64004 18.0826 7.73111C18.1203 7.82219 18.1398 7.91981 18.1398 8.01839C18.1398 8.11697 18.1203 8.21459 18.0826 8.30567C18.0449 8.39674 17.9896 8.4795 17.9199 8.54921L13.9508 12.5168L17.9199 16.4844C17.9896 16.5542 18.0449 16.6369 18.0826 16.728C18.1203 16.8191 18.1398 16.9167 18.1398 17.0153C18.1398 17.1138 18.1203 17.2115 18.0826 17.3025C18.0449 17.3936 17.9896 17.4764 17.9199 17.5461C17.8502 17.6158 17.7674 17.6711 17.6763 17.7088C17.5853 17.7465 17.4876 17.766 17.3891 17.766C17.2905 17.766 17.1929 17.7465 17.1018 17.7088C17.0107 17.6711 16.928 17.6158 16.8583 17.5461L12.8906 13.577L8.92301 17.5461C8.8533 17.6158 8.77055 17.6711 8.67947 17.7088C8.58839 17.7465 8.49077 17.766 8.39219 17.766C8.29361 17.766 8.19599 17.7465 8.10492 17.7088C8.01384 17.6711 7.93108 17.6158 7.86138 17.5461C7.79167 17.4764 7.73637 17.3936 7.69865 17.3025C7.66092 17.2115 7.64151 17.1138 7.64151 17.0153C7.64151 16.9167 7.66092 16.8191 7.69865 16.728C7.73637 16.6369 7.79167 16.5542 7.86138 16.4844L11.8305 12.5168L7.86138 8.54921C7.79156 8.47956 7.73616 8.39683 7.69836 8.30574C7.66057 8.21466 7.64111 8.11701 7.64111 8.01839C7.64111 7.91977 7.66057 7.82213 7.69836 7.73104C7.73616 7.63995 7.79156 7.55722 7.86138 7.48757Z"
fill="#FF0000"
/>
</svg>
),

10
components/Section.tsx
View File

@@ -1,9 +1,9 @@
import { HTMLAttributes } from "react";
import { HTMLAttributes, ReactNode } from "react";
import { Label } from "./ui/Label";
import { AppMarkdown } from "./AppMarkdown";
interface SectionProps extends HTMLAttributes<HTMLDivElement> {
title: string;
interface SectionProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
title: ReactNode;
description?: string;
}
@@ -11,10 +11,10 @@ export const Section = ({ title, description, children }: SectionProps) => {
return (
<div className="flex flex-col gap-6 md:gap-16">
<div className="flex flex-col gap-4 md:gap-8">
<Label.SectionTitle className="text-center">{title}</Label.SectionTitle>
{typeof title === "string" ? <Label.SectionTitle className="text-center">{title}</Label.SectionTitle> : title}
{description && <AppMarkdown>{description}</AppMarkdown>}
{children && <div className="flex">{children}</div>}
</div>
{children && <div>{children}</div>}
</div>
);
};

7
components/ui/Accordion.tsx
View File

@@ -12,14 +12,17 @@ const Accordion = ({ label, children }: AccordionProps) => {
const [isOpen, setIsOpen] = useState(false);
return (
<div className="flex flex-col py-3 px-6 rounded-lg bg-gray border border-gray-100" aria-expanded={isOpen}>
<div
className="flex flex-col py-3 px-6 rounded-lg bg-gray border border-gray-100 hover:bg-gray-100 duration-200"
aria-expanded={isOpen}
>
<div
className="grid grid-cols-[1fr_20px] gap-1 justify-between items-center cursor-pointer"
onClick={() => {
setIsOpen(!isOpen);
}}
>
<span className="font-sans text-base leading-6 text-primary font-medium">{label}</span>
<span className="font-inter leading-5 text-base text-primary font-bold">{label}</span>
<Icons.ArrowUp
className={cn("duration-200", {
"transform rotate-180": !isOpen,

132
components/ui/Banner.tsx
View File

@@ -1,86 +1,92 @@
import Image from "next/image";
import { ReactNode } from "react";
import { AppContainer } from "../AppContainer";
import remarkGfm from "remark-gfm";
import rehypeRaw from "rehype-raw";
import type * as Classed from "@tw-classed/react";
import { classed } from "@tw-classed/react";
import { cn } from "../../shared/utils";
import ReactMarkdown from "react-markdown";
import { createMarkdownElement } from "../AppMarkdown";
import { AppContainer } from "../AppContainer";
const BannerTitle = classed.h4("text-gold", {
export const BannerWrapper = classed.div("py-[120px] relative", {
variants: {
color: {
brown: "bg-brown-50",
gray: "bg-gray",
},
},
defaultVariants: {
color: "brown",
},
});
export const BannerTitle = classed.h4("text-gold", {
variants: {
titleSize: {
small: "text-[32px] font-semibold",
medium: "text-3xl md:text-4xl lg:text-5xl md:leading-[49px] font-bold",
},
variant: {
brown: "text-gold",
primary: "text-primary",
},
},
defaultVariants: {
titleSize: "medium",
},
});
type BannerProps = Classed.VariantProps<typeof BannerTitle> & {
title: string;
description?: ReactNode;
actions?: ReactNode;
children?: ReactNode;
inverse?: boolean; // used to determine the banner image and content
};
const BannerImage = ({ inverse }: Pick<BannerProps, "inverse">) => {
if (inverse) {
return (
<Image
src="/images/banner-inverse.svg"
layout="fill"
objectFit="cover"
objectPosition="top"
alt="banner inverse"
/>
);
}
type BannerProps = Classed.VariantProps<typeof BannerTitle> &
Classed.VariantProps<typeof BannerWrapper> & {
title: string;
description?: string;
actions?: ReactNode;
children?: ReactNode;
descriptionClass?: string;
};
export const Banner = ({ title, description, actions, descriptionClass, color }: BannerProps) => {
return (
<>
<Image
src="/images/banner.svg"
layout="fill"
objectFit="cover"
objectPosition="top"
alt="banner desktop"
className="hidden md:block"
/>
</>
);
};
export const Banner = ({ title, description, inverse = false, children, actions, titleSize }: BannerProps) => {
return (
<div className="bg-primary py-10 md:py-0 md:bg-transparent relative md:h-[600px]">
<BannerImage inverse={inverse} />
<AppContainer className="relative gap-8 md:gap-0 grid md:grid-cols-2 h-full items-center">
<div
className={cn("flex flex-col gap-8", {
"md:col-start-2": !inverse,
})}
>
<div className="flex flex-col gap-6">
<BannerTitle titleSize={titleSize}>{title}</BannerTitle>
{description && (
<span className="text-white font-medium text-lg md:text-xl md:leading-6">{description}</span>
)}
<BannerWrapper color={color}>
<AppContainer>
<div className="mx-auto py-10 md:py-16 px-8 md:px-[120px] bg-white rounded-3xl w-full md:max-w-[900px]">
<div className={cn("flex flex-col gap-8")}>
<div className="flex flex-col gap-6">
<span className=" text-primary font-sans font-bold text-2xl text-center md:text-5xl">{title}</span>
{description && (
<ReactMarkdown
remarkPlugins={[remarkGfm]}
rehypePlugins={[rehypeRaw]}
skipHtml={false}
components={{
strong: ({ node, ...props }) =>
createMarkdownElement("span", {
className: "font-medium",
...props,
}),
a: ({ node, ...props }) =>
createMarkdownElement("a", {
className: "text-primary font-medium text-lg md:text-xl md:leading-6",
target: "_blank",
...props,
}),
span: ({ ...props }: any) => (
<span className="text-primary font-normal text-lg md:text-xl md:leading-6" {...props} />
),
p: ({ ...props }: any) => (
<span className="text-primary font-normal text-lg md:text-xl md:leading-6" {...props} />
),
}}
className={cn(descriptionClass, "text-primary font-normal text-lg md:text-xl md:leading-6")}
>
{description}
</ReactMarkdown>
)}
</div>
<div className="mx-auto">{actions}</div>
</div>
{actions}
</div>
{children && (
<div
className={cn({
"md:col-start-2": inverse,
})}
>
{children}
</div>
)}
</AppContainer>
</div>
</BannerWrapper>
);
};

15
components/ui/Button.tsx
View File

@@ -3,18 +3,15 @@ import type * as Classed from "@tw-classed/react";
import React, { forwardRef, HTMLAttributes } from "react";
const ButtonComponent = classed.button(
"relative overflow-hidden font-semibold cursor-pointer justify-center flex items-center gap-2 border rounded-[32px] inline-block disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-300 ease-in-out",
"relative overflow-hidden font-medium cursor-pointer justify-center flex items-center gap-2 border rounded-[32px] inline-block disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-300 ease-in-out",
{
variants: {
variant: {
transparent:
"border-transparent bg-transparent text-primary hover:opacity-60",
primary:
"bg-white border-primary text-primary hover:bg-primary hover:text-white",
transparent: "border-transparent bg-transparent text-brown-50 hover:text-brown-70 !p-2",
primary: "bg-primary border-primary text-white hover:bg-brown-70 hover:border-brown-70 hover:text-white",
},
size: {
medium:
"text-sm md:text-base lg:text-xl md:leading-6 py-2 md:py-3 lg:py-[18px] px-6",
medium: "text-sm md:text-base lg:text-xl md:leading-6 py-2 md:py-[14px] px-8",
},
},
defaultVariants: {
@@ -26,9 +23,7 @@ const ButtonComponent = classed.button(
type ButtonVariants = Classed.VariantProps<typeof ButtonComponent>;
interface ButtonProps
extends ButtonVariants,
HTMLAttributes<HTMLButtonElement> {
interface ButtonProps extends ButtonVariants, HTMLAttributes<HTMLButtonElement> {
children?: React.ReactNode;
icon?: React.ReactNode;
disabled?: boolean;

29
components/ui/Card.tsx
View File

@@ -1,23 +1,20 @@
import { classed } from "@tw-classed/react";
const CardBase = classed.div(
"bg-gray border border-gray-100 rounded-[16px] overflow-hidden",
{
variants: {
spacing: {
small: "py-8 px-6",
medium: "py-8 px-10 md:px-16",
},
shadow: {
true: "shadow-card",
},
const CardBase = classed.div("bg-primary border border-gray-100 rounded-[16px] overflow-hidden", {
variants: {
spacing: {
small: "p-8",
medium: "py-8 px-10 md:px-16",
},
defaultVariants: {
shadow: true,
spacing: "small",
shadow: {
true: "shadow-card",
},
}
);
},
defaultVariants: {
shadow: true,
spacing: "small",
},
});
const CardImage = classed.div("min-h-[155px] bg-gray-300 bg-cover bg-center");
const CardContent = classed.div("p-4");

8
components/ui/Label.tsx
View File

@@ -1,10 +1,12 @@
import { classed } from "@tw-classed/react";
const Title = classed.h1("text-5xl font-black leading-1 text-primary md:text-6xl lg:text-8xl lg:leading-[108px]");
const Title = classed.h1("text-5xl font-black leading-1 text-primary md:text-6xl lg:text-[96px] lg:leading-[101px]");
const Subtitle = classed.h6("text-brown-50 font-bold text-lg leading-none md:text-2xl md:leading-6");
const Subtitle = classed.h6("text-brown-50 font-black text-lg leading-none md:text-2xl lg:text-7xl md:leading-6");
const SectionTitle = classed.h6("font-semibold text-primary text-2xl leading-[24px] md:text-[32px] leading-[32px]");
const SectionTitle = classed.h6(
"font-semibold font-inter text-primary text-2xl leading-[24px] md:text-[56px] md:leading-[56px]"
);
const Paragraph = classed.span("text-primary text-sm md:text-xl leading-6");

4
content/about.tsx
View File

@@ -26,12 +26,12 @@ export const ABOUT_CONTENT = {
{
TITLE: "Step 2: Selective Disclosure",
DESCRIPTION:
"The Prover selectively discloses the data to the Verifier by redacting sensitive information prior to sharing it. Selective disclosure may involve simple redactions, or more advanced techniques such as a zero-knowledge proofs that can prove properties of redacted data without revealing the data itself."
"The Prover selectively discloses the data to the Verifier by redacting sensitive information prior to sharing it. Selective disclosure may involve simple redactions, or more advanced techniques such as a zero-knowledge proofs that can prove properties of redacted data without revealing the data itself.",
},
{
TITLE: "Step 3: Data Verification",
DESCRIPTION:
"The Verifier verifies that the prover did not tamper with the data and also verifiers the data origin, by inspecting the Server certificate through trusted certificate authorities (CAs). The Verifier can now make assertions about the non-redacted content of the transcript."
"The Verifier verifies that the prover did not tamper with the data and also verifiers the data origin, by inspecting the Server certificate through trusted certificate authorities (CAs). The Verifier can now make assertions about the non-redacted content of the transcript.",
},
],
},

7
content/common.tsx
View File

@@ -2,6 +2,11 @@ export const COMMON_CONTENT = {
VIEW_DOCUMENTATION: "View Documentation",
FORK_REPO: "Fork github repo",
AND_MORE: "... and more!",
CHECKOUT_GITHUB: "Checkout our Github",
CHECKOUT_DOCS: "Checkout our documentation",
LEARN_THE_BASICS: "Learn the basics",
SERVER_AUTHENTICATION: "Server Authentication",
DATA_PORTABILITY: "Data Portability",
FAQ: "FAQ",
JOIN_DISCORD: "Join Our Discord",
CONNECT_WITH_US: {
@@ -10,6 +15,6 @@ export const COMMON_CONTENT = {
"Our team believes in open-source development with a strong emphasis on trustlessness. We are committed to transparency and community-driven improvements. Come find us in our public Discord to learn more and collaborate!",
},
FOOTER: {
TITLE: "TLSNotary is a public good & open source project supported by the Ethereum Foundation under the Privacy and Scaling Exploration Team.",
TITLE: "TLSNotary is project of Privacy and Scaling Explorations, an Ethereum Foundation supported team.",
},
};

17
content/homepage.tsx
View File

@@ -1,14 +1,17 @@
export const HOMEPAGE_CONTENT = {
TITLE: "Privacy-preserving data portability for any data on the web",
SUBTITLE: "TLSNotary",
INTRO: {
TITLE:
"An open-source protocol for private and verifiable data disclosure.",
DESCRIPTION:
" TLSNotary is an open-source protocol that can verify the authenticity of data while protecting privacy. If you're looking for a way to make data portable without compromising on security, check out the protocol and integrate it into your applications!",
BUILD_WITH_US: {
TITLE: "Build with us",
DESCRIPTION:
"TLSNotary can be used to verify the origin of any piece of data, ensuring it hasn't been fabricated or tampered with, while allowing users to redact sensitive information. As a result, the data becomes portable, reusable, and endlessly composable!",
"Interested in using TLSNotary, contributing, or just learning more about how it works? Join the conversation on our [Discord server](https://discord.gg/9XwESXtcN7), check out our [Github](https://github.com/tlsnotary/tlsn), or use our Quick Start guide to try it out!",
},
DOWNLOAD: {
TITLE: "Data portability with endless possibilities",
DESCRIPTION: "Watch the TLSNotary presentation at ETHDam 2024",
WHY_USE_TLSNOTARY: {
TITLE: "Why use TLSNotary?",
DESCRIPTION: `TLS (Transport Layer Security), also known as the "s" in "https" 🔐, can secure communication between a server and a user. But what if you want to credibly share data with others without compromising security, privacy, or control? </br> </br>TLSNotary solves this by adding a Verifier to the TLS connection using secure Multi-Party Computation (MPC). MPC provides cryptographic guarantees, allowing the Verifier to authenticate the TLS transcript without requiring external trust or revealing the complete data to anyone. TLSNotary can sign (aka notarize) data and make it portable in a privacy preserving way.
</br></br> With TLSNotary, users are in full control over the data they choose to share.
`,
},
};

4
content/index.ts
View File

@@ -1,11 +1,11 @@
import { ABOUT_CONTENT } from "./about";
import { COMMON_CONTENT } from "./common";
import { HOMEPAGE_CONTENT } from "./homepage";
import { WHAT_WE_DO } from "./whatWeDo";
import { USE_CASES_CONTENT } from "./useCases";
export const LABELS = {
ABOUT: ABOUT_CONTENT,
HOMEPAGE: HOMEPAGE_CONTENT,
COMMON: COMMON_CONTENT,
WHAT_WE_DO: WHAT_WE_DO,
USE_CASES: USE_CASES_CONTENT,
};

48
content/projects.tsx Normal file
View File

@@ -0,0 +1,48 @@
export type WebsiteType = "website" | "twitter" | "github";
type Project = {
title: string;
tldr: string;
links?: Partial<Record<WebsiteType, string>>;
};
export const ProjectList: Project[] = [
{
title: "ZeroTrustBounty",
tldr: "A trustless bug bounty platform with redacted bug reports & guaranteed payments to whitehats.",
links: {
github: "https://github.com/antojoseph/ZeroTrustBounty",
},
},
{
title: "RealReturn",
tldr: "An open leaderboard of verified real investment returns, enabled by TLSNotary and Jomo.",
links: {
github: "https://github.com/chcharcharlie/realreturn",
},
},
{
title: "zkP2M",
tldr: "Trustless and instant INR to USD on-ramp powered by ZK",
links: {
github: "https://github.com/zkP2M",
},
},
{
title: "ComplianceNoted",
tldr: "Compliance for on-chain private equity: manage a portfolio or a fund with an array of accounts and breathe through client reporting and compliance requirements! Privacy, efficiency and portability all in place.",
links: {},
},
{
title: "Zero Guard",
tldr: "A decentralized zero knowledge powered AI Red Team Network that improves diversity, safety to AI through community",
links: {
github: "https://github.com/dingchaoz/ZEROGUARD",
},
},
{
title: "Zkyc",
tldr: "Trustless and instant INR to USD on-ramp powered by ZK",
links: {},
},
];

19
content/useCases.tsx Normal file
View File

@@ -0,0 +1,19 @@
export const USE_CASES_CONTENT = {
USE_CASES: {
TITLE: "Use Cases",
DESCRIPTION: `You can use TLSNotary for: </br></br>- <b>Identity Verification</b>: verify your name, age, or citizenship from online government services
</br></br>- <b>Reputation Verification</b>: verify user experience or trustworthiness on platforms like AirBnb, Uber, Strava
</br></br>- <b>Real World Asset Ownership Verification</b>: confirm ownership of tangible assets (e.g. vehicles, real estate)
</br></br>- <b>Health Information Verification</b>: verify personal health records from platforms like MyHealth, HealthVault etc
</br></br>- <b>Account Ownership Verification</b>: confirm control over online accounts (e.g. Google, Microsoft, Apple, Twitter)
</br></br>- <b>Financial Verification</b>: verify your financial standing or prove financial dealings from your bank or other service
</br></br>- <b>User Restriction Verification</b>: confirm if a user is barred from accessing specific applications or services
</br></br> <span class="text-center">...and more!</span>
`,
},
BUILD_WITH_TLSNOTARY: "Projects using TLSNotary",
BANNER: {
TITLE: "Share what you're building with TLSNotary.",
DESCRIPTION: "Are you using TLSNotary in your project? Reach out on Discord and tell us about your work!",
},
};

30
content/whatWeDo.tsx
View File

@@ -1,30 +0,0 @@
import { Icons } from "../components/Icons";
import { ReactNode } from "react";
type WhatWeDo = {
title: string;
icon?: ReactNode;
};
export const WHAT_WE_DO: WhatWeDo[] = [
{
title: "Prove that you received a private message",
icon: <Icons.GeometricPattern1 />,
},
{
title: "Prove the contents of a website from a moment in time",
icon: <Icons.GeometricPattern2 />,
},
{
title: "Prove personal information (e.g. address, birth date, health data)",
icon: <Icons.GeometricPattern3 />,
},
{
title: "Prove you have a professional certification",
icon: <Icons.GeometricPattern4 />,
},
{
title: "Prove a financial transaction without revealing credentials",
icon: <Icons.GeometricPattern5 />,
},
];

15
public/images/infographic.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

8
tailwind.config.ts
View File

@@ -10,15 +10,16 @@ const config: Config = {
extend: {
backgroundImage: {
"gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
"gradient-conic":
"conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
"gradient-conic": "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
},
fontFamily: {
sans: ["DM Sans", "sans-serif"],
sans: ["var(--font-sans)"],
inter: ["var(--font-inter)"],
},
colors: {
primary: "#243F5F", // nano-blue
gold: "#E8C075", // nano-yellow
// brown: "#A27F3C", // nano-brown
white: {
DEFAULT: "#FFFFFF",
100: "#F6F7F7",
@@ -29,6 +30,7 @@ const config: Config = {
},
brown: {
50: "#A27F3C",
70: "#614C24",
},
},
},