Toju/website/src/app/pages/philosophy/philosophy.component.html

<div class="min-h-screen pt-32 pb-20">
  <!-- Hero -->
  <section class="container mx-auto px-6 mb-24">
    <div class="max-w-3xl mx-auto text-center">
      <div
        class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-purple-500/10 border border-purple-500/20 text-purple-400 text-sm font-medium mb-6"
      >
        {{ 'pages.philosophy.hero.badge' | translate }}
      </div>
      <h1 class="text-4xl md:text-6xl font-extrabold text-foreground mb-6">{{ 'pages.philosophy.hero.titlePrefix' | translate }} <span class="gradient-text">{{ 'pages.philosophy.hero.titleHighlight' | translate }}</span> {{ 'common.brand' | translate }}</h1>
      <p class="text-lg text-muted-foreground leading-relaxed">{{ 'pages.philosophy.hero.description' | translate }}</p>
    </div>
  </section>

  <app-ad-slot />

  <!-- Main content -->
  <section class="container mx-auto px-6 mb-24">
    <article class="max-w-3xl mx-auto prose prose-invert prose-lg">
      <!-- Ownership -->
      <div class="section-fade mb-16">
        <h2 class="text-2xl md:text-3xl font-bold text-foreground mb-6 !mt-0">{{ 'pages.philosophy.sections.ownership.title' | translate }}</h2>
        <p class="text-muted-foreground leading-relaxed">
          {{ 'pages.philosophy.sections.ownership.paragraph1' | translate }}
        </p>
        <p class="text-muted-foreground leading-relaxed">
          {{ 'pages.philosophy.sections.ownership.paragraph2' | translate }}
        </p>
      </div>

      <!-- No predatory pricing -->
      <div class="section-fade mb-16">
        <h2 class="text-2xl md:text-3xl font-bold text-foreground mb-6">{{ 'pages.philosophy.sections.paywalls.title' | translate }}</h2>
        <p class="text-muted-foreground leading-relaxed">
          {{ 'pages.philosophy.sections.paywalls.paragraph1' | translate }}
        </p>
        <p class="text-muted-foreground leading-relaxed" [innerHTML]="'pages.philosophy.sections.paywalls.paragraph2' | translate"></p>
      </div>

      <app-ad-slot />

      <!-- Privacy as a right -->
      <div class="section-fade mb-16">
        <h2 class="text-2xl md:text-3xl font-bold text-foreground mb-6">{{ 'pages.philosophy.sections.privacy.title' | translate }}</h2>
        <p class="text-muted-foreground leading-relaxed">
          {{ 'pages.philosophy.sections.privacy.paragraph1' | translate }}
        </p>
        <p class="text-muted-foreground leading-relaxed" [innerHTML]="'pages.philosophy.sections.privacy.paragraph2' | translate"></p>
      </div>

      <!-- Better world -->
      <div class="section-fade mb-16">
        <h2 class="text-2xl md:text-3xl font-bold text-foreground mb-6">{{ 'pages.philosophy.sections.heart.title' | translate }}</h2>
        <p class="text-muted-foreground leading-relaxed">
          {{ 'pages.philosophy.sections.heart.paragraph1' | translate }}
        </p>
        <p class="text-muted-foreground leading-relaxed" [innerHTML]="'pages.philosophy.sections.heart.paragraph2' | translate"></p>
      </div>

      <!-- Open source -->
      <div class="section-fade mb-16">
        <h2 class="text-2xl md:text-3xl font-bold text-foreground mb-6">{{ 'pages.philosophy.sections.openSource.title' | translate }}</h2>
        <p class="text-muted-foreground leading-relaxed">
          {{ 'pages.philosophy.sections.openSource.paragraph1' | translate }}
        </p>
        <p class="text-muted-foreground leading-relaxed">
          {{ 'pages.philosophy.sections.openSource.paragraph2' | translate }}
        </p>
      </div>

      <!-- Commitment -->
      <div class="section-fade rounded-2xl border border-purple-500/20 bg-gradient-to-br from-purple-950/20 to-violet-950/20 p-8 md:p-10">
        <h2 class="text-2xl md:text-3xl font-bold text-foreground mb-6 !mt-0">{{ 'pages.philosophy.promise.title' | translate }}</h2>
        <ul class="space-y-4 text-muted-foreground !list-none !pl-0">
          <li class="flex items-start gap-3">
            <svg
              class="w-5 h-5 text-purple-400 flex-shrink-0 mt-0.5"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M5 13l4 4L19 7"
              />
            </svg>
            <span [innerHTML]="'pages.philosophy.promise.items.noPaywalls' | translate"></span>
          </li>
          <li class="flex items-start gap-3">
            <svg
              class="w-5 h-5 text-purple-400 flex-shrink-0 mt-0.5"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M5 13l4 4L19 7"
              />
            </svg>
            <span [innerHTML]="'pages.philosophy.promise.items.noDataSales' | translate"></span>
          </li>
          <li class="flex items-start gap-3">
            <svg
              class="w-5 h-5 text-purple-400 flex-shrink-0 mt-0.5"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M5 13l4 4L19 7"
              />
            </svg>
            <span [innerHTML]="'pages.philosophy.promise.items.openSource' | translate"></span>
          </li>
          <li class="flex items-start gap-3">
            <svg
              class="w-5 h-5 text-purple-400 flex-shrink-0 mt-0.5"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M5 13l4 4L19 7"
              />
            </svg>
            <span [innerHTML]="'pages.philosophy.promise.items.usersBeforeProfit' | translate"></span>
          </li>
        </ul>
        <p class="text-muted-foreground mt-6 text-sm">{{ 'pages.philosophy.promise.signature' | translate }}</p>
      </div>
    </article>
  </section>

  <!-- Support CTA -->
  <section class="container mx-auto px-6">
    <div class="section-fade max-w-2xl mx-auto text-center">
      <h2 class="text-2xl md:text-3xl font-bold text-foreground mb-4">{{ 'pages.philosophy.support.title' | translate }}</h2>
      <p class="text-muted-foreground mb-8 leading-relaxed">
        {{ 'pages.philosophy.support.description' | translate }}
      </p>
      <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
        <a
          href="https://buymeacoffee.com/myxelium"
          target="_blank"
          rel="noopener noreferrer"
          class="inline-flex items-center gap-2 px-6 py-3 rounded-xl bg-gradient-to-r from-yellow-500 to-amber-500 text-black font-semibold hover:from-yellow-400 hover:to-amber-400 transition-all shadow-lg shadow-yellow-500/25"
        >
          <img
            src="/images/buymeacoffee.png"
            alt=""
            width="20"
            height="20"
            class="w-5 h-5 object-contain"
          />
          {{ 'common.actions.buyUsCoffee' | translate }}
        </a>
        <a
          routerLink="/downloads"
          class="inline-flex items-center gap-2 px-6 py-3 rounded-xl border border-border/50 bg-card/50 text-foreground font-medium hover:border-purple-500/30 transition-all"
        >
          {{ 'common.actions.downloadBrand' | translate }}
          <svg
            class="w-4 h-4"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M9 5l7 7-7 7"
            />
          </svg>
        </a>
      </div>
    </div>
  </section>
</div>