init frontend
This commit is contained in:
Jakub K
commit
c2ee6fcad3
0
.drone.yml
Normal file
0
.drone.yml
Normal file
20
.eslintrc.cjs
Normal file
20
.eslintrc.cjs
Normal file
@ -0,0 +1,20 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
env: { browser: true, es2020: true },
|
||||
extends: [
|
||||
'eslint:recommended',
|
||||
'plugin:react/recommended',
|
||||
'plugin:react/jsx-runtime',
|
||||
'plugin:react-hooks/recommended',
|
||||
],
|
||||
ignorePatterns: ['dist', '.eslintrc.cjs'],
|
||||
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
|
||||
settings: { react: { version: '18.2' } },
|
||||
plugins: ['react-refresh'],
|
||||
rules: {
|
||||
'react-refresh/only-export-components': [
|
||||
'warn',
|
||||
{ allowConstantExport: true },
|
||||
],
|
||||
},
|
||||
}
|
||||
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?
|
||||
16
Dockerfile
Normal file
16
Dockerfile
Normal file
@ -0,0 +1,16 @@
|
||||
# Stage 1: Build the React application
|
||||
FROM node:alpine as build-stage
|
||||
WORKDIR /app
|
||||
COPY package*.json ./
|
||||
RUN npm install
|
||||
COPY /izaac-frontend .
|
||||
RUN npm run build
|
||||
|
||||
# Stage 2: Serve the app from Nginx
|
||||
FROM nginx:alpine
|
||||
# Copy the build output to replace the default nginx contents.
|
||||
COPY --from=build-stage /app/build/ /usr/share/nginx/html
|
||||
# Expose port 80 to the outside
|
||||
EXPOSE 80
|
||||
# Start Nginx when the container has provisioned.
|
||||
CMD ["nginx", "-g", "daemon off;"]
|
||||
8
README.md
Normal file
8
README.md
Normal file
@ -0,0 +1,8 @@
|
||||
# React + Vite
|
||||
|
||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||
|
||||
Currently, two official plugins are available:
|
||||
|
||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
|
||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||
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="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>izaac frontend</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
5037
package-lock.json
generated
Normal file
5037
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": "izaac-frontend",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@ckeditor/ckeditor5-build-classic": "^40.0.0",
|
||||
"@ckeditor/ckeditor5-build-multi-root": "^40.0.0",
|
||||
"@ckeditor/ckeditor5-react": "^6.1.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "^6.18.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/typography": "^0.5.10",
|
||||
"@types/react": "^18.2.15",
|
||||
"@types/react-dom": "^18.2.7",
|
||||
"@vitejs/plugin-react": "^4.0.3",
|
||||
"autoprefixer": "^10.4.16",
|
||||
"eslint": "^8.45.0",
|
||||
"eslint-plugin-react": "^7.32.2",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.3",
|
||||
"postcss": "^8.4.31",
|
||||
"postcss-nesting": "^12.0.1",
|
||||
"tailwindcss": "^3.3.5",
|
||||
"vite": "^4.4.5"
|
||||
}
|
||||
}
|
||||
8
postcss.config.js
Normal file
8
postcss.config.js
Normal file
@ -0,0 +1,8 @@
|
||||
export default {
|
||||
plugins: {
|
||||
'postcss-import': {},
|
||||
'tailwindcss/nesting': {},
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
42
src/App.jsx
Normal file
42
src/App.jsx
Normal file
@ -0,0 +1,42 @@
|
||||
import styles from './style';
|
||||
import NavBar from './components/NavBar';
|
||||
import WorkApp from './components/WorkApp';
|
||||
import Home from './components/Home';
|
||||
import { BrowserRouter as Router } from 'react-router-dom';
|
||||
import { Route, Routes } from 'react-router-dom';
|
||||
import Contact from './components/Contact';
|
||||
import JobPosting from './components/JobPosting';
|
||||
import Mininav from './components/Mininav';
|
||||
import Register from './components/Register';
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<Router>
|
||||
<div className='bg-white w-full overflow-hidden'>
|
||||
<div className={`${styles.paddingX} ${styles.flexCenter}`}>
|
||||
<Mininav />
|
||||
<div className={`${styles.boxWidth}`}>
|
||||
<NavBar />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={`${styles.flexStart}`}>
|
||||
<div className={`${styles.boxWidth2} h-full`}>
|
||||
<Routes>
|
||||
<Route path="/home" element={<Home />} />
|
||||
<Route path="/work" element={<WorkApp />} />
|
||||
<Route path="/work/jobpostings" element={<WorkApp />} />
|
||||
<Route path="/contact" element={<Contact />} />
|
||||
<Route path="/work/jobposting" element={<JobPosting />} />
|
||||
{/* Add more routes as needed */}
|
||||
</Routes>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</Router>
|
||||
)
|
||||
};
|
||||
|
||||
|
||||
export default App;
|
||||
3
src/assets/close.svg
Normal file
3
src/assets/close.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 50 50">
|
||||
<path d="M 9.15625 6.3125 L 6.3125 9.15625 L 22.15625 25 L 6.21875 40.96875 L 9.03125 43.78125 L 25 27.84375 L 40.9375 43.78125 L 43.78125 40.9375 L 27.84375 25 L 43.6875 9.15625 L 40.84375 6.3125 L 25 22.15625 Z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 330 B |
8
src/assets/index.js
Normal file
8
src/assets/index.js
Normal file
@ -0,0 +1,8 @@
|
||||
import close from './close.svg'
|
||||
import menu from './menu.svg'
|
||||
import search from './search.svg'
|
||||
export {
|
||||
close,
|
||||
menu,
|
||||
search,
|
||||
}
|
||||
3
src/assets/menu.svg
Normal file
3
src/assets/menu.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 24 24">
|
||||
<path d="M 2 5 L 2 7 L 22 7 L 22 5 L 2 5 z M 2 11 L 2 13 L 22 13 L 22 11 L 2 11 z M 2 17 L 2 19 L 22 19 L 22 17 L 2 17 z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 238 B |
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 |
10
src/assets/search.svg
Normal file
10
src/assets/search.svg
Normal file
@ -0,0 +1,10 @@
|
||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg fill="#000000" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
viewBox="0 0 490.4 490.4" xml:space="preserve">
|
||||
<g>
|
||||
<path d="M484.1,454.796l-110.5-110.6c29.8-36.3,47.6-82.8,47.6-133.4c0-116.3-94.3-210.6-210.6-210.6S0,94.496,0,210.796
|
||||
s94.3,210.6,210.6,210.6c50.8,0,97.4-18,133.8-48l110.5,110.5c12.9,11.8,25,4.2,29.2,0C492.5,475.596,492.5,463.096,484.1,454.796z
|
||||
M41.1,210.796c0-93.6,75.9-169.5,169.5-169.5s169.6,75.9,169.6,169.5s-75.9,169.5-169.5,169.5S41.1,304.396,41.1,210.796z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 716 B |
11
src/components/Contact.jsx
Normal file
11
src/components/Contact.jsx
Normal file
@ -0,0 +1,11 @@
|
||||
import React from 'react'
|
||||
|
||||
const Contact = () => {
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Contact
|
||||
0
src/components/Editor.jsx
Normal file
0
src/components/Editor.jsx
Normal file
11
src/components/Home.jsx
Normal file
11
src/components/Home.jsx
Normal file
@ -0,0 +1,11 @@
|
||||
import React from 'react'
|
||||
import styles from '../style'
|
||||
const Home = () => {
|
||||
return (
|
||||
<div className={`${styles.flexCenter}`}>
|
||||
<h1 className={`font-poppins text-[40px] text-black`}>HOME - TEST</h1>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Home
|
||||
55
src/components/JobPosting.jsx
Normal file
55
src/components/JobPosting.jsx
Normal file
@ -0,0 +1,55 @@
|
||||
import React from 'react'
|
||||
import styles from '../style'
|
||||
import { CKEditor } from '@ckeditor/ckeditor5-react';
|
||||
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
|
||||
|
||||
const JobPosting = () => {
|
||||
return (
|
||||
<>
|
||||
<div className='grid grid-cols-3'>
|
||||
<div className='sm:px-20 px-16 sm:pt-12 pt-6 pb-6 xl:col-span-2 col-span-3'>
|
||||
<span className='justify-center'>
|
||||
<p className={`${styles.paragraph}`}>Zacznij dodawać ogłoszenie o pracę z Izaac.pl </p>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div className='no-tailwindcss-base'>
|
||||
<div className='editor-container max-w-none h-[70vh]'>
|
||||
<form action="">
|
||||
<div className='grid mb-4'>
|
||||
<label className={`${styles.paragraph} px-4`} htmlFor="">Nazwa ogłoszenia</label>
|
||||
<input type="text" name="" id="" placeholder='Wpisz nazwę stanowiska...' className={`border-b-2 px-4 my-3 mx-2 ${styles.paragraph} `}/>
|
||||
</div>
|
||||
<CKEditor
|
||||
editor={ ClassicEditor }
|
||||
className=""
|
||||
config={{}}
|
||||
data="<h1>Zacznij pisać ogłoszenie!</h1>"
|
||||
onReady={ editor => {
|
||||
// You can store the "editor" and use when it is needed.
|
||||
console.log( 'Editor is ready to use!', editor );
|
||||
} }
|
||||
onChange={ ( event, editor ) => {
|
||||
const data = editor.getData();
|
||||
console.log( { event, editor, data } );
|
||||
} }
|
||||
onBlur={ ( event, editor ) => {
|
||||
console.log( 'Blur.', editor );
|
||||
} }
|
||||
onFocus={ ( event, editor ) => {
|
||||
console.log( 'Focus.', editor );
|
||||
} }
|
||||
/>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default JobPosting
|
||||
34
src/components/Login.jsx
Normal file
34
src/components/Login.jsx
Normal file
@ -0,0 +1,34 @@
|
||||
import React from 'react'
|
||||
import styles from '../style';
|
||||
|
||||
const Login = ({isOpen, onClose}) => {
|
||||
if (!isOpen) return null;
|
||||
return (
|
||||
<div className="fixed inset-0 bg-gray-700 bg-opacity-50 flex justify-center items-center z-30">
|
||||
<div className="bg-white p-12 rounded-lg h-min-content sm:w-[40rem] w-[20rem] absolute border-4 border-gray-300">
|
||||
<button onClick={onClose} className="absolute top-4 right-4 text-black">
|
||||
×
|
||||
</button>
|
||||
<h1 className="text-xl font-bold mb-8 text-center">Zaloguj się</h1>
|
||||
|
||||
<form action='#'>
|
||||
<div className='grid'>
|
||||
<div className='mb-4 pr-4 '>
|
||||
<input type="text" name="" id="" placeholder='Twój login' className={`border-b px-4 my-3 mx-2 ${styles.paragraph} w-full text-center `}/>
|
||||
</div>
|
||||
<div className='mb-4 pr-4'>
|
||||
<input type="password" name="" id="" placeholder='Hasło' className={`border-b px-4 my-3 mx-2 ${styles.paragraph} w-full text-center`}/>
|
||||
</div>
|
||||
<a href='#' className='text-center font-semibold mb-4 hover:text-blue-700 duration-150'>Zapomniałam/łem hasła</a>
|
||||
<button type="submit" className="bg-gray-700 text-white px-4 py-2 rounded w-full font-semibold hover:bg-gray-500 duration-150">
|
||||
Z a l o g u j s i ę
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Login
|
||||
32
src/components/Mininav.jsx
Normal file
32
src/components/Mininav.jsx
Normal file
@ -0,0 +1,32 @@
|
||||
import React, { useState } from 'react'
|
||||
import Register from './Register';
|
||||
import Login from './Login';
|
||||
|
||||
const Mininav = () => {
|
||||
const [isPopupOpen, setPopupOpen] = useState(false)
|
||||
const [isLoginOpen, setLoginOpen] = useState(false)
|
||||
const openPopup = () => setPopupOpen(true);
|
||||
const closePopup = () => setPopupOpen(false);
|
||||
|
||||
const openLogin = () => setLoginOpen(true);
|
||||
const closeLogin = () => setLoginOpen(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className='bg-gray-500 h-5 absolute w-full top-0 flex justify-end items-center'>
|
||||
{/* Link otwierający modal */}
|
||||
<button onClick={openPopup} className='text-white font-poppins font-semibold text-xs mx-12'>
|
||||
Rejestracja
|
||||
</button>
|
||||
<button onClick={openLogin} className='text-white font-poppins font-semibold text-xs sm:mr-12 mr-6 sm:pr-12'>
|
||||
Zaloguj się
|
||||
</button>
|
||||
</div>
|
||||
{/* Komponent modalu */}
|
||||
<Register isOpen={isPopupOpen} onClose={closePopup} />
|
||||
<Login isOpen={isLoginOpen} onClose={closeLogin} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Mininav
|
||||
71
src/components/NavBar.jsx
Normal file
71
src/components/NavBar.jsx
Normal file
@ -0,0 +1,71 @@
|
||||
import React from 'react'
|
||||
import { linki, linki_home } from '../consts';
|
||||
import { close, search, menu } from '../assets';
|
||||
import { useState } from 'react';
|
||||
import { useLocation } from 'react-router-dom';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
const NavBar = () => {
|
||||
const[toggle, setToggle] = useState(false)
|
||||
const[toggleSearch, setToggleSearch] = useState(false)
|
||||
const location = useLocation()
|
||||
|
||||
const getLinks = () =>{
|
||||
if (location.pathname.startsWith('/work')){
|
||||
return linki
|
||||
} else {
|
||||
return linki_home
|
||||
}
|
||||
}
|
||||
const currentLinks = getLinks()
|
||||
|
||||
return (
|
||||
<nav className='w-full flex py-6 justify-between items-center navbar '>
|
||||
|
||||
<img src='https://www.izaac.pl/wp-content/uploads/2022/04/IzaacLOGO.png' alt="izaac" className='md:w-[200px] w-[120px]'/>
|
||||
|
||||
<ul className='list-none sm:flex hidden justify-end items-center flex-1'>
|
||||
{currentLinks.map((nav, index) => (
|
||||
<li
|
||||
key={nav.id}
|
||||
className={`font-popins font-semibold cursor-pointer xs:text-[18px] sm:text-[14px] text-[10px] ${index === linki.length - 1 ? 'mr-7' : 'sm:mr-7 mr-10'} text-slate-900 hover:text-sky-600`}
|
||||
>
|
||||
<Link to={`/${nav.name}`}>{nav.title}</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<img
|
||||
src={search}
|
||||
alt="menu"
|
||||
className='w-5 h-5 object-contain ml-10 hidden sm:block'
|
||||
onClick={() => setToggleSearch((prev) => !prev)}/>
|
||||
<div className='sm:hidden flex flex-1 justify-end items-center'>
|
||||
<img
|
||||
src={search}
|
||||
alt="menu"
|
||||
className='w-5 h-5 object-contain ml-10 mr-10'
|
||||
onClick={() => setToggleSearch((prev) => !prev)}/>
|
||||
<img
|
||||
src={toggle ? close : menu}
|
||||
alt="menu"
|
||||
className='w-[28px] h-[28px] object-contain'
|
||||
onClick={() => setToggle((prev) => !prev)}/>
|
||||
<div className={`${toggle ? 'sidebar-show' : 'hidden'} p-6 bg-white absolute top-20 right-0 mx-4 my-2 min-w-[140px] rounded-xl border-4 border-slate-200 z-20`}>
|
||||
<ul className='list-none flex flex-col justify-end items-center flex-1'>
|
||||
{currentLinks.map((nav, index) =>(
|
||||
<div
|
||||
key={nav.id}
|
||||
className={`w fulltext-center font-popins font-normal cursor-pointer text-[16px] ${index === linki.length - 1 ? 'mb-0' : 'mb-3'} text-slate-800`}
|
||||
>
|
||||
<Link to={`/${nav.name}`}>{nav.title}</Link>
|
||||
</div>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
export default NavBar
|
||||
44
src/components/Register.jsx
Normal file
44
src/components/Register.jsx
Normal file
@ -0,0 +1,44 @@
|
||||
import React from 'react'
|
||||
import styles from '../style';
|
||||
|
||||
const Register = ({isOpen, onClose}) => {
|
||||
if (!isOpen) return null;
|
||||
return (
|
||||
<div className="fixed inset-0 bg-gray-700 bg-opacity-50 flex justify-center items-center z-30">
|
||||
<div className="bg-white p-12 rounded-lg h-min-content w-min-fit absolute border-4 border-gray-300">
|
||||
<button onClick={onClose} className="absolute top-4 right-4 text-black">
|
||||
×
|
||||
</button>
|
||||
<h1 className="text-xl font-bold mb-4 text-center">Zarejestruj się na Izaac.pl</h1>
|
||||
|
||||
<form action='#'>
|
||||
<div className='grid'>
|
||||
<div className='mb-4 pr-4 '>
|
||||
<input type="text" name="" id="" placeholder='Twój login' className={`border-b px-4 my-3 mx-2 ${styles.paragraph} w-full text-center `}/>
|
||||
</div>
|
||||
<div className='mb-4 pr-4'>
|
||||
<input type="email" name="" id="" placeholder='E-mail' className={`border-b px-4 my-3 mx-2 ${styles.paragraph} w-full text-center`}/>
|
||||
</div>
|
||||
<div className='mb-4 pr-4'>
|
||||
<input type="password" name="" id="" placeholder='Hasło' className={`border-b px-4 my-3 mx-2 ${styles.paragraph} w-full text-center`}/>
|
||||
</div>
|
||||
<div className='mb-6 pr-4'>
|
||||
<input type="password" name="" id="" placeholder='Powtórz hasło' className={`border-b px-4 my-3 mx-2 ${styles.paragraph} w-full text-center `}/>
|
||||
</div>
|
||||
<div className='mb-6 pr-4'>
|
||||
<input type="checkbox" name="" id="" placeholder='' className={`border-b-2 px-4 my-3 mx-2 ${styles.paragraph} text-center `}/>
|
||||
<label>Zapoznałem sie z <a href='#' className='hover:text-blue-600 font-bold sm'>regulaminem portalu Izaac.pl</a> i go akceptuję</label>
|
||||
</div>
|
||||
|
||||
<button type="submit" className="bg-gray-700 text-white px-4 py-2 rounded w-full font-semibold text">
|
||||
Z a r e j e s t r u j s i ę
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Register
|
||||
96
src/components/WorkApp.jsx
Normal file
96
src/components/WorkApp.jsx
Normal file
@ -0,0 +1,96 @@
|
||||
import React from 'react'
|
||||
import { ogloszenia } from '../consts'
|
||||
import { useState } from 'react';
|
||||
|
||||
function renderCircles(level) {
|
||||
let numberOfFilledCircles;
|
||||
|
||||
switch (level) {
|
||||
case 'Podstawowy':
|
||||
numberOfFilledCircles = 1;
|
||||
break;
|
||||
case 'Zaawansowany':
|
||||
numberOfFilledCircles = 3;
|
||||
break;
|
||||
case 'Ekspert':
|
||||
numberOfFilledCircles = 5;
|
||||
break;
|
||||
default:
|
||||
numberOfFilledCircles = 0;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{[...Array(5)].map((_, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`inline-block w-3.5 h-3.5 mr-1 rounded-full ${index < numberOfFilledCircles ? 'bg-red-300 hover:bg-red-700' : 'bg-gray-500 hover:bg-gray-600'}`}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const WorkApp = () => {
|
||||
const [selectedOgloszenie, setSelectedOgloszenie] = useState(ogloszenia[0]);
|
||||
const [isDetailsVisible, setIsDetailsVisible] = useState(false); // Dodany stan
|
||||
|
||||
const handleOgloszenieClick = (ogloszenie) => {
|
||||
setSelectedOgloszenie(ogloszenie);
|
||||
setIsDetailsVisible(true); // Pokaż szczegóły na urządzeniach mobilnych
|
||||
};
|
||||
|
||||
// Funkcja do powrotu do listy ogłoszeń
|
||||
const handleBackToList = () => {
|
||||
setIsDetailsVisible(false);
|
||||
};
|
||||
return (
|
||||
<section className=' mx-auto bg-white w-full'>
|
||||
{isDetailsVisible && (
|
||||
<div className='grid grid-cols-6'>
|
||||
<button
|
||||
onClick={handleBackToList}
|
||||
className="sm:hidden block font-poppins text-white font-semibold bg-gray-500 px-4 py-2 rounded-md mx-4 col-span-4 col-start-2"
|
||||
>
|
||||
Powrót do listy
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className='flex-grow h-5/6 grid grid-cols-10 '>
|
||||
|
||||
<div className={`rounded-xl col-span-11 sm:col-span-4 bg-gray-100 overflow-y-auto p-2 my-4 mx-2 sm:h-[84vh] h-[84vh] ${isDetailsVisible ? 'hidden sm:block' : 'block'}`}>
|
||||
{ogloszenia.map((ogloszenie, index) => (
|
||||
<div
|
||||
key={ogloszenie.id}
|
||||
onClick={() => handleOgloszenieClick(ogloszenie)}
|
||||
className={`grid grid-cols-4 drop-shadow cursor-pointer mb-2 sm:mr-4 mr-0 text-xl font-bold border rounded-[10px] p-2 hover:border-l-8 hover:border-zinc-500 duration-300 ${index % 2 === 0 ? 'bg-gray-200' : 'bg-gray-300'}`}
|
||||
>
|
||||
|
||||
<p className='col-span-3 text-sm'>{ogloszenie.company_name}</p>
|
||||
<p className='place-self-end text-sm text-slate-800'>{ogloszenie.salaryRange}</p>
|
||||
<p className='col-span-4'>{ogloszenie.name}</p>
|
||||
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className={`sm:col-span-6 col-span-11 bg-gray-100 sm:h-[84vh] h-[84vh] overflow-y-auto p-4 my-4 ${isDetailsVisible ? 'block' : 'hidden sm:block'}`}>
|
||||
<div className='grid sm:grid-cols-2 md:grid-cols-5 grid-cols-2'>
|
||||
{Object.entries(selectedOgloszenie.neededSkills).map(([skill, level]) => (
|
||||
<div className='col-span-1 w-36 h-30 rounded-[15px] bg-slate-300 py-4 pl-3 m-2 hover:bg-slate-200' key={skill}>
|
||||
<p className='font-bold mb-1 '>{skill}</p>
|
||||
{renderCircles(level)}
|
||||
<p className='text-xs font-bold'>{level.toLowerCase()}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className='text-slate-800 font-medium mt-4'>
|
||||
{selectedOgloszenie.tresc}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default WorkApp
|
||||
253
src/consts/index.js
Normal file
253
src/consts/index.js
Normal file
@ -0,0 +1,253 @@
|
||||
export const ogloszenia = [
|
||||
{
|
||||
"id": "1",
|
||||
"company_name": "Kompania S. A",
|
||||
"name": "Inżynier mechanik w branży okrętowniczej",
|
||||
"tresc": "Poszukujemy doświadczonego inżyniera mechanika specjalizującego się w budowie i konserwacji statków. Wymagane minimum 5 lat doświadczenia w branży okrętowniczej.",
|
||||
"salaryRange": "10,000 - 15,000 PLN",
|
||||
"lokalizacja": "Gdańsk, Poland",
|
||||
"neededSkills": {
|
||||
"AutoCAD": "Zaawansowany",
|
||||
"SolidWorks": "Podstawowy",
|
||||
"Budowa statków": "Ekspert",
|
||||
"Coś innego": "Zaawansowany",
|
||||
"Papieżworks": "Podstawowy",
|
||||
"Budowa papieży": "Ekspert",
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "2",
|
||||
"company_name": "Kompania S. A",
|
||||
"name": "Inżynier elektryk w branży energetycznej",
|
||||
"tresc": "Szukamy inżyniera elektryka z doświadczeniem w projektowaniu i implementacji systemów energetycznych.",
|
||||
"salaryRange": "12,000 - 18,000 PLN",
|
||||
"lokalizacja": "Gdańsk, Poland",
|
||||
"neededSkills": {
|
||||
"Elektronika": "Ekspert",
|
||||
"PLC": "Zaawansowany",
|
||||
"Automatyka przemysłowa": "Podstawowy"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "3",
|
||||
"company_name": "Kompania S. A",
|
||||
"name": "Inżynier budowlany",
|
||||
"tresc": "Zapraszamy do aplikowania osoby z doświadczeniem w nadzorowaniu i zarządzaniu dużymi projektami budowlanymi.",
|
||||
"salaryRange": "14,000 - 22,000 PLN",
|
||||
"lokalizacja": "Gdańsk, Poland",
|
||||
"neededSkills": {
|
||||
"AutoCAD": "Ekspert",
|
||||
"Zarządzanie projektem": "Zaawansowany",
|
||||
"Nadzór budowlany": "Zaawansowany"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "4",
|
||||
"company_name": "Kompania S. A",
|
||||
"name": "Inżynier mechanik w branży okrętowniczej",
|
||||
"tresc": "Poszukujemy doświadczonego inżyniera mechanika specjalizującego się w budowie i konserwacji statków. Wymagane minimum 5 lat doświadczenia w branży okrętowniczej.",
|
||||
"salaryRange": "10,000 - 15,000 PLN",
|
||||
"lokalizacja": "Gdańsk, Poland",
|
||||
"neededSkills": {
|
||||
"AutoCAD": "Zaawansowany",
|
||||
"SolidWorks": "Podstawowy",
|
||||
"Budowa statków": "Ekspert"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "5",
|
||||
"company_name": "Kompania S. A",
|
||||
"name": "Inżynier elektryk w branży energetycznej",
|
||||
"tresc": "Szukamy inżyniera elektryka z doświadczeniem w projektowaniu i implementacji systemów energetycznych.",
|
||||
"salaryRange": "12,000 - 18,000 PLN",
|
||||
"lokalizacja": "Gdańsk, Poland",
|
||||
"neededSkills": {
|
||||
"Elektronika": "Ekspert",
|
||||
" PLC": "Zaawansowany",
|
||||
"Automatyka przemysłowa": "Podstawowy"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "6",
|
||||
"company_name": "Kompania S. A",
|
||||
"name": "Inżynier budowlany",
|
||||
"tresc": "Zapraszamy do aplikowania osoby z doświadczeniem w nadzorowaniu i zarządzaniu dużymi projektami budowlanymi.",
|
||||
"salaryRange": "14,000 - 22,000 PLN",
|
||||
"lokalizacja": "Gdańsk, Poland",
|
||||
"neededSkills": {
|
||||
"AutoCAD": "Ekspert",
|
||||
"Zarządzanie projektem": "Zaawansowany",
|
||||
"Nadzór budowlany": "Zaawansowany"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "7",
|
||||
"company_name": "Kompania S. A",
|
||||
"name": "Inżynier mechanik w branży okrętowniczej",
|
||||
"tresc": "Poszukujemy doświadczonego inżyniera mechanika specjalizującego się w budowie i konserwacji statków. Wymagane minimum 5 lat doświadczenia w branży okrętowniczej.",
|
||||
"salaryRange": "10,000 - 15,000 PLN",
|
||||
"lokalizacja": "Gdańsk, Poland",
|
||||
"neededSkills": {
|
||||
"AutoCAD": "Zaawansowany",
|
||||
"SolidWorks": "Podstawowy",
|
||||
"Budowa statków": "Ekspert"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "8",
|
||||
"company_name": "Kompania S. A",
|
||||
"name": "Inżynier elektryk w branży energetycznej",
|
||||
"tresc": "Szukamy inżyniera elektryka z doświadczeniem w projektowaniu i implementacji systemów energetycznych.",
|
||||
"salaryRange": "12,000 - 18,000 PLN",
|
||||
"lokalizacja": "Gdańsk, Poland",
|
||||
"neededSkills": {
|
||||
"Elektronika": "Ekspert",
|
||||
" PLC": "Zaawansowany",
|
||||
"Automatyka przemysłowa": "Podstawowy"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "9",
|
||||
"company_name": "Kompania S. A",
|
||||
"name": "Inżynier budowlany",
|
||||
"tresc": "Zapraszamy do aplikowania osoby z doświadczeniem w nadzorowaniu i zarządzaniu dużymi projektami budowlanymi.",
|
||||
"salaryRange": "14,000 - 22,000 PLN",
|
||||
"lokalizacja": "Gdańsk, Poland",
|
||||
"neededSkills": {
|
||||
"AutoCAD": "Ekspert",
|
||||
"Zarządzanie projektem": "Zaawansowany",
|
||||
"Nadzór budowlany": "Zaawansowany"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "10",
|
||||
"company_name": "Kompania S. A",
|
||||
"name": "Inżynier mechanik w branży okrętowniczej",
|
||||
"tresc": "Poszukujemy doświadczonego inżyniera mechanika specjalizującego się w budowie i konserwacji statków. Wymagane minimum 5 lat doświadczenia w branży okrętowniczej.",
|
||||
"salaryRange": "10,000 - 15,000 PLN",
|
||||
"lokalizacja": "Gdańsk, Poland",
|
||||
"neededSkills": {
|
||||
"AutoCAD": "Zaawansowany",
|
||||
"SolidWorks": "Podstawowy",
|
||||
"Budowa statków": "Ekspert"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "11",
|
||||
"company_name": "Kompania S. A",
|
||||
"name": "Inżynier elektryk w branży energetycznej",
|
||||
"tresc": "Szukamy inżyniera elektryka z doświadczeniem w projektowaniu i implementacji systemów energetycznych.",
|
||||
"salaryRange": "12,000 - 18,000 PLN",
|
||||
"lokalizacja": "Gdańsk, Poland",
|
||||
"neededSkills": {
|
||||
"Elektronika": "Ekspert",
|
||||
" PLC": "Zaawansowany",
|
||||
"Automatyka przemysłowa": "Podstawowy"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "12",
|
||||
"company_name": "Kompania S. A",
|
||||
"name": "Inżynier budowlany",
|
||||
"tresc": "Zapraszamy do aplikowania osoby z doświadczeniem w nadzorowaniu i zarządzaniu dużymi projektami budowlanymi.",
|
||||
"salaryRange": "14,000 - 22,000 PLN",
|
||||
"lokalizacja": "Gdańsk, Poland",
|
||||
"neededSkills": {
|
||||
"AutoCAD": "Ekspert",
|
||||
"Zarządzanie projektem": "Zaawansowany",
|
||||
"Nadzór budowlany": "Zaawansowany"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "13",
|
||||
"company_name": "Kompania S. A",
|
||||
"name": "Inżynier mechanik w branży okrętowniczej",
|
||||
"tresc": "Poszukujemy doświadczonego inżyniera mechanika specjalizującego się w budowie i konserwacji statków. Wymagane minimum 5 lat doświadczenia w branży okrętowniczej.",
|
||||
"salaryRange": "10,000 - 15,000 PLN",
|
||||
"lokalizacja": "Gdańsk, Poland",
|
||||
"neededSkills": {
|
||||
"AutoCAD": "Zaawansowany",
|
||||
"SolidWorks": "Podstawowy",
|
||||
"Budowa statków": "Ekspert"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "14",
|
||||
"company_name": "Kompania S. A",
|
||||
"name": "Inżynier elektryk w branży energetycznej",
|
||||
"tresc": "Szukamy inżyniera elektryka z doświadczeniem w projektowaniu i implementacji systemów energetycznych.",
|
||||
"salaryRange": "12,000 - 18,000 PLN",
|
||||
"lokalizacja": "Gdańsk, Poland",
|
||||
"neededSkills": {
|
||||
"Elektronika": "Ekspert",
|
||||
" PLC": "Zaawansowany",
|
||||
"Automatyka przemysłowa": "Podstawowy"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "15",
|
||||
"company_name": "Kompania S. A",
|
||||
"name": "Inżynier budowlany",
|
||||
"tresc": "Zapraszamy do aplikowania osoby z doświadczeniem w nadzorowaniu i zarządzaniu dużymi projektami budowlanymi.",
|
||||
"salaryRange": "14,000 - 22,000 PLN",
|
||||
"lokalizacja": "Gdańsk, Poland",
|
||||
"neededSkills": {
|
||||
"AutoCAD": "Ekspert",
|
||||
"Zarządzanie projektem": "Zaawansowany",
|
||||
"Nadzór budowlany": "Zaawansowany"
|
||||
}
|
||||
},
|
||||
//... Możesz dodać więcej ogłoszeń według tego wzoru
|
||||
];
|
||||
|
||||
|
||||
export const linki = [
|
||||
{
|
||||
"id": "1",
|
||||
"name": "home",
|
||||
"title": "Strona Główna",
|
||||
},
|
||||
{
|
||||
"id": "2",
|
||||
"name": "work/jobpostings",
|
||||
"title": "Ogłoszenia",
|
||||
},
|
||||
{
|
||||
"id": "3",
|
||||
"name": "work/jobposting",
|
||||
"title": "Dodaj ogłoszenie",
|
||||
},
|
||||
{
|
||||
"id": "4",
|
||||
"name": "work/contact",
|
||||
"title": "Kontakt",
|
||||
},
|
||||
]
|
||||
|
||||
export const linki_home = [
|
||||
{
|
||||
"id": "1",
|
||||
"name": "home",
|
||||
"title": "Strona Główna",
|
||||
},
|
||||
{
|
||||
"id": "2",
|
||||
"name": "category",
|
||||
"title": "Kategorie",
|
||||
},
|
||||
{
|
||||
"id": "3",
|
||||
"name": "work",
|
||||
"title": "Praca",
|
||||
},
|
||||
{
|
||||
"id": "4",
|
||||
"name": "portal",
|
||||
"title": "Portal",
|
||||
},
|
||||
{
|
||||
"id": "5",
|
||||
"name": "contact",
|
||||
"title": "Kontakt",
|
||||
},
|
||||
]
|
||||
120
src/index.css
Normal file
120
src/index.css
Normal file
@ -0,0 +1,120 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap");
|
||||
|
||||
@tailwind base;
|
||||
|
||||
@layer base {
|
||||
|
||||
.no-tailwindcss-base h1,
|
||||
.no-tailwindcss-base h2,
|
||||
.no-tailwindcss-base h3,
|
||||
.no-tailwindcss-base h4,
|
||||
.no-tailwindcss-base h5,
|
||||
.no-tailwindcss-base h6 {
|
||||
font-size: revert;
|
||||
font-weight: revert;
|
||||
}
|
||||
|
||||
.no-tailwindcss-base ol,
|
||||
.no-tailwindcss-base ul {
|
||||
list-style: revert;
|
||||
margin: revert;
|
||||
padding: revert;
|
||||
}
|
||||
}
|
||||
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
--black-gradient: linear-gradient(
|
||||
144.39deg,
|
||||
#ffffff -278.56%,
|
||||
#6d6d6d -78.47%,
|
||||
#11101d 91.61%
|
||||
);
|
||||
}
|
||||
|
||||
* {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
.editor-container {
|
||||
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-left: 4rem;
|
||||
padding-right: 4rem;
|
||||
;
|
||||
}
|
||||
|
||||
|
||||
.ck-editor__editable {
|
||||
min-height: 30rem;
|
||||
}
|
||||
.ck.ck-editor {
|
||||
min-height: 140rem;
|
||||
}
|
||||
|
||||
.sidebar-show {
|
||||
-webkit-animation: slide-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
|
||||
animation: slide-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
|
||||
}
|
||||
|
||||
.sidebar-hide {
|
||||
-webkit-animation: slide-down 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
|
||||
animation: slide-down 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
|
||||
}
|
||||
|
||||
@-webkit-keyframes slide-top {
|
||||
0% {
|
||||
-webkit-transform: translateX(600px);
|
||||
transform: translateX(600px);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translateX(0);
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-top {
|
||||
0% {
|
||||
-webkit-transform: translateX(600px);
|
||||
transform: translateX(600px);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translateX(0);
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes slide-down {
|
||||
0% {
|
||||
-webkit-transform: translateX(0);
|
||||
transform: translateX(0);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translateX(600px);
|
||||
transform: translateX(600px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-down {
|
||||
0% {
|
||||
-webkit-transform: translateX(0);
|
||||
transform: translateX(0);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translateX(600px);
|
||||
transform: translateX(600px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.details-section {
|
||||
display: none;
|
||||
}
|
||||
.list-section {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
11
src/main.jsx
Normal file
11
src/main.jsx
Normal file
@ -0,0 +1,11 @@
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import App from './App.jsx'
|
||||
import './index.css'
|
||||
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
)
|
||||
29
src/style.js
Normal file
29
src/style.js
Normal file
@ -0,0 +1,29 @@
|
||||
const styles = {
|
||||
boxWidth: "xl:max-w-[1280px] w-full",
|
||||
boxWidth2: "w-full",
|
||||
|
||||
heading2: "font-poppins font-semibold xs:text-[48px] text-[40px] text-black xs:leading-[76.8px] leading-[66.8px] w-full",
|
||||
paragraph: "font-poppins font-normal text-black text-[18px] leading-[30.8px]",
|
||||
|
||||
flexCenter: "flex justify-center items-center",
|
||||
flexStart: "flex justify-center items-start",
|
||||
|
||||
paddingX: "sm:px-16 px-6",
|
||||
paddingY: "sm:py-16 py-6",
|
||||
padding: "sm:px-16 px-6 sm:py-12 py-4",
|
||||
|
||||
marginX: "sm:mx-16 mx-6",
|
||||
marginY: "sm:my-16 my-6",
|
||||
};
|
||||
|
||||
export const layout = {
|
||||
section: `flex md:flex-row flex-col ${styles.paddingY}`,
|
||||
sectionReverse: `flex md:flex-row flex-col-reverse ${styles.paddingY}`,
|
||||
|
||||
sectionImgReverse: `flex-1 flex ${styles.flexCenter} md:mr-10 mr-0 md:mt-0 mt-10 relative`,
|
||||
sectionImg: `flex-1 flex ${styles.flexCenter} md:ml-10 ml-0 md:mt-0 mt-10 relative`,
|
||||
|
||||
sectionInfo: `flex-1 ${styles.flexStart} flex-col`,
|
||||
};
|
||||
|
||||
export default styles;
|
||||
29
tailwind.config.js
Normal file
29
tailwind.config.js
Normal file
@ -0,0 +1,29 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ["./index.html", "./src/**/*.{js,jsx}"],
|
||||
mode: "jit",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: "#00040f",
|
||||
secondary: "#00f6ff",
|
||||
dimWhite: "rgba(255, 255, 255, 0.7)",
|
||||
dimBlue: "rgba(9, 151, 124, 0.1)",
|
||||
},
|
||||
fontFamily: {
|
||||
poppins: ["Poppins", "sans-serif"],
|
||||
},
|
||||
},
|
||||
screens: {
|
||||
xs: "480px",
|
||||
ss: "620px",
|
||||
sm: "768px",
|
||||
md: "1060px",
|
||||
lg: "1200px",
|
||||
xl: "1700px"
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
require('@tailwindcss/typography'),
|
||||
],
|
||||
};
|
||||
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()],
|
||||
})
|
||||
Loading…
x
Reference in New Issue
Block a user