Card - Copy this React, Tailwind Component to your project
"use client"; import { useState, useRef } from "react"; import { Swiper, SwiperSlide } from "swiper/react"; import "swiper/css"; import "swiper/css/effect-cards"; import { EffectCards } from "swiper/modules"; import { cardData } from "@/data"; // Ensure the correct path to your data import { FaStar, FaHeart, FaShare } from "react-icons/fa"; import SwiperCore from "swiper"; interface CardProps { id: number; title: string; description: string; image: string; rating: number; } const HomeValuesCarousel: React.FC = () => { const swiperRef = useRef<SwiperCore | null>(null); // Reference to Swiper instance const handleCardClick = () => { if (swiperRef.current) { swiperRef.current.slideNext(); // Move to the next slide } }; return ( <div className="max-w-3xl mx-auto p-4"> <Swiper effect={"cards"} grabCursor={true} modules={[EffectCards]} className="mySwiper" onSwiper={(swiper) => (swiperRef.current = swiper)} // Attach the swiper instance to ref > {cardData.map((card: CardProps) => ( <SwiperSlide key={card.id} className="bg-gradient-to-b from-[#3f9eb7] to-white rounded-[17.30px] shadow-lg border border-[#3f9eb7] overflow-hidden" onClick={handleCardClick} // Trigger next slide on click > <div className="relative"> <img src={card.image} alt={card.title} className="w-full h-48 object-cover" /> <div className="absolute top-2 right-2 bg-white rounded-full p-2"> <FaHeart className="text-red-500 cursor-pointer hover:scale-110 transition-transform" /> </div> </div> <div className="p-4"> <h2 className="text-xl font-semibold mb-2 text-white"> {card.title} </h2> <p className="text-gray-100 mb-4">{card.description}</p> <div className="flex items-center justify-between"> <div className="flex items-center"> <FaStar className="text-yellow-400 mr-1" /> <span className="font-bold text-white"> {card.rating.toFixed(1)} </span> </div> <button className="bg-white text-[#3f9eb7] px-4 py-2 rounded-full hover:bg-opacity-90 transition-colors flex items-center"> <FaShare className="mr-2" /> Share </button> </div> </div> </SwiperSlide> ))} </Swiper> </div> ); }; export default HomeValuesCarousel; --- the card pictures and content should be why our it company is valuable that discribe, make it mordern and cool looking
