-
- {isFeatured ? `FEATURED: ${title}` : title}
-
-
- {description}
-
+
+
+ {/* Sidebar Label - Desktop Only */}
+
+ FIG. {figNumber}
+
- {isFeatured && featuredImage && (
-
- 
-
- SCALE 1:15
- EXPLODED_VIEW_DIG.V1
-
-
- )}
-
+ {/* Content Column (Text & Buttons) */}
+
+
+ {title}
+
+
+
+ {description}
-
- {/* Main Grid Content */}
-
-
-
+
+ {/* Blueprint Column (Animation) */}
+
+ {featuredImage && (
+
+ {typeof featuredImage === 'string' ? (
+
+ ) : (
+
+ {featuredImage}
+
+ )}
+
+ SYSTEM_SCHEMATIC_V.1
+ ID_{figNumber}
+
+
+ )}
+
+
+
);
};
diff --git a/src/components/illustrations/DevToolsBlueprint.jsx b/src/components/illustrations/DevToolsBlueprint.jsx
new file mode 100644
index 0000000..2a7215d
--- /dev/null
+++ b/src/components/illustrations/DevToolsBlueprint.jsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+const DevToolsBlueprint = () => {
+ const layerTransition = { duration: 4.5, repeat: Infinity, ease: "easeInOut" };
+
+ const Iso = ({ children, yOffset = 0 }) => (
+
+ {children}
+
+ );
+
+ return (
+
+ );
+};
+
+export default DevToolsBlueprint;
diff --git a/src/components/illustrations/MaintenanceBlueprint.jsx b/src/components/illustrations/MaintenanceBlueprint.jsx
new file mode 100644
index 0000000..675c3ac
--- /dev/null
+++ b/src/components/illustrations/MaintenanceBlueprint.jsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+const MaintenanceBlueprint = () => {
+ return (
+
+ );
+};
+
+export default MaintenanceBlueprint;
diff --git a/src/components/illustrations/MediaBlueprint.jsx b/src/components/illustrations/MediaBlueprint.jsx
new file mode 100644
index 0000000..22c8766
--- /dev/null
+++ b/src/components/illustrations/MediaBlueprint.jsx
@@ -0,0 +1,70 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+const MediaBlueprint = () => {
+ const Iso = ({ children, yOffset = 0 }) => (
+
+ {children}
+
+ );
+
+ return (
+
+ );
+};
+
+export default MediaBlueprint;
diff --git a/src/components/illustrations/PrimaryBlueprint.jsx b/src/components/illustrations/PrimaryBlueprint.jsx
new file mode 100644
index 0000000..4d32d9a
--- /dev/null
+++ b/src/components/illustrations/PrimaryBlueprint.jsx
@@ -0,0 +1,70 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+const PrimaryBlueprint = () => {
+ return (
+
+ );
+};
+
+export default PrimaryBlueprint;
diff --git a/src/data/links.js b/src/data/links.js
index 9cc7292..172800d 100644
--- a/src/data/links.js
+++ b/src/data/links.js
@@ -125,24 +125,24 @@ export const groups = [
id: 'primary',
title: 'PRIMARY',
icon: Briefcase,
- description: "Explore the underlying principles of the primary ecosystem. Each component is designed for maximum efficiency and conceptual clarity in your daily workflow."
+ description: "Have you ever wondered how your digital presence is routed across different platforms? The primary resource layer acts as the centralized directory for all professional identities. These components are hard-coded for maximum reliability and persistent access to the core VNDK ecosystem."
},
{
id: 'entertainment',
- title: 'ENTERTAINMENT',
+ title: 'MEDIA_DISTRIBUTION',
icon: Monitor,
- description: "Digital consumption and leisure systems. A curated selection of platforms for high-fidelity media streaming and interactive entertainment."
+ description: "Digital consumption and leisure systems operate on a separate high-fidelity distribution plane. By utilizing unauthorized ad-blocking layers and clean streaming protocols, we ensure that media remains an uninterrupted experience within the portal."
},
{
id: 'rm8pfix-vn',
- title: 'RM8PFIX-VN',
+ title: 'SYSTEM_MAINTENANCE',
icon: Wrench,
- description: "Specialized system utilities and maintenance protocols for local network environments. Ensuring stability and performance through automated tooling."
+ description: "This terminal routes directly to the REDMAGIC hardware modification group. Representing flagship architecture (builds 8, 9, and 10 Pro), these devices feature top-tier Snapdragon processing and kernel-level flexibility, granting enthusiasts absolute administrative control to deeply customize their systems."
},
{
id: 'dev',
- title: 'DEV TOOLS',
+ title: 'DEVELOPMENT_STACK',
icon: Cpu,
- description: "A comprehensive toolkit for the modern developer. From binary manipulation to layout verification, these utilities accelerate the build process."
+ description: "Because our software tools are built on primitive data types, we need a robust stack to handle rasterization, PDF serialization, and IT utility execution. This toolkit provides the necessary abstractions to manipulate system state at the binary level."
},
];
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index bb4a1f8..57ea771 100644
--- a/src/index.css
+++ b/src/index.css
@@ -37,7 +37,7 @@
/* Technical Layout Utilities */
.ms-container {
- @apply max-w-[1100px] mx-auto px-6 md:px-12 py-8 md:py-12;
+ @apply max-w-[1100px] mx-auto px-6 md:px-12;
}
/* Dropped Cap */
@@ -55,21 +55,38 @@
/* Dot Grid Divider */
.dot-divider {
- @apply w-full h-8 mb-6 md:mb-8;
- background-image: radial-gradient(circle, #d1d5db 1px, transparent 1px);
- background-size: 12px 12px;
+ @apply w-full h-8 mb-4;
+ background-image: radial-gradient(circle, #e5e7eb 1.5px, transparent 1.5px);
+ background-size: 16px 16px;
+}
+
+/* Blueprint Image Container */
+.blueprint-container {
+ @apply relative border border-gray-100 bg-white p-2 shadow-sm transition-all duration-500;
+ background-image:
+ linear-gradient(var(--accent-soft) 1px, transparent 1px),
+ linear-gradient(90deg, var(--accent-soft) 1px, transparent 1px);
+ background-size: 16px 16px;
+}
+
+.blueprint-container img {
+ @apply mix-blend-multiply opacity-90;
+}
+
+.manual-text {
+ @apply text-[17px] md:text-[18px] leading-[1.6] text-gray-900;
}
/* Card Styling (Technical Labels) */
.tech-label {
- @apply border border-gray-100 bg-white p-4 transition-all duration-300;
+ @apply border-2 border-gray-100 bg-white p-4 md:p-5 transition-all duration-300;
box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.05);
}
.tech-label:hover {
- @apply border-blue-600 shadow-blue-100;
- box-shadow: 4px 4px 0px var(--accent-soft);
- transform: translate(-2px, -2px);
+ @apply border-blue-600 shadow-blue-100 bg-blue-50/10;
+ box-shadow: 6px 6px 0px var(--accent-soft);
+ transform: translate(-3px, -3px);
}
/* Vertical Text Helper */