Skip to content

Commit

Permalink
docs: Update image URLs and add tutorials
Browse files Browse the repository at this point in the history
  • Loading branch information
@phukon
phukon committed Mar 23, 2024
1 parent ecb8b44 commit 64e4165
Show file tree
Hide file tree
Showing 4 changed files with 204 additions and 45 deletions.
2 changes: 1 addition & 1 deletion .env.example
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,9 @@ GOOGLE_SCRIPT_URL=
CRON_SECRET=

# Notion integration
NOTION_API_KEY=
NOTION_OAUTH_CLIENT_ID=
NOTION_OAUTH_CLIENT_SECRET=
NOTION_OAUTH_REDIRECT_URI=
NOTION_AUTH_URL=

# AI
Expand Down
91 changes: 71 additions & 20 deletions src/app/(static)/link-google-doc/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,7 @@ import Footer from "@/components/Footer";
import Header from "@/components/Header";
import { Disclosure } from "@headlessui/react";
import { RiGoogleFill } from "react-icons/ri";
import {
Plus as PlusSmallIcon,
Minus as MinusSmallIcon,
} from "lucide-react";
import { Plus as PlusSmallIcon, Minus as MinusSmallIcon } from "lucide-react";
import Link from "next/link";

const faqs = [
Expand Down Expand Up @@ -60,6 +57,70 @@ export default function Home() {
Enable share in Google Doc settings and add the Doc link in{" "}
<span className=" --local-comfortaa">Clack</span> dashboard.
</p>
{/* <div className="mt-10 flex items-center justify-center gap-x-6">
<Link
className="rounded-md bg-black dark:bg-white px-3.5 py-2.5 text-sm font-semibold text-white dark:text-black shadow-sm hover:bg-gray-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-400"
href="/dash"
>
Link now
</Link>
</div> */}
</div>
<div className=" text-left mt-10 pt-14 ">
<h3 className=" text-3xl font-bold --local-ebgaramond">
1. Open your Google Docs page
</h3>
<div className="relative max-w-[900px] overflow-hidden pt-16">
<div className="mx-auto max-w-7xl px-6 lg:px-8">
<video
width="100%"
id="video1"
style={{ borderRadius: "6px" }}
aria-hidden="true"
playsInline
autoPlay
muted
loop
>
<source
src="https://d1g2o751bxy91o.cloudfront.net/link-google.mp4"
type="video/mp4"
/>
</video>
</div>
<p className=" mt-10 text-center leading-8 text-gray-500 font-medium">
Click on <b>Share</b> on the top right of the page.<br/>
Then change the <b>general access</b> to <u><i className=" font-normal">Anyone with the link</i></u>
</p>
</div>

<div className="relative max-w-[900px] overflow-hidden pt-16">
<h3 className=" mt-10 pt-14 text-3xl font-bold --local-ebgaramond">
Happy writing!
</h3>
<div className="mx-auto max-w-7xl pt-14 px-6 lg:px-8">
<div className=" mx-auto w-full max-w-5xl">
<video
width="100%"
id="video1"
style={{ borderRadius: "6px" }}
aria-hidden="true"
playsInline
autoPlay
muted
loop
>
<source
src="https://d1g2o751bxy91o.cloudfront.net/link-google-dash.mp4"
type="video/mp4"
/>
</video>
</div>
</div>
<p className=" mt-10 text-center leading-8 text-gray-500 font-medium">
Great! You can now paste the link of your Google Docs document in your dashboard.
</p>
</div>
<div className="mt-10 flex items-center justify-center gap-x-6">
<Link
className="rounded-md bg-black dark:bg-white px-3.5 py-2.5 text-sm font-semibold text-white dark:text-black shadow-sm hover:bg-gray-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-400"
Expand All @@ -70,33 +131,23 @@ export default function Home() {
</div>
</div>
</div>
<div className=" mx-auto w-full max-w-5xl">
<video
width="100%"
id="video1"
style={{ borderRadius: "6px" }}
aria-hidden="true"
playsInline
autoPlay
muted
loop
>
<source src="https://d1g2o751bxy91o.cloudfront.net/ai-autocomp.mp4" type="video/mp4" />
</video>
</div>

{/* FAQ section */}
<div className="mx-auto mt-24 max-w-7xl px-6 sm:mt-32 lg:px-8">
<div className="mx-auto max-w-4xl divide-y divide-gray-900/10">
<h2 className="text-2xl font-bold leading-10 tracking-tight text-white">Frequently asked questions</h2>
<h2 className="text-2xl font-bold leading-10 tracking-tight text-white">
Frequently asked questions
</h2>
<dl className="mt-10 space-y-6 divide-y divide-gray-900/10 dark:divide-gray-200/10">
{faqs.map((faq) => (
<Disclosure as="div" key={faq.question} className="pt-6">
{({ open }) => (
<>
<dt>
<Disclosure.Button className="flex w-full items-start justify-between text-left text-gray-900 dark:text-gray-200">
<span className="text-base font-semibold leading-7">{faq.question}</span>
<span className="text-base font-semibold leading-7">
{faq.question}
</span>
<span className="ml-6 flex h-7 items-center">
{open ? (
<MinusSmallIcon className="h-6 w-6" aria-hidden="true" />
Expand Down
144 changes: 127 additions & 17 deletions src/app/(static)/link-notion-page/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
'use client'
"use client";
import Footer from "@/components/Footer";
import Header from "@/components/Header";
import { Disclosure } from "@headlessui/react";
Expand All @@ -14,7 +14,7 @@ import {
HardDrive as ServerIcon,
} from "lucide-react";
import Link from "next/link";

import Image from "next/image";

const faqs = [
{
Expand All @@ -35,7 +35,7 @@ const faqs = [
export default function Home() {
return (
<div>
<Header/>
<Header />

<main>
{/* Hero section */}
Expand All @@ -56,16 +56,133 @@ export default function Home() {
<div className="mx-auto max-w-2xl py-12 sm:py-12 lg:py-32 ">
<div className="hidden sm:mb-8 sm:flex sm:justify-center">
<div className="relative rounded-full px-3 py-1 text-sm leading-6 flex flex-row text-black dark:text-white ring-1 ring-black/10 dark:ring-white/10 hover:ring-white/20">
Clack for Notion <RiNotionFill className=" ml-1 mt-1"/>
Clack for Notion <RiNotionFill className=" ml-1 mt-1" />
</div>
</div>
<div className="text-center">
<h1 className=" tracking-tight text-black dark:text-white sm:text-6xl text-6xl md:text-[80px] font-normal --local-ebgaramond">
<h1 className=" tracking-tight text-black dark:text-white sm:text-6xl text-6xl md:text-[80px] font-normal --local-ebgaramond">
Link a Notion Page
</h1>
<p className="mt-6 text-lg leading-8 text-gray-500">
Connect the Clack integration Notion and add the page link in <span className=" --local-comfortaa">Clack</span> dashboard.
Connect the Clack integration Notion and add the page link in{" "}
<span className=" --local-comfortaa">Clack</span> dashboard.
</p>
{/* <div className="mt-10 flex items-center justify-center gap-x-6">
<Link
className="rounded-md bg-black dark:bg-white px-3.5 py-2.5 text-sm font-semibold text-white dark:text-black shadow-sm hover:bg-gray-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-400"
href="/dash"
>
Link now
</Link>
</div> */}
</div>
<div className=" text-left mt-10 pt-14">
<h3 className=" text-3xl font-bold --local-ebgaramond">
1. Go to the settings page
</h3>
<div className="relative max-w-[900px] overflow-hidden pt-16">
<div className="mx-auto max-w-7xl px-6 lg:px-8">
<img
src="https://d1g2o751bxy91o.cloudfront.net/n0.png"
alt="App screenshot"
className=" rounded-xl shadow-2xl ring-1 ring-gray-900/10"
width={2432}
height={1442}
/>
</div>
<p className=" mt-10 text-center leading-8 text-gray-500 font-medium">
In the settings page you&apos;ll find three tabs namely General, Edit, and
Integrations
</p>
</div>
<h3 className=" mt-10 pt-14 text-3xl font-bold --local-ebgaramond">
2. Go to the Integrations tab
</h3>
<div className="relative max-w-[900px] overflow-hidden pt-16">
<div className="mx-auto max-w-7xl px-6 lg:px-8">
<img
src="https://d1g2o751bxy91o.cloudfront.net/n1.png"
alt="App screenshot"
className=" rounded-xl shadow-2xl ring-1 ring-gray-900/10"
width={2432}
height={1442}
/>
{/* <div className="relative" aria-hidden="true">
<div className="absolute -inset-x-20 bottom-0 bg-gradient-to-t from-black pt-[7%]" />
</div> */}
</div>
<p className=" mt-10 text-center leading-8 text-gray-500 font-medium">
Click on the &apos;Integrations&apos; tab. Then click on the connect button.
</p>
</div>
<h3 className=" mt-10 pt-14 text-3xl font-bold --local-ebgaramond">
3. Give the necessary permissions and page access.
</h3>
<div className="relative max-w-[900px] overflow-hidden pt-16">
<div className="mx-auto max-w-7xl px-6 lg:px-8">
<img
src="https://d1g2o751bxy91o.cloudfront.net/n2.png"
alt="App screenshot"
className=" rounded-xl shadow-2xl ring-1 ring-gray-900/10"
width={2432}
height={1442}
/>
{/* <div className="relative" aria-hidden="true">
<div className="absolute -inset-x-20 bottom-0 bg-gradient-to-t from-black pt-[7%]" />
</div> */}
</div>
<p className=" mt-10 text-center leading-8 text-gray-500 font-medium">
A prompt apperas from Notion, it describes the integration&apos;s capabilities.
</p>
</div>

<div className="relative max-w-[900px] overflow-hidden pt-16">
<div className="mx-auto max-w-7xl px-6 lg:px-8">
<div className=" mx-auto w-full max-w-5xl">
<video
width="100%"
id="video1"
style={{ borderRadius: "6px" }}
aria-hidden="true"
playsInline
autoPlay
muted
loop
>
<source src="https://d1g2o751bxy91o.cloudfront.net/vlong.mp4" type="video/mp4" />
</video>
</div>
</div>
<p className=" mt-10 text-center leading-8 text-gray-500 font-medium">
Clack can now help you track your writing habits effortlessly!
</p>
</div>

<div className="relative max-w-[900px] overflow-hidden pt-16">

<h3 className=" mt-10 pt-14 text-3xl font-bold --local-ebgaramond">
Happy writing!
</h3>
<div className="mx-auto max-w-7xl pt-14 px-6 lg:px-8">
<div className=" mx-auto w-full max-w-5xl">
<video
width="100%"
id="video1"
style={{ borderRadius: "6px" }}
aria-hidden="true"
playsInline
autoPlay
muted
loop
>
<source src="https://d1g2o751bxy91o.cloudfront.net/add-doc.mp4" type="video/mp4" />
</video>
</div>
</div>
<p className=" mt-10 text-center leading-8 text-gray-500 font-medium">
Great! You can now paste the link of your Notion document in your dashboard.
</p>
</div>
<div className="mt-10 flex items-center justify-center gap-x-6">
<Link
className="rounded-md bg-black dark:bg-white px-3.5 py-2.5 text-sm font-semibold text-white dark:text-black shadow-sm hover:bg-gray-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-400"
Expand All @@ -76,6 +193,7 @@ export default function Home() {
</div>
</div>
</div>

{/* <div className=" mx-auto w-full max-w-5xl">
<video
width="100%"
Expand Down Expand Up @@ -112,23 +230,15 @@ export default function Home() {
</span>
<span className="ml-6 flex h-7 items-center">
{open ? (
<MinusSmallIcon
className="h-6 w-6"
aria-hidden="true"
/>
<MinusSmallIcon className="h-6 w-6" aria-hidden="true" />
) : (
<PlusSmallIcon
className="h-6 w-6"
aria-hidden="true"
/>
<PlusSmallIcon className="h-6 w-6" aria-hidden="true" />
)}
</span>
</Disclosure.Button>
</dt>
<Disclosure.Panel as="dd" className="mt-2 pr-12">
<p className="text-base leading-7 text-gray-500">
{faq.answer}
</p>
<p className="text-base leading-7 text-gray-500">{faq.answer}</p>
</Disclosure.Panel>
</>
)}
Expand Down
12 changes: 5 additions & 7 deletions src/app/(static)/tutorials/daysgrid.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,20 @@
import Image from "next/image";
import Link from "next/link";
import oneImg from "/public/showcase/cat.png";
import bg from "/public/showcase/bg.png";

const posts = [
{
id: 1,
title: "Adding a Notion page",
href: "/link-notion-page",
imageUrl: oneImg,
imageUrl: "https://d1g2o751bxy91o.cloudfront.net/n2.png",
description: "Learn how to connect the Clack integration on Notion and link pages in Clack.",
},
{
id: 2,
title: "Adding a Google doc",
href: "/link-google-doc",
imageUrl: bg,
description: "Learn how to connect the Clack integration on Notion and link pages in Clack.",
imageUrl: "https://d1g2o751bxy91o.cloudfront.net/gdoc.png",
description: "Learn how to set permissions and link a Google Doc in Clack.",
},
];

Expand All @@ -30,11 +28,11 @@ export default function DaysGrid() {
key={post.id}
className="relative isolate flex flex-col justify-end overflow-hidden rounded-2xl bg-gray-900 px-8 pb-8 pt-80 sm:pt-48 lg:pt-80"
>
<Image
<img
src={post.imageUrl}
alt=""
className="absolute inset-0 -z-10 h-full w-full object-cover"
fill

/>
<div className="absolute inset-0 -z-10 bg-gradient-to-t from-gray-900 via-gray-900/40" />
<div className="absolute inset-0 -z-10 rounded-2xl ring-1 ring-inset ring-gray-900/10" />
Expand Down

0 comments on commit 64e4165

Please sign in to comment.