<template>
 <HeroRow
  size="lg-9"
  justify-content="start"
 >
  <h2>
   Accelerate Your Business with Cloud-Based Solutions
  </h2>
  <p>Choose a workflow that suits your team's needs or create your own to efficiently ship software.</p>
 </HeroRow>
 <Row columns="1 md-3">
  <Col>
   <Card
    relative-height="100"
    border-color="light"
    shadow
    data-aos="fade-up"
    data-aos-delay="200"
   >
    <CardBody>
     <BIcon
      icon="bi:headset"
      color="primary"
      font-size="1"
     />
     <CardTitle class="mt-2">
      Easy and Quick Design
     </CardTitle>
     <CardText>Powerful features and advanced HTML/CSS editing.</CardText>
     <CardLink to="/">
      Learn more <BIcon icon="bi:chevron-right" />
     </CardLink>
    </CardBody>
   </Card>
  </Col>

  <Col>
   <Card
    relative-height="100"
    border-color="light"
    shadow
    data-aos="fade-up"
    data-aos-delay="300"
   >
    <CardBody>
     <BIcon
      icon="bi:gear"
      color="primary"
      font-size="1"
     />
     <CardTitle class="mt-2">
      Powerful Features
     </CardTItle>
     <CardText>Utilize a wide range of tools to enhance your development process.</CardText>
     <CardLink to="/">
      Discover features <BIcon
       class="small ms-1"
       icon="bi:chevron-right"
      />
     </CardLink>
    </CardBody>
   </Card>
  </Col>
  <Col>
   <Card
    relative-height="100"
    border-color="light"
    shadow
    data-aos="fade-up"
    data-aos-delay="400"
   >
    <CardBody>
     <BIcon
      icon="bi:code-slash"
      color="primary"
      font-size="1"
     />
     <CardTitle>
      Advanced HTML/CSS Editing
     </CardTitle>
     <CardText>Customize your design with advanced HTML and CSS editing capabilities.</CardText>
     <CardLink to="/">
      Start editing  <BIcon
       class="fas small ms-1"
       icon="bi:chevron-right"
      />
     </CardLink>
    </CardBody>
   </Card>
  </Col>
 </Row>
</template>

<template>
 <Row
  justify-content="center"
  columns="1 md-3"
 >
  <Col>
   <b-div text-alignment="center">
    <b-div font-size="1">
     <BIcon
      icon="bi:arrow-down-short"
      text-color="danger"
     />43%
    </b-div>
    <b-p>If there is<br />a significant decrease</b-p>
   </b-div>
  </Col>
  <Col>
   <b-div text-alignment="center">
    <b-div font-size="1">
     <BIcon
      icon="bi:arrow-up-short"
      text-color="success"
     />31%
    </b-div>
    <b-p>If there is<br />a significant increase</b-p>
   </b-div>
  </Col>
  <Col>
   <b-div text-alignment="center">
    <b-div font-size="1">
     <BIcon
      icon="bi:arrow-up-short"
      text-color="success"
     />12%
    </b-div>
    <b-p>If there is<br />a significant increase</b-p>
   </b-div>
  </Col>
 </Row>
</template>

<template>
 <Row
  justify-content="center"
  columns="1 md-2"
 >
  <Col>
   <Flex
    data-aos="fade-up"
    data-aos-delay="300"
   >
    <FlexItem>
     <BIcon
      icon="bi:book"
      text-color="success"
      font-size="1"
     />
    </FlexItem>
    <FlexItem
     margin="s-3"
     grow="1"
    >
     <b-h level="4">
      User Guide
     </b-h>
     <b-p text-color="secondary">
      Comprehensive guides and tutorials to help you get started quickly.
     </b-p>
    </FlexItem>
   </Flex>
  </Col>

  <Col>
   <Flex
    data-aos="fade-up"
    data-aos-delay="400"
   >
    <FlexItem>
     <BIcon
      icon="bi:gear"
      text-color="info"
      font-size="1"
     />
    </FlexItem>
    <FlexItem
     grow="1"
     margin="s-3"
    >
     <b-h level="4">
      Configuration
     </b-h>
     <b-p text-color="secondary">
      Detailed configuration options to customize your experience.
     </b-p>
    </FlexItem>
   </Flex>
  </Col>

  <Col>
   <Flex
    data-aos="fade-up"
    data-aos-delay="500"
   >
    <FlexItem>
     <BIcon
      icon="bi:chat-dots"
      text-color="warning"
      font-size="1"
     />
    </FlexItem>
    <FlexItem
     grow="1"
     margin="s-3"
    >
     <b-h level="4">
      Support
     </b-h>
     <b-p text-color="secondary">
      Reach out to our support team for assistance and troubleshooting.
     </b-p>
    </FlexItem>
   </Flex>
  </Col>
  <Col>
   <Flex
    data-aos="fade-up"
    data-aos-delay="600"
   >
    <FlexItem>
     <BIcon
      icon="bi:files"
      text-color="primary"
      font-size="1"
     />
    </FlexItem>
    <FlexItem
     grow="1"
     margin="s-3"
    >
     <b-h level="4">
      API Reference
     </b-h>
     <b-p text-color="secondary">
      Detailed API documentation with examples and usage guidelines.
     </b-p>
    </FlexItem>
   </Flex>
  </Col>
 </Row>
