Hero stylizacja

src/components/hero/Hero.astro

@@ -47,19 +47,19 @@ const isLCP = true;
 
     {Array.isArray(title)
       ? title.map(line => (
-          <h1 class="f-hero-header">{line}</h1>
+          <h1>{line}</h1>
         ))
-      : <h1 class="f-hero-header">{title}</h1>
+      : <h1>{title}</h1>
     }
 
     {subtitle && Array.isArray(subtitle) && (
       <div class="f-hero-subtitles">
-        <h2 class="f-hero-header-2" style={`--delay:0`}>
+        <h2 style={`--delay:0`}>
           {subtitle[0]}
         </h2>
 
         {subtitle.slice(1).map((line, i) => (
-          <p class="f-hero-header-items" style={`--delay:${i + 1}`}>
+          <p style={`--delay:${i + 1}`}>
             {line}
           </p>
         ))}
@@ -67,7 +67,7 @@ const isLCP = true;
     )}
 <!-- TODO: Przerobić ewentualnie na pojedyncze linie -->
     {description && (
-      <p class="f-hero-description">{description}</p>
+      <p class="description">{description}</p>
     )}
 
     {ctas.length > 0 && (

src/styles/hero.css

@@ -1,11 +1,9 @@
 .f-hero {
   @apply relative overflow-hidden text-center py-32 px-6;
 
-  background: linear-gradient(
-    to right,
+  background: linear-gradient(to right,
       var(--fuz-hero-from),
-    var(--fuz-hero-to)
-  );
+      var(--fuz-hero-to));
   color: var(--f-text);
 }
 
@@ -15,13 +13,12 @@
 
 .f-hero-inner {
   @apply relative max-w-7xl mx-auto text-[var(--f-text)];
-}
 
-.f-hero-header {
+  h1 {
     @apply text-5xl md:text-6xl font-extrabold leading-tight mb-6 text-[var(--f-header)];
   }
 
-.f-hero-header-2 {
+  h2 {
     @apply text-xl md:text-4xl font-semibold mb-2 opacity-0 text-[var(--f-header-2)];
     animation-name: fade-in;
     animation-duration: 0.8s;
@@ -29,21 +26,29 @@
     animation-fill-mode: forwards;
   }
 
-.f-hero-header-items {
+  p {
     @apply text-xl md:text-4xl font-semibold mb-2 opacity-0 text-[var(--f-header-items)];
     animation: fade-in 0.3s ease-out forwards;
     animation-delay: calc(var(--delay) * 0.4s);
   }
 
-.f-hero-description {
+  p.description {
     @apply max-w-6xl mx-auto text-lg md:text-xl my-6 leading-snug text-[var(--f-text)];
   }
+}
 
 .f-hero-cta {
   @apply flex justify-center items-center flex-wrap gap-3 mt-8;
 }
 
 @keyframes fade-in {
-  from { opacity: 0; transform: translateY(10px); }
-  to   { opacity: 1; transform: translateY(0); }
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }