From 8d142a562640148fa71fe9eeda76c85630ecbad2 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Thu, 5 Mar 2026 13:32:35 +0000
Subject: [PATCH] Add src/components/sections/badge/BadgeCardSection.tsx

---
 .../sections/badge/BadgeCardSection.tsx       | 499 ++++++++++++++++++
 1 file changed, 499 insertions(+)
 create mode 100644 src/components/sections/badge/BadgeCardSection.tsx

diff --git a/src/components/sections/badge/BadgeCardSection.tsx b/src/components/sections/badge/BadgeCardSection.tsx
new file mode 100644
index 0000000..34c33b1
--- /dev/null
+++ b/src/components/sections/badge/BadgeCardSection.tsx
@@ -0,0 +1,499 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import BadgeCard from "./BadgeCard";
+
+interface Badge {
+  id: string;
+  tier: string;
+  eNumber: string;
+  tagline: string;
+  accentColor: string;
+  perks: string[];
+  stats: { label: string; value: string }[];
+}
+
+const BadgeCardSection: React.FC = () => {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const badges: Badge[] = [
+    {
+      id: "tier-1",      tier: "Tier I Founder eNative",      eNumber: "E-0001",      tagline: "The pioneers who saw the future",      accentColor: "#c084fc",      perks: [
+        "Lifetime founder status",        "Priority call verification",        "Custom badge design"],
+      stats: [
+        { label: "Tier", value: "Founder" },
+        { label: "Status", value: "Active" },
+      ],
+    },
+    {
+      id: "cross-tier",      tier: "Cross-Tier Business eNative",      eNumber: "E-B001",      tagline: "Building bridges across networks",      accentColor: "#60d8fa",      perks: [
+        "Cross-tier verification",        "Business analytics",        "API access"],
+      stats: [
+        { label: "Tier", value: "Business" },
+        { label: "Status", value: "Active" },
+      ],
+    },
+    {
+      id: "tier-2",      tier: "Tier II Verified eNative",      eNumber: "E-1042",      tagline: "Community trusted and verified",      accentColor: "#6ee7b7",      perks: [
+        "Verified badge",        "Enhanced security",        "Community support"],
+      stats: [
+        { label: "Tier", value: "Verified" },
+        { label: "Status", value: "Active" },
+      ],
+    },
+    {
+      id: "tier-3",      tier: "Tier III Community Verified",      eNumber: "E-3517",      tagline: "Strength through community consensus",      accentColor: "#fcd34d",      perks: [
+        "Community voting rights",        "Collective identity",        "Governance participation"],
+      stats: [
+        { label: "Tier", value: "Community" },
+        { label: "Status", value: "Active" },
+      ],
+    },
+  ];
+
+  if (!mounted) return null;
+
+  return (
+    <section className="py-20 px-6">
+      <style>{`
+        @import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&family=Share+Tech+Mono&family=Exo+2:wght@300;400;500;600;700&display=swap');
+
+        @keyframes floatingDisc {
+          0%, 100% {
+            transform: translateY(0px);
+          }
+          50% {
+            transform: translateY(-12px);
+          }
+        }
+
+        @keyframes spinOrbit1 {
+          from {
+            transform: rotate(0deg);
+          }
+          to {
+            transform: rotate(360deg);
+          }
+        }
+
+        @keyframes spinOrbit2 {
+          from {
+            transform: rotate(360deg);
+          }
+          to {
+            transform: rotate(0deg);
+          }
+        }
+
+        @keyframes haloPulse {
+          0%, 100% {
+            opacity: 0.3;
+            transform: scale(1);
+          }
+          50% {
+            opacity: 0.8;
+            transform: scale(1.08);
+          }
+        }
+
+        @keyframes scanLineSweep {
+          0% {
+            top: 0%;
+          }
+          100% {
+            top: 100%;
+          }
+        }
+
+        @keyframes livePulse {
+          0%, 100% {
+            opacity: 1;
+          }
+          50% {
+            opacity: 0.4;
+          }
+        }
+
+        @keyframes radialGlow {
+          0%, 100% {
+            box-shadow: 0 0 30px 10px rgba(255, 255, 255, 0.05);
+          }
+          50% {
+            box-shadow: 0 0 60px 20px rgba(255, 255, 255, 0.15);
+          }
+        }
+
+        .badge-card {
+          position: relative;
+          background: linear-gradient(135deg, #0f0f1e 0%, #1a1a2e 100%);
+          border: 2px solid transparent;
+          border-radius: 16px;
+          padding: 32px 24px;
+          cursor: pointer;
+          transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
+          overflow: hidden;
+          min-height: 500px;
+          display: flex;
+          flex-direction: column;
+          animation: radialGlow 3.5s ease-in-out infinite;
+        }
+
+        .badge-card:hover {
+          transform: translateY(-8px) scale(1.012);
+        }
+
+        .badge-card::before {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          border-radius: 16px;
+          background: linear-gradient(135deg, var(--accent-color, #c084fc) 0%, transparent 100%);
+          opacity: 0;
+          pointer-events: none;
+          z-index: 1;
+        }
+
+        .badge-card:hover::before {
+          opacity: 0.1;
+        }
+
+        .badge-gradient-border {
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          border-radius: 16px;
+          padding: 2px;
+          background: linear-gradient(135deg, var(--accent-color, #c084fc) 0%, transparent 50%, var(--accent-color, #c084fc) 100%);
+          pointer-events: none;
+          z-index: 0;
+        }
+
+        .badge-card:hover .badge-gradient-border {
+          animation: gradientShift 0.6s ease-in-out;
+        }
+
+        @keyframes gradientShift {
+          0%, 100% {
+            opacity: 0.3;
+          }
+          50% {
+            opacity: 1;
+          }
+        }
+
+        .badge-content {
+          position: relative;
+          z-index: 2;
+          display: flex;
+          flex-direction: column;
+          gap: 20px;
+          flex: 1;
+        }
+
+        .badge-disc-container {
+          position: relative;
+          width: 140px;
+          height: 140px;
+          margin: 0 auto;
+          animation: floatingDisc 5s ease-in-out infinite;
+        }
+
+        .badge-disc {
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          border-radius: 50%;
+          background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.1), transparent);
+          border: 2px solid var(--accent-color, #c084fc);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          overflow: hidden;
+        }
+
+        .badge-disc-inner {
+          width: 130px;
+          height: 130px;
+          border-radius: 50%;
+          background: linear-gradient(135deg, rgba(192, 132, 252, 0.2), rgba(96, 216, 250, 0.1));
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          position: relative;
+        }
+
+        .badge-orbit {
+          position: absolute;
+          border: 1px solid rgba(192, 132, 252, 0.3);
+          border-radius: 50%;
+        }
+
+        .badge-orbit-1 {
+          width: 110px;
+          height: 110px;
+          animation: spinOrbit1 22s linear infinite;
+        }
+
+        .badge-orbit-2 {
+          width: 90px;
+          height: 90px;
+          animation: spinOrbit2 15s linear infinite;
+        }
+
+        .badge-circuit-pattern {
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          border-radius: 50%;
+          overflow: hidden;
+          opacity: 0.3;
+        }
+
+        .badge-e-number {
+          position: relative;
+          z-index: 3;
+          font-family: 'Share Tech Mono', monospace;
+          font-size: 18px;
+          font-weight: 400;
+          color: var(--accent-color, #c084fc);
+          text-align: center;
+        }
+
+        .badge-halo {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          width: 150px;
+          height: 150px;
+          border-radius: 50%;
+          border: 2px solid var(--accent-color, #c084fc);
+          animation: haloPulse 3.5s ease-in-out infinite;
+          pointer-events: none;
+        }
+
+        .badge-shine {
+          position: absolute;
+          top: 20%;
+          left: 20%;
+          width: 30px;
+          height: 30px;
+          background: radial-gradient(circle, rgba(255, 255, 255, 0.4), transparent);
+          border-radius: 50%;
+          filter: blur(8px);
+          z-index: 2;
+        }
+
+        .badge-scan-line {
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          height: 2px;
+          background: linear-gradient(90deg, transparent, var(--accent-color, #c084fc), transparent);
+          opacity: 0;
+          z-index: 3;
+        }
+
+        .badge-card:hover .badge-scan-line {
+          animation: scanLineSweep 1.6s ease-in-out;
+        }
+
+        .badge-title {
+          font-family: 'Rajdhani', sans-serif;
+          font-size: 18px;
+          font-weight: 700;
+          color: #ffffff;
+          text-align: center;
+          line-height: 1.3;
+        }
+
+        .badge-tagline {
+          font-family: 'Exo 2', sans-serif;
+          font-size: 14px;
+          font-weight: 300;
+          color: #a0aec0;
+          text-align: center;
+          line-height: 1.4;
+        }
+
+        .badge-perks {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 8px;
+          justify-content: center;
+        }
+
+        .badge-perk {
+          font-family: 'Share Tech Mono', monospace;
+          font-size: 11px;
+          padding: 6px 12px;
+          background: rgba(255, 255, 255, 0.05);
+          border: 1px solid rgba(192, 132, 252, 0.3);
+          border-radius: 20px;
+          color: #cbd5e1;
+          white-space: nowrap;
+        }
+
+        .badge-divider {
+          height: 1px;
+          background: linear-gradient(90deg, transparent, rgba(192, 132, 252, 0.5), transparent);
+          margin: 12px 0;
+        }
+
+        .badge-footer {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding-top: 12px;
+          border-top: 1px solid rgba(192, 132, 252, 0.2);
+        }
+
+        .badge-stats {
+          display: flex;
+          gap: 20px;
+        }
+
+        .badge-stat {
+          text-align: left;
+        }
+
+        .badge-stat-label {
+          font-family: 'Share Tech Mono', monospace;
+          font-size: 10px;
+          color: #718096;
+          text-transform: uppercase;
+          letter-spacing: 1px;
+        }
+
+        .badge-stat-value {
+          font-family: 'Rajdhani', sans-serif;
+          font-size: 14px;
+          font-weight: 600;
+          color: var(--accent-color, #c084fc);
+        }
+
+        .badge-live-dot {
+          width: 10px;
+          height: 10px;
+          border-radius: 50%;
+          background: var(--accent-color, #c084fc);
+          animation: livePulse 2.2s ease-in-out infinite;
+          box-shadow: 0 0 10px var(--accent-color, #c084fc);
+        }
+
+        .badge-grid {
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+          gap: 24px;
+          max-width: 1200px;
+          margin: 0 auto;
+        }
+
+        .badge-section-header {
+          text-align: center;
+          margin-bottom: 48px;
+        }
+
+        .badge-section-title {
+          font-family: 'Rajdhani', sans-serif;
+          font-size: 36px;
+          font-weight: 700;
+          color: #ffffff;
+          margin-bottom: 12px;
+          line-height: 1.2;
+        }
+
+        @media (max-width: 768px) {
+          .badge-grid {
+            grid-template-columns: 1fr;
+          }
+
+          .badge-section-title {
+            font-size: 28px;
+          }
+
+          .badge-card {
+            padding: 24px 16px;
+            min-height: 450px;
+          }
+        }
+      `}</style>
+
+      <div className="badge-section-header">
+        <h2 className="badge-section-title">Claim Your Badge. Own Your Identity.</h2>
+      </div>
+
+      <div className="badge-grid">
+        {badges.map((badge) => (
+          <div key={badge.id} className="badge-card" style={{ "--accent-color": badge.accentColor } as React.CSSProperties}>
+            <div className="badge-gradient-border"></div>
+            <div className="badge-content">
+              <div className="badge-disc-container">
+                <div className="badge-halo"></div>
+                <div className="badge-disc">
+                  <div className="badge-disc-inner">
+                    <div className="badge-orbit badge-orbit-1"></div>
+                    <div className="badge-orbit badge-orbit-2"></div>
+                    <div className="badge-circuit-pattern">
+                      <svg viewBox="0 0 130 130" style={{ width: "100%", height: "100%" }}>
+                        <circle cx="65" cy="65" r="60" fill="none" stroke="rgba(192, 132, 252, 0.2)" strokeWidth="0.5" />
+                        <circle cx="65" cy="65" r="45" fill="none" stroke="rgba(96, 216, 250, 0.2)" strokeWidth="0.5" />
+                        <line x1="65" y1="20" x2="65" y2="30" stroke="rgba(110, 231, 183, 0.3)" strokeWidth="1" />
+                        <line x1="65" y1="100" x2="65" y2="110" stroke="rgba(110, 231, 183, 0.3)" strokeWidth="1" />
+                        <line x1="30" y1="65" x2="40" y2="65" stroke="rgba(252, 211, 77, 0.3)" strokeWidth="1" />
+                        <line x1="90" y1="65" x2="100" y2="65" stroke="rgba(252, 211, 77, 0.3)" strokeWidth="1" />
+                      </svg>
+                    </div>
+                    <span className="badge-e-number">{badge.eNumber}</span>
+                  </div>
+                </div>
+                <div className="badge-shine"></div>
+              </div>
+
+              <div>
+                <h3 className="badge-title">{badge.tier}</h3>
+                <p className="badge-tagline">{badge.tagline}</p>
+              </div>
+
+              <div className="badge-perks">
+                {badge.perks.map((perk, index) => (
+                  <span key={index} className="badge-perk">
+                    {perk}
+                  </span>
+                ))}
+              </div>
+
+              <div className="badge-divider"></div>
+
+              <div className="badge-footer">
+                <div className="badge-stats">
+                  {badge.stats.map((stat, index) => (
+                    <div key={index} className="badge-stat">
+                      <div className="badge-stat-label">{stat.label}</div>
+                      <div className="badge-stat-value">{stat.value}</div>
+                    </div>
+                  ))}
+                </div>
+                <div className="badge-live-dot"></div>
+              </div>
+            </div>
+
+            <div className="badge-scan-line"></div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+};
+
+export default BadgeCardSection;