FeaturedOn

The FeaturedOn component is a reusable Angular component that showcases a list of platforms where the product has been featured, with logos and links.

Features

Platform Logos: Displays logos of popular platforms where the product is featured.
Interactive Effects: Includes hover effects for logos to enhance user interaction.
Responsive Design: Adapts layout for various screen sizes with a flexible grid.
Customizable Links: Allows easy customization of platform links.

Usage

Step 1: Import the Component

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

import { FeaturedOnComponent } from "src/app/components/featured-on/featured-on.component";
 
@Component({
  ...
  imports: [..., FeaturedOnComponent],
  ...
})

Step 2: Add the Template

Include the component in your template:

<featured-on></featured-on>

Component Structure

HTML Template

The FeaturedOnComponent includes:

Heading: A title indicating platforms where the product is featured.
Logo Links: A series of linked logos with hover effects.

Example

<div
  class="flex gap-3 lg:gap-4 justify-content-center align-items-center flex-wrap p-4 my-4"
>
  <p
    class="text-xs text-400 font-medium w-full md:w-min text-center white-space-nowrap m-0"
  >
    Featured on
  </p>
  <a class="img-link lg:h-2rem" [href]="hackerNewsLink" target="_blank">
    <img
      src="./assets/icons/hacker-news.svg"
      alt="Hacker news logo"
      class="h-full"
    />
  </a>
  <a class="img-link lg:h-2rem" [href]="productHuntLink" target="_blank">
    <img
      src="./assets/icons/product-hunt.svg"
      alt="Product Hunt logo"
      class="h-full"
    />
  </a>
  <a class="img-link lg:h-2rem" [href]="redditLink" target="_blank">
    <img src="./assets/icons/reddit.svg" alt="Reddit logo" class="h-full" />
  </a>
  <a class="img-link lg:h-2rem" [href]="xLink" target="_blank">
    <img src="./assets/icons/x.svg" alt="X logo" class="h-full" />
  </a>
</div>

Configuration

Custom Links

The FeaturedOnComponent provides default links to popular platforms. These links can be updated as needed:

xLink: string = "https://x.com/home";
redditLink: string = "https://www.reddit.com/";
productHuntLink: string = "https://www.producthunt.com/";
hackerNewsLink: string = "https://news.ycombinator.com/news";

Replace the URLs with custom links to point to specific pages.

FeaturedOn

On this page