config tailwind and app

This commit is contained in:
Rivaland Tawouafo 2024-01-21 11:33:51 +01:00
parent 62377f8aba
commit 6d43eaf714
8 changed files with 1000 additions and 46 deletions

3
app.config.ts Normal file
View file

@ -0,0 +1,3 @@
export default defineAppConfig({
})

13
assets/css/main.scss Normal file
View file

@ -0,0 +1,13 @@
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base{
html{
font-family: 'Space Grotesk', sans-serif;
}
}

20
assets/css/variables.scss Normal file
View file

@ -0,0 +1,20 @@
$conop-blue: #0aa5d3;
$conop-dark-blue: #00304a;
%btn-transition {
transition: all 0.3s ease-in-out;
&:hover {
letter-spacing: 2px;
}
}
%title-bg-gradient {
text-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
background: linear-gradient(
97deg,
#fff 23.28%,
rgba(224, 224, 224, 0.71) 86.53%
);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

View file

@ -1,4 +1,22 @@
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
devtools: { enabled: true }
})
devtools: { enabled: true },
css: ['~/assets/css/main.scss'],
modules: ['nuxt-icon'],
postcss: {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
},
vite: {
css: {
preprocessorOptions: {
scss: {
additionalData:
'@import "~/assets/css/variables.scss";',
},
},
},
},
})

555
package-lock.json generated
View file

