<template>
 <HeroRow
  size="md-6"
  text-alignment="center"
 >
  <b-span text-transform="uppercase">
   How we work
  </b-span>
  <h2>Bring your ideas to life and share your vision with concrete elements</h2>
 </HeroRow>
 <Row justify-content="center">
  <Col
   col="md-5"
  >
   <List
    unstyled
    font-size="4"
   >
    <ListItem
     icon="bi:check-circle-fill"
     icon-color="blue-300"
    >
     Easy &amp; fast designing
    </ListItem>
    <ListItem
     icon="bi:check-circle-fill"
     icon-color="blue-300"
    >
     Powerful features
    </ListItem>
    <ListItem
     icon="bi:check-circle-fill"
     icon-color="blue-300"
    >
     Advanced HTML/CSS editing
    </ListItem>
    <ListItem
     icon="bi:check-circle-fill"
     icon-color="blue-300"
    >
     Nuxt Development
    </ListItem>
    <ListItem
     icon="bi:check-circle-fill"
     icon-color="blue-300"
    >
     User Experience Design
    </ListItem>
   </List>
   <Anchor
    icon="bi:chevron-right"
    icon-end
    to="/"
   >
    Our services
  </Anchor>
  </Col>
  <Col
   col="md-4"
  >
   <Card
    shadow
    border-color="light"
   >
    <CardBody>
     <BIcon
      icon="bi:headset"
      color="primary"
      font-size="1"
     />
     <CardTitle>Empowering Your Business with Cloud Solutions</CardTitle>
     <CardText>Our SaaS platform provides scalable and reliable solutions to streamline your business operations and enhance productivity. Join us to leverage the power of cloud technology.</CardText>
    </CardBody>
   </Card>
  </Col>
 </Row>
</template>

<template>
 <Row
  align-items="center"
  justify-content="center"
  gutter="x-3"
 >
  <Col
   col="md-5"
  >
   <Card
    data-aos="fade-up"
    background-color="primary-subtle"
    border-subtractive
    text-alignment="center"
    shadow
   >
    <CardBody>
     <Row
      align-items="center"
      justify-content="center"
      gutter="x-5"
     >
      <Col
       col="md-11"
      >
       <h3>Accelerate Your Business with Cloud-Based Solutions</h3>
       <b-img
        fluid
        rounded
        src="/unsplash/image/device/balazs-ketyi-LPWl2pEVGKc-unsplash.jpg"
        alt="Image Description"
       />
      </Col>
     </Row>
    </CardBody>
   </Card>
  </Col>

  <Col col="md-5">
   <h2>
    Rapid Development and Scalable Deployment
   </h2>
   <p>Choose a workflow that suits your team's needs or create your own to efficiently ship software.</p>

   <List
    unstyled
    font-size="4"
   >
    <ListItem
     icon="bi:check-circle-fill"
     icon-color="blue-300"
    >
     Easy &amp; fast designing
    </ListItem>
    <ListItem
     icon="bi:check-circle-fill"
     icon-color="blue-300"
    >
     Powerful features
    </ListItem>
    <ListItem
     icon="bi:check-circle-fill"
     icon-color="blue-300"
    >
     Advanced HTML/CSS editing
    </ListItem>
    <ListItem
     icon="bi:check-circle-fill"
     icon-color="blue-300"
    >
     React-Native Development
    </ListItem>
    <ListItem
     icon="bi:check-circle-fill"
     icon-color="blue-300"
    >
     User Experience Design
    </ListItem>
   </List>
  </Col>
 </Row>
</template>

