Skip to content

Commit

Permalink
Frontpage design and copy changes
Browse files Browse the repository at this point in the history
  • Loading branch information
Johannes Sjoberg committed Jun 13, 2023
1 parent 4c8d86c commit d66641f
Show file tree
Hide file tree
Showing 12 changed files with 5,480 additions and 5,620 deletions.
280 changes: 57 additions & 223 deletions src/components/basejump-default-content/homepage.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,231 +1,65 @@
/* istanbul ignore file */
import Logo from "@/components/basejump-default-content/logo";
import ContentMeta from "@/components/content-pages/content-meta";
import { useEffect, useState } from "react";
import useTranslation from "next-translate/useTranslation";
import { v4 as uuidv4 } from "uuid";
import Link from "next/link";
import DidBuilder from "@/components/dids/Builder";
import { getInitialDidDocument } from "@/lib/did";

const BasejumpHomepage = () => (
<div className="max-w-screen-lg mx-auto bg-base-100">
<ContentMeta
title="Attested.tech"
description="Playground for decentralized identifiers"
socialImage={`/api/og?title=Basejump`}
/>
<div className="pt-8 pb-24 md:pt-36 md:pb-48">
<Logo size="lg" className="mx-auto" />
<h2 className="h2 text-center my-2">
Playground for{" "}
<span className="text-accent">decentralized identifiers</span> and{" "}
<span className="text-accent">verifiable credentials</span>
</h2>
</div>
<div className="grid grid-cols-1 gap-y-8 lg:gap-y-16">
<div>
<h1 className="h1 text-center mb-8">Features</h1>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<div className="flex flex-col bg-base-200 rounded-lg p-6">
<h3 className="h3 mb-2">Teams & Accounts</h3>
<p>
Billing and permissions for both personal and team accounts. Both
are optional, allowing you to fine-tune your experience
</p>
</div>
<div className="flex flex-col bg-base-200 rounded-lg p-6">
<h3 className="h3 mb-2">Stripe Subscriptions</h3>
<p>
Supports complicated workflows such as trial periods, free plans,
forced payment plans and more
</p>
</div>
<div className="flex flex-col bg-base-200 rounded-lg p-6">
<h3 className="h3 mb-2">Easy Permissions</h3>
<p>
Support for members and owners, easy database functions for
extending permissions as needed
</p>
</div>
<div className="flex flex-col bg-base-200 rounded-lg p-6">
<h3 className="h3 mb-2">Account Management & Dashboard</h3>
<p>
Profiles, billing, team invitations and more. All the basics so
you can focus on your app
</p>
</div>
<div className="flex flex-col bg-base-200 rounded-lg p-6">
<h3 className="h3 mb-2">Full Component Library</h3>
<p>
Basejump leverages DaisyUI and TailwindCSS for an easy development
experience
</p>
</div>
<div className="flex flex-col bg-base-200 rounded-lg p-6">
<h3 className="h3 mb-2">Internationalization (I18n)</h3>
<p>
Support for translations and internationalization using
next-translate
</p>
</div>
<div className="flex flex-col bg-base-200 rounded-lg p-6">
<h3 className="h3 mb-2">Authentication</h3>
<p>
Magic links, Phone SMS Auth, Email/Password and Social Logins all
provided by Supabase
</p>
</div>
<div className="flex flex-col bg-base-200 rounded-lg p-6">
<h3 className="h3 mb-2">Fully Customizable</h3>
<p>
Basejump is a batteries-included starting point for your
application. Customize it to your hearts content
</p>
</div>
<div className="flex flex-col bg-base-200 rounded-lg p-6">
<h3 className="h3 mb-2">Themeable</h3>
<p>
Light & Dark mode included. Create your own themes using DaisyUI
</p>
</div>
<div className="flex flex-col bg-base-200 rounded-lg p-6 md:col-span-3">
<h3 className="h3 mb-2">Open Source</h3>
<p>
Basejump is open source, contributions are both awesome and
encouraged!
</p>
</div>
const BasejumpHomepage = () => {
const [id, setId] = useState();
const { t } = useTranslation("content");

useEffect(() => {
setId(uuidv4());
}, []);

return (
<>
<div className="max-w-screen-xl mx-auto bg-base-100">
<ContentMeta
title="Attested.tech"
description="Playground for decentralized identifiers"
socialImage={`/api/og?title=Basejump`}
/>
<div className="pt-8 pb-24 md:pt-24 md:36">
{/*<Logo size="lg" className="mx-auto" />*/}
<h2 className="h2 text-center my-2">
<span className="text-accent">
Decentralized identifiers (DIDs)
</span>{" "}
is an&nbsp;
<Link
className={"underline"}
href={"https://www.w3.org/TR/did-core/"}
passHref
>
open standard
</Link>
&nbsp;that enables verifiable, decentralized digital identity.
<br />
<br />
This site allows you to learn and play around with DID Documents.
</h2>
</div>
</div>
<div className="max-w-screen-md mx-auto">
<h1 className="h1 text-center mb-8">
Sensible Defaults & Special Thanks
</h1>
<p>
Basejump is built using some really awesome open source libraries and
graphics. Here are some of them
</p>
<h4 className="h4 mt-4">Libraries and tools</h4>
<ul className="my-4 mx-4 list-disc grid gap-y-3">
<li>
<a
href="https://supabase.com/"
title="Supabase"
target="_blank"
rel="noreferrer"
>
<span className="font-bold">Supabase</span>
<p>
Supabase bills itself as &quot;an open source Firebase
alternative,&quot; but it&apos;s so much more. It also serves as
the primary force behind Basejump
</p>
</a>
</li>
<li>
<a
href="https://nextjs.org/"
title="NextJS"
target="_blank"
rel="noreferrer"
>
<span className="font-bold">NextJS</span>
<p>
NextJS needs no introduction. You either love it or you hate it.
We love it.
</p>
</a>
</li>
<li>
<a
href="https://tailwindcss.com/"
title="TailwindCSS"
target="_blank"
rel="noreferrer"
>
<span className="font-bold">Tailwind</span>
<p>
Tailwind is a utility-first CSS library that forms the base of
all the styling for Basejump
</p>
</a>
</li>
<li>
<a
href="https://daisyui.com/"
title="DaisyUI"
target="_blank"
rel="noreferrer"
>
<span className="font-bold">DaisyUI</span>
<p>
Built on top of Tailwind, DaisyUI provides some solid reusable
components.
</p>
</a>
</li>
<li>
<a
href="https://tanstack.com/query/v4"
title="React-Query"
target="_blank"
rel="noreferrer"
>
<span className="font-bold">
Tanstack Query (formerly React-Query)
</span>
<p>
Asynchronous state management - react-query drives most api
interactions behind the scenes
</p>
</a>
</li>
<li>
<a
href="https://react-hook-form.com/"
title="React Hook Form"
target="_blank"
rel="noreferrer"
>
<span className="font-bold">React Hook Form</span>
<p>
Form validations, submissions and error handling. If you click
submit and it does a thing, you probably have this to thank
</p>
</a>
</li>
</ul>
<h4 className="h4">Graphics</h4>
<ul className="my-4 mx-4 list-disc grid gap-y-1">
<li>
<a
href="https://lukaszadam.com/"
title="Empty space credit"
target="_blank"
rel="noopener noreferrer"
>
Empty space illustration created by the very generous Lukaszadam
</a>
</li>
<li>
<a
href="https://www.flaticon.com/free-icons/parachuting"
title="Basejump dude credit"
target="_blank"
rel="noopener noreferrer"
>
Our awesome basejumper dude was created by monkik
</a>
</li>
<li>
<a
href="https://heroicons.com/"
title="Heroicons"
target="_blank"
rel="noopener noreferrer"
>
Heroicons drives all of our in-app and homepage icons
</a>
</li>
</ul>
<div className="bg-base-300">
<div id="#dids" className="max-w-screen-xl mx-auto pt-2 pb-4">
<div className="p-4">
<h1 className="text-2xl font-extrabold">DID Document Playground</h1>
</div>
{id && (
<DidBuilder
id={id}
name={"DID Document Playground"}
document={getInitialDidDocument(id)}
/>
)}
</div>
</div>
</div>
</div>
);
</>
);
};

