first commit
This commit is contained in:
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
38
eslint.config.js
Normal file
38
eslint.config.js
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
import js from '@eslint/js'
|
||||||
|
import globals from 'globals'
|
||||||
|
import react from 'eslint-plugin-react'
|
||||||
|
import reactHooks from 'eslint-plugin-react-hooks'
|
||||||
|
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||||
|
|
||||||
|
export default [
|
||||||
|
{ ignores: ['dist'] },
|
||||||
|
{
|
||||||
|
files: ['**/*.{js,jsx}'],
|
||||||
|
languageOptions: {
|
||||||
|
ecmaVersion: 2020,
|
||||||
|
globals: globals.browser,
|
||||||
|
parserOptions: {
|
||||||
|
ecmaVersion: 'latest',
|
||||||
|
ecmaFeatures: { jsx: true },
|
||||||
|
sourceType: 'module',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
settings: { react: { version: '18.3' } },
|
||||||
|
plugins: {
|
||||||
|
react,
|
||||||
|
'react-hooks': reactHooks,
|
||||||
|
'react-refresh': reactRefresh,
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
...js.configs.recommended.rules,
|
||||||
|
...react.configs.recommended.rules,
|
||||||
|
...react.configs['jsx-runtime'].rules,
|
||||||
|
...reactHooks.configs.recommended.rules,
|
||||||
|
'react/jsx-no-target-blank': 'off',
|
||||||
|
'react-refresh/only-export-components': [
|
||||||
|
'warn',
|
||||||
|
{ allowConstantExport: true },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]
|
||||||
13
index.html
Normal file
13
index.html
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/wdilogo.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>WDIPL</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.jsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
5945
package-lock.json
generated
Normal file
5945
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
35
package.json
Normal file
35
package.json
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
{
|
||||||
|
"name": "wditest",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"lint": "eslint .",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@chakra-ui/react": "^2.8.2",
|
||||||
|
"@emotion/react": "^11.13.3",
|
||||||
|
"@emotion/styled": "^11.13.0",
|
||||||
|
"framer-motion": "^11.3.31",
|
||||||
|
"react": "^18.3.1",
|
||||||
|
"react-dom": "^18.3.1",
|
||||||
|
"react-hook-form": "^7.53.0",
|
||||||
|
"react-icons": "^5.3.0",
|
||||||
|
"react-router-dom": "^6.26.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@eslint/js": "^9.9.0",
|
||||||
|
"@types/react": "^18.3.3",
|
||||||
|
"@types/react-dom": "^18.3.0",
|
||||||
|
"@vitejs/plugin-react": "^4.3.1",
|
||||||
|
"eslint": "^9.9.0",
|
||||||
|
"eslint-plugin-react": "^7.35.0",
|
||||||
|
"eslint-plugin-react-hooks": "^5.1.0-rc.0",
|
||||||
|
"eslint-plugin-react-refresh": "^0.4.9",
|
||||||
|
"globals": "^15.9.0",
|
||||||
|
"vite": "^5.4.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
1
public/vite.svg
Normal file
1
public/vite.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
23
public/wdilogo.svg
Normal file
23
public/wdilogo.svg
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
<svg width="66" height="67" viewBox="0 0 66 67" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g clip-path="url(#clip0_6181_9851)">
|
||||||
|
<path d="M45.7635 53.7237C43.9219 53.9481 42.7323 53.3159 41.9258 51.7728L41.2335 50.5355L31.2327 32.895C30.5808 31.7394 29.6331 31.1411 28.3024 31.1819C27.7512 31.1955 27.1934 31.1819 26.6356 31.1547C25.8492 31.114 25.1906 31.3519 24.7671 32.0385C24.3504 32.7115 24.3572 33.4116 24.7537 34.1186L38.7132 58.7202C38.9148 59.0737 39.1366 59.1824 39.5197 59.1757L46.9531 59.1892L52.8474 59.2504H56.0869L28.0537 9.81617C27.9462 9.95213 27.8857 10.0133 27.8453 10.0881L20.5464 22.8001C19.6323 24.418 20.1095 26.7089 21.5343 27.9325C23.3423 29.4893 25.782 29.3465 27.5362 27.5791C28.793 26.3146 30.359 26.4914 31.2193 28.0005L45.3669 52.942L45.7635 53.7237ZM18.073 27.1576L17.7101 27.7286L14.8066 32.759C14.5244 33.2281 14.5378 33.568 14.8066 34.0371L25.54 52.9556L25.9433 53.7101C25.4527 53.7101 25.0965 53.7509 24.7537 53.7033C23.6044 53.5334 22.7508 52.908 22.1728 51.8815L13.4893 36.5455L13.0659 35.8657L12.75 36.3551L9.75247 41.5555C9.52395 41.943 9.5374 42.2217 9.75919 42.6024L15.6266 52.9284C15.7476 53.1391 15.8417 53.3567 15.9828 53.6286H9.04676L9.81296 52.2758C10.3842 51.3581 10.6262 50.3588 10.4514 49.3051C10.1624 47.4833 8.87202 46.1713 8.12599 44.5398C8.01173 44.6486 7.97141 44.6689 7.95124 44.7097L0.141468 58.3123C-0.147534 58.8154 0.0137698 59.0465 0.618658 59.0601L6.44575 59.1281L28.8132 59.1621L29.4517 59.1689H36.2197L18.073 27.1576ZM66.0003 59.2504L37.4227 8.85767L35.9374 11.4341C34.4588 13.9289 34.5193 16.3897 35.9508 18.8981L51.3083 45.9674L58.5535 58.7066C58.6812 58.9309 58.9635 59.2232 59.1785 59.23L66.0003 59.2504Z" fill="#E8155D"/>
|
||||||
|
<path d="M33.0008 1.07397L29.5866 7.02893C29.4992 7.18528 29.4723 7.46399 29.553 7.61354L31.5289 11.0873C31.9389 11.7671 32.9471 11.835 33.3907 11.196C34.2711 9.91803 34.9768 8.55165 35.0911 6.94055C35.2591 4.69725 34.1367 2.94339 33.0008 1.07397Z" fill="white"/>
|
||||||
|
<path d="M45.7635 53.7237L45.3535 52.9352L31.2058 27.9937C30.3523 26.4846 28.7796 26.3079 27.5227 27.5723C25.7753 29.3397 23.3288 29.4825 21.5209 27.9257C20.0961 26.7021 19.6189 24.4044 20.5329 22.7933L27.8319 10.0813C27.8722 10.0065 27.9327 9.95213 28.0403 9.80937L56.0802 59.2504H52.8407L46.9464 59.1892L39.513 59.1757C39.1231 59.1757 38.9013 59.0669 38.7064 58.7202L24.7604 34.1186C24.3572 33.4116 24.3572 32.7115 24.7739 32.0385C25.1973 31.3519 25.8559 31.114 26.6423 31.1547L28.3091 31.1819C29.6398 31.1411 30.5875 31.7394 31.2394 32.895L41.2402 50.5355L41.9325 51.7728C42.7323 53.3159 43.9219 53.9481 45.7635 53.7237ZM18.073 27.1576L36.2264 59.1689H29.4584C29.2433 59.1689 29.0282 59.1621 28.8199 59.1621L6.44575 59.1213L0.618658 59.0533C0.0137698 59.0465 -0.147534 58.8086 0.141468 58.3055L7.95797 44.7029C7.97813 44.669 8.01846 44.6418 8.13271 44.533C8.87202 46.1645 10.1624 47.4765 10.4582 49.2983C10.6262 50.352 10.391 51.3581 9.81968 52.269L9.05349 53.6218H15.9895L15.6333 52.9216L9.76591 42.5956C9.55084 42.2149 9.5374 41.9294 9.75919 41.5487L12.7567 36.3483C12.8374 36.2056 12.9382 36.0696 13.0726 35.8589L13.4961 36.5387L22.1796 51.8747C22.7576 52.8944 23.6111 53.5198 24.7604 53.6965C25.1032 53.7509 25.4661 53.7033 25.95 53.7033L25.5468 52.9488L14.8066 34.0303C14.5378 33.5612 14.5244 33.2213 14.8066 32.7523L17.7101 27.7218L18.073 27.1576ZM66.0003 59.2504C63.6547 59.2504 61.4166 59.264 59.1785 59.23C58.9635 59.2232 58.6812 58.9377 58.5535 58.7066L51.3083 45.9674L35.9508 18.8981C34.5193 16.3897 34.4521 13.9221 35.9374 11.4341C36.4213 10.6251 36.8851 9.80257 37.4227 8.85767L66.0003 59.2504Z" fill="#E8155D"/>
|
||||||
|
<path d="M33.0008 1.07403C34.1366 2.94345 35.259 4.69051 35.091 6.94061C34.97 8.55851 34.271 9.91809 33.3906 11.1961C32.947 11.8351 31.9389 11.7603 31.5289 11.0873L29.5529 7.6136C29.4723 7.46405 29.4991 7.18534 29.5865 7.02899L33.0008 1.07403ZM38.3036 0.60498C39.5 0.60498 40.4745 1.59067 40.4745 2.8007C40.4727 3.38366 40.2425 3.94214 39.8343 4.35372C39.4261 4.7653 38.8733 4.99642 38.2969 4.99642C37.1006 4.99642 36.126 4.00393 36.126 2.8007C36.1296 2.21829 36.3603 1.66085 36.7681 1.24965C37.176 0.838452 37.7278 0.606762 38.3036 0.60498ZM36.368 2.8075C36.368 3.32674 36.5719 3.82471 36.9349 4.19187C37.2979 4.55902 37.7903 4.76529 38.3036 4.76529C39.3655 4.76529 40.2325 3.88836 40.2393 2.8075C40.2393 2.28826 40.0353 1.79029 39.6723 1.42313C39.3093 1.05597 38.817 0.849705 38.3036 0.849705C37.7903 0.849705 37.2979 1.05597 36.9349 1.42313C36.5719 1.79029 36.368 2.28826 36.368 2.8075Z" fill="white"/>
|
||||||
|
<path d="M38.6531 2.86875C38.7741 2.91633 38.8413 2.99791 38.8884 3.09988L39.2647 3.88843L39.332 4.03798C39.1908 4.03798 39.0631 4.03119 38.9354 4.03798C38.8279 4.04478 38.7808 4.004 38.7405 3.90882L38.4582 3.24263C38.3776 3.06589 38.223 2.99111 38.0348 3.0319V4.03119H37.5845V1.58395C37.5979 1.58395 37.6114 1.57715 37.6248 1.57715H38.3641C38.465 1.57715 38.5725 1.59074 38.6666 1.61114C39.0362 1.69271 39.1908 1.95783 39.1572 2.31132C39.137 2.59683 38.9825 2.76678 38.7136 2.84156C38.7002 2.85515 38.68 2.85515 38.6531 2.86875ZM38.0348 2.66481L38.4112 2.63082C38.4649 2.62402 38.5187 2.59683 38.559 2.56284C38.68 2.48127 38.7002 2.35891 38.68 2.22295C38.6599 2.10059 38.5859 2.03261 38.4717 1.99182C38.3305 1.95103 38.1827 1.96463 38.0348 1.96463V2.66481ZM3.50914 66.2659L3.13277 65.3142H1.03582L0.659446 66.2659H0.0612793L1.76169 61.9968H2.41362L4.10731 66.2659H3.50914ZM2.08429 62.5406L1.1904 64.8451H2.97818L2.08429 62.5406ZM4.65843 66.2659V61.9968H6.35211C7.19896 61.9968 7.67615 62.5882 7.67615 63.2816C7.67615 63.9818 7.19224 64.5664 6.35211 64.5664H5.18266V66.2659H4.65843ZM7.13175 63.2816C7.13175 62.7989 6.78898 62.4659 6.29163 62.4659H5.18266V64.0905H6.29163C6.78898 64.0905 7.13175 63.7574 7.13175 63.2816ZM8.37513 66.2659V61.9968H10.0688C10.9157 61.9968 11.3928 62.5882 11.3928 63.2816C11.3928 63.9818 10.9089 64.5664 10.0688 64.5664H8.89937V66.2659H8.37513ZM10.8484 63.2816C10.8484 62.7989 10.5057 62.4659 10.0083 62.4659H8.89937V64.0905H10.0083C10.5057 64.0905 10.8484 63.7574 10.8484 63.2816ZM11.8364 65.6609L12.1523 65.253C12.316 65.4459 12.5192 65.6006 12.7478 65.7062C12.9764 65.8119 13.225 65.866 13.4764 65.8648C14.2291 65.8648 14.4711 65.4569 14.4711 65.1238C14.4711 64.0226 11.9709 64.6344 11.9709 63.1116C11.9709 62.4047 12.5892 61.922 13.4293 61.922C14.0678 61.922 14.5652 62.1464 14.9214 62.5202L14.6055 62.9077C14.2896 62.5474 13.846 62.3979 13.3823 62.3979C12.8849 62.3979 12.5153 62.6698 12.5153 63.0777C12.5153 64.0362 15.0155 63.4855 15.0155 65.083C15.0155 65.6948 14.5988 66.3406 13.4562 66.3406C12.7303 66.3406 12.1859 66.0551 11.8364 65.6609ZM17.4417 66.3882V61.8608H17.7912V66.3882H17.4417ZM23.6385 66.2659L22.711 62.8193L21.7835 66.2659H21.2122L20.0091 61.9968H20.5939L21.5281 65.5521L22.4959 61.9968H22.9328L23.9006 65.5521L24.8281 61.9968H25.4195L24.2098 66.2659H23.6385Z" fill="white"/>
|
||||||
|
<path d="M26.0052 66.2659V61.9968H28.7676V62.4727H26.5295V63.8459H28.7272V64.3217H26.5295V65.7968H28.7676V66.2727H26.0052V66.2659Z" fill="white"/>
|
||||||
|
<path d="M29.6061 66.2659V61.9968H31.488C32.2206 61.9968 32.6709 62.4455 32.6709 63.0845C32.6709 63.6215 32.3147 63.9818 31.9316 64.0634C32.3819 64.1314 32.7516 64.6004 32.7516 65.1103C32.7516 65.7968 32.3013 66.2591 31.5283 66.2591H29.6061V66.2659ZM32.1198 63.1593C32.1198 62.7786 31.8644 62.4659 31.3939 62.4659H30.1304V63.8391H31.3939C31.8711 63.8459 32.1198 63.5467 32.1198 63.1593ZM32.2072 65.0559C32.2072 64.6684 31.9383 64.3217 31.4275 64.3217H30.1304V65.7968H31.4275C31.9114 65.7901 32.2072 65.5045 32.2072 65.0559Z" fill="white"/>
|
||||||
|
<path d="M33.3297 65.6607L33.6455 65.2528C33.9211 65.5723 34.3714 65.8647 34.9696 65.8647C35.7223 65.8647 35.9643 65.4568 35.9643 65.1237C35.9643 64.0224 33.4641 64.6342 33.4641 63.1115C33.4641 62.4045 34.0824 61.9219 34.9225 61.9219C35.561 61.9219 36.0584 62.1462 36.4146 62.5201L36.0987 62.9076C35.7828 62.5473 35.3392 62.3977 34.8755 62.3977C34.3781 62.3977 34.0085 62.6696 34.0085 63.0775C34.0085 64.036 36.5087 63.4854 36.5087 65.0829C36.5087 65.6947 36.092 66.3405 34.9494 66.3405C34.2235 66.3405 33.6791 66.055 33.3297 65.6607Z" fill="white"/>
|
||||||
|
<path d="M37.2961 66.2659V61.9968H37.8204V66.2659H37.2961ZM39.8501 66.2659V62.4727H38.5126V61.9968H41.7118V62.4727H40.3676V66.2659H39.8501Z" fill="white"/>
|
||||||
|
<path d="M42.4165 66.2659V61.9968H45.1788V62.4727H42.9407V63.8459H45.1385V64.3217H42.9407V65.7968H45.1788V66.2727H42.4165V66.2659Z" fill="white"/>
|
||||||
|
<path d="M45.7639 65.6607L46.0798 65.2528C46.3554 65.5723 46.8057 65.8647 47.4038 65.8647C48.1566 65.8647 48.3985 65.4568 48.3985 65.1237C48.3985 64.0224 45.8983 64.6342 45.8983 63.1115C45.8983 62.4045 46.5167 61.9219 47.3568 61.9219C47.9953 61.9219 48.4926 62.1462 48.8488 62.5201L48.533 62.9076C48.2171 62.5473 47.7735 62.3977 47.3097 62.3977C46.8124 62.3977 46.4427 62.6696 46.4427 63.0775C46.4427 64.036 48.9429 63.4854 48.9429 65.0829C48.9429 65.6947 48.5262 66.3405 47.3837 66.3405C46.6578 66.3405 46.1134 66.055 45.7639 65.6607Z" fill="white"/>
|
||||||
|
<path d="M51.3702 66.3882V61.8608H51.7197V66.3882H51.3702ZM54.0922 65.6609L54.4081 65.253C54.6836 65.5725 55.1339 65.8648 55.7321 65.8648C56.4848 65.8648 56.7268 65.4569 56.7268 65.1238C56.7268 64.0226 54.2266 64.6344 54.2266 63.1116C54.2266 62.4047 54.8449 61.922 55.685 61.922C56.3235 61.922 56.8209 62.1464 57.1771 62.5202L56.8612 62.9077C56.5453 62.5474 56.1017 62.3979 55.638 62.3979C55.1406 62.3979 54.771 62.6698 54.771 63.0777C54.771 64.0362 57.2712 63.4855 57.2712 65.083C57.2712 65.6948 56.8545 66.3406 55.7119 66.3406C54.9793 66.3406 54.4349 66.0551 54.0922 65.6609Z" fill="white"/>
|
||||||
|
<path d="M58.0499 66.2659V61.9968H60.8122V62.4727H58.5741V63.8459H60.7719V64.3217H58.5741V65.7968H60.8122V66.2727H58.0499V66.2659Z" fill="white"/>
|
||||||
|
<path d="M61.4843 64.1312C61.4843 62.8668 62.3312 61.9219 63.5813 61.9219C64.8314 61.9219 65.6849 62.8668 65.6849 64.1312C65.6849 65.3888 64.8314 66.3405 63.5813 66.3405C62.3312 66.3405 61.4843 65.3956 61.4843 64.1312ZM65.1338 64.1312C65.1338 63.1319 64.5222 62.3977 63.5745 62.3977C62.6269 62.3977 62.022 63.1319 62.022 64.1312C62.022 65.1237 62.6202 65.8647 63.5745 65.8647C64.5222 65.8647 65.1338 65.1237 65.1338 64.1312Z" fill="white"/>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<clipPath id="clip0_6181_9851">
|
||||||
|
<rect width="66" height="67" fill="white"/>
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 10 KiB |
28
src/App.css
Normal file
28
src/App.css
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap");
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;400&display=swap');
|
||||||
|
|
||||||
|
|
||||||
|
/* Style the scrollbar */
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 12px; /* Width of the entire scrollbar */
|
||||||
|
height: 12px; /* Height of the entire scrollbar */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Style the scrollbar track */
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: black; /* Color of the track */
|
||||||
|
border-radius: 10px; /* Rounded corners */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Style the scrollbar thumb */
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background-color: #E5195E; /* Color of the thumb */
|
||||||
|
border-radius: 10px; /* Rounded corners */
|
||||||
|
border: 3px solid black; /* Space around the thumb */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Style the scrollbar thumb on hover */
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
background-color: #E5195E; /* Color of the thumb when hovered */
|
||||||
|
}
|
||||||
|
|
||||||
20
src/App.jsx
Normal file
20
src/App.jsx
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
import "./App.css";
|
||||||
|
import { BrowserRouter, Route, Routes } from "react-router-dom";
|
||||||
|
import Home from "./pages/Home";
|
||||||
|
import Header from "./components/Header";
|
||||||
|
function App() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div>
|
||||||
|
<BrowserRouter>
|
||||||
|
<Header />
|
||||||
|
<Routes>
|
||||||
|
<Route path="/" element={<Home />} />
|
||||||
|
</Routes>
|
||||||
|
</BrowserRouter>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App;
|
||||||
BIN
src/assets/5star.png
Normal file
BIN
src/assets/5star.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.9 KiB |
BIN
src/assets/angular.png
Normal file
BIN
src/assets/angular.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
src/assets/banner.png
Normal file
BIN
src/assets/banner.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
BIN
src/assets/captcha.png
Normal file
BIN
src/assets/captcha.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
BIN
src/assets/clutch.png
Normal file
BIN
src/assets/clutch.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 116 KiB |
BIN
src/assets/codeigniter.png
Normal file
BIN
src/assets/codeigniter.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
src/assets/compactHome.png
Normal file
BIN
src/assets/compactHome.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
src/assets/compulation.png
Normal file
BIN
src/assets/compulation.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.0 MiB |
BIN
src/assets/costEffective.png
Normal file
BIN
src/assets/costEffective.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
src/assets/downVector.png
Normal file
BIN
src/assets/downVector.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
src/assets/facebook.png
Normal file
BIN
src/assets/facebook.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
BIN
src/assets/gsf.png
Normal file
BIN
src/assets/gsf.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
BIN
src/assets/handvector.png
Normal file
BIN
src/assets/handvector.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 572 KiB |
BIN
src/assets/health.png
Normal file
BIN
src/assets/health.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 162 KiB |
BIN
src/assets/heart.png
Normal file
BIN
src/assets/heart.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
BIN
src/assets/home.png
Normal file
BIN
src/assets/home.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
BIN
src/assets/homeVector.png
Normal file
BIN
src/assets/homeVector.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
src/assets/homelogo.png
Normal file
BIN
src/assets/homelogo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
src/assets/html.png
Normal file
BIN
src/assets/html.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
src/assets/images/banner.png
Normal file
BIN
src/assets/images/banner.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
BIN
src/assets/images/compactible.png
Normal file
BIN
src/assets/images/compactible.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 MiB |
BIN
src/assets/images/logo.png
Normal file
BIN
src/assets/images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
BIN
src/assets/images/regroup.png
Normal file
BIN
src/assets/images/regroup.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 967 KiB |
BIN
src/assets/imgpsh_fullsize_anim.png
Normal file
BIN
src/assets/imgpsh_fullsize_anim.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
BIN
src/assets/insta.png
Normal file
BIN
src/assets/insta.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
src/assets/java.png
Normal file
BIN
src/assets/java.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
src/assets/left.png
Normal file
BIN
src/assets/left.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 639 B |
BIN
src/assets/linkden.png
Normal file
BIN
src/assets/linkden.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 793 B |
BIN
src/assets/lowerqoutes.png
Normal file
BIN
src/assets/lowerqoutes.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
BIN
src/assets/mad.png
Normal file
BIN
src/assets/mad.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 113 KiB |
BIN
src/assets/mobileapp.png
Normal file
BIN
src/assets/mobileapp.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 113 KiB |
BIN
src/assets/pdf.png
Normal file
BIN
src/assets/pdf.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
src/assets/pink.png
Normal file
BIN
src/assets/pink.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
src/assets/pointerBar.png
Normal file
BIN
src/assets/pointerBar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
BIN
src/assets/prosperty.png
Normal file
BIN
src/assets/prosperty.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
src/assets/qualityAssurance.png
Normal file
BIN
src/assets/qualityAssurance.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
src/assets/react.png
Normal file
BIN
src/assets/react.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
1
src/assets/react.svg
Normal file
1
src/assets/react.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 4.0 KiB |
BIN
src/assets/regrouplogo.png
Normal file
BIN
src/assets/regrouplogo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
BIN
src/assets/regrouplogos.png
Normal file
BIN
src/assets/regrouplogos.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.5 KiB |
BIN
src/assets/service.png
Normal file
BIN
src/assets/service.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
src/assets/simpletend.png
Normal file
BIN
src/assets/simpletend.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
src/assets/startup.png
Normal file
BIN
src/assets/startup.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 175 KiB |
BIN
src/assets/tablogo.png
Normal file
BIN
src/assets/tablogo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
src/assets/text.png
Normal file
BIN
src/assets/text.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
src/assets/tweeter.png
Normal file
BIN
src/assets/tweeter.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 954 B |
BIN
src/assets/uparrow.png
Normal file
BIN
src/assets/uparrow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 310 B |
BIN
src/assets/upperVector.png
Normal file
BIN
src/assets/upperVector.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
BIN
src/assets/upperquotes.png
Normal file
BIN
src/assets/upperquotes.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
BIN
src/assets/vue.png
Normal file
BIN
src/assets/vue.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
src/assets/wdi.png
Normal file
BIN
src/assets/wdi.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 175 KiB |
BIN
src/assets/wdilogo.png
Normal file
BIN
src/assets/wdilogo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.9 KiB |
BIN
src/assets/white.png
Normal file
BIN
src/assets/white.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
src/assets/wokalogo.png
Normal file
BIN
src/assets/wokalogo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
BIN
src/assets/wokalogotr.png
Normal file
BIN
src/assets/wokalogotr.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
102
src/components/Awards.jsx
Normal file
102
src/components/Awards.jsx
Normal file
@@ -0,0 +1,102 @@
|
|||||||
|
import { Box, Heading, Image, Text } from "@chakra-ui/react";
|
||||||
|
import React from "react";
|
||||||
|
import health from "../assets/health.png";
|
||||||
|
import clucth from "../assets/clutch.png";
|
||||||
|
import mad from "../assets/mad.png";
|
||||||
|
import wdi from "../assets/wdi.png";
|
||||||
|
const awardsData = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
title: "Top health and wellness app developers Mumbai",
|
||||||
|
year: 2022,
|
||||||
|
image: health,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
title: "Top Web Development Company 2023",
|
||||||
|
year: 2022,
|
||||||
|
image: clucth,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
title: "TTop Web Development Company 2023",
|
||||||
|
year: 2022,
|
||||||
|
image: mad,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
title: "Top Web Development Company 2023",
|
||||||
|
year: 2022,
|
||||||
|
image: wdi,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const Awards = () => {
|
||||||
|
return (
|
||||||
|
<Box
|
||||||
|
bgColor="#050505"
|
||||||
|
p="4rem"
|
||||||
|
display="flex"
|
||||||
|
flexDirection="column"
|
||||||
|
alignItems="center"
|
||||||
|
gap={8}
|
||||||
|
w="100%"
|
||||||
|
>
|
||||||
|
<Heading
|
||||||
|
color="#FBFBFB"
|
||||||
|
fontWeight={600}
|
||||||
|
fontSize="40px"
|
||||||
|
textAlign="center"
|
||||||
|
>
|
||||||
|
Awards & Recognition
|
||||||
|
</Heading>
|
||||||
|
<Text
|
||||||
|
textAlign="center"
|
||||||
|
color="#FFFFFF"
|
||||||
|
lineHeight="37.5px"
|
||||||
|
fontSize="24px"
|
||||||
|
fontWeight={400}
|
||||||
|
>
|
||||||
|
Our talented team of developers, designers, and engineers has
|
||||||
|
consistently demonstrated a dedication to pushing the boundaries of what
|
||||||
|
is possible in the digital landscape. From prestigious industry awards
|
||||||
|
to client testimonials, this section reflects the tangible impact of our
|
||||||
|
work.
|
||||||
|
</Text>
|
||||||
|
<Box
|
||||||
|
display="flex"
|
||||||
|
flexDirection="row"
|
||||||
|
alignItems="center"
|
||||||
|
px="1.9rem"
|
||||||
|
gap={8}
|
||||||
|
>
|
||||||
|
{awardsData.map((award) => (
|
||||||
|
<Box
|
||||||
|
key={award.id}
|
||||||
|
display="flex"
|
||||||
|
flexDirection="column"
|
||||||
|
alignItems="center"
|
||||||
|
w="30%"
|
||||||
|
gap={4}
|
||||||
|
px="2rem"
|
||||||
|
>
|
||||||
|
<Image src={award.image} w="204.47px" h="127px" />
|
||||||
|
<Text
|
||||||
|
color="#FFFFFF"
|
||||||
|
fontWeight={400}
|
||||||
|
fontSize="18px"
|
||||||
|
textAlign="center"
|
||||||
|
>
|
||||||
|
{award.title}
|
||||||
|
</Text>
|
||||||
|
<Text color="#FFFFFF" fontWeight="400" fontSize="20px">
|
||||||
|
{award.year}
|
||||||
|
</Text>
|
||||||
|
</Box>
|
||||||
|
))}
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Awards;
|
||||||
49
src/components/Banner.jsx
Normal file
49
src/components/Banner.jsx
Normal file
@@ -0,0 +1,49 @@
|
|||||||
|
import { Box, Heading, Image, Text } from "@chakra-ui/react";
|
||||||
|
import banner from "../assets/handvector.png";
|
||||||
|
import text from "../assets/text.png";
|
||||||
|
import Button from "../components/ui/Button"
|
||||||
|
const Banner = () => {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Box>
|
||||||
|
<Box
|
||||||
|
backgroundImage={`url(${banner})`}
|
||||||
|
backgroundPosition="center"
|
||||||
|
backgroundRepeat="no-repeat"
|
||||||
|
backgroundSize="cover"
|
||||||
|
w="1512px"
|
||||||
|
h="100%"
|
||||||
|
p={8}
|
||||||
|
>
|
||||||
|
<Box w="50%" display="flex" flexDirection="column" gap={4}>
|
||||||
|
<Image src={text} h="104px" w="598px" />
|
||||||
|
<Text
|
||||||
|
fontSize="20px"
|
||||||
|
fontWeight={400}
|
||||||
|
lineHeight="24px"
|
||||||
|
color="#FFFFFF"
|
||||||
|
>
|
||||||
|
Choose WDIPL for your next project and experience excellence in
|
||||||
|
web development. With a proven track record of delivering
|
||||||
|
innovative solutions, WDIPL combines cutting-edge technology,
|
||||||
|
skilled professionals, and a client-centric approach to bring your
|
||||||
|
vision to life.{" "}
|
||||||
|
</Text>
|
||||||
|
<Text
|
||||||
|
fontSize="20px"
|
||||||
|
fontWeight={400}
|
||||||
|
lineHeight="24px"
|
||||||
|
color="#FFFFFF"
|
||||||
|
>
|
||||||
|
From custom web applications to e-commerce platforms, WDIPL is
|
||||||
|
committed to delivering high-quality
|
||||||
|
</Text>
|
||||||
|
<Button Context="Let's Connect"/>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Banner;
|
||||||
198
src/components/Companys.jsx
Normal file
198
src/components/Companys.jsx
Normal file
@@ -0,0 +1,198 @@
|
|||||||
|
import reGroup from "../assets/images/regroup.png";
|
||||||
|
import compact from "../assets/images/compactible.png";
|
||||||
|
import compulation from "../assets/compulation.png";
|
||||||
|
import React, { useState } from "react";
|
||||||
|
import { ChakraProvider, Box, Center, Text, Image, Heading } from "@chakra-ui/react";
|
||||||
|
import { motion, AnimatePresence } from "framer-motion";
|
||||||
|
import regrouplogo from "../assets/regrouplogo.png";
|
||||||
|
import compactHome from "../assets/compactHome.png";
|
||||||
|
import wokalogo from "../assets/wokalogo.png";
|
||||||
|
import regrouplogos from "../assets/regrouplogos.png";
|
||||||
|
import hoeVector from "../assets/homelogo.png";
|
||||||
|
function App() {
|
||||||
|
// Set the default image and text for box1
|
||||||
|
const [selectedBox, setSelectedBox] = useState("box1");
|
||||||
|
const [selectedText, setSelectedText] = useState("text1");
|
||||||
|
const [selectedLogo, setSelectedLogo] = useState("logo1");
|
||||||
|
|
||||||
|
const backgrounds = {
|
||||||
|
box1: `url(${reGroup})`,
|
||||||
|
box2: `url(${compact})`,
|
||||||
|
box3: `url(${compulation})`,
|
||||||
|
};
|
||||||
|
const backgroundsTexts = {
|
||||||
|
text1: "Computational Algorithm Sports Event Management",
|
||||||
|
text2: "Computational Algorithm Sports Event Management",
|
||||||
|
text3: "Computational Algorithm Sports Event Management",
|
||||||
|
logo1: regrouplogos,
|
||||||
|
logo2: hoeVector,
|
||||||
|
logo3: wokalogo,
|
||||||
|
};
|
||||||
|
|
||||||
|
const getBoxSize = (box) => (selectedBox === box ? "300.37px" : "230px");
|
||||||
|
const getBoxHeight = (box) => (selectedBox === box ? "452px" : "412px");
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box position="relative" h="100%" p="3rem">
|
||||||
|
<AnimatePresence>
|
||||||
|
{selectedBox && (
|
||||||
|
<motion.div
|
||||||
|
key={selectedBox}
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
exit={{ opacity: 0 }}
|
||||||
|
transition={{ duration: 0.5 }}
|
||||||
|
style={{
|
||||||
|
position: "absolute",
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
width: "100%",
|
||||||
|
height: "100%",
|
||||||
|
backgroundImage: backgrounds[selectedBox],
|
||||||
|
backgroundSize: "cover",
|
||||||
|
backgroundPosition: "center",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
<Center h="100%" position="relative">
|
||||||
|
<Box
|
||||||
|
display="flex"
|
||||||
|
justifyContent="space-between"
|
||||||
|
alignItems="center"
|
||||||
|
w="100%"
|
||||||
|
>
|
||||||
|
<motion.div
|
||||||
|
layout
|
||||||
|
transition={{ type: "tween", stiffness: 300, damping: 20 }}
|
||||||
|
>
|
||||||
|
<Box w="50%" display="flex" flexDirection="row" gap="4">
|
||||||
|
{selectedText && (
|
||||||
|
<motion.div
|
||||||
|
key={selectedText}
|
||||||
|
initial={{ opacity: 0, y: -10 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
exit={{ opacity: 0, y: 10 }}
|
||||||
|
transition={{ duration: 0.5 }}
|
||||||
|
>
|
||||||
|
<Box w="400px">
|
||||||
|
<Image
|
||||||
|
w="130.09px"
|
||||||
|
h="100.97px"
|
||||||
|
src={backgroundsTexts[selectedLogo]}
|
||||||
|
/>
|
||||||
|
<Text fontWeight={500} fontSize={"30px"} color="#fff">
|
||||||
|
{backgroundsTexts[selectedText]}
|
||||||
|
</Text>
|
||||||
|
</Box>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
</motion.div>
|
||||||
|
<Box
|
||||||
|
px={"1rem"}
|
||||||
|
display="flex"
|
||||||
|
justifyContent="center"
|
||||||
|
alignItems="center"
|
||||||
|
gap="4"
|
||||||
|
>
|
||||||
|
{/* Box 1 */}
|
||||||
|
<motion.div
|
||||||
|
layout
|
||||||
|
transition={{ type: "tween", stiffness: 300, damping: 20 }}
|
||||||
|
>
|
||||||
|
<Box
|
||||||
|
w={getBoxSize("box1")}
|
||||||
|
h={getBoxHeight("box1")}
|
||||||
|
bg="red.500"
|
||||||
|
onClick={() => {
|
||||||
|
setSelectedBox("box1");
|
||||||
|
setSelectedText("text1");
|
||||||
|
setSelectedLogo("logo1");
|
||||||
|
}}
|
||||||
|
cursor="pointer"
|
||||||
|
display="flex"
|
||||||
|
justifyContent="center"
|
||||||
|
alignItems="center"
|
||||||
|
borderRadius="md"
|
||||||
|
shadow="lg"
|
||||||
|
bgGradient="linear(to-b, #1F4958, #D90B2E)"
|
||||||
|
transition="transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out"
|
||||||
|
_hover={{
|
||||||
|
transform: "scale(1.05)",
|
||||||
|
boxShadow: "2xl",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Image src={regrouplogo} w="103.44px" h="103.42px" />
|
||||||
|
</Box>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Box 2 */}
|
||||||
|
<motion.div
|
||||||
|
layout
|
||||||
|
transition={{ type: "tween", stiffness: 300, damping: 20 }}
|
||||||
|
>
|
||||||
|
<Box
|
||||||
|
w={getBoxSize("box2")}
|
||||||
|
h={getBoxHeight("box2")}
|
||||||
|
bg="blue.500"
|
||||||
|
onClick={() => {
|
||||||
|
setSelectedBox("box2");
|
||||||
|
setSelectedText("text2");
|
||||||
|
setSelectedLogo("logo2");
|
||||||
|
}}
|
||||||
|
cursor="pointer"
|
||||||
|
display="flex"
|
||||||
|
justifyContent="center"
|
||||||
|
alignItems="center"
|
||||||
|
borderRadius="md"
|
||||||
|
shadow="lg"
|
||||||
|
bgGradient="linear(to-b, blue.300, blue.600)"
|
||||||
|
transition="transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out"
|
||||||
|
_hover={{
|
||||||
|
transform: "scale(1.05)",
|
||||||
|
boxShadow: "2xl",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Image src={compactHome} w="74.6px" h="66.34px" />
|
||||||
|
</Box>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Box 3 */}
|
||||||
|
<motion.div
|
||||||
|
layout
|
||||||
|
transition={{ type: "tween", stiffness: 300, damping: 20 }}
|
||||||
|
>
|
||||||
|
<Box
|
||||||
|
w={getBoxSize("box3")}
|
||||||
|
h={getBoxHeight("box3")}
|
||||||
|
bg="purple.500"
|
||||||
|
onClick={() => {
|
||||||
|
setSelectedBox("box3");
|
||||||
|
setSelectedText("text3");
|
||||||
|
setSelectedLogo("logo3");
|
||||||
|
}}
|
||||||
|
cursor="pointer"
|
||||||
|
display="flex"
|
||||||
|
justifyContent="center"
|
||||||
|
alignItems="center"
|
||||||
|
borderRadius="md"
|
||||||
|
shadow="lg"
|
||||||
|
bgGradient="linear(to-b, #4F1D8F, #3A1266)"
|
||||||
|
transition="transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out"
|
||||||
|
_hover={{
|
||||||
|
transform: "scale(1.05)",
|
||||||
|
boxShadow: "2xl",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Image src={wokalogo} w="97px" h="63px" />
|
||||||
|
</Box>
|
||||||
|
</motion.div>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Center>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App;
|
||||||
65
src/components/FAQs.jsx
Normal file
65
src/components/FAQs.jsx
Normal file
@@ -0,0 +1,65 @@
|
|||||||
|
import {
|
||||||
|
Accordion,
|
||||||
|
AccordionButton,
|
||||||
|
AccordionIcon,
|
||||||
|
AccordionItem,
|
||||||
|
AccordionPanel,
|
||||||
|
Box,
|
||||||
|
Heading,
|
||||||
|
} from "@chakra-ui/react";
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
|
const FAQData = [
|
||||||
|
{
|
||||||
|
question: "I Have An App Idea, What Do I Do Next?",
|
||||||
|
answer:
|
||||||
|
"You should start the App Ideation process with the most accurate preparation of your concept. Because you just think you have a wonderful idea of the app for iPhone or Android. In fact, all you have right now is just a dream and not a concrete one.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
question: "Can I Hire WDI To Just Do The Prototype For My Project?",
|
||||||
|
answer:
|
||||||
|
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
question: "I Have An App Idea, What Do I Do Next?",
|
||||||
|
answer:
|
||||||
|
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const FAQs = () => {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Box bgColor="black" p="4rem" >
|
||||||
|
<Heading color="#FBFBFB" fontWeight={600} textAlign="center">
|
||||||
|
FAQ’s
|
||||||
|
</Heading>
|
||||||
|
<Box bgColor="black" py={8}>
|
||||||
|
<Accordion display="flex" flexDirection="column" gap={3} defaultIndex={[0]} allowMultiple color="#ffff">
|
||||||
|
{FAQData.map((faq, index) => (
|
||||||
|
<AccordionItem
|
||||||
|
key={index}
|
||||||
|
borderTop="0px solid #E8155D"
|
||||||
|
borderBottom="1px solid #E8155D"
|
||||||
|
>
|
||||||
|
<h2>
|
||||||
|
<AccordionButton>
|
||||||
|
<Box as="span" flex="1" textAlign="left" fontSize="25px">
|
||||||
|
{faq.question}
|
||||||
|
</Box>
|
||||||
|
{/* <AccordionIcon /> */} {/* Accordion Icon */}
|
||||||
|
</AccordionButton>
|
||||||
|
</h2>
|
||||||
|
<AccordionPanel pb={4} color="#9F9F9F" fontSize="20px">
|
||||||
|
{faq.answer}
|
||||||
|
</AccordionPanel>
|
||||||
|
</AccordionItem>
|
||||||
|
))}
|
||||||
|
</Accordion>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default FAQs;
|
||||||
68
src/components/Footer.jsx
Normal file
68
src/components/Footer.jsx
Normal file
@@ -0,0 +1,68 @@
|
|||||||
|
import { Box, Heading, Text } from "@chakra-ui/react";
|
||||||
|
import React from "react";
|
||||||
|
const data = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
countryName: "INDIA",
|
||||||
|
type: "Corporate Office",
|
||||||
|
address:
|
||||||
|
"614, 6th Floor, Palms Spring center, Link Road, Malad (West), Mumbai - 400064",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
countryName: "USA",
|
||||||
|
type: "Corporate Office",
|
||||||
|
address:
|
||||||
|
"614, 6th Floor, Palms Spring center, Link Road, Malad (West), Mumbai - 400064",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
countryName: "UK",
|
||||||
|
type: "Corporate Office",
|
||||||
|
address:
|
||||||
|
"614, 6th Floor, Palms Spring center, Link Road, Malad (West), Mumbai - 400064",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
countryName: "Australia",
|
||||||
|
type: "Corporate Office",
|
||||||
|
address:
|
||||||
|
"614, 6th Floor, Palms Spring center, Link Road, Malad (West), Mumbai - 400064",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const Footer = () => {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Box p={"4rem"} bgColor="#242424" display="flex" flexDirection="row" gap={7}>
|
||||||
|
{data.map((val) => {
|
||||||
|
return (
|
||||||
|
<Box
|
||||||
|
key={val.id}
|
||||||
|
display="flex"
|
||||||
|
flexDirection="column"
|
||||||
|
alignItems="flex-start"
|
||||||
|
>
|
||||||
|
<Heading color="#E5195E" fontWeight={600} fontSize="22px">
|
||||||
|
{val.countryName}
|
||||||
|
</Heading>
|
||||||
|
<Text color="#FFFFFF" fontWeight={600} fontSize="18px">
|
||||||
|
{val.type}
|
||||||
|
</Text>
|
||||||
|
<Text
|
||||||
|
color="#E6E6E6"
|
||||||
|
fontWeight={200}
|
||||||
|
fontSize="16px"
|
||||||
|
lineHeight="21.86px"
|
||||||
|
>
|
||||||
|
{val.address}
|
||||||
|
</Text>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</Box>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Footer;
|
||||||
211
src/components/FooterCom.jsx
Normal file
211
src/components/FooterCom.jsx
Normal file
@@ -0,0 +1,211 @@
|
|||||||
|
import {
|
||||||
|
Box,
|
||||||
|
Button,
|
||||||
|
Heading,
|
||||||
|
Image,
|
||||||
|
Text,
|
||||||
|
UnorderedList,
|
||||||
|
ListItem,
|
||||||
|
Input,
|
||||||
|
} from "@chakra-ui/react";
|
||||||
|
import React from "react";
|
||||||
|
import pdf from "../assets/pdf.png";
|
||||||
|
import linkedin from "../assets/linkden.png";
|
||||||
|
import twitter from "../assets/tweeter.png";
|
||||||
|
import insta from "../assets/insta.png";
|
||||||
|
import fb from "../assets/facebook.png";
|
||||||
|
import logo from "../assets/wdilogo.png";
|
||||||
|
import star from "../assets/5star.png";
|
||||||
|
import CusButton from "../components/ui/Button"
|
||||||
|
const footerData = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
title: "Services",
|
||||||
|
items: [
|
||||||
|
"Mobile App Development",
|
||||||
|
"iOS App Development",
|
||||||
|
"Android App Development",
|
||||||
|
"Native App Development",
|
||||||
|
"Hybrid App Development",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
title: "Expertise",
|
||||||
|
items: ["Technology", "Solutions"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
title: "Industries",
|
||||||
|
items: ["Fintech", "Healthcare", "Real Estate", "Education"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
title: "Company",
|
||||||
|
items: [
|
||||||
|
"Services",
|
||||||
|
"Hire Developers",
|
||||||
|
"Technologies",
|
||||||
|
"Solutions",
|
||||||
|
"Blogs",
|
||||||
|
"Podcast",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
title: "Insights",
|
||||||
|
items: ["Fintech", "Healthcare", "Real Estate", "Education", "Travel"],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const FooterCom = () => {
|
||||||
|
return (
|
||||||
|
<Box
|
||||||
|
bgColor="#1A1A1A"
|
||||||
|
p="4rem"
|
||||||
|
display="flex"
|
||||||
|
justifyContent="space-between"
|
||||||
|
w="100%"
|
||||||
|
// alignItems="center"
|
||||||
|
>
|
||||||
|
<Box w="80%" display="grid" gridTemplateColumns="repeat(3, 1fr)" gap={8}>
|
||||||
|
{footerData.map((val) => (
|
||||||
|
<Box w="100%" key={val.id} gap="1rem">
|
||||||
|
<Heading
|
||||||
|
gridColumn="span 3"
|
||||||
|
color="#FFFFFF"
|
||||||
|
fontSize="20px"
|
||||||
|
fontWeight="700"
|
||||||
|
mb="1rem"
|
||||||
|
>
|
||||||
|
{val.title}
|
||||||
|
</Heading>
|
||||||
|
{val.items.map((item, index) => (
|
||||||
|
<UnorderedList key={index} styleType="none" m="0" p="0">
|
||||||
|
<ListItem mb="0.5rem">
|
||||||
|
<Text
|
||||||
|
color="#E6E6E6"
|
||||||
|
fontSize="16px"
|
||||||
|
fontWeight="400"
|
||||||
|
_hover={{ color: "#E5195E", cursor: "pointer" }}
|
||||||
|
>
|
||||||
|
{item}
|
||||||
|
</Text>
|
||||||
|
</ListItem>
|
||||||
|
</UnorderedList>
|
||||||
|
))}
|
||||||
|
</Box>
|
||||||
|
))}
|
||||||
|
|
||||||
|
<Box display="flex" flexDirection="column" gap={2}>
|
||||||
|
<Image src={logo} w={"56px"} h="57px" />
|
||||||
|
<Text
|
||||||
|
_hover={{ color: "#E5195E", cursor: "pointer" }}
|
||||||
|
color="#E6E6E6"
|
||||||
|
fontWeight={300}
|
||||||
|
fontSize="14px"
|
||||||
|
>
|
||||||
|
©Copyright 2023 WDIPL – Software company. All rights reserved
|
||||||
|
</Text>
|
||||||
|
<Text
|
||||||
|
_hover={{ color: "#E5195E", cursor: "pointer" }}
|
||||||
|
textDecoration="underline"
|
||||||
|
color="#E6E6E6"
|
||||||
|
fontWeight={300}
|
||||||
|
fontSize="14px"
|
||||||
|
>
|
||||||
|
Cookies Policy
|
||||||
|
</Text>
|
||||||
|
<Text
|
||||||
|
_hover={{ color: "#E5195E", cursor: "pointer" }}
|
||||||
|
textDecoration="underline"
|
||||||
|
color="#E6E6E6"
|
||||||
|
fontWeight={300}
|
||||||
|
fontSize="14px"
|
||||||
|
>
|
||||||
|
Privacy Policy
|
||||||
|
</Text>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Box
|
||||||
|
display="flex"
|
||||||
|
flexDirection="column"
|
||||||
|
alignItems="flex-start"
|
||||||
|
gap={6}
|
||||||
|
>
|
||||||
|
<Box display="flex" flexDirection="column" alignItems="center" gap={3}>
|
||||||
|
<Text color="#FFFFFF" fontWeight="400" fontSize="18px">
|
||||||
|
Download Corporate Profile
|
||||||
|
</Text>
|
||||||
|
<Button
|
||||||
|
display="flex"
|
||||||
|
justifyContent="flex-start"
|
||||||
|
width="237px"
|
||||||
|
borderRadius="1px"
|
||||||
|
bgColor="#E5195E"
|
||||||
|
alignItems="center"
|
||||||
|
height="38px"
|
||||||
|
gap={5}
|
||||||
|
_hover={{ bgColor: "#C01550" }}
|
||||||
|
>
|
||||||
|
<Image width="28px" height="28px" src={pdf} alt="PDF icon" />
|
||||||
|
<Text color="#FFFFFF" fontWeight="400" fontSize="14px">
|
||||||
|
Corporateprofile.pdf
|
||||||
|
</Text>
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Box display="flex" flexDirection="column" alignItems="center" gap={6}>
|
||||||
|
<Box display="flex" flexDirection="row" alignItems="center" gap={3}>
|
||||||
|
<Image
|
||||||
|
width="30.65px"
|
||||||
|
height="30.65px"
|
||||||
|
src={linkedin}
|
||||||
|
alt="LinkedIn icon"
|
||||||
|
/>
|
||||||
|
<Image
|
||||||
|
width="25px"
|
||||||
|
height="25.42px"
|
||||||
|
src={twitter}
|
||||||
|
alt="Twitter icon"
|
||||||
|
/>
|
||||||
|
<Image width="30px" height="28.42px" src={fb} alt="Facebook icon" />
|
||||||
|
<Image
|
||||||
|
width="30px"
|
||||||
|
height="28.42px"
|
||||||
|
src={insta}
|
||||||
|
alt="Instagram icon"
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
bgColor="#1A1A1A"
|
||||||
|
border="1.5px solid #E5195E"
|
||||||
|
color="#E5195E"
|
||||||
|
fontWeight="400"
|
||||||
|
fontSize="14px"
|
||||||
|
width="237px"
|
||||||
|
height="38px"
|
||||||
|
borderRadius="1px"
|
||||||
|
_hover={{ bgColor: "#E5195E", color: "#FFFFFF" }}
|
||||||
|
>
|
||||||
|
Contact Us
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Image src={star} w="216px" h="48px" />
|
||||||
|
|
||||||
|
<Box display="flex" gap={2} flexDirection="column">
|
||||||
|
<Heading color="#FFFFFF" fontWeight="400" fontSize="18px">
|
||||||
|
Subscribe to our Newsletter
|
||||||
|
</Heading>
|
||||||
|
<Input type="email" placeholder="Enter Email" w="100%" borderRadius={"1px"} color="#E6E6E6"/>
|
||||||
|
<Button bgColor="#E5195E"_hover={{bgColor:"#E5195E"}} borderRadius="1px" color="#fff" >Subcribe</Button>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default FooterCom;
|
||||||
427
src/components/Form.jsx
Normal file
427
src/components/Form.jsx
Normal file
@@ -0,0 +1,427 @@
|
|||||||
|
import React, { useState } from "react";
|
||||||
|
import {
|
||||||
|
Box,
|
||||||
|
Button,
|
||||||
|
Flex,
|
||||||
|
FormControl,
|
||||||
|
FormLabel,
|
||||||
|
Heading,
|
||||||
|
Icon,
|
||||||
|
Image,
|
||||||
|
Input,
|
||||||
|
Select,
|
||||||
|
SelectField,
|
||||||
|
Slider,
|
||||||
|
SliderFilledTrack,
|
||||||
|
SliderThumb,
|
||||||
|
SliderTrack,
|
||||||
|
Text,
|
||||||
|
Textarea,
|
||||||
|
} from "@chakra-ui/react";
|
||||||
|
import { useForm } from "react-hook-form";
|
||||||
|
import { FiPaperclip } from "react-icons/fi";
|
||||||
|
import captcha from "../assets/captcha.png";
|
||||||
|
|
||||||
|
const Form = () => {
|
||||||
|
const [sliderValue, setSliderValue] = useState(0);
|
||||||
|
const [fileAdded , setFileAdded] = useState(false)
|
||||||
|
|
||||||
|
const {
|
||||||
|
register,
|
||||||
|
handleSubmit,
|
||||||
|
formState: { errors },
|
||||||
|
setValue,
|
||||||
|
trigger,
|
||||||
|
} = useForm();
|
||||||
|
|
||||||
|
const onSubmit = (data) => {
|
||||||
|
console.log(data);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSliderChange = (value) => {
|
||||||
|
setSliderValue(value);
|
||||||
|
};
|
||||||
|
const handleClick = () => {
|
||||||
|
document.getElementById("fileInput").click();
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleChange = (event) => {
|
||||||
|
const file = event.target.files[0];
|
||||||
|
if (file) {
|
||||||
|
const maxSize = 5 * 1024 * 1024;
|
||||||
|
const validTypes = ["image/png", "image/jpeg", "application/pdf"];
|
||||||
|
|
||||||
|
if (!validTypes.includes(file.type)) {
|
||||||
|
setValue("fileInput", null);
|
||||||
|
trigger("fileInput");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (file.size > maxSize) {
|
||||||
|
setValue("fileInput", null);
|
||||||
|
trigger("fileInput");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setValue("fileInput", file);
|
||||||
|
trigger("fileInput");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box bg="black" p="4rem" w="100vw">
|
||||||
|
<Box
|
||||||
|
bg="#0F0F0F"
|
||||||
|
display="flex"
|
||||||
|
flexDirection="column"
|
||||||
|
alignItems="center"
|
||||||
|
w="100%"
|
||||||
|
px="4rem"
|
||||||
|
py="2rem"
|
||||||
|
>
|
||||||
|
<Heading
|
||||||
|
fontWeight="600"
|
||||||
|
lineHeight="57.4px"
|
||||||
|
fontSize="40px"
|
||||||
|
textAlign="center"
|
||||||
|
color="#FBFBFB"
|
||||||
|
w="50%"
|
||||||
|
py={"1rem"}
|
||||||
|
>
|
||||||
|
Let's Collaborate to Shape Your Vision into Reality
|
||||||
|
</Heading>
|
||||||
|
<Box w="100%">
|
||||||
|
<form onSubmit={handleSubmit(onSubmit)}>
|
||||||
|
<FormControl display="flex" flexDirection="column" gap={4}>
|
||||||
|
<Box
|
||||||
|
display="grid"
|
||||||
|
gridTemplateColumns="repeat(2, 1fr)"
|
||||||
|
gap={2}
|
||||||
|
justifyItems="center"
|
||||||
|
>
|
||||||
|
{[
|
||||||
|
{ label: "Enter your name", type: "text", name: "name" },
|
||||||
|
{
|
||||||
|
label: "Enter your email address",
|
||||||
|
type: "email",
|
||||||
|
name: "email",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Enter your contact number",
|
||||||
|
type: "text",
|
||||||
|
name: "contact",
|
||||||
|
},
|
||||||
|
].map((field, index) => (
|
||||||
|
<Box w="100%" maxW="570px" key={index}>
|
||||||
|
<FormLabel color="#FFFFFF">{field.label}</FormLabel>
|
||||||
|
<Input
|
||||||
|
{...register(field.name, {
|
||||||
|
required: `${field.label} is required`,
|
||||||
|
pattern:
|
||||||
|
field.type === "email"
|
||||||
|
? /^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/
|
||||||
|
: undefined,
|
||||||
|
})}
|
||||||
|
border="1px solid #E5195E"
|
||||||
|
w="100%"
|
||||||
|
focusBorderColor="#E5195E"
|
||||||
|
type={field.type}
|
||||||
|
backgroundColor="#E5195E0A"
|
||||||
|
color="white"
|
||||||
|
/>
|
||||||
|
{errors[field.name] && (
|
||||||
|
<Text color="red.400" mt={2}>
|
||||||
|
{errors[field.name].message}
|
||||||
|
</Text>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
))}
|
||||||
|
{[
|
||||||
|
{
|
||||||
|
label: "Select your country",
|
||||||
|
options: ["Country 1", "Country 2", "Country 3"],
|
||||||
|
name: "country",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Select your services",
|
||||||
|
options: ["Service 1", "Service 2", "Service 3"],
|
||||||
|
name: "services",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Where did you hear about us? *",
|
||||||
|
options: ["Source 1", "Source 2", "Source 3"],
|
||||||
|
name: "source",
|
||||||
|
},
|
||||||
|
].map((selectField, index) => (
|
||||||
|
<Box w="100%" maxW="570px" key={index + 3}>
|
||||||
|
<FormLabel color="#FFFFFF">{selectField.label}</FormLabel>
|
||||||
|
<Select
|
||||||
|
{...register(selectField.name, {
|
||||||
|
required: `${selectField.label} is required`,
|
||||||
|
})}
|
||||||
|
border="1px solid #E5195E"
|
||||||
|
w="100%"
|
||||||
|
color="white"
|
||||||
|
placeholder="Select an option"
|
||||||
|
>
|
||||||
|
{selectField.options.map((option, idx) => (
|
||||||
|
<option
|
||||||
|
key={idx}
|
||||||
|
value={option.toLowerCase().replace(/\s/g, "")}
|
||||||
|
>
|
||||||
|
{option}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</Select>
|
||||||
|
{errors[selectField.name] && (
|
||||||
|
<Text color="red.400" mt={2}>
|
||||||
|
{errors[selectField.name].message}
|
||||||
|
</Text>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
))}
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Box w="100%" maxW="1186px">
|
||||||
|
<FormLabel color="#FFFFFF">
|
||||||
|
Tell us about your project and business challenge.
|
||||||
|
</FormLabel>
|
||||||
|
<Textarea
|
||||||
|
{...register("projectDetails", {
|
||||||
|
required: "Project details are required",
|
||||||
|
})}
|
||||||
|
border="1px solid #E5195E"
|
||||||
|
w="100%"
|
||||||
|
focusBorderColor="#E5195E"
|
||||||
|
backgroundColor="#E5195E0A"
|
||||||
|
color="white"
|
||||||
|
minH="65px"
|
||||||
|
/>
|
||||||
|
{errors.projectDetails && (
|
||||||
|
<Text color="red.400" mt={2}>
|
||||||
|
{errors.projectDetails.message}
|
||||||
|
</Text>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Box
|
||||||
|
display="grid"
|
||||||
|
gridTemplateColumns="repeat(2, 1fr)"
|
||||||
|
gap={5}
|
||||||
|
justifyItems="center"
|
||||||
|
>
|
||||||
|
<Box w="100%" maxW="570px">
|
||||||
|
<FormLabel color="#FFFFFF">
|
||||||
|
When would you like to start
|
||||||
|
</FormLabel>
|
||||||
|
<Select
|
||||||
|
{...register("startDate", {
|
||||||
|
required: "Start date is required",
|
||||||
|
})}
|
||||||
|
border="1px solid #E5195E"
|
||||||
|
w="100%"
|
||||||
|
color="white"
|
||||||
|
placeholder="Select an option"
|
||||||
|
>
|
||||||
|
<option value="option1">Option 1</option>
|
||||||
|
<option value="option2">Option 2</option>
|
||||||
|
<option value="option3">Option 3</option>
|
||||||
|
</Select>
|
||||||
|
{errors.startDate && (
|
||||||
|
<Text color="red.400" mt={2}>
|
||||||
|
{errors.startDate.message}
|
||||||
|
</Text>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
{/* <Box w="100%" maxW="570px">
|
||||||
|
<FormLabel color="#FFFFFF">Attach file</FormLabel>
|
||||||
|
<Input
|
||||||
|
id="fileInput"
|
||||||
|
type="file"
|
||||||
|
{...register("fileInput", {
|
||||||
|
validate: (file) =>
|
||||||
|
file &&
|
||||||
|
["image/png", "image/jpeg", "application/pdf"].includes(
|
||||||
|
file.type
|
||||||
|
) &&
|
||||||
|
file.size <= 5 * 1024 * 1024
|
||||||
|
? true
|
||||||
|
: "Invalid file type or size. Only PNG, JPEG, and PDF files under 5MB are allowed.",
|
||||||
|
})}
|
||||||
|
onChange={handleChange}
|
||||||
|
display="none"
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
onClick={handleClick}
|
||||||
|
leftIcon={<Icon as={FiPaperclip} />}
|
||||||
|
variant="outline"
|
||||||
|
bg="#E5195E12"
|
||||||
|
border="1px solid #E5195E"
|
||||||
|
borderRadius="10px"
|
||||||
|
size="md"
|
||||||
|
_hover={{ bg: "#E5195E12" }}
|
||||||
|
w="100%"
|
||||||
|
color="#fff"
|
||||||
|
>
|
||||||
|
Attach file
|
||||||
|
</Button>
|
||||||
|
{errors.fileInput && (
|
||||||
|
<Text color="red.400" mt={2}>
|
||||||
|
{errors.fileInput.message}
|
||||||
|
</Text>
|
||||||
|
)}
|
||||||
|
</Box> */}
|
||||||
|
<Box w="100%" maxW="570px">
|
||||||
|
<FormLabel color="#FFFFFF">Attach file</FormLabel>
|
||||||
|
<Input
|
||||||
|
id="fileInput"
|
||||||
|
type="file"
|
||||||
|
{...register("fileInput", {
|
||||||
|
validate: (file) =>
|
||||||
|
file &&
|
||||||
|
["image/png", "image/jpeg", "application/pdf"].includes(
|
||||||
|
file.type
|
||||||
|
) &&
|
||||||
|
file.size <= 5 * 1024 * 1024
|
||||||
|
? true
|
||||||
|
: "Invalid file type or size. Only PNG, JPEG, and PDF files under 5MB are allowed.",
|
||||||
|
})}
|
||||||
|
onChange={(e) => {
|
||||||
|
handleChange(e);
|
||||||
|
setFileAdded(true);
|
||||||
|
}}
|
||||||
|
display="none"
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
onClick={handleClick}
|
||||||
|
leftIcon={<Icon as={FiPaperclip} />}
|
||||||
|
variant="outline"
|
||||||
|
bg="#E5195E12"
|
||||||
|
border="1px solid #E5195E"
|
||||||
|
borderRadius="10px"
|
||||||
|
size="md"
|
||||||
|
_hover={{ bg: "#E5195E12" }}
|
||||||
|
w="100%"
|
||||||
|
color="#fff"
|
||||||
|
>
|
||||||
|
Attach file
|
||||||
|
</Button>
|
||||||
|
{errors.fileInput && (
|
||||||
|
<Text color="red.400" mt={2}>
|
||||||
|
{errors.fileInput.message}
|
||||||
|
</Text>
|
||||||
|
)}
|
||||||
|
{fileAdded && !errors.fileInput && (
|
||||||
|
<Text color="green.400" mt={2}>
|
||||||
|
File added successfully!
|
||||||
|
</Text>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Box w="100%" px={"4rem"} color="white" borderRadius="md">
|
||||||
|
<Text mb={4} fontWeight="400" fontSize="18px">
|
||||||
|
What is the budget of your project?
|
||||||
|
</Text>
|
||||||
|
<Slider
|
||||||
|
aria-label="budget-slider"
|
||||||
|
min={0}
|
||||||
|
max={500000}
|
||||||
|
step={100000}
|
||||||
|
value={sliderValue}
|
||||||
|
onChange={(value) => {
|
||||||
|
setSliderValue(value);
|
||||||
|
setValue("budget", value);
|
||||||
|
}}
|
||||||
|
colorScheme="pink"
|
||||||
|
>
|
||||||
|
<SliderTrack bg="gray.700" height="2px">
|
||||||
|
<SliderFilledTrack bg="#E5195E" />
|
||||||
|
</SliderTrack>
|
||||||
|
<SliderThumb boxSize={5} bg="#E5195E"></SliderThumb>
|
||||||
|
</Slider>
|
||||||
|
{errors.budget && (
|
||||||
|
<Text color="red.400" mt={2}>
|
||||||
|
{errors.budget.message}
|
||||||
|
</Text>
|
||||||
|
)}
|
||||||
|
<Flex justify="space-between" mt={4}>
|
||||||
|
{[0, 100000, 200000, 300000, 400000, 500000].map(
|
||||||
|
(val, index) => (
|
||||||
|
<Box
|
||||||
|
key={index}
|
||||||
|
display="flex"
|
||||||
|
flexDirection="column"
|
||||||
|
alignItems="center"
|
||||||
|
>
|
||||||
|
<Box
|
||||||
|
top="11px"
|
||||||
|
as="button"
|
||||||
|
borderRadius="50%"
|
||||||
|
w="8.34px"
|
||||||
|
h="8.34px"
|
||||||
|
px="0"
|
||||||
|
marginTop="-3rem"
|
||||||
|
position="relative"
|
||||||
|
mb={"3rem"}
|
||||||
|
bg={sliderValue >= val ? "#E5195E" : "gray.600"}
|
||||||
|
></Box>
|
||||||
|
<Text color="gray.400" fontSize="sm" mt={"-1.7rem"}>
|
||||||
|
{val / 1000}k
|
||||||
|
</Text>
|
||||||
|
</Box>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
</Flex>
|
||||||
|
</Box>
|
||||||
|
<Box
|
||||||
|
w="100%"
|
||||||
|
maxW="1186px"
|
||||||
|
display="flex"
|
||||||
|
flexDirection="column"
|
||||||
|
gap={4}
|
||||||
|
>
|
||||||
|
<FormLabel color="#FFFFFF">
|
||||||
|
Please type the letters below
|
||||||
|
</FormLabel>
|
||||||
|
<Textarea
|
||||||
|
{...register("captcha", {
|
||||||
|
required: "Captcha input is required",
|
||||||
|
})}
|
||||||
|
border="1px solid #E5195E"
|
||||||
|
w="100%"
|
||||||
|
focusBorderColor="#E5195E"
|
||||||
|
backgroundColor="#E5195E0A"
|
||||||
|
color="white"
|
||||||
|
minH="65px"
|
||||||
|
/>
|
||||||
|
{errors.captcha && (
|
||||||
|
<Text color="red.400" mt={2}>
|
||||||
|
{errors.captcha.message}
|
||||||
|
</Text>
|
||||||
|
)}
|
||||||
|
<Box>
|
||||||
|
<Image src={captcha} w="147px" h="55px" borderRadius="1px" />
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Box px="5rem">
|
||||||
|
<Button
|
||||||
|
bg="#E5195E"
|
||||||
|
w="912px"
|
||||||
|
h="55px"
|
||||||
|
borderRadius="0px"
|
||||||
|
type="submit"
|
||||||
|
>
|
||||||
|
Submit
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
</FormControl>
|
||||||
|
</form>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Form;
|
||||||
85
src/components/Header.jsx
Normal file
85
src/components/Header.jsx
Normal file
@@ -0,0 +1,85 @@
|
|||||||
|
import { Box, Button, Flex, Image, Text, keyframes } from "@chakra-ui/react";
|
||||||
|
import logo from "../assets/images/logo.png";
|
||||||
|
import { NavLink } from "react-router-dom";
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
|
||||||
|
const animationKeyframes = keyframes`
|
||||||
|
0% { opacity: 0; transform: translateY(-10px); }
|
||||||
|
50% { opacity: 1; transform: translateY(0); }
|
||||||
|
100% { opacity: 0; transform: translateY(10px); }
|
||||||
|
`;
|
||||||
|
|
||||||
|
const animation = `${animationKeyframes} 3s infinite`;
|
||||||
|
|
||||||
|
const titles = [
|
||||||
|
"Experience of over 22 years",
|
||||||
|
"Expertise in all Major Technologies",
|
||||||
|
"Award-winning portfolio",
|
||||||
|
"Accurate business Analysis",
|
||||||
|
"Immaculate project planning",
|
||||||
|
"Excellent ane timely execution",
|
||||||
|
"Excellent ane timely execution",
|
||||||
|
"State-of-the art infrastructure",
|
||||||
|
"Integrity and sincerity ",
|
||||||
|
"A large team of developers"
|
||||||
|
];
|
||||||
|
|
||||||
|
const Header = () => {
|
||||||
|
const [currentIndex, setCurrentIndex] = useState(0);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const interval = setInterval(() => {
|
||||||
|
setCurrentIndex((prevIndex) => (prevIndex + 1) % titles.length);
|
||||||
|
}, 5000);
|
||||||
|
|
||||||
|
return () => clearInterval(interval);
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ position: "sticky", top: 0, zIndex: 100 }}>
|
||||||
|
<Box w={"100vw"}>
|
||||||
|
<Flex
|
||||||
|
bgColor="black"
|
||||||
|
borderBottom="1px solid #5C5C5C"
|
||||||
|
px={"2.5rem"}
|
||||||
|
py={1}
|
||||||
|
justifyContent="space-between"
|
||||||
|
alignItems="center"
|
||||||
|
>
|
||||||
|
<Image ml="2rem" src={logo} h="67px" w="66px" alt="WDI" />
|
||||||
|
<Box w={"780px"} h={"66px"} textAlign="center" ml={4}>
|
||||||
|
<Text
|
||||||
|
textColor="#e8155d"
|
||||||
|
className="Robo"
|
||||||
|
fontSize="24px"
|
||||||
|
fontWeight={500}
|
||||||
|
lineHeight="21.09px"
|
||||||
|
animation={animation}
|
||||||
|
textAlign="center"
|
||||||
|
py={6}
|
||||||
|
>
|
||||||
|
{titles[currentIndex]}
|
||||||
|
</Text>
|
||||||
|
</Box>
|
||||||
|
<NavLink>
|
||||||
|
<Button
|
||||||
|
|
||||||
|
bgColor="#e8155d"
|
||||||
|
_hover={{ bg: "#e8155d" }}
|
||||||
|
w={"166px"}
|
||||||
|
h={"50px"}
|
||||||
|
mr="2rem"
|
||||||
|
borderRadius="0px"
|
||||||
|
textColor="white"
|
||||||
|
className="pinkcolor"
|
||||||
|
>
|
||||||
|
Contact Us
|
||||||
|
</Button>
|
||||||
|
</NavLink>
|
||||||
|
</Flex>
|
||||||
|
</Box>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Header;
|
||||||
95
src/components/Hero.jsx
Normal file
95
src/components/Hero.jsx
Normal file
@@ -0,0 +1,95 @@
|
|||||||
|
import {
|
||||||
|
Box,
|
||||||
|
Flex,
|
||||||
|
Heading,
|
||||||
|
HStack,
|
||||||
|
Image,
|
||||||
|
Text,
|
||||||
|
VStack,
|
||||||
|
} from "@chakra-ui/react";
|
||||||
|
import banner from "../assets/images/banner.png";
|
||||||
|
import whiteCircle from "../assets/white.png";
|
||||||
|
import pinkCircle from "../assets/pink.png";
|
||||||
|
|
||||||
|
const circlesData = [
|
||||||
|
{ id: 1, image: whiteCircle },
|
||||||
|
{ id: 2, image: pinkCircle },
|
||||||
|
{ id: 3, image: whiteCircle },
|
||||||
|
{ id: 4, image: pinkCircle },
|
||||||
|
];
|
||||||
|
|
||||||
|
const Hero = () => {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Box bgColor="black" h="70vh">
|
||||||
|
<Flex
|
||||||
|
justifyContent="space-between"
|
||||||
|
spacing={4}
|
||||||
|
alignItems="center"
|
||||||
|
px={"4.4rem"}
|
||||||
|
py={5}
|
||||||
|
>
|
||||||
|
<HStack wrap="wrap" w={"60%"} gap={"2rem"}>
|
||||||
|
<Heading
|
||||||
|
color="#e8155d"
|
||||||
|
lineHeight="40.88px"
|
||||||
|
fontWeight={600}
|
||||||
|
fontSize="40px"
|
||||||
|
>
|
||||||
|
Develop AI-Powered solutions with the leading mobile
|
||||||
|
</Heading>
|
||||||
|
<Text
|
||||||
|
color="#FFFFFF"
|
||||||
|
fontWeight={400}
|
||||||
|
fontSize="22px"
|
||||||
|
lineHeight="23.63px"
|
||||||
|
>
|
||||||
|
Develop AI-Powered solutions with the leading mobile solutions
|
||||||
|
with the leading mobile
|
||||||
|
</Text>
|
||||||
|
<Box w={"100%"} display="flex" flexDirection="row" position="relative" alignItems="center">
|
||||||
|
{circlesData.map((circle, index) => (
|
||||||
|
<Box
|
||||||
|
key={circle.id}
|
||||||
|
position="relative"
|
||||||
|
display="flex"
|
||||||
|
alignItems="center"
|
||||||
|
w={"158.06px"}
|
||||||
|
h="158.06px"
|
||||||
|
right={`${index * 8}px`}
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
src={circle.image}
|
||||||
|
w={"158.06px"}
|
||||||
|
h={"158.06px"}
|
||||||
|
left={"0px"}
|
||||||
|
position="relative"
|
||||||
|
/>
|
||||||
|
<Box
|
||||||
|
textAlign="center"
|
||||||
|
color="#e8155d"
|
||||||
|
position="absolute"
|
||||||
|
left="30px"
|
||||||
|
>
|
||||||
|
<Text fontSize="26px" fontWeight="600">
|
||||||
|
200+
|
||||||
|
</Text>
|
||||||
|
<br />
|
||||||
|
<Text color="white" fontSize="16px" fontWeight="500">
|
||||||
|
Happy Client
|
||||||
|
</Text>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
))}
|
||||||
|
</Box>
|
||||||
|
</HStack>
|
||||||
|
<Box>
|
||||||
|
<Image src={banner} h="300px" w="326px" />
|
||||||
|
</Box>
|
||||||
|
</Flex>
|
||||||
|
</Box>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Hero;
|
||||||
107
src/components/PortFolio.jsx
Normal file
107
src/components/PortFolio.jsx
Normal file
@@ -0,0 +1,107 @@
|
|||||||
|
import { Box, Heading, Image, Text } from "@chakra-ui/react";
|
||||||
|
import React from "react";
|
||||||
|
import qualityAssurance from "../assets/qualityAssurance.png";
|
||||||
|
import costEffective from "../assets/costEffective.png";
|
||||||
|
import Company from "./Companys";
|
||||||
|
|
||||||
|
const PortFolio = () => {
|
||||||
|
const portfolioItems = [
|
||||||
|
{
|
||||||
|
image: costEffective,
|
||||||
|
alt: "Quality Assurance",
|
||||||
|
heading: "Cost-Effective Solutions",
|
||||||
|
text: "Quality Assurance (QA) is a systematic process ensuring that products or services meet specified standards. In software development, QA involves rigorous testing, continuous monitoring, and adherence to defined procedures.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
image: costEffective,
|
||||||
|
alt: "Quality Assurance",
|
||||||
|
heading: "On-Time Delivery",
|
||||||
|
text: "Quality Assurance (QA) is a systematic process ensuring that products or services meet specified standards. In software development, QA involves rigorous testing, continuous monitoring, and adherence to defined procedures.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
image: costEffective,
|
||||||
|
alt: "Quality Assurance",
|
||||||
|
heading: "On-Time Delivery",
|
||||||
|
text: "Quality Assurance (QA) is a systematic process ensuring that products or services meet specified standards. In software development, QA involves rigorous testing, continuous monitoring, and adherence to defined procedures.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
image: costEffective,
|
||||||
|
alt: "Quality Assurance",
|
||||||
|
heading: "Excellent Customer Support",
|
||||||
|
text: "Quality Assurance (QA) is a systematic process ensuring that products or services meet specified standards. In software development, QA involves rigorous testing, continuous monitoring, and adherence to defined procedures.",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Box bgColor="black" display="flex" flexDirection="column" gap={8}>
|
||||||
|
<Heading
|
||||||
|
textAlign="center"
|
||||||
|
fontWeight={600}
|
||||||
|
fontSize="40px"
|
||||||
|
color="#FBFBFB"
|
||||||
|
>
|
||||||
|
PortFolio
|
||||||
|
</Heading>
|
||||||
|
<Company />
|
||||||
|
<Box p="4rem" bgColor="black" display="flex" flexDirection="column">
|
||||||
|
<Box display="flex" flexDirection="column" gap={8} py="14px">
|
||||||
|
|
||||||
|
<Heading fontWeight={600} fontSize="40px" color="#FBFBFB">
|
||||||
|
Inventing App For Superior Apps
|
||||||
|
</Heading>
|
||||||
|
<Text
|
||||||
|
color="#F0F0F0"
|
||||||
|
fontWeight={400}
|
||||||
|
fontSize="23px"
|
||||||
|
lineHeight="37.5px"
|
||||||
|
>
|
||||||
|
Software developers can create tailored solutions that align with
|
||||||
|
the specific needs and goals of the company. Whether it's a
|
||||||
|
customized application, website, or internal software, developers
|
||||||
|
can craft solutions that streamline processes and enhance
|
||||||
|
efficiency.
|
||||||
|
</Text>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Box
|
||||||
|
display="flex"
|
||||||
|
flexDirection="row"
|
||||||
|
justifyContent="space-evenly"
|
||||||
|
gap={2}
|
||||||
|
w="100%"
|
||||||
|
>
|
||||||
|
{portfolioItems.map((item, index) => (
|
||||||
|
<Box
|
||||||
|
key={index}
|
||||||
|
p={8}
|
||||||
|
gap={3}
|
||||||
|
w="25%"
|
||||||
|
h="431.4px"
|
||||||
|
bgColor="#292929"
|
||||||
|
display="flex"
|
||||||
|
flexDirection="column"
|
||||||
|
alignItems="flex-start"
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
src={item.image}
|
||||||
|
h="77.19px"
|
||||||
|
w="77.19px"
|
||||||
|
alt={item.alt}
|
||||||
|
/>
|
||||||
|
<Heading color="#FFFFFF" fontWeight={600} fontSize="21.61px">
|
||||||
|
{item.heading}
|
||||||
|
</Heading>
|
||||||
|
<Text fontWeight={400} fontSize="16.82px" color="#EBEBEB99">
|
||||||
|
{item.text}
|
||||||
|
</Text>
|
||||||
|
</Box>
|
||||||
|
))}
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PortFolio;
|
||||||
158
src/components/ServiceSection.jsx
Normal file
158
src/components/ServiceSection.jsx
Normal file
@@ -0,0 +1,158 @@
|
|||||||
|
import { Box, Button, Heading, Image, Text } from "@chakra-ui/react";
|
||||||
|
import React from "react";
|
||||||
|
import img from "../assets/banner.png";
|
||||||
|
import uparrow from "../assets/uparrow.png";
|
||||||
|
import service from "../assets/service.png";
|
||||||
|
import { NavLink } from "react-router-dom";
|
||||||
|
import CustomButton from "../components/ui/Button";
|
||||||
|
import { commonStyles } from "../styles/commonStyles";
|
||||||
|
|
||||||
|
const servicesData = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
title: "Mobile App Development",
|
||||||
|
description: "Transforming concepts into captivating mobile experiences with our expert app development services.",
|
||||||
|
image: img,
|
||||||
|
buttonText: "Let’s build an App",
|
||||||
|
buttonLink: "/mobile-app",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
title: "Hybrid App Development",
|
||||||
|
description: "Building versatile apps that work across platforms to ensure a seamless user experience.",
|
||||||
|
image: service,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
title: "iOS App Development",
|
||||||
|
description: "Creating high-quality iOS applications tailored to your needs.",
|
||||||
|
image: service,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
title: "Android App Development",
|
||||||
|
description: "Developing responsive Android applications to reach a wider audience.",
|
||||||
|
image: service,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
title: "AI/ML Applications",
|
||||||
|
description: "Leveraging AI and ML to build intelligent and predictive mobile applications.",
|
||||||
|
image: service,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const ServiceSection = () => {
|
||||||
|
return (
|
||||||
|
<Box
|
||||||
|
bgColor="black"
|
||||||
|
p={"4rem"}
|
||||||
|
display="flex"
|
||||||
|
alignItems="center"
|
||||||
|
gap={5}
|
||||||
|
flexDirection="column"
|
||||||
|
>
|
||||||
|
<Heading fontSize="30px" fontWeight={600} color="white" pb={8}>
|
||||||
|
What do we do exactly?
|
||||||
|
</Heading>
|
||||||
|
<Box display="flex" justifyContent="space-between" h="100%" gap={4}>
|
||||||
|
{servicesData.slice(0, 1).map((service) => (
|
||||||
|
<Box
|
||||||
|
key={service.id}
|
||||||
|
display="flex"
|
||||||
|
w="70%"
|
||||||
|
justifyContent="space-between"
|
||||||
|
alignItems="center"
|
||||||
|
bgColor="#0F0F0F"
|
||||||
|
gap={5}
|
||||||
|
{...commonStyles}
|
||||||
|
borderRadius="9px"
|
||||||
|
>
|
||||||
|
<Box
|
||||||
|
w="50%"
|
||||||
|
display="flex"
|
||||||
|
flexDirection="column"
|
||||||
|
h="283px"
|
||||||
|
p={8}
|
||||||
|
gap={4}
|
||||||
|
>
|
||||||
|
<Heading color="#fff" fontWeight={600}>
|
||||||
|
{service.title}
|
||||||
|
</Heading>
|
||||||
|
<Text color="#C4C4C4">{service.description}</Text>
|
||||||
|
{service.buttonText && (
|
||||||
|
<NavLink to={service.buttonLink}>
|
||||||
|
<CustomButton Context={service.buttonText} />
|
||||||
|
</NavLink>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
<Image src={service.image} h="261.15px" w="347.55px" />
|
||||||
|
</Box>
|
||||||
|
))}
|
||||||
|
<Box
|
||||||
|
display="flex"
|
||||||
|
bgColor="#0F0F0F"
|
||||||
|
w="30%"
|
||||||
|
h={"290px"}
|
||||||
|
flexDirection="column"
|
||||||
|
justifyContent="space-between"
|
||||||
|
>
|
||||||
|
<Box p={8}>
|
||||||
|
<Image src={servicesData[1].image} w="48px" h={"37.41px"} />
|
||||||
|
</Box>
|
||||||
|
<Box
|
||||||
|
w="100%"
|
||||||
|
display="flex"
|
||||||
|
flexDirection="column"
|
||||||
|
h="283px"
|
||||||
|
px={8}
|
||||||
|
gap={4}
|
||||||
|
{...commonStyles}
|
||||||
|
borderRadius="9px"
|
||||||
|
>
|
||||||
|
<Heading color="#fff" fontWeight={600}>
|
||||||
|
{servicesData[1].title}
|
||||||
|
</Heading>
|
||||||
|
<Text color="#C4C4C4">{servicesData[1].description}</Text>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
<Box display="flex" justifyContent="space-between" alignItems="center" gap={4}>
|
||||||
|
{servicesData.slice(2).map((service) => (
|
||||||
|
<Box
|
||||||
|
key={service.id}
|
||||||
|
display="flex"
|
||||||
|
bgColor="#0F0F0F"
|
||||||
|
w="33%"
|
||||||
|
h={"290px"}
|
||||||
|
flexDirection="column"
|
||||||
|
justifyContent="space-between"
|
||||||
|
alignItems="flex-start"
|
||||||
|
{...commonStyles}
|
||||||
|
borderRadius="9px"
|
||||||
|
>
|
||||||
|
<Box p={8}>
|
||||||
|
<Image src={service.image} w="48px" h={"37.41px"} />
|
||||||
|
</Box>
|
||||||
|
<Box
|
||||||
|
w="100%"
|
||||||
|
display="flex"
|
||||||
|
flexDirection="column"
|
||||||
|
h="283px"
|
||||||
|
px={8}
|
||||||
|
gap={3}
|
||||||
|
{...commonStyles}
|
||||||
|
>
|
||||||
|
<Heading w="216px" color="#fff" fontWeight={600} fontSize="25px" lineHeight="30px">
|
||||||
|
{service.title}
|
||||||
|
</Heading>
|
||||||
|
<Text fontSize="18px" fontWeight={400} lineHeight="22.87px" color="#C4C4C4">{service.description}</Text>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
))}
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ServiceSection;
|
||||||
187
src/components/Testinomals.jsx
Normal file
187
src/components/Testinomals.jsx
Normal file
@@ -0,0 +1,187 @@
|
|||||||
|
import React, { useEffect, useState } from "react";
|
||||||
|
import { Box, Flex, Text, Image, Heading, HStack } from "@chakra-ui/react";
|
||||||
|
import simpletend from "../assets/simpletend.png";
|
||||||
|
import { FaChevronLeft, FaChevronRight } from "react-icons/fa";
|
||||||
|
import upperQuotes from "../assets/upperquotes.png";
|
||||||
|
import lowerQuotes from "../assets/lowerqoutes.png";
|
||||||
|
|
||||||
|
const testimonials = [
|
||||||
|
{
|
||||||
|
quote:
|
||||||
|
"The team is professional and dedicated to the project; we feel they’re part of our own team.",
|
||||||
|
author: "Saeed Saatchi",
|
||||||
|
role: "CEO & Founder, SimpliFiend",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
quote:
|
||||||
|
"We had an excellent experience working with the team; they were highly skilled and collaborative.",
|
||||||
|
author: "John Doe",
|
||||||
|
role: "Product Manager, Example Corp",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
quote:
|
||||||
|
"Their commitment to the project was evident from the start, and they delivered exceptional results.",
|
||||||
|
author: "Jane Smith",
|
||||||
|
role: "CTO, Tech Innovations",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const Carousel = () => {
|
||||||
|
const arrowStyles = {
|
||||||
|
cursor: "pointer",
|
||||||
|
pos: "absolute",
|
||||||
|
top: "50%",
|
||||||
|
w: "auto",
|
||||||
|
mt: "-22px",
|
||||||
|
p: "16px",
|
||||||
|
color: "white",
|
||||||
|
fontWeight: "bold",
|
||||||
|
fontSize: "18px",
|
||||||
|
transition: "0.6s ease",
|
||||||
|
borderRadius: "0 3px 3px 0",
|
||||||
|
userSelect: "none",
|
||||||
|
// _hover: {
|
||||||
|
// opacity: 0.8,
|
||||||
|
// bg: "black",
|
||||||
|
// },
|
||||||
|
};
|
||||||
|
|
||||||
|
const [currentSlide, setCurrentSlide] = useState(0);
|
||||||
|
const testimonialsCount = testimonials.length;
|
||||||
|
|
||||||
|
const prevSlide = () => {
|
||||||
|
setCurrentSlide((s) => (s === 0 ? testimonialsCount - 1 : s - 1));
|
||||||
|
};
|
||||||
|
|
||||||
|
const nextSlide = () => {
|
||||||
|
setCurrentSlide((s) => (s === testimonialsCount - 1 ? 0 : s + 1));
|
||||||
|
};
|
||||||
|
|
||||||
|
const setSlide = (slide) => {
|
||||||
|
setCurrentSlide(slide);
|
||||||
|
};
|
||||||
|
|
||||||
|
const carouselStyle = {
|
||||||
|
transition: "all .5s",
|
||||||
|
ml: `-${currentSlide * 100}%`,
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const interval = setInterval(nextSlide, 3000); // Autoplay left to right
|
||||||
|
return () => clearInterval(interval); // Clear interval on component unmount
|
||||||
|
}, []); // Empty dependency array ensures effect runs once on mount
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box bgColor="black">
|
||||||
|
<Heading fontWeight={600} fontSize="40px" textAlign="center" color="#ffff">Testimonial</Heading>
|
||||||
|
<Flex
|
||||||
|
w="full"
|
||||||
|
bg="black"
|
||||||
|
_dark={{
|
||||||
|
bg: "#3e3e3e",
|
||||||
|
}}
|
||||||
|
py={"6rem"}
|
||||||
|
px={"3rem"}
|
||||||
|
alignItems="center"
|
||||||
|
justifyContent="center"
|
||||||
|
>
|
||||||
|
<Flex w="full" pos="relative">
|
||||||
|
<Flex h="100%" w="100%" {...carouselStyle}>
|
||||||
|
{testimonials.map((testimonial, index) => (
|
||||||
|
<Box
|
||||||
|
px="3rem"
|
||||||
|
key={`slide-${index}`}
|
||||||
|
flex="none"
|
||||||
|
boxSize="full"
|
||||||
|
shadow="md"
|
||||||
|
>
|
||||||
|
<Box
|
||||||
|
position="relative"
|
||||||
|
display="flex"
|
||||||
|
flexDirection="column"
|
||||||
|
alignItems="center"
|
||||||
|
textAlign="center"
|
||||||
|
>
|
||||||
|
<Box
|
||||||
|
display="flex"
|
||||||
|
flexDirection="column"
|
||||||
|
bgColor="#6D6D6D40"
|
||||||
|
p="4rem"
|
||||||
|
w="100%"
|
||||||
|
h="100%"
|
||||||
|
gap="2rem"
|
||||||
|
borderRadius="10px"
|
||||||
|
>
|
||||||
|
<Heading
|
||||||
|
mt="1rem"
|
||||||
|
fontSize="20px"
|
||||||
|
lineHeight="30px"
|
||||||
|
fontWeight={600}
|
||||||
|
color="#FFFFFF"
|
||||||
|
>
|
||||||
|
“{testimonial.quote}”
|
||||||
|
</Heading>
|
||||||
|
<Text
|
||||||
|
color="#E8155D"
|
||||||
|
fontWeight={500}
|
||||||
|
fontSize="18px"
|
||||||
|
lineHeight="27px"
|
||||||
|
>
|
||||||
|
{testimonial.role}
|
||||||
|
</Text>
|
||||||
|
<Text
|
||||||
|
color="#E8155D"
|
||||||
|
fontWeight={500}
|
||||||
|
fontSize="18px"
|
||||||
|
lineHeight="27px"
|
||||||
|
>
|
||||||
|
{testimonial.author}
|
||||||
|
</Text>
|
||||||
|
</Box>
|
||||||
|
<Box
|
||||||
|
p={2}
|
||||||
|
bg="black"
|
||||||
|
position="absolute"
|
||||||
|
w="149px"
|
||||||
|
h="149px"
|
||||||
|
top="-80px"
|
||||||
|
left="50%"
|
||||||
|
transform="translateX(-50%)"
|
||||||
|
borderRadius="50%"
|
||||||
|
>
|
||||||
|
<Image src={simpletend} w="129px" h="129px" />
|
||||||
|
</Box>
|
||||||
|
<Image
|
||||||
|
src={lowerQuotes}
|
||||||
|
w="99.15px"
|
||||||
|
h="88.39px"
|
||||||
|
position="absolute"
|
||||||
|
bottom="-37"
|
||||||
|
right="10px"
|
||||||
|
/>
|
||||||
|
<Image
|
||||||
|
src={upperQuotes}
|
||||||
|
w="99.15px"
|
||||||
|
h="88.39px"
|
||||||
|
position="absolute"
|
||||||
|
top="-37"
|
||||||
|
left="40px"
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
))}
|
||||||
|
</Flex>
|
||||||
|
<Text {...arrowStyles} left="0" onClick={prevSlide}>
|
||||||
|
<FaChevronLeft />
|
||||||
|
</Text>
|
||||||
|
<Text {...arrowStyles} right="0" onClick={nextSlide}>
|
||||||
|
<FaChevronRight />
|
||||||
|
</Text>
|
||||||
|
|
||||||
|
</Flex>
|
||||||
|
</Flex>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Carousel;
|
||||||
256
src/components/WhatWeTeach.jsx
Normal file
256
src/components/WhatWeTeach.jsx
Normal file
@@ -0,0 +1,256 @@
|
|||||||
|
import { Box, Flex, Heading, Image, Text } from "@chakra-ui/react";
|
||||||
|
import React from "react";
|
||||||
|
import CompactTable from "../components/ui/compactTabs";
|
||||||
|
import htmlpng from "../assets/html.png";
|
||||||
|
import reactjs from "../assets/react.png";
|
||||||
|
import codeIgniter from "../assets/codeIgniter.png";
|
||||||
|
import java from "../assets/java.png";
|
||||||
|
import anugular from "../assets/angular.png";
|
||||||
|
import vue from "../assets/vue.png";
|
||||||
|
const WhatWeTeach = () => {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Box
|
||||||
|
display="flex"
|
||||||
|
alignItems="center"
|
||||||
|
w="100%"
|
||||||
|
flexDirection="column"
|
||||||
|
bgColor="black"
|
||||||
|
p={"4rem"}
|
||||||
|
>
|
||||||
|
<Heading color="#FBFBFB" fontSize={"40px"} fontWeight={600}>
|
||||||
|
What tech we use
|
||||||
|
</Heading>
|
||||||
|
<CompactTable />
|
||||||
|
<Box borderBottom="1px solid #E0E0E0" w={"100%"}/>
|
||||||
|
<Heading color="#ACACAC" fontWeight={500} fontSize="18px" mt="1rem">
|
||||||
|
Front-End
|
||||||
|
</Heading>
|
||||||
|
<Box display="flex" alignItems="center" flexDirection="column">
|
||||||
|
<Box
|
||||||
|
display={"flex"}
|
||||||
|
flexDirection="row"
|
||||||
|
alignItems="center"
|
||||||
|
justifyContent="space-between"
|
||||||
|
gap={4}
|
||||||
|
py="2rem"
|
||||||
|
>
|
||||||
|
<Box
|
||||||
|
w="288px"
|
||||||
|
h={"99px"}
|
||||||
|
p={"1.4rem"}
|
||||||
|
display={"flex"}
|
||||||
|
bgColor="#0F0F0F"
|
||||||
|
flexDirection="row"
|
||||||
|
justifyContent="space-between"
|
||||||
|
alignItems="center"
|
||||||
|
>
|
||||||
|
<Image src={htmlpng} w="45.31px" h="50px" />
|
||||||
|
<Text fontSize="16px" fontWeight={400} color="#FFFFFF">
|
||||||
|
HTML
|
||||||
|
</Text>
|
||||||
|
</Box>
|
||||||
|
<Box
|
||||||
|
w="288px"
|
||||||
|
h={"99px"}
|
||||||
|
p={"1.4rem"}
|
||||||
|
display={"flex"}
|
||||||
|
bgColor="#0F0F0F"
|
||||||
|
flexDirection="row"
|
||||||
|
justifyContent="space-between"
|
||||||
|
alignItems="center"
|
||||||
|
>
|
||||||
|
<Image src={reactjs} w="45.31px" h="50px" />
|
||||||
|
<Text fontSize="16px" fontWeight={400} color="#FFFFFF">
|
||||||
|
React
|
||||||
|
</Text>
|
||||||
|
</Box>
|
||||||
|
<Box
|
||||||
|
w="288px"
|
||||||
|
h={"99px"}
|
||||||
|
p={"1.4rem"}
|
||||||
|
display={"flex"}
|
||||||
|
bgColor="#0F0F0F"
|
||||||
|
flexDirection="row"
|
||||||
|
justifyContent="space-between"
|
||||||
|
alignItems="center"
|
||||||
|
>
|
||||||
|
<Image src={codeIgniter} w="45.31px" h="50px" />
|
||||||
|
<Text fontSize="16px" fontWeight={400} color="#FFFFFF">
|
||||||
|
Code Igniter
|
||||||
|
</Text>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
<Box
|
||||||
|
display={"flex"}
|
||||||
|
flexDirection="row"
|
||||||
|
alignItems="center"
|
||||||
|
justifyContent="space-between"
|
||||||
|
gap={4}
|
||||||
|
>
|
||||||
|
<Box
|
||||||
|
w="288px"
|
||||||
|
h={"99px"}
|
||||||
|
p={"1.4rem"}
|
||||||
|
display={"flex"}
|
||||||
|
bgColor="#0F0F0F"
|
||||||
|
flexDirection="row"
|
||||||
|
justifyContent="space-between"
|
||||||
|
alignItems="center"
|
||||||
|
>
|
||||||
|
<Image src={java} w="45.31px" h="50px" />
|
||||||
|
<Text fontSize="16px" fontWeight={400} color="#FFFFFF">
|
||||||
|
Java
|
||||||
|
</Text>
|
||||||
|
</Box>
|
||||||
|
<Box
|
||||||
|
w="288px"
|
||||||
|
h={"99px"}
|
||||||
|
p={"1.4rem"}
|
||||||
|
display={"flex"}
|
||||||
|
bgColor="#0F0F0F"
|
||||||
|
flexDirection="row"
|
||||||
|
justifyContent="space-between"
|
||||||
|
alignItems="center"
|
||||||
|
>
|
||||||
|
<Image src={anugular} w="45.31px" h="50px" />
|
||||||
|
<Text fontSize="16px" fontWeight={400} color="#FFFFFF">
|
||||||
|
Anugular
|
||||||
|
</Text>
|
||||||
|
</Box>
|
||||||
|
<Box
|
||||||
|
w="288px"
|
||||||
|
h={"99px"}
|
||||||
|
p={"1.4rem"}
|
||||||
|
display={"flex"}
|
||||||
|
bgColor="#0F0F0F"
|
||||||
|
flexDirection="row"
|
||||||
|
justifyContent="space-between"
|
||||||
|
alignItems="center"
|
||||||
|
>
|
||||||
|
<Image src={vue} w="45.31px" h="50px" />
|
||||||
|
<Text fontSize="16px" fontWeight={400} color="#FFFFFF">
|
||||||
|
vue
|
||||||
|
</Text>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Heading color="#ACACAC" fontWeight={500} fontSize="18px" mt="1rem">
|
||||||
|
Back-End
|
||||||
|
</Heading>
|
||||||
|
<Box display="flex" alignItems="center" flexDirection="column">
|
||||||
|
<Box
|
||||||
|
display={"flex"}
|
||||||
|
flexDirection="row"
|
||||||
|
alignItems="center"
|
||||||
|
justifyContent="space-between"
|
||||||
|
gap={4}
|
||||||
|
py="2rem"
|
||||||
|
>
|
||||||
|
<Box
|
||||||
|
w="288px"
|
||||||
|
h={"99px"}
|
||||||
|
p={"1.4rem"}
|
||||||
|
display={"flex"}
|
||||||
|
bgColor="#0F0F0F"
|
||||||
|
flexDirection="row"
|
||||||
|
justifyContent="space-between"
|
||||||
|
alignItems="center"
|
||||||
|
>
|
||||||
|
<Image src={htmlpng} w="45.31px" h="50px" />
|
||||||
|
<Text fontSize="16px" fontWeight={400} color="#FFFFFF">
|
||||||
|
HTML
|
||||||
|
</Text>
|
||||||
|
</Box>
|
||||||
|
<Box
|
||||||
|
w="288px"
|
||||||
|
h={"99px"}
|
||||||
|
p={"1.4rem"}
|
||||||
|
display={"flex"}
|
||||||
|
bgColor="#0F0F0F"
|
||||||
|
flexDirection="row"
|
||||||
|
justifyContent="space-between"
|
||||||
|
alignItems="center"
|
||||||
|
>
|
||||||
|
<Image src={reactjs} w="45.31px" h="50px" />
|
||||||
|
<Text fontSize="16px" fontWeight={400} color="#FFFFFF">
|
||||||
|
React
|
||||||
|
</Text>
|
||||||
|
</Box>
|
||||||
|
<Box
|
||||||
|
w="288px"
|
||||||
|
h={"99px"}
|
||||||
|
p={"1.4rem"}
|
||||||
|
display={"flex"}
|
||||||
|
bgColor="#0F0F0F"
|
||||||
|
flexDirection="row"
|
||||||
|
justifyContent="space-between"
|
||||||
|
alignItems="center"
|
||||||
|
>
|
||||||
|
<Image src={codeIgniter} w="45.31px" h="50px" />
|
||||||
|
<Text fontSize="16px" fontWeight={400} color="#FFFFFF">
|
||||||
|
Code Igniter
|
||||||
|
</Text>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
<Box
|
||||||
|
display={"flex"}
|
||||||
|
flexDirection="row"
|
||||||
|
alignItems="center"
|
||||||
|
justifyContent="space-between"
|
||||||
|
gap={4}
|
||||||
|
>
|
||||||
|
<Box
|
||||||
|
w="288px"
|
||||||
|
h={"99px"}
|
||||||
|
p={"1.4rem"}
|
||||||
|
display={"flex"}
|
||||||
|
bgColor="#0F0F0F"
|
||||||
|
flexDirection="row"
|
||||||
|
justifyContent="space-between"
|
||||||
|
alignItems="center"
|
||||||
|
>
|
||||||
|
<Image src={java} w="45.31px" h="50px" />
|
||||||
|
<Text fontSize="16px" fontWeight={400} color="#FFFFFF">
|
||||||
|
Java
|
||||||
|
</Text>
|
||||||
|
</Box>
|
||||||
|
<Box
|
||||||
|
w="288px"
|
||||||
|
h={"99px"}
|
||||||
|
p={"1.4rem"}
|
||||||
|
display={"flex"}
|
||||||
|
bgColor="#0F0F0F"
|
||||||
|
flexDirection="row"
|
||||||
|
justifyContent="space-between"
|
||||||
|
alignItems="center"
|
||||||
|
>
|
||||||
|
<Image src={anugular} w="45.31px" h="50px" />
|
||||||
|
<Text fontSize="16px" fontWeight={400} color="#FFFFFF">
|
||||||
|
Anugular
|
||||||
|
</Text>
|
||||||
|
</Box>
|
||||||
|
<Box
|
||||||
|
w="288px"
|
||||||
|
h={"99px"}
|
||||||
|
p={"1.4rem"}
|
||||||
|
display={"flex"}
|
||||||
|
bgColor="#0F0F0F"
|
||||||
|
flexDirection="row"
|
||||||
|
justifyContent="space-between"
|
||||||
|
alignItems="center"
|
||||||
|
>
|
||||||
|
<Image src={vue} w="45.31px" h="50px" />
|
||||||
|
<Text fontSize="16px" fontWeight={400} color="#FFFFFF">
|
||||||
|
vue
|
||||||
|
</Text>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default WhatWeTeach;
|
||||||
138
src/components/ui/Button.jsx
Normal file
138
src/components/ui/Button.jsx
Normal file
@@ -0,0 +1,138 @@
|
|||||||
|
import React from "react";
|
||||||
|
import {
|
||||||
|
Button,
|
||||||
|
Link,
|
||||||
|
Box,
|
||||||
|
Text,
|
||||||
|
Flex,
|
||||||
|
useMediaQuery,
|
||||||
|
Image,
|
||||||
|
} from "@chakra-ui/react";
|
||||||
|
|
||||||
|
const LetsTalkButton = ({ isLink = false, children }) => {
|
||||||
|
const [isLargerThan767] = useMediaQuery("(min-width: 767px)");
|
||||||
|
|
||||||
|
const commonStyles = {
|
||||||
|
bg: "#e5195e",
|
||||||
|
px: "56px",
|
||||||
|
py: "10px",
|
||||||
|
color: "white",
|
||||||
|
fontFamily: "Manrope",
|
||||||
|
fontWeight: "600",
|
||||||
|
textAlign: "center",
|
||||||
|
lineHeight: "27.24px",
|
||||||
|
fontSize: isLargerThan767 ? "16px" : "18px",
|
||||||
|
transition: "all 0.5s",
|
||||||
|
position: "relative",
|
||||||
|
display: "inline-flex",
|
||||||
|
textDecoration: "none",
|
||||||
|
_hover: {
|
||||||
|
_before: { width: "7px" },
|
||||||
|
"& span.one": { height: "7px" },
|
||||||
|
"& span.two": { height: "100%" },
|
||||||
|
_after: { width: "100%" },
|
||||||
|
},
|
||||||
|
_before: {
|
||||||
|
content: "''",
|
||||||
|
position: "absolute",
|
||||||
|
top: "7px",
|
||||||
|
right: "-7px",
|
||||||
|
borderTop: "1px solid #e5195e",
|
||||||
|
width: 0,
|
||||||
|
height: "100%",
|
||||||
|
transition: "all 0.5s",
|
||||||
|
},
|
||||||
|
_after: {
|
||||||
|
content: "''",
|
||||||
|
position: "absolute",
|
||||||
|
bottom: "-7px",
|
||||||
|
left: "7px",
|
||||||
|
borderTop: "1px solid #e5195e",
|
||||||
|
width: 0,
|
||||||
|
transition: "all 0.5s",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{isLink ? (
|
||||||
|
<Link {...commonStyles}>
|
||||||
|
{children}
|
||||||
|
<Box
|
||||||
|
as="span"
|
||||||
|
className="one"
|
||||||
|
position="absolute"
|
||||||
|
width="1px"
|
||||||
|
height="0"
|
||||||
|
bottom="-7px"
|
||||||
|
bg="#e5195e"
|
||||||
|
left="7px"
|
||||||
|
transition="all 0.5s"
|
||||||
|
></Box>
|
||||||
|
<Box
|
||||||
|
as="span"
|
||||||
|
className="two"
|
||||||
|
position="absolute"
|
||||||
|
width="1px"
|
||||||
|
height="0"
|
||||||
|
bottom="-7px"
|
||||||
|
bg="#e5195e"
|
||||||
|
right="-7px"
|
||||||
|
transition="all 0.5s"
|
||||||
|
></Box>
|
||||||
|
</Link>
|
||||||
|
) : (
|
||||||
|
<Button {...commonStyles}>
|
||||||
|
{children}
|
||||||
|
<Box
|
||||||
|
as="span"
|
||||||
|
className="one"
|
||||||
|
position="absolute"
|
||||||
|
width="1px"
|
||||||
|
height="0"
|
||||||
|
bottom="-7px"
|
||||||
|
bg="#e5195e"
|
||||||
|
left="7px"
|
||||||
|
transition="all 0.5s"
|
||||||
|
></Box>
|
||||||
|
<Box
|
||||||
|
as="span"
|
||||||
|
className="two"
|
||||||
|
position="absolute"
|
||||||
|
width="1px"
|
||||||
|
height="0"
|
||||||
|
bottom="-7px"
|
||||||
|
bg="#e5195e"
|
||||||
|
right="-7px"
|
||||||
|
transition="all 0.5s"
|
||||||
|
></Box>
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const SmallButtonWithArrow = ({ children }) => (
|
||||||
|
<Flex
|
||||||
|
as="span"
|
||||||
|
align="center"
|
||||||
|
fontFamily="Manrope"
|
||||||
|
fontSize="16px"
|
||||||
|
fontWeight="500"
|
||||||
|
className="small_bta"
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
<Box as="img" className="arrow_up" transition="0.5s" ml="3px" />
|
||||||
|
</Flex>
|
||||||
|
);
|
||||||
|
|
||||||
|
const App = ({ Context, imgs }) => {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<LetsTalkButton isLink>{Context}</LetsTalkButton>
|
||||||
|
<SmallButtonWithArrow>{imgs}</SmallButtonWithArrow>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default App;
|
||||||
53
src/components/ui/Tabs.jsx
Normal file
53
src/components/ui/Tabs.jsx
Normal file
@@ -0,0 +1,53 @@
|
|||||||
|
import React, { useState } from "react";
|
||||||
|
import { Flex, Image } from "@chakra-ui/react";
|
||||||
|
import gsf from "../../assets/gsf.png";
|
||||||
|
import home from "../../assets/home.png";
|
||||||
|
import tablogo from "../../assets/tablogo.png";
|
||||||
|
import prosperty from "../../assets/prosperty.png";
|
||||||
|
import heart from "../../assets/heart.png";
|
||||||
|
|
||||||
|
const TabsComponent = () => {
|
||||||
|
const [activeTab, setActiveTab] = useState({ id: "tab1", label: "GDF" });
|
||||||
|
|
||||||
|
const tabs = [
|
||||||
|
{ id: "tab1", label: "GDF", icon: gsf },
|
||||||
|
{ id: "tab2", label: "Home", icon: home },
|
||||||
|
{ id: "tab3", label: "Sync", icon: tablogo },
|
||||||
|
{ id: "tab4", label: "Prosperity", icon: prosperty },
|
||||||
|
{ id: "tab5", label: "View", icon: heart },
|
||||||
|
];
|
||||||
|
|
||||||
|
const handleTabClick = (tab) => {
|
||||||
|
setActiveTab(tab);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Flex justifyContent="center" alignItems="center" p={"2rem"} w="100%">
|
||||||
|
{tabs.map((tab) => (
|
||||||
|
<Flex
|
||||||
|
key={tab.id}
|
||||||
|
alignItems="center"
|
||||||
|
justifyContent="center"
|
||||||
|
color={activeTab.id === tab.id ? "white" : "gray.400"}
|
||||||
|
px={"4rem"}
|
||||||
|
py={2}
|
||||||
|
cursor="pointer"
|
||||||
|
borderBottom={activeTab.id === tab.id ? "2px solid #E8155D" : "none"}
|
||||||
|
onClick={() => handleTabClick(tab)}
|
||||||
|
transition="color 0.3s, border-bottom 0.3s"
|
||||||
|
w="80%"
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
h="22px"
|
||||||
|
src={tab.icon}
|
||||||
|
alt={tab.label}
|
||||||
|
ml={2}
|
||||||
|
filter={activeTab.id === tab.id ? "none" : "grayscale(100%)"}
|
||||||
|
/>
|
||||||
|
</Flex>
|
||||||
|
))}
|
||||||
|
</Flex>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default TabsComponent;
|
||||||
292
src/components/ui/Test.jsx
Normal file
292
src/components/ui/Test.jsx
Normal file
@@ -0,0 +1,292 @@
|
|||||||
|
import {
|
||||||
|
Box,
|
||||||
|
Button,
|
||||||
|
Flex,
|
||||||
|
FormControl,
|
||||||
|
FormLabel,
|
||||||
|
Heading,
|
||||||
|
Icon,
|
||||||
|
Image,
|
||||||
|
Input,
|
||||||
|
Select,
|
||||||
|
Slider,
|
||||||
|
SliderFilledTrack,
|
||||||
|
SliderThumb,
|
||||||
|
SliderTrack,
|
||||||
|
Text,
|
||||||
|
Textarea,
|
||||||
|
} from "@chakra-ui/react";
|
||||||
|
import { useRef, useState } from "react";
|
||||||
|
import { FiPaperclip } from "react-icons/fi";
|
||||||
|
import captcha from "../assets/captcha.png";
|
||||||
|
const Form = () => {
|
||||||
|
const inputRef = useRef(null);
|
||||||
|
|
||||||
|
const [sliderValue, setSliderValue] = useState(0);
|
||||||
|
|
||||||
|
const handleSliderChange = (value) => {
|
||||||
|
setSliderValue(value);
|
||||||
|
};
|
||||||
|
const handleClick = () => {
|
||||||
|
inputRef.current.click();
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleChange = (event) => {
|
||||||
|
const file = event.target.files[0];
|
||||||
|
if (file) {
|
||||||
|
console.log(file.name);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Box bgColor="black" p={"4rem"} w="100vw">
|
||||||
|
<Box
|
||||||
|
display="flex"
|
||||||
|
bgColor="#0F0F0F"
|
||||||
|
flexDirection="column"
|
||||||
|
alignItems="center"
|
||||||
|
w="100%"
|
||||||
|
px={"4rem"}
|
||||||
|
py={"2rem"}
|
||||||
|
>
|
||||||
|
<Heading
|
||||||
|
fontWeight={600}
|
||||||
|
lineHeight="57.4px"
|
||||||
|
fontSize="40px"
|
||||||
|
textAlign="center"
|
||||||
|
color="#FBFBFB"
|
||||||
|
w={"50%"}
|
||||||
|
>
|
||||||
|
Lets Collaborate to Shape your Vision into Reality{" "}
|
||||||
|
</Heading>
|
||||||
|
<Box display="flex" w="100%">
|
||||||
|
<FormControl display="flex" gap={4} flexDirection="column">
|
||||||
|
<Box
|
||||||
|
display="grid"
|
||||||
|
gridTemplateColumns="repeat(2, 1fr)"
|
||||||
|
gap={2}
|
||||||
|
justifyItems="center"
|
||||||
|
>
|
||||||
|
<Box w="100%" maxW="570px">
|
||||||
|
<FormLabel color="#FFFFFF">Enter your name</FormLabel>
|
||||||
|
<Input
|
||||||
|
border="1px solid #E5195E"
|
||||||
|
w="100%"
|
||||||
|
focusBorderColor="#E5195E"
|
||||||
|
type="text"
|
||||||
|
backgroundColor="#E5195E0A"
|
||||||
|
color="white"
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
<Box w="100%" maxW="570px">
|
||||||
|
<FormLabel color="#FFFFFF">
|
||||||
|
Enter your email address
|
||||||
|
</FormLabel>
|
||||||
|
<Input
|
||||||
|
border="1px solid #E5195E"
|
||||||
|
w="100%"
|
||||||
|
focusBorderColor="#E5195E0A"
|
||||||
|
type="text"
|
||||||
|
backgroundColor="#E5195E0A"
|
||||||
|
color="white"
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
<Box w="100%" maxW="570px">
|
||||||
|
<FormLabel color="#FFFFFF">Select your country</FormLabel>
|
||||||
|
<Select border="1px solid #E5195E" w="100%" color="#FFFFFF">
|
||||||
|
<option value="option1">Option 1</option>
|
||||||
|
<option value="option2">Option 2</option>
|
||||||
|
<option value="option3">Option 3</option>
|
||||||
|
</Select>
|
||||||
|
</Box>
|
||||||
|
<Box w="100%" maxW="570px">
|
||||||
|
<FormLabel color="#FFFFFF">
|
||||||
|
Enter your contact number
|
||||||
|
</FormLabel>
|
||||||
|
<Input
|
||||||
|
border="1px solid #E5195E"
|
||||||
|
w="100%"
|
||||||
|
focusBorderColor="#E5195E"
|
||||||
|
type="text"
|
||||||
|
backgroundColor="#E5195E0A"
|
||||||
|
color="white"
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
<Box w="100%" maxW="570px">
|
||||||
|
<FormLabel color="#FFFFFF">Select your services</FormLabel>
|
||||||
|
<Select border="1px solid #E5195E" w="100%" color="white">
|
||||||
|
<option value="option1">Option 1</option>
|
||||||
|
<option value="option2">Option 2</option>
|
||||||
|
<option value="option3">Option 3</option>
|
||||||
|
</Select>
|
||||||
|
</Box>
|
||||||
|
<Box w="100%" maxW="570px">
|
||||||
|
<FormLabel color="#FFFFFF">
|
||||||
|
Where did you hear about us? *
|
||||||
|
</FormLabel>
|
||||||
|
<Select border="1px solid #E5195E" w="100%" color="white">
|
||||||
|
<option value="option1">Option 1</option>
|
||||||
|
<option value="option2">Option 2</option>
|
||||||
|
<option value="option3">Option 3</option>
|
||||||
|
</Select>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Box w="100%" maxW="1186px">
|
||||||
|
<FormLabel color="#FFFFFF">
|
||||||
|
Tell us about your project and business challenge.
|
||||||
|
</FormLabel>
|
||||||
|
<Textarea
|
||||||
|
border="1px solid #E5195E"
|
||||||
|
w="100%"
|
||||||
|
focusBorderColor="#E5195E"
|
||||||
|
backgroundColor="#E5195E0A"
|
||||||
|
color="white"
|
||||||
|
minH="65px"
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Box
|
||||||
|
display="grid"
|
||||||
|
gridTemplateColumns="repeat(2, 1fr)"
|
||||||
|
gap={5}
|
||||||
|
justifyItems="center"
|
||||||
|
>
|
||||||
|
<Box w="100%" maxW="570px">
|
||||||
|
<FormLabel color="#FFFFFF">
|
||||||
|
When would you like to start
|
||||||
|
</FormLabel>
|
||||||
|
<Select border="1px solid #E5195E" w="100%" color="white">
|
||||||
|
<option value="option1">Option 1</option>
|
||||||
|
<option value="option2">Option 2</option>
|
||||||
|
<option value="option3">Option 3</option>
|
||||||
|
</Select>
|
||||||
|
</Box>
|
||||||
|
<Box w="100%" maxW="570px">
|
||||||
|
<FormLabel color="#FFFFFF">Attach file</FormLabel>
|
||||||
|
<Input
|
||||||
|
type="file"
|
||||||
|
ref={inputRef}
|
||||||
|
onChange={handleChange}
|
||||||
|
display="none"
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
onClick={handleClick}
|
||||||
|
leftIcon={<Icon as={FiPaperclip} />}
|
||||||
|
variant="outline"
|
||||||
|
bgColor="#E5195E12"
|
||||||
|
border="1px solid #E5195E"
|
||||||
|
borderRadius="10px"
|
||||||
|
size="md"
|
||||||
|
_hover={{ bg: "#E5195E12" }}
|
||||||
|
w="100%"
|
||||||
|
color="#fff"
|
||||||
|
>
|
||||||
|
Attach file
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Box w="100%" px={"4rem"} color="white" borderRadius="md">
|
||||||
|
<Text mb={4} fontWeight="400" fontSize="18px">
|
||||||
|
What is the budget of your project?
|
||||||
|
</Text>
|
||||||
|
<Slider
|
||||||
|
aria-label="budget-slider"
|
||||||
|
defaultValue={0}
|
||||||
|
min={0}
|
||||||
|
max={500000}
|
||||||
|
step={110000}
|
||||||
|
value={sliderValue}
|
||||||
|
onChange={handleSliderChange}
|
||||||
|
colorScheme="pink"
|
||||||
|
>
|
||||||
|
<SliderTrack bg="gray.700" height="2px">
|
||||||
|
<SliderFilledTrack bg="#E5195E" />
|
||||||
|
</SliderTrack>
|
||||||
|
<SliderThumb boxSize={5} bg="#E5195E"></SliderThumb>
|
||||||
|
</Slider>
|
||||||
|
<Flex justify="space-between">
|
||||||
|
{[0, 100000, 200000, 300000, 500000].map((val, index) => (
|
||||||
|
<Box
|
||||||
|
display="flex"
|
||||||
|
key={index}
|
||||||
|
alignItems="center"
|
||||||
|
textAlign="center"
|
||||||
|
>
|
||||||
|
<Box
|
||||||
|
top="11px"
|
||||||
|
as="button"
|
||||||
|
borderRadius="50%"
|
||||||
|
w="8.34px"
|
||||||
|
h="8.34px"
|
||||||
|
px="0"
|
||||||
|
marginTop="-1.9rem"
|
||||||
|
position="relative"
|
||||||
|
mb={"3rem"}
|
||||||
|
bgColor={sliderValue >= val ? "#E5195E" : "gray.600"}
|
||||||
|
>
|
||||||
|
<Box
|
||||||
|
top="-2.8px"
|
||||||
|
right="7px"
|
||||||
|
as="button"
|
||||||
|
borderRadius="50%"
|
||||||
|
w={sliderValue >= val ? "22.94px" : null}
|
||||||
|
h={sliderValue >= val ? "22.94px" : null}
|
||||||
|
px="0"
|
||||||
|
marginTop="-1rem"
|
||||||
|
position="relative"
|
||||||
|
mb={"3rem"}
|
||||||
|
bgColor={
|
||||||
|
sliderValue >= val ? "#E5195E42" : "gray.600"
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
<Text color="gray.400" fontSize="sm">
|
||||||
|
{val / 1000}k
|
||||||
|
</Text>
|
||||||
|
</Box>
|
||||||
|
))}
|
||||||
|
</Flex>
|
||||||
|
</Box>
|
||||||
|
<Box
|
||||||
|
w="100%"
|
||||||
|
maxW="1186px"
|
||||||
|
display="flex"
|
||||||
|
flexDirection="column"
|
||||||
|
gap={4}
|
||||||
|
>
|
||||||
|
<FormLabel color="#FFFFFF">
|
||||||
|
Please type the letters below
|
||||||
|
</FormLabel>
|
||||||
|
<Textarea
|
||||||
|
border="1px solid #E5195E"
|
||||||
|
w="100%"
|
||||||
|
focusBorderColor="#E5195E"
|
||||||
|
backgroundColor="#E5195E0A"
|
||||||
|
color="white"
|
||||||
|
minH="65px"
|
||||||
|
/>
|
||||||
|
<Box>
|
||||||
|
<Image
|
||||||
|
src={captcha}
|
||||||
|
w={"147px"}
|
||||||
|
h={"55px"}
|
||||||
|
borderRadius="1px"
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
<Box px={"5rem"}>
|
||||||
|
<Button bgColor="#E5195E" w="912px" h="55px" borderRadius="0px">
|
||||||
|
Submit
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
</FormControl>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Form;
|
||||||
128
src/components/ui/TimeLines.jsx
Normal file
128
src/components/ui/TimeLines.jsx
Normal file
@@ -0,0 +1,128 @@
|
|||||||
|
import {
|
||||||
|
Box,
|
||||||
|
Circle,
|
||||||
|
Flex,
|
||||||
|
Image,
|
||||||
|
Text,
|
||||||
|
Tooltip,
|
||||||
|
VStack,
|
||||||
|
} from "@chakra-ui/react";
|
||||||
|
import React from "react";
|
||||||
|
import Tabs from "../ui/Tabs";
|
||||||
|
import LineBar from "../../assets/pointerBar.png";
|
||||||
|
import lineBar from "../../assets/imgpsh_fullsize_anim.png";
|
||||||
|
|
||||||
|
const timelineData = [
|
||||||
|
{ date: "Oct 12, 2023", phase: "Phase 1", description: "Lorem ipsum" },
|
||||||
|
{ date: "Oct 12, 2024", phase: "Phase 2", description: "Lorem ipsum" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const TimeLines = () => {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Box bgColor="black" w="100%" px="4rem" h="100%">
|
||||||
|
<Box
|
||||||
|
bgColor="#D9D9D91A"
|
||||||
|
display="flex"
|
||||||
|
flexDirection="column"
|
||||||
|
alignItems="center"
|
||||||
|
borderRadius="20px"
|
||||||
|
p={4}
|
||||||
|
>
|
||||||
|
<Text
|
||||||
|
fontWeight={500}
|
||||||
|
fontSize="28px"
|
||||||
|
lineHeight="37.71px"
|
||||||
|
color="#fff"
|
||||||
|
>
|
||||||
|
We Walk the Walk
|
||||||
|
</Text>
|
||||||
|
<Tabs />
|
||||||
|
<Box
|
||||||
|
w="100%"
|
||||||
|
p={"4rem"}
|
||||||
|
mt={"2rem"}
|
||||||
|
display="flex"
|
||||||
|
flexDirection="column"
|
||||||
|
>
|
||||||
|
{/* <Box
|
||||||
|
borderBottom="1px solid #E8155DD6"
|
||||||
|
w={"100%"}
|
||||||
|
py={"1rem"}
|
||||||
|
/> */}
|
||||||
|
<Image w={"100%"} src={lineBar} />
|
||||||
|
<Flex
|
||||||
|
direction="row"
|
||||||
|
w="100%"
|
||||||
|
px="3rem"
|
||||||
|
justify="space-between"
|
||||||
|
align="center"
|
||||||
|
>
|
||||||
|
{timelineData.map((item, index) => (
|
||||||
|
<Flex key={index} direction="column" align="center">
|
||||||
|
<Tooltip
|
||||||
|
display="flex"
|
||||||
|
alignItems="center"
|
||||||
|
flexDirection="column"
|
||||||
|
bgColor="#E8155D21"
|
||||||
|
w="220.85px"
|
||||||
|
h="104.29px"
|
||||||
|
label={item.description}
|
||||||
|
placement="top"
|
||||||
|
px="8rem"
|
||||||
|
>
|
||||||
|
<Box
|
||||||
|
bottom="5rem"
|
||||||
|
as="button"
|
||||||
|
borderRadius="50%"
|
||||||
|
w="8.34px"
|
||||||
|
h="8.34px"
|
||||||
|
marginTop="-1rem"
|
||||||
|
position="relative"
|
||||||
|
mb="3rem"
|
||||||
|
bgColor="#E5195E"
|
||||||
|
>
|
||||||
|
<Box
|
||||||
|
top="-2.8px"
|
||||||
|
right="7px"
|
||||||
|
as="button"
|
||||||
|
borderRadius="50%"
|
||||||
|
w="22.94px"
|
||||||
|
h="22.94px"
|
||||||
|
px="0"
|
||||||
|
marginTop="-1rem"
|
||||||
|
position="relative"
|
||||||
|
bgColor="#E5195E42"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Box
|
||||||
|
display="flex"
|
||||||
|
w="220.85px"
|
||||||
|
h="104.29px"
|
||||||
|
flexDirection="row"
|
||||||
|
position="relative"
|
||||||
|
alignItems="center"
|
||||||
|
justifyContent="center"
|
||||||
|
>
|
||||||
|
<Box display="flex" flexDirection="column" alignItems="center" mr="8rem">
|
||||||
|
<Text fontSize="sm" color="white">
|
||||||
|
{item.date}
|
||||||
|
</Text>
|
||||||
|
<Text fontSize="xs" color="white">
|
||||||
|
{item.phase}
|
||||||
|
</Text>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Tooltip>
|
||||||
|
</Flex>
|
||||||
|
))}
|
||||||
|
</Flex>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default TimeLines;
|
||||||
37
src/components/ui/compactTabs.jsx
Normal file
37
src/components/ui/compactTabs.jsx
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
import React, { useState } from "react";
|
||||||
|
import { Flex, Box, IconButton, Text, Image } from "@chakra-ui/react";
|
||||||
|
import { FaHome, FaSyncAlt, FaBinoculars } from "react-icons/fa";
|
||||||
|
import { SiGoogletagmanager } from "react-icons/si";
|
||||||
|
|
||||||
|
const TabsComponent = () => {
|
||||||
|
const [activeTab, setActiveTab] = useState("tab1");
|
||||||
|
|
||||||
|
const tabs = [
|
||||||
|
{ id: "tab1", label: "Hybrid", icon: null },
|
||||||
|
{ id: "tab2", label: "IOS", icon: null },
|
||||||
|
{ id: "tab3", label: "Andriod", icon: null },
|
||||||
|
{ id: "tab4", label: "AI/ML", icon: null },
|
||||||
|
];
|
||||||
|
return (
|
||||||
|
<Flex p={1} justifyContent="center" w="442px" >
|
||||||
|
{tabs.map((tab) => (
|
||||||
|
<Flex
|
||||||
|
key={tab.id}
|
||||||
|
alignItems="center"
|
||||||
|
color={activeTab === tab.id ? "white" : "gray.400"}
|
||||||
|
px={"4rem"}
|
||||||
|
py={1}
|
||||||
|
cursor="pointer"
|
||||||
|
borderBottom={activeTab === tab.id ? "2px solid #E8155D" : "none"}
|
||||||
|
onClick={() => setActiveTab(tab.id)}
|
||||||
|
transition="color 0.3s, border-bottom 0.3s"
|
||||||
|
w="100%"
|
||||||
|
>
|
||||||
|
{tab.label && <Text color="#FFFFFF" fontWeight={400} fontSize="20px">{tab.label}</Text>}
|
||||||
|
</Flex>
|
||||||
|
))}
|
||||||
|
</Flex>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default TabsComponent;
|
||||||
32
src/index.css
Normal file
32
src/index.css
Normal file
@@ -0,0 +1,32 @@
|
|||||||
|
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap");
|
||||||
|
|
||||||
|
:root {
|
||||||
|
font-family: "Manrope", sans-serif;
|
||||||
|
color: #e8155d;
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Robo {
|
||||||
|
font-family: "Roboto", sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pinkcolor {
|
||||||
|
background-color: #e8155d;
|
||||||
|
}
|
||||||
|
.box-after-style::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
width: 0;
|
||||||
|
height: 6px;
|
||||||
|
background: var(--orange);
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
transition: 0.8s;
|
||||||
|
border-radius: 0 0 10px;
|
||||||
|
}
|
||||||
12
src/main.jsx
Normal file
12
src/main.jsx
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
import { StrictMode } from "react";
|
||||||
|
import { createRoot } from "react-dom/client";
|
||||||
|
import App from "./App.jsx";
|
||||||
|
import "./index.css";
|
||||||
|
import { ChakraProvider } from "@chakra-ui/react";
|
||||||
|
createRoot(document.getElementById("root")).render(
|
||||||
|
<ChakraProvider>
|
||||||
|
<StrictMode>
|
||||||
|
<App />
|
||||||
|
</StrictMode>
|
||||||
|
</ChakraProvider>
|
||||||
|
);
|
||||||
34
src/pages/Home.jsx
Normal file
34
src/pages/Home.jsx
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
import React from "react";
|
||||||
|
import Hero from "../components/Hero";
|
||||||
|
import { Box } from "@chakra-ui/react";
|
||||||
|
import TimeLines from "../components/ui/TimeLines";
|
||||||
|
import ServicesSection from "../components/ServiceSection";
|
||||||
|
import Protfolio from "../components/PortFolio"
|
||||||
|
import Teach from "../components/WhatWeTeach"
|
||||||
|
import Awards from "../components/Awards";
|
||||||
|
import Testi from "../components/Testinomals"
|
||||||
|
import Banner from "../components/Banner"
|
||||||
|
import Form from "../components/Form"
|
||||||
|
import FAQs from "../components/FAQs"
|
||||||
|
import Footer from "../components/Footer"
|
||||||
|
import FooterCom from "../components/FooterCom";
|
||||||
|
const Home = () => {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Hero />
|
||||||
|
<TimeLines/>
|
||||||
|
<ServicesSection/>
|
||||||
|
<Protfolio/>
|
||||||
|
<Teach/>
|
||||||
|
<Testi/>
|
||||||
|
<Awards/>
|
||||||
|
<Banner/>
|
||||||
|
<Form/>
|
||||||
|
<FAQs/>
|
||||||
|
<Footer/>
|
||||||
|
<FooterCom/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Home;
|
||||||
42
src/styles/button.css
Normal file
42
src/styles/button.css
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
/* Initial state */
|
||||||
|
.your-button-class {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 10px 20px;
|
||||||
|
color: white;
|
||||||
|
background-color: #e91e63;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: bold;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
outline: none;
|
||||||
|
transition: border-bottom 0.3s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Border-bottom effect */
|
||||||
|
.your-button-class::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 3px;
|
||||||
|
background-color: #e91e63; /* Pink color */
|
||||||
|
transition: transform 0.3s ease-in-out;
|
||||||
|
transform: scaleX(0); /* Initial scale to 0 */
|
||||||
|
transform-origin: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hover and focus state */
|
||||||
|
.your-button-class:hover::after,
|
||||||
|
.your-button-class:focus::after {
|
||||||
|
transform: scaleX(1); /* Scale to full width */
|
||||||
|
transform-origin: left; /* Transition from left to right */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Transition out (when mouse leaves) */
|
||||||
|
.your-button-class:focus:not(:hover)::after,
|
||||||
|
.your-button-class:hover:not(:focus)::after {
|
||||||
|
transform: scaleX(0); /* Scale back to 0 */
|
||||||
|
transform-origin: right; /* Transition from right to left */
|
||||||
|
}
|
||||||
40
src/styles/commonStyles.js
Normal file
40
src/styles/commonStyles.js
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
// src/styles/commonStyles.js
|
||||||
|
export const commonStyles = {
|
||||||
|
transition: "all 0.5s",
|
||||||
|
position: "relative",
|
||||||
|
display: "inline-flex",
|
||||||
|
_hover: {
|
||||||
|
_before: { width: "7px" },
|
||||||
|
_after: { width: "100%" },
|
||||||
|
},
|
||||||
|
_before: {
|
||||||
|
content: "''",
|
||||||
|
position: "absolute",
|
||||||
|
top: "7px",
|
||||||
|
right: "-7px",
|
||||||
|
width: 0,
|
||||||
|
height: "100%",
|
||||||
|
transition: "all 0.5s",
|
||||||
|
},
|
||||||
|
_after: {
|
||||||
|
content: "''",
|
||||||
|
position: "absolute",
|
||||||
|
bottom: "0px",
|
||||||
|
left: "1px",
|
||||||
|
borderBottom: "3px solid #e5195e",
|
||||||
|
borderRadius: "9px",
|
||||||
|
width: "100%",
|
||||||
|
transition: "all 0.5s",
|
||||||
|
transform: "scaleX(0)",
|
||||||
|
transformOrigin: "left",
|
||||||
|
height: "12px",
|
||||||
|
},
|
||||||
|
_hover: {
|
||||||
|
_before: { width: "7px" },
|
||||||
|
_after: {
|
||||||
|
transform: "scaleX(1)",
|
||||||
|
transformOrigin: "left",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
7
vite.config.js
Normal file
7
vite.config.js
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import react from '@vitejs/plugin-react'
|
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
|
})
|
||||||
Reference in New Issue
Block a user