Initial commit: Staging recruitment venture website

This commit is contained in:
Ozzy (AI Assistant) 2026-07-27 19:47:10 +00:00
commit 089ea7eb65
8 changed files with 900 additions and 0 deletions

106
contact.html Normal file
View 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>&copy; 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
View 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
View 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>&copy; 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
View file

@ -0,0 +1 @@
iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAEuUlEQVR4nO3BAQ0AAADCoPdPbQ43oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIBLcQ8AAa0jZQAAAABJRU5ErkJggg==

107
index.html Normal file
View 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>&copy; 2026 Syntropy Talent. All rights reserved.</p>
</div>
</footer>
<script src="js/script.js"></script>
</body>
</html>

118
job-seeker.html Normal file
View 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>&copy; 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
View 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);
});

View 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