Fix width on Supporter Edition + add FAQ

src/components/ui/ItemGrid.astro

@@ -44,7 +44,7 @@ const {
               )}
             </div>
             <div class="mt-0.5">
-              {title && <h3 class={twMerge('text-xl font-bold', titleClass, itemClasses?.title)}>{title}</h3>}
+              {title && <h3 class={twMerge('text-xl font-bold', titleClass, itemClasses?.title)} set:html={title} />}
               {description && (
                 <p
                   class={twMerge(`${title ? 'mt-3' : ''} text-muted`, descriptionClass, itemClasses?.description)}

src/pages/get-supporter-edition.astro

@@ -0,0 +1,170 @@
+---
+import Layout from '~/layouts/PageLayout.astro';
+
+import Hero from '~/components/widgets/Hero.astro';
+// import CallToAction from '~/components/widgets/CallToAction.astro';
+import Prices from '~/components/widgets/Pricing.astro';
+import FAQs from '~/components/widgets/FAQs.astro';
+
+const metadata = {
+  title: 'Pre-Launch Landing Page',
+};
+---
+
+<Layout metadata={metadata}>
+  <!-- Hero2 Widget ******************* -->
+
+  <Hero
+    tagline="<span class='text-sky-600'>Coming Soon...</span>"
+    title='<span class="text-5xl"> Lychee <span class="text-sky-600">SE</span></span>'
+    subtitle="Unlock the full capabilities of <span class='font-bold text-black'>Lychee</span> with the <span class='text-sky-600 font-bold'>Supporter Edition</span>.<br>Get exclusive features and support the development of Lychee."
+  >
+  <Fragment slot="bg">
+
+  <div class="relative w-full flex justify-center pt-0 md:pt-[76px]">
+    <div class="shape-divider-bottom  hidden lg:block">
+        <div class="h-4 sm:h-16 md:h-52 w-full bg-mix"/>
+        <svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 200" preserveAspectRatio="none" class="bg-bgDark2">
+          <path d="M 0 50 C 150 150 300 0 500 80 L 500 0 L 0 0" class="shape-fill bg-white fill-sky-400" 
+            fill="rgb(57, 27, 112)"></path>
+          <path d="M 0 50 C 150 150 330 -30 500 50 L 500 0 L 0 0" class="fill-sky-100" opacity="0.8"></path>
+         <path d="M 0 50 C 215 150 250 0 500 100 L 500 0 L 0 0" class="fill-sky-50" opacity="0.5"></path>
+        </svg>
+    </div>
+  </div>
+  </Fragment>
+  </Hero>
+  <!-- Pricing Widget ******************* -->
+
+  <Prices
+    classes={{container: 'pt-0 md:pt-0 lg:pt-0'}}
+    prices={[
+      {
+        title: 'Free',
+        subtitle: 'Optimal choice for personal use.',
+        price: 'Free',
+        period: 'per month',
+        items: [
+          {
+            description: 'Unlimited albums.',
+          },
+          {
+            description: 'Unlimited users.',
+          },
+          {
+            description: 'Unlimited photos upload.',
+          },
+          {
+            description: '',
+          },
+        ],
+        callToAction: {
+          target: '_blank',
+          text: 'Get started',
+          href: 'https://github.com/LycheeOrg/Lychee',
+        },
+      },
+      {
+        title: '<span class="text-sky-600 font-bold">Supporter Edition</span>',
+        subtitle: 'Optimal choice if you would like to support the development of Lychee.',
+        price: 5,
+        period: 'Per Month',
+        items: [
+        {
+            description: 'Unlimited albums.',
+          },
+          {
+            description: 'Unlimited users.',
+          },
+          {
+            description: 'Unlimited photos upload.',
+          },
+          {
+            description: 'more to come...',
+            icon: 'tabler:question-mark',
+            classes: {
+              icon_bg: 'bg-neutral-400',
+              icon: 'text-white',
+              description: 'text-neutral-400',
+            },
+          },
+        ],
+        callToAction: {
+          target: '_blank',
+          text: 'Get started',
+          href: '#',
+        },
+        hasRibbon: true,
+        ribbonTitle: 'popular',
+      }
+    ]}
+  />
+
+  <FAQs
+  title="FAQs"
+  subtitle="With the new <span class='font-bold'>Lychee <span class='text-sky-600'>SE</span></span> coming soon, we understand that you must have some questions. We try to answer some of them here."
+  columns={1}
+  items={[
+    {
+      title: 'What is the difference between the Free and Supporter Edition?',
+      description:
+        'The <span class="font-bold">Free</span> Edition is a great choice for personal use, offering unlimited albums, users, and photo uploads.<br/> \
+        <span class="font-bold">Lychee</span> <span class="text-sky-600 font-bold">SE</span> includes all the features of the Free Edition, plus some exclusive features as a thank for supporting the development of Lychee.',
+    },
+    {
+      title: 'I am running an old version of Lychee and I want to upgrade to version 6.<br>Will I be losing features if I do not use the Supporter Edition?',
+      description:
+        'No. The version 6 of Lychee is pretty much the same as version 5 but with a different front-end. It is faster, more fluid, more reactive, and less buggy. \
+        The Free version 6 has not been crippled to incentivise you to upgrade to <span class="font-bold">Lychee</span> <span class="text-sky-600 font-bold">SE</span>. We are not in that kind of mindset. We want you to use Lychee, and we want you to be happy with it.',
+    },
+    {
+      title: 'Is there a trial period for the Supporter Edition?',
+      description:
+        "Unfortunately, we do not offer trial periods nor refunds. For this reason we recommend you to try the Free Edition first to see if Lychee fits your needs as it already comes packed with a lot of features.",
+    },
+    {
+      title: 'How do I register my Supporter Edition?',
+      description:
+        "Once you support us, you will get a personal license key that you can use in your Lychee instance to unlock the exclusive features.",
+    },
+    {
+      title: 'Is there a limit on the number of Lychee instances I can use my license key on?',
+      description:
+        "No. You can use your personal license key on as any instances of Lychee that you run.",
+    },
+    {
+      title: 'I want to contribute to Lychee, where does my code fall between the Free and the Supporter Edition?',
+      description:
+        "That is a good question, and it really boils down to what you are adding/modifying. Our general rule of thumb is that:\
+        <ul class='list-disc list-inside text-muted'>\
+        <li class='mt-3 sm:mt-1.5'>if you are <span class='font-bold'>adding a new feature</span> to Lychee that is not already part of the core, \
+        we will include it in the <span class='font-bold'>Free Edition</span>.</li>\
+        <li class='mt-3 sm:mt-0'>If you are <span class='font-bold'>improving a feature</span> that is part of the <span class='font-bold'>Free Edition</span>, that improvement will be included in the <span class='font-bold'>Free Edition</span>.</li>\
+        <li class='mt-3 sm:mt-0'>If you are <span class='font-bold'>improving a feature</span> that is part of <span class='font-bold'>Lychee</span> <span class='text-sky-600 font-bold'>SE</span>, that feature will have to stay in <span class='font-bold'>Lychee</span> <span class='text-sky-600 font-bold'>SE</span>.</li>\
+        </ul>\
+        <p class='text-muted mt-3 sm:mt-1.5'>It is as simple as that and any other way would not be fair to our users.</p>"
+    },
+    {
+      title: 'Is there a different code license between the Free and the Supporter Edition?',
+      description:
+        "No. The license is the same for both editions: the <a href='/license' class='text-default hover:text-sky-600'>MIT license</a>.\
+        Lychee remain fully Open Source. And as crazy at it sounds, the code of the Supporter Edition is fully available on GitHub.",
+    }
+    // {
+    //   title: 'Do the plans come with customer support?',
+    //   description:
+    //     'Absolutely, all plans include access to our dedicated customer support to assist you with any queries or concerns.',
+    // },
+    // {
+    //   title: 'Can I switch between plans?',
+    //   description:
+    //     'Certainly! You can easily upgrade or downgrade your plan, at any time, to find the one that best suits your evolving requirements.',
+    // },
+    // {
+    //   title: 'What payment methods do you accept?',
+    //   description:
+    //     'We accept major credit cards and online payment methods to ensure a convenient and secure transaction process.',
+    // },
+  ]}
+/>
+</Layout>

src/pages/index.astro

@@ -231,10 +231,10 @@ const metadata = {
 
   <Stats
     stats={[
-      { title: 'Downloads', amount: '24K' },
-      { title: 'Stars', amount: '3.2K' },
-      { title: 'Forks', amount: '291' },
-      { title: 'Docker pulls', amount: '3.3M' },
+      { title: 'Downloads', amount: '25K' },
+      { title: 'Stars', amount: '3.3K' },
+      { title: 'Forks', amount: '297' },
+      { title: 'Docker pulls', amount: '3.4M' },
     ]}
   />