Products assets

package.json

@@ -28,8 +28,8 @@
     "clean": "rm -rf dist node_modules server tmp"
   },
   "devDependencies": {
-    "@builder.io/qwik": "^1.2.15",
-    "@builder.io/qwik-city": "^1.2.15",
+    "@builder.io/qwik": "^1.2.16",
+    "@builder.io/qwik-city": "^1.2.16",
     "@dnlup/fastify-traps": "^3.0.0",
     "@fastify/compress": "^6.5.0",
     "@fastify/static": "^6.12.0",
@@ -39,7 +39,7 @@
     "@typescript-eslint/parser": "6.9.1",
     "@vanilla-extract/css": "^1.13.0",
     "eslint": "8.52.0",
-    "eslint-plugin-qwik": "^1.2.15",
+    "eslint-plugin-qwik": "^1.2.16",
     "fastify": "^4.24.3",
     "fastify-plugin": "^4.5.1",
     "prettier": "3.0.3",

src/components/infobox/infobox.css.ts

@@ -3,30 +3,25 @@ import { mediaQuery } from "~/breakpoint.css";
 
 export const box = style({
   display: "grid",
+  gap: "50px",
   alignItems: "center",
+  justifyItems: "center",
   "@media": {
     [mediaQuery.xl]: {
       gridTemplateColumns: "repeat(2, 1fr)",
     },
   },
 });
 
-export const imageLeft = style({
-  display: "none",
-  "@media": {
-    [mediaQuery.xl]: {
-      display: "block",
-      justifySelf: "start",
-    },
-  },
-});
+export const imageLeft = style({});
 
 export const imageRight = style({
-  display: "none",
+  gridRowStart: "2",
+  gridRowEnd: "3",
   "@media": {
     [mediaQuery.xl]: {
-      display: "block",
-      justifySelf: "end",
+      gridRowStart: "1",
+      gridRowEnd: "2",
     },
   },
 });

src/components/products/index.css.ts

@@ -1,6 +1,10 @@
 import { style } from "@vanilla-extract/css";
+import { mediaQuery } from "~/breakpoint.css";
+import { vars } from "~/theme.css";
 
 export const products = style({
+  paddingTop: "40px",
+  paddingBottom: "40px",
   display: "grid",
   justifyContent: "center",
   alignItems: "center",
@@ -25,6 +29,60 @@ export const descriptionTitle = style({
 });
 
 export const descriptionText = style({
-  fontSize: "18px",
+  fontSize: "14px",
   fontWeight: "normal",
+  "@media": {
+    [mediaQuery.md]: {
+      fontSize: "18px",
+    },
+  },
+});
+
+export const imageBox = style({
+  display: "grid",
+  gridAutoFlow: "column",
+  justifyItems: "center",
+  gridTemplateRows: "auto auto",
+  gap: "40px",
+});
+
+export const launchButton = style({
+  padding: "15px",
+  backgroundColor: vars.color.backgroundWhite,
+  color: vars.color.textBlue,
+  borderRadius: "15px",
+  fontWeight: "bold",
+});
+
+export const exchangeSvgSize = style({
+  width: "300px",
+  height: "200px",
+  "@media": {
+    [mediaQuery.md]: {
+      width: "500px",
+      height: "350px",
+    },
+  },
+});
+
+export const transferSvgSize = style({
+  width: "300px",
+  height: "200px",
+  "@media": {
+    [mediaQuery.md]: {
+      width: "400px",
+      height: "350px",
+    },
+  },
+});
+
+export const businessSvgSize = style({
+  width: "300px",
+  height: "200px",
+  "@media": {
+    [mediaQuery.md]: {
+      width: "400px",
+      height: "300px",
+    },
+  },
 });

src/components/products/index.tsx

@@ -1,13 +1,21 @@
 import { component$ } from "@builder.io/qwik";
 import {
+  businessSvgSize,
   description,
   descriptionBox,
   descriptionText,
   descriptionTitle,
+  exchangeSvgSize,
+  imageBox,
+  launchButton,
   products,
+  transferSvgSize,
 } from "./index.css";
 import InfoboxLeft from "../infobox/infoboxLeft";
 import InfoboxRight from "../infobox/infoboxRight";
+import ExchangeSvg from "~/media/home/exchange.svg";
+import TransferSvg from "~/media/home/transfer.svg";
+import BusinessSvg from "~/media/home/business.svg";
 
 export default component$(() => {
   return (
@@ -52,7 +60,23 @@ export default component$(() => {
           </div>
         </div>
         <div q:slot="image">
-          {/* <img src={ServerSvg} width={280} height={200} /> */}
+          <div class={imageBox}>
+            <img
+              src={ExchangeSvg}
+              class={exchangeSvgSize}
+              width={300}
+              height={200}
+              alt="exchange product image"
+            />
+            <a
+              href={"https://ksox.finance"}
+              target="_blank"
+              rel="noreferrer"
+              class={launchButton}
+            >
+              Exchange Crypto
+            </a>
+          </div>
         </div>
       </InfoboxLeft>
       <InfoboxRight>
@@ -79,7 +103,23 @@ export default component$(() => {
           </div>
         </div>
         <div q:slot="image">
-          {/* <img src={ServerSvg} width={280} height={200} /> */}
+          <div class={imageBox}>
+            <img
+              src={TransferSvg}
+              class={transferSvgSize}
+              width={400}
+              height={350}
+              alt="transfer product image"
+            />
+            <a
+              href={"https://ksox.finance"}
+              target="_blank"
+              rel="noreferrer"
+              class={launchButton}
+            >
+              Transfer Crypto
+            </a>
+          </div>
         </div>
       </InfoboxRight>
       <InfoboxLeft>
@@ -106,7 +146,23 @@ export default component$(() => {
           </div>
         </div>
         <div q:slot="image">
-          {/* <img src={ServerSvg} width={280} height={200} /> */}
+          <div class={imageBox}>
+            <img
+              src={BusinessSvg}
+              class={businessSvgSize}
+              width={400}
+              height={300}
+              alt="business product image"
+            />
+            <a
+              href={"https://ksox.finance"}
+              target="_blank"
+              rel="noreferrer"
+              class={launchButton}
+            >
+              Crypto Business
+            </a>
+          </div>
         </div>
       </InfoboxLeft>
     </div>

src/components/technology/index.css.ts

@@ -37,6 +37,22 @@ export const descriptionBox = style({
 });
 
 export const descriptionText = style({
-  fontSize: "20px",
+  fontSize: "14px",
   fontWeight: "normal",
+  "@media": {
+    [mediaQuery.md]: {
+      fontSize: "18px",
+    },
+  },
+});
+
+export const svgSize = style({
+  width: "250px",
+  height: "150px",
+  "@media": {
+    [mediaQuery.md]: {
+      width: "300px",
+      height: "200px",
+    },
+  },
 });

src/components/technology/index.tsx

@@ -4,6 +4,7 @@ import {
   descriptionBox,
   descriptionText,
   infobox,
+  svgSize,
   technology,
   titleText,
 } from "./index.css";
@@ -34,7 +35,13 @@ export default component$(() => {
             </div>
           </div>
           <div q:slot="image">
-            <img src={ServerSvg} width={280} height={200} alt="safety image" />
+            <img
+              src={ServerSvg}
+              class={svgSize}
+              width={250}
+              height={150}
+              alt="safety image"
+            />
           </div>
         </InfoboxLeft>
         <InfoboxRight>
@@ -53,7 +60,13 @@ export default component$(() => {
             </div>
           </div>
           <div q:slot="image">
-            <img src={LaptopSvg} width={280} height={200} alt="offer image" />
+            <img
+              src={LaptopSvg}
+              class={svgSize}
+              width={250}
+              height={150}
+              alt="offer image"
+            />
           </div>
         </InfoboxRight>
         <InfoboxLeft>
@@ -73,8 +86,9 @@ export default component$(() => {
           <div q:slot="image">
             <img
               src={ReceiptSvg}
-              width={280}
-              height={200}
+              class={svgSize}
+              width={250}
+              height={150}
               alt="features image"
             />
           </div>

src/theme.css.ts

@@ -4,8 +4,9 @@ export const [mainTheme, vars] = createTheme({
   color: {
     backgroundHighlight: "#092148",
     backgroundBlue: "#040c18",
+    backgroundWhite: "#f8f8f8",
     text: "#f8f8f8",
-    textDark: "#040c18",
+    textBlue: "#040c18",
     textHighlight: "#ffffff",
     border: "#4183E8",
     shadow: "#000000",