support.astro

---
// import Features2 from '~/components/widgets/Features2.astro';
// import Features3 from '~/components/widgets/Features3.astro';
// import Features from '~/components/widgets/Features.astro';
import Headline from '~/components/blog/Headline.astro';
import Button from '~/components/ui/Button.astro';
import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
import CallToAction2 from '~/components/widgets/CallToAction.astro';
import Features from '~/components/widgets/Features.astro';
import Features2 from '~/components/widgets/Features2.astro';
import Features3 from '~/components/widgets/Features3.astro';
import Features5 from '~/components/widgets/Features5.astro';
import Hero from '~/components/widgets/Hero.astro';
import Stats from '~/components/widgets/Stats.astro';
// import Steps2 from '~/components/widgets/Steps2.astro';
import Layout from '~/layouts/PageLayout.astro';

const metadata = {
  title: 'Supporting Lychee',
};
---

<Layout metadata={metadata}>
  <!-- Hero Widget ******************* -->

  <Hero
    image={{
      src: 'https://images.unsplash.com/photo-1521737852567-6949f3f9f2b5?q=80&w=3494&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
      alt: 'Caos Image',
    }}
  >
    <Fragment slot="title"> About Us. </Fragment>

    <Fragment slot="subtitle">
      We aim to maintain a free open-source photography library with high quality of code.<br />
      Being in control of our own data, our own pictures is something that we value above all.
    </Fragment>
  </Hero>

  <!-- Stats Widget ****************** -->

  <Stats
    title="Statistics."
    stats={[
      { title: 'Started', amount: '2018' },
      { title: 'Devs', amount: '4' },
      { title: 'Lines of Code', amount: '84K' },
    ]}
  />

<!-- June 7th 2025
Using https://github.com/boyter/scc
$/> scc app resources lang database 
───────────────────────────────────────────────────────────────────────────────
Language                 Files     Lines   Blanks  Comments     Code Complexity
───────────────────────────────────────────────────────────────────────────────
PHP                       1510     95552     9999     26593    58960       1789
Vue                        153     15782     1279       357    14146        608
TypeScript                  66      9936      683       452     8801        875
Blade template              24      1263      103        20     1140         68
JSON                        21        21        0         0       21          0
TypeScript Typings           4       778        2         0      776        295
CSS                          3       618       90        38      490          0
SVG                          1        15        0         0       15          0
───────────────────────────────────────────────────────────────────────────────
Total                     1782    123965    12156     27460    84349       3635
───────────────────────────────────────────────────────────────────────────────
Estimated Cost to Develop (organic) $2,844,325
Estimated Schedule Effort (organic) 20.46 months
Estimated People Required (organic) 12.35
───────────────────────────────────────────────────────────────────────────────
Processed 4742265 bytes, 4.742 megabytes (SI)
───────────────────────────────────────────────────────────────────────────────
-->

