CTA Blocks

<script setup lang="ts">
import { customerLogos2 } from '/@src/data/pages/logos'
</script>

<template>
  <CtaBlockA
    title="Ready To Go?"
    subtitle="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est tam
    dissimile?"
    cta-primary="Get Started"
    cta-primary-link="index"
    cta-secondary="Learn More"
    cta-secondary-link="index"
    :logos="customerLogos2"
    boxed
    shapes
    animated
    color="darker"
  />
</template>

<template>
  <CtaBlockB
    title-primary="Start Building"
    content-primary="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est tam dissimile?"
    cta-primary="Free Trial"
    cta-primary-link="index"
    title-secondary="Schedule a Demo"
    content-secondary="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est tam dissimile?"
    cta-secondary="Contact Team"
    cta-secondary-link="index"
    boxed
    shapes
    animated
    color="darker"
  />
</template>

<template>
  <CtaBlockC
    title="Ready To Go?"
    subtitle="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est tam
      dissimile homini. Quae cum dixisset paulumque?"
    shapes
    animated
    inverted
  >
    <Buttons>
      <Button color="primary" :long="2" raised bold>Subscribe</Button>
      <Button :long="2" raised bold>Learn More</Button>
    </Buttons>
  </CtaBlockC>
</template>

<template>
  <CtaBlockD
    title="Ready To Go?"
    subtitle="Lorem ipsum dolor sit amet, consectetur adipiscing elit quis est tam
      dissimile homini. Quae cum."
    inverted
  >
    <Buttons>
      <Button color="primary" :long="2" bold raised>Get Started</Button>
      <Button :long="2" bold raised>Learn More</Button>
    </Buttons>
  </CtaBlockD>
</template>         

<template>
  <CtaBlockE
    title="Ready to Go?"
    subtitle="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est
          tam dissimile homini quae cum dixisset."
    text="Lorem ipsum dolor sit amet, consectetur adipiscing elit quis est tam
      dissimile homini. Quae cum."
    cta="Get Started"
    cta-link="index"
    inverted
  />
</template>          

<template>
  <CtaBlockF
    title="Ready to Go?"
    subtitle="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est
          tam dissimile homini quae cum dixisset."
    background="/demo/img/color/7.jpg"
    overlay
    alignment="right"
    cta="Get Started"
    cta-link="index"
  />
</template>       

<template>
  <CtaBlockG
    title="Start Building"
    subtitle="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est tam dissimile?"
    image="https://dummyimage.com/800x600.jpg"
    dark-image="https://dummyimage.com/800x600.jpg"
    inverted
  >
    <Field grouped>
      <Control expanded icon="feather:mail">
        <VInput placeholder="Email Address" inverted />
      </Control>
      <Control>
        <Button size="form" color="primary" :long="2" bold raised>Sign Up</Button>
      </Control>
    </Field>
  </CtaBlockG>
</template>     

<template>
  <!--image variation-->
  <CtaBlockH
    small-text="UI Framework"
    title="Start Building"
    subtitle="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est tam dissimile?"
    image="/@src/assets/illustrations/apps/apps-slant.png"
    dark-image="/@src/assets/illustrations/apps/apps-slant.png"
  >
    <Buttons>
      <Button :to="'index'" color="primary" :long="2" bold raised>Get Started</Button>
      <Button :to="'index'" :long="2" bold raised>Learn More</Button>
    </Buttons>
  </CtaBlockH>

  <!--background variation-->
  <CtaBlockH
    small-text="UI Framework"
    title="Start Building"
    subtitle="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est tam dissimile?"
    background="https://dummyimage.com/940x650.jpg"
  >
    <Buttons>
      <Button :to="'index'" color="primary" :long="2" bold raised>Get Started</Button>
      <Button :to="'index'" :long="2" bold raised>Learn More</Button>
    </Buttons>
  </CtaBlockH>
</template>   

<template>
  <CtaBlockI
    title="Get Started"
    subtitle="Fill in the form below to get started with our application."
  >
    <template #content>
      <p class="paragraph rem-125 max-w-5 b-centered-tablet-p">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit quis est tam
        dissimile homini. Quae cum.
      </p>
    </template>
    <template #form>
      <form class="py-4">
        <div class="columns is-multiline">
          <div class="column is-6">
            <Field>
              <FieldLabel label="First Name">First Name</FieldLabel>
              <Control icon="feather:user">
                <VInput />
              </Control>
            </Field>
          </div>
          <div class="column is-6">
            <Field>
              <FieldLabel label="Last Name">Last Name</FieldLabel>
              <Control icon="feather:user">
                <VInput />
              </Control>
            </Field>
          </div>
          <div class="column is-12">
            <Field>
              <FieldLabel label="Email Address">Email Address</FieldLabel>
              <Control icon="feather:mail">
                <VInput />
              </Control>
            </Field>
          </div>
          <div class="column is-6">
            <Field>
              <FieldLabel label="Password">Password</FieldLabel>
              <Control icon="feather:lock">
                <VInput type="password" />
              </Control>
            </Field>
          </div>
          <div class="column is-6">
            <Field>
              <FieldLabel label="Password">Repeat Password</FieldLabel>
              <Control icon="feather:lock">
                <VInput type="password" />
              </Control>
            </Field>
          </div>
          <div class="column is-12">
            <Field class="pt-4">
              <Control>
                <Buttons alignment="centered">
                  <Button :to="'index'" color="primary" fullwidth bold raised>Get Started</Button>
                </Buttons>
              </Control>
            </Field>
          </div>
        </div>
      </form>
    </template>
  </CtaBlockI>
</template>  

<template>
  <CtaBlockJ
    small-text="14-Day Trial"
    title="Start Building"
    subtitle="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis est tam dissimile?"
  >
    <Buttons alignment="centered">
      <Button :to="'index'" color="primary" :long="2" bold raised>Get Started</Button>
      <Button :to="'index'" :long="2" bold raised>Learn More</Button>
    </Buttons>
  </CtaBlockJ>
</template>