Skip to content

Add Hackney service area page and shared layout #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
SenatorNetworks wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add Hackney service area page and shared layout #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,8 @@ import About from './pages/About';
import Contact from './pages/Contact';
import Emergency from './pages/Emergency';
import CamdenBoroughPage from './pages/CamdenBoroughPage';
import IslingtonBoroughPage from './pages/IslingtonBoroughPage';
import HackneyBoroughPage from './pages/HackneyBoroughPage';

function App() {
return (
Expand Down Expand Up @@ -50,6 +52,8 @@ function App() {
{/* Service Areas */}
<Route path="/service-areas" element={<ServiceAreas />} />
<Route path="/service-areas/camden" element={<CamdenBoroughPage />} />
<Route path="/service-areas/islington" element={<IslingtonBoroughPage />} />
<Route path="/service-areas/hackney" element={<HackneyBoroughPage />} />
<Route path="/service-areas/:areaId" element={<ServiceAreaDetail />} />

{/* Company */}
Expand Down
20 changes: 10 additions & 10 deletions src/components/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,23 +64,23 @@ const Footer: React.FC = () => {
<div className="footer-section">
<h4 style={{color: 'white', marginBottom: '2rem', fontSize: '1.25rem'}}>Quick Links</h4>
<ul style={{listStyle: 'none'}}>
<li style={{padding: '0.75rem 0'}}><Link to="/about" style={{color: 'rgba(255, 255, 255, 0.7)', transition: 'all 0.3s ease'}}>→ About Us</Link></li>
<li style={{padding: '0.75rem 0'}}><Link to="/services" style={{color: 'rgba(255, 255, 255, 0.7)', transition: 'all 0.3s ease'}}>→ Our Services</Link></li>
<li style={{padding: '0.75rem 0'}}><Link to="/pest-library" style={{color: 'rgba(255, 255, 255, 0.7)', transition: 'all 0.3s ease'}}>→ Pest Library</Link></li>
<li style={{padding: '0.75rem 0'}}><Link to="/service-areas" style={{color: 'rgba(255, 255, 255, 0.7)', transition: 'all 0.3s ease'}}>→ Service Areas</Link></li>
<li style={{padding: '0.75rem 0'}}><Link to="/emergency" style={{color: 'rgba(255, 255, 255, 0.7)', transition: 'all 0.3s ease'}}>→ Emergency Service</Link></li>
<li style={{padding: '0.75rem 0'}}><Link to="/about" style={{color: 'rgba(255, 255, 255, 0.7)', transition: 'all 0.3s ease'}}>About Us</Link></li>
<li style={{padding: '0.75rem 0'}}><Link to="/services" style={{color: 'rgba(255, 255, 255, 0.7)', transition: 'all 0.3s ease'}}>Our Services</Link></li>
<li style={{padding: '0.75rem 0'}}><Link to="/pest-library" style={{color: 'rgba(255, 255, 255, 0.7)', transition: 'all 0.3s ease'}}>Pest Library</Link></li>
<li style={{padding: '0.75rem 0'}}><Link to="/service-areas" style={{color: 'rgba(255, 255, 255, 0.7)', transition: 'all 0.3s ease'}}>Service Areas</Link></li>
<li style={{padding: '0.75rem 0'}}><Link to="/emergency" style={{color: 'rgba(255, 255, 255, 0.7)', transition: 'all 0.3s ease'}}>Emergency Service</Link></li>
</ul>
</div>

{/* Services */}
<div className="footer-section">
<h4 style={{color: 'white', marginBottom: '2rem', fontSize: '1.25rem'}}>Our Services</h4>
<ul style={{listStyle: 'none'}}>
<li style={{padding: '0.75rem 0'}}><Link to="/services" style={{color: 'rgba(255, 255, 255, 0.7)', transition: 'all 0.3s ease'}}>→ Residential Pest Control</Link></li>
<li style={{padding: '0.75rem 0'}}><Link to="/services" style={{color: 'rgba(255, 255, 255, 0.7)', transition: 'all 0.3s ease'}}>→ Commercial Solutions</Link></li>
<li style={{padding: '0.75rem 0'}}><Link to="/services" style={{color: 'rgba(255, 255, 255, 0.7)', transition: 'all 0.3s ease'}}>→ Restaurant & Food Safety</Link></li>
<li style={{padding: '0.75rem 0'}}><Link to="/emergency" style={{color: 'rgba(255, 255, 255, 0.7)', transition: 'all 0.3s ease'}}>→ Emergency Services</Link></li>
<li style={{padding: '0.75rem 0'}}><Link to="/services" style={{color: 'rgba(255, 255, 255, 0.7)', transition: 'all 0.3s ease'}}>→ Prevention Programs</Link></li>
<li style={{padding: '0.75rem 0'}}><Link to="/services" style={{color: 'rgba(255, 255, 255, 0.7)', transition: 'all 0.3s ease'}}>Residential Pest Control</Link></li>
<li style={{padding: '0.75rem 0'}}><Link to="/services" style={{color: 'rgba(255, 255, 255, 0.7)', transition: 'all 0.3s ease'}}>Commercial Solutions</Link></li>
<li style={{padding: '0.75rem 0'}}><Link to="/services" style={{color: 'rgba(255, 255, 255, 0.7)', transition: 'all 0.3s ease'}}>Restaurant & Food Safety</Link></li>
<li style={{padding: '0.75rem 0'}}><Link to="/emergency" style={{color: 'rgba(255, 255, 255, 0.7)', transition: 'all 0.3s ease'}}>Emergency Services</Link></li>
<li style={{padding: '0.75rem 0'}}><Link to="/services" style={{color: 'rgba(255, 255, 255, 0.7)', transition: 'all 0.3s ease'}}>Prevention Programs</Link></li>
</ul>
</div>

Expand Down
26 changes: 26 additions & 0 deletions src/components/ServiceAreaLinks.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import React from 'react';

const serviceAreas = [
{ slug: 'camden', name: 'Camden' },
{ slug: 'islington', name: 'Islington' },
{ slug: 'hackney', name: 'Hackney' },
];

const ServiceAreaLinks: React.FC = () => (
<section className="other-areas">
<div className="container">
<h2>Other London Areas We Serve</h2>
<ul className="area-links">
{serviceAreas.map(area => (
<li key={area.slug}>
<a href={`/service-areas/${area.slug}`} className="text-link">
{area.name}
</a>
</li>
))}
</ul>
</div>
</section>
);

export default ServiceAreaLinks;
96 changes: 31 additions & 65 deletions src/pages/CamdenBoroughPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import React, { useState, useEffect } from 'react';
import '../styles/CamdenBoroughPage.scss';
import '../styles/ServiceAreaPage.scss';
import ServiceAreaLinks from '../components/ServiceAreaLinks';

const CamdenBoroughPage: React.FC = () => {
const [mobileNavOpen, setMobileNavOpen] = useState(false);
const [stickyNavPosition, setStickyNavPosition] = useState<'fixed' | 'absolute'>('fixed');

const scrollToSection = (sectionId: string) => {
const element = document.getElementById(sectionId);
Expand All @@ -21,39 +21,6 @@ const CamdenBoroughPage: React.FC = () => {
}
};

// Handle sticky navigation positioning to stop at footer
useEffect(() => {
const handleScroll = () => {
const footer = document.querySelector('footer');
const stickyNav = document.querySelector('.sticky-nav');

if (footer && stickyNav) {
const footerRect = footer.getBoundingClientRect();
const stickyNavRect = stickyNav.getBoundingClientRect();
const stickyNavHeight = stickyNavRect.height;
const buffer = 20; // Small buffer space above footer

// Check if sticky nav would overlap with footer
if (footerRect.top <= window.innerHeight - stickyNavHeight - buffer) {
setStickyNavPosition('absolute');
} else {
setStickyNavPosition('fixed');
}
}
};

window.addEventListener('scroll', handleScroll);
window.addEventListener('resize', handleScroll);

// Initial check
handleScroll();

return () => {
window.removeEventListener('scroll', handleScroll);
window.removeEventListener('resize', handleScroll);
};
}, []);

// Update document title, meta description, and schema markup for SEO
React.useEffect(() => {
document.title = 'Camden Pest Control Services | Trusted Exterminators in Camden, London';
Expand Down Expand Up @@ -173,31 +140,7 @@ const CamdenBoroughPage: React.FC = () => {
}, []);

return (
<div className="camden-page">
{/* Sticky Navigation */}
<nav
className="sticky-nav"
style={{
position: stickyNavPosition,
bottom: stickyNavPosition === 'absolute' ? '20px' : 'auto'
}}
>
<h3>Quick Navigation</h3>
<ul className="nav-links">
<li><a href="#intro" onClick={(e) => { e.preventDefault(); scrollToSection('intro'); }}>About Camden</a></li>
<li><a href="#pests" onClick={(e) => { e.preventDefault(); scrollToSection('pests'); }}>Common Pests</a></li>
<li><a href="#services" onClick={(e) => { e.preventDefault(); scrollToSection('services'); }}>Our Services</a></li>
<li><a href="#why-choose" onClick={(e) => { e.preventDefault(); scrollToSection('why-choose'); }}>Why Choose Us</a></li>
<li><a href="#testimonials" onClick={(e) => { e.preventDefault(); scrollToSection('testimonials'); }}>Reviews</a></li>
<li><a href="#contact" onClick={(e) => { e.preventDefault(); scrollToSection('contact'); }}>Contact</a></li>
</ul>
<div className="contact-card">
<h4>Need Help Now?</h4>
<a href="tel:07727049304" className="phone-link">077 2704 9304</a>
<a href="/contact" className="quote-link">Get Free Quote</a>
</div>
</nav>

<div className="service-area-page">
{/* Mobile Navigation Toggle */}
<button
className="mobile-nav-toggle"
Expand Down Expand Up @@ -253,22 +196,41 @@ const CamdenBoroughPage: React.FC = () => {

<div className="cta-buttons">
<a href="tel:07727049304" className="primary-cta">
📞 Call Us Now: 077 2704 9304
Call Us Now: 077 2704 9304
</a>
<a href="/contact" className="secondary-cta">
Get a Free Quote for Camden
</a>
</div>

<div className="trust-indicators">
<div className="indicator">⚡ Available 7 days a week</div>
<div className="indicator">🕒 Call back within 1 hour</div>
<div className="indicator">🛡️ Guaranteed results</div>
<div className="indicator">Available 7 days a week</div>
<div className="indicator">Call back within 1 hour</div>
<div className="indicator">Guaranteed results</div>
</div>
</div>
</div>
</section>

<div className="content-wrapper">
<aside className="sidebar-nav">
<h3>Quick Navigation</h3>
<ul className="nav-links">
<li><a href="#intro" onClick={(e) => { e.preventDefault(); scrollToSection('intro'); }}>About Camden</a></li>
<li><a href="#pests" onClick={(e) => { e.preventDefault(); scrollToSection('pests'); }}>Common Pests</a></li>
<li><a href="#services" onClick={(e) => { e.preventDefault(); scrollToSection('services'); }}>Our Services</a></li>
<li><a href="#why-choose" onClick={(e) => { e.preventDefault(); scrollToSection('why-choose'); }}>Why Choose Us</a></li>
<li><a href="#testimonials" onClick={(e) => { e.preventDefault(); scrollToSection('testimonials'); }}>Reviews</a></li>
<li><a href="#contact" onClick={(e) => { e.preventDefault(); scrollToSection('contact'); }}>Contact</a></li>
</ul>
<div className="contact-card">
<h4>Need Help Now?</h4>
<a href="tel:07727049304" className="phone-link">077 2704 9304</a>
<a href="/contact" className="quote-link">Get Free Quote</a>
</div>
</aside>

<div className="content-sections">
{/* Introduction Section */}
<section id="intro" className="section intro-section">
<div className="container">
Expand All @@ -280,7 +242,7 @@ const CamdenBoroughPage: React.FC = () => {
<div className="intro-grid">
<div className="intro-text">
<p>
Dealing with pests in Camden can be challenging, whether you're a homeowner near <strong>Camden Market</strong> or managing a commercial property in the bustling area. At Pest Pro, we understand the unique pest challenges inherent to the vibrant and diverse Camden area and provide tailored, effective solutions to protect your property and peace of mind.
Dealing with pests in Camden can be challenging, whether you're a homeowner near <strong>Camden Market</strong> or managing a commercial property in the bustling area. At Pest Pro, we understand the unique pest challenges inherent to the vibrant and diverse Camden area and provide tailored, effective solutions to protect your property and peace of mind. We also assist neighbouring boroughs like <a href="/service-areas/islington" className="text-link">Islington</a> and <a href="/service-areas/hackney" className="text-link">Hackney</a>.
</p>

<p>
Expand Down Expand Up @@ -655,6 +617,10 @@ const CamdenBoroughPage: React.FC = () => {
</div>
</div>
</section>

<ServiceAreaLinks />
</div>
</div>
</main>
</div>
);
Expand Down
Loading