feat: add Unsplash photo placeholders, remove AI glow effects, and enable browser language detection

2026-09-01 23:04:55 +02:00
parent 1a968b1d1f
commit 1f0b9ea0fb
6 changed files with 176 additions and 104 deletions
@@ -8,6 +8,12 @@ const dirname = path.dirname(__filename)

 const nextConfig: NextConfig = {
  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'images.unsplash.com',
+      },
+    ],
    localPatterns: [
      {
        pathname: '/api/media/file/**',
@@ -39,7 +39,7 @@ export const FinalCTABlock: React.FC<Props> = ({ title, subtitle, buttonText })
            href={process.env.NEXT_PUBLIC_WHATSAPP_LINK || '#'}
            target="_blank"
            rel="noopener noreferrer"
-            className="inline-block px-10 py-5 bg-green-500 hover:bg-green-400 text-white text-lg font-bold rounded-xl transition-transform hover:scale-105 shadow-lg shadow-green-500/30"
+            className="inline-block px-10 py-4 bg-green-500 hover:bg-green-600 text-white text-base sm:text-lg font-bold rounded-xl transition-colors shadow-sm"
          >
            {buttonText}
          </a>
@@ -3,66 +3,82 @@ import React from 'react'
 import { motion } from 'framer-motion'
 import type { Page } from '../../payload-types'
 import Link from 'next/link'
+import Image from 'next/image'
+import { Shield, MessageCircle } from 'lucide-react'

 type Props = Extract<NonNullable<Page['layout']>[0], { blockType: 'hero' }>

 export const HeroBlock: React.FC<Props> = ({ title, subtitle, primaryCta, secondaryCta, yearsOfExperience }) => {
  return (
-    <section className="relative overflow-hidden bg-background text-foreground py-24 lg:py-32">
-      <div className="absolute inset-0 bg-gradient-to-br from-accent/10 to-background z-0" />
-      <div className="container mx-auto px-4 relative z-10 flex flex-col items-center text-center">
-        <motion.h1 
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.6 }}
-          className="text-4xl md:text-6xl font-bold mb-6 max-w-4xl"
-        >
-          {title}
-        </motion.h1>
-        
-        <motion.p 
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.6, delay: 0.1 }}
-          className="text-xl md:text-2xl text-foreground/80 mb-10 max-w-2xl"
-        >
-          {subtitle}
-        </motion.p>
-        
-        <motion.div 
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.6, delay: 0.2 }}
-          className="flex flex-col sm:flex-row gap-4 mb-12"
-        >
-          <a 
-            href={process.env.NEXT_PUBLIC_WHATSAPP_LINK || '#'}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="px-8 py-4 bg-green-500 hover:bg-green-600 text-white font-semibold rounded-lg transition-colors flex items-center justify-center gap-2"
-          >
-            {primaryCta}
-          </a>
-          {secondaryCta?.text && secondaryCta?.url && (
-            <Link 
-              href={secondaryCta.url}
-              className="px-8 py-4 bg-transparent border-2 border-border hover:border-foreground text-foreground font-semibold rounded-lg transition-colors"
-            >
-              {secondaryCta.text}
-            </Link>
-          )}
-        </motion.div>
+    <section className="relative bg-background text-foreground py-16 md:py-24 border-b border-border/60">
+      <div className="container-premium">
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-8 items-center">
+          {/* Kolumna tekstowa */}
+          <div className="lg:col-span-7 flex flex-col items-start text-left">
+            {yearsOfExperience && (
+              <div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-accent/10 border border-accent/20 text-accent text-xs sm:text-sm font-semibold tracking-wide mb-6">
+                <Shield size={16} />
+                <span>{yearsOfExperience}</span>
+              </div>
+            )}

