import React, { useState } from ‘react’;
import {
Microchip,
Cpu,
CheckCircle,
Layers,
Activity,
ArrowRight,
BookOpen,
Zap,
Monitor,
Grid,
Search,
Settings
} from ‘lucide-react’;
// Data derived from the user’s provided markdown guide
const flowData = {
overview: {
id: ‘overview’,
title: ‘Introduction to VLSI & ASIC’,
icon:
,
content: [
{
heading: “What is VLSI?”,
text: “Very Large Scale Integration (VLSI) is the process of creating an Integrated Circuit (IC) by combining millions or billions of transistors into a single chip. From Jack Kilby’s first IC in 1958 to modern processors with over 6 billion transistors, VLSI balances performance, power, area, and cost.”,
highlight: true
},
{
heading: “What is ASIC?”,
text: “Application-Specific Integrated Circuit (ASIC) is a chip designed for a specific use rather than general-purpose use. Examples include chips in washing machines, smartphones, and voice recorders. The design process is split into Front End (Logical) and Back End (Physical).”,
highlight: false
}
]
},
frontend: {
id: ‘frontend’,
title: ‘Front End Design’,
description: ‘Defining architecture and logic.’,
icon:
,
steps: [
{
title: “1. Design Specifications”,
desc: “Defining the Product Requirements based on market research.”,
details: [
“Functionality: What does the chip do?”,
“Performance: Speed, Power, Area (PPA).”,
“Interfaces: USB, PCIe, DDR, etc.”
],
icon:
},
{
title: “2. Architecture Design”,
desc: “Translating specs into Microarchitecture.”,
details: [
“Hardware/Software Partitioning.”,
“Block Diagrams (ALU, Memory Controller).”,
“Data Flow definition.”
],
icon:
},
{
title: “3. RTL Design”,
desc: “Coding the logic in Verilog/VHDL.”,
details: [
“Using Hardware Description Languages (HDL).”,
“Defining Register Transfer Level (RTL) behavior.”,
“Describing how data moves between registers.”
],
icon:
}
]
},
verification: {
id: ‘verification’,
title: ‘Verification’,
description: ‘Ensuring the design is bug-free.’,
icon:
,
steps: [
{
title: “1. Verification Planning”,
desc: “Listing features and corner cases to test.”,
details: [“Creation of a comprehensive test plan.”, “Identifying extreme scenarios (corner cases).”],
icon:
},
{
title: “2. Testbench Development”,
desc: “Building the simulation environment.”,
details: [
“Drivers: Send inputs.”,
“Monitors: Observe outputs.”,
“Scoreboards: Compare actual vs. expected results.”,
“Typically uses SystemVerilog/UVM.”
],
icon:
},
{
title: “3. Functional Simulation”,
desc: “Running the RTL against the testbench.”,
details: [“Checking for logical errors.”, “Debugging failing tests.”],
icon:
},
{
title: “4. Coverage Analysis”,
desc: “Measuring testing completeness.”,
details: [
“Code Coverage: Were all lines executed?”,
“Functional Coverage: Were all features tested?”,
“Sign-off: Design is considered verified.”
],
icon:
}
]
},
backend: {
id: ‘backend’,
title: ‘Physical Design’,
description: ‘Converting logic to geometric layout.’,
icon:
,
steps: [
{
title: “1. Logic Synthesis”,
desc: “RTL to Gate-Level Netlist.”,
details: [“Mapping to standard cells (AND, OR, Flops).”, “Applying timing and area constraints.”],
icon:
},
{
title: “2. Floorplanning”,
desc: “Blueprint of the chip.”,
details: [“Defining Die Size.”, “I/O Pin Placement.”, “Macro Placement (RAMs, DSPs).”],
icon:
},
{
title: “3. Power Planning”,
desc: “Building the Power Distribution Network.”,
details: [“Creating VDD/VSS mesh.”, “Preventing IR Drop issues.”],
icon:
},
{
title: “4. Placement”,
desc: “Placing standard cells.”,
details: [“Minimizing wire length.”, “Avoiding congestion.”],
icon:
},
{
title: “5. Clock Tree Synthesis”,
desc: “Distributing the clock signal.”,
details: [“Balancing Skew and Latency.”, “Inserting buffers/inverters.”],
icon:
},
{
title: “6. Routing”,
desc: “Connecting cells with metal wires.”,
details: [“Global & Detail Routing.”, “Fixing Design Rule Check (DRC) violations.”],
icon:
},
{
title: “7. Static Timing Analysis”,
desc: “Verifying timing constraints.”,
details: [“Setup Time checks.”, “Hold Time checks.”],
icon:
},
{
title: “8. Sign-off”,
desc: “Physical Verification & Stream Out.”,
details: [“DRC (Design Rule Check).”, “LVS (Layout vs Schematic).”, “GDSII Stream Out.”],
icon:
}
]
},
postsilicon: {
id: ‘postsilicon’,
title: ‘Post-Silicon’,
description: ‘Validation after manufacturing.’,
icon:
,
steps: [
{
title: “1. Bring-Up”,
desc: “First power-on of the chip.”,
details: [“Checking if chip is ‘alive’.”, “JTAG communication verification.”],
icon:
},
{
title: “2. Electrical Validation”,
desc: “Checking physical characteristics.”,
details: [“Signal Integrity.”, “Power Integrity.”, “Thermal performance.”],
icon:
},
{
title: “3. Functional Validation”,
desc: “Running real software.”,
details: [“Booting OS/Drivers.”, “Catching bugs not found in simulation.”],
icon:
},
{
title: “4. Characterization”,
desc: “Testing across PVT corners.”,
details: [“Process (Fast/Slow silicon).”, “Voltage (High/Low).”, “Temperature (-40°C to 85°C+).”],
icon:
}
]
}
};
export default function App() {
const [activeTab, setActiveTab] = useState(‘overview’);
const [activeStepIndex, setActiveStepIndex] = useState(0);
const handleTabChange = (tabId) => {
setActiveTab(tabId);
setActiveStepIndex(0); // Reset step when changing tabs
};
const renderContent = () => {
const currentData = flowData[activeTab];
if (activeTab === ‘overview’) {
return (
Introduction to VLSI Design
Explore the journey of an Integrated Circuit from a mere concept to a physical chip powering the modern world.
{currentData.content.map((item, idx) => (
{item.heading}
{item.text}
))}
);
}
// Flow Views (Frontend, Verification, Backend, Post-Silicon)
return (
{/* Left Side: Step List */}
{currentData.title}
{currentData.description}
{/* Connecting Line (Visual only) */}
{currentData.steps.map((step, idx) => (
))}
{/* Right Side: Detail Card */}
{currentData.steps[activeStepIndex].icon}
Step {activeStepIndex + 1} of {currentData.steps.length}
{currentData.steps[activeStepIndex].title}
{currentData.steps[activeStepIndex].desc}
Key Details
{currentData.steps[activeStepIndex].details.map((detail, idx) => (
-
{detail}
))}
{activeStepIndex < currentData.steps.length - 1 ? (
) : (
// Logic to move to next main tab if available
Section Complete
)}
);
};
return (
{/* Header */}
{/* Main Container */}
{/* Navigation Tabs */}
{Object.values(flowData).map((tab) => (
))}
{/* Dynamic Content Area */}
{renderContent()}
{/* Footer */}
);
}