</template>

<template>
 <Row>
  <Col col="md-4">
   <b-div
    data-aos="fade-up"
    data-aos-delay="100"
    text-alignment="center"
    padding="x-md-3"
   >
    <b-icon
     icon="bi:star-fill"
     text-color="warning"
     font-size="1"
    />
    <p>
     <b>
      4.82 out of 5 starts
     </b><br /> from 83 reviews
    </p>
   </b-div>
  </Col>
  <ResponsiveRule vertical="md" />
  <Col>
   <b-div
    data-aos="fade-up"
    text-alignment="center"
    padding="x-md-3"
   >
    <b-icon
     icon="bi:chat-quote"
     text-color="warning"
     font-size="1"
    />
    <p>
     <b>
      Loved by 95% of users
     </b><br /> based on 150 feedbacks
    </p>
   </b-div>
  </Col>
  <ResponsiveRule vertical="md" />
  <Col col="md-4">
   <b-div
    data-aos="fade-up"
    data-aos-delay="100"
    text-alignment="center"
    padding="x-md-3"
   >
    <b-icon
     icon="bi:cart"
     text-color="warning"
     font-size="1"
    />
    <p>
     <b>
      Awarded Best SaaS Product
     </b><br /> in 2023
    </p>
   </b-div>
  </Col>
 </Row>
</template>

<template>
 <HeroRow
  text-alignment="center"
  margin="y-5"
 >
  <b-div
   font-size="4"
   font-weight="bold"
  >
   Key Advantages
  </b-div>
  <b-div font-size="2">
   Why our 50,000+ users trust our platform
  </b-div>
 </HeroRow>
 <Row
  columns="1 md-3"
  text-alignment="center"
 >
  <Col>
   <BIcon
    icon="bi:graph-up"
    text-color="success"
    margin="b-3"
    font-size="1"
   />
   <b-h level="4">
    Optimize<br />your campaigns
   </b-h>
   <b-p text-color="secondary">
    Maximize your ad performance and achieve better results.
   </b-p>
  </Col>

  <Col>
   <BIcon
    icon="bi:pie-chart"
    text-color="info"
    margin="b-3"
    font-size="1"
   />
   <b-h level="4">
    Analyze<br />data effectively
   </b-h>
   <b-p text-color="secondary">
    Gain insights from your data to make informed decisions.
   </b-p>
  </Col>

  <Col>
   <BIcon
    icon="bi:bar-chart-line"
    text-color="primary"
    margin="b-3"
    font-size="1"
   />
   <b-h level="4">
    Scale<br />operations smoothly
   </b-h>
   <b-p text-color="secondary">
    Expand your operations efficiently and boost your ROI.
   </b-p>
  </Col>
 </Row>
</template>

<template>
 <Row columns="1 md-3">
  <Col>
   <b-div text-alignment="center">
    <b-small
     text-color="primary"
     class="text-cap"
    >
     <b-icon icon="bi:dash" /> User Feedback
    </b-small>
    <b-h
     level="4"
     display-headings="4"
    >
     1,200,000
    </b-h>
    <p>Our platform has received feedback from over 1,200,000 users worldwide.</p>
   </b-div>
  </Col>
  <Col>
   <b-div text-alignment="center">
    <b-small
     text-color="primary"
     class="text-cap"
    >
     <b-icon icon="bi:dash" /> Global Reach
    </b-small>
    <b-h
     level="4"
     display-headings="4"
    >
     150
    </b-h>
    <p>We have a presence in over 150 countries, providing localized services.</p>
   </b-div>
  </Col>
  <Col>
   <b-div text-alignment="center">
    <b-small
     text-color="primary"
     class="text-cap"
    >
     <b-icon icon="bi:dash" />  Customer Satisfaction
    </b-small>
    <b-h
     level="4"
     display-headings="4"
    >
     98%
    </b-h>
    <p>Our customer satisfaction rate is 98%, based on recent surveys.</p>
   </b-div>
  </Col>
 </Row>
