bender/a97a02cf-6585-4cd6-94f9-c90f6a08bd94
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update src/components/sections/feature/FeatureCardTwentyOne.tsx

Browse Source
This commit is contained in:
bender
2026-02-27 12:56:33 +00:00
parent 1cbbd49125
commit 76daa05325
1 changed files with 45 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
src/components/sections/feature/FeatureCardTwentyOne.tsx
View File

@@ -37,22 +37,20 @@ export default function FeatureCardTwentyOne({
return (
<section className="w-full py-12 md:py-20 lg:py-24">
<div className="container mx-auto px-4 md:px-6">
{/* Header Section */}
<div className="mb-12 md:mb-16 text-center">
<div className="inline-flex items-center gap-2 mb-4 px-4 py-2 bg-blue-50 rounded-full">
<div className="mb-12 md:mb-16">
<div className="flex items-center gap-2 mb-4">
<div className="flex items-center gap-2 px-3 py-1 rounded-full bg-blue-50 border border-blue-200">
<TagIcon className="w-4 h-4 text-blue-600" />
<span className="text-sm font-semibold text-blue-600">{tag}</span>
<span className="text-sm font-medium text-blue-600">{tag}</span>
</div>
</div>
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-4 text-gray-900">
{title}
</h2>
<p className="text-lg text-gray-600 max-w-2xl mx-auto">
{description}
</p>
<p className="text-lg text-gray-600 max-w-2xl">{description}</p>
</div>
{/* Flip Cards Grid */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{accordionItems.map((item) => (
<div
key={item.id}
@@ -68,47 +66,64 @@ export default function FeatureCardTwentyOne({
: "rotateY(0deg)",
}}
>
{/* Front Side */}
{/* Front of card */}
<div
className="absolute w-full h-full bg-white rounded-lg shadow-lg p-6 flex flex-col justify-between border border-gray-200"
className="absolute w-full h-full bg-white rounded-lg border border-gray-200 shadow-md p-6 flex flex-col justify-between"
style={{
backfaceVisibility: "hidden",
}}
>
<div>
<h3 className="text-xl md:text-2xl font-bold text-gray-900 mb-2">
<h3 className="text-xl font-bold text-gray-900 mb-2">
{item.title}
</h3>
<p className="text-gray-500 text-sm">
Click to read more
<p className="text-sm text-gray-500">
Click to read full testimonial
</p>
</div>
<div className="flex items-center justify-center w-12 h-12 bg-blue-100 rounded-lg">
<span className="text-blue-600 font-bold text-lg">
{item.id}
</span>
<div className="flex items-center justify-center w-10 h-10 rounded-full bg-blue-100">
<svg
className="w-5 h-5 text-blue-600"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M9 5l7 7-7 7"
/>
</svg>
</div>
</div>
{/* Back Side */}
{/* Back of card */}
<div
className="absolute w-full h-full bg-blue-600 rounded-lg shadow-lg p-6 flex flex-col justify-between border border-blue-700"
className="absolute w-full h-full bg-blue-600 rounded-lg border border-blue-700 shadow-md p-6 flex flex-col justify-between text-white"
style={{
backfaceVisibility: "hidden",
transform: "rotateY(180deg)",
}}
>
<div>
<h3 className="text-xl md:text-2xl font-bold text-white mb-4">
{item.title}
</h3>
<p className="text-blue-50 text-sm leading-relaxed">
{item.content}
</p>
<p className="text-sm leading-relaxed">{item.content}</p>
</div>
<div className="flex items-center justify-center w-10 h-10 rounded-full bg-blue-500">
<svg
className="w-5 h-5 text-white"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M15 19l-7-7 7-7"
/>
</svg>
</div>
<p className="text-blue-200 text-xs text-center">
Click to flip back
</p>
</div>
</div>
</div>