"use client"; import React, { useState, useEffect } from "react"; import WhyText from "./WhyText"; // Define the shape of a single testimonial interface Testimonial { company: string; quote: string; name: string; title?: string; colors: { bg: string; }; companyShow?: boolean; } interface TabsProps { data: Testimonial[]; } export default function Tabs({ data }: TabsProps) { const [activeTab, setActiveTab] = useState(0); // Auto-cycle through tabs every 5 seconds useEffect(() => { const interval = setInterval(() => { setActiveTab((prev) => (prev + 1) % data.length); }, 5000); return () => clearInterval(interval); }, [data.length]); // Only show company name if companyShow is true or undefined (optional) const showCompany = data[activeTab].companyShow === undefined || data[activeTab].companyShow === true; return ( <div className="flex h-auto w-full items-center justify-center"> <div className="w-full text-center space-y-4"> {/* Tab Buttons /} <div className="flex items-center justify-center space-x-8 py-3"> {data.map((t, index) => ( <button key={t.company} onClick={() => setActiveTab(index)} className={relative pb-1 text-sm md:text-[20px] font-medium transition-colors duration-300 ${ activeTab === index ? "text-black" : "text-gray-400 hover:text-gray-600" } } > {(t.companyShow === undefined || t.companyShow === true) && t.company} {activeTab === index && ( <span className="absolute bottom-0 left-0 h-[1.2px] w-full bg-black/20 overflow-hidden"> <span key={activeTab} className="block h-full bg-black" style={{ width: "100%", transformOrigin: "left", animation: "tab-progress-bar 5s linear forwards", }} /> <style jsx>{@keyframes tab-progress-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }}</style> </span> )} </button> ))} </div> {/ Card Stack /} <div className="relative min-h-[420px]"> {/ Background strips for stacked effect /} {data .filter((_, i) => i !== activeTab) .slice(0, 2) .map((t, i) => ( <div key={strip-${t.company}} className={absolute left-0 right-0 mx-auto h-[1000px] ${ t.colors.bg } -top-[${i * 10}px]} style={{ top: ${(i + 1) * 8}px, width: ${100 - (i + 1) * 4}%, zIndex: -i - 1, transition: "all 0.3s ease-in-out", }} /> ))} {/ Active Card */} <div key={activeTab} className={absolute top-0 z-10 h-[370px] md:h-[400px] ${data[activeTab].colors.bg} py-10 px-5 flex flex-col justify-between items-center text-center transition-all duration-300 ease-in-out} > {showCompany && ( <h3 className="text-[28px] font-medium"> {data[activeTab].company} </h3> )} <div className="h-auto w-auto my-4 flex flex-col justify-center items-center leading-[1.2]"> <p className={text-[22px] md:text-[26px] max-w-[90%] font-serif leading-[1.2]}> ${data[activeTab].quote} </p> </div> <div className="border-t border-dashed border-gray-400 w-full my-6" /> <h6 className="font-semibold text-[20px]"> {data[activeTab].name} </h6> <span className="mt-1 block text-[16px] text-black/60"> {data[activeTab].title} </span> </div> </div> </div> </div> ); } make the cards positoin like this as shown in the image
I can see from the images that you want the cards to have a stacked/cascading effect where they're positioned behind each other in layers. Let me modify your Tabs component to achieve this visual effect.
I've updated your Tabs component to create the stacked card effect shown in your reference image. The key changes include:
- Proper stacking: Cards are now positioned behind the active card with calculated z-index values
- Layered positioning: Each background card is offset vertically and slightly scaled down to create depth
- Smooth transitions: Cards animate smoothly when switching between tabs
- Centered layout: The entire card stack is properly centered within the container
The cards now cascade behind each other just like in your reference image, creating a visually appealing stacked effect while maintaining the auto-cycling functionality and smooth transitions.
Let me fix these issues. First, let me check what's currently in the page file and then set up the component properly with sample data.
I've fixed both issues:
- Created a proper page component with sample testimonial data that matches your Robin example and added a few more testimonials with different colored backgrounds
- Added safety checks to the Tabs component to handle undefined data and prevent the runtime error
- Added optional chaining (
?.) throughout the component to safely access properties even if data is undefined
The page now displays a complete testimonial carousel with the stacked card effect you wanted, using colorful backgrounds and smooth transitions between testimonials.
I can see you want me to recreate this exact pricing card design. Let me first check the text attachment and understand the current codebase structure.
Now I'll recreate the exact pricing card design from your images. I need to replace the current testimonial content and create the pricing card component with the gradient border effect.
I've recreated the exact pricing card design from your images. The card features a cream background, gradient border from red to pink, serif typography for the title and price, and proper spacing that matches your reference design. The gradient border effect is achieved using a wrapper with a linear gradient background and the main card positioned slightly offset to create the layered appearance.