Skip to content

Commit

Permalink
Add About screen
Browse files Browse the repository at this point in the history
  • Loading branch information
@AntonioVdlC
AntonioVdlC committed Mar 11, 2022
1 parent 4531116 commit ea59e3f
Show file tree
Hide file tree
Showing 5 changed files with 180 additions and 138 deletions.
1 change: 1 addition & 0 deletions app/components/Footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import FooterSocial, { SocialPlatform } from "~/components/FooterSocial";
export default function Footer() {
const navigation = [
{ name: "About", href: "/about" },
{ name: "How It Works", href: "/how" },
{ name: "Docs", href: "/docs" },
{ name: "Pricing", href: "/pricing" },
{ name: "Terms", href: "/terms" },
Expand Down
2 changes: 1 addition & 1 deletion app/components/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ type Props = {

export default function Header({ isUserLoggedIn }: Props) {
const navigation = [
{ name: "How It Works", href: "/how" },
{ name: "About", href: "/about" },
{ name: "Docs", href: "/docs" },
{ name: "Pricing", href: "/pricing" },
{ name: "Contribute", href: "/contribute" },
Expand Down
89 changes: 89 additions & 0 deletions app/components/PageHeading.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
import type { ReactChild } from "react";

type Props = {
children: ReactChild | Array<ReactChild>;
};

export default function PageHeading({ children }: Props) {
return (
<div className="relative overflow-hidden bg-slate-50">
<div
className="hidden sm:absolute sm:inset-y-0 sm:block sm:h-full sm:w-full"
aria-hidden="true"
>
<div className="relative mx-auto h-full max-w-7xl">
<svg
className="absolute right-full translate-y-1/4 translate-x-1/4 transform lg:translate-x-1/2"
width={404}
height={784}
fill="none"
viewBox="0 0 404 784"
>
<defs>
<pattern
id="f210dbf6-a58d-4871-961e-36d5016a0f49"
x={0}
y={0}
width={20}
height={20}
patternUnits="userSpaceOnUse"
>
<rect
x={0}
y={0}
width={4}
height={4}
className="text-slate-200"
fill="currentColor"
/>
</pattern>
</defs>
<rect
width={404}
height={784}
fill="url(#f210dbf6-a58d-4871-961e-36d5016a0f49)"
/>
</svg>
<svg
className="absolute left-full -translate-y-3/4 -translate-x-1/4 transform md:-translate-y-1/2 lg:-translate-x-1/2"
width={404}
height={784}
fill="none"
viewBox="0 0 404 784"
>
<defs>
<pattern
id="5d0dd344-b041-4d26-bec4-8d33ea57ec9b"
x={0}
y={0}
width={20}
height={20}
patternUnits="userSpaceOnUse"
>
<rect
x={0}
y={0}
width={4}
height={4}
className="text-slate-200"
fill="currentColor"
/>
</pattern>
</defs>
<rect
width={404}
height={784}
fill="url(#5d0dd344-b041-4d26-bec4-8d33ea57ec9b)"
/>
</svg>
</div>
</div>

<div className="relative pt-6 pb-16 sm:pb-24">
<div className="mx-auto mt-16 max-w-7xl px-4 sm:mt-24">
<div className="text-center">{children}</div>
</div>
</div>
</div>
);
}
32 changes: 30 additions & 2 deletions app/routes/about.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import { getUserId } from "~/utils/session.server";

import Footer from "~/components/Footer";
import Header from "~/components/Header";
import { marked } from "marked";
import PageHeading from "~/components/PageHeading";

type LoaderData = {
isUserLoggedIn: boolean;
Expand All @@ -21,13 +23,39 @@ export const loader: LoaderFunction = async ({ request }) => {

export default function AboutScreen() {
const data = useLoaderData<LoaderData>();
const content = marked(`
\`fantomely\` was created out of the need to find a simple, privacy-focused analytics platform for my blog.
After scouting the market for a free (or cheap) solution that would fit my needs, I failed to find something. Some possible tools I looked at include:
- [Fathom](https://usefathom.com/)
- [Plausible](https://plausible.io/)
- [Fugu](https://fugu.lol/)
- [Umami](https://umami.is/)
If you are looking for a serious platform for your analytics needs that also happens to care about your users' privacy, I would recommend checking any of those platforms listed above.
I ended up building \`fantomely\` because I valued my time to be worth less than the ~$10/month that managed versions of Fathom, Plausible, and Fugu cost, and instead of self-hosting a third party (like Umami or Plausible), why not just self-host my own platform?
Currently, \`fantomely\` is in private beta, and powers the analytics on my [blog](https://antoniovdlc.me), but I might monetize it in the future. If you want to play around with it, feel free to [join the waitlist](https://fantomely.com/auth/waitlist), or look at the [source code](https://github.com/AntonioVdlC/fantomely).
👻
`);

return (
<div className="relative bg-slate-50">
<Header isUserLoggedIn={data.isUserLoggedIn} />

<main className="mx-auto max-w-7xl px-8">
<p>About</p>
<main>
<PageHeading>
<h1 className="text-4xl font-extrabold tracking-tight text-slate-900 sm:text-5xl md:text-6xl">
<span className="block xl:inline">About</span>
</h1>
</PageHeading>

<div
className="prose prose-slate mt-16 max-w-none px-12 sm:mt-24 md:prose-lg"
dangerouslySetInnerHTML={{ __html: content }}
></div>
</main>

<Footer />
Expand Down
194 changes: 59 additions & 135 deletions app/routes/contribute.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { getUserId } from "~/utils/session.server";
import Button from "~/components/Button";
import Footer from "~/components/Footer";
import Header from "~/components/Header";
import PageHeading from "~/components/PageHeading";

type LoaderData = {
isUserLoggedIn: boolean;
Expand All @@ -27,147 +28,70 @@ export default function ContributeScreen() {
<div className="relative bg-slate-50">
<Header isUserLoggedIn={data.isUserLoggedIn} />

<div className="relative overflow-hidden bg-slate-50">
<div
className="hidden sm:absolute sm:inset-y-0 sm:block sm:h-full sm:w-full"
aria-hidden="true"
>
<div className="relative mx-auto h-full max-w-7xl">
<svg
className="absolute right-full translate-y-1/4 translate-x-1/4 transform lg:translate-x-1/2"
width={404}
height={784}
fill="none"
viewBox="0 0 404 784"
>
<defs>
<pattern
id="f210dbf6-a58d-4871-961e-36d5016a0f49"
x={0}
y={0}
width={20}
height={20}
patternUnits="userSpaceOnUse"
>
<rect
x={0}
y={0}
width={4}
height={4}
className="text-slate-200"
fill="currentColor"
/>
</pattern>
</defs>
<rect
width={404}
height={784}
fill="url(#f210dbf6-a58d-4871-961e-36d5016a0f49)"
/>
</svg>
<svg
className="absolute left-full -translate-y-3/4 -translate-x-1/4 transform md:-translate-y-1/2 lg:-translate-x-1/2"
width={404}
height={784}
fill="none"
viewBox="0 0 404 784"
>
<defs>
<pattern
id="5d0dd344-b041-4d26-bec4-8d33ea57ec9b"
x={0}
y={0}
width={20}
height={20}
patternUnits="userSpaceOnUse"
>
<rect
x={0}
y={0}
width={4}
height={4}
className="text-slate-200"
fill="currentColor"
/>
</pattern>
</defs>
<rect
width={404}
height={784}
fill="url(#5d0dd344-b041-4d26-bec4-8d33ea57ec9b)"
/>
</svg>
<main>
<PageHeading>
<h1 className="text-4xl font-extrabold tracking-tight text-slate-900 sm:text-5xl md:text-6xl">
<span className="block xl:inline">Contribute</span>
</h1>
<p className="mx-auto mt-3 max-w-md text-base text-slate-500 sm:text-lg md:mt-5 md:max-w-3xl md:text-xl">
The platform is open source, and very welcoming of contributions!
</p>
<div className="mx-auto mt-5 max-w-md sm:flex sm:justify-center md:mt-8">
<div>
<Button
to="https://github.com/AntonioVdlC/analytics-service"
external
primary
>
Contribute
</Button>
</div>
</div>
</div>

<div className="relative pt-6 pb-16 sm:pb-24">
<main className="mx-auto mt-16 max-w-7xl px-4 sm:mt-24">
<div className="text-center">
<h1 className="text-4xl font-extrabold tracking-tight text-slate-900 sm:text-5xl md:text-6xl">
<span className="block xl:inline">Contribute</span>
</h1>
<p className="mx-auto mt-3 max-w-md text-base text-slate-500 sm:text-lg md:mt-5 md:max-w-3xl md:text-xl">
The platform is open source, and very welcoming of
contributions!
</p>
<div className="mx-auto mt-5 max-w-md sm:flex sm:justify-center md:mt-8">
<div>
<Button
to="https://github.com/AntonioVdlC/analytics-service"
external
primary
>
Contribute
<hr className="mx-auto mt-8 max-w-md md:mt-12 " />

<p className="mx-auto mt-8 max-w-md text-base text-slate-500 sm:text-lg md:mt-12 md:max-w-3xl md:text-xl">
As we are currently in private beta, you can also contribute by
joining the waitlist and testing the platform.
</p>
<div className="mt-3 flex flex-col items-center text-center">
<form
method="post"
action="/auth/waitlist"
className="sm:mx-auto sm:max-w-xl lg:mx-0"
>
<div className="sm:flex">
<div className="min-w-0 flex-1">
<label htmlFor="email" className="sr-only">
Email address
</label>
<input
id="email"
type="email"
name="email"
required
placeholder="Enter your email"
className="block w-full rounded-md border border-slate-300 px-4 py-3 text-base text-slate-900 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-slate-300 focus:ring-offset-2 focus:ring-offset-slate-900"
/>
</div>
<div className="mt-3 sm:mt-0 sm:ml-3">
<Button primary type="submit">
Join the wailist
</Button>
</div>
</div>

<hr className="mx-auto mt-8 max-w-md md:mt-12 " />

<p className="mx-auto mt-8 max-w-md text-base text-slate-500 sm:text-lg md:mt-12 md:max-w-3xl md:text-xl">
As we are currently in private beta, you can also contribute by
joining the waitlist and testing the platform.
<p className="mt-3 text-sm text-slate-500 sm:mt-4">
Join our waitlist and get an invite when we launch our private
beta. By providing your email, you agree to our{" "}
<Link to="/terms" className="font-medium text-slate-900">
terms of service
</Link>
.
</p>
<div className="mt-3 flex flex-col items-center text-center">
<form
method="post"
action="/auth/waitlist"
className="sm:mx-auto sm:max-w-xl lg:mx-0"
>
<div className="sm:flex">
<div className="min-w-0 flex-1">
<label htmlFor="email" className="sr-only">
Email address
</label>
<input
id="email"
type="email"
name="email"
required
placeholder="Enter your email"
className="block w-full rounded-md border border-slate-300 px-4 py-3 text-base text-slate-900 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-slate-300 focus:ring-offset-2 focus:ring-offset-slate-900"
/>
</div>
<div className="mt-3 sm:mt-0 sm:ml-3">
<Button primary type="submit">
Join the wailist
</Button>
</div>
</div>
<p className="mt-3 text-sm text-slate-500 sm:mt-4">
Join our waitlist and get an invite when we launch our
private beta. By providing your email, you agree to our{" "}
<Link to="/terms" className="font-medium text-slate-900">
terms of service
</Link>
.
</p>
</form>
</div>
</div>
</main>
</div>
</div>
</form>
</div>
</PageHeading>
</main>

<Footer />
</div>
Expand Down

0 comments on commit ea59e3f

Please sign in to comment.