From 7376a655c40d85b5066a9eab3c669a63b727bb8f Mon Sep 17 00:00:00 2001 From: Antigravity AI Date: Sun, 19 Apr 2026 10:56:47 +0700 Subject: [PATCH] feat: redesign to technical reference manual aesthetic with isometric graphics --- package-lock.json | 16 +++- src/App.jsx | 24 +++-- src/assets/illustrations/blueprint_dev.png | Bin 0 -> 940900 bytes .../illustrations/blueprint_ecosystem.png | Bin 0 -> 784755 bytes src/components/Header.jsx | 37 +++++--- src/components/PortalCard.jsx | 6 +- src/components/Section.jsx | 88 ++++++++++-------- .../illustrations/DevToolsBlueprint.jsx | 59 ++++++++++++ .../illustrations/MaintenanceBlueprint.jsx | 62 ++++++++++++ .../illustrations/MediaBlueprint.jsx | 70 ++++++++++++++ .../illustrations/PrimaryBlueprint.jsx | 70 ++++++++++++++ src/data/links.js | 14 +-- src/index.css | 33 +++++-- 13 files changed, 396 insertions(+), 83 deletions(-) create mode 100644 src/assets/illustrations/blueprint_dev.png create mode 100644 src/assets/illustrations/blueprint_ecosystem.png create mode 100644 src/components/illustrations/DevToolsBlueprint.jsx create mode 100644 src/components/illustrations/MaintenanceBlueprint.jsx create mode 100644 src/components/illustrations/MediaBlueprint.jsx create mode 100644 src/components/illustrations/PrimaryBlueprint.jsx diff --git a/package-lock.json b/package-lock.json index eb1cef6..6b46954 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,11 +1,11 @@ { - "name": "port", + "name": "vndangkhoa", "version": "0.0.0", "lockfileVersion": 3, "requires": true, "packages": { "": { - "name": "port", + "name": "vndangkhoa", "version": "0.0.0", "dependencies": { "framer-motion": "^12.23.24", @@ -72,6 +72,7 @@ "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.28.5", @@ -1391,6 +1392,7 @@ "integrity": "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "csstype": "^3.2.2" } @@ -1432,6 +1434,7 @@ "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", "dev": true, "license": "MIT", + "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -1642,6 +1645,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "baseline-browser-mapping": "^2.8.25", "caniuse-lite": "^1.0.30001754", @@ -1945,6 +1949,7 @@ "integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.1", @@ -2520,6 +2525,7 @@ "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==", "dev": true, "license": "MIT", + "peer": true, "bin": { "jiti": "bin/jiti.js" } @@ -2934,6 +2940,7 @@ "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "dev": true, "license": "MIT", + "peer": true, "engines": { "node": ">=12" }, @@ -2981,6 +2988,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", @@ -3176,6 +3184,7 @@ "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz", "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==", "license": "MIT", + "peer": true, "engines": { "node": ">=0.10.0" } @@ -3185,6 +3194,7 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz", "integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==", "license": "MIT", + "peer": true, "dependencies": { "scheduler": "^0.27.0" }, @@ -3628,6 +3638,7 @@ "integrity": "sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "esbuild": "^0.21.3", "postcss": "^8.4.43", @@ -3750,6 +3761,7 @@ "integrity": "sha512-AvvthqfqrAhNH9dnfmrfKzX5upOdjUVJYFqNSlkmGf64gRaTzlPwz99IHYnVs28qYAybvAlBV+H7pn0saFY4Ig==", "dev": true, "license": "MIT", + "peer": true, "funding": { "url": "https://github.com/sponsors/colinhacks" } diff --git a/src/App.jsx b/src/App.jsx index 028fda4..8444c2a 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -6,8 +6,11 @@ import Section from './components/Section'; import PortalCard from './components/PortalCard'; import { Search } from 'lucide-react'; -// Relative assets (ported from generated artifacts) -import featuredPrimary from './assets/illustrations/featured_blueprint_primary_1776568228720.png'; +// Interactive blueprint components +import PrimaryBlueprint from './components/illustrations/PrimaryBlueprint'; +import MediaBlueprint from './components/illustrations/MediaBlueprint'; +import MaintenanceBlueprint from './components/illustrations/MaintenanceBlueprint'; +import DevToolsBlueprint from './components/illustrations/DevToolsBlueprint'; function App() { const [searchQuery, setSearchQuery] = useState(''); @@ -55,8 +58,13 @@ function App() { title={group.title} description={group.description} index={groupIndex} - isFeatured={isPrimary && !searchQuery} // Show as featured only if not searching - featuredImage={isPrimary ? featuredPrimary : null} + isFeatured={isPrimary && !searchQuery} + featuredImage={ + group.id === 'primary' ? : + group.id === 'entertainment' ? : + group.id === 'rm8pfix-vn' ? : + + } > {groupLinks.map((link, linkIndex) => ( -
+
+
SEARCH @@ -89,7 +97,7 @@ function App() {
)} - {groupIndex < groups.length - 1 && !isPrimary &&
} + {groupIndex < groups.length - 1 && !isPrimary &&
} ); })} @@ -101,7 +109,7 @@ function App() { )} -
); }; diff --git a/src/components/PortalCard.jsx b/src/components/PortalCard.jsx index e1449bf..c538997 100644 --- a/src/components/PortalCard.jsx +++ b/src/components/PortalCard.jsx @@ -16,7 +16,7 @@ const PortalCard = ({ item, index }) => { >
- + [ PORT_ACCESS ]
{ />
-

+

→ {title.toUpperCase()}

-

+

{subtitle}

diff --git a/src/components/Section.jsx b/src/components/Section.jsx index d8a6051..7ce7ac2 100644 --- a/src/components/Section.jsx +++ b/src/components/Section.jsx @@ -7,55 +7,61 @@ const Section = ({ title, description, children, index, isFeatured, featuredImag // Format index as 001, 002, etc. const figNumber = String(index + 1).padStart(3, '0'); + const isEven = index % 2 === 0; return ( -
- {/* Sidebar Illustration Info */} -
-
- {/* Vertical Label - Desktop Only */} - - FIG. {figNumber} - - -
-

- {isFeatured ? `FEATURED: ${title}` : title} -

-

- {description} -

+
+
+ {/* Sidebar Label - Desktop Only */} + + FIG. {figNumber} + - {isFeatured && featuredImage && ( - - Featured Technical Illustration -
- SCALE 1:15 - EXPLODED_VIEW_DIG.V1 -
- - )} -
+ {/* Content Column (Text & Buttons) */} +
+

+ {title} +

+ +
+ {description}
-
- {/* Main Grid Content */} -
-
+
{children}
-
+ + {/* Blueprint Column (Animation) */} +
+ {featuredImage && ( + + {typeof featuredImage === 'string' ? ( + {title} + ) : ( +
+ {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 ( + + + {/* Base Layer */} + + + + + + + + + + + {/* Middle Layer (Disk) */} + + + + + + + + + {/* Top Layer (Processor/Chip) */} + + + + {/* Chip pins */} + + + + + + + {/* Connection Lines */} + + + + {/* Labels */} + SHELL_EXEC + IMAGE_RASTERIZER + PDF_PARSER + + ); +}; + +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 ( + + + + + + + + + + + {/* Main Interface Frame */} + + + + {/* Header bar */} + + + + + TERMINAL_DIAGNOSTICS + + {/* Process Bar 1 */} + NET_PATCH_SEQ + + + + {/* Process Bar 2 */} + RM8_VALIDATION + + + + {/* Diagnostic Grid Lights */} + SYSTEM_NODES + + {/* Row of blinking squares */} + {[0, 1, 2, 3, 4, 5, 6, 7].map((i) => ( + + ))} + {[0, 1, 2, 3, 4, 5, 6, 7].map((i) => ( + + ))} + + + + ); +}; + +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 ( + + + {/* Background Plane */} + + + + {/* Isometric Grid */} + + + + + + + {/* Floating Media Waveform */} + + + {/* A surface looking like a gaussian bump - using paths in isometric space */} + {/* We define points directly in local SVG space, they'll be projected. */} + {/* Bottom plane of wave */} + + + {/* The Waveform Curve */} + + + {/* Secondary Sine Wave */} + + + + + {/* Vertical Guides */} + + + {/* Labels */} + FREQUENCY_MOD + MEDIA_BUFFER + + + ); +}; + +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 ( + + {/* 2D Grid Background */} + + + + + + + + {/* Frame / Borders */} + + + + {/* Group centered vertically on canvas */} + + {/* Main Pipeline */} + + + {/* Router Node Base */} + + + + + {/* Branch Lines */} + + + + {/* Showcase Node */} + + + + {/* Archive Node */} + + + + {/* Data Packet Animations - Top Branch */} + + {/* Data Packet Animations - Bottom Branch */} + + + {/* Logic Indicators */} + + + + {/* Labels - with white background to cut through lines */} + + SYS_INPUT + + + CORE_ROUTER + + SHOWCASE + ARCHIVE + + + ); +}; + +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 */