<template>
 <Row columns="1 md-2">
  <Col>
   <b-icon
    icon="bi:award"
    display-headings="1"
   />
   <b-div margin="b-5">
    <b-h level="2">
     Comprehensive guides and resources
    </b-h>
    <b-p>Discover and dive into topics ranging from artificial intelligence and digital currencies to creating platforms and growing your business.</b-p>
   </b-div>

   <b-button
    color="primary"
    margin="e-2"
   >
    Browse all guides
   </b-button>
  </Col>
  <Col>
   <Row columns="1 md-2">
    <Col>
     <Card
      relative-height="100"
      border-subtractive
      class="hover:-un-translate-y-0.5"
     >
      <b-div
       background-image="/unsplash/image/500x280/arlington-research-Kz8nHVg_tGI-unsplash.jpg"
       class="un-min-h-xs un-bg-cover un-bg-center card-img-top"
       rounded
      />
      <!-- <CardImgTop src="/unsplash/image/500x280/arlington-research-Kz8nHVg_tGI-unsplash.jpg" /> -->
      <CardBody>
       <b-h
        level="4"
        text-color="primary-emphasis"
       >
        Creative Solutions
       </b-h>
       <b-p text-color="body-secondary">
        Access to advanced techniques
       </b-p>
       <Anchor
        icon="bi:chevron-right"
        icon-end
        to="/"
        stretched
       >
        <b>Learn more</b>
       </Anchor>
      </CardBody>
     </Card>
    </Col>
    <Col>
     <Card
      relative-height="100"
      border-subtractive
      class="hover:-un-translate-y-0.5"
     >
      <b-div
       background-image="/unsplash/image/500x280/annie-spratt-hCb3lIB8L8E-unsplash.jpg"
       class="un-min-h-xs un-bg-cover un-bg-center card-img-top"
       rounded
      />
      <CardBody>
       <b-h
        level="4"
        text-color="primary-emphasis"
       >
        Innovative Ideas
       </b-h>
       <b-p text-color="body-secondary">
        Explore the latest trends and insights
       </b-p>
       <Anchor
        icon="bi:chevron-right"
        icon-end
        to="/"
        stretched
       >
        <b>Learn more</b>
       </Anchor>
      </CardBody>
     </Card>
    </Col>
   </Row>
  </Col>
 </Row>
</template>

<template>
 <Row>
  <Col col="sm-4">
   <b-div text-alignment="center">
    <b-p
     display-headings="4"
     font-weight="bold"
    >
     1.5M+
    </b-p>
    <b-p>Monthly Active Users</b-p>
   </b-div>
  </Col>
  <Col
   col="sm-4"
   margin="b-3 b-sm-0"
  >
   <b-div text-alignment="center">
    <b-p
     display-headings="4"
     font-weight="bold"
    >
     $500K+
    </b-p>
    <b-p>Annual Savings</b-p>
   </b-div>
  </Col>

  <Col col="sm-4">
   <b-div text-alignment="center">
    <b-p
     display-headings="4"
     font-weight="bold"
    >
     3M+
    </b-p>
    <b-p>Current Subscribers</b-p>
   </b-div>
  </Col>
 </Row>
</template>

<template>
 <HeroRow size="md-10">
  <Card shadow>
   <CardBody>
    <Row
     align-items="center"
     gutter="x-5"
    >
     <Col border="end">
      <b-h level="3">
       Our Services
      </b-h>
      <b-p>Tailored solutions for modern businesses</b-p>

      <Row>
       <Col
        margin="b-2"
       >
        <List unstyled>
         <ListItem
          icon="bi:check-circle-fill"
          text-color="success"
         >
          Creative Designs
         </ListItem>
         <ListItem
          icon="bi:check-circle-fill"
          text-color="success"
         >
          Flexible Solutions
         </ListItem>
        </List>
       </Col>

       <Col>
        <List unstyled>
         <ListItem
          icon="bi:check-circle-fill"
          text-color="success"
         >
          24/7 Assistance <badge
           color="secondary"
           rounded="pill"
          >
           New
          </badge>
         </ListItem>
         <ListItem
          icon="bi:check-circle-fill"
          text-color="success"
         >
          Cloud Integration
         </ListItem>
        </List>
       </Col>
      </Row>
     </Col>
     <Col col="md-3">
      <b-h level="4">
       Service Highlights
      </b-h>
      <b-p text-color="secondary">
       Discover the top features designed to meet your requirements.
      </b-p>
      <Anchor
       icon="bi:chevron-right"
       icon-end
       to="/"
       stretched
      >
       <b>Learn more</b>
      </Anchor>
     </Col>
    </Row>
   </CardBody>
  </Card>
 </HeroRow>
</template>