-        {yearsOfExperience && (
-          <motion.div 
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            transition={{ duration: 0.6, delay: 0.4 }}
-            className="text-sm text-foreground/60 uppercase tracking-widest"
-          >
-            {yearsOfExperience}
-          </motion.div>
-        )}
+            <h1 className="font-heading text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold tracking-tight leading-[1.15] text-foreground mb-6">
+              {title}
+            </h1>
+            
+            <p className="text-lg sm:text-xl text-foreground/75 mb-8 leading-relaxed max-w-2xl">
+              {subtitle}
+            </p>
+            
+            <div className="flex flex-col sm:flex-row gap-4 w-full sm:w-auto">
+              <a 
+                href={process.env.NEXT_PUBLIC_WHATSAPP_LINK || '#'}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="px-8 py-4 bg-green-500 hover:bg-green-600 text-white font-bold rounded-xl transition-all flex items-center justify-center gap-2.5 shadow-sm text-base"
+              >
+                <MessageCircle size={20} />
+                <span>{primaryCta}</span>
+              </a>
+              {secondaryCta?.text && secondaryCta?.url && (
+                <Link 
+                  href={secondaryCta.url}
+                  className="px-8 py-4 bg-card hover:bg-accent/5 border border-border text-foreground font-semibold rounded-xl transition-colors text-center text-base"
+                >
+                  {secondaryCta.text}
+                </Link>
+              )}
+            </div>
+          </div>
+
+          {/* Kolumna ze zdjęciem */}
+          <div className="lg:col-span-5 relative">
+            <div className="relative mx-auto max-w-md lg:max-w-none">
+              <div className="relative aspect-[4/3] sm:aspect-[5/4] rounded-2xl overflow-hidden border border-border shadow-md bg-card">
+                {/* PLACEHOLDER - do podmiany na realne zdjęcia klienta */}
+                <Image 
+                  src="https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=1200&q=80"
+                  alt="Biuro doradztwa podatkowego"
+                  fill
+                  priority
+                  sizes="(max-width: 1024px) 100vw, 50vw"
+                  className="object-cover"
+                />
+              </div>
+
+              {/* Subtelna plakietka informacyjna */}
+              <div className="absolute -bottom-5 -left-4 sm:left-6 bg-card/95 backdrop-blur-sm border border-border rounded-xl p-4 shadow-lg flex items-center gap-3.5 max-w-xs">
+                <div className="w-10 h-10 rounded-lg bg-accent text-white font-bold font-heading flex items-center justify-center shrink-0">
+                  JK
+                </div>
+                <div className="text-xs">
+                  <p className="font-bold text-foreground">Punkt Doradczy b.b.h.</p>
+                  <p className="text-foreground/60">Lohnsteuerhilfeverein e.V.</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
      </div>
    </section>
  )
@@ -1,39 +1,65 @@
 'use client'
 import React from 'react'
-import { motion } from 'framer-motion'
 import { Quote } from 'lucide-react'
+import Image from 'next/image'
 import type { Page } from '../../payload-types'

 type Props = Extract<NonNullable<Page['layout']>[0], { blockType: 'testimonials' }>