@ -7,11 +7,28 @@
"name": "nuxt-app",
"hasInstallScript": true,
"devDependencies": {
"nuxt": "^3.9.3",
"autoprefixer": "^10.4.17",
"nuxt": "^3.8.2",
"nuxt-icon": "^0.6.8",
"postcss": "^8.4.33",
"sass": "^1.70.0",
"tailwindcss": "^3.4.1",
"vue": "^3.4.14",
"vue-router": "^4.2.5"
}
},
"node_modules/@alloc/quick-lru": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
"integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
"dev": true,
"engines": {
"node": ">=10"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/@ampproject/remapping": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",
@ -563,9 +580,9 @@
}
},
"node_modules/@cloudflare/kv-asset-handler": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/@cloudflare/kv-asset-handler/-/kv-asset-handler-0.3.0.tgz",
"integrity": "sha512-9CB/MKf/wdvbfkUdfrj+OkEwZ5b7rws0eogJ4293h+7b6KX5toPwym+VQKmILafNB9YiehqY0DlNrDcDhdWHSQ==",
"version": "0.3.1",
"resolved": "https://registry.npmjs.org/@cloudflare/kv-asset-handler/-/kv-asset-handler-0.3.1.tgz",
"integrity": "sha512-lKN2XCfKCmpKb86a1tl4GIwsJYDy9TGuwjhDELLmpKygQhw8X2xR4dusgpC5Tg7q1pB96Eb0rBo81kxSILQMwA==",
"dev": true,
"dependencies": {
"mime": "^3.0.0"
@ -948,6 +965,36 @@
"node": ">=14"
}
},
"node_modules/@iconify/collections": {
"version": "1.0.383",
"resolved": "https://registry.npmjs.org/@iconify/collections/-/collections-1.0.383.tgz",
"integrity": "sha512-ktPmaLdRBMveRXisZW/hxjb/X7sHTVDJn+vR4bXVNSy+iXGkODbODudctB6Wczx0iHstxuwn5TZpjRsCGvo8pw==",
"dev": true,
"dependencies": {
"@iconify/types": "*"
}
},
"node_modules/@iconify/types": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
"integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
"dev": true
},
"node_modules/@iconify/vue": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/@iconify/vue/-/vue-4.1.1.tgz",
"integrity": "sha512-RL85Bm/DAe8y6rT6pux7D2FJSiUEM/TPfyK7GrbAOfTSwrhvwJW+S5yijdGcmtXouA8MtuH9C7l4hiSE4mLMjg==",
"dev": true,
"dependencies": {
"@iconify/types": "^2.0.0"
},
"funding": {
"url": "https://github.com/sponsors/cyberalien"
},
"peerDependencies": {
"vue": ">=3"
}
},
"node_modules/@ioredis/commands": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@ioredis/commands/-/commands-1.2.0.tgz",
@ -1099,9 +1146,9 @@
"dev": true
},
"node_modules/@jridgewell/trace-mapping": {
"version": "0.3.21",
"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.21.tgz",
"integrity": "sha512-SRfKmRe1KvYnxjEMtxEr+J4HIeMX5YBg/qhRHpxEIGjhX1rshcHlnFUE9K0GazhVKWM7B+nARSkV8LuvJdJ5/g==",
"version": "0.3.22",
"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.22.tgz",
"integrity": "sha512-Wf963MzWtA2sjrNt+g18IAln9lKnlRp+K2eH4jjIoF1wYeq3aMREpG09xhlhdzS0EjwU7qmUJYangWa+151vZw==",
"dev": true,
"dependencies": {
"@jridgewell/resolve-uri": "^3.1.0",
@ -1144,9 +1191,9 @@
}
},
"node_modules/@netlify/functions": {
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/@netlify/functions/-/functions-2.5.0.tgz",
"integrity": "sha512-myXzRomzLISrckzrbi1JcvelFmDOEkYow5NoWGvn3t8vvjgCKcjvSblbhhXHiHE3sk2EQeEx2IQHXiicQxnsSA==",
"version": "2.5.1",
"resolved": "https://registry.npmjs.org/@netlify/functions/-/functions-2.5.1.tgz",
"integrity": "sha512-7//hmiFHXGusAzuzEuXvRT9ItaeRjRs5lRs6lYUkaAXO1jnTWYDB2XdqFq5X4yMRX+/A96nrQ2HwCE+Pd0YMwg==",
"dev": true,
"dependencies": {
"@netlify/serverless-functions-api": "1.13.0",
@ -1651,6 +1698,61 @@
"vue": "^3.3.4"
}
},
"node_modules/@nuxt/vite-builder/node_modules/vite": {
"version": "5.0.11",
"resolved": "https://registry.npmjs.org/vite/-/vite-5.0.11.tgz",
"integrity": "sha512-XBMnDjZcNAw/G1gEiskiM1v6yzM4GE5aMGvhWTlHAYYhxb7S3/V1s3m2LDHa8Vh6yIWYYB0iJwsEaS523c4oYA==",
"dev": true,
"dependencies": {
"esbuild": "^0.19.3",
"postcss": "^8.4.32",
"rollup": "^4.2.0"
},
"bin": {
"vite": "bin/vite.js"
},
"engines": {
"node": "^18.0.0 || >=20.0.0"
},
"funding": {
"url": "https://github.com/vitejs/vite?sponsor=1"
},
"optionalDependencies": {
"fsevents": "~2.3.3"
},
"peerDependencies": {
"@types/node": "^18.0.0 || >=20.0.0",
"less": "*",
"lightningcss": "^1.21.0",
"sass": "*",
"stylus": "*",
"sugarss": "*",
"terser": "^5.4.0"
},
"peerDependenciesMeta": {
"@types/node": {
"optional": true
},
"less": {
"optional": true
},
"lightningcss": {
"optional": true
},
"sass": {
"optional": true
},
"stylus": {
"optional": true
},
"sugarss": {
"optional": true
},
"terser": {
"optional": true
}
}
},
"node_modules/@parcel/watcher": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.4.0.tgz",
@ -2723,14 +2825,14 @@
}
},
"node_modules/@vue-macros/common": {
"version": "1.10.0",
"resolved": "https://registry.npmjs.org/@vue-macros/common/-/common-1.10.0.tgz",
"integrity": "sha512-4DZsPeQA/nBQDw2RkYAmH7KrFjJVrMdAhJhO1JCl1bbbFXCGeoGjXfkg9wHPppj47s2HpAB3GrqNwqVGbi12NQ==",
"version": "1.10.1",
"resolved": "https://registry.npmjs.org/@vue-macros/common/-/common-1.10.1.tgz",
"integrity": "sha512-uftSpfwdwitcQT2lM8aVxcfe5rKQBzC9jMrtJM5sG4hEuFyfIvnJihpPpnaWxY+X4p64k+YYXtBFv+1O5Bq3dg==",
"dev": true,
"dependencies": {
"@babel/types": "^7.23.5",
"@babel/types": "^7.23.6",
"@rollup/pluginutils": "^5.1.0",
"@vue/compiler-sfc": "^3.3.10",
"@vue/compiler-sfc": "^3.4.13",
"ast-kit": "^0.11.3",
"local-pkg": "^0.5.0",
"magic-string-ast": "^0.3.0"
@ -2995,6 +3097,12 @@
"node": ">=4"
}
},
"node_modules/any-promise": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
"integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
"dev": true
},
"node_modules/anymatch": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
@ -3062,6 +3170,12 @@
"node": ">=10"
}
},
"node_modules/arg": {
"version": "5.0.2",
"resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
"integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
"dev": true
},
"node_modules/argparse": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@ -3437,6 +3551,15 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/camelcase-css": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
"integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
"dev": true,
"engines": {
"node": ">= 6"
}
},
"node_modules/caniuse-api": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@ -4134,6 +4257,12 @@
"integrity": "sha512-KqFl6pOgOW+Y6wJgu80rHpo2/3H07vr8ntR9rkkFIRETewbf5GaYYcakYfiKz89K+sLsuPkQIZaXDMjUObZwWg==",
"dev": true
},
"node_modules/didyoumean": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
"integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
"dev": true
},
"node_modules/diff": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/diff/-/diff-5.1.0.tgz",
@ -4143,6 +4272,12 @@
"node": ">=0.3.1"
}
},
"node_modules/dlv": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
"integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
"dev": true
},
"node_modules/dom-serializer": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
@ -4214,9 +4349,9 @@
}
},
"node_modules/dotenv": {
"version": "16.3.1",
"resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.3.1.tgz",
"integrity": "sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ==",
"version": "16.3.2",
"resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.3.2.tgz",
"integrity": "sha512-HTlk5nmhkm8F6JcdXvHIzaorzCoziNQT9mGxLPVXW8wJF1TiGSL60ZGB4gHWabHOaMmWmhvk2/lPHfnBiT78AQ==",
"dev": true,
"engines": {
"node": ">=12"
@ -4244,9 +4379,9 @@
"dev": true
},
"node_modules/electron-to-chromium": {
"version": "1.4.638",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.638.tgz",
"integrity": "sha512-gpmbAG2LbfPKcDaL5m9IKutKjUx4ZRkvGNkgL/8nKqxkXsBVYykVULboWlqCrHsh3razucgDJDuKoWJmGPdItA==",
"version": "1.4.640",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.640.tgz",
"integrity": "sha512-z/6oZ/Muqk4BaE7P69bXhUhpJbUM9ZJeka43ZwxsDshKtePns4mhBlh8bU5+yrnOnz3fhG82XLzGUXazOmsWnA==",
"dev": true
},
"node_modules/emoji-regex": {
@ -5043,6 +5178,12 @@
"integrity": "sha512-ZBGjl0ZMEMeOC3Ns0wUF/5UdUmr3qQhBSCniT0LxOgGGIRHiNFOkMtIHB7EOznRU47V2AxPgiVP+s+0/UCU0Hg==",
"dev": true
},
"node_modules/immutable": {
"version": "4.3.4",
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz",
"integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==",
"dev": true
},
"node_modules/imurmurhash": {
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
@ -5559,6 +5700,12 @@
"node": ">=14"
}
},
"node_modules/lines-and-columns": {
"version": "1.2.4",
"resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
"integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
"dev": true
},
"node_modules/listhen": {
"version": "1.5.6",
"resolved": "https://registry.npmjs.org/listhen/-/listhen-1.5.6.tgz",
@ -6041,6 +6188,17 @@
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
"dev": true
},
"node_modules/mz": {
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
"integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
"dev": true,
"dependencies": {
"any-promise": "^1.0.0",
"object-assign": "^4.0.1",
"thenify-all": "^1.0.0"
}
},
"node_modules/nanoid": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-4.0.2.tgz",
@ -6168,10 +6326,13 @@
}
},
"node_modules/node-addon-api": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.0.0.tgz",
"integrity": "sha512-vgbBJTS4m5/KkE16t5Ly0WW9hz46swAstv0hYYwMtbG7AznRhNyfLRe8HZAiWIpcHzoO7HxhLuBQj9rJ/Ho0ZA==",
"dev": true
"version": "7.1.0",
"resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.0.tgz",
"integrity": "sha512-mNcltoe1R8o7STTegSOHdnJNN7s5EUvhoS7ShnTHDyOSd+8H+UdWODq6qSv67PjC8Zc5JRT8+oLAMCr0SIXw7g==",
"dev": true,
"engines": {
"node": "^16 || ^18 || >= 20"
}
},
"node_modules/node-fetch": {
"version": "2.7.0",
@ -6626,6 +6787,18 @@
}
}
},
"node_modules/nuxt-icon": {
"version": "0.6.8",
"resolved": "https://registry.npmjs.org/nuxt-icon/-/nuxt-icon-0.6.8.tgz",
"integrity": "sha512-6eWlNOb6Uvp63uXFdhcmsB1JlubDv76Pot/VwmIu0yJxDYhwytbnv3WAjw2khl2l7W/65V4eMGIEeX9C5Ahxng==",
"dev": true,
"dependencies": {
"@iconify/collections": "^1.0.374",
"@iconify/vue": "^4.1.1",
"@nuxt/devtools-kit": "^1.0.6",
"@nuxt/kit": "^3.9.0"
}
},
"node_modules/nypm": {
"version": "0.3.4",
"resolved": "https://registry.npmjs.org/nypm/-/nypm-0.3.4.tgz",
@ -6709,6 +6882,15 @@
"node": ">=0.10.0"
}
},
"node_modules/object-hash": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
"integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
"dev": true,
"engines": {
"node": ">= 6"
}
},
"node_modules/ofetch": {
"version": "1.3.3",
"resolved": "https://registry.npmjs.org/ofetch/-/ofetch-1.3.3.tgz",
@ -6807,9 +6989,9 @@
}
},
"node_modules/openapi-typescript": {
"version": "6.7.3",
"resolved": "https://registry.npmjs.org/openapi-typescript/-/openapi-typescript-6.7.3.tgz",
"integrity": "sha512-es3mGcDXV6TKPo6n3aohzHm0qxhLyR39MhF6mkD1FwFGjhxnqMqfSIgM0eCpInZvqatve4CxmXcMZw3jnnsaXw==",
"version": "6.7.4",
"resolved": "https://registry.npmjs.org/openapi-typescript/-/openapi-typescript-6.7.4.tgz",
"integrity": "sha512-EZyeW9Wy7UDCKv0iYmKrq2pVZtquXiD/YHiUClAKqiMi42nodx/EQH11K6fLqjt1IZlJmVokrAsExsBMM2RROQ==",
"dev": true,
"dependencies": {
"ansi-colors": "^4.1.3",
@ -7019,6 +7201,24 @@
"url": "https://github.com/sponsors/jonschlinkert"
}
},
"node_modules/pify": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
"integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
"dev": true,
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/pirates": {
"version": "4.0.6",
"resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
"integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
"dev": true,
"engines": {
"node": ">= 6"
}
},
"node_modules/pkg-types": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.0.3.tgz",
@ -7156,6 +7356,77 @@
"postcss": "^8.4.31"
}
},
"node_modules/postcss-import": {
"version": "15.1.0",
"resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
"integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
"dev": true,
"dependencies": {
"postcss-value-parser": "^4.0.0",
"read-cache": "^1.0.0",
"resolve": "^1.1.7"
},
"engines": {
"node": ">=14.0.0"
},
"peerDependencies": {
"postcss": "^8.0.0"
}
},
"node_modules/postcss-js": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
"integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
"dev": true,
"dependencies": {
"camelcase-css": "^2.0.1"
},
"engines": {
"node": "^12 || ^14 || >= 16"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/postcss/"
},
"peerDependencies": {
"postcss": "^8.4.21"
}
},
"node_modules/postcss-load-config": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
"integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
"dev": true,
"funding": [
{
"type": "opencollective",
"url": "https://opencollective.com/postcss/"
},
{
"type": "github",
"url": "https://github.com/sponsors/ai"
}
],
"dependencies": {
"lilconfig": "^3.0.0",
"yaml": "^2.3.4"
},
"engines": {
"node": ">= 14"
},
"peerDependencies": {
"postcss": ">=8.0.9",
"ts-node": ">=9.0.0"
},
"peerDependenciesMeta": {
"postcss": {
"optional": true
},
"ts-node": {
"optional": true
}
}
},
"node_modules/postcss-merge-longhand": {
"version": "6.0.2",
"resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-6.0.2.tgz",
@ -7254,6 +7525,25 @@
"postcss": "^8.4.31"
}
},
"node_modules/postcss-nested": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",
"integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==",
"dev": true,
"dependencies": {
"postcss-selector-parser": "^6.0.11"
},
"engines": {
"node": ">=12.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/postcss/"
},
"peerDependencies": {
"postcss": "^8.2.14"
}
},
"node_modules/postcss-normalize-charset": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-6.0.1.tgz",
@ -7628,6 +7918,15 @@
"flat": "^5.0.2"
}
},
"node_modules/read-cache": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
"integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
"dev": true,
"dependencies": {
"pify": "^2.3.0"
}
},
"node_modules/read-package-json": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/read-package-json/-/read-package-json-7.0.0.tgz",
@ -8072,6 +8371,23 @@
"dev": true,
"optional": true
},
"node_modules/sass": {
"version": "1.70.0",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.70.0.tgz",
"integrity": "sha512-uUxNQ3zAHeAx5nRFskBnrWzDUJrrvpCPD5FNAoRvTi0WwremlheES3tg+56PaVtCs5QDRX5CBLxxKMDJMEa1WQ==",
"dev": true,
"dependencies": {
"chokidar": ">=3.0.0 <4.0.0",
"immutable": "^4.0.0",
"source-map-js": ">=0.6.2 <2.0.0"
},
"bin": {
"sass": "sass.js"
},
"engines": {
"node": ">=14.0.0"
}
},
"node_modules/scule": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/scule/-/scule-1.2.0.tgz",
@ -8590,6 +8906,74 @@
"postcss": "^8.4.31"
}
},
"node_modules/sucrase": {
"version": "3.35.0",
"resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
"integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
"dev": true,
"dependencies": {
"@jridgewell/gen-mapping": "^0.3.2",
"commander": "^4.0.0",
"glob": "^10.3.10",
"lines-and-columns": "^1.1.6",
"mz": "^2.7.0",
"pirates": "^4.0.1",
"ts-interface-checker": "^0.1.9"
},
"bin": {
"sucrase": "bin/sucrase",
"sucrase-node": "bin/sucrase-node"
},
"engines": {
"node": ">=16 || 14 >=14.17"
}
},
"node_modules/sucrase/node_modules/commander": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
"integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
"dev": true,
"engines": {
"node": ">= 6"
}
},
"node_modules/sucrase/node_modules/glob": {
"version": "10.3.10",
"resolved": "https://registry.npmjs.org/glob/-/glob-10.3.10.tgz",
"integrity": "sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==",
"dev": true,
"dependencies": {
"foreground-child": "^3.1.0",
"jackspeak": "^2.3.5",
"minimatch": "^9.0.1",
"minipass": "^5.0.0 || ^6.0.2 || ^7.0.0",
"path-scurry": "^1.10.1"
},
"bin": {
"glob": "dist/esm/bin.mjs"
},
"engines": {
"node": ">=16 || 14 >=14.17"
},
"funding": {
"url": "https://github.com/sponsors/isaacs"
}
},
"node_modules/sucrase/node_modules/minimatch": {
"version": "9.0.3",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
"integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
"dev": true,
"dependencies": {
"brace-expansion": "^2.0.1"
},
"engines": {
"node": ">=16 || 14 >=14.17"
},
"funding": {
"url": "https://github.com/sponsors/isaacs"
}
},
"node_modules/supports-color": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@ -8657,6 +9041,64 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/tailwindcss": {
"version": "3.4.1",
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.1.tgz",
"integrity": "sha512-qAYmXRfk3ENzuPBakNK0SRrUDipP8NQnEY6772uDhflcQz5EhRdD7JNZxyrFHVQNCwULPBn6FNPp9brpO7ctcA==",
"dev": true,
"dependencies": {
"@alloc/quick-lru": "^5.2.0",
"arg": "^5.0.2",
"chokidar": "^3.5.3",
"didyoumean": "^1.2.2",
"dlv": "^1.1.3",
"fast-glob": "^3.3.0",
"glob-parent": "^6.0.2",
"is-glob": "^4.0.3",
"jiti": "^1.19.1",
"lilconfig": "^2.1.0",
"micromatch": "^4.0.5",
"normalize-path": "^3.0.0",
"object-hash": "^3.0.0",
"picocolors": "^1.0.0",
"postcss": "^8.4.23",
"postcss-import": "^15.1.0",
"postcss-js": "^4.0.1",
"postcss-load-config": "^4.0.1",
"postcss-nested": "^6.0.1",
"postcss-selector-parser": "^6.0.11",
"resolve": "^1.22.2",
"sucrase": "^3.32.0"
},
"bin": {
"tailwind": "lib/cli.js",
"tailwindcss": "lib/cli.js"
},
"engines": {
"node": ">=14.0.0"
}
},
"node_modules/tailwindcss/node_modules/glob-parent": {
"version": "6.0.2",
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
"integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
"dev": true,
"dependencies": {
"is-glob": "^4.0.3"
},
"engines": {
"node": ">=10.13.0"
}
},
"node_modules/tailwindcss/node_modules/lilconfig": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
"integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
"dev": true,
"engines": {
"node": ">=10"
}
},
"node_modules/tapable": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
@ -8684,9 +9126,9 @@
}
},
"node_modules/tar-stream": {
"version": "3.1.6",
"resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-3.1.6.tgz",
"integrity": "sha512-B/UyjYwPpMBv+PaFSWAmtYjwdrlEaZQEhMIBFNC5oEG8lpiW8XjcSdmEaClj28ArfKScKHs2nshz3k2le6crsg==",
"version": "3.1.7",
"resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-3.1.7.tgz",
"integrity": "sha512-qJj60CXt7IU1Ffyc3NJMjh6EkuCFej46zUqJ4J7pqYlThyd9bO0XBTmcOIhSzZJVWfsLks0+nle/j538YAW9RQ==",
"dev": true,
"dependencies": {
"b4a": "^1.6.4",
@ -8757,6 +9199,27 @@
"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
"dev": true
},
"node_modules/thenify": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
"integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
"dev": true,
"dependencies": {
"any-promise": "^1.0.0"
}
},
"node_modules/thenify-all": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
"integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
"dev": true,
"dependencies": {
"thenify": ">= 3.1.0 < 4"
},
"engines": {
"node": ">=0.8"
}
},
"node_modules/tiny-invariant": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz",
@ -8820,6 +9283,12 @@
"integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
"dev": true
},
"node_modules/ts-interface-checker": {
"version": "0.1.13",
"resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
"integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
"dev": true
},
"node_modules/tuf-js": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/tuf-js/-/tuf-js-2.2.0.tgz",
@ -9157,18 +9626,18 @@
}
},
"node_modules/untyped": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/untyped/-/untyped-1.4.0.tgz",
"integrity": "sha512-Egkr/s4zcMTEuulcIb7dgURS6QpN7DyqQYdf+jBtiaJvQ+eRsrtWUoX84SbvQWuLkXsOjM+8sJC9u6KoMK/U7Q==",
"version": "1.4.2",
"resolved": "https://registry.npmjs.org/untyped/-/untyped-1.4.2.tgz",
"integrity": "sha512-nC5q0DnPEPVURPhfPQLahhSTnemVtPzdx7ofiRxXpOB2SYnb3MfdU3DVGyJdS8Lx+tBWeAePO8BfU/3EgksM7Q==",
"dev": true,
"dependencies": {
"@babel/core": "^7.22.9",
"@babel/standalone": "^7.22.9",
"@babel/types": "^7.22.5",
"defu": "^6.1.2",
"jiti": "^1.19.1",
"@babel/core": "^7.23.7",
"@babel/standalone": "^7.23.8",
"@babel/types": "^7.23.6",
"defu": "^6.1.4",
"jiti": "^1.21.0",
"mri": "^1.2.0",
"scule": "^1.0.0"
"scule": "^1.2.0"
},
"bin": {
"untyped": "dist/cli.mjs"
@ -9245,9 +9714,9 @@
}
},
"node_modules/vite": {
"version": "5.0.11",
"resolved": "https://registry.npmjs.org/vite/-/vite-5.0.11.tgz",
"integrity": "sha512-XBMnDjZcNAw/G1gEiskiM1v6yzM4GE5aMGvhWTlHAYYhxb7S3/V1s3m2LDHa8Vh6yIWYYB0iJwsEaS523c4oYA==",
"version": "5.0.12",
"resolved": "https://registry.npmjs.org/vite/-/vite-5.0.12.tgz",
"integrity": "sha512-4hsnEkG3q0N4Tzf1+t6NdN9dg/L3BM+q8SWgbSPnJvrgH2kgdyzfVJwbR1ic69/4uMJJ/3dqDZZE5/WwqW8U1w==",
"dev": true,
"dependencies": {
"esbuild": "^0.19.3",

View file

@ -10,7 +10,12 @@
"postinstall": "nuxt prepare"
},
"devDependencies": {
"nuxt": "^3.9.3",
"autoprefixer": "^10.4.17",
"nuxt": "^3.8.2",
"nuxt-icon": "^0.6.8",
"postcss": "^8.4.33",
"sass": "^1.70.0",
"tailwindcss": "^3.4.1",
"vue": "^3.4.14",
"vue-router": "^4.2.5"
}

405
pages/index.vue Normal file
View file

@ -0,0 +1,405 @@
<script setup lang="ts">
import { ref } from "vue"
const expertises = ref([
{
id: 1,
title: "Explore our case studies showcasing successful projects.",
des: "Lorem ipsum dolor sit amet consectetur. Diam dui vel congue mattis enim imperdiet pulvinar scelerisque. ",
techs: ["Mobile Development", "design"],
image: "/img/card_img_1.png"
},
{
id: 2,
title: "Explore our case studies showcasing successful projects.",
des: "Lorem ipsum dolor sit amet consectetur. Diam dui vel congue mattis enim imperdiet pulvinar scelerisque. ",
techs: ["Cloud", "Infrastructure"],
image: "/img/card_img_2.png"
},
{
id: 3,
title: "Explore our case studies showcasing successful projects.",
des: "Lorem ipsum dolor sit amet consectetur. Diam dui vel congue mattis enim imperdiet pulvinar scelerisque. ",
techs: ["Robotic", "AI"],
image: "/img/card_img_3.png"
}
])
</script>
<template>
<div>
<HomeHero></HomeHero>
<div class="about py-6 px-6 lg:px-12 my-12">
<h1 class="text-2xl text-c-blue flex items-center gap-4 uppercase"> <span>*</span> <span>About US</span> </h1>
<hr class="bg-c-blue h-1 my-6 w-full">
<h2 class="text-5xl font-bold mb-6 text-c-darkblue leading-[3.5rem]">
Our team has 20 years of experience in the areas of project management, development and administration.
</h2>
<div class="flex flex-col justify-end items-end gap-6">
<p class="w-1/2 text-lg text-c-darkblue">
Our team has 20 years of experience in the areas of project management, development and administration.
</p>
<p class="w-1/2 text-lg text-c-darkblue">
Lorem ipsum dolor sit amet consectetur. Diam dui vel congue mattis enim imperdiet pulvinar scelerisque
massa. Lorem sem quis tincidunt nullam. Arcu lorem risus ac in. Sit libero aliquam aliquet mus auctor.
Turpis ultrices at id euismod quam neque est commodo rutrum.
</p>
<div class="w-1/2">
<button
class="btn__about capitalize text-c-darkblue px-7 py-2 text-xl rounded-full mt-3 border-2 border-c-darkblue">
Learn More About Us
</button>
</div>
</div>
</div>
<div class="expertise py-6 pt-12 px-6 lg:px-12 my-12 bg-cover">
<h1 class="text-2xl text-c-blue flex items-center gap-4 uppercase">
<span>*</span> <span>Our Expertise</span>
</h1>
<hr class="bg-c-blue h-1 my-6 w-full">
<div class="flex justify-between items-start mb-10">
<h1 class="expertise__title text-4xl text-white font-bold uppercase w-2/6">
SEE OUR SUCCESSFUL
CASE STUDIES
</h1>
<div class="w-1/6 text-white flex flex-col items-end gap-4">
<span class="text-2xl text-c-blue p-3 rounded-[100%] w-[50px] h-[50px] flex
justify-center items-center
border-solid border-2 border-c-blue
hover:border-white hover:text-white cursor-pointer
">+</span>
<p class="text-right">
Explore our case studies showcasing successful
projects.
</p>
</div>
</div>
<div class="expertise__cards flex justify-between items-start mb-10 gap-6">
<div v-for="expertise in expertises" :key="expertise.id" class="expertise__card w-2/6">
<img :src="expertise.image" alt="expertise case study">
<div class="my-4 flex gap-2">
<button v-for="tech in expertise.techs"
class="text-white px-4 py-2 text-xs capitalize rounded-full border-2 border-white border-solid">
{{ tech }}
</button>
</div>
<div>
<h1 class="text-xl text-white font-bold">
{{ expertise.title }}
</h1>
<p class="text-slate-400 text-xs mt-2 ">
{{ expertise.des }}
</p>
</div>
</div>
</div>
<div class="w-full flex justify-center mb-10">
<button class="btn__about capitalize text-c-blue px-7 py-2
hover:bg-white hover:text-c-darkblue hover:border-c-darkblue
text-xl rounded-full mt-3 border-2 border-c-blue">
View All Projects
</button>
</div>
</div>
<div class="services py-6 px-6 lg:px-12 my-12">
<div class="flex flex-col items-center justify-center mb-10">
<h1 class="text-6xl text-c-blue font-bold">Our Services</h1>
<p class="text-xl text-c-darkblue mt-2">Lorem ipsum dolor sit amet consectetur. Sed eu nulla et eu.</p>
</div>
<div class="services__list flex items-start justify-space-between gap-6">
<div class="service__card relative flex flex-col w-1/3">
<span class="h-[100px] w-[100px] bg-c-darkblue text-c-blue
rounded-full flex items-center justify-center ">
<Icon name="mdi:message-bulleted" size="50" />
</span>
<h3 class="mt-6 text-4xl font-bold text-c-darkblue">
Advise
</h3>
<p class="text-base text-c-darkblue my-6 w-[85%] line-clamp-3">
The task of information systems is to optimally support the company's goals and processes.
Our consulting focus is on IT architectures, project methodology and conceptual support for IT
projects. We pay particular attention to ensuring that ...
</p>
<button class="w-fit text-c-blue font-bold underline">
Learn More
</button>
</div>
<div class="service__card relative flex flex-col w-1/3">
<span class="h-[100px] w-[100px] bg-c-darkblue text-c-blue
rounded-full flex items-center justify-center ">
<Icon name="mdi:message-bulleted" size="50" />
</span>
<h3 class="mt-6 text-4xl font-bold text-c-darkblue">
Conception
</h3>
<p class="text-base text-c-darkblue my-6 w-[85%] line-clamp-3">
The task of information systems is to optimally support the company's goals and processes.
Our consulting focus is on IT architectures, project methodology and conceptual support for IT
projects. We pay particular attention to ensuring that ...
</p>
<button class="w-fit text-c-blue font-bold underline">
Learn More
</button>
</div>
<div class="service__card relative flex flex-col w-1/3">
<span class="h-[100px] w-[100px] bg-c-darkblue text-c-blue
rounded-full flex items-center justify-center ">
<Icon name="mdi:message-bulleted" size="50" />
</span>
<h3 class="mt-6 text-4xl font-bold text-c-darkblue">
Development
</h3>
<p class="text-base text-c-darkblue my-6 w-[85%] line-clamp-3">
The task of information systems is to optimally support the company's goals and processes.
Our consulting focus is on IT architectures, project methodology and conceptual support for IT
projects. We pay particular attention to ensuring that ...
</p>
<button class="w-fit text-c-blue font-bold underline">
Learn More
</button>
</div>
</div>
</div>
<div class="competences py-12 px-6 lg:px-12 my-12 bg-cover">
<h1 class="text-2xl text-c-blue flex items-center gap-4 uppercase">
<span>*</span> <span>Our Competence</span>
</h1>
<hr class="bg-c-blue h-1 my-6 w-full">
<p class="competences__title text-white text-3xl">
We carry out an inventory and assessment for you,
create a well-founded target/actual analysis and prepare a
meaningful feasibility and economic viability study.
</p>
<div class="competences__list mt-14 flex-col gap-6">
<div class="competences__item flex flex-col">
<div class="competences__item__content flex justify-between items-center gap-8">
<div class="flex justify-start items-center gap-8">
<span class="block h-[20px] w-[20px] bg-c-blue text-c-blue rounded-full">
</span>
<h3 class="text-2xl font-bold text-c-blue capitalize">
Web Development & Mobile Apps
</h3>
</div>
<p class="competences__title text-white text-lg font-semibold w-2/6">
GET DETAILED <br>
PROFILES OF <br>
PROOFED TALENTS <br>
</p>
</div>
<hr class="bg-white h-[1px] my-6 w-full">
</div>
<div class="competences__item flex flex-col">
<div class="competences__item__content flex justify-between items-center gap-8">
<div class="flex justify-start items-center gap-8">
<span class="block h-[20px] w-[20px] bg-c-blue text-c-blue rounded-full">
</span>
<h3 class="text-2xl font-bold text-c-blue capitalize">
Cloud computing
</h3>
</div>
<p class="competences__title text-white text-lg font-semibold w-2/6">
GET DETAILED <br>
PROFILES OF <br>
PROOFED TALENTS <br>
</p>
</div>
<hr class="bg-white h-[1px] my-6 w-full">
</div>
<div class="competences__item flex flex-col">
<div class="competences__item__content flex justify-between items-center gap-8">
<div class="flex justify-start items-center gap-8">
<span class="block h-[20px] w-[20px] bg-c-blue text-c-blue rounded-full">
</span>
<h3 class="text-2xl font-bold text-c-blue capitalize">
AI and Robotic
</h3>
</div>
<p class="competences__title text-white text-lg font-semibold w-2/6">
GET DETAILED <br>
PROFILES OF <br>
PROOFED TALENTS <br>
</p>
</div>
<hr class="bg-white h-[1px] my-6 w-full">
</div>
</div>
</div>
<div class="projects py-12 px-6 lg:px-12 my-12">
<div class="flex flex-col items-center justify-center mb-10">
<h1 class="text-6xl text-c-blue text-center font-bold relative">
PROJECT <br>
DELIVERED!
<span
class="px-4 absolute top-10 right-[35%] origin-center -rotate-45 py-2 text-xs bg-c-darkblue text-white rounded-full uppercase font-normal">
Cheers!
</span>
</h1>
</div>
<div class="flex items-center justify-between">
<div class="w-1/3">
<h3 class="text-4xl font-medium text-c-darkblue text-center">
Active Client <br> Worldwide
</h3>
<p class="text-8xl font-bold text-c-darkblue text-center mt-6">
150+
</p>
</div>
<div class="w-1/3">
<h3 class="text-4xl font-medium text-c-darkblue text-center">
Project We
<br> Completed
</h3>
<p class="text-8xl font-bold text-transparent stats__stroke text-center mt-6">
75+
</p>
</div>
<div class="w-1/3">
<h3 class="text-4xl font-medium text-c-darkblue text-center">
Years of <br> Apporch
</h3>
<p class="text-8xl font-bold text-transparent stats__stroke text-center mt-6">
19+
</p>
</div>
</div>
</div>
<div class="companies py-12 px-6 lg:px-12 my-12 bg-cover">
<div class="flex flex-col items-center justify-center mb-10">
<h1 class="text-4xl text-c-blue font-bold">Trusted By Great Companies</h1>
<div class=" flex justify-between items-center gap-6 mt-6">
<img class="w-44" src="~/assets/img/company_1.png" alt="logo afidi">
<img class="w-44" src="~/assets/img/company_2.png" alt="logo afidi">
<img class="w-44" src="~/assets/img/company_3.png" alt="logo afidi">
<img class="w-44" src="~/assets/img/company_4.png" alt="logo afidi">
</div>
</div>
</div>
<div class="blog py-12 px-6 lg:px-12 my-12">
<h1 class="text-2xl text-c-blue flex items-center gap-2 uppercase">
<span>*</span> <span>OUR LATEST NEWS</span>
</h1>
<hr class="bg-c-blue h-1 my-6 w-full">
<div class="blog__acticles flex justify-between items-center gap-4">
<div class="blog__acticle w-1/4">
<img src="~/assets/img/card_img.png" class="w-full" alt="expertise case study">
<div>
<h1 class="text-xl text-c-darkblue font-bold mt-2">
Explore our case studies showcasing successful projects.
</h1>
<p class="text-slate-600 text-xs mt-2 line-clamp-2">
Lorem ipsum dolor sit amet consectetur. Fusce euismod aliquet vel auctor. Mi felis cursus
vestibulum luctus in....
</p>
<p class="mt-2 font-bold text-c-darkblue">
Jonh Doe | uncategorized
</p>
</div>
</div>
<div class="blog__acticle w-1/4">
<img src="~/assets/img/card_im_2.png" class="w-full" alt="expertise case study">
<div>
<h1 class="text-xl text-c-darkblue font-bold mt-2">
Explore our case studies showcasing successful projects.
</h1>
<p class="text-slate-600 text-xs mt-2 line-clamp-2">
Lorem ipsum dolor sit amet consectetur. Fusce euismod aliquet vel auctor. Mi felis cursus
vestibulum luctus in....
</p>
<p class="mt-2 font-bold text-c-darkblue">
Jonh Doe | uncategorized
</p>
</div>
</div>
<div class="blog__acticle w-1/4">
<img src="~/assets/img/card_img_3.png" class="w-full" alt="expertise case study">
<div>
<h1 class="text-xl text-c-darkblue font-bold mt-2">
Explore our case studies showcasing successful projects.
</h1>
<p class="text-slate-600 text-xs mt-2 line-clamp-2">
Lorem ipsum dolor sit amet consectetur. Fusce euismod aliquet vel auctor. Mi felis cursus
vestibulum luctus in....
</p>
<p class="mt-2 font-bold text-c-darkblue">
Jonh Doe | uncategorized
</p>
</div>
</div>
<div class="blog__acticle w-1/4">
<img src="~/assets/img/card_img_4.png" class="w-full" alt="expertise case study">
<div>
<h1 class="text-xl text-c-darkblue font-bold mt-2">
Explore our case studies showcasing successful projects.
</h1>
<p class="text-slate-600 text-xs mt-2 line-clamp-2">
Lorem ipsum dolor sit amet consectetur. Fusce euismod aliquet vel auctor. Mi felis cursus
vestibulum luctus in....
</p>
<p class="mt-2 font-bold text-c-darkblue">
Jonh Doe | uncategorized
</p>
</div>
</div>
</div>
<div class="w-full flex justify-center mb-10 mt-10">
<button class="btn__about capitalize text-c-blue px-7 py-2
hover:bg-white hover:text-c-darkblue hover:border-c-darkblue
text-xl rounded-full mt-3 border-2 border-c-blue">
View All Articles
</button>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.btn__about {
@extend %btn-transition;
}
.expertise {
background-image: url('~/assets/img/expertise_bg.png');
&__title {
@extend %title-bg-gradient;
}
}
.service__card:not(:last-child) {
&::after {
content: "";
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 2px;
background: linear-gradient(180deg, rgba(217, 217, 217, 0.00) 0%, #0AA5D3 48.44%, rgba(217, 217, 217, 0.00) 100%);
}
}
.competences {
background-image: url('~/assets/img/competence_bg.png');
&__title {
@extend %title-bg-gradient;
}
}
.stats__stroke {
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: $conop-dark-blue;
}
.companies {
background-image: url('~/assets/img/companies_bg.png');
&__title {
@extend %title-bg-gradient;
}
}
</style>

21
tailwind.config.js Normal file
View file

@ -0,0 +1,21 @@
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./components/**/*.{js,vue,ts}",
"./layouts/**/*.vue",
"./pages/**/*.vue",
"./plugins/**/*.{js,ts}",
"./app.vue",
"./error.vue",
],
theme: {
extend: {
colors: {
'c-blue': '#0AA5D3',
'c-darkblue': '#00304A',
},
},
},
plugins: [],
}