export default BasejumpHomepage;
12 changes: 6 additions & 6 deletions src/components/basejump-default-content/logo.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
/* istanbul ignore file */
import Image from "next/image";
import cx from "classnames";
import {ShieldCheckIcon} from "@heroicons/react/outline";
import { ShieldCheckIcon } from "@heroicons/react/outline";

type Props = {
size: "sm" | "lg";
Expand Down Expand Up @@ -29,10 +28,11 @@ const Logo = ({ size = "lg", className }: Props) => {
})}
>
<ShieldCheckIcon
className={cx({
"w-24 h-24 text-red-600": size === "lg",
"w-6 h-6 text-red-600": size === "sm",
})}/>
className={cx({
"w-24 h-24 text-teal-600": size === "lg",
"w-10 h-10 text-teal-600": size === "sm",
})}
/>
</div>
<h1
className={cx("font-black", {
Expand Down
4 changes: 1 addition & 3 deletions src/components/content-pages/content-footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,7 @@ const ContentFooter = () => {
return (
<footer className="bg-base-200">
<div className="max-w-7xl mx-auto py-12 flex flex-col md:flex-row justify-center items-center content-center gap-4">
<p>Playground for decentralized identifiers and verifiable credentials</p>
<p className="hidden md:block">&bull;</p>
<p>&copy; {year} attested.tech</p>
<p>&copy; {year} Attested.tech</p>
</div>
</footer>
);
Expand Down
40 changes: 20 additions & 20 deletions src/components/content-pages/content-header-mobile.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,26 +45,26 @@ const ContentHeaderMobile = ({ className, onClose }: Props) => {
</Menu.Item>
))}
<Divider />
{!!user ? (
<Menu.Item>
<Link href="/dashboard" passHref>
{t("dashboard")}
</Link>
</Menu.Item>
) : (
<>
<Menu.Item>
<Link href="/login" passHref>
{t("login")}
</Link>
</Menu.Item>
<Menu.Item>
<Link href="/signup" passHref>
{t("signUp")}
</Link>
</Menu.Item>
</>
)}
{/*{!!user ? (*/}
{/* <Menu.Item>*/}
{/* <Link href="/dashboard" passHref>*/}
{/* {t("dashboard")}*/}
{/* </Link>*/}
{/* </Menu.Item>*/}
{/*) : (*/}
{/* <>*/}
{/* <Menu.Item>*/}
{/* <Link href="/login" passHref>*/}
{/* {t("login")}*/}
{/* </Link>*/}
{/* </Menu.Item>*/}
{/* <Menu.Item>*/}
{/* <Link href="/signup" passHref>*/}
{/* {t("signUp")}*/}
{/* </Link>*/}
{/* </Menu.Item>*/}
{/* </>*/}
{/*)}*/}
</Menu>
</div>
</div>
Expand Down
Loading

0 comments on commit d66641f

Please sign in to comment.