fix: resolve contact form placeholders, restore process block layout, and fix testimonials carousel scroll logic

2026-09-17 22:25:25 +02:00
parent 7cc68b9f36
commit ab4c5c83dd
91 changed files with 4790 additions and 319 deletions
@@ -0,0 +1,127 @@
+'use client'
+import React from 'react'
+import { usePathname } from 'next/navigation'
+import { MapPin, Phone, Mail, Clock } from 'lucide-react'
+import { motion } from 'framer-motion'
+
+export const ContactSectionClient: React.FC<any> = ({
+  address,
+  phone,
+  email,
+  hours,
+  formNode,
+}) => {
+  const pathname = usePathname()
+  const isDe = pathname?.split('/').filter(Boolean)[0] === 'de'
+
+  return (
+    <section className="py-16 md:py-24 bg-background">
+      <div className="container-premium">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16">
+          
+          {/* Lewa kolumna: Informacje kontaktowe */}
+          <motion.div 
+            initial={{ opacity: 0, x: -16 }}
+            whileInView={{ opacity: 1, x: 0 }}
+            viewport={{ once: true, margin: "-50px" }}
+            transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
+            className="flex flex-col"
+          >
+            <h2 className="font-heading text-3xl md:text-4xl font-extrabold text-foreground mb-8 text-balance">
+              {isDe ? 'Kontaktinformationen' : 'Dane kontaktowe'}
+            </h2>
+
+            <div className="bg-card border border-border p-8 relative overflow-hidden flex-grow"
+              style={{ boxShadow: '0 10px 40px -10px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.03)' }}
+            >
+              <div className="absolute top-0 right-0 w-12 h-12 bg-background border-l border-b border-border shadow-sm transform translate-x-6 -translate-y-6 rotate-45 pointer-events-none" />
+
+              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 gap-10">
+                {address && (
+                  <div className="flex flex-col gap-3">
+                    <div className="flex items-center gap-3 text-accent border-b border-border/50 pb-3">
+                      <MapPin size={24} strokeWidth={2.5} />
+                      <h3 className="font-heading font-bold text-lg text-foreground tracking-wide">
+                        {isDe ? 'Adresse' : 'Adres'}
+                      </h3>
+                    </div>
+                    <p className="text-foreground/80 leading-relaxed font-medium whitespace-pre-line text-base">
+                      {address}
+                    </p>
+                  </div>
+                )}
+
+                {phone && (
+                  <div className="flex flex-col gap-3">
+                    <div className="flex items-center gap-3 text-accent border-b border-border/50 pb-3">
+                      <Phone size={24} strokeWidth={2.5} />
+                      <h3 className="font-heading font-bold text-lg text-foreground tracking-wide">
+                        {isDe ? 'Telefon' : 'Telefon'}
+                      </h3>
+                    </div>
+                    <a 
+                      href={`tel:${phone.replace(/\s+/g, '')}`} 
+                      className="text-foreground/80 leading-relaxed font-medium text-base hover:text-accent transition-colors"
+                    >
+                      {phone}
+                    </a>
+                  </div>
+                )}
+
+                {email && (
+                  <div className="flex flex-col gap-3">
+                    <div className="flex items-center gap-3 text-accent border-b border-border/50 pb-3">
+                      <Mail size={24} strokeWidth={2.5} />
+                      <h3 className="font-heading font-bold text-lg text-foreground tracking-wide">
+                        {isDe ? 'E-Mail' : 'E-mail'}
+                      </h3>
+                    </div>
+                    <a 
+                      href={`mailto:${email}`} 
+                      className="text-foreground/80 leading-relaxed font-medium text-base hover:text-accent transition-colors"
+                    >
+                      {email}
+                    </a>
+                  </div>
+                )}
+
+                {hours && (
+                  <div className="flex flex-col gap-3">
+                    <div className="flex items-center gap-3 text-accent border-b border-border/50 pb-3">
+                      <Clock size={24} strokeWidth={2.5} />
+                      <h3 className="font-heading font-bold text-lg text-foreground tracking-wide">
+                        {isDe ? 'Öffnungszeiten' : 'Godziny pracy'}
+                      </h3>
+                    </div>
+                    <p className="text-foreground/80 leading-relaxed font-medium whitespace-pre-line text-base">
+                      {hours}
+                    </p>
+                  </div>
+                )}
+              </div>
+            </div>
+          </motion.div>
+
+          {/* Prawa kolumna: Formularz kontaktowy */}
+          <motion.div 
+            initial={{ opacity: 0, x: 16 }}
+            whileInView={{ opacity: 1, x: 0 }}
+            viewport={{ once: true, margin: "-50px" }}
+            transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1], delay: 0.1 }}
+            className="flex flex-col"
+          >
+            <h2 className="font-heading text-3xl md:text-4xl font-extrabold text-foreground mb-8 text-balance">
+              {isDe ? 'Schreiben Sie uns' : 'Napisz do nas'}
+            </h2>
+            <div className="bg-card border border-border p-8 relative overflow-hidden flex-grow"
+              style={{ boxShadow: '0 10px 40px -10px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.03)' }}
+            >
+              {formNode}
+            </div>
+          </motion.div>
+
+        </div>
+      </div>
+    </section>
+  )
+}