feat: complete POI Clean House website with Karcher theme, blog, interactive animations and full CMS configuration

2026-08-26 02:49:44 +02:00
commit 9acdfe05d3
57 changed files with 11415 additions and 0 deletions
@@ -0,0 +1,95 @@
+import React from 'react'
+import { BookOpen, Clock, Calendar, ArrowRight } from 'lucide-react'
+import { AnimateIn } from '@/components/AnimateIn'
+
+interface Article {
+  title: string
+  category: string
+  readTime?: string
+  date?: string
+  excerpt: string
+  content?: string
+}
+
+interface BlogListBlockProps {
+  badge?: string
+  heading: string
+  subheading?: string
+  articles?: Article[]
+}
+
+export function BlogListBlockComponent(props: BlogListBlockProps) {
+  const { badge, heading, subheading, articles } = props
+
+  return (
+    <section className="py-24 bg-white border-b-2 border-[#1f1f1f]">
+      <div className="container mx-auto px-4 sm:px-6 lg:px-12 max-w-7xl">
+        <AnimateIn direction="up">
+          <div className="max-w-3xl mb-14">
+            {badge && (
+              <div className="inline-block bg-[#FFED00] text-[#1f1f1f] text-xs font-black uppercase tracking-widest px-3 py-1 mb-4 border border-[#1f1f1f]">
+                {badge}
+              </div>
+            )}
+            <h2 className="text-2xl sm:text-3xl lg:text-4xl font-black uppercase tracking-tight text-[#1f1f1f]">
+              {heading}
+            </h2>
+            {subheading && (
+              <p className="mt-4 text-base text-[#666666] leading-relaxed font-medium">
+                {subheading}
+              </p>
+            )}
+          </div>
+        </AnimateIn>
+
+        {articles && articles.length > 0 && (
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 items-stretch">
+            {articles.map((art, idx) => (
+              <AnimateIn key={idx} delay={idx * 150} direction="up" className="h-full">
+                <article
+                  className="bg-[#f4f4f4] border-2 border-[#1f1f1f] h-full flex flex-col justify-between hover-lift transition-all shadow-xs hover:border-t-8 hover:border-t-[#FFED00]"
+                >
+                  <div className="p-8 space-y-4">
+                    {/* Top Row: Category Badge & Read Time (No Wrapping / No Overlap) */}
+                    <div className="flex items-center justify-between gap-3">
+                      <span className="bg-[#1f1f1f] text-[#FFED00] text-[10px] font-black uppercase tracking-wider px-2.5 py-1">
+                        {art.category}
+                      </span>
+                      {art.readTime && (
+                        <span className="flex items-center gap-1.5 text-[11px] text-[#666666] font-bold whitespace-nowrap shrink-0">
+                          <Clock className="h-3.5 w-3.5 text-[#1f1f1f]" />
+                          <span>{art.readTime}</span>
+                        </span>
+                      )}
+                    </div>
+
+                    <h3 className="text-lg font-black uppercase text-[#1f1f1f] leading-snug">
+                      {art.title}
+                    </h3>
+
+                    <p className="text-xs sm:text-sm text-[#555555] leading-relaxed line-clamp-4 font-medium">
+                      {art.excerpt}
+                    </p>
+                  </div>
+
+                  <div className="p-6 bg-[#ebebeb] border-t-2 border-[#1f1f1f] flex items-center justify-between">
+                    {art.date && (
+                      <span className="flex items-center gap-1.5 text-xs text-[#777777] font-mono whitespace-nowrap">
+                        <Calendar className="h-3.5 w-3.5 text-[#1f1f1f]" />
+                        {art.date}
+                      </span>
+                    )}
+                    <div className="text-xs font-black uppercase tracking-wider text-[#1f1f1f] flex items-center gap-1 hover:underline cursor-pointer whitespace-nowrap">
+                      <span>Czytaj poradnik</span>
+                      <ArrowRight className="h-3.5 w-3.5 text-[#1f1f1f]" />
+                    </div>
+                  </div>
+                </article>
+              </AnimateIn>
+            ))}
+          </div>
+        )}
+      </div>
+    </section>
+  )
+}