feat: redesign Testimonials and FinalCTA, unify WhatsApp CTA styling across homepage
This commit is contained in:
@@ -10,11 +10,7 @@ export const FinalCTABlock: React.FC<Props> = ({ eyebrow, title, subtitle, butto
|
|||||||
<section className="py-20 md:py-32 bg-card border-y border-border text-left">
|
<section className="py-20 md:py-32 bg-card border-y border-border text-left">
|
||||||
<div className="container-premium">
|
<div className="container-premium">
|
||||||
<div className="max-w-3xl">
|
<div className="max-w-3xl">
|
||||||
{eyebrow && (
|
{/* Removed eyebrow */}
|
||||||
<div className="font-mono text-sm md:text-base font-bold text-accent tracking-widest uppercase mb-4">
|
|
||||||
// {eyebrow}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<h2 className="font-heading text-3xl sm:text-4xl md:text-5xl font-extrabold text-foreground tracking-tight mb-6 text-balance">
|
<h2 className="font-heading text-3xl sm:text-4xl md:text-5xl font-extrabold text-foreground tracking-tight mb-6 text-balance">
|
||||||
{title}
|
{title}
|
||||||
|
|||||||
@@ -32,7 +32,7 @@ export const HeroBlock: React.FC<Props> = ({ title, subtitle, primaryCta, second
|
|||||||
href={process.env.NEXT_PUBLIC_WHATSAPP_LINK || '#'}
|
href={process.env.NEXT_PUBLIC_WHATSAPP_LINK || '#'}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
className="btn-primary"
|
className="px-8 py-4 bg-green-500 hover:bg-green-600 text-white font-bold text-base sm:text-lg transition-colors flex items-center justify-center rounded-[var(--radius-button)] shadow-sm"
|
||||||
>
|
>
|
||||||
{primaryCta}
|
{primaryCta}
|
||||||
</a>
|
</a>
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
'use client'
|
'use client'
|
||||||
import React, { useState, useEffect } from 'react'
|
import React, { useState } from 'react'
|
||||||
import type { Page } from '../../payload-types'
|
import type { Page } from '../../payload-types'
|
||||||
|
|
||||||
type Props = Extract<NonNullable<Page['layout']>[0], { blockType: 'testimonials' }>
|
type Props = Extract<NonNullable<Page['layout']>[0], { blockType: 'testimonials' }>
|
||||||
@@ -7,35 +7,17 @@ type Props = Extract<NonNullable<Page['layout']>[0], { blockType: 'testimonials'
|
|||||||
export const TestimonialsBlock: React.FC<Props> = ({ title, testimonials }) => {
|
export const TestimonialsBlock: React.FC<Props> = ({ title, testimonials }) => {
|
||||||
const [currentIndex, setCurrentIndex] = useState(0)
|
const [currentIndex, setCurrentIndex] = useState(0)
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!testimonials || testimonials.length <= 1) return
|
|
||||||
|
|
||||||
const timer = setInterval(() => {
|
|
||||||
setCurrentIndex((prev) => (prev + 1) % testimonials.length)
|
|
||||||
}, 7000)
|
|
||||||
|
|
||||||
return () => clearInterval(timer)
|
|
||||||
}, [testimonials])
|
|
||||||
|
|
||||||
if (!testimonials || testimonials.length === 0) return null
|
if (!testimonials || testimonials.length === 0) return null
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section className="relative py-24 md:py-40 bg-background border-y border-border overflow-hidden">
|
<section className="relative py-24 md:py-40 bg-background border-y border-border overflow-hidden">
|
||||||
{/* Background Image */}
|
|
||||||
<div className="absolute inset-0 z-0">
|
|
||||||
<img
|
|
||||||
src="https://images.unsplash.com/photo-1577415124269-fc1140a69e91?auto=format&fit=crop&w=2000&q=80"
|
|
||||||
alt="Biuro, abstrakcyjne tło"
|
|
||||||
className="object-cover w-full h-full grayscale opacity-20"
|
|
||||||
/>
|
|
||||||
<div className="absolute inset-0 bg-gradient-to-r from-background via-background/90 to-background/40" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="container-premium relative z-10">
|
<div className="container-premium relative z-10">
|
||||||
<div className="max-w-3xl mb-16 md:mb-24">
|
<div className="max-w-3xl mb-16 md:mb-24">
|
||||||
<div className="font-mono text-sm md:text-base font-bold text-accent tracking-widest uppercase mb-4">
|
{title && (
|
||||||
// {title}
|
<h2 className="font-heading text-3xl sm:text-4xl md:text-5xl font-extrabold tracking-tight text-foreground text-balance">
|
||||||
</div>
|
{title}
|
||||||
|
</h2>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="relative min-h-[300px] sm:min-h-[240px]">
|
<div className="relative min-h-[300px] sm:min-h-[240px]">
|
||||||
@@ -46,9 +28,6 @@ export const TestimonialsBlock: React.FC<Props> = ({ title, testimonials }) => {
|
|||||||
index === currentIndex ? 'opacity-100 z-10' : 'opacity-0 z-0 pointer-events-none'
|
index === currentIndex ? 'opacity-100 z-10' : 'opacity-0 z-0 pointer-events-none'
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<div className="font-heading text-8xl md:text-9xl text-accent/20 leading-none absolute -top-12 -left-6 md:-top-16 md:-left-10 select-none">
|
|
||||||
"
|
|
||||||
</div>
|
|
||||||
<p className="relative z-10 font-heading text-3xl sm:text-4xl md:text-5xl font-extrabold text-foreground leading-[1.2] mb-10 text-balance tracking-tight max-w-4xl">
|
<p className="relative z-10 font-heading text-3xl sm:text-4xl md:text-5xl font-extrabold text-foreground leading-[1.2] mb-10 text-balance tracking-tight max-w-4xl">
|
||||||
{t.quote}
|
{t.quote}
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
Reference in New Issue
Block a user