+/* PLACEHOLDER - do podmiany na realne zdjęcia klienta */
+const avatarPlaceholders = [
+  'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=150&h=150&q=80',
+  'https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=150&h=150&q=80',
+  'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=150&h=150&q=80',
+]
+
 export const TestimonialsBlock: React.FC<Props> = ({ title, testimonials }) => {
  return (
-    <section className="py-24 bg-background">
-      <div className="container mx-auto px-4 max-w-6xl">
-        <motion.h2 
-          initial={{ opacity: 0, y: 20 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          viewport={{ once: true }}
-          className="text-3xl md:text-5xl font-bold text-foreground mb-16 text-center"
-        >
-          {title}
-        </motion.h2>
+    <section className="py-16 md:py-24 bg-background">
+      <div className="container-premium">
+        <div className="max-w-2xl mb-12 text-center md:text-left">
+          <h2 className="font-heading text-2xl sm:text-3xl md:text-4xl font-bold text-foreground tracking-tight">
+            {title}
+          </h2>
+        </div>
        
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-          {testimonials?.map((t: NonNullable<Props['testimonials']>[0], index: number) => (
-            <motion.div 
-              key={t.id || index}
-              initial={{ opacity: 0, y: 20 }}
-              whileInView={{ opacity: 1, y: 0 }}
-              viewport={{ once: true }}
-              transition={{ duration: 0.5, delay: index * 0.1 }}
-              className="bg-card p-8 rounded-2xl relative"
-            >
-              <Quote className="absolute top-6 right-6 text-border" size={40} />
-              <p className="text-foreground/80 italic mb-6 relative z-10">"{t.quote}"</p>
-              <div className="font-semibold text-foreground">— {t.author}</div>
-            </motion.div>
-          ))}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
+          {testimonials?.map((t: NonNullable<Props['testimonials']>[0], index: number) => {
+            const avatarUrl = avatarPlaceholders[index % avatarPlaceholders.length]
+
+            return (
+              <div 
+                key={t.id || index}
+                className="bg-card border border-border p-6 sm:p-8 rounded-2xl shadow-sm flex flex-col justify-between"
+              >
+                <div>
+                  <Quote className="text-accent/30 mb-4" size={32} />
+                  <p className="text-foreground/80 leading-relaxed text-sm sm:text-base mb-6">
+                    "{t.quote}"
+                  </p>
+                </div>
+
+                <div className="flex items-center gap-3.5 pt-4 border-t border-border/50">
+                  <div className="relative w-11 h-11 rounded-full overflow-hidden border border-border shrink-0 bg-muted">
+                    {/* PLACEHOLDER - do podmiany na realne zdjęcia klienta */}
+                    <Image 
+                      src={avatarUrl}
+                      alt={t.author || "Klient"}
+                      fill
+                      sizes="44px"
+                      className="object-cover"
+                    />
+                  </div>
+                  <div>
+                    <p className="font-heading font-bold text-sm sm:text-base text-foreground">
+                      {t.author}
+                    </p>
+                    <p className="text-xs text-foreground/50">Klient zweryfikowany</p>
+                  </div>
+                </div>
+              </div>
+            )
+          })}
        </div>
      </div>
    </section>
@@ -1,33 +1,57 @@
 'use client'
 import React from 'react'
-import { motion } from 'framer-motion'
 import type { Page } from '../../payload-types'
+import Image from 'next/image'
+import { CheckCircle } from 'lucide-react'

 type Props = Extract<NonNullable<Page['layout']>[0], { blockType: 'uniqueValue' }>

 export const UniqueValueBlock: React.FC<Props> = ({ title, description }) => {
  return (
-    <section className="py-24 bg-accent/10 relative overflow-hidden">
-      <div className="absolute top-0 right-0 -mr-20 -mt-20 w-64 h-64 rounded-full bg-accent/20 opacity-50 blur-3xl" />
-      <div className="container mx-auto px-4 relative z-10 text-center max-w-3xl">
-        <motion.h2 
-          initial={{ opacity: 0, y: 20 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          viewport={{ once: true }}
-          transition={{ duration: 0.6 }}
-          className="text-3xl md:text-5xl font-bold text-foreground mb-8"
-        >
-          {title}
-        </motion.h2>
-        <motion.div 
-          initial={{ opacity: 0, y: 20 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          viewport={{ once: true }}
-          transition={{ duration: 0.6, delay: 0.2 }}
-          className="text-lg md:text-xl text-foreground/80 leading-relaxed"
-        >
-          {description}
-        </motion.div>
+    <section className="py-16 md:py-24 bg-card/60 border-y border-border">
+      <div className="container-premium">
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-10 lg:gap-16 items-center">
+          {/* Kolumna ze zdjęciem */}
+          <div className="lg:col-span-5 order-2 lg:order-1">
+            <div className="relative aspect-[4/3] rounded-2xl overflow-hidden border border-border shadow-sm bg-card">
+              {/* PLACEHOLDER - do podmiany na realne zdjęcia klienta */}
+              <Image 
+                src="https://images.unsplash.com/photo-1450133064473-71024230f91b?auto=format&fit=crop&w=1000&q=80"
+                alt="Dokumenty i profesjonalne doradztwo podatkowe"
+                fill
+                sizes="(max-width: 1024px) 100vw, 40vw"
+                className="object-cover"
+              />
+            </div>
+          </div>
+
+          {/* Kolumna tekstowa */}
+          <div className="lg:col-span-7 order-1 lg:order-2 flex flex-col items-start">
+            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-accent/10 text-accent text-xs font-semibold uppercase tracking-wider mb-4">
+              <CheckCircle size={15} />
+              <span>Komfort i pewność</span>
+            </div>
+
+            <h2 className="font-heading text-2xl sm:text-3xl md:text-4xl font-bold text-foreground tracking-tight mb-5 leading-snug">
+              {title}
+            </h2>
+            
+            <p className="text-foreground/80 text-base sm:text-lg leading-relaxed mb-6">
+              {description}
+            </p>
+
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 w-full pt-4 border-t border-border/60 text-sm">
+              <div className="flex items-center gap-2.5 text-foreground/80 font-medium">
+                <span className="w-2 h-2 rounded-full bg-accent" />
+                <span>Bez barier językowych</span>
+              </div>
+              <div className="flex items-center gap-2.5 text-foreground/80 font-medium">
+                <span className="w-2 h-2 rounded-full bg-accent" />
+                <span>Indywidualne podejście</span>
+              </div>
+            </div>
+          </div>
+        </div>
      </div>
    </section>
  )
@@ -3,7 +3,7 @@ import type { NextRequest } from 'next/server';
 import { createLocaleMiddleware } from '@intecion/ipal-kit/next/middleware';
 import { i18n } from './i18n.config';

-const localeMiddleware = createLocaleMiddleware({ config: i18n });
+const localeMiddleware = createLocaleMiddleware({ config: i18n, consentCategory: 'necessary' });

 export const config = {
  matcher: ['/((?!api|admin|_next|.*\\..*).*)'],