---
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';

const meta = {
  title: "Mobile App Landing Page",
};
---

<Layout {meta}>
  <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: 'Get template', 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>

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

  <CallToAction
    callToAction={{
      text: 'Get template',
      href: 'https://github.com/onwidget/astrowind',
      icon: 'tabler:download',
    }}
  >
    <Fragment slot="title">
      Astro + <br class="block sm:hidden" /><span class="sm:whitespace-nowrap"> Tailwind CSS</span>
    </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>