<!-- Features3 Widget ************** -->

  <Features5
    title="Meet the team"
    columns={2}
    items={[
      {
        title: 'ildyria (Benoît Viguier)',
        image: {
          src: 'https://avatars.githubusercontent.com/u/627094?s=400&v=4',
          alt: 'ildyria',
        },
        description: 'Main dev.',
      },
      {
        title: 'd7415 (Martin Stone)',
        image: {
          src: 'https://avatars.githubusercontent.com/u/1611702?v=4',
          alt: 'd7415',
        },
        description: 'Main reviewer.',
      },
      {
        title: 'JasonMillward (Jason)',
        image: {
          src: 'https://avatars.githubusercontent.com/u/1149781?v=4',
          alt: 'JasonMillward',
        },
        description: 'reviewer.',
      },
      {
        title: 'cdzombak (Chris Dzombak)',
        image: {
          src: 'https://avatars.githubusercontent.com/u/102904?v=4',
          alt: 'cdzombak',
        },
        description: 'dev.',
      },
      {
        title: 'tkulev (Tihomil Kulev)',
        image: {
          src: 'https://avatars.githubusercontent.com/u/149415?v=4',
          alt: 'tkulev',
        },
        description: 'dev.',
      },
      // {
      //   title: 'RonnieTaz (Vicent Simon)',
      //   image: {
      //     src: 'https://avatars.githubusercontent.com/u/67832502?v=4',
      //     alt: 'RonnieTaz',
      //   },
      //   description: 'reviewer.',
      // },
    ]}
  />

  <Features3
    title="Our values"
    subtitle="LycheeOrg is not just producing a photo gallery,<br>it is also about adopting a culture of excelence."
    columns={3}
    items={[
      {
        title: 'High quality software',
        icon: 'tabler:code',
        description:
          'We pride ourselves into applying best practices in software development. This includes testing, static analysis, proper design pattern & architecture.',
      },
      {
        title: 'Open',
        icon: 'tabler:git-pull-request',
        description:
          'To encourage active collaboration, Lychee strongly encourages pull requests, not just bug reports. We are also open to suggestions and new ideas for future improvements.',
      },
      {
        title: 'Ethical Practices',
        icon: 'tabler:shield-check',
        description:
          'Lychee is all about statying in control of your data. The gallery comes out of the box without any analytics or other tracking mechanism. Your privacy is one of our priority.',
      },
    ]}
  />

  <!-- <CallToAction2
    title="Support us!"
    subtitle="If you are using Lychee, a small token of gratitude will go a long way. You can support further development of Lychee on GitHub."
    actions={[
      // {
      //   variant: 'secondary',
      //   text: '<img src="https://next-images.opencollective.com/_next/image?url=%2Fstatic%2Fimages%2Foc-logo-watercolor-256.png&w=64&q=75" class="h-5 w-5 mr-2.5"/>Open Collective',
      //   href: 'https://opencollective.com/LycheeOrg',
      // },
      {
        variant: 'secondary',
        text: 'GitHub sponsor',
        href: 'https://github.com/sponsors/LycheeOrg',
        icon: 'tabler:heart',
      },
    ]}
  /> -->


  <CallToAction2
    classes={{container: 'bg-sky-400/10 !max-w-full', headline: 'bg-white'}}
    title="Support us!"
    subtitle="If you are using Lychee, a small token of gratitude will go a long way. You can support further development of Lychee on GitHub."
    actions={[
      // {
      //   variant: 'secondary',
      //   text: '<img src="https://next-images.opencollective.com/_next/image?url=%2Fstatic%2Fimages%2Foc-logo-watercolor-256.png&w=64&q=75" class="h-5 w-5 mr-2.5"/>Open Collective',
      //   href: 'https://opencollective.com/LycheeOrg',
      // },
      {
        variant: 'secondary',
        text: 'GitHub sponsor',
        href: 'https://github.com/sponsors/LycheeOrg',
        icon: 'tabler:heart',
      },
    ]}
  />
  <!-- { text: 'GitHub sponsor', href: 'https://github.com/sponsors/LycheeOrg' },
  { text: 'Open Collective', href: 'https://opencollective.com/LycheeOrg' }, -->

<Features2
  isBeforeContent
  title="Join the team!"
  subtitle="Whether you want to contribute or just help with reviewing pull requests, we would be happy to have you on board.<br><br>LycheeOrg works as a Do What You Want Structure."
  items={[
    { icon: 'tabler:devices-check',  title: 'If you feel like just doing reviews,', description: 'then just do that.', classes: {panel:'items-center'} },
    { icon: 'tabler:devices-plus', title: 'If you feel like adding new functionalities,', description: 'then do that.',  classes: {panel:'items-center', title: 'text-center', description: 'text-center'} },
    { icon: 'tabler:bug-off', title: 'If you feel like fixing bugs,', description: 'then do that.',  classes: {panel:'items-center', title: 'text-center', description: 'text-center'} },
    { icon: 'tabler:hammer', title: 'if you feel like fixing things that annoy you,', description: 'then do that.', classes: {panel:'items-center', title: 'text-center', description: 'text-center'} },
  ]}
  columns={2}
