since3-website/modules/landingPage/ui/components/pricing/pricing-section.tsx

import { PriceCalculator } from "./price-calculator"

export function PricingSection() {
  return (
    <section id="preise" aria-labelledby="preise-title" data-theme="light" className="py-section">
      <div className="container-site">
        <div className="flex flex-col justify-between gap-8 md:flex-row md:items-end">
          <div>
            <p className="font-mono text-label text-fg-muted">(Preise)</p>
            <h2 id="preise-title" className="mt-6 text-display type-poster">
              Was kostet
              <br />
              <span className="text-outline">das?</span>
            </h2>
          </div>
          <p className="type-body max-w-[40ch] text-fg-muted">
            Stell dein Projekt zusammen und sieh sofort eine ehrliche Preisspanne.
            Keine versteckten Kosten, kein „Preis auf Anfrage“.
          </p>
        </div>

        <PriceCalculator className="mt-16 md:mt-20" />
      </div>
    </section>
  )
}