</template>

<template>
 <HeroRow
  text-alignment="center"
  size="md-8"
 >
  <b-div
   margin="x-auto"
  >
   <b-h level="2">
    Master the art of building websites with modern tools
   </b-h>
  </b-div>
 </HeroRow>
 <HeroRow text-alignment="center">
  <List inline>
   <ListItem
    inline
    icon="bi:check"
    icon-color="primary"
   >
    Real-time collaboration
   </ListItem>
   <ListItem
    inline
    icon="bi:check"
    icon-color="primary"
   >
    News and updates
   </ListItem>
   <ListItem
    inline
    icon="bi:check"
    icon-color="primary"
   >
    Workshops and seminars
   </ListItem>
  </List>
 </HeroRow>
 <Row columns="1 md-3">
  <Col>
   <Card
    relative-height="100"
    class="hover:-un-translate-y-0.5"
   >
    <CardImgTop src="/unsplash/image/480x220/redd-f-5U_28ojjgms-unsplash.jpg" />
    <CardBody>
     <CardTitle>Edge App</Cardtitle>
     <CardText>Edge App makes browsing on Android more efficient.</CardText>
     <List unstyled>
      <ListItem icon="bi:chevron-right">
       In-depth Analytics
      </ListItem>
      <ListItem icon="bi:chevron-right">
       Online Advertising
      </ListItem>
      <ListItem icon="bi:chevron-right">
       Project Management
      </ListItem>
     </List>
    </CardBody>

    <CardFooter>
     <CardLink
      stretched
      to="/"
      icon="bi:chevron-right"
      icon-end
     >
      Discover more
     </CardLink>
    </CardFooter>
   </Card>
  </Col>
  <Col>
   <Card
    relative-height="100"
    class="hover:-un-translate-y-0.5"
   >
    <CardImgTop src="/unsplash/image/480x220/dlxmedia-hu-U-W8FKeC6Mo-unsplash.jpg" />
    <CardBody>
     <CardTitle>Wave App</CardTitle>
     <CardText>Wave App simplifies your daily tasks on iOS.</CardText>

     <List unstyled>
      <ListItem icon="bi:chevron-right">
       User Engagement
      </ListItem>
      <ListItem icon="bi:chevron-right">
       Content Creation
      </ListItem>
      <ListItem icon="bi:chevron-right">
       Team Collaboration
      </ListItem>
     </List>
    </CardBody>

    <CardFooter>
     <CardLink
      stretched
      to="/"
      icon="bi:chevron-right"
      icon-end
     >
      Learn more
     </CardLink>
    </CardFooter>
   </Card>
  </Col>
  <Col>
   <Card
    relative-height="100"
    class="hover:-un-translate-y-0.5"
   >
    <CardImgTop src="/unsplash/image/480x220/unseen-studio-s9CC2SKySJM-unsplash.jpg" />
    <CardBody>
     <CardTitle>Pulse App</CardTitle>
     <CardText>Pulse App helps you stay connected on the go.</CardText>
     <List unstyled>
      <ListItem icon="bi:chevron-right">
       Instant Messaging
      </ListItem>
      <ListItem icon="bi:chevron-right">
       Social Media Integration
      </ListItem>
      <ListItem icon="bi:chevron-right">
       Event Scheduling
      </ListItem>
     </List>
    </CardBody>

    <CardFooter>
     <CardLink
      stretched
      to="/"
      icon="bi:chevron-right"
      icon-end
     >
      Explore more
     </CardLink>
    </CardFooter>
   </Card>
  </Col>
 </Row>
</template>

