Add hero

src/styles/base.css

@@ -1,3 +1,5 @@
 @import "./tailwind.css";
 @import "./theme.css";
-@import "./navbar.css";
+@import "./navbar.css";
+@import "./hero.css";
+@import "./buttons.css";

src/styles/buttons.css

@@ -0,0 +1,38 @@
+/* Podstawowe ustawienia wspólne */
+.btn {
+  @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;
+}
+
+/* Wariant główny */
+.btn-primary {
+  background-color: var(--btn-bg);
+  color: var(--btn-text);
+}
+
+.btn-primary:hover {
+  filter: brightness(0.95);
+}
+
+/* Wariant outline */
+.btn-outline {
+  background-color: transparent;
+  border: 2px solid var(--btn-outline-border);
+  color: var(--btn-outline-text);
+}
+
+.btn-outline:hover {
+  background-color: var(--btn-outline-bg-hover);
+}
+
+/* Wariant ghost (bez obramowania) */
+.btn-ghost {
+  background-color: transparent;
+  color: var(--btn-ghost-text);
+}
+
+.btn-ghost:hover {
+  background-color: var(--btn-ghost-hover-bg);
+}

src/styles/hero.css

@@ -0,0 +1,57 @@
+.fuz-hero {
+  @apply relative overflow-hidden text-center py-32 px-6;
+
+  background: linear-gradient(
+    to right,
+    var(--fuz-hero-from),
+    var(--fuz-hero-to)
+  );
+  color: var(--fuz-text);
+}
+
+.fuz-hero-bg {
+  @apply absolute top-0 left-0 w-full h-full object-cover;
+  opacity: 0.3;
+}
+
+.fuz-hero-inner {
+  @apply relative max-w-7xl mx-auto;
+  color: var(--fuz-text);
+}
+
+.fuz-hero-title {
+  @apply text-5xl md:text-7xl font-extrabold leading-tight mb-6;
+  color: var(--fuz-text);
+}
+
+.fuz-hero-subtitle {
+  @apply text-xl md:text-4xl font-semibold mb-2 opacity-0;
+  color: var(--fuz-text-subtle);
+
+  /* Animacja główna */
+  animation-name: fade-in;
+  animation-duration: 0.8s;
+  animation-timing-function: ease-out;
+  animation-fill-mode: forwards;
+
+  /* Opóźnienie zależne od numeru elementu */
+  animation-delay: calc(var(--delay) * 0.3s);
+}
+.fuz-hero-description {
+  @apply max-w-6xl mx-auto text-lg md:text-xl my-6 leading-relaxed;
+  color: var(--fuz-text-subtle);
+}
+
+.fuz-hero-cta {
+  @apply flex justify-center items-center flex-wrap gap-4 mt-8;
+}
+
+.fuz-hero-cta .btn-primary {
+  background-color: var(--fuz-accent);
+  color: white;
+}
+
+@keyframes fade-in {
+  from { opacity: 0; transform: translateY(10px); }
+  to   { opacity: 1; transform: translateY(0); }
+}

src/styles/theme.css

@@ -2,12 +2,37 @@
   --fuz-bg: #ffffff;
   --fuz-text: #1a1a1a;
   --fuz-accent: #0066ff;
+  --fuz-accent: #0094ff;
+  --fuz-accent-text: #ffffff;
+
+  /* Buttons */
+  --btn-bg: var(--fuz-accent);
+  --btn-text: var(--fuz-accent-text);
+
+  --btn-outline-border: var(--fuz-accent);
+  --btn-outline-text: var(--fuz-accent);
+  --btn-outline-bg-hover: rgba(0, 148, 255, 0.07);
+
+  --btn-ghost-text: var(--fuz-text);
+  --btn-ghost-hover-bg: rgba(0, 0, 0, 0.05);
 }
 
 :root.dark {
-  --fuz-bg: #0d1117;
   --fuz-text: #e6edf3;
+  --fuz-bg: #0d1117;
   --fuz-accent: #58a6ff;
+  --fuz-accent-text: #0d1117;
+
+  /* Buttons */
+  --btn-bg: var(--fuz-accent);
+  --btn-text: var(--fuz-accent-text);
+
+  --btn-outline-border: var(--fuz-accent);
+  --btn-outline-text: var(--fuz-accent);
+  --btn-outline-bg-hover: rgba(88, 166, 255, 0.15);
+
+  --btn-ghost-text: var(--fuz-text);
+  --btn-ghost-hover-bg: rgba(255,255,255,0.08);
 }
 
 /* Ustawienia bazowe motywu */