>
</Features2>

  <!-- <div class=" scale-75"> -->
  <Features5
    classes={{container: 'scale-75'}}
    isAfterContent
    isBeforeContent
    title="Past Contributors"
    subtitle="We would like to thank all the contributors that helped us in the past."
    columns={3}
    items={[
      {
        title: 'kamil4 (Kamil Iskra)',
        image: {
          src: 'https://avatars.githubusercontent.com/u/16415200?v=4',
          alt: 'kamil4',
        },
        description:
          '<span class="bg-green-700 text-white rounded-full px-4 py-1 font-bold text-sm">Top contributor</span>',
      },
      {
        title: 'nagmat84 (Matthias Nagel)',
        image: {
          src: 'https://avatars.githubusercontent.com/u/7428426?v=4',
          alt: 'nagmat84',
        },
        description:
          '<span class="bg-yellow-400 text-neutral-500 rounded-full px-4 py-1 font-bold text-sm">Rock star</span>',
      },
      {
        title: 'electerious (Tobias Reich)',
        image: {
          src: 'https://avatars.githubusercontent.com/u/499088?v=4',
          alt: 'electerious',
        },
        description: '<span class="bg-sky-400 rounded-full px-4 py-1 font-bold text-sm">Creator</span>',
      },
      {
        title: 'qwerty287',
        image: {
          src: 'https://avatars.githubusercontent.com/u/80460567?v=4',
          alt: 'qwerty287',
        },
        description:
          '<span class="bg-green-700 text-white rounded-full px-4 py-1 font-bold text-sm">Top contributor</span>',
      },
      {
        title: 'tmp-hallenser',
        image: {
          src: 'https://avatars.githubusercontent.com/u/1869257?v=4',
          alt: 'tmp-hallenser',
        },
      },
      {
        title: 'LudovicRousseau',
        image: {
          src: 'https://avatars.githubusercontent.com/u/398496?v=4',
          alt: 'LudovicRousseau',
        },
      },

      {
        title: 'roblandry',
        image: {
          src: 'https://avatars.githubusercontent.com/u/1853884?v=4',
          alt: 'roblandry',
        },
      },

      {
        title: 'alex-phillips',
        image: {
          src: 'https://avatars.githubusercontent.com/u/3135216?v=4',
          alt: 'alex-phillips',
        },
      },

      {
        title: 'hermzz (Hermann Käser)',
        image: {
          src: 'https://avatars.githubusercontent.com/u/129883?v=4',
          alt: 'hermzz (Hermann Käser)',
        },
      },

      {
        title: 'clementlamoureux',
        image: {
          src: 'https://avatars.githubusercontent.com/u/2447419?v=4',
          alt: 'clementlamoureux (Clément Lamoureux)',
        },
      },
      {
        title: 'bennetscience (Brian)',
        image: {
          src: 'https://avatars.githubusercontent.com/u/3878010?s=400&v=4',
          alt: 'bennetscience (Brian)',
        },
      },
      {
        title: 'ppshobi (Shobi)',
        image: {
          src: 'https://avatars.githubusercontent.com/u/8536607?v=4',
          alt: 'ppshobi',
        },
      },
      {
        title: 'sancsin',
        image: {
          src: 'https://avatars.githubusercontent.com/u/75096844?v=4',
          alt: 'sancsin',
        },
      },
    ]}
  />

    <div class=`max-w-3xl mx-auto text-center p-6 rounded-md dark:shadow-none dark:border dark:border-slate-600`>
      <div class="mb-4 md:mb-8 text-center max-w-3xl mx-auto">
        <h2 class="text-3xl md:text-4xl font-bold leading-tighter tracking-tighter font-heading" set:html={'Translation efforts'} />
        <div class="mt-2 md:mt-3 mx-auto text-xl text-gray-500 dark:text-slate-400 font-medium" set:html={'It only takes a little bit of your time, but it greatly helps us.'} />
      </div>
      <a href="https://weblate.lycheeorg.dev/engage/lycheeorg/" class="flex justify-center">
        <img src="https://weblate.lycheeorg.dev/widget/lycheeorg/multi-auto.svg" class="w-full" alt="Translation status" />
      </a>
      <div class="flex w-full sm:w-auto my-4 justify-center">
        <Button
          variant='secondary'
          text='Translate now'
          href='https://weblate.lycheeorg.dev'
          icon='tabler:language' class="w-full max-w-sm sm:mb-0" />
      </div>
    </div>
</Layout>