<template>
 <HeroRow
  size="md-10"
  padding="y-3"
 >
  <HeadingBlock
   type="line"
   line-position="inward"
   line-color="primary-subtle"
   line-border-width="3"
   text-alignment="center"
  >
   <b-h level="3">
    Question
   </b-h>
  </HeadingBlock>
  <Accordion
   parent
   flush
   color="transparent"
  >
   <AccordionSection
    title="How can I track my order?"
    active
   >
    Once your order has shipped, you'll receive an email with a tracking number. You can use that number to track your order through the carrier's website or by reaching out to them directly.
   </AccordionSection>
   <AccordionSection
    title="Do you offer international shipping?"
   >
    Yes, we offer international shipping to most countries. Shipping costs will apply, and will be added at checkout. We run discounts and promotions all year, so stay tuned for exclusive deals.
   </AccordionSection>
   <AccordionSection
    title="How do I apply a discount code to my purchase?"
   >
    During checkout, you'll see a box to enter your discount code. Enter it there and your total will be updated accordingly.
   </AccordionSection>
   <AccordionSection
    title="Is my personal information secure?"
   >
    Yes, we take the security of your personal information very seriously. We use industry-standard encryption to protect your data and never share it with third parties.
   </AccordionSection>
  </Accordion>
 </HeroRow>
</template>

<template>
 <HeroRow
  size="md-8"
  padding="y-3"
 >
  <HeadingBlock
   type="line"
   line-position="inward"
   line-color="primary-subtle"
   line-border-width="3"
   text-alignment="center"
   margin="y-3"
  >
   <b-h level="3">
    Product / Service
   </b-h>
  </HeadingBlock>
  <Accordion
   parent
   flush
   margin="b-5"
  >
   <AccordionSection
    title="How long is the warranty for your products"
    active
   >
    Once your order has shipped, you will receive an email with a tracking number. You can use that number to track your order through the carrier's website or by reaching out to them directly.
   </AccordionSection>
   <AccordionSection
    title="Can I return sale Items?"
   >
    Yes, you can return sale items within 30 days of purchase. Please note that all items must be returned in their original condition.
   </AccordionSection>
   <AccordionSection
    title="How can I cancel my subsription?"
   >
    You can cancel your subscription at any time by logging into your account and navigating to the subscription settings page.
   </AccordionSection>
   <AccordionSection
    title="What should I do if my product arrives damaged?"
   >
    if your preaduct arrives damaged, please reach out to our support team within 7 days of receiving your order.
   </AccordionSection>
   <AccordionSection
    title="Can I customize a product?"
   >
    If you lose the link for a theme you purchased, don't panic! We've got you covered. You can login to your account, tap your avatar in the upper right corner, and tap Purchases. If you didn't create a login or can't remember the information, you can use our handy Redownload page, just remember to use the same email you originally made your purchases with.
   </AccordionSection>
  </Accordion>
  <HeadingBlock
   type="line"
   line-position="inward"
   line-color="primary-subtle"
   line-border-width="3"
   text-alignment="center"
   margin="y-3"
  >
   <b-h level="3">
    Support / Account
   </b-h>
  </HeadingBlock>

  <Accordion
   parent
   flush
   margin="b-5"
  >
   <AccordionSection
    title="If you forget your password?"
   >
    If you forget your password, you can reset it by visiting the login page and clicking on "Forgot your password?" You'll receive an email with a link to reset your password.
   </AccordionSection>
   <AccordionSection
    title="Do you offer 24-hour support?"
   >
    Yes, we offer 24-hour support for all our customers. You can reach out to us at any time with questions or concerns.
   </AccordionSection>

   <AccordionSection
    title="How do I change my email address?"
   >
    You can change your email address by logging into your account and navigating to the account settings page.
   </AccordionSection>

   <AccordionSection
    title="How can I improve the security of my account?"
   >
    We recommend enabling two-factor authentication <code>(2FA)</code> and using a strong, unique password to keep your account secure.
   </AccordionSection>
  </Accordion>
  <HeadingBlock
   type="line"
   line-position="inward"
   line-color="primary-subtle"
   line-border-width="3"
   text-alignment="center"
   margin="y-3"
  >
   <b-h level="3">
    Payments
   </b-h>
  </HeadingBlock>
  <Accordion
   parent
   flush
   margin="b-5"
  >
   <AccordionSection
    title="Can I pay in installments?"
   >
    Yes, we offer payment plans for all our products. You can choose to pay in installments at checkout.
    <code>flush</code>
    attribute. This is the first item's accordion body.
   </AccordionSection>
   <AccordionSection
    title="Can I change my payment method after placing an order?"
   >
    Once an order is placed, the payment method cannot be changed. If you need to change your payment method, please reach out to our support team.
   </AccordionSection>
   <AccordionSection
    title="What should I do if my payment fails?"
   >
    If you'd like a refund please reach out to us at <Anchor to="/">
     themes@getbootstrap.com
    </Anchor>if your payment fails, please check your payment method and try again. If you continue to experience issues, please reach out to our support team.
   </AccordionSection>
  </Accordion>
 </HeroRow>
