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

import Header from '~/components/widgets/Header.astro';
import Hero2 from '~/components/widgets/Hero2.astro';
import CallToAction from '~/components/widgets/CallToAction.astro';
import Features3 from '~/components/widgets/Features3.astro';
import Content from '~/components/widgets/Content.astro';
import Testimonials from '~/components/widgets/Testimonials.astro';
import FAQs from '~/components/widgets/FAQs.astro';
import Stats from '~/components/widgets/Stats.astro';

const metadata = {
  title: 'Mobile App Landing Page',
};
---

<Layout metadata={metadata}>
  <Fragment slot="announcement"></Fragment>
  <Fragment slot="header">
    <Header
      links={[]}
      actions={[
        {
          type: 'ghost',
          text: 'Login',
          href: '#',
        },
        {
          type: 'primary',
          text: 'Sign Up',
          href: '#',
        },
      ]}
    />
  </Fragment>

  <!-- Hero2 Widget ******************* -->

  <Hero2
    callToAction={{ text: 'Download App', href: 'https://github.com/onwidget/astrowind', icon: 'tabler:download' }}
    callToAction2={{ text: 'Learn more', href: '#features' }}
    image={{ src: import('~/assets/images/hero.png'), alt: 'AstroWind Hero Image' }}
  >
    <Fragment slot="title">
      Free template for <span class="hidden lg:inline">create your website <br />with</span>
      <span class="text-accent dark:text-white highlight"> Astro 2.0</span> + Tailwind CSS
    </Fragment>

    <Fragment slot="subtitle">
      <span class="hidden sm:inline">
        <span class="font-semibold">AstroWind</span> is a free, customizable and production-ready template for Astro 2.0
        + Tailwind CSS.</span
      >
      <span class="block mb-1 sm:hidden font-bold text-blue-600">AstroWind: Production-ready.</span> Suitable for
      Startups, Small Business, Sass Websites, Professional Portfolios, Marketing Websites, Landing Pages & Blogs.
    </Fragment>
  </Hero2>

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

  <Features3
    subtitle="Tired of spending hours crafting documents from scratch? Our app offers an innovative solution. With a wide array of professionally designed templates, you can now create stunning documents in minutes. Save time, achieve a polished look, and customize templates to fit your style. Join thousands of satisfied users who've transformed their documents effortlessly. Explore our templates now and experience the difference."
    tagline="Step-by-step guide on how to use our app"
    columns={2}
    items={[
      {
        title: 'Download and Install the App',
        description:
          'Morbi faucibus luctus quam, sit amet aliquet felis tempor id. Cras augue massa, ornare quis dignissim a, molestie vel nulla.',
        icon: 'tabler:square-number-1',
      },
      {
        title: 'Sign Up',
        description:
          'Vivamus porttitor, tortor convallis aliquam pretium, turpis enim consectetur elit, vitae egestas purus erat ac nunc nulla.',
        icon: 'tabler:square-number-2',
      },
      {
        title: 'Browse Templates',
        description:
          'Duis sed lectus in nisl vehicula porttitor eget quis odio. Aliquam erat volutpat. Nulla eleifend nulla id sem fermentum.',
        icon: 'tabler:square-number-3',
      },
      {
        title: 'Preview and Select a Template',
        description:
          'Duis sed lectus in nisl vehicula porttitor eget quis odio. Aliquam erat volutpat. Nulla eleifend nulla id sem fermentum.',
        icon: 'tabler:square-number-4',
      },
    ]}
    image={{
      src: import('~/assets/images/colors.jpg'),
      alt: 'Colorful Image',
    }}
  />

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

  <Content
    items={[
      {
        title: 'High-Quality Designs',
        description: 'Pellentesque dui nibh, cursus ac eros eget, pharetra malesuada tortor.',
        icon: 'tabler:wand',
      },
      {
        title: 'Customization Tools',
        description: 'Nulla vulputate sollicitudin massa, id rutrum tellus tristique et.',
        icon: 'tabler:settings',
      },
      {
        title: 'Pre-Designed Elements',
        description: 'Mauris eget urna non leo fringilla auctor quis efficitur sem.',
        icon: 'tabler:presentation',
      },
      {
        title: 'Preview and Mockup Views',
        description: ' Donec lorem metus, maximus vitae magna sed, tincidunt interdum magna.',
        icon: 'tabler:carousel-horizontal',
      },
      {
        title: 'Offline Access',
        description:
          'Sed accumsan, purus facilisis efficitur accumsan, lectus lacus vestibulum diam, in sollicitudin orci tellus in libero.',
        icon: 'tabler:wifi-off',
      },
    ]}
    image={{
      src: import('~/assets/images/caos.jpg'),
      alt: 'Colorful Image',
    }}
  >
    <Fragment slot="content">
      <h3 class="text-2xl font-bold tracking-tight dark:text-white sm:text-3xl mb-2">Main Features</h3>
    </Fragment>
  </Content>

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

  <Content
    isReversed
    isAfterContent
    items={[
      {
        title: 'Time Savings',
        description: 'Sed condimentum dui vel lorem cursus molestie duis id tristique justo.',
        icon: 'tabler:clock',
      },
      {
        title: 'Professional Appearance',
        description: 'Cras purus velit, finibus quis dui nec, faucibus porttitor purus.',
        icon: 'tabler:school',
      },
      {
        title: 'Accessibility for Non-Designers',
        description: 'Morbi volutpat ultricies dictum. In eu nunc id odio congue porttitor.',
        icon: 'tabler:accessible',
      },
      {
        title: 'Cost-Efficiency',
        description: 'Fusce vitae odio sed lacus tempor aliquam sit amet ut velit pellentesque sagittis cursus nisi.',
        icon: 'tabler:coin',
      },
      {
        title: 'Instant Download',
        description:
          'Sed semper tempus dolor, non pretium velit lacinia tristique, fusce hendrerit fermentum lorem dignissim convallis.',
        icon: 'tabler:file-download',
      },
    ]}
    image={{
      src: import('~/assets/images/vintage.jpg'),
      alt: 'Vintage Image',
    }}
  >
    <Fragment slot="content">
      <h3 class="text-2xl font-bold tracking-tight dark:text-white sm:text-3xl mb-2">Benefits</h3>
    </Fragment>
  </Content>

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

  <Stats
    stats={[
      { amount: '20K', icon: 'tabler:download' },
      { amount: '18.5K', icon: 'tabler:users' },
      { amount: '4.7', icon: 'tabler:user-star' },
    ]}
  />

  <!-- Testimonials Widget *********** -->

  <Testimonials
    tagline="What our users say about us?"
    testimonials={[
      {
        testimonial:
          'Vestibulum auctor dui vel nunc rutrum, quis elementum dui tristique. Sed hendrerit at lacus eget consectetur. In elementum scelerisque scelerisque. Nulla vel venenatis velit.',
        name: 'Cary Kennedy',
        job: 'Film director',
        image: {
          src: import('~/assets/images/colors.jpg'),
          alt: 'Cary Kennedy Image',
        },
      },
      {
        testimonial:
          'Mauris condimentum at tellus eget lacinia. Integer at ipsum eget urna rhoncus tincidunt. Curabitur condimentum scelerisque lobortis. Cras semper purus egestas sem blandit, in volutpat nibh rutrum.',
        name: 'Josh Wilkinson',
        job: 'Product Manager',
        image: {
          src: import('~/assets/images/vintage.jpg'),
          alt: 'Josh Wilkinson Image',
        },
      },
      {
        testimonial:
          'Praesent laoreet metus ac vehicula venenatis. Vivamus ullamcorper enim neque, sit amet eleifend sapien volutpat a. Proin quis varius metus. Etiam ut neque ipsum.',
        name: 'Sidney Hansen',
        job: 'Decorator',
        image: {
          src: import('~/assets/images/caos.jpg'),
          alt: 'Sidney Hansen Image',
        },
      },
    ]}
    callToAction={{
      targetBlank: true,
      text: 'Read more testimonials',
      href: 'https://github.com/onwidget/astrowind',
      icon: 'tabler:chevron-right',
    }}
  />

  <!-- FAQs Widget ******************* -->

  <FAQs
    title="Still have some doubts?"
    items={[
      {
        title: 'What does this app do?',
        description:
          'Cras ac velit laoreet, congue enim nec, ultrices ante. Suspendisse aliquam mi id sollicitudin faucibus.',
      },
      {
        title: 'How can this app solve my problem?',
        description:
          'Proin at turpis eget elit sagittis laoreet. Proin id nisl elit mi risus viverra eros. Aenean egestas arcu sed laoreet venenatis. Proin venenatis porta fermentum. Nulla ex lorem, aliquam sed volutpat sed, auctor vel libero.',
      },
      {
        title: 'Is it available for my device?',
        description:
          'Sed malesuada nisl turpis, et aliquet ex facilisis a. Proin in tortor ante. Quisque congue, lacus eu feugiat feugia.',
      },
      {
        title: 'What makes this app different from others?',
        description: 'Sed nulla nibh, facilisis non volutpat non, dictum quis nunc. Nullam mollis tempus odio.',
      },
      {
        title: 'Are there any costs involved?',
        description:
          'Proin aliquet, arcu in semper consectetur, ipsum urna pellentesque ipsum, sit amet aliquam odio nunc ac orci.',
      },
    ]}
  >
    <Fragment slot="bg">
      <div class="absolute inset-0 bg-blue-50 dark:bg-transparent"></div>
    </Fragment>
  </FAQs>

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

  <CallToAction
    callToAction={{
      text: 'Download App',
      href: 'https://github.com/onwidget/astrowind',
      icon: 'tabler:download',
    }}
  >
    <Fragment slot="title">Get Started Now</Fragment>

    <Fragment slot="subtitle">
      Be very surprised by these huge fake numbers you are seeing on this page. <br class="hidden md:inline" />Don't
      waste more time! :P
    </Fragment>
  </CallToAction>
</Layout>