Initial commit

2026-08-14 14:17:48 +02:00
commit 52dc765da4
46 changed files with 6318 additions and 0 deletions
@@ -0,0 +1,128 @@
+import React, { useState } from 'react';
+import { motion } from 'motion/react';
+import { CheckCircle2, Clock, Calendar, ArrowRight, ShieldCheck } from 'lucide-react';
+import { SectionHeading } from '../ui/SectionHeading';
+import { GlassCard } from '../ui/GlassCard';
+import { Badge } from '../ui/Badge';
+import { roadmapData } from '../../data/roadmap';
+
+interface RoadmapSectionProps {
+  onOpenWaitlist: () => void;
+}
+
+export const RoadmapSection: React.FC<RoadmapSectionProps> = ({ onOpenWaitlist }) => {
+  const [activePhaseIndex, setActivePhaseIndex] = useState<number>(1); // Default to current Phase 2
+
+  return (
+    <section id="roadmap" className="py-24 bg-slate-950 relative overflow-hidden border-t border-slate-900">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+        <SectionHeading
+          badgeText="Public Milestones"
+          badgeVariant="tangerine"
+          title="Transparent Roadmap."
+          gradientTitle="Execution Driven."
+          subtitle="Track our engineering progression step-by-step from live micro-SaaS foundation to decentralized protocol deployment."
+        />
+
+        {/* Phase Selection Stepper Header */}
+        <div className="grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-5 gap-3 mb-10">
+          {roadmapData.map((phase, idx) => {
+            const isSelected = activePhaseIndex === idx;
+            const isCompleted = phase.status === 'completed';
+            const isCurrent = phase.status === 'current';
+
+            return (
+              <button
+                key={phase.quarter}
+                onClick={() => setActivePhaseIndex(idx)}
+                className={`p-4 rounded-2xl border text-left transition-all cursor-pointer flex flex-col justify-between ${
+                  isSelected
+                    ? 'bg-slate-900 border-orange-500 ring-1 ring-orange-500/40 shadow-xl'
+                    : 'bg-slate-950/60 border-slate-800/80 hover:border-slate-700'
+                }`}
+              >
+                <div>
+                  <div className="flex items-center justify-between mb-2">
+                    <span className="text-[11px] font-mono text-slate-400">0{idx + 1}</span>
+                    {isCompleted && <Badge variant="sky" showDot={false}>Done</Badge>}
+                    {isCurrent && <Badge variant="tangerine" showDot={true}>Active</Badge>}
+                    {!isCompleted && !isCurrent && <Badge variant="neutral" showDot={false}>Upcoming</Badge>}
+                  </div>
+                  <h4 className="text-xs font-bold text-white line-clamp-1">{phase.quarter}</h4>
+                </div>
+                <p className="text-[11px] text-slate-400 mt-2 line-clamp-1">{phase.title}</p>
+              </button>
+            );
+          })}
+        </div>
+
+        {/* Selected Phase Active Card */}
+        <motion.div
+          key={activePhaseIndex}
+          initial={{ opacity: 0, y: 15 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.3 }}
+        >
+          <GlassCard gradientBorder={true} className="p-8">
+            <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 pb-6 border-b border-slate-800">
+              <div>
+                <div className="flex items-center gap-3">
+                  <Badge
+                    variant={
+                      roadmapData[activePhaseIndex].status === 'completed'
+                        ? 'sky'
+                        : roadmapData[activePhaseIndex].status === 'current'
+                        ? 'tangerine'
+                        : 'sky'
+                    }
+                  >
+                    {roadmapData[activePhaseIndex].quarter}
+                  </Badge>
+                  <span className="text-xs font-mono text-slate-400 flex items-center gap-1">
+                    <Calendar className="w-3.5 h-3.5" /> Stage {activePhaseIndex + 1} of 5
+                  </span>
+                </div>
+                <h3 className="text-2xl font-bold text-white mt-2">
+                  {roadmapData[activePhaseIndex].title}
+                </h3>
+              </div>
+
+              <button
+                onClick={onOpenWaitlist}
+                className="text-xs font-semibold text-orange-400 hover:text-orange-300 flex items-center gap-1 cursor-pointer"
+              >
+                Get early waitlist updates <ArrowRight className="w-3.5 h-3.5" />
+              </button>
+            </div>
+
+            <p className="text-sm text-slate-300 mt-6 leading-relaxed">
+              {roadmapData[activePhaseIndex].description}
+            </p>
+
+            {/* Milestones Checklist */}
+            <div className="mt-8">
+              <h4 className="text-xs font-mono uppercase tracking-widest text-slate-400 mb-4 font-semibold">
+                Milestones & Deliverables
+              </h4>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                {roadmapData[activePhaseIndex].milestones.map((milestone, i) => (
+                  <div key={i} className="p-3.5 rounded-xl bg-slate-950/80 border border-slate-800/80 flex items-start gap-3">
+                    <CheckCircle2 className={`w-4 h-4 mt-0.5 flex-shrink-0 ${
+                      roadmapData[activePhaseIndex].status === 'completed'
+                        ? 'text-sky-400'
+                        : roadmapData[activePhaseIndex].status === 'current'
+                        ? 'text-orange-400'
+                        : 'text-slate-500'
+                    }`} />
+                    <span className="text-xs text-slate-200 leading-relaxed">{milestone}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </GlassCard>
+        </motion.div>
+
+      </div>
+    </section>
+  );
+};