tlsnotary/website
1
0
Fork 0
mirror of https://github.com/tlsnotary/website.git synced 2026-01-08 21:48:05 -05:00
Code Issues Packages Projects Releases Wiki Activity

import components without custom path

Browse Source
This commit is contained in:
Kalidou Diagne
2024-04-05 19:10:05 +02:00
parent 6c07fa5037
commit 1509f189d2
11 changed files with 49 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
app/about/page.tsx
View File

@@ -1,47 +1,29 @@
import { AppContainer } from "@/components/AppContainer";
import { Section } from "@/components/Section";
import { Button } from "@/components/ui/Button";
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 { Card } from "../../components/ui/Card";
import { COMMON_CONTENT } from "../../content/common";
import { Banner } from "../../components/ui/Banner";
import { LABELS } from "../../content";
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}
/>
<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}
>
<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}
>
<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>
<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>
@@ -49,16 +31,11 @@ export default function AboutPage() {
</div>
</Section>
<Section
title={LABELS.ABOUT.GET_INVOLVED.TITLE}
description={LABELS.ABOUT.GET_INVOLVED.DESCRIPTION}
/>
<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>
<Button className="w-full">{COMMON_CONTENT.VIEW_DOCUMENTATION}</Button>
</Link>
<Link href={LINKS.GITHUB}>
<Button className="w-full" variant="transparent">
@@ -67,10 +44,7 @@ export default function AboutPage() {
</Link>
</div>
</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} />
</main>
);
}

10
app/faq/page.tsx
View File

@@ -1,8 +1,8 @@
import { AppContainer } from "@/components/AppContainer";
import { Section } from "@/components/Section";
import { Accordion } from "@/components/ui/Accordion";
import { LABELS } from "@/content";
import { FAQS } from "@/content/faq";
import { AppContainer } from "../../components/AppContainer";
import { Section } from "../../components/Section";
import { Accordion } from "../../components/ui/Accordion";
import { LABELS } from "../../content";
import { FAQS } from "../../content/faq";
import React from "react";
export default function FAQPage() {

6
app/layout.tsx
View File

@@ -1,9 +1,9 @@
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import { AppFooter } from "@/components/AppFooter";
import { AppHeader } from "@/components/AppHeader";
import { cn } from "@/shared/utils";
import { AppFooter } from "../components/AppFooter";
import { AppHeader } from "../components/AppHeader";
import { cn } from "../shared/utils";
const inter = Inter({ subsets: ["latin"] });

16
app/page.tsx
View File

@@ -1,11 +1,11 @@
import { AppContainer } from "@/components/AppContainer";
import { Banner } 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 { AppContainer } from "../components/AppContainer";
import { Banner } 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";
export default function Home() {
return (

2
app/settings.tsx
View File

@@ -1,4 +1,4 @@
import { Icons } from "@/components/Icons";
import { Icons } from "../components/Icons";
import { ReactNode } from "react";
type NavItem = {

4
components/AppFooter.tsx
View File

@@ -1,9 +1,9 @@
import { AppContainer } from "./AppContainer";
import { Icons } from "./Icons";
import { classed } from "@tw-classed/react";
import { NAVIGATION, SOCIALS_FOOTER } from "@/app/settings";
import { NAVIGATION, SOCIALS_FOOTER } from "../app/settings";
import Link from "next/link";
import { LABELS } from "@/content";
import { LABELS } from "../content";
const NavLabel = classed.span("flex gap-2 items-center font-sans text-white-100 text-sm duration-300", {
variants: {

6
components/AppHeader.tsx
View File

@@ -3,12 +3,12 @@
import Link from "next/link";
import { AppContainer } from "./AppContainer";
import { Icons } from "./Icons";
import { LINKS, NAVIGATION, SOCIALS_HEADER } from "@/app/settings";
import { LINKS, NAVIGATION, SOCIALS_HEADER } from "../app/settings";
import { classed } from "@tw-classed/react";
import { usePathname } from "next/navigation";
import { useState } from "react";
import { cn } from "@/shared/utils";
import { LABELS } from "@/content";
import { cn } from "../shared/utils";
import { LABELS } from "../content";
const NavLabel = classed.span("text-lg font-semibold hover:text-gold duration-300", {
variants: {

19
components/ui/Accordion.tsx
View File

@@ -1,7 +1,7 @@
"use client";
import { ReactNode, useState } from "react";
import { Icons } from "../Icons";
import { cn } from "@/shared/utils";
import { cn } from "../../shared/utils";
interface AccordionProps {
label: string;
@@ -12,19 +12,14 @@ 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" 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-sans text-base leading-6 text-primary font-medium">{label}</span>
<Icons.ArrowUp
className={cn("duration-200", {
"transform rotate-180": !isOpen,
@@ -35,14 +30,10 @@ const Accordion = ({ label, children }: AccordionProps) => {
<div
className={cn(
"block overflow-hidden max-h-0 duration-200 ease-in-out",
isOpen
? "grid-rows-[1fr] opacity-100 max-h-full"
: "grid-rows-[0fr] opacity-0"
isOpen ? "grid-rows-[1fr] opacity-100 max-h-full" : "grid-rows-[0fr] opacity-0"
)}
>
<p className="block overflow-hidden pt-4 text-primary text-sm leading-5 font-sans font-normal">
{children}
</p>
<p className="block overflow-hidden pt-4 text-primary text-sm leading-5 font-sans font-normal">{children}</p>
</div>
</div>
</div>

15
components/ui/Banner.tsx
View File

@@ -3,7 +3,7 @@ import { ReactNode } from "react";
import { AppContainer } from "../AppContainer";
import type * as Classed from "@tw-classed/react";
import { classed } from "@tw-classed/react";
import { cn } from "@/shared/utils";
import { cn } from "../../shared/utils";
const BannerTitle = classed.h4("text-gold", {
variants: {
@@ -52,14 +52,7 @@ const BannerImage = ({ inverse }: Pick<BannerProps, "inverse">) => {
);
};
export const Banner = ({
title,
description,
inverse = false,
children,
actions,
titleSize,
}: BannerProps) => {
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} />
@@ -73,9 +66,7 @@ export const Banner = ({
<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>
<span className="text-white font-medium text-lg md:text-xl md:leading-6">{description}</span>
)}
</div>
{actions}

4
content/about.tsx
View File

@@ -1,4 +1,4 @@
import { Icons } from "@/components/Icons";
import { Icons } from "../components/Icons";
/**
Markdown supported for description
@@ -8,7 +8,7 @@ export const ABOUT_CONTENT = {
WHO_WE_ARE: {
TITLE: "Who we are",
DESCRIPTION: `TLSNotary is an open-source protocol developed by the **Privacy and Scaling Exploration (PSE)** research lab of the Ethereum Foundation.
\nTLSNotary is not a new project; in fact, it has been around for **more than a decade**. In 2022, TLSNotary was rebuilt from the ground up in **Rust** incorporating state-of-the-art cryptographic protocols. This renewed version of the TLSNotary protocol offers enhanced security, privacy, and performance.
\nTLSNotary is not a new project; in fact, it has been around for **more than a decade**. In 2022, TLSNotary was rebuilt from the ground up in **Rust** incorporating state-of-the-art cryptographic protocols. This renewed version of the TLSNotary protocol offers enhanced security, privacy, and performance.
`,
},
HOW_IT_WORKS: {

2
content/whatWeDo.tsx
View File

@@ -1,4 +1,4 @@
import { Icons } from "@/components/Icons";
import { Icons } from "../components/Icons";
import { ReactNode } from "react";
type WhatWeDo = {