</template>

<template>
 <b-div margin="b-4">
  <b-h level="3">
   Student feedback
  </b-h>
 </b-div>

 <Row margin="b-5">
  <Col col="lg-4">
   <Card
    background-color="primary"
    margin="b-3"
   >
    <CardBody>
     <b-h
      justify-content="center"
      text-color="white"
     >
      4.7
     </b-h>
     <Rating
      :value="90"
      gap="2"
      margin="e-2"
     />
     <b-span text-color="white">
      Course rating
     </b-span>
    </CardBody>
   </Card>
  </Col>
  <Col col="lg-8">
   <b-div
    display="grid"
    gap="2"
   >
    <Row
     align-items="center"
     to="/"
    >
     <Col col="7">
      <Progress>
       <ProgressBar :value="100" />
      </Progress>
     </Col>
     <Col
      col="5"
     >
      <Flex gap="2">
       <Rating
        :value="100"
        gap="1"
       />
       <span>205</span>
      </Flex>
     </Col>
    </Row>

    <Row
     align-items="center"
     to="/"
    >
     <Col col="7">
      <Progress>
       <ProgressBar :value="55" />
      </Progress>
     </Col>

     <Col
      col="5"
     >
      <Flex gap="2">
       <Rating
        :value="80"
        gap="1"
       />
       <span>55</span>
      </Flex>
     </Col>
    </Row>

    <Row
     align-items="center"
     to="/"
    >
     <Col col="7">
      <Progress>
       <ProgressBar :value="23" />
      </Progress>
     </Col>

     <Col
      col="5"
     >
      <Flex gap="2">
       <Rating
        :value="60"
        gap="1"
       />
       <span>23</span>
      </Flex>
     </Col>
    </Row>
    <Row
     align-items="center"
     to="/"
    >
     <Col col="7">
      <Progress>
       <ProgressBar valu="0" />
      </Progress>
     </Col>
     <Col
      col="5"
     >
      <Flex gap="2">
       <Rating
        :value="0"
        gap="1"
       />
       <span>0</span>
      </Flex>
     </Col>
    </Row>
    <Row
     align-items="center"
     to="/"
    >
     <Col col="7">
      <Progress>
       <ProgressBar :value="4" />
      </Progress>
     </Col>
     <Col>
      <Flex gap="2">
       <Rating
        :value="20"
        gap="1"
       />
       <span>4</span>
      </Flex>
     </Col>
    </Row>
   </b-div>
  </Col>
 </Row>
 <b-div
  pading="b-4"
  margin="b-4"
 >
  <Row align-items="center">
   <Col
    col="sm-6"
    margin="b-2 b-sm-0"
   >
    <b-h level="3">
     Reviews
    </b-h>
   </Col>

   <Col col="sm-6">
    <BInputGroup margin="b-3">
     <BFormInput
      type="text"
      placeholder="Search reviews"
      aria-label="Search reviews"
     />
     <b-button color="outline-secondary">
      <BIcon icon="bi:search" />
     </b-button>
    </BInputGroup>
   </Col>
  </Row>
 </b-div>

 <List
  unstyled
  margin="b-5"
 >
  <ListItem>
   <Rating
    :value="100"
    gap="1"
   />

   <Flex
    align-items="center"
    margin="y-3"
   >
    <FlexItem shrink="0">
     <Avatar
      size="sm"
      circle
      img-src="https://reqres.in/img/faces/1-image.jpg"
      alt="Image Description"
     />
    </FlexItem>

    <FlexItem
     grow="1"
     margin="s-3"
     align-items="end"
    >
     <b-h
      level="5"
      margin="b-0"
     >
      Michael Johnson
     </b-h>
    </FlexItem>
    <FlexItem
     shrink="0"
     small
    >
     August 6, 2016
    </FlexItem>
   </Flex>
   <b-div margin="b-5">
    <b-p>The lerning material is concise and easy to follow, offering clear explanations with useful exmaples. It's great for beginners, but could benefit form more advanced content.</b-p>
   </b-div>

   <b-div margin="b-2">
    <b-span
     text-color="dark"
     font-wight="bold"
    >
     Micheal
    </b-span>
    <b-span>- Verified Purchase</b-span>
   </b-div>
   <Flex
    align-items="center"
    border="bottom"
    margin="b-5"
   >
    <b-span
     small
     margin="e-2"
    >
     Was this helpful?
    </b-span>
    <b-button
     color="white"
     size="xs"
    >
     <BIcon icon="bi:hand-thumbs-up" />
     Yes <b-span>(45)</b-span>
    </b-button>
    <b-button
     color="white"
     size="xs"
    >
     <BIcon icon="bi:hand-thumbs-down" />
     No <b-span>(21)</b-span>
    </b-button>
   </Flex>
  </ListItem>
  <ListItem>
   <Rating
    :value="100"
    gap="1"
   />

   <Flex
    align-items="center"
    margin="y-3"
   >
    <FlexItem shrink="0">
     <Avatar
      size="sm"
      circle
      img-src="https://reqres.in/img/faces/4-image.jpg"
      alt="Image Description"
     />
    </FlexItem>

    <FlexItem
     grow="1"
     margin="s-3"
     align-items="end"
    >
     <b-h
      level="5"
      margin="b-0"
     >
      Lee
     </b-h>
    </FlexItem>
    <FlexItem
     shrink="0"
     small
    >
     January 4, 2017
    </FlexItem>
   </Flex>
   <b-div margin="b-5">
    <b-p>This material provides a thorough introduction to the subject, with well-structured lessons. However, I found the pacing a bit slow, and more interactive elements would improve engagement.</b-p>
   </b-div>

   <b-div margin="b-2">
    <b-span
     text-color="dark"
     font-wight="bold"
    >
     Lee
    </b-span>
    <b-span>- Verified Purchase</b-span>
   </b-div>
   <Flex
    align-items="center"
    border="bottom"
    margin="b-5"
   >
    <b-span
     small
     margin="e-2"
    >
     Was this helpful?
    </b-span>
    <b-button
     color="white"
     size="xs"
    >
     <BIcon icon="bi:hand-thumbs-up" />
     Yes <b-span>(2)</b-span>
    </b-button>
    <b-button
     color="white"
     size="xs"
    >
     <BIcon icon="bi:hand-thumbs-down" />
     No <b-span>(0)</b-span>
    </b-button>
   </Flex>
  </ListItem>
  <ListItem>
   <Rating
    :value="100"
    gap="1"
   />

   <Flex
    align-items="center"
    margin="y-3"
   >
    <FlexItem shrink="0">
     <Avatar
      size="sm"
      circle
      img-src="https://reqres.in/img/faces/3-image.jpg"
      alt="Image Description"
     />
    </FlexItem>

    <FlexItem
     grow="1"
     margin="s-3"
     align-items="end"
    >
     <b-h
      level="5"
      margin="b-0"
     >
      Jessy
     </b-h>
    </FlexItem>
    <FlexItem
     shrink="0"
     small
    >
     November 7, 2015
    </FlexItem>
   </Flex>
   <b-div margin="b-5">
    <b-p>Great for beginners with clear exmaples, but advanced topics need more detail. Solid resource for building coding skills</b-p>
   </b-div>

   <b-div margin="b-2">
    <b-span
     text-color="dark"
     font-wight="bold"
    >
     Chrizelle
    </b-span>
    <b-span>- Verified Purchase</b-span>
   </b-div>
   <Flex
    align-items="center"
    border="bottom"
    margin="b-5"
   >
    <b-span
     small
     margin="e-2"
    >
     Was this helpful?
    </b-span>
    <b-button
     color="white"
     size="xs"
    >
     <BIcon icon="bi:hand-thumbs-up" />
     Yes <b-span>(0)</b-span>
    </b-button>
    <b-button
     color="white"
     size="xs"
    >
     <BIcon icon="bi:hand-thumbs-down" />
     No <b-span>(0)</b-span>
    </b-button>
   </Flex>
  </ListItem>
 </List>

 <HeroRow text-alignment="center">
  <b-button
   color="outline-primary"
   margin="e-2"
   class="btn-transition"
  >
   See all reviews
  </b-button>
 </HeroRow>