<template>
 <HeroRow
  text-alignment="center"
  margin="y-3"
 >
  <b-h level="2">
   Analytics solutions
  </b-h>
 </HeroRow>

 <Row columns="1 md-3">
  <Col>
   <Card
    relative-height="100"
    background-color="primary-subtle"
    border-subtractive
    class="hover:-un-translate-y-0.5"
   >
    <Row>
     <Col col="md-8">
      <CardBody>
       <CardTitle heading="4">
        Analytics you can trust
       </CardTitle>
       <CardLink
        icon="bi:chevron-right"
        icon-end
        to="/"
        stretched
       >
        Learn more
       </CardLink>
      </CardBody>
     </Col>
     <Col
      background-image="/iradesign/svg/backgrounds/bg2.svg"
      class="un-bg-cover un-bg-center un-bg-no-repeat"
      style="background-size: 80%;"
     />
    </Row>
   </Card>
  </Col>
  <Col>
   <Card
    relative-height="100"
    background-color="primary-subtle"
    border-subtractive
    class="hover:-un-translate-y-0.5"
   >
    <Row>
     <Col col="md-8">
      <CardBody>
       <CardTitle>Scheduling made simple</CardTitle>
       <CardLink
        icon="bi:chevron-right"
        icon-end
        to="/"
        stretched
       >
        Learn more
       </CardLink>
      </CardBody>
     </Col>
     <Col
      background-image="/iradesign/svg/backgrounds/bg4.svg"
      class="un-bg-cover un-bg-center un-bg-no-repeat"
      style="background-size: 80%;"
     />
    </Row>
   </Card>
  </Col>
  <Col>
   <Card
    relative-height="100"
    background-color="primary-subtle"
    border-subtractive
    class="hover:-un-translate-y-0.5"
   >
    <Row>
     <Col col="md-8">
      <CardBody>
       <CardTitle>Listening made easy</CardTitle>
       <CardLink
        icon="bi:chevron-right"
        to="/"
        icon-end
        stretched
       >
        Learn more
       </CardLink>
      </CardBody>
     </Col>
     <Col
      background-image="/iradesign/svg/backgrounds/bg5.svg"
      class="un-bg-cover un-bg-center un-bg-no-repeat"
      style="background-size: 80%;"
     />
    </Row>
   </Card>
  </Col>
 </Row>
</template>

<template>
 <HeroRow
  margin="b-3"
  text-alignment="center"
  size="md-8"
 >
  <b-h level="2">
   Read our latest updates
  </b-h>
  <b-p>We have collaborated with some amazing companies to brand, design, and launch their products.</b-p>
 </HeroRow>
 <Row
  margin="b-3"
  columns="1 sm-2 md-4"
 >
  <Col>
   <Card
    relative-height="100"
   >
    <CardImgTop
     src="/unsplash/image/500x280/arlington-research-nFLmPAf9dVc-unsplash.jpg"
     alt="Image Description"
    />
    <CardBody>
     <CardSubTitle text-color="primary">
      Innovation
     </CardSubTitle>
     <CardTitle
      text-color="secondary"
      margin="b-5"
     >
      Success is when everything works seamlessly
     </CardTitle>
    </CardBody>
   </Card>
  </Col>

  <Col>
   <Card
    relative-height="100"
   >
    <CardImgTop
     src="/unsplash/image/500x280/jason-goodman-bzqU01v-G54-unsplash.jpg"
     alt="Image Description"
    />
    <CardBody>
     <CardSubTitle text-color="primary">
      Creativity
     </CardSubTitle>
     <CardTitle text-color="secondary">
      Innovation is the key to success
     </CardTitle>
    </CardBody>
   </Card>
  </Col>

  <Col>
   <Card
    relative-height="100"
   >
    <CardImgTop
     src="/unsplash/image/500x280/arlington-research-Kz8nHVg_tGI-unsplash.jpg"
     alt="Image Description"
    />
    <CardBody>
     <CardSubTitle text-color="primary">
      Business
     </CardSubTitle>
     <CardTitle text-color="secondary">
      Should Product Owners think like entrepreneurs?
     </CardTitle>
    </CardBody>
   </Card>
  </Col>
  <Col col="md-3">
   <card
    relative-height="100"
   >
    <CardImgTop
     src="/unsplash/image/500x280/annie-spratt-hCb3lIB8L8E-unsplash.jpg"
     alt="Image Description"
    />
    <CardBody>
     <CardSubTitle text-color="primary">
      Technology
     </CardSubTitle>
     <CardTitle text-color="secondary">
      The future of tech is here
     </CardTitle>
    </CardBody>
   </Card>
  </Col>
 </Row>
 <HeroRow text-alignment="center">
  <Card>
   <CardBody>
    Want to explore more?
    <CardLink
     to="/"
     icon="bi:chevron-right"
     icon-end
     stretched
    >
     Go here
    </CardLink>
   </CardBody>
  </Card>
 </HeroRow>
</template>

