Skip to content

Commit

Permalink
redesigned the landing page
Browse files Browse the repository at this point in the history
  • Loading branch information
daniel31x13 committed Sep 23, 2023
1 parent 134e5a0 commit 2a452d5
Show file tree
Hide file tree
Showing 33 changed files with 708 additions and 554 deletions.
30 changes: 13 additions & 17 deletions components/Footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ import React from "react";

export default function Footer() {
return (
<div className="mt-10 bg-gradient-to-t from-slate-300 to-white">
<div className="px-5 pb-5 max-w-7xl mx-auto flex gap-5 sm:flex-row flex-col justify-between items-center">
<div className="mt-10">
<div className="px-5 pb-5 max-w-7xl mx-auto flex gap-2 sm:flex-row flex-col justify-between items-center">
<div className="w-fit">
<Image
src="/linkwarden.png"
Expand All @@ -15,56 +15,52 @@ export default function Footer() {
alt=""
/>

<div className="flex justify-center my-2 gap-7 w-fit">
<div className="flex justify-center my-2 gap-2 sm:w-fit">
<Link
href="https://discord.gg/CtuYV47nuJ"
target="_blank"
className="text-lg p-2 h-8 w-8 bg-sky-700 text-white rounded-full flex items-center justify-center"
className="text-lg h-8 w-8 duration-100 hover:text-slate-400 flex items-center justify-center"
>
<i className="fa-brands fa-discord"></i>
</Link>

<Link
href="https://fosstodon.org/@linkwarden"
target="_blank"
className="text-lg p-2 h-8 w-8 bg-sky-700 text-white rounded-full flex items-center justify-center"
className="text-lg h-8 w-8 duration-100 hover:text-slate-400 flex items-center justify-center"
>
<i className="fa-brands fa-mastodon"></i>
</Link>

<Link
href="https://twitter.com/linkwarden_app"
target="_blank"
className="text-lg p-2 h-8 w-8 bg-sky-700 text-white rounded-full flex items-center justify-center"
className="text-lg h-8 w-8 duration-100 hover:text-slate-400 flex items-center justify-center"
>
<i className="fa-brands fa-twitter"></i>
<i className="fa-brands fa-x-twitter"></i>
</Link>

<Link
href="https://github.com/linkwarden"
target="_blank"
className="text-lg p-2 h-8 w-8 bg-sky-700 text-white rounded-full flex items-center justify-center"
className="text-lg h-8 w-8 duration-100 hover:text-slate-400 flex items-center justify-center"
>
<i className="fa-brands fa-github"></i>
</Link>
</div>
</div>

<div>
<div className="flex items-center justify-between gap-7">
<Link href="/">Overview</Link>
<Link href="https://docs.linkwarden.app" target="_blank">
Docs
</Link>
<Link href="/pricing">Pricing</Link>
</div>
<p className="text-center sm:text-right">
<Link href="/tos" className="text-gray-500">
<Link href="#">Back to Top</Link>
</p>
<p className="text-center sm:text-right">
<Link href="/tos" className="text-gray-400">
Terms Of Service
</Link>
</p>
<p className="text-center sm:text-right">
<Link href="/privacy-policy" className="text-gray-500">
<Link href="/privacy-policy" className="text-gray-400">
Privacy Policy
</Link>
</p>
Expand Down
21 changes: 21 additions & 0 deletions components/GitHubButton.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import Link from "next/link";
import React from "react";

type Props = {
className?: string;
};

export default function PrimaryButton({ className }: Props) {
return (
<Link
href="https://github.com/linkwarden/linkwarden"
target="_blank"
className={`p-2 group w-fit hover:border-white hover:text-white text-slate-200 flex items-center gap-2 rounded-lg border border-slate-200 select-none hover:shadow-none duration-100 ${className}`}
>
<span className="material-symbols-rounded text-slate-300 duration-100 group-hover:text-yellow-500">
star
</span>
Star on GitHub!
</Link>
);
}
107 changes: 107 additions & 0 deletions components/Homepage/FAQs.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
import Link from "next/link";
import QuestionAndAnswer from "../QuestionAndAnswer";

function FAQs() {
return (
<div className="max-w-5xl px-5 mx-auto pt-20" id="faqs">
<p className="text-3xl text-center mb-10 font-bold">
Frequently Asked Questions
</p>

<div className="pr-5 bg-[#031928] rounded-2xl">
<QuestionAndAnswer title="Why use the paid plan when I can already self host it?">
<p>
The paid plan offers several advantages, such as hassle-free
maintenance, automatic updates, and priority support, saving you
time and effort. It also ensures that you have access to the latest
stable features and improvements. It's the most convenient way to
enjoy the full power of Linkwarden without the technical
complexities of self-hosting it.
</p>
<p>
Plus, your subscription helps us continue improving the app for
everyone.
</p>
</QuestionAndAnswer>

<hr className="ml-5 border border-[#d3d3d31d]" />

<QuestionAndAnswer title="How does the free trial work?">
<p>
Linkwarden Cloud&apos;s free trial will last for 14 days from the
purchase date. The trial gives you full access to all features in
that plan. At the end of the trial, you will be billed the regular
amount. You can cancel your trial at any time within the trial
period at no cost.
</p>
</QuestionAndAnswer>

<hr className="ml-5 border border-[#d3d3d31d]" />

<QuestionAndAnswer title="How will I be billed?">
<p>
You will be billed every month. The payment is being handled by{" "}
<Link
href="https://stripe.com/"
target="_blank"
className="font-bold underline"
>
Stripe
</Link>
, the payment infrastructure that millions of businesses rely on.
</p>
</QuestionAndAnswer>

<hr className="ml-5 border border-[#d3d3d31d]" />

<QuestionAndAnswer title="Can I have a customized instance designed specifically for my needs?">
<p>
Absolutely! We offer a custom plan tailored to your specific
requirements. Contact us at{" "}
<Link
className="font-bold underline"
href="mailto:[email protected]"
>
[email protected]
</Link>{" "}
to discuss your specific needs, and we'll create the perfect
solution just for you.
</p>
</QuestionAndAnswer>

<hr className="ml-5 border border-[#d3d3d31d]" />

<QuestionAndAnswer title="How can I cancel my plan?">
<p>
You can cancel your plan anytime either by contacting us at{" "}
<Link
className="font-bold underline"
href="mailto:[email protected]"
>
[email protected]
</Link>{" "}
about the inquiry, or by simply logging into your account and
clicking on your profile photo &gt; “Settings” &gt; “Billing Portal”
&gt; “Go to Billing Portal”, the billing portal is being handled by
Stripe, after logging in, from there you can see the “Cancel Plan”
option. After that, your account will be disabled in less than a
month.
</p>
</QuestionAndAnswer>
</div>

<p className="my-5 text-center text-sm text-gray-400">
For any other questions, feel free to reach out to us at{" "}
<Link
className="font-bold underline"
href="mailto:[email protected]"
>
[email protected]
</Link>
.
</p>
</div>
);
}

export default FAQs;
Loading

0 comments on commit 2a452d5

Please sign in to comment.