306 lines
13 KiB
TypeScript
306 lines
13 KiB
TypeScript
"use client";
|
||
|
||
import NewPostButton from "@/ui/new-post-button";
|
||
import Image from "next/image";
|
||
import Link from "next/link";
|
||
import { Session } from "next-auth";
|
||
import { TypeAnimation } from "react-type-animation";
|
||
import Checked from "@/ui/shared/icons/checked";
|
||
import { Account_Plans } from "@/lib/consts";
|
||
import { CardItem } from "./card";
|
||
import { motion } from "framer-motion";
|
||
|
||
export function Welcome() {
|
||
return (
|
||
<div className="grids mt-3 flex w-full max-w-6xl flex-col items-center justify-center py-6">
|
||
<p className="title-font animate-fade-up font-display text-center text-3xl font-bold tracking-[-0.02em] text-slate-700 drop-shadow-sm md:text-5xl">
|
||
<span className="bg-gradient-to-r from-slate-400 via-slate-500 to-slate-800 bg-clip-text text-transparent ">
|
||
Lightweight
|
||
</span>{" "}
|
||
. <br className="block sm:hidden" />
|
||
AI Powered . <br className="block sm:hidden" />
|
||
<span className="bg-gradient-to-r from-slate-800 via-slate-500 to-slate-400 bg-clip-text text-transparent ">
|
||
Markdown
|
||
</span>
|
||
</p>
|
||
|
||
<p className="mx-auto mb-6 mt-3 w-[270px] text-center font-mono text-lg font-semibold text-slate-600 md:mt-5 md:w-full">
|
||
<TypeAnimation
|
||
className="w-[320px]"
|
||
sequence={[
|
||
"AI notebook, empowering writing.",
|
||
1000,
|
||
"AI notebook, empowering editing.",
|
||
1000,
|
||
"AI notebook, empowering translation.",
|
||
1000,
|
||
"AI notebook, empowering collaboration.",
|
||
1000,
|
||
"AI notebook, empowering anything.",
|
||
3000,
|
||
]}
|
||
preRenderFirstString={true}
|
||
speed={50}
|
||
repeat={5}
|
||
/>
|
||
</p>
|
||
|
||
<NewPostButton
|
||
className="h-10 w-36 py-2 font-medium shadow-md md:h-12 md:w-44 md:px-3 md:text-lg"
|
||
text="Start writing now"
|
||
/>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export function Landing({ session }: { session: Session | null }) {
|
||
return (
|
||
<>
|
||
<div className="mt-12 w-full max-w-6xl px-6">
|
||
<div className="flex flex-col items-center justify-around gap-10 md:flex-row">
|
||
<Image
|
||
className="rounded-lg shadow-lg transition-all hover:opacity-90 hover:shadow-xl"
|
||
alt={"example"}
|
||
src="/desktop.png"
|
||
placeholder="blur"
|
||
blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAGCAYAAAD68A/GAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxMAAAsTAQCanBgAAACCSURBVBhXZYzBCgIxDEQnTdPau+hveBB/XtiLn+NJQdoNS2Orq6zuO0zgZRhSVbvegeAJGx7hvUeMAUSEzu1RUesEKuNkIgyrFaoFzB4i8i1+cDEwXHOuRc65lbVpe38XuPm+YMdIKa3WOj9F60vWcj0IOg8Xy7ngdDxgv9vO+h/gCZNAKuSRdQ2rAAAAAElFTkSuQmCC"
|
||
width={430}
|
||
height={280}
|
||
/>
|
||
<div className="grids px-2 py-4">
|
||
<h3 className="mb-6 text-xl font-bold md:text-3xl">
|
||
Rich editing components
|
||
</h3>
|
||
<p className="text-lg">
|
||
📖 Integrate rich text, Markdown, and final render with JSON.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="my-14 flex flex-col items-center justify-around gap-10 md:flex-row-reverse">
|
||
<Image
|
||
className="rounded-lg shadow-lg transition-all hover:opacity-90 hover:shadow-xl"
|
||
alt={"example"}
|
||
src="/e1.png"
|
||
placeholder="blur"
|
||
blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAGCAYAAAD68A/GAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxMAAAsTAQCanBgAAACCSURBVBhXZYzBCgIxDEQnTdPau+hveBB/XtiLn+NJQdoNS2Orq6zuO0zgZRhSVbvegeAJGx7hvUeMAUSEzu1RUesEKuNkIgyrFaoFzB4i8i1+cDEwXHOuRc65lbVpe38XuPm+YMdIKa3WOj9F60vWcj0IOg8Xy7ngdDxgv9vO+h/gCZNAKuSRdQ2rAAAAAElFTkSuQmCC"
|
||
width={450}
|
||
height={280}
|
||
/>
|
||
<div className="grids px-2 py-4">
|
||
<h3 className="mb-6 text-xl font-bold md:text-3xl">
|
||
AI empowering writing
|
||
</h3>
|
||
<p className="text-lg">
|
||
🎉 Continue writing, editing, translation, chat with AI, all in
|
||
one.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="my-14 flex flex-col items-center justify-around gap-10 md:flex-row">
|
||
<Image
|
||
className="rounded-lg shadow-lg transition-all hover:opacity-90 hover:shadow-xl"
|
||
alt={"example"}
|
||
src="/e2.png"
|
||
placeholder="blur"
|
||
blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAGCAYAAAD68A/GAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxMAAAsTAQCanBgAAACCSURBVBhXZYzBCgIxDEQnTdPau+hveBB/XtiLn+NJQdoNS2Orq6zuO0zgZRhSVbvegeAJGx7hvUeMAUSEzu1RUesEKuNkIgyrFaoFzB4i8i1+cDEwXHOuRc65lbVpe38XuPm+YMdIKa3WOj9F60vWcj0IOg8Xy7ngdDxgv9vO+h/gCZNAKuSRdQ2rAAAAAElFTkSuQmCC"
|
||
width={430}
|
||
height={280}
|
||
/>
|
||
<div className="grids px-2 py-4">
|
||
<h3 className="mb-6 text-xl font-bold md:text-3xl">
|
||
Online Collaboration
|
||
</h3>
|
||
<p className="text-lg">
|
||
👨👩👦 One click to start real-time online collaboration among
|
||
multiple people.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex flex-col items-center justify-around gap-10 md:flex-row-reverse">
|
||
<Image
|
||
className="rounded-lg shadow-lg transition-all hover:opacity-90 hover:shadow-xl"
|
||
alt={"example"}
|
||
src="/e3.png"
|
||
placeholder="blur"
|
||
blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAGCAYAAAD68A/GAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxMAAAsTAQCanBgAAACCSURBVBhXZYzBCgIxDEQnTdPau+hveBB/XtiLn+NJQdoNS2Orq6zuO0zgZRhSVbvegeAJGx7hvUeMAUSEzu1RUesEKuNkIgyrFaoFzB4i8i1+cDEwXHOuRc65lbVpe38XuPm+YMdIKa3WOj9F60vWcj0IOg8Xy7ngdDxgv9vO+h/gCZNAKuSRdQ2rAAAAAElFTkSuQmCC"
|
||
width={460}
|
||
height={280}
|
||
/>
|
||
<div className="grids px-2 py-4">
|
||
<h3 className="mb-6 text-xl font-bold md:text-3xl">
|
||
Export & Theme
|
||
</h3>
|
||
<p className="text-lg">
|
||
🍥 One click simple export of PDF, images, Markdown, Json files
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<h1 className="my-12 text-center text-3xl font-bold">PLAN</h1>
|
||
|
||
<div className="grid grid-cols-1 gap-6 md:grid-cols-3">
|
||
<div
|
||
className={
|
||
"dark:bg-zinc-850 relative flex flex-col justify-between rounded-lg border border-gray-300 bg-white p-6 shadow-lg"
|
||
}
|
||
>
|
||
<div>
|
||
<h3 className="text-center text-2xl font-bold">Free</h3>
|
||
<div className="mt-4 text-center text-zinc-600 dark:text-zinc-400">
|
||
<span className="text-4xl font-bold">
|
||
${Account_Plans[0].pay}
|
||
</span>
|
||
</div>
|
||
<ul className="mt-4 space-y-2 text-sm">
|
||
<li className="flex items-center">
|
||
<Checked />
|
||
Unlimited number of local notes
|
||
</li>
|
||
<li className="flex items-center">
|
||
<Checked />
|
||
{Account_Plans[0].note_upload_count} notes upload to Cloud
|
||
</li>
|
||
<li className="flex items-center">
|
||
<Checked />
|
||
AI generates {Account_Plans[0].ai_generate_day} times per day
|
||
</li>
|
||
<li className="flex items-center">
|
||
<Checked />
|
||
AI generates up to {Account_Plans[0].ai_generate_chars}{" "}
|
||
characters per time
|
||
</li>
|
||
<li className="flex items-center">
|
||
<Checked />
|
||
Less than {Account_Plans[0].image_upload_size}MB for upload
|
||
image per time
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div className="mt-6">
|
||
<button className="w-full rounded-lg bg-black px-3 py-2 font-semibold text-slate-100 shadow-md">
|
||
Sign in for free
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
className={
|
||
"dark:bg-zinc-850 relative flex flex-col justify-between rounded-lg border-2 border-purple-500 bg-white p-6 shadow-lg"
|
||
}
|
||
>
|
||
<div className="absolute left-1/2 top-0 inline-block -translate-x-1/2 -translate-y-1/2 transform rounded-full bg-gradient-to-r from-pink-500 to-purple-500 px-4 py-1 text-sm text-slate-100">
|
||
Beta for free
|
||
</div>
|
||
<div>
|
||
<h3 className="text-center text-2xl font-bold">Basic</h3>
|
||
<div className="mt-4 text-center text-zinc-600 dark:text-zinc-400">
|
||
<p className="text-4xl font-bold">${Account_Plans[1].pay}</p>
|
||
</div>
|
||
<ul className="mt-4 space-y-2 text-sm">
|
||
<li className="flex items-center">
|
||
<Checked />
|
||
Unlimited number of local notes
|
||
</li>
|
||
<li className="flex items-center">
|
||
<Checked />
|
||
Unlimited number of Cloud notes
|
||
</li>
|
||
<li className="flex items-center">
|
||
<Checked />
|
||
AI generates {Account_Plans[1].ai_generate_day} times per day
|
||
</li>
|
||
<li className="flex items-center">
|
||
<Checked />
|
||
AI generates up to {Account_Plans[1].ai_generate_chars}{" "}
|
||
characters per time
|
||
</li>
|
||
<li className="flex items-center">
|
||
<Checked />
|
||
Less than {Account_Plans[1].image_upload_size}MB for upload
|
||
image per time
|
||
</li>
|
||
<li className="flex items-center">
|
||
<Checked />
|
||
All subsequent features will be used for free
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div className="mt-6">
|
||
<Link href={"/pricing"}>
|
||
<button className="w-full rounded-lg bg-gradient-to-r from-pink-500 to-purple-500 px-3 py-2 font-semibold text-slate-100 shadow-md">
|
||
Apply for free
|
||
</button>
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
className={
|
||
"dark:bg-zinc-850 relative flex flex-col justify-between rounded-lg border border-gray-300 bg-white p-6 shadow-lg"
|
||
}
|
||
>
|
||
<div>
|
||
<h3 className="text-center text-2xl font-bold">Pro</h3>
|
||
<div className="mt-4 text-center text-zinc-600 dark:text-zinc-400">
|
||
<p className="text-4xl font-bold">${Account_Plans[2].pay}</p>
|
||
</div>
|
||
<ul className="mt-4 space-y-2 text-sm">
|
||
<li className="flex items-center">
|
||
<Checked />
|
||
Unlimited number of local notes
|
||
</li>
|
||
<li className="flex items-center">
|
||
<Checked />
|
||
Unlimited number of Cloud notes
|
||
</li>
|
||
<li className="flex items-center">
|
||
<Checked />
|
||
AI generates {Account_Plans[2].ai_generate_day} times per day
|
||
</li>
|
||
<li className="flex items-center">
|
||
<Checked />
|
||
AI generates up to {Account_Plans[2].ai_generate_chars}{" "}
|
||
characters per time
|
||
</li>
|
||
<li className="flex items-center">
|
||
<Checked />
|
||
Less than {Account_Plans[2].image_upload_size}MB for upload
|
||
image per time
|
||
</li>
|
||
<li className="flex items-center">
|
||
<Checked />
|
||
All subsequent features will be used for free
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div className="mt-6">
|
||
<button className="w-full rounded-lg bg-black px-3 py-2 font-semibold text-slate-100 shadow-md">
|
||
Coming soon
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grids mt-10 flex w-full max-w-6xl items-center justify-center gap-8 pb-6 pt-6 md:gap-14 md:pb-10 md:pt-10">
|
||
<CardItem
|
||
bgColor="bg-cyan-400"
|
||
rotate="rotate-12 origin-top-left"
|
||
icon={"✏️"}
|
||
/>
|
||
<CardItem bgColor="bg-orange-400" rotate="rotate-45" icon="👻" />
|
||
<CardItem rotate="rotate-12 origin-top-left" icon={"💯"} />
|
||
<CardItem bgColor="bg-pink-400" rotate="-rotate-12" icon="🎓" />
|
||
</div>
|
||
|
||
<NewPostButton
|
||
className="my-10 h-10 w-36 py-2 font-medium shadow-md md:h-12 md:w-44 md:px-3 md:text-lg"
|
||
text="Start writing now"
|
||
/>
|
||
</>
|
||
);
|
||
}
|