adam/seahaven-site
1
0
Fork 0
mirror of https://github.com/Sea-Haven-Industries/seahaven-site.git synced 2026-10-03 03:23:14 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Improve careers pages UI/UX for readability, marketing, and conversion

Browse source 
- Add "Apply Now" CTA button to sticky sidebar on both job pages
- Add "Why Work Here" benefit cards section to careers landing
- Make salary visually prominent on job cards (own line, display font)
- Move "Why This Role Stands Out" above requirements on traveling maintenance page
- Add "Back to All Positions" link in hero on both job pages
- Add quick-scan summary callout at top of each job description
- Make entire job card clickable with hover lift effect
- Add team photo as careers hero background
- Consolidate fragmented requirement lists on traveling maintenance page
- Add JSON-LD JobPosting structured data for Google job search SEO
This commit is contained in:
Adam Moussa 2026-04-30 16:10:12 -04:00
parent 028a23b1cd
commit e291276f3b
3 changed files with 247 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

75
careers/dispatcher/index.html
View file

@ -27,6 +27,15 @@
.grecaptcha-badge { visibility: hidden; }
/* ── Job Details ── */
.back-link {
display: inline-block;
font-size: 0.875rem;
font-weight: 500;
color: var(--rose);
margin-top: 1rem;
transition: color 0.15s;
}
.back-link:hover { color: var(--rose-dark); }
.job-details { background: var(--surface); }
.job-layout {
display: grid;
@ -42,6 +51,17 @@
margin-bottom: 1.25rem;
margin-top: 2.5rem;
}
.job-summary {
font-size: 1.125rem;
font-weight: 600;
color: var(--text);
line-height: 1.6;
padding: 1.25rem 1.5rem;
margin-bottom: 2rem;
background: var(--rose-tint);
border-left: 3px solid var(--rose);
border-radius: 2px;
}
.job-content h2:first-child { margin-top: 0; }
.job-content p {
font-size: 0.9375rem;
@ -111,6 +131,12 @@
color: var(--text);
line-height: 1.5;
}
.sidebar-cta {
display: block;
width: 100%;
text-align: center;
margin-top: 0.75rem;
}
/* ── Application Form ── */
.apply-section { background: var(--warm-gray); }
@ -159,6 +185,49 @@
}
</style>
<script src="https://www.google.com/recaptcha/api.js?render=6Les66kUAAAAANyLrgkl7iuN4JUpNlB5upaMovI4"></script>
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "JobPosting",
"title": "Dispatcher",
"description": "Sea Haven Industries is looking for a highly organized, decisive Dispatcher to manage nationwide maintenance operations across industrial facilities. You'll be responsible for triaging and coordinating emergency and preventive work orders across the U.S., deciding in real time whether to deploy internal technicians or source external vendors.",
"datePosted": "2025-04-01",
"employmentType": "FULL_TIME",
"hiringOrganization": {
"@type": "Organization",
"name": "Sea Haven Industries",
"sameAs": "https://seahaven.com",
"logo": "https://seahaven.com/assets/images/seahaven-logo-nav-new.png"
},
"jobLocation": {
"@type": "Place",
"address": {
"@type": "PostalAddress",
"streetAddress": "710 Koehler Ave",
"addressLocality": "Ronkonkoma",
"addressRegion": "NY",
"postalCode": "11779",
"addressCountry": "US"
}
},
"baseSalary": {
"@type": "MonetaryAmount",
"currency": "USD",
"value": {
"@type": "QuantitativeValue",
"minValue": 72000,
"maxValue": 80000,
"unitText": "YEAR"
}
},
"jobBenefits": "PTO, 401(k) matching, hybrid flexibility",
"applicantLocationRequirements": {
"@type": "Country",
"name": "US"
},
"directApply": true
}
</script>
</head>
<body>
@ -203,6 +272,7 @@
Dispatcher
</nav>
<h1>Dispatcher</h1>
<a href="/careers/" class="back-link">&larr; Back to All Positions</a>
</div>
</section>
@ -213,6 +283,7 @@
<!-- Main Content -->
<div class="job-content">
<p class="job-summary">You&rsquo;re the control center for 50+ technicians across the U.S.&mdash;triaging emergency work orders, sourcing vendors, and making sure every job closes clean.</p>
<h2>About the Role</h2>
<p>Sea Haven Industries is looking for a highly organized, decisive Dispatcher to manage nationwide maintenance operations across industrial facilities. This is not a typical scheduling role. You&rsquo;ll be responsible for triaging and coordinating emergency and preventive work orders across the U.S.&mdash;often under tight SLAs&mdash;deciding in real time whether to deploy internal technicians or source external vendors.</p>
<p>You are the control center. When something breaks, you make sure the right person is on-site, on time, and the job gets closed&mdash;without needing to be chased. If you naturally take ownership, stay calm under pressure, and don&rsquo;t let things slip, you&rsquo;ll do well here.</p>
@ -284,6 +355,8 @@
<div class="sidebar-item-label">Work Location</div>
<div class="sidebar-item-value">Ronkonkoma, NY<br>Hybrid flexibility available</div>
</div>
<a href="#apply-section" class="btn btn-primary sidebar-cta">Apply Now</a>
</aside>
</div>
@ -291,7 +364,7 @@
</section>
<!-- ── Application Form ── -->
<section class="apply-section section">
<section class="apply-section section" id="apply-section">
<div class="container">
<h2 class="display-md">Apply For This Position</h2>
<div class="form-success" id="form-success" style="display:none; background: var(--rose-tint); border-left: 3px solid var(--rose); padding: 1.25rem 1.5rem; margin-bottom: 2rem; border-radius: 2px;">

