Werken in Turkije? Ontdek vacatures,
salarissen en wonen in Turkije
Droom je van werken onder de zon in Turkije? Ontdek vacatures voor Nederlandstaligen, praktische informatie over salarissen, wonen, visa en het leven in populaire steden zoals Antalya en Istanbul. Vind eenvoudig een baan die bij jou past en zet vandaag de eerste stap richting werken in Turkije.
Get Started Now
Werk
in
Turkije Werk
in
Turkije Werk
in
Turkije Werk
in
Turkije
in
Turkije Werk
in
Turkije Werk
in
Turkije Werk
in
Turkije
import { useState, useRef, useEffect, useCallback } from "react";const CSS = `
:root {
--bg: #0a0a0f;
--surface: #111118;
--text: #f0f0f5;
--text-muted: #8888a8;
--accent: #c8a0e0;
--accent-pink: #b04090;
--border: rgba(255, 255, 255, 0.08);
}*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }.xero-root {
background: var(--bg);
color: var(--text);
font-family: 'Inter', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
padding: 14px;
min-height: 100vh;
-webkit-font-smoothing: antialiased;
width: 100%;
}/* NAV */
.xero-nav {
width: 100%;
max-width: 1600px;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
padding: 12px 24px;
margin-bottom: 14px;
}
.nav-logo {
font-size: 1.05rem;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--text);
}
.nav-menu { display: contents; }
.nav-links {
list-style: none;
display: flex;
gap: 32px;
justify-content: center;
}
.nav-links a {
color: var(--text-muted);
text-decoration: none;
font-size: 0.85rem;
transition: color 0.2s;
}
.nav-links a:hover { color: var(--text); }
.nav-actions {
display: flex;
gap: 10px;
justify-content: flex-end;
}
.btn-login, .btn-signup {
padding: 7px 18px;
border-radius: 999px;
font-size: 0.82rem;
font-family: inherit;
cursor: pointer;
transition: background 0.2s, opacity 0.2s;
border: none;
line-height: 1.4;
}
.btn-login {
background: rgba(255,255,255,0.06);
border: 1px solid var(--border);
color: white;
font-weight: 500;
}
.btn-login:hover { background: rgba(255,255,255,0.12); }
.btn-signup {
background: white;
color: #0a0a0f;
font-weight: 600;
}
.btn-signup:hover { opacity: 0.88; }
.menu-toggle {
display: none;
background: none;
border: none;
cursor: pointer;
width: 24px;
height: 14px;
position: relative;
z-index: 1001;
}
.menu-toggle span {
display: block;
width: 100%;
height: 2px;
background: white;
position: absolute;
left: 0;
transition: transform 0.3s;
}
.menu-toggle span:first-child { top: 0; }
.menu-toggle span:last-child { bottom: 0; }
.menu-toggle.active span:first-child { transform: translateY(6px) rotate(45deg); }
.menu-toggle.active span:last-child { transform: translateY(-6px) rotate(-45deg); }/* HERO CARD */
.hero-card {
width: 100%;
max-width: 1600px;
border-radius: 20px;
border: 1px solid rgba(255,255,255,0.07);
overflow: hidden;
position: relative;
background: #0d0b12;
padding: 80px 40px 70px;
min-height: 640px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.hero-card::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 50% -70%,
transparent 60%,
rgba(176,48,136,0.03) 63%,
rgba(176,48,136,0.08) 65%,
rgba(176,48,136,0.16) 67%,
rgba(176,48,136,0.28) 69%,
rgba(176,48,136,0.40) 71%,
rgba(176,48,136,0.52) 73%,
rgba(176,48,136,0.64) 75%,
rgba(176,48,136,0.74) 77%,
rgba(176,48,136,0.82) 79%,
rgba(210,70,175,0.92) 85%,
rgba(240,110,210,0.88) 87%,
rgba(255,205,250,0.92) 91%,
rgba(255,240,255,0.98) 93%,
#ffffff 95%),
radial-gradient(circle at 50% 35%, rgba(120,40,180,0.08) 0%, transparent 50%);
z-index: 0;
pointer-events: none;
}
.hero-grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px);
background-size: 40px 40px;
mask-image: radial-gradient(circle at 50% -70%, transparent 60%, black 78%);
-webkit-mask-image: radial-gradient(circle at 50% -70%, transparent 60%, black 78%);
z-index: 0;
pointer-events: none;
}/* ICON PIPELINE */
.icon-pipeline {
position: relative;
display: flex;
align-items: center;
justify-content: center;
max-width: 700px;
margin-bottom: 52px;
z-index: 1;
gap: 0;
}
.beam-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
z-index: 2;
pointer-events: none;
}
.pipeline-line {
width: 160px;
height: 1px;
background: linear-gradient(90deg, rgba(255,255,255,0.15), rgba(255,255,255,0.07));
flex-shrink: 0;
}
.pipeline-line.right {
background: linear-gradient(90deg, rgba(255,255,255,0.07), rgba(255,255,255,0.15));
}/* SIDE NODES */
.icon-node {
width: 46px;
height: 46px;
border-radius: 50%;
background: #1a1a24;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 3;
position: relative;
flex-shrink: 0;
transition: transform 0.2s, box-shadow 0.2s;
box-shadow:
6px 6px 12px rgba(0,0,0,0.4),
-4px -4px 10px rgba(255,255,255,0.03),
inset 1px 1px 1px rgba(255,255,255,0.05),
inset 4px 4px 8px rgba(0,0,0,0.4);
}
.icon-node::after {
content: '';
position: absolute;
inset: -7px;
border-radius: 50%;
border: 1px dotted #1a1a24;
pointer-events: none;
}
.icon-node:hover {
transform: translateY(-1px);
box-shadow:
8px 8px 16px rgba(0,0,0,0.5),
-5px -5px 12px rgba(255,255,255,0.04),
inset 1px 1px 1px rgba(255,255,255,0.05),
inset 4px 4px 8px rgba(0,0,0,0.4);
}
.icon-node:active {
transform: translateY(0);
box-shadow:
inset 2px 2px 6px rgba(0,0,0,0.5),
inset -1px -1px 4px rgba(255,255,255,0.03);
}
.icon-node svg {
width: 20px;
height: 20px;
stroke: rgba(255,255,255,0.7);
stroke-width: 1.5;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}/* SIDE LIGHT GLOWS */
.node-light-right::before,
.node-light-left::before {
content: '';
position: absolute;
inset: -12px;
border-radius: 50%;
opacity: 0;
transition: opacity 0.3s;
z-index: 4;
pointer-events: none;
}
.node-light-right::before {
background: radial-gradient(circle at right, rgba(200,200,200,0.45) 0%, transparent 70%);
}
.node-light-left::before {
background: radial-gradient(circle at left, rgba(200,100,255,0.5) 0%, transparent 70%);
}
.node-light-right.active::before,
.node-light-left.active::before {
opacity: 1;
}/* CENTER NODE */
.center-wrapper {
position: relative;
flex-shrink: 0;
}
.splash {
position: absolute;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.4);
border-radius: 50%;
background: radial-gradient(circle, rgba(255,77,200,0.6) 0%, transparent 70%);
opacity: 0;
z-index: 2;
pointer-events: none;
}
.splash.animate {
animation: splash-anim 0.8s ease-out forwards;
}
@keyframes splash-anim {
0% { transform: translate(-50%, -50%) scale(0.4); opacity: 0.8; }
40% { opacity: 0.6; }
100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }
}
.icon-node-center {
width: 64px;
height: 64px;
border-radius: 50%;
background: #1e1e2c;
display: flex;
align-items: center;
justify-content: center;
z-index: 3;
position: relative;
box-shadow:
8px 8px 16px rgba(0,0,0,0.5),
-6px -6px 14px rgba(255,255,255,0.04),
inset 1px 1px 2px rgba(255,255,255,0.06),
inset 6px 6px 12px rgba(0,0,0,0.5);
}
.icon-node-center svg {
width: 28px;
height: 28px;
fill: white;
}/* HERO TEXT */
.hero-content {
max-width: 620px;
z-index: 1;
}
.hero-heading {
font-size: clamp(2.4rem, 5.5vw, 4rem);
font-weight: 300;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--text);
margin-bottom: 16px;
}
.hero-heading strong {
display: block;
font-weight: 400;
margin-top: 4px;
background: linear-gradient(to right, #ffffff, #a98597);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-sub {
font-size: 0.9rem;
color: rgba(255,255,255,0.4);
max-width: 440px;
margin: 0 auto 36px;
line-height: 1.6;
}
.btn-cta {
display: inline-block;
background: white;
color: #0a0a0f;
padding: 12px 32px;
border-radius: 999px;
font-weight: 600;
font-family: inherit;
font-size: 0.9rem;
text-decoration: none;
transition: opacity 0.2s, transform 0.2s;
}
.btn-cta:hover {
opacity: 0.9;
transform: translateY(-1px);
}/* BRANDS */
.brands {
display: flex;
gap: 64px;
padding: 32px 24px 10px;
flex-wrap: wrap;
justify-content: center;
max-width: 1600px;
width: 100%;
}
.brand-item {
display: flex;
align-items: center;
gap: 10px;
color: rgba(255,255,255,0.35);
font-size: 1.1rem;
font-weight: 500;
white-space: nowrap;
}
.brand-item svg {
width: 22px;
height: 22px;
flex-shrink: 0;
}
.hubspot-dot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
vertical-align: super;
margin: 0 -1px;
}/* RESPONSIVE */
@media (max-width: 860px) {
.icon-pipeline { gap: 0; margin-bottom: 40px; }
.pipeline-line { width: 80px; }
}
@media (max-width: 768px) {
.xero-nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.menu-toggle { display: block; }
.nav-menu {
display: flex !important;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 32px;
position: fixed;
top: 0;
right: -100%;
width: 100%;
height: 100vh;
background: var(--bg);
z-index: 1000;
transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-menu.active { right: 0; }
.nav-links {
flex-direction: column;
align-items: center;
gap: 24px;
}
.nav-links a { font-size: 1.1rem; }
.nav-actions {
flex-direction: column;
width: 80%;
max-width: 280px;
}
.nav-actions button { width: 100%; text-align: center; }
.icon-node { width: 38px; height: 38px; }
.icon-node svg { width: 18px; height: 18px; }
.icon-node-center { width: 52px; height: 52px; }
.icon-node-center svg { width: 24px; height: 24px; }
.splash { width: 80px; height: 80px; }
.hero-card { padding: 60px 20px 60px; min-height: auto; }
.brands { gap: 32px; }
}
@media (max-width: 480px) {
.hero-card { border-radius: 16px; }
.brands { gap: 24px; }
}
`;const XeroLogo = () => (
);export default function XeroHero() {
const [menuOpen, setMenuOpen] = useState(false);
const rootRef = useRef(null);
const pipelineRef = useRef(null);
const nodeStackRef = useRef(null);
const nodeXRef = useRef(null);
const nodeShieldRef = useRef(null);
const beamGlowRef = useRef(null);
const beamCoreRef = useRef(null);
const gradientRef = useRef(null);
const splashRef = useRef(null);
const coordsRef = useRef({ startX: 0, midX: 0, endX: 0, startY: 0, midY: 0, endY: 0 });// Load Inter font via
useEffect(() => {
const id = "inter-font-link";
if (!document.getElementById(id)) {
const link = document.createElement("link");
link.id = id;
link.rel = "stylesheet";
link.href =
"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap";
document.head.appendChild(link);
}
}, []);const toggleMenu = useCallback(() => {
setMenuOpen((prev) => {
const root = rootRef.current;
if (root) root.style.overflow = prev ? "" : "hidden";
return !prev;
});
}, []);useEffect(() => {
const pipeline = pipelineRef.current;
const nodeStack = nodeStackRef.current;
const nodeX = nodeXRef.current;
const nodeShield = nodeShieldRef.current;
const glowPath = beamGlowRef.current;
const corePath = beamCoreRef.current;
const gradient = gradientRef.current;
const splash = splashRef.current;if (
!pipeline ||
!nodeStack ||
!nodeX ||
!nodeShield ||
!glowPath ||
!corePath ||
!gradient ||
!splash
)
return;function computePath() {
const pRect = pipeline.getBoundingClientRect();
const sRect = nodeStack.getBoundingClientRect();
const xRect = nodeX.getBoundingClientRect();
const shRect = nodeShield.getBoundingClientRect();const startX = sRect.left + sRect.width / 2 - pRect.left;
const startY = sRect.top + sRect.height / 2 - pRect.top;
const midX = xRect.left + xRect.width / 2 - pRect.left;
const midY = xRect.top + xRect.height / 2 - pRect.top;
const endX = shRect.left + shRect.width / 2 - pRect.left;
const endY = shRect.top + shRect.height / 2 - pRect.top;coordsRef.current = { startX, startY, midX, midY, endX, endY };const d = `M ${startX},${startY} L ${midX},${midY} L ${endX},${endY}`;
glowPath.setAttribute("d", d);
corePath.setAttribute("d", d);
}// Delay initial compute so layout is settled
const initTimer = setTimeout(computePath, 60);const onResize = () => computePath();
window.addEventListener("resize", onResize);let state = "p1";
let lastStateChange = performance.now();
let rafId;function loop(now) {
const elapsed = now - lastStateChange;
const c = coordsRef.current;
const totalSpan = c.endX - c.startX;
const halfW = Math.max(totalSpan * 0.05, 10);if (state === "p1") {
const t = Math.min(elapsed / 800, 1);
// Interpolate from startX to midX
const currentX = c.startX + t * (c.midX - c.startX);gradient.setAttribute("x1", String(currentX - halfW));
gradient.setAttribute("x2", String(currentX + halfW));
gradient.setAttribute("y1", String(c.startY));
gradient.setAttribute("y2", String(c.startY));glowPath.style.opacity = "0.6";
corePath.style.opacity = "1";if (t < 0.8) nodeStack.classList.add("active");
else nodeStack.classList.remove("active");if (t >= 1) {
nodeStack.classList.remove("active");
state = "splash";
lastStateChange = now;
glowPath.style.opacity = "0";
corePath.style.opacity = "0";
splash.classList.add("animate");
}
} else if (state === "splash") {
if (elapsed >= 800) {
state = "p2";
lastStateChange = now;
splash.classList.remove("animate");
glowPath.style.opacity = "0.6";
corePath.style.opacity = "1";
}
} else if (state === "p2") {
const t = Math.min(elapsed / 800, 1);
// Interpolate from midX to endX
const currentX = c.midX + t * (c.endX - c.midX);gradient.setAttribute("x1", String(currentX - halfW));
gradient.setAttribute("x2", String(currentX + halfW));
gradient.setAttribute("y1", String(c.midY));
gradient.setAttribute("y2", String(c.midY));if (t > 0.2) nodeShield.classList.add("active");
else nodeShield.classList.remove("active");if (t >= 1) {
nodeShield.classList.remove("active");
state = "idle";
lastStateChange = now;
glowPath.style.opacity = "0";
corePath.style.opacity = "0";
}
} else if (state === "idle") {
if (elapsed >= 1000) {
state = "p1";
lastStateChange = now;
}
}rafId = requestAnimationFrame(loop);
}rafId = requestAnimationFrame(loop);return () => {
clearTimeout(initTimer);
cancelAnimationFrame(rafId);
window.removeEventListener("resize", onResize);
};
}, []);return (
{/* NAV */}{/* HERO CARD */}{/* ICON PIPELINE */} {/* BRANDS */}
);
}
{/* Left node – layers */}
{/* Center node */}
{/* HERO TEXT */}The simple way encryption your data
Fully managed data encrypting service and annotation
platform for teams of all industries.
Expedia
asana
zenefits
HubSpt
loom