feat: implement UX patterns inspired by Greenback (Hero slider, Stats block, numbered Process cards)

2026-09-01 23:21:36 +02:00
parent 66c62f8a31
commit 441ae8f272
8 changed files with 259 additions and 61 deletions
@@ -0,0 +1,58 @@
+import React from 'react'
+
+export interface StatsProps {
+  title?: string | null
+  subtitle?: string | null
+  items?: Array<{
+    id?: string | null
+    stat: string
+    label: string
+    description?: string | null
+  }> | null
+}
+
+export const StatsBlock: React.FC<StatsProps> = ({ title, subtitle, items }) => {
+  if (!items || items.length === 0) return null
+
+  return (
+    <section className="py-16 md:py-20 bg-card border-y border-border">
+      <div className="container-premium">
+        {(title || subtitle) && (
+          <div className="max-w-2xl mx-auto text-center mb-12">
+            {title && (
+              <h2 className="font-heading text-2xl sm:text-3xl font-bold text-foreground mb-3">
+                {title}
+              </h2>
+            )}
+            {subtitle && (
+              <p className="text-foreground/70 text-sm sm:text-base leading-relaxed">
+                {subtitle}
+              </p>
+            )}
+          </div>
+        )}
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12">
+          {items.map((item, index) => (
+            <div
+              key={item.id || index}
+              className="flex flex-col items-center text-center p-6 rounded-2xl bg-background/50 border border-border/80 shadow-xs"
+            >
+              <div className="font-heading text-4xl sm:text-5xl lg:text-6xl font-extrabold text-accent mb-2 tracking-tight">
+                {item.stat}
+              </div>
+              <div className="font-heading text-lg sm:text-xl font-bold text-foreground mb-1.5">
+                {item.label}
+              </div>
+              {item.description && (
+                <p className="text-sm text-foreground/70 leading-relaxed max-w-xs">
+                  {item.description}
+                </p>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}