Files
docupulse/templates/public/careers.html
2025-06-24 09:32:50 +02:00

391 lines
18 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Careers - DocuPulse</title>
<meta name="description" content="Join the DocuPulse team and help us build the future of enterprise document management. Explore open positions and learn about our culture.">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link rel="stylesheet" href="{{ url_for('static', filename='css/colors.css') }}?v={{ 'css/colors.css'|asset_version }}">
<style>
.careers-section {
padding: 80px 0;
}
.culture-card {
background: var(--white);
border-radius: 20px;
padding: 40px;
box-shadow: 0 15px 35px var(--shadow-color);
height: 100%;
border: none;
transition: transform 0.3s ease;
}
.culture-card:hover {
transform: translateY(-5px);
}
.culture-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 25px;
color: white;
font-size: 2rem;
}
.job-card {
background: var(--white);
border-radius: 15px;
padding: 30px;
box-shadow: 0 10px 25px var(--shadow-color);
transition: transform 0.3s ease;
border: none;
cursor: pointer;
margin-bottom: 20px;
}
.job-card:hover {
transform: translateY(-5px);
}
.job-tag {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
color: white;
padding: 4px 12px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
display: inline-block;
margin-right: 10px;
margin-bottom: 10px;
}
.application-form {
background: var(--white);
border-radius: 20px;
padding: 40px;
box-shadow: 0 15px 35px var(--shadow-color);
}
.form-control {
border-radius: 10px;
border: 2px solid var(--border-color);
padding: 12px 15px;
}
.form-control:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 0.2rem var(--primary-opacity-15);
}
.gradient-text {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.team-photo {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
border-radius: 20px;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 4rem;
margin-bottom: 30px;
}
/* Button styles to match home page */
.btn-primary {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
border: none;
border-radius: 25px;
padding: 12px 30px;
font-weight: 600;
transition: all 0.3s ease;
}
.btn-primary:hover {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
transform: translateY(-2px);
box-shadow: 0 5px 15px var(--primary-opacity-15);
filter: brightness(1.1);
}
.btn-outline-primary {
border: 2px solid var(--primary-color);
color: var(--primary-color);
border-radius: 25px;
padding: 12px 30px;
font-weight: 600;
transition: all 0.3s ease;
}
.btn-outline-primary:hover {
background: rgba(var(--primary-color-rgb), 0.05);
border-color: var(--primary-color);
color: var(--primary-color);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(var(--primary-color-rgb), 0.1);
}
.btn-lg {
padding: 15px 40px;
font-size: 1.1rem;
}
</style>
</head>
<body>
{% include 'components/header_nav.html' %}
<!-- Hero Section -->
{% with
title="Join Our Team",
description="Help us build the future of enterprise document management. We're looking for passionate individuals who want to make a difference.",
title_size="4",
description_size="5"
%}
{% include 'components/hero_section.html' %}
{% endwith %}
<!-- Company Culture -->
<section class="careers-section">
<div class="container">
<div class="text-center mb-5">
<h2 class="display-5 fw-bold mb-3">Our Culture</h2>
<p class="lead text-muted">What makes DocuPulse a great place to work</p>
</div>
<div class="row g-4">
<div class="col-lg-4">
<div class="culture-card">
<div class="culture-icon">
<i class="fas fa-users"></i>
</div>
<h3 class="h4 fw-bold mb-3">Collaborative Environment</h3>
<p class="text-muted">We believe in the power of teamwork. Every voice matters, and we encourage open communication and knowledge sharing across all levels.</p>
</div>
</div>
<div class="col-lg-4">
<div class="culture-card">
<div class="culture-icon">
<i class="fas fa-rocket"></i>
</div>
<h3 class="h4 fw-bold mb-3">Innovation First</h3>
<p class="text-muted">We're constantly pushing boundaries and exploring new technologies. If you have an idea, we want to hear it and help you bring it to life.</p>
</div>
</div>
<div class="col-lg-4">
<div class="culture-card">
<div class="culture-icon">
<i class="fas fa-heart"></i>
</div>
<h3 class="h4 fw-bold mb-3">Work-Life Balance</h3>
<p class="text-muted">We understand that great work comes from happy, well-rested people. We offer flexible schedules and encourage taking time to recharge.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Company Stats -->
{% with stats=[
{'value': 15, 'suffix': '+', 'display': '15+', 'label': 'Team Members'},
{'value': 10, 'suffix': '+', 'display': '10+', 'label': 'Countries'},
{'value': 4.8, 'suffix': '', 'display': '4.8', 'label': 'Glassdoor Rating'},
{'value': 95, 'suffix': '%', 'display': '95%', 'label': 'Retention Rate'}
] %}
{% include 'components/animated_numbers.html' %}
{% endwith %}
<!-- Open Positions -->
<section id="positions" class="careers-section">
<div class="container">
<div class="text-center mb-5">
<h2 class="display-5 fw-bold mb-3">Open Positions</h2>
<p class="lead text-muted">Find your perfect role at DocuPulse</p>
</div>
<div class="row">
<div class="col-lg-8">
<!-- Engineering Positions -->
<div class="job-card">
<div class="d-flex justify-content-between align-items-start mb-3">
<div>
<h4 class="fw-bold mb-2">Senior Full Stack Engineer</h4>
<p class="text-muted mb-2">Engineering • Full-time • Remote</p>
</div>
<span class="job-tag">Remote</span>
</div>
<p class="text-muted mb-3">Join our engineering team to build scalable, secure, and user-friendly features for our enterprise document management platform.</p>
<div class="d-flex gap-2">
<span class="job-tag">Python</span>
<span class="job-tag">React</span>
<span class="job-tag">PostgreSQL</span>
<span class="job-tag">AWS</span>
</div>
</div>
<div class="job-card">
<div class="d-flex justify-content-between align-items-start mb-3">
<div>
<h4 class="fw-bold mb-2">DevOps Engineer</h4>
<p class="text-muted mb-2">Engineering • Full-time • Hybrid</p>
</div>
<span class="job-tag">Hybrid</span>
</div>
<p class="text-muted mb-3">Help us build and maintain our cloud infrastructure, ensuring high availability and security for our enterprise customers.</p>
<div class="d-flex gap-2">
<span class="job-tag">Docker</span>
<span class="job-tag">Kubernetes</span>
<span class="job-tag">AWS</span>
<span class="job-tag">Terraform</span>
</div>
</div>
<div class="job-card">
<div class="d-flex justify-content-between align-items-start mb-3">
<div>
<h4 class="fw-bold mb-2">Frontend Engineer</h4>
<p class="text-muted mb-2">Engineering • Full-time • Remote</p>
</div>
<span class="job-tag">Remote</span>
</div>
<p class="text-muted mb-3">Create beautiful, intuitive user interfaces that make document management effortless for our users.</p>
<div class="d-flex gap-2">
<span class="job-tag">React</span>
<span class="job-tag">TypeScript</span>
<span class="job-tag">CSS3</span>
<span class="job-tag">Bootstrap</span>
</div>
</div>
<!-- Product Positions -->
<div class="job-card">
<div class="d-flex justify-content-between align-items-start mb-3">
<div>
<h4 class="fw-bold mb-2">Product Manager</h4>
<p class="text-muted mb-2">Product • Full-time • Hybrid</p>
</div>
<span class="job-tag">Hybrid</span>
</div>
<p class="text-muted mb-3">Drive product strategy and execution, working closely with engineering and design teams to deliver exceptional user experiences.</p>
<div class="d-flex gap-2">
<span class="job-tag">Product Strategy</span>
<span class="job-tag">User Research</span>
<span class="job-tag">Agile</span>
<span class="job-tag">Analytics</span>
</div>
</div>
<!-- Sales Positions -->
<div class="job-card">
<div class="d-flex justify-content-between align-items-start mb-3">
<div>
<h4 class="fw-bold mb-2">Enterprise Sales Representative</h4>
<p class="text-muted mb-2">Sales • Full-time • Remote</p>
</div>
<span class="job-tag">Remote</span>
</div>
<p class="text-muted mb-3">Help enterprise organizations transform their document management processes with our innovative platform.</p>
<div class="d-flex gap-2">
<span class="job-tag">B2B Sales</span>
<span class="job-tag">Enterprise</span>
<span class="job-tag">SaaS</span>
<span class="job-tag">CRM</span>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="application-form">
<h4 class="fw-bold mb-4">General Application</h4>
<p class="text-muted mb-4">Don't see a perfect fit? Send us your resume and we'll keep you in mind for future opportunities.</p>
<form>
<div class="mb-3">
<label for="name" class="form-label">Full Name *</label>
<input type="text" class="form-control" id="name" required>
</div>
<div class="mb-3">
<label for="email" class="form-label">Email Address *</label>
<input type="email" class="form-control" id="email" required>
</div>
<div class="mb-3">
<label for="position" class="form-label">Position of Interest</label>
<select class="form-control" id="position">
<option value="">Select a position</option>
<option value="engineering">Engineering</option>
<option value="product">Product</option>
<option value="sales">Sales</option>
<option value="marketing">Marketing</option>
<option value="other">Other</option>
</select>
</div>
<div class="mb-3">
<label for="message" class="form-label">Why DocuPulse?</label>
<textarea class="form-control" id="message" rows="4" placeholder="Tell us why you'd like to join our team..."></textarea>
</div>
<div class="mb-3">
<label for="resume" class="form-label">Resume/CV</label>
<input type="file" class="form-control" id="resume" accept=".pdf,.doc,.docx">
</div>
<button type="submit" class="btn btn-primary w-100">
<i class="fas fa-paper-plane me-2"></i>Submit Application
</button>
</form>
</div>
</div>
</div>
</div>
</section>
<!-- Team Photo Section -->
<section class="careers-section" style="background-color: var(--bg-color);">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6">
<div class="team-photo">
<i class="fas fa-users"></i>
</div>
</div>
<div class="col-lg-6">
<h2 class="display-5 fw-bold mb-4">Meet Our Team</h2>
<p class="lead text-muted mb-4">We're a diverse group of passionate individuals from around the world, united by our mission to revolutionize document management.</p>
<p class="text-muted mb-4">Our team values creativity, collaboration, and continuous learning. We believe that the best solutions come from diverse perspectives and open dialogue.</p>
<a href="{{ url_for('public.about') }}" class="btn btn-outline-primary btn-lg">
<i class="fas fa-users me-2"></i>Learn More About Us
</a>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="careers-section">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8 text-center">
<h2 class="display-5 fw-bold mb-4">Ready to Join Us?</h2>
<p class="lead text-muted mb-5">Take the first step towards an exciting career at DocuPulse. We can't wait to meet you!</p>
<div class="d-flex justify-content-center gap-3 flex-wrap">
<a href="#positions" class="btn btn-primary btn-lg px-5 py-3">
<i class="fas fa-search me-2"></i>View All Positions
</a>
<a href="{{ url_for('public.contact') }}" class="btn btn-outline-primary btn-lg px-5 py-3">
<i class="fas fa-envelope me-2"></i>Get in Touch
</a>
</div>
</div>
</div>
</div>
</section>
{% include 'components/footer_nav.html' %}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>