print-calculator/frontend/src/app/features/home/home.component.html

    <main class="home-page">
      <section class="hero">
        <div class="container hero-grid">
          <div class="hero-copy">
            <p class="eyebrow">{{ 'HOME.HERO_EYEBROW' | translate }}</p>
            <h1 class="hero-title" [innerHTML]="'HOME.HERO_TITLE' | translate"></h1>
            <p class="hero-lead">
              {{ 'HOME.HERO_LEAD' | translate }}
            </p>
            <p class="hero-subtitle">
              {{ 'HOME.HERO_SUBTITLE' | translate }}
            </p>
            <div class="hero-actions">
              <app-button variant="primary" routerLink="/calculator/basic">{{ 'HOME.BTN_CALCULATE' | translate }}</app-button>
              <app-button variant="outline" routerLink="/shop">{{ 'HOME.BTN_SHOP' | translate }}</app-button>
              <app-button variant="text" routerLink="/contact">{{ 'HOME.BTN_CONTACT' | translate }}</app-button>
            </div>
          </div>
        </div>
      </section>

      <section class="section calculator">
        <div class="container calculator-grid">
          <div class="calculator-copy">
            <h2 class="section-title">{{ 'HOME.SEC_CALC_TITLE' | translate }}</h2>
            <p class="section-subtitle">
              {{ 'HOME.SEC_CALC_SUBTITLE' | translate }}
            </p>
            <ul class="calculator-list">
              <li>{{ 'HOME.SEC_CALC_LIST_1' | translate }}</li>
              <li>{{ 'HOME.SEC_CALC_LIST_2' | translate }}</li>
            </ul>
          </div>
          <app-card class="quote-card">
            <div class="quote-header">
              <div>
                <p class="quote-eyebrow">{{ 'HOME.CARD_CALC_EYEBROW' | translate }}</p>
                <h3 class="quote-title">{{ 'HOME.CARD_CALC_TITLE' | translate }}</h3>
              </div>
              <span class="quote-tag">{{ 'HOME.CARD_CALC_TAG' | translate }}</span>
            </div>
            <ul class="quote-steps">
              <li>{{ 'HOME.CARD_CALC_STEP_1' | translate }}</li>
              <li>{{ 'HOME.CARD_CALC_STEP_2' | translate }}</li>
              <li>{{ 'HOME.CARD_CALC_STEP_3' | translate }}</li>
            </ul>
            <div class="quote-actions">
              <app-button variant="primary" [fullWidth]="true" routerLink="/calculator/basic">{{ 'HOME.BTN_OPEN_CALC' | translate }}</app-button>
              <app-button variant="outline" [fullWidth]="true" routerLink="/contact">{{ 'HOME.BTN_CONTACT' | translate }}</app-button>
            </div>
          </app-card>
        </div>
      </section>

      <section class="section capabilities">
        <div class="capabilities-bg"></div>
        <div class="container">
          <div class="section-head">
            <h2 class="section-title">{{ 'HOME.SEC_CAP_TITLE' | translate }}</h2>
            <p class="section-subtitle">
              {{ 'HOME.SEC_CAP_SUBTITLE' | translate }}
            </p>
          </div>
          <div class="cap-cards">
            <app-card>
              <div class="card-image-placeholder">
                  <!-- <img src="..." alt="..."> -->
              </div>
              <h3>{{ 'HOME.CAP_1_TITLE' | translate }}</h3>
              <p class="text-muted">{{ 'HOME.CAP_1_TEXT' | translate }}</p>
            </app-card>
            <app-card>
              <div class="card-image-placeholder">
                  <!-- <img src="..." alt="..."> -->
              </div>
              <h3>{{ 'HOME.CAP_2_TITLE' | translate }}</h3>
              <p class="text-muted">{{ 'HOME.CAP_2_TEXT' | translate }}</p>
            </app-card>
            <app-card>
              <div class="card-image-placeholder">
                  <!-- <img src="..." alt="..."> -->
              </div>
              <h3>{{ 'HOME.CAP_3_TITLE' | translate }}</h3>
              <p class="text-muted">{{ 'HOME.CAP_3_TEXT' | translate }}</p>
            </app-card>
            <app-card>
              <div class="card-image-placeholder">
                  <!-- <img src="..." alt="..."> -->
              </div>
              <h3>{{ 'HOME.CAP_4_TITLE' | translate }}</h3>
              <p class="text-muted">{{ 'HOME.CAP_4_TEXT' | translate }}</p>
            </app-card>
          </div>
        </div>
      </section>

      <section class="section shop">
        <div class="container split">
          <div class="shop-copy">
            <h2 class="section-title">{{ 'HOME.SEC_SHOP_TITLE' | translate }}</h2>
            <p>
              {{ 'HOME.SEC_SHOP_TEXT' | translate }}
            </p>
            <ul class="shop-list">
              <li>{{ 'HOME.SEC_SHOP_LIST_1' | translate }}</li>
              <li>{{ 'HOME.SEC_SHOP_LIST_2' | translate }}</li>
              <li>{{ 'HOME.SEC_SHOP_LIST_3' | translate }}</li>
            </ul>
            <div class="shop-actions">
              <app-button variant="primary" routerLink="/shop">{{ 'HOME.BTN_DISCOVER' | translate }}</app-button>
              <app-button variant="outline" routerLink="/contact">{{ 'HOME.BTN_REQ_SOLUTION' | translate }}</app-button>
            </div>
          </div>
          <div class="shop-cards">
            <app-card>
              <h3>{{ 'HOME.CARD_SHOP_1_TITLE' | translate }}</h3>
              <p class="text-muted">{{ 'HOME.CARD_SHOP_1_TEXT' | translate }}</p>
            </app-card>
            <app-card>
              <h3>{{ 'HOME.CARD_SHOP_2_TITLE' | translate }}</h3>
              <p class="text-muted">{{ 'HOME.CARD_SHOP_2_TEXT' | translate }}</p>
            </app-card>
            <app-card>
              <h3>{{ 'HOME.CARD_SHOP_3_TITLE' | translate }}</h3>
              <p class="text-muted">{{ 'HOME.CARD_SHOP_3_TEXT' | translate }}</p>
            </app-card>
          </div>
        </div>
      </section>

      <section class="section about">
        <div class="container about-grid">
          <div class="about-copy">
            <h2 class="section-title">{{ 'HOME.SEC_ABOUT_TITLE' | translate }}</h2>
            <p>
              {{ 'HOME.SEC_ABOUT_TEXT' | translate }}
            </p>
            <app-button variant="outline" routerLink="/contact">{{ 'HOME.BTN_CONTACT' | translate }}</app-button>
          </div>
          <div class="about-media">
            <div class="about-feature-image">
              <!-- Foto founders -->
              <span class="text-sm">{{ 'HOME.FOUNDERS_PHOTO' | translate }}</span>
            </div>
          </div>
        </div>
      </section>
    </main>