Zmiana hero i treści

src/styles/hero.css

@@ -1,4 +1,4 @@
-.f-hero {
+/* .f-hero {
   @apply relative overflow-hidden text-center py-28 px-6;
 }
 
@@ -46,4 +46,137 @@
     opacity: 1;
     transform: translateY(0);
   }
+} */
+
+
+/* ==========================================
+   HERO COMPONENT STYLES - TAILWIND
+   ========================================== */
+
+/* Base Hero Section */
+.f-hero {
+  @apply relative min-h-[500px] md:min-h-[600px] h-5/6;
+  @apply flex items-center overflow-hidden;
+}
+
+/* Background Image */
+.f-hero__bg {
+  @apply absolute inset-0 w-full h-full object-cover z-0;
+}
+
+/* Overlay - Mobile (jednolity) */
+.f-hero__overlay {
+  @apply absolute inset-0 z-[1] bg-black/30;
+}
+
+/* Overlay - Desktop Right */
+.f-hero--right .f-hero__overlay {
+  @apply md:bg-gradient-to-r md:from-transparent md:via-transparent md:via-50% md:to-black/60 md:to-50%;
+}
+
+/* Overlay - Desktop Left */
+.f-hero--left .f-hero__overlay {
+  @apply md:bg-gradient-to-l md:from-transparent md:via-transparent md:via-50% md:to-black/75 md:to-50%;
+}
+
+/* Overlay - Center */
+.f-hero--center .f-hero__overlay {
+  @apply bg-black/60;
+}
+
+/* Container - Mobile */
+.f-hero__container {
+  @apply relative z-[2] w-full max-w-[1400px] mx-auto;
+  @apply px-6 md:px-8 py-12 md:py-16;
+  @apply grid grid-cols-1 gap-8;
+}
+
+/* Container - Desktop Right */
+.f-hero--right .f-hero__container {
+  @apply md:grid-cols-2;
+}
+
+.f-hero--right .f-hero__content {
+  @apply md:col-start-2;
+}
+
+/* Container - Desktop Left */
+.f-hero--left .f-hero__container {
+  @apply md:grid-cols-2;
+}
+
+.f-hero--left .f-hero__content {
+  @apply md:col-start-1;
+}
+
+/* Container - Center */
+.f-hero--center .f-hero__container {
+  @apply md:grid-cols-1 md:max-w-4xl md:text-center;
+}
+
+/* Content */
+.f-hero__content {
+  @apply flex flex-col gap-6 text-[--f-hero-text] mx-8;
+}
+
+/* Titles Container */
+.f-hero__titles {
+  @apply space-y-2;
+}
+
+/* Title */
+.f-hero__title {
+  @apply text-4xl md:text-5xl lg:text-6xl;
+  @apply font-bold leading-tight m-0;
+  @apply drop-shadow-lg;
+}
+
+/* Subtitles Container */
+.f-hero__subtitles {
+  @apply space-y-4;
+}
+
+/* Subtitle with Animation */
+.f-hero__subtitle {
+  @apply text-lg md:text-xl lg:text-2xl pl-9;
+  @apply leading-relaxed m-0;
+  @apply opacity-0 animate-fade-in-up;
+  animation-delay: calc(var(--delay, 0) * 150ms);
+}
+
+/* Description */
+.f-hero__description {
+  @apply text-base md:text-lg leading-relaxed;
+  @apply opacity-90 max-w-2xl m-0;
+}
+
+/* CTAs */
+.f-hero__ctas {
+  @apply flex flex-wrap gap-4 mt-2;
+}
+
+/* Animation Keyframes */
+@keyframes fade-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-fade-in-up {
+  animation: fade-in-up 0.6s ease-out forwards;
+}
+
+.btn-hero-primary,
+.btn-hero-outline{
+   @apply inline-flex items-center justify-center font-semibold rounded-lg px-6 py-3 text-base transition-all duration-200 cursor-pointer select-none;
+   @apply border border-solid border-[--btn-hero-border] text-[--btn-hero-text] bg-[--btn-hero-background];
+}
+
+.btn-hero-outline:hover {
+  @apply bg-[--btn-outline-background-hover] text-[--btn-outline-text-hover];
 }

src/styles/theme.css

@@ -100,6 +100,7 @@
   --f-autocomplete-hover-bg: var(--surface4-light);
   --f-autocomplete-hover-text: var(--surface2-light);
 
+  --f-hero-text: var(--surface2-light);
   -fuz-hero-from: #3b82f6;
   /* niebieski - kolor początkowy */
   --fuz-hero-to: #8b5cf6;