From ed6d32063b5e4e86bcd39b2e84739cc2b057456e Mon Sep 17 00:00:00 2001 From: Bartosz Nowak Date: Thu, 2 Nov 2023 11:25:26 +0100 Subject: [PATCH 1/2] products assets --- src/components/infobox/infobox.css.ts | 4 ++-- src/components/products/index.tsx | 9 ++++++--- src/media/home/business.svg | 1 + src/media/home/exchange.svg | 1 + src/media/home/payment.svg | 1 + 5 files changed, 11 insertions(+), 5 deletions(-) create mode 100644 src/media/home/business.svg create mode 100644 src/media/home/exchange.svg create mode 100644 src/media/home/payment.svg diff --git a/src/components/infobox/infobox.css.ts b/src/components/infobox/infobox.css.ts index 0cacbc1..3260945 100644 --- a/src/components/infobox/infobox.css.ts +++ b/src/components/infobox/infobox.css.ts @@ -3,7 +3,9 @@ import { mediaQuery } from "~/breakpoint.css"; export const box = style({ display: "grid", + gap: "50px", alignItems: "center", + justifyItems: "center", "@media": { [mediaQuery.xl]: { gridTemplateColumns: "repeat(2, 1fr)", @@ -16,7 +18,6 @@ export const imageLeft = style({ "@media": { [mediaQuery.xl]: { display: "block", - justifySelf: "start", }, }, }); @@ -26,7 +27,6 @@ export const imageRight = style({ "@media": { [mediaQuery.xl]: { display: "block", - justifySelf: "end", }, }, }); diff --git a/src/components/products/index.tsx b/src/components/products/index.tsx index 8d0580d..a53bd4f 100644 --- a/src/components/products/index.tsx +++ b/src/components/products/index.tsx @@ -8,6 +8,9 @@ import { } from "./index.css"; import InfoboxLeft from "../infobox/infoboxLeft"; import InfoboxRight from "../infobox/infoboxRight"; +import ExchangeSvg from "~/media/home/exchange.svg"; +import PaymentSvg from "~/media/home/payment.svg"; +import BusinessSvg from "~/media/home/business.svg"; export default component$(() => { return ( @@ -52,7 +55,7 @@ export default component$(() => {
- {/* */} +
@@ -79,7 +82,7 @@ export default component$(() => {
- {/* */} +
@@ -106,7 +109,7 @@ export default component$(() => {
- {/* */} +
diff --git a/src/media/home/business.svg b/src/media/home/business.svg new file mode 100644 index 0000000..4b74071 --- /dev/null +++ b/src/media/home/business.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/media/home/exchange.svg b/src/media/home/exchange.svg new file mode 100644 index 0000000..e2a07ab --- /dev/null +++ b/src/media/home/exchange.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/media/home/payment.svg b/src/media/home/payment.svg new file mode 100644 index 0000000..c8ea1ee --- /dev/null +++ b/src/media/home/payment.svg @@ -0,0 +1 @@ + \ No newline at end of file From a8f6003a8e3e0bd40552394e7a82ade2238c3ad7 Mon Sep 17 00:00:00 2001 From: Bartosz Nowak Date: Thu, 2 Nov 2023 13:12:30 +0100 Subject: [PATCH 2/2] new products section mobile responsivness --- package-lock.json | 29 +++++----- package.json | 6 +- src/components/infobox/infobox.css.ts | 15 ++--- src/components/products/index.css.ts | 60 ++++++++++++++++++- src/components/products/index.tsx | 61 ++++++++++++++++++-- src/components/technology/index.css.ts | 18 +++++- src/components/technology/index.tsx | 22 +++++-- src/media/home/{payment.svg => transfer.svg} | 0 src/theme.css.ts | 3 +- 9 files changed, 177 insertions(+), 37 deletions(-) rename src/media/home/{payment.svg => transfer.svg} (100%) diff --git a/package-lock.json b/package-lock.json index 77ac222..cd02c88 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,8 +9,8 @@ "@vanilla-extract/dynamic": "^2.0.3" }, "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", @@ -20,7 +20,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", @@ -565,12 +565,13 @@ } }, "node_modules/@builder.io/qwik": { - "version": "1.2.15", - "resolved": "https://registry.npmjs.org/@builder.io/qwik/-/qwik-1.2.15.tgz", - "integrity": "sha512-5aiU1VL4quzEd8pGdeFfJOiN/SUYr6wu1FLEX3piqBxoJL+j8H/3jZeOl4TUZawNNYWZOckH74a3VzAXai/4ZA==", + "version": "1.2.16", + "resolved": "https://registry.npmjs.org/@builder.io/qwik/-/qwik-1.2.16.tgz", + "integrity": "sha512-ZadMArtIZpdeHeH2Qw5HEbGurCnKJ22i8fvZDlKybPercD8Obf6xk5ox1XcTsliodQWH3O0UJChvXArCrJR0LQ==", "dev": true, "dependencies": { - "csstype": "^3.1.2" + "csstype": "^3.1.2", + "vite": "^4.4.11" }, "bin": { "qwik": "qwik.cjs" @@ -583,16 +584,18 @@ } }, "node_modules/@builder.io/qwik-city": { - "version": "1.2.15", - "resolved": "https://registry.npmjs.org/@builder.io/qwik-city/-/qwik-city-1.2.15.tgz", - "integrity": "sha512-sJSxYAwiSXZN9MMsCKN2TJBkVKaEdX1rTwi0SdmyqaEKxVAdtzc2sEyAcetZijhFMEh5Zd7sxz0mtu9fQGufLQ==", + "version": "1.2.16", + "resolved": "https://registry.npmjs.org/@builder.io/qwik-city/-/qwik-city-1.2.16.tgz", + "integrity": "sha512-oyVRrKsWqoXY09WPIqkVGjT6pqRSjn0PmxiS29CCym8MLxQGcOEIog5WCaYlMjMiu8EDlRbRX9KsGDk31A5u7w==", "dev": true, "dependencies": { "@mdx-js/mdx": "2.3.0", "@types/mdx": "^2.0.8", "source-map": "0.7.4", "svgo": "^3.0.2", + "undici": "^5.26.0", "vfile": "^6.0.1", + "vite": "^4.4.11", "vite-imagetools": "^5.0.9", "zod": "^3.22.4" }, @@ -2942,9 +2945,9 @@ } }, "node_modules/eslint-plugin-qwik": { - "version": "1.2.15", - "resolved": "https://registry.npmjs.org/eslint-plugin-qwik/-/eslint-plugin-qwik-1.2.15.tgz", - "integrity": "sha512-1bmKSI51MnKAgHnXHepBqJt9OHJUGa3psrj9YhbnOnZ/eERWIZWewcomszleHwInAvDeRGdv5nHUpeWE2Rd5/w==", + "version": "1.2.16", + "resolved": "https://registry.npmjs.org/eslint-plugin-qwik/-/eslint-plugin-qwik-1.2.16.tgz", + "integrity": "sha512-GrgRYjH/ozzrOuK/j10EfmgV6Hv552fHq/0+1ULyImU5DwoiN0jTDaWOKVIl2E8LEkSBsdg8AT+pPs8kOZy1TQ==", "dev": true, "dependencies": { "jsx-ast-utils": "^3.3.5" diff --git a/package.json b/package.json index 5010176..9f97f35 100644 --- a/package.json +++ b/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", diff --git a/src/components/infobox/infobox.css.ts b/src/components/infobox/infobox.css.ts index 3260945..eaadf33 100644 --- a/src/components/infobox/infobox.css.ts +++ b/src/components/infobox/infobox.css.ts @@ -13,20 +13,15 @@ export const box = style({ }, }); -export const imageLeft = style({ - display: "none", - "@media": { - [mediaQuery.xl]: { - display: "block", - }, - }, -}); +export const imageLeft = style({}); export const imageRight = style({ - display: "none", + gridRowStart: "2", + gridRowEnd: "3", "@media": { [mediaQuery.xl]: { - display: "block", + gridRowStart: "1", + gridRowEnd: "2", }, }, }); diff --git a/src/components/products/index.css.ts b/src/components/products/index.css.ts index d2faac3..497defd 100644 --- a/src/components/products/index.css.ts +++ b/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", + }, + }, }); diff --git a/src/components/products/index.tsx b/src/components/products/index.tsx index a53bd4f..9e4e082 100644 --- a/src/components/products/index.tsx +++ b/src/components/products/index.tsx @@ -1,15 +1,20 @@ 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 PaymentSvg from "~/media/home/payment.svg"; +import TransferSvg from "~/media/home/transfer.svg"; import BusinessSvg from "~/media/home/business.svg"; export default component$(() => { @@ -55,7 +60,23 @@ export default component$(() => {
- +
+ exchange product image + + Exchange Crypto + +
@@ -82,7 +103,23 @@ export default component$(() => {
- +
+ transfer product image + + Transfer Crypto + +
@@ -109,7 +146,23 @@ export default component$(() => {
- +
+ business product image + + Crypto Business + +
diff --git a/src/components/technology/index.css.ts b/src/components/technology/index.css.ts index 3408fd5..3365809 100644 --- a/src/components/technology/index.css.ts +++ b/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", + }, + }, }); diff --git a/src/components/technology/index.tsx b/src/components/technology/index.tsx index 78a938f..f0d8b1f 100644 --- a/src/components/technology/index.tsx +++ b/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$(() => {
- safety image + safety image
@@ -53,7 +60,13 @@ export default component$(() => {
- offer image + offer image
@@ -73,8 +86,9 @@ export default component$(() => {
features image
diff --git a/src/media/home/payment.svg b/src/media/home/transfer.svg similarity index 100% rename from src/media/home/payment.svg rename to src/media/home/transfer.svg diff --git a/src/theme.css.ts b/src/theme.css.ts index 665f9a6..0ee951a 100644 --- a/src/theme.css.ts +++ b/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",