feat: complete website implementation

2026-06-21 21:53:15 +02:00
parent b147112bdc
commit dfd3888517
110 changed files with 18276 additions and 217 deletions
@@ -0,0 +1,80 @@
+import React from 'react';
+import Link from 'next/link';
+import Image from 'next/image';
+import { Post } from '@/types/types';
+import { Calendar, User, ArrowRight } from 'lucide-react';
+
+interface FeaturedPostProps {
+  post: Post;
+}
+
+export function FeaturedPost({ post }: FeaturedPostProps) {
+  // Formatowanie daty
+  const dateObj = new Date(post.date);
+  const formattedDate = dateObj.toLocaleDateString('pl-PL', {
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric'
+  });
+
+  // Tłumaczenie kategorii
+  const categoryLabels: Record<string, string> = {
+    'klimatyzacja': 'Klimatyzacja',
+    'pompy-ciepla': 'Pompy Ciepła',
+    'remonty': 'Remonty',
+    'hydraulika': 'Hydraulika',
+    'porady': 'Porady'
+  };
+
+  return (
+    <div className="group relative rounded-2xl overflow-hidden bg-white border border-border shadow-sm hover:shadow-lg transition-all duration-300">
+      <div className="flex flex-col md:flex-row">
+        {/* Obraz */}
+        <div className="relative w-full md:w-3/5 aspect-video md:aspect-auto md:min-h-[400px]">
+          <Image
+            src={post.image || 'https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=1200&q=80'}
+            alt={post.title}
+            fill
+            className="object-cover transition-transform duration-700 group-hover:scale-105"
+          />
+          <div className="absolute top-4 left-4">
+            <span className="px-3 py-1 bg-accent text-white text-xs font-bold rounded-full uppercase tracking-wider shadow-md">
+              {categoryLabels[post.category] || post.category}
+            </span>
+          </div>
+        </div>
+
+        {/* Treść */}
+        <div className="p-8 md:p-12 flex flex-col justify-center w-full md:w-2/5">
+          <div className="flex items-center gap-4 text-text-muted text-sm font-medium mb-4">
+            <div className="flex items-center gap-1.5">
+              <Calendar className="w-4 h-4 text-primary/60" />
+              <span>{formattedDate}</span>
+            </div>
+            {post.author && (
+              <div className="flex items-center gap-1.5">
+                <User className="w-4 h-4 text-primary/60" />
+                <span>{post.author}</span>
+              </div>
+            )}
+          </div>
+
+          <h3 className="text-2xl md:text-3xl font-extrabold text-primary font-heading leading-tight mb-4 group-hover:text-accent transition-colors">
+            <Link href={`/blog/${post.slug}`} className="before:absolute before:inset-0">
+              {post.title}
+            </Link>
+          </h3>
+
+          <p className="text-text-muted leading-relaxed mb-8 line-clamp-3">
+            {post.excerpt}
+          </p>
+
+          <div className="flex items-center gap-2 text-primary font-semibold group-hover:text-accent transition-colors mt-auto">
+            <span>Czytaj pełny artykuł</span>
+            <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}