Hero

Features

• Engaging Design: Eye-catching layout with a focus on the headline and call-to-action.
• Responsive Layout: Optimized for all screen sizes, ensuring a consistent experience.
• Customizable Content: Easily adjust the headline, description, button, and image through the TypeScript file.
• Integrated Call-to-Action: Includes a checkout button for user engagement.

Usage

Step 1: Import the Component

Add the HeroComponent to your Angular project by including it in your page component. Remember to add it to the imports array.

import { HeroComponent } from "src/app/components/hero/hero.component";
 
@Component({
  ...
  imports: [..., HeroComponent],
  ...
})

Step 2: Add the Template

Include the component on your page:

<hero></hero>

Configuration

Customization in TypeScript

You can customize the Hero component by updating the following properties in the TypeScript file:

• showDiscountInfo (boolean): Determines if discount information is displayed in the call-to-action button. Defaults to false.
• heroHeader (string): The main headline of the hero section.
• heroHeaderHighlightedText (string): The highlighted text at the end of the headline.
• heroImg (string): The source URL for the hero image.
• heroSecondaryText (string): The secondary description text below the headline.

Example:

@Component({
  selector: "hero",
  standalone: true,
  imports: [CommonModule, CheckoutButtonComponent],
  templateUrl: "./hero.component.html",
})
export class HeroComponent {
  showDiscountInfo: boolean = true;
  heroHeader: string = "Launch your SaaS effortlessly,";
  heroHeaderHighlightedText: string = "earn now";
  heroImg: string = "./assets/images/custom-hero-image.webp";
  heroSecondaryText: string = `With our Angular boilerplate, you can build your SaaS, AI app, or web application faster than ever before.`;
}

Notes

• Use the TypeScript properties to dynamically adjust the Hero section's content and behavior.
• The component automatically handles responsive design and integrates seamlessly with the CheckoutButton component.