DEDC
Professional Corporate & Educational Landing Page for Engineering Training
DEDC (Digital Engineering Design Course) is a professional Engineering Training Center that has been preparing industry-ready engineers and drafters since 2011. This project involved developing a highly structured, modern corporate landing page and educational platform. The core focus was to transform complex educational data—including an extensive 14-year historical timeline, a dynamic multi-program course catalog (AutoCAD, Plant 3D, Revit MEP, AVEVA E3D), structured B2B corporate values, and a mentor network showcase—into a clean, scalable, and highly converting frontend interface.
The problem
An educational and corporate training platform like DEDC handles a vast amount of structured information—ranging from technical course details (hours, tools, syllabus), historic milestones, corporate validation, to student testimonials. Presenting this dense information without a clear visual hierarchy often leads to a cluttered user interface, poor user retention, and low conversion rates. Additionally, the challenge from a development standpoint was to build a UI that remains modular, pixel-perfect across all devices, and easily maintainable for future feature expansions (such as an LMS integration) without hardcoding repetitive layouts.
The solution
I approached this project by implementing a robust, component-driven development workflow using Next.js, TypeScript, and Tailwind CSS. To manage the heavy content, I built reusable and semantic components such as a responsive historical timeline, automated grid layouts for the core courses, and highly accessible accordion/modal blocks for detailed course information. By strictly utilizing a clean design system with shadcn/ui, I achieved a pixel-perfect, mobile-first design that balances technical authority with a smooth user experience. The resulting code architecture ensures exceptional performance, seamless navigation for both B2C and B2B users, and high maintainability for future scalability.
- 01
Dynamic Multi-Program Course Grid
Implemented a responsive card-based catalog to display complex course details (AutoCAD, Plant 3D, Revit MEP, E3D). Each card dynamically renders parameters like duration (hours), certification badges, and learning options (Online/Offline) with a clean visual hierarchy.
- 02
Interactive Historical Corporate Timeline
Developed a clean, responsive chronological timeline component (spanning 2011–2024) that effectively maps the institution's growth milestone by milestone, ensuring heavy textual data remains engaging and highly scannable.
- 03
Modular Core Values & Mentor Network Layout
Built an adaptable grid structure to showcase the company's vision, mission, and professional mentor profiles. The clean presentation builds B2B credibility while maintaining lightweight component reusability.
- 04
Accessible FAQ Accordion & Social Proof Slider
Created smooth, accessible accordion panels for the FAQ section using shadcn/ui primitives alongside an optimized client testimonial layout to maximize user retention and drive conversion rates.
Core Framework & System Architecture
Built on Next.js (App Router) and React to leverage server-side performance optimization, combined with TypeScript for robust, static type-safety. This architecture ensures high-performance page rendering and predictable data flows across all application modules.
Modular & Presentational Component Layer
Structured using atomic and component-driven development principles. Complex sections—such as the historical timeline, multi-program courses, and mentor networks—are broken down into highly isolated, reusable, and maintainable UI primitives.
Design System & Styling Layer
Utilized Tailwind CSS for utility-first styling alongside shadcn/ui primitives. This setup guarantees a strict, production-ready design system with a centralized layout grid, consistent typography scale, responsive utilities, and seamless interaction states.