</template>

<template>
 <Row>
  <Col
   col="md-4"
   margin="b-7 b-md-0"
  >
   <b-div
    border="bottom"
    padding="b-4"
    margin="b-4"
   >
    <Card
     background-color="primary"
     margin="b-3"
    >
     <CardBody>
      <Flex
       justify-content="center"
       align-items="center"
      >
       <FlexItem shrink="0">
        <b-h
         level="3"
         display="3"
         text-color="white"
        >
         4.3
        </b-h>
       </FlexItem>
       <FlexItem
        margin="s-3"
       >
        <Rating
         :value="90"
         gap="1"
         small
        />
        <b-span text-color="white">
         256 reviews
        </b-span>
       </FlexItem>
      </Flex>
     </CardBody>
    </Card>

    <b-h level="3">
     Rating breakdown
    </b-h>

    <Row
     align-items="center"
    >
     <Col col="3">
      <b-span class="text-dark">
       5 stars
      </b-span>
     </Col>

     <Col col="7">
      <Progress>
       <ProgressBar
        :value="100"
       />
      </Progress>
     </Col>

     <Col
      col="2"
      text-alignment="end"
     >
      <b-span>205</b-span>
     </Col>
    </Row>

    <Row
     align-items="center"
    >
     <Col col="3">
      <b-span text-color="dark">
       4 stars
      </b-span>
     </Col>

     <Col col="7">
      <Progress>
       <ProgressBar
        :value="53"
       />
      </Progress>
     </Col>

     <Col
      col="2"
      text-alignment="end"
     >
      <b-span>55</b-span>
     </Col>
    </Row>

    <Row
     align-items="center"
    >
     <Col>
      <b-span text-color="dark">
       3 stars
      </b-span>
     </Col>

     <Col class="col-7">
      <Progress>
       <ProgressBar
        :value="20"
       />
      </Progress>
     </Col>

     <Col
      col="2"
      text-alignment="end"
     >
      <b-span>23</b-span>
     </Col>
    </Row>

    <Row
     align-items="center"
    >
     <Col col="3">
      <b-span>2 stars</b-span>
     </Col>

     <Col col="7">
      <Progress>
       <ProgressBar
        :value="0"
       />
      </Progress>
     </Col>

     <Col
      col="2"
      text-alignment="end"
     >
      <b-span>0</b-span>
     </Col>
    </Row>

    <Row
     align-items="center"
    >
     <Col col="3">
      <b-span>1 stars</b-span>
     </Col>

     <Col col="7">
      <Progress>
       <ProgressBar
        :value="1"
       />
      </Progress>
     </Col>

     <Col
      col="2"
      text-alignment="end"
     >
      <b-span>4</b-span>
     </Col>
    </Row>
   </b-div>

   <b-h
    level="4"
    display="4"
    text-color="primary"
   >
    77%
   </b-h>
   <b-p small>
    of customers recommend this product
   </b-p>
  </Col>

  <Col col="md-8">
   <b-div padding="s-md-4">
    <b-div
     bprder="bottom"
     padding="b-4"
     margin="b-4"
    >
     <Row align-items="center">
      <Col
       col="sm"
       margin="b-2 b-sm-0"
      >
       <b-h
        level="4"
        margin="b-0"
       >
        Sort on
       </b-h>
      </Col>

      <Col col="sm-auto">
       <BFormSelect>
        <option
         value="mostRecent"
         selected
        >
         Most recent
        </option>
        <option value="relevant">
         Relevant
        </option>
        <option value="helpful">
         Helpful
        </option>
        <option value="newest">
         Newest
        </option>
       </BFormSelect>
      </Col>
     </Row>
    </b-div>

    <List
     unstyled
     margin="b-5"
    >
     <ListItem>
      <Rating
       :value="100"
       gap="1"
       margin="b-3"
      />

      <Flex
       align-items="center"
       margin="b-3"
       gap="3"
      >
       <FlexItem shrink="0">
        <Avatar
         circle
         size="sm"
         img-src="https://reqres.in/img/faces/2-image.jpg"
         alt="Image Description"
        />
       </FlexItem>
       <FlexItem
        flex-grow="1"
       >
        <b-h
         level="5"
         margin="b-0"
        >
         Sophia Davis
        </b-h>
       </FlexItem>
       <FlexItem small>
        May 5, 2017
       </FlexItem>
      </Flex>

      <b-div
       margin="b-5"
      >
       <b-p>This sweater is super soft and warm, perfect for chill weather. The fit is true to size. and the colors are just vibarant as shown. I wish it were a bit longer in length, but still a great buy </b-p>
      </b-div>

      <b-div margin="b-2">
       <b-span font-weight="bold">
        Sophia
       </b-span>
       <b-span>- Verified Purchase</b-span>
      </b-div>

      <Flex
       align-items="center"
       border="bottom"
       margin="b-5"
      >
       <b-span
        small
        margin="e-2"
       >
        Was this helpful?
       </b-span>

       <b-button
        color="white"
        size="xs"
       >
        <BIcon
         icon="bi:hand-thumbs-up"
         margin="e-1"
        /> Yes <b-span>(54)</b-span>
       </b-button>
       <b-button
        color="white"
        size="xs"
       >
        <BIcon
         icon="bi:hand-thumbs-down"
         margin="e-1"
        /> No <b-span>(21)</b-span>
       </b-button>
      </Flex>
     </ListItem>

     <ListItem>
      <Rating
       :value="100"
       gap="1"
       margin="b-3"
      />

      <Flex
       align-items="center"
       margin="b-3"
       gap="3"
      >
       <FlexItem shrink="0">
        <Avatar
         circle
         size="sm"
         img-src="https://reqres.in/img/faces/8-image.jpg"
         alt="Image Description"
        />
       </FlexItem>
       <FlexItem
        flex-grow="1"
       >
        <b-h
         level="5"
         margin="b-0"
        >
         James
        </b-h>
       </FlexItem>
       <FlexItem small>
        November 24, 2016
       </FlexItem>
      </Flex>

      <b-div
       margin="b-5"
      >
       <b-p>I love the spaciousness of this tote bag, and the minimalist design works with any outfit. The material is study, but the zipper can be a little stiff. Overall, It's very functional and stylish.</b-p>
      </b-div>

      <b-div margin="b-2">
       <b-span font-weight="bold">
        James
       </b-span>
       <b-span>- Verified Purchase</b-span>
      </b-div>

      <Flex
       align-items="center"
       border="bottom"
       margin="b-5"
      >
       <b-span
        small
        margin="e-2"
       >
        Was this helpful?
       </b-span>

       <b-button
        color="white"
        size="xs"
       >
        <BIcon
         icon="bi:hand-thumbs-up"
         margin="e-1"
        /> Yes <b-span>(8)</b-span>
       </b-button>
       <b-button
        color="white"
        size="xs"
       >
        <BIcon
         icon="bi:hand-thumbs-down"
         margin="e-1"
        /> No <b-span>(1)</b-span>
       </b-button>
      </Flex>
     </ListItem>

     <ListItem>
      <Rating
       :value="100"
       gap="1"
       margin="b-3"
      />

      <Flex
       align-items="center"
       margin="b-3"
       gap="3"
      >
       <FlexItem shrink="0">
        <Avatar
         circle
         size="sm"
         img-src="https://reqres.in/img/faces/6-image.jpg"
         alt="Image Description"
        />
       </FlexItem>
       <FlexItem
        flex-grow="1"
       >
        <b-h
         level="5"
         margin="b-0"
        >
         Michael
        </b-h>
       </FlexItem>
       <FlexItem small>
        December 21, 2018
       </FlexItem>
      </Flex>

      <b-div
       margin="b-5"
      >
       <b-p>The denim jacket has a great vintage look and feels durable. It's a bit snug around the shouldrs.</b-p>
      </b-div>

      <b-div margin="b-2">
       <b-span font-weight="bold">
        Michael
       </b-span>
       <b-span>- Verified Purchase</b-span>
      </b-div>

      <Flex
       align-items="center"
       border="bottom"
       margin="b-5"
      >
       <b-span
        small
        margin="e-2"
       >
        Was this helpful?
       </b-span>

       <b-button
        color="white"
        size="xs"
       >
        <BIcon
         icon="bi:hand-thumbs-up"
         margin="e-1"
        /> Yes <b-span>(3)</b-span>
       </b-button>
       <b-button
        color="white"
        size="xs"
       >
        <BIcon
         icon="bi:hand-thumbs-down"
         margin="e-1"
        /> No <b-span>(0)</b-span>
       </b-button>
      </Flex>
     </ListItem>
    </List>

    <HeroRow
     display="sm-flex"
     justify-content="sm-end"
     gap="2"
     margin="t-3"
    >
     <b-button
      href="#"
     >
      Read more <BIcon
       icon="bi:chevron-right"
       small
       margin="s-1"
      />
     </b-button>
     <b-button
      color="primary"
      rounded="pill"
     >
      Write a review
     </b-button>
    </HeroRow>
   </b-div>
  </Col>
 </Row>
</template>