"Podglad reklamy" wyglada jak szkic, a nie dzialajacy profil

Panel na /firmy-i-uslugi mial 9 klikalnych przyciskow bez akcji oraz
zaszyte dane cudzej firmy ("4.8 (96 opinii)", "12 lat na rynku",
"230+ zrealizowanych projektow"). Teraz nic nie jest klikalne, liczby
zastapily podpisy pol, a na okladce jest plakietka "Podglad".

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

frontend/src/App.tsx

@@ -20308,37 +20308,41 @@ function ServicesPage() {
         <aside className="services-preview" aria-label="Podgląd firm">
           <ServicesDirectoryPreview />
 
-          <section className="service-panel profile-panel">
-            <div className="profile-cover" style={{ backgroundImage: `url(${heroImage})` }} />
+          {/* Szkic przyszlego profilu firmy, a nie dzialajacy profil: nic tu nie jest klikalne
+              i nie ma zadnych wymyslonych liczb - w miejsce danych stoja podpisy pol. */}
+          <section className="service-panel profile-panel is-preview" aria-label="Przykładowy wygląd profilu firmy">
+            <div className="profile-cover" style={{ backgroundImage: `url(${heroImage})` }}>
+              <em className="preview-tag">Podgląd</em>
+            </div>
             <div className="profile-head">
               <div className="profile-logo">
                 <Icon name="hammer" />
               </div>
               <div>
-                <h2>Podgląd reklamy</h2>
-                <p><Icon name="star" /> 4.8 (96 opinii)</p>
-                <span>Tak zobaczą Twoją firmę klienci</span>
+                <h2>Nazwa Twojej firmy</h2>
+                <p><Icon name="star" /> Miejsce na oceny od klientów</p>
+                <span>Tak będzie wyglądać profil, gdy uruchomimy katalog firm</span>
               </div>
-              <button>Skontaktuj się</button>
+              <span className="profile-cta">Skontaktuj się</span>
             </div>
             <div className="profile-actions">
-              <button><Icon name="phone" /> Zadzwoń</button>
-              <button><Icon name="message" /> Napisz wiadomość</button>
-              <button><Icon name="heart" /> Dodaj do ulubionych</button>
+              <span><Icon name="phone" /> Zadzwoń</span>
+              <span><Icon name="message" /> Napisz wiadomość</span>
+              <span><Icon name="heart" /> Dodaj do ulubionych</span>
             </div>
             <div className="profile-tabs">
-              <button className="active">O firmie</button>
-              <button>Usługi</button>
-              <button>Opinie (96)</button>
-              <button>Realizacje</button>
-              <button>Kontakt</button>
+              <span className="active">O firmie</span>
+              <span>Usługi</span>
+              <span>Opinie</span>
+              <span>Realizacje</span>
+              <span>Kontakt</span>
             </div>
             <div className="profile-about">
               <h3>O firmie</h3>
               <p>W tym miejscu stanie opis Twojej firmy - czym się zajmujesz, co Cię wyróżnia i dla kogo pracujesz. Poniżej pokażemy najważniejsze informacje o Twojej działalności.</p>
               <div className="profile-stats">
-                <span><Icon name="calendar" /> 12 lat na rynku</span>
-                <span><Icon name="group" /> 230+ zrealizowanych projektów</span>
+                <span><Icon name="calendar" /> Lata na rynku</span>
+                <span><Icon name="group" /> Zrealizowane projekty</span>
                 <span><Icon name="shield" /> Gwarancja na usługi</span>
                 <span><Icon name="document" /> Faktura VAT</span>
               </div>

frontend/src/styles.css

@@ -10271,7 +10271,7 @@ a.city-card:hover {
   margin-top: 7px;
 }
 
-.profile-head > button {
+.profile-head > .profile-cta {
   align-self: start;
   background: #14223a;
   border: 0;
@@ -10290,7 +10290,7 @@ a.city-card:hover {
   padding: 0 28px 22px;
 }
 
-.profile-actions button {
+.profile-actions span {
   align-items: center;
   background: #ffffff;
   border: 1px solid #dce4ec;
@@ -10312,7 +10312,7 @@ a.city-card:hover {
   padding: 0 28px;
 }
 
-.profile-tabs button {
+.profile-tabs span {
   background: transparent;
   border: 0;
   color: #526171;
@@ -35310,3 +35310,36 @@ a.listing-detail-secondary {
   color: #526171;
   display: inline-flex;
 }
+
+/* "Podglad reklamy" to szkic przyszlego profilu firmy - nic tu nie jest klikalne. */
+.profile-panel.is-preview {
+  position: relative;
+}
+
+.profile-panel.is-preview :is(.profile-cta, .profile-actions span, .profile-tabs span) {
+  cursor: default;
+  user-select: none;
+}
+
+.profile-head > .profile-cta {
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
+  padding: 0 16px;
+}
+
+.preview-tag {
+  background: rgba(20, 34, 58, 0.85);
+  border-radius: 999px;
+  color: #ffffff;
+  font-size: 10px;
+  font-style: normal;
+  font-weight: 900;
+  left: 14px;
+  letter-spacing: 0.04em;
+  padding: 4px 10px;
+  position: absolute;
+  text-transform: uppercase;
+  top: 14px;
+  z-index: 2;
+}