<template>
 <HeroRow
  margin="y-3"
  size="md-8"
  justify-content="start"
 >
  <b-p text-color="body-tertiary">
   <b>Our services</b>
  </b-p>
  <b-p headings="3">
   Elevate your services with our comprehensive solutions.
  </b-p>
 </HeroRow>
 <Row>
  <Col col="md-5">
   <Card
    relative-height="100"
    class="hover:-un-translate-y-0.5"
   >
    <CardImgTop
     src="/unsplash/image/500x280/arlington-research-nFLmPAf9dVc-unsplash.jpg"
     alt="Image Description"
    />

    <CardBody>
     <CardTitle>
      Make a significant impact
     </CardTitle>
     <CardText text-color="secondary">
      We are committed to providing opportunities to those who have demonstrated their ability to execute effectively.
     </CardText>
    </CardBody>

    <CardFooter>
     <CardLink
      icon="bi:chevron-right"
      icon-end
      to="/"
      stretched
     >
      Learn more
     </CardLink>
    </CardFooter>
   </Card>
  </Col>

  <Col col="md">
   <Card
    relative-height="100"
    class="hover:-un-translate-y-0.5"
   >
    <CardImgTop
     src="/unsplash/image/500x280/jason-goodman-bzqU01v-G54-unsplash.jpg"
     alt="Image Description"
    />

    <CardBody>
     <CardTitle>Guides</CardTitle>
     <CardText text-color="secondary">
      Whether you're a startup or a global enterprise, learn how to integrate with our solutions.
     </CardText>
    </CardBody>

    <CardFooter>
     <CardLink
      icon="bi:chevron-right"
      icon-end
      to="/"
      stretched
     >
      Learn more
     </CardLink>
    </CardFooter>
   </Card>
  </Col>

  <Col>
   <Card
    relative-height="100"
    class="hover:-un-translate-y-0.5"
   >
    <CardImgTop
     src="/unsplash/image/500x280/arlington-research-Kz8nHVg_tGI-unsplash.jpg"
     alt="Image Description"
    />

    <CardBody>
     <CardTitle>
      Explore the Tools
     </CardTitle>
     <CardText text-color="secondary">
      Quickly access sample components and copy-paste codes.
     </CardText>
    </CardBody>

    <CardFooter>
     <CardLink
      icon="bi:chevron-right"
      icon-end
      to="/"
      stretched
     >
      Learn more
     </CardLink>
    </CardFooter>
   </Card>
  </Col>
 </Row>
</template>

<template>
 <HeroRow
  text-alignment="center"
  margin="y-3"
  size="md-6"
 >
  <b-p text-color="body-tertiary">
   <b>Services</b>
  </b-p>
  <b-p headings="4">
   Multiple services – managed by one solution
  </b-p>
 </HeroRow>

 <Row columns="1 md-3">
  <Col>
   <Card
    relative-height="100"
    text-alignment="center"
    class="hover:-un-translate-y-0.5"
   >
    <CardBody>
     <b-div class="mb-4">
      <b-icon
       icon="bi:graph-up"
       display-headings="3"
       text-color="primary"
      />
     </b-div>
     <CardTitle>Marketing Analytics</CardTitle>
     <CardText text-color="secondary">
      Automated processes, enhanced performance, and detailed reports.
     </CardText>
    </CardBody>
    <CardFooter>
     <CardLink
      icon="bi:chevron-right"
      icon-end
      stretched
     >
      Learn more
     </CardLink>
    </CardFooter>
   </Card>
  </Col>

  <Col>
   <Card
    relative-height="100"
    text-alignment="center"
    class="hover:-un-translate-y-0.5"
   >
    <CardBody>
     <b-icon
      icon="bi:tools"
      display-headings="3"
      text-color="primary"
     />
     <CardTitle>Development Tools</CardTitle>
     <CardText text-color="secondary">
      Advanced tools and comprehensive reports for your team.
     </CardText>
    </CardBody>
    <CardFooter>
     <CardLink
      icon="bi:chevron-right"
      icon-end
      stretched
     >
      Learn more
     </CardLink>
    </CardFooter>
   </Card>
  </Col>

  <Col>
   <Card
    relative-height="100"
    text-alignment="center"
    class="hover:-un-translate-y-0.5"
   >
    <CardBody>
     <b-icon
      icon="bi:gear"
      display-headings="3"
      text-color="primary"
     />
     <CardTitle>Automation Solutions</CardTitle>
     <CardText text-color="secondary">
      Optimize your operations and reduce costs with automated solutions.
     </CardText>
    </CardBody>
    <CardFooter>
     <CardLink
      icon="bi:chevron-right"
      icon-end
      stretched
     >
      Learn more
     </CardLink>
    </CardFooter>
   </Card>
  </Col>
 </Row>
</template>