87
careers/index.html
View file

@ -35,18 +35,57 @@
max-width: 680px;
}
/* ── Careers Hero (override) ── */
.careers-hero {
background: linear-gradient(rgba(26,24,20,0.7), rgba(26,24,20,0.75)),
url('/assets/images/team-at-work.webp') center/cover no-repeat;
padding: 160px 0 80px;
}
/* ── Why Work Here ── */
.why-section { background: var(--surface); }
.why-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(1.5rem, 3vw, 2rem);
}
.why-card {
padding: clamp(1.5rem, 3vw, 2rem);
background: var(--body-bg);
border-radius: 3px;
border-top: 3px solid var(--rose);
}
.why-card h3 {
font-family: var(--font-display);
font-size: 1.125rem;
line-height: 1.3;
margin-bottom: 0.625rem;
}
.why-card p {
font-size: 0.875rem;
color: var(--text-muted);
line-height: 1.7;
}
/* ── Open Positions ── */
.positions-section { background: var(--warm-gray); }
.positions-section h2 {
margin-bottom: clamp(2rem, 4vw, 3rem);
}
.job-card {
position: relative;
background: var(--surface);
border-left: 4px solid var(--rose);
border-radius: 3px;
padding: clamp(1.5rem, 3vw, 2.5rem);
margin-bottom: 1.5rem;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
transition: box-shadow 0.2s, transform 0.2s;
cursor: pointer;
}
.job-card:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
transform: translateY(-2px);
}
.job-card h3 {
font-family: var(--font-display);
@ -75,6 +114,12 @@
font-size: 0.875rem;
color: var(--text-muted);
}
.job-salary {
font-family: var(--font-display);
font-size: 1.125rem;
color: var(--text);
margin-bottom: 0.75rem;
}
.job-card > p {
color: var(--text-muted);
font-size: 0.9375rem;
@ -90,6 +135,11 @@
color: var(--rose);
transition: color 0.15s;
}
.job-link::after {
content: '';
position: absolute;
inset: 0;
}
.job-link:hover { color: var(--rose-dark); }
/* ── CTA Section ── */
@ -114,8 +164,13 @@
}
/* ── Responsive (page-specific) ── */
@media (max-width: 1024px) {
.why-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.job-meta { flex-direction: column; gap: 0.5rem; align-items: flex-start; }
.why-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
@ -156,7 +211,7 @@
</div>
<!-- ── Page Hero ── -->
<section class="page-hero">
<section class="page-hero careers-hero">
<div class="container">
<nav class="breadcrumb" aria-label="Breadcrumb">
<a href="/">Home</a>
@ -183,10 +238,10 @@
<article class="job-card">
<h3>Dispatcher</h3>
<div class="job-salary">$72,000&ndash;$80,000 per year</div>
<div class="job-meta">
<span class="job-badge">Full-time</span>
<span class="job-meta-item">Ronkonkoma, NY 11779</span>
<span class="job-meta-item">$72,000-80,000 per year</span>
<span class="job-meta-item">Monday to Friday, 9am&ndash;5pm</span>
</div>
<p>Sea Haven Industries is looking for a highly organized, decisive Dispatcher to manage nationwide maintenance operations across industrial facilities</p>
@ -195,10 +250,10 @@
<article class="job-card">
<h3>Traveling Maintenance / Electrical Assistant</h3>
<div class="job-salary">$63,000&ndash;$80,000 per year</div>
<div class="job-meta">
<span class="job-badge">Full-time</span>
<span class="job-meta-item">Lafayette, LA 70508</span>
<span class="job-meta-item">$63,000-80,000 per year</span>
<span class="job-meta-item">Monday to Friday, with occasional project-based weekends</span>
</div>
<p>This is a hands-on, travel-heavy role designed for someone who wants to learn real trade skills fast, earn above-market pay, and be part of a small, no-nonsense team.</p>
@ -208,6 +263,32 @@
</div>
</section>
<!-- ── Why Work Here ── -->
<section class="why-section section">
<div class="container">
<p class="label">Why Sea Haven</p>
<h2 class="display-md" style="margin-bottom: clamp(2rem, 4vw, 3rem);">Why Work Here</h2>
<div class="why-grid">
<div class="why-card">
<h3>Above-Market Pay</h3>
<p>Competitive salaries with daily per diem on travel roles. Most field team members clear $75K+ in their first year.</p>
</div>
<div class="why-card">
<h3>Benefits From Day One</h3>
<p>PTO and 401(k) matching included. We invest in the people who show up and do the work.</p>
</div>
<div class="why-card">
<h3>Hands-On Mentorship</h3>
<p>Work directly alongside experienced professionals. Real skill development through apprentice-style training&mdash;no classrooms.</p>
</div>
<div class="why-card">
<h3>No Red Tape</h3>
<p>Small team, field-focused, straightforward work. You&rsquo;ll have real ownership and direct access to leadership.</p>
</div>
</div>
</div>
</section>
<!-- ── CTA ── -->
<section class="cta-section">
<div class="container">

112
careers/traveling-maintenance-assistant/index.html
View file

@ -27,6 +27,15 @@
.grecaptcha-badge { visibility: hidden; }
/* ── Job Details ── */
.back-link {
display: inline-block;
font-size: 0.875rem;
font-weight: 500;
color: var(--rose);
margin-top: 1rem;
transition: color 0.15s;
}
.back-link:hover { color: var(--rose-dark); }
.job-details { background: var(--surface); }
.job-layout {
display: grid;
@ -42,6 +51,17 @@
margin-bottom: 1.25rem;
margin-top: 2.5rem;
}
.job-summary {
font-size: 1.125rem;
font-weight: 600;
color: var(--text);
line-height: 1.6;
padding: 1.25rem 1.5rem;
margin-bottom: 2rem;
background: var(--rose-tint);
border-left: 3px solid var(--rose);
border-radius: 2px;
}
.job-content h2:first-child { margin-top: 0; }
.job-content p {
font-size: 0.9375rem;
@ -111,6 +131,12 @@
color: var(--text);
line-height: 1.5;
}
.sidebar-cta {
display: block;
width: 100%;
text-align: center;
margin-top: 0.75rem;
}
/* ── Application Form ── */
.apply-section { background: var(--warm-gray); }
@ -159,6 +185,48 @@
}
</style>
<script src="https://www.google.com/recaptcha/api.js?render=6Les66kUAAAAANyLrgkl7iuN4JUpNlB5upaMovI4"></script>
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "JobPosting",
"title": "Traveling Maintenance / Electrical Assistant",
"description": "A hands-on, travel-heavy role working directly alongside an experienced technician, supporting maintenance and electrical work across large-scale commercial and industrial facilities. Learn real trade skills fast, earn above-market pay, and be part of a small, no-nonsense team.",
"datePosted": "2025-04-01",
"employmentType": "FULL_TIME",
"hiringOrganization": {
"@type": "Organization",
"name": "Sea Haven Industries",
"sameAs": "https://seahaven.com",
"logo": "https://seahaven.com/assets/images/seahaven-logo-nav-new.png"
},
"jobLocation": {
"@type": "Place",
"address": {
"@type": "PostalAddress",
"addressLocality": "Lafayette",
"addressRegion": "LA",
"postalCode": "70508",
"addressCountry": "US"
}
},
"baseSalary": {
"@type": "MonetaryAmount",
"currency": "USD",
"value": {
"@type": "QuantitativeValue",
"minValue": 63000,
"maxValue": 80000,
"unitText": "YEAR"
}
},
"jobBenefits": "PTO, 401(k) matching, daily per diem while traveling, hotels covered",
"applicantLocationRequirements": {
"@type": "Country",
"name": "US"
},
"directApply": true
}
</script>
</head>
<body>
@ -203,6 +271,7 @@
Traveling Maintenance/Electrical Assistant
</nav>
<h1>Traveling Maintenance/Electrical Assistant</h1>
<a href="/careers/" class="back-link">&larr; Back to All Positions</a>
</div>
</section>
@ -213,6 +282,7 @@
<!-- Main Content -->
<div class="job-content">
<p class="job-summary">Learn real trade skills fast&mdash;work side-by-side with a veteran technician across commercial facilities, earn above-market pay with per diem, and travel the Gulf South.</p>
<h2>Overview</h2>
<p>This is not a typical &ldquo;helper&rdquo; role. You&rsquo;ll work directly alongside a highly experienced technician, supporting maintenance and electrical work across large-scale commercial and industrial facilities. This is a hands-on, travel-heavy role designed for someone who wants to learn real trade skills fast, earn above-market pay, and be part of a small, no-nonsense team.</p>
@ -246,28 +316,6 @@
</ul>
<p>If you&rsquo;re not comfortable being on the road regularly, this role won&rsquo;t be a fit.</p>
<h2>Requirements</h2>
<p>Minimum 6 months experience in:</p>
<ul>
<li>Construction, electrical, HVAC, or similar hands-on work</li>
</ul>
<p>Comfortable with:</p>
<ul>
<li>Physical labor and lifting</li>
<li>Working at heights</li>
<li>Following strict safety standards</li>
</ul>
<ul>
<li>Ability to take direction and work under supervision</li>
<li>Reliable, punctual, and consistent</li>
</ul>
<p>Preferred:</p>
<ul>
<li>Valid driver&rsquo;s license</li>
<li>Clean background</li>
<li>Basic electrical or maintenance experience</li>
</ul>
<h2>Why This Role Stands Out</h2>
<ul>
<li>Direct mentorship from a veteran industry professional</li>
@ -278,6 +326,22 @@
<li>No corporate bureaucracy&mdash;field-focused, straightforward work</li>
</ul>
<h2>Required</h2>
<ul>
<li>Minimum 6 months experience in construction, electrical, HVAC, or similar hands-on work</li>
<li>Comfortable with physical labor, lifting, and working at heights</li>
<li>Able to follow strict safety standards</li>
<li>Ability to take direction and work under supervision</li>
<li>Reliable, punctual, and consistent</li>
</ul>
<h2>Preferred</h2>
<ul>
<li>Valid driver&rsquo;s license</li>
<li>Clean background</li>
<li>Basic electrical or maintenance experience</li>
</ul>
<div class="job-note">
People with a criminal record are encouraged to apply.
</div>
@ -326,6 +390,8 @@
<div class="sidebar-item-label">Work Location</div>
<div class="sidebar-item-value">Travel&mdash;LA, AR, MS</div>
</div>
<a href="#apply-section" class="btn btn-primary sidebar-cta">Apply Now</a>
</aside>
</div>
@ -333,7 +399,7 @@
</section>
<!-- ── Application Form ── -->
<section class="apply-section section">
<section class="apply-section section" id="apply-section">
<div class="container">
<h2 class="display-md">Apply For This Position</h2>
<div class="form-success" id="form-success" style="display:none; background: var(--rose-tint); border-left: 3px solid var(--rose); padding: 1.25rem 1.5rem; margin-bottom: 2rem; border-radius: 2px;">