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

import Header from '~/components/widgets/Header.astro';
import Hero2 from '~/components/widgets/Hero2.astro';
import Features from '~/components/widgets/Features.astro';
import Steps2 from '~/components/widgets/Steps2.astro';
import Content from '~/components/widgets/Content.astro';
import CallToAction from '~/components/widgets/CallToAction.astro';
import Pricing from '~/components/widgets/Pricing.astro';

import { headerData } from '~/navigation';
import FAQs from '~/components/widgets/FAQs.astro';

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

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

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

  <Hero2
    tagline="SaaS Web Demo"
    callToAction={{ text: 'Get template', href: 'https://github.com/onwidget/astrowind', icon: 'tabler:download' }}
    callToAction2={{ text: 'Learn more', href: '#features' }}
    image={{
      src: 'https://images.unsplash.com/photo-1580481072645-022f9a6dbf27?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
      alt: 'AstroWind Hero Image',
    }}
  >
    <Fragment slot="title">
      Simplify web design with Astrowind: <br /> your ultimate <span class="text-accent dark:text-white highlight"
        >SaaS</span
      > companion<br />
    </Fragment>

    <Fragment slot="subtitle">
      <span class="hidden sm:inline">
        Elevate your website creation process with <span class="font-semibold">AstroWind</span>'s SaaS solutions.</span
      >
       Seamlessly blend the power of Astro 2.0 and Tailwind CSS to craft websites that resonate with your brand and
      audience.
    </Fragment>
  </Hero2>

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

  <Features
    id="features"
    title="Why choose AstroWind?"
    subtitle="Each of the following features enhances AstroWind's value proposition."
    columns={2}
    items={[
      {
        title: 'Integration of Astro 2.0 and Tailwind CSS',
        description:
          'Offers a powerful combination that enhances both the development process and the end-user experience. Also, allows to build dynamic and visually stunning websites with optimized performance.',
        icon: 'tabler:layers-union',
      },
      {
        title: 'Versatile design for startups, small businesses, and more',
        description: `Easily customize AstroWind to harmonize with the unique branding and identity of your venture. AstroWind's versatile design adapts to suit your needs.`,
        icon: 'tabler:artboard',
      },
      {
        title: 'Effortless customization for portfolios and marketing sites',
        description:
          'With intuitive customization, easily showcase portfolio pieces, case studies, project highlights, and relevant content. Ideal for creative professionals and businesses looking to highlight their expertise.',
        icon: 'tabler:writing',
      },
      {
        title: 'Optimized landing pages and engaging blogs',
        description: `Landing pages are strategically designed to captivate visitors and prompt specific actions. Additionally, the blog creation feature empowers sharing insights, engaging the audience.`,
        icon: 'tabler:podium',
      },
      {
        title: 'Fast loading times and production-ready code',
        description: `Using Astro 2.0 ensures fast loading and seamless rendering, enhancing browsing. The code follows best practices, improving user experience, SEO, and reducing bounce rates.`,
        icon: 'tabler:rocket',
      },
      {
        title: 'SEO-optimized structure for enhanced visibility',
        description: `Follows SEO best practices with clean code, semantic HTML markup, and fast loading, enhancing search engine rankings. AstroWind's SEO structure ensures visibility to potential customers and clients.`,
        icon: 'tabler:eyeglass',
      },
    ]}
  />

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

  <Content
    isReversed
    items={[
      {
        title: 'Per ei quaeque sensibus',
        description:
          'Ex usu illum iudico molestie. Pro ne agam facete mediocritatem, ridens labore facete mea ei. Pro id apeirian dignissim.',
      },
      {
        title: 'Cu imperdiet posidonium sed',
        description:
          'Amet utinam aliquando ut mea, malis admodum ocurreret nec et, elit tibique cu nec. Nec ex maluisset inciderint, ex quis.',
      },
      {
        title: 'Nulla omittam sadipscing mel ne',
        description:
          'At sed possim oporteat probatus, justo graece ne nec, minim commodo legimus ut vix. Ut eos iudico quando soleat, nam modus.',
      },
    ]}
    image={{
      src: 'https://images.unsplash.com/photo-1620558138198-cfb9b4f3c294?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1671&q=80',
      alt: 'Colorful Image',
    }}
  >
    <Fragment slot="content">
      <h3 class="text-2xl font-bold tracking-tight dark:text-white sm:text-3xl mb-2">Ad vix debet docendi</h3>
       Ne dicta praesent ocurreret has, diam theophrastus at pro. Eos etiam regione ut, persius eripuit quo id. Sit te
      euismod tacimates.
    </Fragment>

    <Fragment slot="bg">
      <div class="absolute inset-0 bg-blue-50 dark:bg-transparent"></div>
    </Fragment>
  </Content>

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

  <Content
    isAfterContent={true}
    items={[
      {
        title: 'Per ei quaeque sensibus',
        description:
          'Ex usu illum iudico molestie. Pro ne agam facete mediocritatem, ridens labore facete mea ei. Pro id apeirian dignissim.',
      },
      {
        title: 'Cu imperdiet posidonium sed',
        description:
          'Amet utinam aliquando ut mea, malis admodum ocurreret nec et, elit tibique cu nec. Nec ex maluisset inciderint, ex quis.',
      },
      {
        title: 'Nulla omittam sadipscing mel ne',
        description:
          'At sed possim oporteat probatus, justo graece ne nec, minim commodo legimus ut vix. Ut eos iudico quando soleat, nam modus.',
      },
    ]}
    image={{
      src: 'https://images.unsplash.com/photo-1531973486364-5fa64260d75b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1658&q=80',
      alt: 'Colorful Image',
    }}
  >
    <Fragment slot="content">
      <h3 class="text-2xl font-bold tracking-tight dark:text-white sm:text-3xl mb-2">Ad vix debet docendi</h3>
       Ne dicta praesent ocurreret has, diam theophrastus at pro. Eos etiam regione ut, persius eripuit quo id. Sit te
      euismod tacimates.
    </Fragment>

    <Fragment slot="bg">
      <div class="absolute inset-0 bg-blue-50 dark:bg-transparent"></div>
    </Fragment>
  </Content>

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

  <Content
    isReversed
    isAfterContent={true}
    items={[
      {
        title: 'Per ei quaeque sensibus',
        description:
          'Ex usu illum iudico molestie. Pro ne agam facete mediocritatem, ridens labore facete mea ei. Pro id apeirian dignissim.',
      },
      {
        title: 'Cu imperdiet posidonium sed',
        description:
          'Amet utinam aliquando ut mea, malis admodum ocurreret nec et, elit tibique cu nec. Nec ex maluisset inciderint, ex quis.',
      },
      {
        title: 'Nulla omittam sadipscing mel ne',
        description:
          'At sed possim oporteat probatus, justo graece ne nec, minim commodo legimus ut vix. Ut eos iudico quando soleat, nam modus.',
      },
    ]}
    image={{
      src: 'https://images.unsplash.com/photo-1635070041078-e363dbe005cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
      alt: 'Colorful Image',
    }}
  >
    <Fragment slot="content">
      <h3 class="text-2xl font-bold tracking-tight dark:text-white sm:text-3xl mb-2">Ad vix debet docendi</h3>
       Ne dicta praesent ocurreret has, diam theophrastus at pro. Eos etiam regione ut, persius eripuit quo id. Sit te
      euismod tacimates.
    </Fragment>

    <Fragment slot="bg">
      <div class="absolute inset-0 bg-blue-50 dark:bg-transparent"></div>
    </Fragment>
  </Content>

  <!-- Pricing Widget ******************* -->

  <Pricing
    title="Flexible pricing plans for AstroWind"
    prices={[
      {
        title: 'free',
        subtitle: 'Access to core features and a wide range of templates',
        price: '0',
        period: '/ month',
        callToAction: {
          targetBlank: true,
          text: 'Get Started for Free',
          href: '#',
        },
      },
      {
        title: 'pro',
        subtitle: 'Premium templates and advanced customization',
        price: 15,
        period: '/ Month',
        callToAction: {
          targetBlank: true,
          text: 'Upgrade to Pro',
          href: '#',
        },
        hasRibbon: true,
        ribbonTitle: 'popular',
      },
      {
        title: 'Enterprise',
        subtitle: 'Tailored solutions for large-scale projects',
        price: 45,
        period: '/ Month',
        callToAction: {
          targetBlank: true,
          text: 'Unlock Enterprise Features',
          href: '#',
        },
      },
    ]}
  />

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

  <FAQs
    title="Frequently Asked Questions"
    items={[
      {
        title: 'Is AstroWind compatible with the latest versions of Astro and Tailwind CSS?',
        description:
          'Yes, AstroWind is designed to be compatible with the latest versions of both Astro and Tailwind CSS. This ensures that you can harness the full capabilities of these technologies while benefiting from the features offered by AstroWind.',
        icon: 'tabler:chevrons-right',
      },
      {
        title: 'Can I use AstroWind for both personal and commercial projects?',
        description: `Certainly! AstroWind is versatile and can be used for a wide range of projects, including both personal and commercial endeavors. Whether you're building a professional portfolio, launching a startup, or creating a marketing website, AstroWind has you covered.`,
        icon: 'tabler:chevrons-right',
      },
      {
        title: 'What level of coding knowledge is required to use AstroWind?',
        description:
          'While some familiarity with HTML, CSS, and web development concepts is helpful, the user-friendly interface and customization options allow those with limited coding experience to create impressive websites. For more advanced users, AstroWind offers extensive customization capabilities.',
        icon: 'tabler:chevrons-right',
      },
      {
        title: 'Is customer support available for AstroWind users seeking guidance?',
        description: `Absolutely, our dedicated customer support team is here to assist you with any questions or challenges you may encounter. Feel free to reach out to us through our support channels, and we'll be happy to provide the help you need.`,
        icon: 'tabler:chevrons-right',
      },
    ]}
  >
    <Fragment slot="bg">
      <div class="absolute inset-0 bg-blue-50 dark:bg-transparent"></div>
    </Fragment>
  </FAQs>

  <!-- Steps2 Widget ****************** -->

  <Steps2
    title="Sed ac magna sit amet risus tristique interdum, at vel velit in hac habitasse platea dictumst."
    subtitle="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla, sed porttitor est nibh at nulla. Praesent placerat enim ut ex tincidunt vehicula. Fusce sit amet dui tellus."
    callToAction={{
      text: 'Get template',
      href: 'https://github.com/onwidget/astrowind',
      icon: 'tabler:download',
    }}
    items={[
      {
        title: 'Responsive Elements',
        description:
          'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
      },
      {
        title: 'Flexible Team',
        description:
          'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
      },
      {
        title: 'Ecologic Software',
        description:
          'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
      },
    ]}
  />

  <!-- 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>