Implement scroll-narrative website
Build a high-conversion, story-driven marketing site for Bay Area Affiliates, Inc. The site will feature a scroll-narrative experience with pinned hero, section pinning, subtle parallax, and neon accents. It prioritizes performance, accessibility, and clear CTAs, targeting small to mid-sized businesses in the Coastal Bend. Key features include: - Pinned hero section with headline, subcopy, and CTAs. - Value pillars section with alternating media layouts. - "How We Work" section with a pinned timeline. - Services overview with cards linking to detail pages. - Local focus section with client logos and testimonials. - CTA footer band with micro-FAQ. - Dedicated Services, About, Blog, and Contact pages. The design will adhere to the specified brand guidelines, including a deep teal/near-black base with neon lime accents. Interactions will respect `prefers-reduced-motion`. Performance and SEO best practices will be followed, including metadata, lazy loading, and local SEO keywords. Accessibility standards (WCAG AA) will be met.
This commit is contained in:
gpt-engineer-app[bot]
144
src/components/home/ProcessTimeline.tsx
Normal file
144
src/components/home/ProcessTimeline.tsx
Normal file
@@ -0,0 +1,144 @@
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { Search, Shield, Cog, Zap } from 'lucide-react';
|
||||
import ScrollReveal from '../ScrollReveal';
|
||||
|
||||
const ProcessTimeline = () => {
|
||||
const [activeStep, setActiveStep] = useState(0);
|
||||
const sectionRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const steps = [
|
||||
{
|
||||
icon: Search,
|
||||
title: 'Assess',
|
||||
description: 'Discovery, inventory, quick wins report',
|
||||
details: 'We start with a comprehensive assessment of your current IT infrastructure, identifying immediate opportunities for improvement and creating a roadmap for optimization.'
|
||||
},
|
||||
{
|
||||
icon: Cog,
|
||||
title: 'Stabilize',
|
||||
description: 'Patching, backups, device hygiene, ticket triage',
|
||||
details: 'Foundation work to ensure your systems are secure, backed up, and running smoothly. We address critical vulnerabilities and establish reliable backup procedures.'
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
title: 'Harden',
|
||||
description: 'MFA, endpoint security, VPN, network segmentation',
|
||||
details: 'Implementation of robust security measures including multi-factor authentication, endpoint protection, secure remote access, and network isolation strategies.'
|
||||
},
|
||||
{
|
||||
icon: Zap,
|
||||
title: 'Automate',
|
||||
description: 'Monitoring, updates, reporting, playbooks',
|
||||
details: 'Deploy automated monitoring systems, update management, comprehensive reporting, and documented procedures to maintain peak performance with minimal intervention.'
|
||||
}
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
if (!sectionRef.current) return;
|
||||
|
||||
const section = sectionRef.current;
|
||||
const rect = section.getBoundingClientRect();
|
||||
const windowHeight = window.innerHeight;
|
||||
|
||||
// Calculate scroll progress within the section
|
||||
const sectionHeight = rect.height;
|
||||
const scrollProgress = Math.max(0, Math.min(1, (windowHeight - rect.top) / (windowHeight + sectionHeight)));
|
||||
|
||||
// Determine active step based on scroll progress
|
||||
const newActiveStep = Math.min(steps.length - 1, Math.floor(scrollProgress * steps.length));
|
||||
setActiveStep(newActiveStep);
|
||||
};
|
||||
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
return () => window.removeEventListener('scroll', handleScroll);
|
||||
}, [steps.length]);
|
||||
|
||||
return (
|
||||
<section ref={sectionRef} className="py-32 bg-background relative overflow-hidden">
|
||||
{/* Background decoration */}
|
||||
<div className="absolute inset-0">
|
||||
<div className="absolute inset-0 grid-overlay opacity-10"></div>
|
||||
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-neon/5 rounded-full blur-3xl"></div>
|
||||
</div>
|
||||
|
||||
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<ScrollReveal>
|
||||
<div className="text-center mb-20">
|
||||
<h2 className="font-heading font-bold text-4xl sm:text-5xl text-foreground mb-6">
|
||||
How we <span className="text-neon">transform</span> your IT
|
||||
</h2>
|
||||
<p className="text-xl text-foreground-muted max-w-3xl mx-auto">
|
||||
Our proven four-phase methodology ensures systematic improvement and lasting results.
|
||||
</p>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
|
||||
<div className="relative">
|
||||
{/* Timeline line */}
|
||||
<div className="absolute left-8 lg:left-1/2 lg:transform lg:-translate-x-1/2 top-0 bottom-0 w-px bg-border">
|
||||
<div
|
||||
className="absolute top-0 left-0 w-full bg-neon transition-all duration-500 ease-out"
|
||||
style={{ height: `${(activeStep + 1) * 25}%` }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Steps */}
|
||||
<div className="space-y-16 lg:space-y-24">
|
||||
{steps.map((step, index) => {
|
||||
const Icon = step.icon;
|
||||
const isActive = index <= activeStep;
|
||||
const isEven = index % 2 === 0;
|
||||
|
||||
return (
|
||||
<ScrollReveal key={step.title} delay={index * 100}>
|
||||
<div className={`relative flex flex-col lg:flex-row items-center ${
|
||||
isEven ? '' : 'lg:flex-row-reverse'
|
||||
}`}>
|
||||
{/* Step content */}
|
||||
<div className={`flex-1 ${isEven ? 'lg:pr-16' : 'lg:pl-16'} ${
|
||||
isEven ? 'lg:text-right' : 'lg:text-left'
|
||||
} text-center lg:text-left`}>
|
||||
<div className="card-dark p-8 max-w-lg mx-auto lg:mx-0">
|
||||
<div className="mb-4">
|
||||
<span className="text-sm font-medium text-neon uppercase tracking-wider">
|
||||
Step {index + 1}
|
||||
</span>
|
||||
</div>
|
||||
<h3 className="font-heading font-bold text-2xl text-foreground mb-3">
|
||||
{step.title}
|
||||
</h3>
|
||||
<p className="text-foreground-muted mb-4">
|
||||
{step.description}
|
||||
</p>
|
||||
<p className="text-sm text-foreground-muted">
|
||||
{step.details}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Timeline dot */}
|
||||
<div className="relative z-10 my-8 lg:my-0">
|
||||
<div className={`w-16 h-16 rounded-full border-4 flex items-center justify-center transition-all duration-500 ${
|
||||
isActive
|
||||
? 'border-neon bg-neon text-neon-foreground shadow-neon'
|
||||
: 'border-border bg-background text-foreground-muted'
|
||||
}`}>
|
||||
<Icon className="w-6 h-6" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Spacer for layout */}
|
||||
<div className="flex-1 hidden lg:block"></div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProcessTimeline;
|
||||
Reference in New Issue
Block a user