Merge pull request #46 from linkwarden/dev

many refactoring and improvements to the design
linkwarden · May 26, 2024 · 1618937 · 1618937
2 parents a17b098 + f149628
commit 1618937
Show file tree

Hide file tree

Showing 11 changed files with 469 additions and 330 deletions.
diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -1,6 +1,6 @@
-import Image from "next/image";
 import Link from "next/link";
 import React from "react";
+import { ArrowSquareOut } from "@phosphor-icons/react";
 
 export default function Footer() {
   return (
@@ -9,41 +9,45 @@ export default function Footer() {
         <div>
           <div className="flex gap-20 md:gap-6">
             <div className="flex md:flex-row flex-col gap-6">
-              <Link href="/#features" className="duration-100 hover:opacity-50">
+              <Link href="/#features" className="duration-100 hover:opacity-80">
                 Features
               </Link>
-              <Link href="/#pricing" className="duration-100 hover:opacity-50">
+              <Link href="/#pricing" className="duration-100 hover:opacity-80">
                 Pricing
               </Link>
-              <Link href="/#faqs" className="duration-100 hover:opacity-50">
+              <Link href="/#faqs" className="duration-100 hover:opacity-80">
                 FAQs
               </Link>
               <Link
                 href="https://github.com/orgs/linkwarden/projects/1"
-                className="duration-100 hover:opacity-50"
+                className="duration-100 hover:opacity-80"
               >
                 Roadmap
               </Link>
             </div>
             <div className="flex md:flex-row flex-col gap-6">
               <Link
                 href="https://docs.linkwarden.app"
-                className="duration-100 hover:opacity-50"
+                target="_blank"
+                className="hover:opacity-80 duration-100 text-text flex items-center gap-1"
               >
                 Docs
-              </Link>{" "}
+                <ArrowSquareOut size={16} />
+              </Link>
               <Link
                 href="https://blog.linkwarden.app"
-                className="duration-100 hover:opacity-50"
+                target="_blank"
+                className="hover:opacity-80 duration-100 text-text flex items-center gap-1"
               >
                 Blog
+                <ArrowSquareOut size={16} />
               </Link>
-              <Link href="/tos" className="duration-100 hover:opacity-50">
+              <Link href="/tos" className="duration-100 hover:opacity-80">
                 Terms Of Service
               </Link>
               <Link
                 href="/privacy-policy"
-                className="duration-100 hover:opacity-50"
+                className="duration-100 hover:opacity-80"
               >
                 Privacy Policy
               </Link>
@@ -56,31 +60,31 @@ export default function Footer() {
             <Link
               href="https://discord.gg/CtuYV47nuJ"
               target="_blank"
-              className="text-lg h-8 w-8 duration-100 hover:opacity-50 flex items-center justify-center"
+              className="text-lg h-8 w-8 duration-100 hover:opacity-80 flex items-center justify-center"
             >
               <i className="fa-brands fa-discord"></i>
             </Link>
 
             <Link
               href="https://fosstodon.org/@linkwarden"
               target="_blank"
-              className="text-lg h-8 w-8 duration-100 hover:opacity-50 flex items-center justify-center"
+              className="text-lg h-8 w-8 duration-100 hover:opacity-80 flex items-center justify-center"
             >
               <i className="fa-brands fa-mastodon"></i>
             </Link>
 
             <Link
               href="https://twitter.com/LinkwardenHQ"
               target="_blank"
-              className="text-lg h-8 w-8 duration-100 hover:opacity-50 flex items-center justify-center"
+              className="text-lg h-8 w-8 duration-100 hover:opacity-80 flex items-center justify-center"
             >
               <i className="fa-brands fa-x-twitter"></i>
             </Link>
 
             <Link
               href="https://github.com/linkwarden"
               target="_blank"
-              className="text-lg h-8 w-8 duration-100 hover:opacity-50 flex items-center justify-center"
+              className="text-lg h-8 w-8 duration-100 hover:opacity-80 flex items-center justify-center"
             >
               <i className="fa-brands fa-github"></i>
             </Link>

diff --git a/components/Homepage/FAQs.tsx b/components/Homepage/FAQs.tsx
@@ -1,8 +1,15 @@
 import Link from "next/link";
 import QuestionAndAnswer from "../QuestionAndAnswer";
 import Seperator from "../Seperator";
+import { useState } from "react";
 
 function FAQs() {
+  const [openIndex, setOpenIndex] = useState(-1);
+
+  const handleToggle = (index: any) => {
+    setOpenIndex((prevIndex) => (prevIndex === index ? -1 : index));
+  };
+
   return (
     <div className="max-w-5xl px-5 mx-auto pt-20" id="faqs">
       <p className="text-3xl text-center mb-10 font-bold">
@@ -15,7 +22,11 @@ function FAQs() {
           boxShadow: "#ffffff10 0px 5px 20px 0px",
         }}
       >
-        <QuestionAndAnswer title="How can I try out the product?">
+        <QuestionAndAnswer
+          title="How can I try out the product?"
+          isOpen={openIndex === 0}
+          onToggle={() => handleToggle(0)}
+        >
           <p>
             You can try out Linkwarden Cloud for free by signing up for a 14-day
             trial. The reason we require a credit card is to prevent spam.
@@ -24,9 +35,13 @@ function FAQs() {
 
         <Seperator />
 
-        <QuestionAndAnswer title="Why use the paid plan when I can already self host it?">
+        <QuestionAndAnswer
+          title="What does the Cloud offering provide?"
+          isOpen={openIndex === 1}
+          onToggle={() => handleToggle(1)}
+        >
           <p>
-            The paid plan provides automatic updates, priority support, and
+            The Cloud plan provides automatic updates, priority support, and
             access to the latest features, saving you time and effort.
           </p>
           <p>
@@ -37,7 +52,11 @@ function FAQs() {
 
         <Seperator />
 
-        <QuestionAndAnswer title="How does the free trial work?">
+        <QuestionAndAnswer
+          title="How does the free trial work?"
+          isOpen={openIndex === 2}
+          onToggle={() => handleToggle(2)}
+        >
           <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
@@ -49,7 +68,11 @@ function FAQs() {
 
         <Seperator />
 
-        <QuestionAndAnswer title="How will I be billed?">
+        <QuestionAndAnswer
+          title="How will I be billed?"
+          isOpen={openIndex === 3}
+          onToggle={() => handleToggle(3)}
+        >
           <p>
             You will be billed every month. The payment is being handled by{" "}
             <Link
@@ -65,7 +88,11 @@ function FAQs() {
 
         <Seperator />
 
-        <QuestionAndAnswer title="Where's my data stored?">
+        <QuestionAndAnswer
+          title="Where's my data stored?"
+          isOpen={openIndex === 4}
+          onToggle={() => handleToggle(4)}
+        >
           <p>
             Our primary server is hosted in Hetzner&apos;s data center in
             Virginia, USA.
@@ -79,7 +106,11 @@ function FAQs() {
 
         <Seperator />
 
-        <QuestionAndAnswer title="Can I have a customized instance designed specifically for my needs?">
+        <QuestionAndAnswer
+          title="Can I have a customized instance designed specifically for my needs?"
+          isOpen={openIndex === 5}
+          onToggle={() => handleToggle(5)}
+        >
           <p>
             Absolutely! We offer a custom plan tailored to your specific
             requirements. Contact us at{" "}
@@ -96,7 +127,11 @@ function FAQs() {
 
         <Seperator />
 
-        <QuestionAndAnswer title="How can I cancel my plan?">
+        <QuestionAndAnswer
+          title="How can I cancel my plan?"
+          isOpen={openIndex === 6}
+          onToggle={() => handleToggle(6)}
+        >
           <p>To cancel your plan, follow these steps:</p>
           <ul>
             <li>Log in to your account.</li>

diff --git a/components/Homepage/GetStarted.tsx b/components/Homepage/GetStarted.tsx
@@ -1,7 +1,5 @@
 import React from "react";
 import SecondaryButton from "../SecondaryButton";
-import Link from "next/link";
-import Image from "next/image";
 import AccentButton from "../AccentButton";
 import { Star } from "@phosphor-icons/react";
 
@@ -16,18 +14,12 @@ export default function GetStarted() {
           <p className="font-semibold text-center mt-2">
             14-day free trial, cancel anytime.
           </p>
-          <div className="flex justify-center sm:gap-5 gap-2 mt-8">
+          <div className="flex justify-center sm:gap-5 gap-2 mt-5">
             <AccentButton
-              label="Start Free Trial"
-              href="https://cloud.linkwarden.app/register"
+              label="Get Started"
+              href="#pricing"
+              className="text-sm sm:text-base"
             />
-            <SecondaryButton path="https://github.com/linkwarden/linkwarden">
-              <Star
-                weight="fill"
-                className="text-2xl text-slate-300 duration-100 group-hover:text-yellow-500"
-              />
-              Star on GitHub!
-            </SecondaryButton>
           </div>
         </div>
       </div>

diff --git a/components/Homepage/Pricing.tsx b/components/Homepage/Pricing.tsx
@@ -86,7 +86,7 @@ function Pricing() {
               className="mx-auto"
               path="https://github.com/linkwarden/linkwarden"
             >
-              Get Started
+              Visit GitHub
             </SecondaryButton>
           </div>
 
@@ -149,7 +149,7 @@ function Pricing() {
                 14-day free trial, cancel anytime.
               </p>
               <AccentButton
-                label="Start Free Trial"
+                label="Get Started"
                 className="mx-auto"
                 href="https://cloud.linkwarden.app/register"
               />

diff --git a/components/Homepage/Showcase.tsx b/components/Homepage/Showcase.tsx
@@ -42,14 +42,11 @@ export default function Showcase() {
       </p>
 
       <div className="relative z-10 flex justify-center gap-2 sm:gap-5">
-        <AccentButton label="Start Free Trial" href="#pricing" />
-        <SecondaryButton path="https://github.com/linkwarden/linkwarden">
-          <Star
-            weight="fill"
-            className="text-2xl text-slate-300 duration-100 group-hover:text-yellow-500"
-          />
-          Star on GitHub!
-        </SecondaryButton>
+        <AccentButton
+          label="Start Free Trial"
+          href="#pricing"
+          className="text-sm sm:text-base"
+        />
       </div>
 
       <SVGShowcase
@@ -59,7 +56,7 @@ export default function Showcase() {
       <div
         className={
           imageLoaded
-            ? "pt-10 pl-2 pr-2 pb-2 max-w-7xl w-2/3 mx-auto min-w-[350px] mt-5 mb-20"
+            ? "pt-5 pl-2 pr-2 pb-2 max-w-7xl w-2/3 mx-auto min-w-[350px] mt-5 mb-20"
             : " opacity-0"
         }
       >