mirror of
https://github.com/Sea-Haven-Industries/seahaven-site.git
synced 2026-09-30 07:43:16 +00:00
0345c1ed18
Move ~2,600 lines of duplicated CSS (reset, tokens, typography, nav, footer, buttons, mobile menu, page hero, CTA, form base styles, and shared responsive breakpoints) into /assets/css/main.css. Each page now only contains page-specific styles inline. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
337 lines
14 KiB
HTML
337 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en-US">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>About — Sea Haven Industries</title>
|
|
<meta name="description" content="Learn about Sea Haven Industries — your trusted partner in construction with 20 years of experience, expert technicians, and a commitment to excellence.">
|
|
<meta property="og:title" content="About — Sea Haven Industries">
|
|
<meta property="og:description" content="Learn about Sea Haven Industries — your trusted partner in construction with 20 years of experience, expert technicians, and a commitment to excellence.">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://seahaven.com/about/">
|
|
<meta property="og:site_name" content="Sea Haven Industries">
|
|
<meta property="og:image" content="https://seahaven.com/assets/images/seahaven-16.webp">
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="robots" content="index, follow, max-image-preview:large">
|
|
<link rel="canonical" href="https://seahaven.com/about/">
|
|
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/assets/images/favicon-32.png">
|
|
<link rel="apple-touch-icon" sizes="192x192" href="/assets/images/favicon-192.png">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Inter:wght@300;400;500;600&display=swap">
|
|
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="/assets/css/main.css">
|
|
|
|
<style>
|
|
/* ── About Intro ── */
|
|
.about-intro { background: var(--surface); }
|
|
.about-intro-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: clamp(3rem, 6vw, 6rem);
|
|
align-items: center;
|
|
}
|
|
.about-intro-img {
|
|
width: 100%;
|
|
aspect-ratio: 4/5;
|
|
object-fit: cover;
|
|
border-radius: 3px;
|
|
}
|
|
.about-intro-content .label { margin-bottom: 0.75rem; }
|
|
.about-intro-content h2 { margin-bottom: 1.25rem; }
|
|
.about-intro-content p {
|
|
color: var(--text-muted);
|
|
font-size: 1rem;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
/* ── Philosophy / Mission / Values ── */
|
|
.values-section { background: var(--warm-gray); }
|
|
.values-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 1.5rem;
|
|
}
|
|
.value-card {
|
|
background: var(--surface);
|
|
padding: 2.5rem 2rem;
|
|
border-radius: 3px;
|
|
border-top: 3px solid var(--rose);
|
|
}
|
|
.value-card h3 {
|
|
font-family: var(--font-display);
|
|
font-size: 1.5rem;
|
|
line-height: 1.2;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.value-card p {
|
|
font-size: 0.9375rem;
|
|
color: var(--text-muted);
|
|
line-height: 1.75;
|
|
}
|
|
|
|
/* ── Why Choose Us ── */
|
|
.why-section { background: var(--surface); }
|
|
.why-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: clamp(3rem, 6vw, 6rem);
|
|
align-items: center;
|
|
}
|
|
.why-content .label { margin-bottom: 0.75rem; }
|
|
.why-content h2 { margin-bottom: 1rem; }
|
|
.why-content > p {
|
|
color: var(--text-muted);
|
|
font-size: 1rem;
|
|
line-height: 1.75;
|
|
margin-bottom: 2rem;
|
|
}
|
|
.feature-item {
|
|
padding: 1.25rem;
|
|
border-left: 3px solid var(--rose);
|
|
background: var(--body-bg);
|
|
margin-bottom: 1rem;
|
|
}
|
|
.feature-item:last-child { margin-bottom: 0; }
|
|
.feature-item h4 {
|
|
font-size: 0.9375rem;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
margin-bottom: 0.375rem;
|
|
}
|
|
.feature-item p {
|
|
font-size: 0.8125rem;
|
|
color: var(--text-muted);
|
|
line-height: 1.65;
|
|
}
|
|
.why-img {
|
|
width: 100%;
|
|
aspect-ratio: 3/4;
|
|
object-fit: cover;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
/* ── Responsive (page-specific) ── */
|
|
@media (max-width: 1024px) {
|
|
.values-grid { grid-template-columns: 1fr 1fr; }
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.about-intro-grid { grid-template-columns: 1fr; }
|
|
.values-grid { grid-template-columns: 1fr; }
|
|
.why-grid { grid-template-columns: 1fr; }
|
|
.why-img-wrap { order: -1; }
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!-- ── Navigation ── -->
|
|
<header class="site-header scrolled" id="site-header">
|
|
<div class="container">
|
|
<nav class="nav-inner">
|
|
<a href="/" class="nav-logo">
|
|
<img src="/assets/images/seahaven-logo-nav-new.png" alt="Sea Haven Industries">
|
|
</a>
|
|
<ul class="nav-links">
|
|
<li><a href="/services/">Services</a></li>
|
|
<li><a href="/about/">About</a></li>
|
|
<li><a href="/career/">Careers</a></li>
|
|
<li><a href="/social-accountability/">Accountability</a></li>
|
|
</ul>
|
|
<a href="/contact/" class="nav-cta">Get a Quote</a>
|
|
<button class="nav-hamburger" id="hamburger" aria-label="Open menu">
|
|
<span></span><span></span><span></span>
|
|
</button>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Mobile Menu -->
|
|
<div class="mobile-menu" id="mobile-menu">
|
|
<button class="mobile-menu-close" id="menu-close">✕</button>
|
|
<a href="/services/">Services</a>
|
|
<a href="/about/">About</a>
|
|
<a href="/career/">Careers</a>
|
|
<a href="/social-accountability/">Accountability</a>
|
|
<a href="/contact/">Contact</a>
|
|
</div>
|
|
|
|
<!-- ── Page Hero ── -->
|
|
<section class="page-hero">
|
|
<div class="container">
|
|
<nav class="breadcrumb" aria-label="Breadcrumb">
|
|
<a href="/">Home</a>
|
|
<span>/</span>
|
|
<span>About Us</span>
|
|
</nav>
|
|
<h1>Your Trusted Partner in Construction</h1>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ── About Intro ── -->
|
|
<section class="section about-intro">
|
|
<div class="container">
|
|
<div class="about-intro-grid">
|
|
<div>
|
|
<img class="about-intro-img"
|
|
src="/assets/images/team-at-work.webp"
|
|
alt="Sea Haven Industries team at work"
|
|
loading="lazy">
|
|
</div>
|
|
<div class="about-intro-content">
|
|
<p class="label">About Us</p>
|
|
<h2 class="display-lg">Transforming Visions into Reality</h2>
|
|
<p>At Sea Haven Industries, we are dedicated to transforming visions into tangible realities. With 20 years of experience in the construction industry, our team of skilled professionals delivers high-quality craftsmanship and innovative solutions for every project. From commercial to industrial spaces, we prioritize customer satisfaction, safety, and sustainability in all our endeavors.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ── Philosophy / Mission / Values ── -->
|
|
<section class="section values-section">
|
|
<div class="container">
|
|
<div class="values-grid">
|
|
<div class="value-card">
|
|
<h3>Philosophy</h3>
|
|
<p>At Sea Haven Industries, we believe in building not just structures, but lasting relationships. Our philosophy is rooted in integrity, quality, and innovation. We strive to exceed expectations by delivering exceptional craftsmanship and reliable service.</p>
|
|
</div>
|
|
<div class="value-card">
|
|
<h3>Mission</h3>
|
|
<p>Our mission is to build the future with integrity, innovation, and excellence. We are dedicated to delivering high-quality construction services that exceed expectations, ensuring safety, sustainability, and satisfaction in every project.</p>
|
|
</div>
|
|
<div class="value-card">
|
|
<h3>Values</h3>
|
|
<p>We prioritize integrity, quality craftsmanship, and innovation. Our transparent approach and commitment to excellence drive us to deliver superior results. We value collaboration, fostering a supportive environment for success.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ── Why Choose Us ── -->
|
|
<section class="section why-section">
|
|
<div class="container">
|
|
<div class="why-grid">
|
|
<div class="why-content">
|
|
<p class="label">Why Choose Us</p>
|
|
<h2 class="display-lg">Built on Experience, Driven by Quality</h2>
|
|
<p>Sea Haven Industries is a premier provider of comprehensive facilities maintenance services, showcasing core capabilities that span across multiple domains.</p>
|
|
<div class="feature-item">
|
|
<h4>Rapid Response</h4>
|
|
<p>Enabled by our innovative system, we can dispatch crews for both emergency and standard service calls at a moment's notice, ensuring minimal downtime and maximum operational efficiency.</p>
|
|
</div>
|
|
<div class="feature-item">
|
|
<h4>Self-Performing Model</h4>
|
|
<p>As a self-performing company, we maintain direct control over our services, eliminating inconsistencies associated with subcontracting and guaranteeing superior quality work at competitive prices.</p>
|
|
</div>
|
|
<div class="feature-item">
|
|
<h4>Safety & Quality Standards</h4>
|
|
<p>Our commitment to maintaining the highest safety and quality standards is unwavering. Our team operates adhering to industry best practices to provide safe, reliable, and efficient services.</p>
|
|
</div>
|
|
<div class="feature-item">
|
|
<h4>Problem-solving & Innovation</h4>
|
|
<p>Our track record of custom solutions, such as retrofitting facilities with bespoke equipment, demonstrates our ability to identify, strategize, and implement effective solutions to unique client problems.</p>
|
|
</div>
|
|
<div class="feature-item">
|
|
<h4>Integrated Facilities Maintenance</h4>
|
|
<p>We offer a wide array of maintenance services including electrical work, plumbing, HVACR, garage door repair, and handyman services. Our holistic approach ensures optimal functionality and longevity of your facilities.</p>
|
|
</div>
|
|
</div>
|
|
<div class="why-img-wrap">
|
|
<img class="why-img"
|
|
src="/assets/images/team-member.webp"
|
|
alt="Sea Haven Industries team member"
|
|
loading="lazy">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ── CTA Banner ── -->
|
|
<section class="cta-section">
|
|
<div class="container">
|
|
<div class="cta-inner">
|
|
<div class="cta-text">
|
|
<p class="label">Start Your Project</p>
|
|
<h2 class="display-md">Get in Touch, Get Results</h2>
|
|
<p>Have questions or ready to start your project? Contact us today for prompt, professional service and expert advice. We're here to help with all your construction needs.</p>
|
|
</div>
|
|
<div class="cta-actions">
|
|
<a href="/contact/" class="btn btn-primary">Contact Us</a>
|
|
<div class="cta-phone">
|
|
<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 3.5C2 2.67 2.67 2 3.5 2h1.586a1 1 0 0 1 .707.293l1.414 1.414a1 1 0 0 1 0 1.414L6.12 6.207A10.003 10.003 0 0 0 9.793 9.88l1.086-1.086a1 1 0 0 1 1.414 0l1.414 1.414A1 1 0 0 1 14 11v1.5c0 .83-.67 1.5-1.5 1.5C6.596 14 2 9.404 2 3.5z"/></svg>
|
|
Or call us: <strong>(631) 776-5102</strong>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ── Footer ── -->
|
|
<footer class="site-footer">
|
|
<div class="container">
|
|
<div class="footer-grid">
|
|
<div class="footer-brand">
|
|
<img src="/assets/images/seahaven-logo-footer-new.png" alt="Sea Haven Industries">
|
|
<p>Sea Haven Industries provides quality construction services tailored to your needs, ensuring excellence and reliability in every project. Our services can also be expanded to include other fields as needed.</p>
|
|
<div class="footer-social">
|
|
<a href="#" aria-label="LinkedIn">in</a>
|
|
<a href="#" aria-label="Facebook">f</a>
|
|
<a href="#" aria-label="Instagram">ig</a>
|
|
</div>
|
|
</div>
|
|
<div class="footer-col">
|
|
<h4>Services</h4>
|
|
<ul>
|
|
<li><a href="/services/">Electrical Work</a></li>
|
|
<li><a href="/services/">Plumbing</a></li>
|
|
<li><a href="/services/">HVACR Services</a></li>
|
|
<li><a href="/services/">Handyman Services</a></li>
|
|
<li><a href="/services/">Garage Door Repair</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="footer-col">
|
|
<h4>Company</h4>
|
|
<ul>
|
|
<li><a href="/about/">About Us</a></li>
|
|
<li><a href="/career/">Careers</a></li>
|
|
<li><a href="/social-accountability/">Social Accountability</a></li>
|
|
<li><a href="/contact/">Contact</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="footer-col">
|
|
<h4>Contact</h4>
|
|
<div class="footer-contact-item"><strong>710 Koehler Ave</strong></div>
|
|
<div class="footer-contact-item">Ronkonkoma, NY 11779</div>
|
|
<div class="footer-contact-item"><a href="mailto:work-orders@seahaven.com" style="color: var(--rose);">work-orders@seahaven.com</a></div>
|
|
<div class="footer-contact-item"><strong>(631) 776-5102</strong></div>
|
|
</div>
|
|
</div>
|
|
<div class="footer-bottom">
|
|
<p>© 2026 Sea Haven Industries. All rights reserved.</p>
|
|
<ul class="footer-bottom-links">
|
|
<li><a href="/privacy-policy/">Privacy Policy</a></li>
|
|
<li><a href="/terms-of-service/">Terms of Service</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
const header = document.getElementById('site-header');
|
|
const onScroll = () => header.classList.toggle('scrolled', window.scrollY > 40);
|
|
window.addEventListener('scroll', onScroll, { passive: true });
|
|
onScroll();
|
|
const hamburger = document.getElementById('hamburger');
|
|
const mobileMenu = document.getElementById('mobile-menu');
|
|
const menuClose = document.getElementById('menu-close');
|
|
hamburger.addEventListener('click', () => mobileMenu.classList.add('open'));
|
|
menuClose.addEventListener('click', () => mobileMenu.classList.remove('open'));
|
|
mobileMenu.querySelectorAll('a').forEach(a => {
|
|
a.addEventListener('click', () => mobileMenu.classList.remove('open'));
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|