<template>
 <Row>
  <Col col="md-6">
   <Card
    relative-height="100"
    data-aos="fade-up"
    border-subtractive
   >
    <Background
     background-color="primary"
     pattern-src="/hero-patterns/jigsaw.svg"
     relative-height="100"
     class="hover:-un-translate-y-0.5"
     rounded
    >
     <CardBody>
      <CardTitle
       text-color="white"
      >
       Transforming the landscape of customer acquisition
      </CardTitle>
      <CardText text-color="white">
       Streamline top strategies and concentrate on creating high-quality content.
      </CardText>
      <CardLink
       text-color="light"
       icon="bi:chevron-right"
       icon-end
       to="/"
       stretched
      >
       Learn more
      </CardLink>
     </CardBody>
    </Background>
   </Card>
  </Col>

  <Col col="md-3 sm-6">
   <Card
    relative-height="100"
    data-aos="fade-up"
    data-aos-delay="100"
    border-subtractive
   >
    <Background
     background-color="primary"
     pattern-src="/hero-patterns/hideout.svg"
     relative-height="100"
     class="hover:-un-translate-y-0.5"
     rounded
    >
     <CardBody>
      <CardTitle
       text-color="white"
      >
       Pioneering the future of industry
      </CardTitle>
      <CardLink
       text-color="light"
       icon="bi:chevron-right"
       icon-end
       to="/"
       stretched
      >
       Discover more
      </CardLink>
     </CardBody>
    </Background>
   </Card>
  </Col>

  <Col col="md-3 sm-6">
   <Card
    relative-height="100"
    data-aos="fade-up"
    data-aos-delay="150"
    border-subtractive
   >
    <Background
     background-color="primary"
     pattern-src="/hero-patterns/hexagons.svg"
     relative-height="100"
     class="hover:-un-translate-y-0.5"
     rounded
    >
     <CardBody>
      <CardTitle
       text-color="white"
      >
       Strategies to save significant costs
      </CardTitle>
      <CardLink
       text-color="light"
       icon="bi:chevron-right"
       icon-end
       to="/"
       stretched
      >
       Discover more
      </CardLink>
     </CardBody>
    </Background>
   </Card>
  </Col>
 </Row>
</template>

<template>
 <b-div>
  <Row columns="1 md-2">
   <Col data-aos="fade-up">
    <Card relation-height="100">
     <CardBody>
      <Flex>
       <FlexItem padding="3 e-4">
        <BIcon
         icon="bi:chat-left-text"
         display-headings="5"
         text-color="primary"
        />
       </FlexItem>
       <FlexItem grow="1">
        <CardTitle>Contact Support</CardTitle>
        <CardText text-color="secondary">
         Reach out to our support team for assistance with your inquiries.
        </CardText>
       </FlexItem>
      </Flex>
     </CardBody>
    </Card>
   </Col>
   <Col
    data-aos="fade-up"
    data-aos-delay="100"
   >
    <Card relation-height="100">
     <CardBody>
      <Flex>
       <FlexItem padding="3">
        <BIcon
         icon="bi:files"
         display-headings="5"
         text-color="primary"
        />
       </FlexItem>
       <FlexItem grow="1">
        <CardTitle>Explore Documentation</CardTitle>
        <CardText text-color="secondary">
         Dive into our comprehensive guides and technical resources.
        </CardText>
       </FlexItem>
      </Flex>
     </CardBody>
    </Card>
   </Col>
  </Row>
 </b-div>
</template>

