finalized the new design

linkwarden · Sep 26, 2023 · bc0b984 · bc0b984
1 parent 2a452d5
commit bc0b984
Show file tree

Hide file tree

Showing 10 changed files with 47 additions and 45 deletions.
diff --git a/components/Homepage/FAQs.tsx b/components/Homepage/FAQs.tsx
@@ -81,8 +81,8 @@ function FAQs() {
               [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
+            clicking on your profile photo &gt; “Settings” &gt; “Billing” &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.

diff --git a/components/Homepage/Features.tsx b/components/Homepage/Features.tsx
@@ -224,7 +224,7 @@ export default function Features() {
               </p>
             </ShortendFeatures>
           </div>
-          <Title text="And many more features..." />
+          <Title className="rounded-lg" text="And many more features..." />
         </div>
       </div>
     </>

diff --git a/components/Homepage/GetStarted.tsx b/components/Homepage/GetStarted.tsx
@@ -6,28 +6,30 @@ import Image from "next/image";
 
 export default function GetStarted() {
   return (
-    <div className="relative flex items-center sm:p-10 p-5 my-20">
-      <div className="w-full relative z-10 sm:p-5 max-w-7xl mx-auto rounded-3xl">
-        <p className="lg:text-3xl text-2xl font-bold relative z-10">
-          Start managing your useful contents across the web right away!
-        </p>
-        <p className="font-semibold">14-day free trial, cancel anytime.</p>
-        <div className="flex items-center gap-5 mt-5">
-          <PrimaryButton
-            text="Start Free Trial"
-            path="https://cloud.linkwarden.app/register"
-          />
-          <GitHubButton />
+    <div className="relative">
+      <div className="flex items-center justify-between gap-5 sm:p-10 p-5 my-20 mx-auto w-fit max-w-7xl">
+        <div className="w-full relative z-10 sm:p-5 max-w-7xl mx-auto rounded-3xl">
+          <p className="lg:text-3xl text-2xl font-bold relative z-10">
+            Start managing your useful contents across the web right away!
+          </p>
+          <p className="font-semibold">14-day free trial, cancel anytime.</p>
+          <div className="flex items-center gap-5 mt-5">
+            <PrimaryButton
+              text="Start Free Trial"
+              path="https://cloud.linkwarden.app/register"
+            />
+            <GitHubButton />
+          </div>
         </div>
-      </div>
 
-      <Image
-        src="./icon.png"
-        width={441}
-        height={441}
-        alt=""
-        className="w-40 min-[700px]:w-60 hidden min-[650px]:block rounded-2xl relative z-10"
-      />
+        <Image
+          src="./icon.png"
+          width={441}
+          height={441}
+          alt=""
+          className="w-40 min-[700px]:w-60 hidden min-[650px]:block rounded-2xl relative z-10"
+        />
+      </div>
 
       <div
         style={{

diff --git a/components/Homepage/Pricing.tsx b/components/Homepage/Pricing.tsx
@@ -11,15 +11,15 @@ function Pricing() {
   const [plan, setPlan] = useState<Plan>(0);
 
   return (
-    <div className="max-w-5xl px-5 mx-auto pt-20" id="pricing">
+    <div className="max-w-5xl px-5 mx-auto pt-16" id="pricing">
       <p className="lg:text-4xl text-3xl font-bold text-center">
         Simple, Straightforward Plans & Pricing
       </p>
 
-      <div className="flex text-white dark:text-black gap-3 border-2 border-solid border-[#d3d3d31d] w-72 mx-auto p-1 rounded-xl relative mt-10 mb-5">
+      <div className="flex gap-3 border-2 border-solid border-[#d3d3d31d] w-72 mx-auto p-1 rounded-xl relative mt-10 mb-5">
         <button
           onClick={() => setPlan(Plan.monthly)}
-          className={`w-full text-black dark:text-white duration-75 text-sm rounded-lg p-1 ${
+          className={`w-full duration-75 text-sm rounded-lg p-1 ${
             plan === Plan.monthly
               ? "text-white bg-sky-700 dark:bg-sky-700"
               : "hover:opacity-80"
@@ -30,7 +30,7 @@ function Pricing() {
 
         <button
           onClick={() => setPlan(Plan.yearly)}
-          className={`w-full text-black dark:text-white duration-75 text-sm rounded-lg p-1 ${
+          className={`w-full duration-75 text-sm rounded-lg p-1 ${
             plan === Plan.yearly
               ? "text-white bg-sky-700 dark:bg-sky-700"
               : "hover:opacity-80"

diff --git a/components/Homepage/UseCases.tsx b/components/Homepage/UseCases.tsx
@@ -4,7 +4,7 @@ import Image from "next/image";
 
 export default function UseCases() {
   return (
-    <div>
+    <div className="min-h-[40rem]">
       <div className="p-5 max-w-7xl mx-auto">
         <p className="lg:text-4xl text-3xl font-bold mb-10 text-center">
           Exploring the Use Cases
@@ -49,9 +49,9 @@ export default function UseCases() {
             </Tab>
           </Tab.List>
           <Tab.Panels>
-            <Tab.Panel className="flex gap-5 lg:flex-row flex-col-reverse justify-between items-start">
+            <Tab.Panel className="flex lg:flex-row flex-col-reverse justify-between items-start">
               <div className="w-full">
-                <p>
+                <p className="lg:mt-10">
                   Linkwarden can be a valuable tool for personal use, helping
                   individuals stay organized and efficient while browsing the
                   internet. Users can collect and store links to their favorite
@@ -66,15 +66,15 @@ export default function UseCases() {
               </div>
               <Image
                 src="./app/personal.png"
-                width={1960}
-                height={962}
+                width={14 - 7}
+                height={947}
                 alt=""
                 className="lg:max-w-2xl lg:w-full md:w-3/4 mx-auto rounded-2xl relative z-10"
               />
             </Tab.Panel>
-            <Tab.Panel className="flex gap-5 lg:flex-row flex-col-reverse justify-between items-start">
+            <Tab.Panel className="flex lg:flex-row flex-col-reverse justify-between items-start">
               <div className="w-full">
-                <p>
+                <p className="lg:mt-10">
                   Linkwarden can enhance the learning experience for students
                   and educators alike. Students can bookmark relevant articles,
                   educational videos, and online resources for their coursework
@@ -88,15 +88,15 @@ export default function UseCases() {
               </div>
               <Image
                 src="./app/study.png"
-                width={1960}
-                height={962}
+                width={14 - 7}
+                height={947}
                 alt=""
                 className="lg:max-w-2xl lg:w-full md:w-3/4 mx-auto rounded-2xl relative z-10"
               />
             </Tab.Panel>
-            <Tab.Panel className="flex gap-5 lg:flex-row flex-col-reverse justify-between items-start">
+            <Tab.Panel className="flex lg:flex-row flex-col-reverse justify-between items-start">
               <div className="w-full">
-                <p>
+                <p className="lg:mt-10">
                   For researchers, scholars, and anyone in need of extensive
                   information gathering, Linkwarden serves as an invaluable
                   tool. Researchers can use Linkwarden to collect and organize
@@ -111,15 +111,15 @@ export default function UseCases() {
               </div>
               <Image
                 src="./app/research.png"
-                width={1960}
-                height={962}
+                width={14 - 7}
+                height={947}
                 alt=""
                 className="lg:max-w-2xl lg:w-full md:w-3/4 mx-auto rounded-2xl relative z-10"
               />
             </Tab.Panel>
-            <Tab.Panel className="flex gap-5 lg:flex-row flex-col-reverse justify-between items-start">
+            <Tab.Panel className="flex lg:flex-row flex-col-reverse justify-between items-start">
               <div className="w-full">
-                <p>
+                <p className="lg:mt-10">
                   For collaborative projects involving multiple team members,
                   Linkwarden streamlines information sharing and collaboration.
                   Team members can collectively gather and organize web links
@@ -129,8 +129,8 @@ export default function UseCases() {
               </div>
               <Image
                 src="./app/project.png"
-                width={1960}
-                height={962}
+                width={14 - 7}
+                height={947}
                 alt=""
                 className="lg:max-w-2xl lg:w-full md:w-3/4 mx-auto rounded-2xl relative z-10"
               />

diff --git a/next.config.js b/next.config.js
@@ -2,7 +2,7 @@
 const nextConfig = {
   reactStrictMode: true,
   output: "export",
-  basePath: "",
+  basePath: "/website",
   images: {
     unoptimized: true,
   },

diff --git a/public/app/personal.png b/public/app/personal.png
diff --git a/public/app/project.png b/public/app/project.png
diff --git a/public/app/research.png b/public/app/research.png
diff --git a/public/app/study.png b/public/app/study.png