feat: rest of config

src/app/tools/tankopedia/[id]/components/Model/CharacteristicsSection.tsx

@@ -1,20 +1,30 @@
 import { Flex, Heading } from '@radix-ui/themes';
 import { Characteristics } from '../Characteristics';
 import { Consumables } from '../Characteristics/components/Consumables';
+import { Equipment } from '../Characteristics/components/Equipment';
+import { Miscellaneous } from '../Characteristics/components/Miscellaneous';
 import { Modules } from '../Characteristics/components/Modules';
+import { Provisions } from '../Characteristics/components/Provisions';
+import { Skills } from '../Characteristics/components/Skills';
 
 export function CharacteristicsSection() {
   return (
-    <Flex justify="center">
+    <Flex justify="center" mt="4">
-      <Flex style={{ maxWidth: 640 }}>
+      <Flex gap="4">
-        <Flex style={{ flex: 1 }} direction="column" gap="4">
+        <Flex style={{ flex: 1, maxWidth: 320 }} direction="column" gap="4">
           <Heading>Configure</Heading>
-
           <Modules />
+          <Equipment />
+          <Provisions />
           <Consumables />
+          <Skills />
+          <Miscellaneous />
         </Flex>
 
-        <Characteristics />
+        <Flex direction="column" gap="4">
+          <Heading>Characteristics</Heading>
+          <Characteristics />
+        </Flex>
       </Flex>
     </Flex>
   );

src/app/tools/tankopedia/[id]/components/Model/HeroSection.tsx

@@ -24,7 +24,7 @@ export function HeroSection() {
       p={wideFormat ? '0' : '6'}
       pb={wideFormat ? '0' : '6'}
       style={{
-        background: `linear-gradient(90deg, ${theme.colors.appBackground1}, ${theme.colors.appBackground2})`,
+        background: `linear-gradient(-90deg, ${theme.colors.appBackground1}, ${theme.colors.appBackground2})`,
         position: 'relative',
       }}
     >
@@ -90,25 +90,6 @@ export function HeroSection() {
         </div>
       </Flex>
 
-      {/* <IconButton
-        variant="ghost"
-        color="gray"
-        style={{
-          position: 'absolute',
-          top: 16,
-          right: 16,
-        }}
-        onClick={() => {
-          if (isFullScreen) {
-            document.exitFullscreen();
-          } else {
-            document.body.requestFullscreen();
-          }
-        }}
-      >
-        {isFullScreen ? <ExitFullScreenIcon /> : <EnterFullScreenIcon />}
-      </IconButton> */}
-
       <Options />
     </Flex>
   );