Update src/app/page.tsx

src/app/layout.tsx

@@ -1385,4 +1385,4 @@ export default function RootLayout({
       </body>
     </html>
   );
-}
+}

src/app/page.tsx

@@ -7,10 +7,11 @@ import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCa
 import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
 import ProductCardThree from '@/components/sections/product/ProductCardThree';
 import MetricCardTen from '@/components/sections/metrics/MetricCardTen';
+import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
 import ContactText from '@/components/sections/contact/ContactText';
 import FooterCard from '@/components/sections/footer/FooterCard';
-import { Award, BarChart3, Brain, CheckCircle2, Code2, Github, Handshake, Lightbulb, Linkedin, Mail, MapPin, Phone, Search, Star, Target, TrendingUp, Workflow, Wrench, Zap, ShieldCheck, Users, Sparkles } from "lucide-react";
+import { Award, BarChart3, Brain, CheckCircle2, Code2, Github, Handshake, Lightbulb, Linkedin, Mail, MapPin, Phone, Search, Star, Target, TrendingUp, Workflow, Wrench, Zap, Shield, CheckCircle } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -216,102 +217,69 @@ export default function LandingPage() {
       </div>
 
       <div id="social-proof" data-section="social-proof">
-        <div className="space-y-12">
-          <div className="flex flex-col items-center text-center">
-            <div className="mb-4 inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary-cta/10">
-              <Star className="w-4 h-4 text-primary-cta" fill="currentColor" />
-              <span className="text-sm font-medium text-primary-cta">Opinie z Google</span>
-            </div>
-            <h2 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-4">Zobacz, co mówią o nas klienci w Google</h2>
-            <p className="text-lg md:text-xl text-foreground/70 max-w-2xl">Transparentne opinie zweryfikowane – 5.0 gwiazdek od zaufanych klientów</p>
-          </div>
-
-          <div className="flex flex-col md:flex-row items-center justify-center gap-8 md:gap-12 flex-wrap">
-            <div className="flex flex-col items-center">
-              <div className="flex gap-1 mb-2">
-                {[...Array(5)].map((_, i) => (
-                  <Star key={i} className="w-6 h-6 text-yellow-400" fill="currentColor" />
-                ))}
-              </div>
-              <p className="text-3xl font-bold">5.0</p>
-              <p className="text-foreground/60">Średnia ocena</p>
-            </div>
-            <div className="h-16 w-px bg-foreground/20 hidden md:block"></div>
-            <div className="flex flex-col items-center">
-              <p className="text-3xl font-bold">250+</p>
-              <p className="text-foreground/60">Opinie zweryfikowane</p>
-            </div>
-          </div>
-
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-12">
+        <FeatureCardTwelve
+          title="Zobacz, co mówią o nas klienci w Google"
+          description="Transparentne opinie zweryfikowane – 5.0 gwiazdek od zaufanych klientów"
+          tag="Opinie z Google"
+          tagIcon={Star}
+          tagAnimation="slide-up"
+          features={[
             {
-              [
-                {
-                  name: "Marcin Kowalski",                  role: "Właściciel",                  text: "Platforma rekrutacyjna zmienia zupełnie nasz HR. Polecam!",                  image: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUTdamE0711SH4qf6OPq0pSgOh/professional-headshot-of-a-confident-bus-1772646442150-2e1e63e4.png"
-                },
-                {
-                  name: "Anna Nowak",                  role: "Dyrektor",                  text: "System zarządzania warsztatem zaoszczędził nam setki godzin rocznie.",                  image: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUTdamE0711SH4qf6OPq0pSgOh/professional-portrait-of-a-company-direc-1772646442028-775cdaab.png"
-                },
-                {
-                  name: "Piotr Lewandowski",                  role: "CEO",                  text: "CRM dla agencji zintegrował wszystkie nasze procesy. Świetna praca!",                  image: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUTdamE0711SH4qf6OPq0pSgOh/professional-headshot-of-an-agency-owner-1772646443428-1c53d6f7.png"
-                },
-                {
-                  name: "Katarzyna Zając",                  role: "HR Manager",                  text: "Najlepszy wybór, jaki mogliśmy zrobić. Profesjonalny zespół!",                  image: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUTdamE0711SH4qf6OPq0pSgOh/professional-portrait-of-a-recruiter-or--1772646443961-89d3d657.png"
-                },
-                {
-                  name: "Tomasz Kruk",                  role: "Founder",                  text: "Wsparcie 24/7 i transparentna komunikacja – dokładnie to czego potrzebowaliśmy.",                  image: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUTdamE0711SH4qf6OPq0pSgOh/professional-headshot-of-a-tech-savvy-bu-1772646441921-ee1f86c4.png"
-                },
-                {
-                  name: "Magdalena Szymczak",                  role: "Director",                  text: "Jesteśmy zachwyceni rezultatami. 5.0 gwiazdek, gorąco polecam!",                  image: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUTdamE0711SH4qf6OPq0pSgOh/professional-business-portrait-of-a-conf-1772646442053-3a2aecf3.png"
-                }
-              ].map((review, idx) => (
-                <div key={idx} className="p-6 rounded-lg border border-foreground/10 bg-card hover:border-primary-cta/50 transition-colors">
-                  <div className="flex gap-1 mb-4">
-                    {[...Array(5)].map((_, i) => (
-                      <Star key={i} className="w-4 h-4 text-yellow-400" fill="currentColor" />
-                    ))}
-                  </div>
-                  <p className="text-foreground/80 mb-6 text-sm leading-relaxed">"{review.text}"</p>
-                  <div className="flex items-center gap-3">
-                    <img src={review.image} alt={review.name} className="w-10 h-10 rounded-full object-cover" />
-                    <div>
-                      <p className="font-semibold text-foreground text-sm">{review.name}</p>
-                      <p className="text-foreground/60 text-xs">{review.role}</p>
-                    </div>
-                  </div>
-                  <p className="text-xs text-primary-cta mt-4 font-medium flex items-center gap-1">
-                    <Sparkles className="w-3 h-3" />
-                    Opinia z Google
-                  </p>
-                </div>
-              ))
+              id: "1",              label: "Marcin",              title: "Marcin Kowalski",              items: ["Platforma rekrutacyjna zmienia zupełnie nasz HR. Polecam!"]
+            },
+            {
+              id: "2",              label: "Anna",              title: "Anna Nowak",              items: ["System zarządzania warsztatem zaoszczędził nam setki godzin rocznie."]
+            },
+            {
+              id: "3",              label: "Piotr",              title: "Piotr Lewandowski",              items: ["CRM dla agencji zintegrował wszystkie nasze procesy. Świetna praca!"]
+            },
+            {
+              id: "4",              label: "Katarzyna",              title: "Katarzyna Zając",              items: ["Najlepszy wybór, jaki mogliśmy zrobić. Profesjonalny zespół!"]
+            },
+            {
+              id: "5",              label: "Tomasz",              title: "Tomasz Kruk",              items: ["Wsparcie 24/7 i transparentna komunikacja – dokładnie to czego potrzebowaliśmy."]
+            },
+            {
+              id: "6",              label: "Magdalena",              title: "Magdalena Szymczak",              items: ["Jesteśmy zachwyceni rezultatami. 5.0 gwiazdek, gorąco polecam!"]
             }
-          </div>
+          ]}
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={true}
+          buttons={[
+            { text: "Przeczytaj opinie na Google", href: "https://google.com/search" }
+          ]}
+          buttonAnimation="slide-up"
+          ariaLabel="Sekcja opinii z Google"
+        />
+      </div>
 
-          <div className="mt-16 grid grid-cols-1 md:grid-cols-3 gap-8 pt-12 border-t border-foreground/10">
-            <div className="flex flex-col items-center text-center">
-              <ShieldCheck className="w-8 h-8 text-primary-cta mb-3" />
-              <h3 className="font-semibold text-lg mb-2">Zweryfikowane Opinie</h3>
-              <p className="text-foreground/60 text-sm">Wszystkie opinie pochodzą od rzeczywistych klientów zweryfikowanych przez Google</p>
-            </div>
-            <div className="flex flex-col items-center text-center">
-              <Users className="w-8 h-8 text-primary-cta mb-3" />
-              <h3 className="font-semibold text-lg mb-2">Rzeczywisti Klienci</h3>
-              <p className="text-foreground/60 text-sm">Pracowaliśmy z każdą osobą, która nas oceniła. Ich sukces to nasz sukces.</p>
-            </div>
-            <div className="flex flex-col items-center text-center">
-              <Sparkles className="w-8 h-8 text-primary-cta mb-3" />
-              <h3 className="font-semibold text-lg mb-2">Brak Sponsorowanych Recenzji</h3>
-              <p className="text-foreground/60 text-sm">Nie kupujemy opinii. Każda recenzja to naturalna, szczera opinia klienta.</p>
-            </div>
-          </div>
-
-          <div className="flex justify-center pt-8">
-            <a href="https://google.com" target="_blank" rel="noopener noreferrer" className="px-8 py-3 bg-primary-cta text-primary-cta-text rounded-lg font-semibold hover:opacity-90 transition-opacity">
-              Przeczytaj opinię na Google
-            </a>
-          </div>
-        </div>
+      <div id="trust" data-section="trust">
+        <FeatureCardTwelve
+          title="Bezpieczeństwo i Weryfikacja Opinii"
+          description="Wszystkie nasze opinie są zweryfikowane i pochodzą od rzeczywistych klientów. Pracujemy z przejrzystością."
+          tag="Zaufanie"
+          tagIcon={Shield}
+          tagAnimation="slide-up"
+          features={[
+            {
+              id: "1",              label: "Opinie",              title: "Opinie Zweryfikowane",              items: ["100% autentycznych opinii od rzeczywistych klientów WOLNY STUDIO AI"]
+            },
+            {
+              id: "2",              label: "Bezpieczeństwo",              title: "Bezpieczeństwo Danych",              items: ["Certyfikacje bezpieczeństwa i ochrona prywatności klientów na najwyższym poziomie"]
+            },
+            {
+              id: "3",              label: "Rating",              title: "5.0 Gwiazdek",              items: ["Konsekwentna ocena 5.0 na Google od początkowych projektów do dzisiaj"]
+            },
+            {
+              id: "4",              label: "Projekty",              title: "Projekty Zakończone",              items: ["XX+ zweryfikowanych projektów z pozytywnym feedback od klientów"]
+            }
+          ]}
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          ariaLabel="Sekcja zaufania i weryfikacji"
+        />
       </div>
 
       <div id="partners" data-section="partners">
@@ -358,4 +326,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
+}