Files
ai-recruit-site-template/public/index.html
Mikael Westöö ac21e428a5 Convert to template with dynamic configuration
Add comprehensive environment-based configuration system:
- Created config.js module to centralize all environment variables
- Updated server.js to use config module for all settings
- Added /api/config endpoint to expose company info to frontend
- Created init.js to dynamically inject config into HTML pages
- Updated .env.example with comprehensive configuration options
- Added data attributes to index.html for dynamic content
- Updated Dockerfile to include config.js

This allows users to customize:
- Company name, tagline, and description
- Branding colors (primary, accent, dark)
- Contact information (email, phone, address, hours)
- Social media links
- About page content
- Services offered

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2026-01-23 23:26:57 +01:00

245 lines
13 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ryans Recruit Firm - Find Your Dream Job</title>
<link rel="stylesheet" href="/css/styles.css">
<script src="/js/init.js"></script>
</head>
<body>
<header>
<nav class="container">
<div class="logo" data-company-name>Ryans Recruit Firm</div>
<ul class="nav-links">
<li><a href="/" class="active">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/services">Services</a></li>
<li><a href="/jobs">Jobs</a></li>
<li><a href="/contact">Contact</a></li>
<li><a href="/admin/login" class="btn btn-primary btn-sm">Admin</a></li>
</ul>
</nav>
</header>
<section class="hero">
<div class="container">
<h1 data-company-tagline>Your Career Success Is Our Mission</h1>
<p data-company-description>Connecting talented professionals with leading companies worldwide</p>
<div style="display: flex; gap: 1rem; justify-content: center; margin-top: 2rem;">
<a href="/jobs" class="btn btn-primary btn-lg">Browse Jobs</a>
<a href="/contact" class="btn btn-secondary btn-lg">Get in Touch</a>
</div>
</div>
</section>
<section>
<div class="container">
<div class="section-title">
<h2>Why Choose <span data-company-name>Ryans Recruit Firm</span>?</h2>
<p>We're committed to finding the perfect match for both candidates and employers</p>
</div>
<div class="grid grid-3">
<div class="card text-center">
<div style="font-size: 3rem; margin-bottom: 1rem;">🎯</div>
<h3>Targeted Matching</h3>
<p>Our advanced screening process ensures we match the right talent with the right opportunity, saving time and increasing success rates.</p>
</div>
<div class="card text-center">
<div style="font-size: 3rem; margin-bottom: 1rem;">🌍</div>
<h3>Global Network</h3>
<p>Access to positions across multiple industries and locations, from startups to Fortune 500 companies worldwide.</p>
</div>
<div class="card text-center">
<div style="font-size: 3rem; margin-bottom: 1rem;">🤝</div>
<h3>Personal Support</h3>
<p>Dedicated recruiters guide you through every step, from application to offer negotiation and beyond.</p>
</div>
<div class="card text-center">
<div style="font-size: 3rem; margin-bottom: 1rem;"></div>
<h3>Fast Process</h3>
<p>Streamlined recruitment process with quick turnaround times, getting you in front of hiring managers faster.</p>
</div>
<div class="card text-center">
<div style="font-size: 3rem; margin-bottom: 1rem;">💼</div>
<h3>Industry Experts</h3>
<p>Our team has deep expertise across technology, finance, healthcare, and more, understanding what companies need.</p>
</div>
<div class="card text-center">
<div style="font-size: 3rem; margin-bottom: 1rem;">🎓</div>
<h3>Career Coaching</h3>
<p>Free resume reviews, interview preparation, and career advice to help you land your dream role.</p>
</div>
</div>
</div>
</section>
<section style="background: var(--bg-white);">
<div class="container">
<div class="section-title">
<h2>Our Success Stories</h2>
<p>Hear from professionals who found their dream jobs through us</p>
</div>
<div class="grid grid-2">
<div class="card">
<p style="font-style: italic; color: var(--text-light); margin-bottom: 1rem;">
"Ryans Recruit Firm found me the perfect role in just two weeks. Their team understood exactly what I was looking for and matched me with a company that aligned with my career goals. Highly recommended!"
</p>
<div style="display: flex; align-items: center; gap: 1rem;">
<div style="width: 50px; height: 50px; border-radius: 50%; background: var(--primary-color); display: flex; align-items: center; justify-content: center; color: white; font-weight: 700;">SJ</div>
<div>
<div style="font-weight: 600;">Sarah Johnson</div>
<div style="font-size: 0.875rem; color: var(--text-light);">Senior Software Engineer</div>
</div>
</div>
</div>
<div class="card">
<p style="font-style: italic; color: var(--text-light); margin-bottom: 1rem;">
"The personalized support I received was incredible. From resume refinement to interview coaching, they were with me every step of the way. I'm now working at my dream company!"
</p>
<div style="display: flex; align-items: center; gap: 1rem;">
<div style="width: 50px; height: 50px; border-radius: 50%; background: var(--accent-color); display: flex; align-items: center; justify-content: center; color: white; font-weight: 700;">MC</div>
<div>
<div style="font-weight: 600;">Michael Chen</div>
<div style="font-size: 0.875rem; color: var(--text-light);">Product Manager</div>
</div>
</div>
</div>
<div class="card">
<p style="font-style: italic; color: var(--text-light); margin-bottom: 1rem;">
"As a hiring manager, I've worked with many recruiting firms, but Ryans stands out. They consistently deliver high-quality candidates who are well-screened and truly interested in our opportunities."
</p>
<div style="display: flex; align-items: center; gap: 1rem;">
<div style="width: 50px; height: 50px; border-radius: 50%; background: var(--success); display: flex; align-items: center; justify-content: center; color: white; font-weight: 700;">EP</div>
<div>
<div style="font-weight: 600;">Emily Parker</div>
<div style="font-size: 0.875rem; color: var(--text-light);">HR Director</div>
</div>
</div>
</div>
<div class="card">
<p style="font-style: italic; color: var(--text-light); margin-bottom: 1rem;">
"After months of unsuccessful job hunting, Ryans helped me land a position that exceeded my salary expectations. Their expertise in negotiation made a huge difference!"
</p>
<div style="display: flex; align-items: center; gap: 1rem;">
<div style="width: 50px; height: 50px; border-radius: 50%; background: var(--warning); display: flex; align-items: center; justify-content: center; color: white; font-weight: 700;">DK</div>
<div>
<div style="font-weight: 600;">David Kim</div>
<div style="font-size: 0.875rem; color: var(--text-light);">Data Scientist</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="section-title">
<h2>How It Works</h2>
<p>Getting started is simple and straightforward</p>
</div>
<div class="grid grid-4">
<div class="text-center">
<div style="width: 80px; height: 80px; border-radius: 50%; background: var(--primary-color); display: flex; align-items: center; justify-content: center; color: white; font-size: 2rem; font-weight: 700; margin: 0 auto 1rem;">1</div>
<h4>Browse Jobs</h4>
<p>Explore our curated job listings across various industries and locations.</p>
</div>
<div class="text-center">
<div style="width: 80px; height: 80px; border-radius: 50%; background: var(--primary-color); display: flex; align-items: center; justify-content: center; color: white; font-size: 2rem; font-weight: 700; margin: 0 auto 1rem;">2</div>
<h4>Submit Application</h4>
<p>Apply with your resume and let us know what you're looking for.</p>
</div>
<div class="text-center">
<div style="width: 80px; height: 80px; border-radius: 50%; background: var(--primary-color); display: flex; align-items: center; justify-content: center; color: white; font-size: 2rem; font-weight: 700; margin: 0 auto 1rem;">3</div>
<h4>Get Matched</h4>
<p>Our team reviews your profile and matches you with suitable opportunities.</p>
</div>
<div class="text-center">
<div style="width: 80px; height: 80px; border-radius: 50%; background: var(--primary-color); display: flex; align-items: center; justify-content: center; color: white; font-size: 2rem; font-weight: 700; margin: 0 auto 1rem;">4</div>
<h4>Start Your Journey</h4>
<p>Receive support throughout interviews and land your dream job!</p>
</div>
</div>
<div class="text-center" style="margin-top: 3rem;">
<a href="/jobs" class="btn btn-primary btn-lg">View Open Positions</a>
</div>
</div>
</section>
<section style="background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%); color: white;">
<div class="container text-center">
<h2 style="color: white; margin-bottom: 1rem;">Ready to Take the Next Step?</h2>
<p style="color: rgba(255, 255, 255, 0.9); font-size: 1.125rem; margin-bottom: 2rem;">
Join thousands of professionals who have found their dream jobs through Ryans Recruit Firm
</p>
<div style="display: flex; gap: 1rem; justify-content: center;">
<a href="/jobs" class="btn btn-lg" style="background: white; color: var(--primary-color);">Browse Jobs</a>
<a href="/contact" class="btn btn-secondary btn-lg">Contact Us</a>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="footer-content">
<div class="footer-section">
<h3 data-company-name>Ryans Recruit Firm</h3>
<p style="color: rgba(255, 255, 255, 0.8);" data-company-description>
Your trusted partner in career advancement and talent acquisition.
</p>
</div>
<div class="footer-section">
<h3>Quick Links</h3>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About Us</a></li>
<li><a href="/services">Services</a></li>
<li><a href="/jobs">Job Listings</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</div>
<div class="footer-section">
<h3>For Employers</h3>
<ul>
<li><a href="/contact">Post a Job</a></li>
<li><a href="/contact">Our Process</a></li>
<li><a href="/contact">Pricing</a></li>
</ul>
</div>
<div class="footer-section">
<h3>Contact</h3>
<ul>
<li>Email: <a href="mailto:info@ryansrecruit.com" data-contact-email>info@ryansrecruit.com</a></li>
<li>Phone: <a href="tel:+15551234567" data-contact-phone>+1 (555) 123-4567</a></li>
<li>Hours: <span data-business-hours>Mon-Fri 9AM-6PM EST</span></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>&copy; 2026 Ryans Recruit Firm. All rights reserved.</p>
</div>
</div>
</footer>
</body>
</html>