Initial commit: Staging recruitment venture website
This commit is contained in:
Ozzy (AI Assistant)
commit
089ea7eb65
8 changed files with 900 additions and 0 deletions
106
contact.html
Normal file
106
contact.html
Normal file
|
|
@ -0,0 +1,106 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Contact - Syntropy Talent</title>
|
||||||
|
<meta name="description" content="Contact us for recruitment services">
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="css/style.css">
|
||||||
|
<link rel="icon" type="image/png" href="favicon.png">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- ===== Staging Banner ===== -->
|
||||||
|
<div class="staging-banner">
|
||||||
|
⚠️ STAGING SITE — RecruitmentVenture-Staging
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ===== Header ===== -->
|
||||||
|
<header class="site-header">
|
||||||
|
<div class="container">
|
||||||
|
<h1 class="logo">Syntropy Talent</h1>
|
||||||
|
<nav class="nav">
|
||||||
|
<a href="index.html">Home</a>
|
||||||
|
<a href="job-seeker.html">Job Seeker</a>
|
||||||
|
<a href="employer.html">Employer</a>
|
||||||
|
<a href="contact.html">Contact</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- ===== Main Content ===== -->
|
||||||
|
<main class="container">
|
||||||
|
<div class="page-header">
|
||||||
|
<h2>Contact Us</h2>
|
||||||
|
<p>Get in touch with our recruitment team</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content-grid">
|
||||||
|
<div class="contact-info">
|
||||||
|
<h3>Get in Touch</h3>
|
||||||
|
<div class="info-item">
|
||||||
|
<strong>Address:</strong>
|
||||||
|
<p>Syntropy Talent<br>Business Center<br>123 Corporate Avenue</p>
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
<strong>Phone:</strong>
|
||||||
|
<p>+1 (555) 123-4567</p>
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
<strong>Email:</strong>
|
||||||
|
<p>info@syntropytalent.com</p>
|
||||||
|
</div>
|
||||||
|
<div class="info-item">
|
||||||
|
<strong>Business Hours:</strong>
|
||||||
|
<p>Monday - Friday: 9:00 AM - 6:00 PM</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="contact-form-section">
|
||||||
|
<h3>Send us a Message</h3>
|
||||||
|
<form id="contactForm" class="contact-form">
|
||||||
|
<div class="form-row">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="c-name">Name *</label>
|
||||||
|
<input type="text" id="c-name" name="name" required>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="c-email">Email *</label>
|
||||||
|
<input type="email" id="c-email" name="email" required>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="c-subject">Subject *</label>
|
||||||
|
<input type="text" id="c-subject" name="subject" required>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="c-message">Message *</label>
|
||||||
|
<textarea id="c-message" name="message" rows="5" required></textarea>
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="btn btn-primary">Send Message</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!-- ===== Footer ===== -->
|
||||||
|
<footer class="site-footer">
|
||||||
|
<div class="container">
|
||||||
|
<p>© 2026 Syntropy Talent. All rights reserved.</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="js/script.js"></script>
|
||||||
|
<script>
|
||||||
|
// Form handling for staging
|
||||||
|
document.getElementById('contactForm')?.addEventListener('submit', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
alert('Message sent! (In production, this would send data to ERPNext)');
|
||||||
|
this.reset();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
346
css/style.css
Normal file
346
css/style.css
Normal file
|
|
@ -0,0 +1,346 @@
|
||||||
|
/* ===== Reset & Base Styles ===== */
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--primary: #2563eb;
|
||||||
|
--primary-dark: #1d4ed8;
|
||||||
|
--secondary: #64748b;
|
||||||
|
--light: #f8fafc;
|
||||||
|
--dark: #1e293b;
|
||||||
|
--white: #ffffff;
|
||||||
|
--gray-50: #f1f5f9;
|
||||||
|
--gray-100: #e2e8f0;
|
||||||
|
--shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||||
|
color: var(--dark);
|
||||||
|
background-color: var(--white);
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Header ===== */
|
||||||
|
.site-header {
|
||||||
|
background-color: var(--white);
|
||||||
|
border-bottom: 1px solid var(--gray-100);
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-header .container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 1rem 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav a {
|
||||||
|
margin-left: 2rem;
|
||||||
|
color: var(--dark);
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav a:hover {
|
||||||
|
color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Staging Banner ===== */
|
||||||
|
.staging-banner {
|
||||||
|
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
padding: 0.5rem;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 500;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Hero Section ===== */
|
||||||
|
.hero {
|
||||||
|
background: linear-gradient(135deg, var(--primary) 0%, #1e40af 100%);
|
||||||
|
color: var(--white);
|
||||||
|
padding: 4rem 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero h2 {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero p {
|
||||||
|
font-size: 1.125rem;
|
||||||
|
opacity: 0.9;
|
||||||
|
max-width: 600px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Section ===== */
|
||||||
|
.section {
|
||||||
|
padding: 4rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section h3 {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1.875rem;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
color: var(--dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Values Grid ===== */
|
||||||
|
.values-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||||
|
gap: 2rem;
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value-item {
|
||||||
|
text-align: center;
|
||||||
|
padding: 2rem;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: var(--gray-50);
|
||||||
|
transition: transform 0.2s, box-shadow 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value-item:hover {
|
||||||
|
transform: translateY(-4px);
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.value-item h4 {
|
||||||
|
color: var(--primary);
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== How It Works ===== */
|
||||||
|
.how-it-works .steps {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||||
|
gap: 2rem;
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step {
|
||||||
|
text-align: center;
|
||||||
|
padding: 2rem;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: var(--white);
|
||||||
|
border: 1px solid var(--gray-100);
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-number {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
background: var(--primary);
|
||||||
|
color: white;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-weight: 700;
|
||||||
|
margin: 0 auto 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step h4 {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== CTA Section ===== */
|
||||||
|
.cta {
|
||||||
|
background: var(--gray-50);
|
||||||
|
text-align: center;
|
||||||
|
padding: 4rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta h2 {
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-buttons {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 1rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Buttons ===== */
|
||||||
|
.btn {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0.75rem 2rem;
|
||||||
|
text-decoration: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-weight: 600;
|
||||||
|
transition: all 0.2s;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background: var(--primary);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover {
|
||||||
|
background: var(--primary-dark);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
background: transparent;
|
||||||
|
color: var(--primary);
|
||||||
|
border: 2px solid var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary:hover {
|
||||||
|
background: var(--primary);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Forms ===== */
|
||||||
|
.form-container {
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-intro {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-intro h3 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-form {
|
||||||
|
background: var(--white);
|
||||||
|
padding: 2rem;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-row {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 1rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group label {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group input,
|
||||||
|
.form-group select,
|
||||||
|
.form-group textarea {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.75rem;
|
||||||
|
border: 1px solid var(--gray-100);
|
||||||
|
border-radius: 6px;
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 1rem;
|
||||||
|
transition: border-color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group input:focus,
|
||||||
|
.form-group select:focus,
|
||||||
|
.form-group textarea:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Footer ===== */
|
||||||
|
.site-footer {
|
||||||
|
background: var(--dark);
|
||||||
|
color: var(--white);
|
||||||
|
text-align: center;
|
||||||
|
padding: 2rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Responsive ===== */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.hero h2 {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-row {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-buttons {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.values-grid,
|
||||||
|
.how-it-works .steps {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-header .container {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.container {
|
||||||
|
padding: 0 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section {
|
||||||
|
padding: 2rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
padding: 2rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-container {
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
113
employer.html
Normal file
113
employer.html
Normal file
|
|
@ -0,0 +1,113 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Employer Inquiry - Syntropy Talent</title>
|
||||||
|
<meta name="description" content="Learn about our recruitment services and submit your hiring needs">
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="css/style.css">
|
||||||
|
<link rel="icon" type="image/png" href="favicon.png">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- ===== Staging Banner ===== -->
|
||||||
|
<div class="staging-banner">
|
||||||
|
⚠️ STAGING SITE — RecruitmentVenture-Staging
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ===== Header ===== -->
|
||||||
|
<header class="site-header">
|
||||||
|
<div class="container">
|
||||||
|
<h1 class="logo">Syntropy Talent</h1>
|
||||||
|
<nav class="nav">
|
||||||
|
<a href="../index.html">Home</a>
|
||||||
|
<a href="job-seeker.html">Job Seeker</a>
|
||||||
|
<a href="employer.html">Employer</a>
|
||||||
|
<a href="../contact.html">Contact</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- ===== Main Content ===== -->
|
||||||
|
<main class="container">
|
||||||
|
<div class="page-header">
|
||||||
|
<h2>Employer Inquiry</h2>
|
||||||
|
<p>Tell us about your hiring needs and we'll help you find the right talent</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-container">
|
||||||
|
<div class="form-intro">
|
||||||
|
<h3>Looking to hire top talent?</h3>
|
||||||
|
<p>Submit your requirements and our team will reach out to discuss how we can help you find the perfect candidate.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ERPNext Web Form or Standalone Form -->
|
||||||
|
<form id="employerForm" class="contact-form">
|
||||||
|
<div class="form-row">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="emp-company">Company Name *</label>
|
||||||
|
<input type="text" id="emp-company" name="company_name" required>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="emp-contact">Contact Person *</label>
|
||||||
|
<input type="text" id="emp-contact" name="contact_name" required>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-row">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="emp-email">Email Address *</label>
|
||||||
|
<input type="email" id="emp-email" name="email" required>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="emp-phone">Phone Number *</label>
|
||||||
|
<input type="tel" id="emp-phone" name="phone" required>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-row">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="emp-positions">Positions to Fill</label>
|
||||||
|
<input type="number" id="emp-positions" name="positions" min="1" placeholder="Number of positions">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="emp-industry">Industry</label>
|
||||||
|
<select id="emp-industry" name="industry">
|
||||||
|
<option value="">Select an industry</option>
|
||||||
|
<option value="technology">Technology</option>
|
||||||
|
<option value="finance">Finance</option>
|
||||||
|
<option value="healthcare">Healthcare</option>
|
||||||
|
<option value="manufacturing">Manufacturing</option>
|
||||||
|
<option value="retail">Retail</option>
|
||||||
|
<option value="other">Other</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="emp-notes">Hiring Requirements & Notes *</label>
|
||||||
|
<textarea id="emp-notes" name="notes" rows="6" required placeholder="Please describe the roles, qualifications, salary range, timeline, and any other relevant details..."></textarea>
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="btn btn-primary">Submit Hiring Request</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!-- ===== Footer ===== -->
|
||||||
|
<footer class="site-footer">
|
||||||
|
<div class="container">
|
||||||
|
<p>© 2026 Syntropy Talent. All rights reserved.</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="js/script.js"></script>
|
||||||
|
<script>
|
||||||
|
// Form handling for staging
|
||||||
|
document.getElementById('employerForm')?.addEventListener('submit', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
alert('Hiring request submitted! (In production, this would send data to ERPNext)');
|
||||||
|
this.reset();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
1
favicon.png
Normal file
1
favicon.png
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAEuUlEQVR4nO3BAQ0AAADCoPdPbQ43oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIBLcQ8AAa0jZQAAAABJRU5ErkJggg==
|
||||||
107
index.html
Normal file
107
index.html
Normal file
|
|
@ -0,0 +1,107 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Syntropy Talent - Recruitment & Staffing</title>
|
||||||
|
<meta name="description" content="Professional recruitment and temp agency connecting job seekers with employers">
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="css/style.css">
|
||||||
|
<link rel="icon" type="image/png" href="favicon.png">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- ===== Staging Banner ===== -->
|
||||||
|
<div class="staging-banner">
|
||||||
|
⚠️ STAGING SITE — RecruitmentVenture-Staging
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ===== Header ===== -->
|
||||||
|
<header class="site-header">
|
||||||
|
<div class="container">
|
||||||
|
<h1 class="logo">Syntropy Talent</h1>
|
||||||
|
<nav class="nav">
|
||||||
|
<a href="index.html">Home</a>
|
||||||
|
<a href="job-seeker.html">For Job Seekers</a>
|
||||||
|
<a href="employer.html">For Employers</a>
|
||||||
|
<a href="contact.html">Contact</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- ===== Hero Section ===== -->
|
||||||
|
<section class="hero">
|
||||||
|
<div class="container">
|
||||||
|
<h2>Connecting Talent with Opportunity</h2>
|
||||||
|
<p>Professional recruitment solutions for job seekers and hiring managers alike.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ===== Value Proposition ===== -->
|
||||||
|
<section class="section values">
|
||||||
|
<div class="container">
|
||||||
|
<h3>Why Choose Us?</h3>
|
||||||
|
<div class="values-grid">
|
||||||
|
<div class="value-item">
|
||||||
|
<h4>Professional Network</h4>
|
||||||
|
<p>Access to a curated network of qualified professionals across industries.</p>
|
||||||
|
</div>
|
||||||
|
<div class="value-item">
|
||||||
|
<h4>Streamlined Process</h4>
|
||||||
|
<p>Efficient matching between candidates and opportunities.</p>
|
||||||
|
</div>
|
||||||
|
<div class="value-item">
|
||||||
|
<h4>Expert Support</h4>
|
||||||
|
<p>Dedicated team to guide both job seekers and employers through the process.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ===== How It Works ===== -->
|
||||||
|
<section class="section how-it-works">
|
||||||
|
<div class="container">
|
||||||
|
<h3>How It Works</h3>
|
||||||
|
<div class="steps">
|
||||||
|
<div class="step">
|
||||||
|
<div class="step-number">1</div>
|
||||||
|
<h4>Submit Your Details</h4>
|
||||||
|
<p>Job seekers: Apply through our secure form. Employers: Post your needs.</p>
|
||||||
|
</div>
|
||||||
|
<div class="step">
|
||||||
|
<div class="step-number">2</div>
|
||||||
|
<h4>Professional Matching</h4>
|
||||||
|
<p>Our team reviews and matches you with suitable opportunities.</p>
|
||||||
|
</div>
|
||||||
|
<div class="step">
|
||||||
|
<div class="step-number">3</div>
|
||||||
|
<h4>Interview & Placement</h4>
|
||||||
|
<p>We facilitate the interview process and support successful placement.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ===== Call to Action ===== -->
|
||||||
|
<section class="section cta">
|
||||||
|
<div class="container">
|
||||||
|
<h2>Ready to Get Started?</h2>
|
||||||
|
<div class="cta-buttons">
|
||||||
|
<a href="job-seeker.html" class="btn btn-primary">I'm a Job Seeker</a>
|
||||||
|
<a href="employer.html" class="btn btn-secondary">I'm Hiring</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ===== Footer ===== -->
|
||||||
|
<footer class="site-footer">
|
||||||
|
<div class="container">
|
||||||
|
<p>© 2026 Syntropy Talent. All rights reserved.</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="js/script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
118
job-seeker.html
Normal file
118
job-seeker.html
Normal file
|
|
@ -0,0 +1,118 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Job Seeker Application - Syntropy Talent</title>
|
||||||
|
<meta name="description" content="Submit your profile to be considered for job opportunities">
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="css/style.css">
|
||||||
|
<link rel="icon" type="image/png" href="favicon.png">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- ===== Staging Banner ===== -->
|
||||||
|
<div class="staging-banner">
|
||||||
|
⚠️ STAGING SITE — RecruitmentVenture-Staging
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ===== Header ===== -->
|
||||||
|
<header class="site-header">
|
||||||
|
<div class="container">
|
||||||
|
<h1 class="logo">Syntropy Talent</h1>
|
||||||
|
<nav class="nav">
|
||||||
|
<a href="../index.html">Home</a>
|
||||||
|
<a href="job-seeker.html">Job Seeker</a>
|
||||||
|
<a href="../employer.html">Employer</a>
|
||||||
|
<a href="../contact.html">Contact</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- ===== Main Content ===== -->
|
||||||
|
<main class="container">
|
||||||
|
<div class="page-header">
|
||||||
|
<h2>Job Seeker Application</h2>
|
||||||
|
<p>Submit your information to be considered for open positions</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-container">
|
||||||
|
<div class="form-intro">
|
||||||
|
<h3>Looking for your next opportunity?</h3>
|
||||||
|
<p>Fill out the form below with your details and we'll get back to you with suitable opportunities.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ERPNext Web Form Embed or Standalone Form -->
|
||||||
|
<form id="jobSeekerForm" class="contact-form">
|
||||||
|
<div class="form-row">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="js-name">Full Name *</label>
|
||||||
|
<input type="text" id="js-name" name="name" required>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="js-email">Email Address *</label>
|
||||||
|
<input type="email" id="js-email" name="email" required>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-row">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="js-phone">Phone Number *</label>
|
||||||
|
<input type="tel" id="js-phone" name="phone" required>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="js-industry">Industry Preference</label>
|
||||||
|
<select id="js-industry" name="industry">
|
||||||
|
<option value="">Select an industry</option>
|
||||||
|
<option value="technology">Technology</option>
|
||||||
|
<option value="finance">Finance</option>
|
||||||
|
<option value="healthcare">Healthcare</option>
|
||||||
|
<option value="manufacturing">Manufacturing</option>
|
||||||
|
<option value="retail">Retail</option>
|
||||||
|
<option value="other">Other</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-row">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="js-experience">Experience Level</label>
|
||||||
|
<select id="js-experience" name="experience">
|
||||||
|
<option value="entry">Entry Level</option>
|
||||||
|
<option value="mid">Mid Level</option>
|
||||||
|
<option value="senior">Senior Level</option>
|
||||||
|
<option value="executive">Executive</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="js-resume">Resume/Portfolio URL</label>
|
||||||
|
<input type="url" id="js-resume" name="resume" placeholder="https://example.com/resume.pdf">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="js-notes">Additional Notes *</label>
|
||||||
|
<textarea id="js-notes" name="notes" rows="5" required></textarea>
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="btn btn-primary">Submit Application</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!-- ===== Footer ===== -->
|
||||||
|
<footer class="site-footer">
|
||||||
|
<div class="container">
|
||||||
|
<p>© 2026 Syntropy Talent. All rights reserved.</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="js/script.js"></script>
|
||||||
|
<script>
|
||||||
|
// Form handling for staging
|
||||||
|
document.getElementById('jobSeekerForm')?.addEventListener('submit', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
alert('Application submitted! (In production, this would send data to ERPNext)');
|
||||||
|
this.reset();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
85
js/script.js
Normal file
85
js/script.js
Normal file
|
|
@ -0,0 +1,85 @@
|
||||||
|
// Smooth scrolling for navigation links
|
||||||
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||||
|
anchor.addEventListener('click', function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
const target = document.querySelector(this.getAttribute('href'));
|
||||||
|
if (target) {
|
||||||
|
target.scrollIntoView({
|
||||||
|
behavior: 'smooth',
|
||||||
|
block: 'start'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Form validation and submission handling
|
||||||
|
function initializeForms() {
|
||||||
|
// Job seeker form
|
||||||
|
const jobSeekerForm = document.getElementById('jobSeekerForm');
|
||||||
|
if (jobSeekerForm) {
|
||||||
|
jobSeekerForm.addEventListener('submit', handleFormSubmit);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Employer form
|
||||||
|
const employerForm = document.getElementById('employerForm');
|
||||||
|
if (employerForm) {
|
||||||
|
employerForm.addEventListener('submit', handleFormSubmit);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Contact form
|
||||||
|
const contactForm = document.getElementById('contactForm');
|
||||||
|
if (contactForm) {
|
||||||
|
contactForm.addEventListener('submit', handleFormSubmit);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleFormSubmit(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
const form = e.target;
|
||||||
|
const formData = new FormData(form);
|
||||||
|
const formDataObject = Object.fromEntries(formData.entries());
|
||||||
|
|
||||||
|
console.log('Form submission:', {
|
||||||
|
formId: form.id,
|
||||||
|
data: formDataObject,
|
||||||
|
timestamp: new Date().toISOString()
|
||||||
|
});
|
||||||
|
|
||||||
|
// In production, this would be an API call to:
|
||||||
|
// 1. ERPNext Web Form endpoint, or
|
||||||
|
// 2. Your proxy server endpoint
|
||||||
|
|
||||||
|
alert('Form submitted successfully!\n\nIn production, this data would be sent to ERPNext.');
|
||||||
|
form.reset();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize when DOM is ready
|
||||||
|
if (document.readyState === 'loading') {
|
||||||
|
document.addEventListener('DOMContentLoaded', initializeForms);
|
||||||
|
} else {
|
||||||
|
initializeForms();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add smooth animations on scroll
|
||||||
|
const observerOptions = {
|
||||||
|
threshold: 0.1,
|
||||||
|
rootMargin: '0px 0px -50px 0px'
|
||||||
|
};
|
||||||
|
|
||||||
|
const observer = new IntersectionObserver((entries) => {
|
||||||
|
entries.forEach(entry => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
entry.target.style.opacity = '1';
|
||||||
|
entry.target.style.transform = 'translateY(0)';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, observerOptions);
|
||||||
|
|
||||||
|
// Observe form containers for animation
|
||||||
|
document.querySelectorAll('.form-container, .contact-form-section').forEach(el => {
|
||||||
|
el.style.opacity = '0';
|
||||||
|
el.style.transform = 'translateY(20px)';
|
||||||
|
el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
|
||||||
|
observer.observe(el);
|
||||||
|
});
|
||||||
24
pages/recruitment-venture-charter.md
Normal file
24
pages/recruitment-venture-charter.md
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
# Recruitment Venture Charter
|
||||||
|
|
||||||
|
## Purpose
|
||||||
|
Create and maintain a professional recruitment/temp agency website with separate interfaces for job seekers and hiring managers, integrated with ERPNext for form management and applicant tracking.
|
||||||
|
|
||||||
|
## Scope
|
||||||
|
- Two separate web forms (Job Seeker Application, Employer Inquiry)
|
||||||
|
- Professional landing page with value propositions
|
||||||
|
- Mobile responsive design
|
||||||
|
- Staging and production environments
|
||||||
|
- ERPNext integration for form submissions
|
||||||
|
|
||||||
|
## Success Criteria
|
||||||
|
- Live staging and production sites accessible
|
||||||
|
- Forms functional and submitting data to ERPNext
|
||||||
|
- Mobile responsive design
|
||||||
|
- Professional appearance with white/blue/gray palette
|
||||||
|
|
||||||
|
## Team
|
||||||
|
- **Project Manager:** Brendan (Content & Strategy)
|
||||||
|
- **Developer:** Ozzy (Implementation & Integration)
|
||||||
|
|
||||||
|
## Status
|
||||||
|
Initial planning phase - site structure and ERPNext forms to be created
|
||||||
Loading…
Add table
Add a link
Reference in a new issue