<template>
 <HeroRow
  text-alignment="center"
  size="md-8"
  margin="b-3"
 >
  <b-h level="2">
   3 Unique Themes Included
  </b-h>
  <b-p>Effortlessly create new pages with any of the 12 pre-designed grids and a vast array of components and elements.</b-p>
 </HeroRow>

 <Row
  margin="b-3"
  columns="1 md-3"
 >
  <Col>
   <Card
    background-color="primary-subtle"
    text-alignment="center"
    data-aos="fade-up"
    data-aos-delay="100"
    class="hover:-un-translate-y-0.5"
    border-subtractive
   >
    <CardBody>
     <b-img
      src="/unsplash/image/480x220/redd-f-5U_28ojjgms-unsplash.jpg"
      fluid
      alt="Image Description"
     />
     <CardTitle>Basic</CardTitle>
     <CardText>Available on:</CardText>
     <b-div margin="b-3">
      <b-icon
       icon="bi:vimeo"
       text-color="primary"
       headings="3"
       margin="e-2"
      />
      <b-icon
       icon="bi:twitch"
       text-color="primary"
       headings="3"
       margin="e-2"
      />
     </b-div>
     <b-div display="grid">
      <b-button
       color="primary"
       class="hover:-un-translate-y-0.5"
      >
       View Demo
      </b-button>
     </b-div>
    </CardBody>
   </Card>
  </Col>

  <Col>
   <Card
    background-color="dark-subtle"
    text-alignment="center"
    data-aos="fade-up"
    class="hover:-un-translate-y-0.5"
    border-subtractive
   >
    <CardBody>
     <b-img
      src="/unsplash/image/480x220/dlxmedia-hu-U-W8FKeC6Mo-unsplash.jpg"
      fluid
      alt="Image Description"
     />
     <CardTitle>Dark mode</CardTitle>
     <CardText>Available on:</CardText>
     <b-div margin="b-3">
      <b-icon
       icon="bi:vimeo"
       text-color="primary"
       headings="3"
       margin="e-2"
      />
      <b-icon
       icon="bi:twitch"
       text-color="primary"
       headings="3"
       margin="e-2"
      />
     </b-div>

     <b-div display="grid">
      <b-button
       color="white"
       disabled
      >
       Coming soon ...
      </b-button>
     </b-div>
    </CardBody>
   </Card>
  </Col>

  <Col>
   <Card
    background-color="success-subtle"
    text-alignment="center"
    data-aos="fade-up"
    data-aos-delay="100"
    class="hover:-un-translate-y-0.5"
    border-subtractive
   >
    <CardBody>
     <b-img
      src="/unsplash/image/480x220/unseen-studio-s9CC2SKySJM-unsplash.jpg"
      fluid
      alt="Image Description"
     />

     <CardTitle>Wireframe</CardTitle>
     <CardText>Available on:</CardText>

     <b-div margin="b-3">
      <b-icon
       icon="bi:vimeo"
       text-color="primary"
       headings="3"
       margin="e-2"
      />
      <b-icon
       icon="bi:twitch"
       text-color="primary"
       headings="3"
       margin="e-2"
      />
     </b-div>

     <b-div display="grid">
      <b-button
       color="white"
       disabled
      >
       Coming soon ...
      </b-button>
     </b-div>
    </CardBody>
   </Card>
  </Col>
 </Row>
 <HeroRow
  size="md-4"
 >
  <b-button
   color="outline-primary"
   relative-width="100"
  >
   Watch and learn how it works
  </b-button>
 </HeroRow>
</template>

<template>
 <HeroRow
  text-alignment="center"
  size="md-8"
  margin="y-3"
 >
  <b-div text-color="body-tertiary">
   <b>Instructions and Guides</b>
  </b-div>
  <b-div headings="3">
   Master the Essentials
  </b-div>
 </HeroRow>
 <Row margin="b-3">
  <Col col="md-5">
   <Card
    relative-height="100"
    data-aos="fade-up"
   >
    <CardImgTop
     src="/unsplash/image/480x220/redd-f-5U_28ojjgms-unsplash.jpg"
     alt="Image Description"
    />
    <CardBody>
     <Badge>Free</Badge>
     <CardTitle>
      Elements and Sizes
     </CardTitle>
     <CardText text-color="secondary">
      Discover the easiest way to select elements and adjust sizes.
     </CardText>
    </CardBody>
    <CardFooter>
     <CardLink
      to="/"
      stretched
      icon="bi:chevron-right"
      icon-end
     >
      Find out more
     </CardLink>
    </CardFooter>
   </Card>
  </Col>
  <Col col="md-4">
   <Card
    relative-height="100"
    data-aos="fade-up"
    data-aos-delay="150"
   >
    <CardImgTop
     src="/unsplash/image/480x220/dlxmedia-hu-U-W8FKeC6Mo-unsplash.jpg"
     alt="Image Description"
    />
    <CardBody>
     <Badge color="primary">
      NEW
     </Badge>
     <CardTitle class="text-inherit">
      Visual Data Representation
     </CardTitle>
     <CardText text-coplor="secondary">
      Learn the optimal methods to create and utilize charts and data visualizations in web applications.
     </CardText>
    </CardBody>
    <CardFooter>
     <CardLink
      icon="bi:chevron-right"
      icon-end
      to="/"
      stretched
     >
      Find out more
     </CardLink>
    </CardFooter>
   </Card>
  </Col>

  <Col col="md-3">
   <Card
    relative-height="100"
    data-aos="fade-up"
    data-aos-delay="200"
   >
    <CardImgTop
     src="/unsplash/image/480x220/unseen-studio-s9CC2SKySJM-unsplash.jpg"
     alt="Image Description"
    />
    <CardBody>
     <CardTitle>
      Layer Effects
     </CardTitle>
     <CardText text-color="secondary">
      Top tips and guidelines on how to effectively use shadows with layers.
     </CardText>
    </CardBody>
    <CardFooter>
     <CardLink
      icon="bi:chevron-right"
      icon-end
      to="/"
      stretched
     >
      Find out more
     </CardLink>
    </CardFooter>
   </Card>
  </Col>
 </Row>
 <HeroRow
  size="12"
  text-alignment="center"
 >
  <Card>
   <CardBody>
    Interested in more?
    <CardLink
     icon="bi:chevron-right"
     icon-end
     stretched
    >
     Explore all guides
    </CardLink>
   </CardBody>
  </Card>
 </HeroRow>
