Design modifications

src/components/StaffSection.tsx

@@ -10,15 +10,17 @@ const roleBadgeClass: Record<string, string> = {
 };
 
 const StaffSection = () => (
-  <section id="staff" className="section-padding bg-background">
-    <div className="container mx-auto">
+  <section id="staff" className="section-padding relative overflow-hidden">
+    {/* subtle radial background to match site accents */}
+    <div className="pointer-events-none absolute inset-0 bg-gradient-to-b from-background to-background/60" />
+    <div className="relative container mx-auto w-[90%]">
       <motion.div
         initial={{ opacity: 0, y: 20 }}
         whileInView={{ opacity: 1, y: 0 }}
         viewport={{ once: true }}
         className="text-center mb-12"
       >
-        <h2 className="font-display text-4xl md:text-5xl font-bold text-gradient mb-4">
+        <h2 className="font-display text-4xl md:text-5xl font-bold bg-gradient-to-r from-primary via-secondary to-accent bg-clip-text text-transparent mb-4">
           Staff del Evento
         </h2>
         <p className="text-muted-foreground max-w-2xl mx-auto">
@@ -26,53 +28,50 @@ const StaffSection = () => (
         </p>
       </motion.div>
 
-      <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
-        {STAFF.map((member, i) => (
+      <div className="mx-auto grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
+        {STAFF.slice(0, 1).map((member, i) => (
           <motion.div
             key={member.id}
             initial={{ opacity: 0, y: 30 }}
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true }}
             transition={{ delay: i * 0.1 }}
-            className="bg-card rounded-2xl overflow-hidden shadow-card hover:shadow-elevated transition-shadow group"
+            className="group rounded-2xl border border-border/50 bg-card/80 backdrop-blur supports-[backdrop-filter]:bg-card/60 shadow-sm hover:shadow-xl transition-all duration-300 mx-auto w-full max-w-xl p-5"
           >
             {/* Foto */}
-            <div className="aspect-square bg-muted flex items-center justify-center overflow-hidden">
+            <div className="relative aspect-square rounded-xl overflow-hidden bg-muted">
               {member.image ? (
                 <img
                   src={member.image}
                   alt={member.name}
-                  className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
+                  className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
                 />
               ) : (
-                <User className="w-16 h-16 text-muted-foreground/40" />
+                <div className="w-full h-full flex items-center justify-center">
+                  <User className="w-16 h-16 text-muted-foreground" />
+                </div>
               )}
+              {/* top gradient sheen */}
+              <div className="pointer-events-none absolute inset-x-0 top-0 h-24 bg-gradient-to-b from-background/40 to-transparent" />
             </div>
-
-            <div className="p-5">
-              {/* Badge de rol */}
-              <span
-                className={`inline-block text-xs font-semibold px-3 py-1 rounded-full mb-3 ${
-                  roleBadgeClass[member.role] || "bg-muted text-muted-foreground"
-                }`}
-              >
-                {member.role}
-              </span>
-
-              <h3 className="font-display text-lg font-bold text-foreground mb-2">
+            <div className="text-center mt-5">
+              <div className="mb-2 flex items-center justify-center gap-2">
+                <span className={`inline-flex items-center rounded-full px-3 py-1 text-xs font-medium ${roleBadgeClass[member.role] ?? "bg-muted text-muted-foreground"}`}>
+                  {member.role}
+                </span>
+              </div>
+              <h3 className="text-xl font-semibold text-foreground mb-1 tracking-tight">
                 {member.name}
               </h3>
               <p className="text-sm text-muted-foreground mb-4">
-                {member.description}
+                {member.subtitle ?? ""}
               </p>
-
-              {/* Redes sociales */}
-              {member.socials?.instagram && (
+              {member.instagram && (
                 <a
-                  href={member.socials.instagram}
+                  href={member.instagram}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="inline-flex items-center gap-1.5 text-sm text-primary hover:text-primary/80 transition-colors"
+                  className="inline-flex items-center gap-2 rounded-full border border-border px-4 py-2 text-sm text-foreground/90 hover:text-foreground hover:border-primary/50 hover:bg-primary/5 transition-colors"
                 >
                   <Instagram className="w-4 h-4" />
                   Instagram