Static Page

Step 1: Set Up the Home Page Component

1. Locate or create the home page component in your Angular project:

   ng generate component home-page

2. Open the home-page.component.html file.

Step 2: Use Prebuilt Components

Available Components

In the /src/app/components directory, you’ll find prebuilt components such as:

• HeaderComponent: For the navigation bar.
• HeroComponent: For a hero section with a headline and call-to-action button.
• ProblemComponent: For explaining your product’s purpose.
• FeaturesComponent: For highlighting your product’s key features.
• PricingComponent: For showcasing pricing tiers.
• FAQComponent: For addressing common questions.
• CTAComponent: For call-to-action buttons or forms.
• FooterComponent: For the footer section.

Step 3: Integrate Prebuilt Components

Use the prebuilt components provided in your project to structure your landing page. Replace the content of home-page.component.html with the following:

<app-header></app-header>
<main>
  <app-hero></app-hero>
  <app-problem></app-problem>
  <app-features></app-features>
  <app-pricing></app-pricing>
  <app-faq></app-faq>
  <app-cta></app-cta>
</main>
<app-footer></app-footer>

This layout will include:

• Header: Navigation bar.
• Hero: Headline and call-to-action section.
• Problem: A section to describe the problem your product solves.
• Features: Showcase your product’s features.
• Pricing: Display pricing plans.
• FAQ: Address common questions.
• CTA: Call-to-action section for conversions.
• Footer: Footer with links and additional details.

Step 4: Customize Component Content

Each component is modular, and its content is defined in the respective .ts and .html files within the /src/app/components folder. To customize:

• HeroComponent: Edit the headline and call-to-action text.
• FeaturesComponent: Add descriptions of your product’s features.
• PricingComponent: Define subscription tiers or pricing plans.
• CTAComponent: Include forms or links for user engagement.

Step 5: Add SEO Using the SEO Service

To optimize your page for search engines, use the provided SeoService. Follow these steps:

Inject the SEO Service

1. Open the home-page.component.ts file.
2. Inject the SeoService into the component constructor.

import { Component, OnInit } from '@angular/core';
import { SeoService } from '../../services/seo.service'; // todo dzt change path
 
@Component({
  selector: 'app-home-page',
  templateUrl: './home-page.component.html',
  styleUrls: ['./home-page.component.css'],
})
export class HomePageComponent implements OnInit {
  constructor(private seoService: SeoService) {}
 
  ngOnInit() {
    this.seoService.updateMetaTags({
      title: 'Your Product Name - Best Solution for X',
      description: 'Brief description of your product.',
      keywords: ['product', 'solution', 'your brand'],
      canonicalUrlRelative: '/',
      openGraph: {
        title: 'Your Product Name',
        description: 'Detailed description of your product.',
        image: '/assets/images/product-image.png',
        type: 'website',
      },
      twitter: {
        card: 'summary_large_image',
        creator: '@yourbrand',
        image: '/assets/images/product-image.png',
      },
    });
 
    // Optional: Inject structured data for Schema.org
    this.seoService.renderSchemaTags();
  }
}

Step 6: Route to the Home Page

Add a route to the home page in app-routing.module.ts:

const routes: Routes = [
  { path: '', component: HomePageComponent },
];

Step 7: View Your Page

Run the Angular development server:

ng serve

Navigate to http://localhost:4200 to see your home page in action.

Step 8: Build for Deployment

To deploy your Angular app on platforms like Netlify, you need to build the app for production:

1. Run the following command to generate production-ready files:

   ng build --prod

2. The build output will be generated in the /dist folder. Inside this folder, you'll find a subfolder named after your project.

3. Upload the contents of this folder to Netlify or another static hosting provider.

Step 9: Deploy Your Page

Deploy your application using platforms like Netlify, Vercel, or Firebase Hosting.

Congratulations! You’ve successfully built a landing page using prebuilt components in Angular.