fix: 1:1 prototype port – exact hms-* CSS, real logo, all components from app.js

frontend/tests/unit/HomePage.test.ts

@@ -2,23 +2,29 @@ import { describe, it, expect } from "vitest";
 import { readFileSync } from "node:fs";
 import { resolve } from "node:path";
 
-describe("Home Page", () => {
+describe("Home Page (prototype port)", () => {
   const pagePath = resolve(__dirname, "../../pages/index.vue");
   const content = readFileSync(pagePath, "utf-8");
 
-  it("should render hero with headline 'Veranstaltungstechnik'", () => {
+  it("should have hms-hero section", () => {
+    expect(content).toContain("hms-hero");
+    expect(content).toContain("hms-hero-bg");
+    expect(content).toContain("hms-hero-overlay");
+  });
+
+  it("should have hero title with Veranstaltungstechnik text", () => {
     expect(content).toContain("Veranstaltungstechnik");
-    expect(content).toContain('data-testid="hero-headline"');
+    expect(content).toContain("Professionelle Technik");
   });
 
-  it("should have CTA button linking to /mietkatalog", () => {
-    expect(content).toContain('to="/mietkatalog"');
+  it("should have Mietkatalog button", () => {
     expect(content).toContain("Mietkatalog");
+    expect(content).toContain("hms-btn-primary");
   });
 
-  it("should have CTA button linking to /kontakt", () => {
-    expect(content).toContain('to="/kontakt"');
+  it("should have Beratung anfragen button", () => {
     expect(content).toContain("Beratung anfragen");
+    expect(content).toContain("hms-btn-secondary");
   });
 
   it("should display all 8 services", () => {
@@ -32,45 +38,37 @@ describe("Home Page", () => {
     expect(content).toContain("Booking");
   });
 
-  it("should have services section with data-testid", () => {
-    expect(content).toContain('data-testid="services-section"');
+  it("should use ServiceCard component", () => {
+    expect(content).toContain("ServiceCard");
   });
 
-  it("should have speaker grid with 6 equipment types", () => {
-    expect(content).toContain('data-testid="speaker-grid"');
-    expect(content).toContain("Lautsprecher");
-    expect(content).toContain("Mischpulte");
-    expect(content).toContain("Lichtanlagen");
-    expect(content).toContain("Rigging");
-    expect(content).toContain("Traversen");
-    expect(content).toContain("Komplett-Setups");
+  it("should have hms-speaker-grid with 6 speakers", () => {
+    expect(content).toContain("hms-speaker-grid");
+    expect(content).toContain("hms-speaker-item");
+    expect(content).toContain("SpeakerIcon");
+    expect(content).toContain("L-Acoustics K2");
+    expect(content).toContain("L-Acoustics KS28");
+    expect(content).toContain("Robe Pointe");
   });
 
   it("should have about section with stats", () => {
-    expect(content).toContain('data-testid="about-section"');
-    expect(content).toContain('data-testid="stat-years"');
     expect(content).toContain("20+");
-    expect(content).toContain('data-testid="stat-devices"');
-    expect(content).toContain("1000+");
-    expect(content).toContain('data-testid="stat-events"');
-    expect(content).toContain("500+");
+    expect(content).toContain("1.000+");
+    expect(content).toContain("Jahre Erfahrung");
+    expect(content).toContain("Geräte im Lager");
   });
 
-  it("should have mietkatalog CTA section", () => {
-    expect(content).toContain('data-testid="mietkatalog-cta"');
-    expect(content).toContain('data-testid="cta-mietkatalog-link"');
+  it("should have CTA section with Katalog durchsuchen", () => {
+    expect(content).toContain("Katalog durchsuchen");
+    expect(content).toContain("Online-Mietkatalog");
   });
 
   it("should use TypeScript with lang=ts", () => {
     expect(content).toContain('<script setup lang="ts">');
   });
 
-  it("should use Tailwind classes, no inline styles", () => {
-    expect(content).not.toContain('style="');
-  });
-
-  it("should use useHead for page title", () => {
-    expect(content).toContain("useHead");
-    expect(content).toContain("HMS Licht");
+  it("should use hms-badge hms-badge-primary", () => {
+    expect(content).toContain("hms-badge");
+    expect(content).toContain("hms-badge-primary");
   });
 });