بلاک های جذب کننده

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

<template>
  <CtaBlockA
    title="آماده‌ی رفتن هستید؟"
    subtitle="لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است."
    cta-primary="شروع کنید"
    cta-primary-link="index"
    cta-secondary="بیشتر بدانید"
    cta-secondary-link="index"
    :logos="customerLogos2"
    boxed
    shapes
    animated
    color="darker"
  />
</template>

<template>
  <CtaBlockB
    title-primary="شروع به ساختن کنید"
    content-primary="لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است."
    cta-primary="دسترسی آزمایشی"
    cta-primary-link="index"
    title-secondary="درخواست دمو"
    content-secondary="لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است."
    cta-secondary="تماس با تیم"
    cta-secondary-link="index"
    boxed
    shapes
    animated
    color="darker"
  />
</template>

<template>
  <CtaBlockC
    title="آماده‌ی رفتن هستید؟"
    subtitle="لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است."
    shapes
    animated
    inverted
  >
    <Buttons>
      <Button color="primary" :long="2" raised bold>اشتراک</Button>
      <Button :long="2" raised bold>بیشتد بدانید</Button>
    </Buttons>
  </CtaBlockC>
</template>

<template>
  <CtaBlockD
    title="آماده‌ی رفتن هستید؟"
    subtitle="لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است."
    inverted
  >
    <Buttons>
      <Button color="primary" :long="2" bold raised>شروع کنید</Button>
      <Button :long="2" bold raised>بیشتد بدانید</Button>
    </Buttons>
  </CtaBlockD>
</template>

<template>
  <CtaBlockE
    title="آماده شروع هستید؟"
    subtitle="لورم ایپسوم دولور سیت آمت، کونستکتور آدیسپیسینگ الیت. کیست
          است تام دیسیمیل هومینی کوئه کوم دیکسیت."
    text="لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است."
    cta="شروع کنید"
    cta-link="index"
    inverted
  />
</template>

<template>
  <CtaBlockF
    title="آماده شروع هستید؟"
    subtitle="لورم ایپسوم دولور سیت آمت، کونستکتور آدیسپیسینگ الیت. کیست
          است تام دیسیمیل هومینی کوئه کوم دیکسیت."
    background="/demo/img/color/7.jpg"
    overlay
    alignment="right"
    cta="شروع کنید"
    cta-link="index"
  />
</template>

<template>
  <CtaBlockG
    title="شروع به ساختن کنید"
    subtitle="لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است."
    image="https://dummyimage.com/800x600.jpg"
    dark-image="https://dummyimage.com/800x600.jpg"
    inverted
  >
    <Field grouped>
      <Control expanded icon="feather:mail">
        <VInput placeholder="آدرس ایمیل" inverted />
      </Control>
      <Control>
        <Button size="form" color="primary" :long="2" bold raised>ثبت نام</Button>
      </Control>
    </Field>
  </CtaBlockG>
</template>

<template>
  <!--image variation-->
  <CtaBlockH
    small-text="فریم‌ورک رابط کاربری"
    title="شروع به ساختن کنید"
    subtitle="لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است."
    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>شروع کنید</Button>
      <Button :to="'index'" :long="2" bold raised>بیشتد بدانید</Button>
    </Buttons>
  </CtaBlockH>

  <!--background variation-->
  <CtaBlockH
    small-text="فریم‌ورک رابط کاربری"
    title="شروع به ساختن کنید"
    subtitle="لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است."
    background="https://dummyimage.com/940x650.jpg"
  >
    <Buttons>
      <Button :to="'index'" color="primary" :long="2" bold raised>شروع کنید</Button>
      <Button :to="'index'" :long="2" bold raised>بیشتد بدانید</Button>
    </Buttons>
  </CtaBlockH>
</template>

<template>
  <CtaBlockI
    title="شروع کنید"
    subtitle="فرم زیر را پر کنید تا شروع به کار با برنامه ما کنید."
  >
    <template #content>
      <p class="paragraph rem-125 max-w-5 b-centered-tablet-p">
        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
      </p>
    </template>
    <template #form>
      <form class="py-4">
        <div class="columns is-multiline">
          <div class="column is-6">
            <Field>
              <FieldLabel label="نام">نام</FieldLabel>
              <Control icon="feather:user">
                <VInput />
              </Control>
            </Field>
          </div>
          <div class="column is-6">
            <Field>
              <FieldLabel label="نام خانوادگی">نام خانوادگی</FieldLabel>
              <Control icon="feather:user">
                <VInput />
              </Control>
            </Field>
          </div>
          <div class="column is-12">
            <Field>
              <FieldLabel label="آدرس ایمیل">آدرس ایمیل</FieldLabel>
              <Control icon="feather:mail">
                <VInput />
              </Control>
            </Field>
          </div>
          <div class="column is-6">
            <Field>
              <FieldLabel label="گذرواژه">گذرواژه</FieldLabel>
              <Control icon="feather:lock">
                <VInput type="password" />
              </Control>
            </Field>
          </div>
          <div class="column is-6">
            <Field>
              <FieldLabel label="گذرواژه">تکرار گذرواژه</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>شروع کنید</Button>
                </Buttons>
              </Control>
            </Field>
          </div>
        </div>
      </form>
    </template>
  </CtaBlockI>
</template>

<template>
  <CtaBlockJ
    small-text="آزمایشی ۱۴ روزه"
    title="شروع به ساختن کنید"
    subtitle="لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است."
  >
    <Buttons alignment="centered">
      <Button :to="'index'" color="primary" :long="2" bold raised>شروع کنید</Button>
      <Button :to="'index'" :long="2" bold raised>بیشتد بدانید</Button>
    </Buttons>
  </CtaBlockJ>
</template>