|
| 1 | +--- |
| 2 | +import { Image } from "astro:assets"; |
| 3 | +import ArchitectureDiagram from "../assets/architecture-diagram.png"; |
| 4 | +--- |
| 5 | + |
1 | 6 | <section id="architecture" class="py-20 relative"> |
2 | 7 | <div class="container mx-auto px-4 relative z-10"> |
3 | 8 | <div class="text-center max-w-3xl mx-auto mb-16"> |
|
15 | 20 | class="absolute inset-0 bg-gradient-to-r from-blue-600/10 to-purple-600/10 rounded-lg blur-xl" |
16 | 21 | > |
17 | 22 | </div> |
18 | | - <img |
19 | | - src="/architecture-diagram.png" |
| 23 | + <Image |
| 24 | + src={ArchitectureDiagram} |
20 | 25 | alt="Malbox Architecture" |
21 | 26 | class="w-full relative z-10" |
22 | 27 | /> |
|
85 | 90 | </ul> |
86 | 91 | </div> |
87 | 92 | </div> |
88 | | - |
89 | | - <div class="glassmorphism rounded-xl p-8"> |
90 | | - <h3 class="text-2xl font-semibold mb-6 text-center text-white"> |
91 | | - Technology Stack |
92 | | - </h3> |
93 | | - <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> |
94 | | - <div class="flex flex-col items-center"> |
95 | | - <div |
96 | | - class="bg-gray-900/80 p-4 rounded-lg shadow-lg mb-3 w-20 h-20 flex items-center justify-center border border-gray-800 card-hover" |
97 | | - > |
98 | | - <img src="/tech-rust.svg" alt="Rust" class="h-12" /> |
99 | | - </div> |
100 | | - <h4 class="font-semibold text-gray-100">Rust</h4> |
101 | | - <p class="text-sm text-gray-400 text-center"> |
102 | | - Safe, high-performance execution |
103 | | - </p> |
104 | | - </div> |
105 | | - <div class="flex flex-col items-center"> |
106 | | - <div |
107 | | - class="bg-gray-900/80 p-4 rounded-lg shadow-lg mb-3 w-20 h-20 flex items-center justify-center border border-gray-800 card-hover" |
108 | | - > |
109 | | - <img src="/tech-iceoryx.svg" alt="iceoryx2" class="h-12" /> |
110 | | - </div> |
111 | | - <h4 class="font-semibold text-gray-100">iceoryx2</h4> |
112 | | - <p class="text-sm text-gray-400 text-center"> |
113 | | - Zero-copy plugin communication |
114 | | - </p> |
115 | | - </div> |
116 | | - <div class="flex flex-col items-center"> |
117 | | - <div |
118 | | - class="bg-gray-900/80 p-4 rounded-lg shadow-lg mb-3 w-20 h-20 flex items-center justify-center border border-gray-800 card-hover" |
119 | | - > |
120 | | - <img src="/tech-postgres.svg" alt="PostgreSQL" class="h-12" /> |
121 | | - </div> |
122 | | - <h4 class="font-semibold text-gray-100">PostgreSQL</h4> |
123 | | - <p class="text-sm text-gray-400 text-center"> |
124 | | - Reliable state management |
125 | | - </p> |
126 | | - </div> |
127 | | - <div class="flex flex-col items-center"> |
128 | | - <div |
129 | | - class="bg-gray-900/80 p-4 rounded-lg shadow-lg mb-3 w-20 h-20 flex items-center justify-center border border-gray-800 card-hover" |
130 | | - > |
131 | | - <img src="/tech-axum.svg" alt="Axum" class="h-12" /> |
132 | | - </div> |
133 | | - <h4 class="font-semibold text-gray-100">Axum</h4> |
134 | | - <p class="text-sm text-gray-400 text-center">Modern web framework</p> |
135 | | - </div> |
136 | | - </div> |
137 | | - </div> |
138 | 93 | </div> |
139 | 94 | </section> |
0 commit comments