</template>

<template>
 <Row columns="1 md-2">
  <Col>
   <Card relative-height="100">
    <Row>
     <Col>
      <CardBody>
       <CardTitle>Discover the Widget Suite</CardTitle>
       <CardText>Launch your enterprise across multiple channels effortlessly.</CardText>
       <CardLink
        to="/"
        icon="bi:chevron-right"
        icon-end
        stretched
       >
        Find out more
       </CardLink>
      </CardBody>
     </Col>
     <Col col="3">
      <b-img
       fluid
       src="/iradesign/svg/gradient/characters/woman check phone.svg"
       class="un-max-h-48"
       padding="3"
      />
     </Col>
    </Row>
   </Card>
  </Col>
  <Col>
   <Card relative-height="100">
    <Row>
     <Col>
      <CardBody>
       <CardTitle>Empower teams to innovate</CardTitle>
       <CardText>Make informed decisions and explore your possibilities.</CardText>
       <CardLink
        to="/"
        icon="bi:chevron-right"
        icon-end
        stretched
       >
        Find out more
       </CardLink>
      </CardBody>
     </Col>
     <Col col="3">
      <b-img
       src="/iradesign/svg/gradient/characters/man with ipad.svg"
       class="un-max-h-48"
       padding="3"
      />
     </Col>
    </Row>
   </Card>
  </Col>
 </Row>
</template>

<template>
 <HeroRow
  size="md-8"
  text-alignment="center"
  margin="y-3"
 >
  <b-h levle="2">
   Core Advantages
  </b-h>
  <b-p>Accelerate your design process with a diverse collection of stunning templates.</b-p>
 </HeroRow>

 <Row columns="1 sm-2 md-4">
  <Col>
   <Card relative-height="100">
    <CardBody>
     <BIcon
      text-color="primary"
      display-headings="5"
      icon="bi:phone"
     />
     <CardTitle margin="t-3">
      Adaptive
     </CardTitle>
     <CardText text-color="secondary">
      Our platform is beautifully designed, fully responsive, and optimized for mobile-first projects.
     </CardText>
    </CardBody>

    <CardFooter>
     <CardLink
      to="/"
      stretched
      icon="bi:chevron-right"
      icon-end
     >
      Discover more
     </CardLink>
    </CardFooter>
   </Card>
  </Col>
  <Col>
   <Card
    relative-height="100"
   >
    <CardBody>
     <BIcon
      text-color="primary"
      display-headings="5"
      icon="bi:toggles"
     />
     <CardTitle margin="t-3">
      Flexible
     </CardTitle>
     <CardText text-color="secondary">
      Easily customize our template with state-of-the-art components and features.
     </CardText>
    </CardBody>

    <CardFooter>
     <CardLink
      to="/"
      stretched
      icon="bi:chevron-right"
      icon-end
     >
      Discover more
     </CardLink>
    </CardFooter>
   </Card>
  </Col>

  <Col>
   <Card
    relative-height="100"
   >
    <CardBody>
     <BIcon
      text-color="primary"
      display-headings="5"
      icon="bi:shield-check"
     />
     <CardTitle margin="t-3">
      Premium <Badge
       color="success"
       rounded="pill"
       margin="l-1"
      >
       design
      </Badge>
     </CardTitle>
     <CardText text-color="secondary">
      Our platform is designed for both developers and designers, including a comprehensive design file.
     </CardText>
    </CardBody>

    <CardFooter>
     <CardLink
      to="/"
      stretched
      icon="bi:chevron-right"
      icon-end
     >
      Discover more
     </CardLink>
    </CardFooter>
   </Card>
  </Col>

  <Col>
   <Card
    relative-height="100"
   >
    <CardBody>
     <BIcon
      text-color="primary"
      display-headings="5"
      icon="bi:files"
     />
     <CardTitle margin="t-3">
      Guides
     </CardTitle>
     <CardText text-color="secondary">
      Each component and plugin is thoroughly documented with interactive examples.
     </CardText>
    </CardBody>

    <CardFooter>
     <CardLink
      text-color="primary"
      to="/"
      stretched
      icon="bi:chevron-right"
      icon-end
     >
      Discover more
     </CardLink>
    </CardFooter>
   </Card>
  </Col>
 </Row>
</template>