WithWithout

The WithWithout component is a reusable Angular component that visually compares two scenarios, highlighting the benefits of using a service or product.

Features

Side-by-Side Comparison: Clearly displays differences between two scenarios.
Customizable Content: Allows dynamic updates for titles and lists.
Lucide Icons: Uses visually appealing Lucide icons for emphasis.
Responsive Design: Adapts seamlessly to different screen sizes.

Usage

Step 1: Import the Component

Add the WithWithoutComponent to your Angular project by including it in your module or component imports array.

import { WithWithoutComponent } from "src/app/components/with-without/with-without.component";
 
@Component({
  ...
  imports: [..., WithWithoutComponent],
  ...
})

Step 2: Add the Template

Include the WithWithout component in your template:

<with-without></with-without>

Component Structure

HTML Template

The default structure includes:

Heading: A bold title that draws attention to the comparison.
Two Sections:
- "Without" Section: Highlights pain points without the service or product.
- "With" Section: Emphasizes benefits of using the service or product.
Icon Indicators: Uses xIcon for negatives and checkIcon for positives.

Example Template

<div
  class="flex justify-content-center align-items-center flex-column py-5 px-2 mx-1 md:mx-6 xl:mx-8"
>
  <h3
    class="text-900 font-bold text-2xl md:text-5xl mb-5 text-center"
    style="max-width: 700px"
  >
    Tired of creating websites?
  </h3>
  <div class="flex flex-column lg:flex-row justify-content-center gap-5">
    <div
      class="w-full lg:w-30rem shadow-4 p-3 md:p-5 h-full flex flex-column border-round-lg bg-red-200"
    >
      <span
        class="text-red-600 block font-medium text-xl mb-3 text-left letter-spacing-neg-04"
      >
        Without easylanding.ai
      </span>
      <ul class="list-none p-0 m-0 flex-grow-1">
        <li class="text-red-600 flex align-items-center mb-2 text-sm text-300">
          <lucide-angular
            [img]="xIcon"
            [size]="18"
            class="pricing-icon"
          ></lucide-angular>
          <span class="ml-2">Hours of coding</span>
        </li>
        <li class="text-red-600 flex align-items-center mb-2 text-sm text-300">
          <lucide-angular
            [img]="xIcon"
            [size]="18"
            class="pricing-icon"
          ></lucide-angular>
          <span class="ml-2">Struggle with styles</span>
        </li>
      </ul>
    </div>
    <div
      class="w-full lg:w-30rem shadow-4 p-3 md:p-5 h-full flex flex-column border-round-lg bg-teal-200 relative"
    >
      <span
        class="text-teal-600 block font-medium text-xl mb-3 text-left letter-spacing-neg-04"
      >
        With easylanding.ai
      </span>
      <ul class="list-none p-0 m-0 flex-grow-1">
        <li class="text-teal-600 flex align-items-center mb-2 text-sm text-300">
          <lucide-angular
            [img]="checkIcon"
            [size]="18"
            class="pricing-icon"
          ></lucide-angular>
          <span class="ml-2">Website generated with AI in minutes</span>
        </li>
        <li class="text-teal-600 flex align-items-center mb-2 text-sm text-300">
          <lucide-angular
            [img]="checkIcon"
            [size]="18"
            class="pricing-icon"
          ></lucide-angular>
          <span class="ml-2">Modern styled landing page</span>
        </li>
      </ul>
    </div>
  </div>
</div>

Notes

The WithWithout component is ideal for visually showcasing the advantages of your service or product.
Content and styles are fully customizable to suit your needs.

WithWithout

On this page