index.astro

---
import Layout from '~/layouts/PageLayout.astro';

import Hero from '~/components/widgets/HeroIndex.astro';
import Content from '~/components/widgets/Content.astro';
import Content3 from '~/components/widgets/Content3.astro';
import { Image } from 'astro:assets';
import Stats from '~/components/widgets/Stats.astro';
import CallToAction from '~/components/widgets/CallToAction.astro';
import showcase from '../assets/images/showcase.jpg';
import Features4 from '~/components/widgets/Features4.astro';
import show0 from '~/assets/images/showcase/0.jpg';
import show1 from '~/assets/images/showcase/1.jpg';
import show2 from '~/assets/images/showcase/2.jpg';
import show3 from '~/assets/images/showcase/3.jpg';

const metadata = {
  title: 'LycheeOrg — Self-hosted photo-management done right.',
  ignoreTitleTemplate: true,
};
---

<Layout metadata={metadata}>
  <!-- Hero Widget ******************* -->
  <Hero
    actions={[
      {
        variant: 'secondary',
        text: 'Live Demo',
        href: 'https://lychee-demo.fly.dev/',
        target: '_blank',
        // icon: 'tabler:download',
      },
      {
        variant: 'primary',
        text: 'See on GitHub',
        href: 'https://github.com/LycheeOrg/Lychee',
      },
    ]}
  >
    <Fragment slot="title">
      Self-hosted photo-management <span class="text-primary">done right</span>.
    </Fragment>

    <Fragment slot="subtitle">
      <span class="font-semibold">Lychee</span> is a free photo-management tool, which runs on your server or web-space.
      Installing is a matter of seconds. Upload, manage and share photos like from a native application. Lychee comes with
      everything you need and all your photos are stored securely.
    </Fragment>

    <Fragment slot="bg">
      <div style="background: linear-gradient(150deg, #061827, #2293ec)" class="md:mt-[76px] h-96 overflow-hidden">
        <div class="hero__inner">
          <div
            class="window skrollable skrollable-before"
            data-top="transform: translate3D(0px, 0px, 0px)"
            data-top-bottom="transform: translate3D(0px, 100px, 0px)"
            style="transform: translate3d(0px, 0px, 0px);"
          >
            <div class="window__bar">
              <div class="window__dots">
                <div class="window__dot window__dot--red"></div>
                <div class="window__dot window__dot--orange"></div>
                <div class="window__dot window__dot--green"></div>
              </div>
              <div class="window__menuitem window__button">
                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 512 512"
                  ><path d="M352 128.4L319.7 96 160 256l159.7 160 32.3-32.4L224.7 256z"></path></svg
                >
              </div>
              <div class="window__menuitem window__button">
                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 512 512"
                  ><path d="M160 128.4L192.3 96 352 256 192.3 416 160 383.6 287.3 256z"></path></svg
                >
              </div>
              <div class="window__menuitem window__adress">
                lycheeorg.dev
                <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 512 512"
                  ><path
                    d="M256 384.1c-70.7 0-128-57.3-128-128.1s57.3-128.1 128-128.1V84l96 64-96 55.7v-55.8c-59.6 0-108.1 48.5-108.1 108.1 0 59.6 48.5 108.1 108.1 108.1S364.1 316 364.1 256H384c0 71-57.3 128.1-128 128.1z"
                  ></path></svg
                >
              </div>
            </div>
            <Image
              src={showcase}
              alt={'For photographers by Photographers'}
              class={'window__content'}
              width="1194"
              height="525"
              alt="Screenshot of Lychee"
            />
          </div>
        </div>
      </div>
    </Fragment>
  </Hero>

  <!-- Note Widget ******************* -->

  <!-- <Note /> -->

  <!-- Features Widget *************** -->

  <Features4
    isBeforeContent
    isAfterContent
    columns={3}
    items={[
      {
        title: 'Manage',
        description:
          'Managing your photos has never been easier. Upload, move, rename, describe, delete or search your photos in seconds. All in one place, right from your browser.',
        icon: 'tabler:folders',
      },
      {
        title: 'Share',
        description:
          "Sharing like it should be. One click and every photo and album is ready for the public. You can also protect albums with passwords if you want. It's under your control.",
        icon: 'tabler:share-2',
      },
      {
        title: 'View',
        description:
          'Look at all your images in full-screen mode, navigate forward and backward by using your keyboard or let others enjoy your photos by making them public.',
        icon: 'tabler:eye',
      },
    ]}
  />

  <Content3
    isReversed
    items={[
      {
        icon: 'tabler:number-1',
        title: 'Upload your photos or create new albums.',
      },
      {
        icon: 'tabler:number-2',
        title: 'See all the information from your photo',
      },
      {
        icon: 'tabler:number-3',
        title: 'Batch selection with Desktop-like multi-select',
      },
      {
        icon: 'tabler:number-4',
        title: 'Share your albums or photos with your favourite service.',
      },
    ]}
    img1={{ src: show0.src, alt: 'Showcase 1' }}
    img2={{ src: show1.src, alt: 'Showcase 2' }}
    img3={{ src: show2.src, alt: 'Showcase 3' }}
    img4={{ src: show3.src, alt: 'Showcase 4' }}
  />
  <!-- Content Widget **************** -->

  <Features4
    isBeforeContent
    isAfterContent
    columns={3}
    items={[
      {
        title: 'Open',
        description:
          'Lychee is completely <a href="https://github.com/LycheeOrg/Lychee">open-source</a>. Everyone can take advantage of the work we have already done and improve it. We are open for every suggestion or help.',
        icon: 'tabler:brand-github',
      },
      {
        title: 'Secure',
        description:
          'Your server, your data, your rules. Never depend on someone else. Lychee is a self-hosted solution, so you are in the full control of your photos.',
        icon: 'tabler:lock',
      },
      {
        title: 'Beautiful',
        description:
          'Our goal was to create a web app everyone can use. Lychee works intuitive and comes with a stunning, beautiful interface.',
        icon: 'tabler:heart',
      },
    ]}
  />


  <Content classes={{ container: 'max-w-6xl' }}>
    <Fragment slot="bg">
      <div class="madefor__bg"></div>
      <!-- class={'absolute inset-0 object-cover'} -->
      <!-- <Image src={photographers} alt={'For photographers by Photographers'} class={'w-full object-cover'} /> -->
    </Fragment>
    <Fragment slot="content">
      <div class="text-white flex flex-col align-middle text-base h-full">
        <h2 class="text-3xl font-bold mb-5">Made for Photographers,<br />by Photographers.</h2>
        <p>
          <span class="font-semibold">Lychee</span> is the perfect place to store all your photos. No storage limit, no compression,
          no loss in data. We even support and display your EXIF and IPTC Metadata. And if you want, you can make your photos
          public for your audience. With just one click.
        </p>
      </div>
    </Fragment>
  </Content>

  <!-- Content Widget **************** -->

  <Features4
    isAfterContent
    columns={3}
    items={[
      {
        title: 'EXIF',
        description:
          'Get the most out of our photos. Lychee supports EXIF and IPTC Metadata. Always available one click away. Clearly listed next to all other information.',
        icon: 'tabler:camera',
      },
      {
        title: 'Import',
        description:
          'Import your photos from various sources. From you local computer, server, via URL or even from your Dropbox.',
        icon: 'tabler:cloud-upload',
      },
      {
        title: 'Tag',
        description:
          'Never lose one of your photos in the depth of your albums. Tag them or mark them as important. Every single photo or all selected photos at once.',
        icon: 'tabler:tag',
      },
    ]}
  />

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

  <Stats
    stats={[
      { title: 'Downloads', amount: '32K' },
      { title: 'Stars', amount: '3.8K' },
      { title: 'Forks', amount: '340' },
      { title: 'Docker pulls', amount: '3.6M' },
    ]}
  />

  <!-- CallToAction Widget *********** -->

  <CallToAction
    actions={[
      {
        variant: 'primary',
        text: 'Deploy now!',
        href: 'https://github.com/LycheeOrg/Lychee-Docker/blob/master/docker-compose.yml',
        target: '_blank',
        icon: 'tabler:download',
      },
    ]}
  >
    <Fragment slot="title"> Lychee on Docker </Fragment>

    <Fragment slot="subtitle"> Deploy in a matter of seconds with our docker-compose file. </Fragment>
  </CallToAction>
</Layout>