From 477a6acd1105b4a9fb2ec71c701ab447bc8bea86 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Fri, 27 Feb 2026 13:23:17 +0000
Subject: [PATCH] Update src/tag/Tag.tsx

---
 src/tag/Tag.tsx | 113 +++++++++++++++++++++++++++++++++++-------------
 1 file changed, 83 insertions(+), 30 deletions(-)

diff --git a/src/tag/Tag.tsx b/src/tag/Tag.tsx
index ca5f500..87dfd11 100644
--- a/src/tag/Tag.tsx
+++ b/src/tag/Tag.tsx
@@ -1,6 +1,6 @@
-"use client";
+'use client';
 
-import { useState } from "react";
+import { useState } from 'react';
 
 interface TeamMember {
   id: string;
@@ -39,25 +39,26 @@ export default function Tag({ members = defaultMembers }: TagProps) {
           {members.map((member) => (
             <div
               key={member.id}
-              className="h-80 cursor-pointer perspective bg-glass-elevated rounded-lg border border-accent/20"
+              className="h-80 cursor-pointer perspective"
               onClick={() => toggleFlip(member.id)}
             >
               <div
                 className="relative w-full h-full transition-transform duration-500 transform-gpu"
                 style={{
-                  transformStyle: "preserve-3d",                  transform: flipped[member.id]
-                    ? "rotateY(180deg)"
-                    : "rotateY(0deg)"
+                  transformStyle: 'preserve-3d',
+                  transform: flipped[member.id]
+                    ? 'rotateY(180deg)'
+                    : 'rotateY(0deg)',
                 }}
               >
                 {/* Front Side */}
                 <div
-                  className="absolute w-full h-full bg-white rounded-lg shadow-lg p-6 flex flex-col items-center justify-center"
+                  className="absolute w-full h-full bg-white rounded-lg shadow-lg overflow-hidden flex flex-col items-center justify-center p-6"
                   style={{
-                    backfaceVisibility: "hidden"
+                    backfaceVisibility: 'hidden',
                   }}
                 >
-                  <div className="w-32 h-32 mb-4 rounded-full overflow-hidden bg-gray-200">
+                  <div className="w-32 h-32 mb-4 rounded-full overflow-hidden bg-gray-200 flex-shrink-0">
                     <img
                       src={member.image}
                       alt={member.name}
@@ -68,18 +69,21 @@ export default function Tag({ members = defaultMembers }: TagProps) {
                     {member.name}
                   </h3>
                   <p className="text-gray-600 text-center mt-2">{member.role}</p>
-                  <p className="text-sm text-gray-400 mt-4">Hover to see links</p>
+                  <p className="text-sm text-gray-400 mt-4 text-center">
+                    Hover to see social links
+                  </p>
                 </div>
 
                 {/* Back Side */}
                 <div
-                  className="absolute w-full h-full bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg shadow-lg p-6 flex flex-col items-center justify-center"
+                  className="absolute w-full h-full bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg shadow-lg overflow-hidden flex flex-col items-center justify-center p-6"
                   style={{
-                    backfaceVisibility: "hidden",                    transform: "rotateY(180deg)"
+                    backfaceVisibility: 'hidden',
+                    transform: 'rotateY(180deg)',
                   }}
                 >
                   <h3 className="text-2xl font-bold text-white mb-6 text-center">
-                    {member.name}
+                    Connect
                   </h3>
                   <div className="flex flex-col gap-4 w-full">
                     {member.social.twitter && (
@@ -89,8 +93,14 @@ export default function Tag({ members = defaultMembers }: TagProps) {
                         rel="noopener noreferrer"
                         className="flex items-center justify-center gap-2 bg-white bg-opacity-20 hover:bg-opacity-30 text-white py-2 px-4 rounded-lg transition-all duration-200"
                       >
-                        <span>𝕏</span>
-                        <span>Twitter</span>
+                        <svg
+                          className="w-5 h-5"
+                          fill="currentColor"
+                          viewBox="0 0 24 24"
+                        >
+                          <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2s9 5 20 5a9.5 9.5 0 00-9-5.5c4.75 2.25 9-1 9-5.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" />
+                        </svg>
+                        Twitter
                       </a>
                     )}
                     {member.social.linkedin && (
@@ -100,8 +110,15 @@ export default function Tag({ members = defaultMembers }: TagProps) {
                         rel="noopener noreferrer"
                         className="flex items-center justify-center gap-2 bg-white bg-opacity-20 hover:bg-opacity-30 text-white py-2 px-4 rounded-lg transition-all duration-200"
                       >
-                        <span>in</span>
-                        <span>LinkedIn</span>
+                        <svg
+                          className="w-5 h-5"
+                          fill="currentColor"
+                          viewBox="0 0 24 24"
+                        >
+                          <path d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z" />
+                          <circle cx="4" cy="4" r="2" />
+                        </svg>
+                        LinkedIn
                       </a>
                     )}
                     {member.social.github && (
@@ -111,8 +128,14 @@ export default function Tag({ members = defaultMembers }: TagProps) {
                         rel="noopener noreferrer"
                         className="flex items-center justify-center gap-2 bg-white bg-opacity-20 hover:bg-opacity-30 text-white py-2 px-4 rounded-lg transition-all duration-200"
                       >
-                        <span>⚙</span>
-                        <span>GitHub</span>
+                        <svg
+                          className="w-5 h-5"
+                          fill="currentColor"
+                          viewBox="0 0 24 24"
+                        >
+                          <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v 3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+                        </svg>
+                        GitHub
                       </a>
                     )}
                     {member.social.email && (
@@ -120,8 +143,20 @@ export default function Tag({ members = defaultMembers }: TagProps) {
                         href={`mailto:${member.social.email}`}
                         className="flex items-center justify-center gap-2 bg-white bg-opacity-20 hover:bg-opacity-30 text-white py-2 px-4 rounded-lg transition-all duration-200"
                       >
-                        <span>✉</span>
-                        <span>Email</span>
+                        <svg
+                          className="w-5 h-5"
+                          fill="none"
+                          stroke="currentColor"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth={2}
+                            d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+                          />
+                        </svg>
+                        Email
                       </a>
                     )}
                   </div>
@@ -137,21 +172,39 @@ export default function Tag({ members = defaultMembers }: TagProps) {
 
 const defaultMembers: TeamMember[] = [
   {
-    id: "1",    name: "Sarah Johnson",    role: "Lead Designer",    image:
-      "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop",    social: {
-      twitter: "https://twitter.com",      linkedin: "https://linkedin.com",      email: "sarah@example.com"
+    id: '1',
+    name: 'Sarah Johnson',
+    role: 'Lead Designer',
+    image:
+      'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop',
+    social: {
+      twitter: 'https://twitter.com',
+      linkedin: 'https://linkedin.com',
+      email: 'sarah@example.com',
     },
   },
   {
-    id: "2",    name: "Michael Chen",    role: "Full Stack Developer",    image:
-      "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop",    social: {
-      github: "https://github.com",      linkedin: "https://linkedin.com",      email: "michael@example.com"
+    id: '2',
+    name: 'Michael Chen',
+    role: 'Full Stack Developer',
+    image:
+      'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop',
+    social: {
+      github: 'https://github.com',
+      linkedin: 'https://linkedin.com',
+      email: 'michael@example.com',
     },
   },
   {
-    id: "3",    name: "Emma Rodriguez",    role: "Product Manager",    image:
-      "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop",    social: {
-      twitter: "https://twitter.com",      linkedin: "https://linkedin.com",      email: "emma@example.com"
+    id: '3',
+    name: 'Emma Rodriguez',
+    role: 'Product Manager',
+    image:
+      'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop',
+    social: {
+      twitter: 'https://twitter.com',
+      linkedin: 'https://linkedin.com',
+      email: 'emma@example.com',
     },
   },
 ];
\ No newline at end of file