Changes für lighthouse Branch
This commit is contained in:
@@ -1,10 +1,20 @@
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { Search, Shield, Cog, Zap } from 'lucide-react';
|
||||
import ScrollReveal from '../ScrollReveal';
|
||||
import { motion, useInView, useScroll, useTransform } from 'framer-motion';
|
||||
import { fadeInUp, scaleIn } from '@/utils/animations';
|
||||
|
||||
const ProcessTimeline = () => {
|
||||
const [activeStep, setActiveStep] = useState(0);
|
||||
const sectionRef = useRef<HTMLDivElement>(null);
|
||||
const headerRef = useRef(null);
|
||||
const isHeaderInView = useInView(headerRef, { once: true, margin: "-100px" });
|
||||
|
||||
// Smooth scroll-based timeline progress
|
||||
const { scrollYProgress } = useScroll({
|
||||
target: sectionRef,
|
||||
offset: ["start end", "end start"]
|
||||
});
|
||||
const timelineProgress = useTransform(scrollYProgress, [0.2, 0.8], [0, 100]);
|
||||
|
||||
const steps = [
|
||||
{
|
||||
@@ -63,7 +73,12 @@ const ProcessTimeline = () => {
|
||||
</div>
|
||||
|
||||
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<ScrollReveal>
|
||||
<motion.div
|
||||
ref={headerRef}
|
||||
initial="hidden"
|
||||
animate={isHeaderInView ? "visible" : "hidden"}
|
||||
variants={fadeInUp}
|
||||
>
|
||||
<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
|
||||
@@ -72,14 +87,14 @@ const ProcessTimeline = () => {
|
||||
Our proven four-phase methodology ensures systematic improvement and lasting results.
|
||||
</p>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</motion.div>
|
||||
|
||||
<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}%` }}
|
||||
<motion.div
|
||||
className="absolute top-0 left-0 w-full bg-neon"
|
||||
style={{ height: useTransform(timelineProgress, (value) => `${value}%`) }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -89,17 +104,35 @@ const ProcessTimeline = () => {
|
||||
const Icon = step.icon;
|
||||
const isActive = index <= activeStep;
|
||||
const isEven = index % 2 === 0;
|
||||
|
||||
const stepRef = useRef(null);
|
||||
const isInView = useInView(stepRef, { once: true, margin: "-150px" });
|
||||
|
||||
return (
|
||||
<ScrollReveal key={step.title} delay={index * 100}>
|
||||
<motion.div
|
||||
key={step.title}
|
||||
ref={stepRef}
|
||||
initial="hidden"
|
||||
animate={isInView ? "visible" : "hidden"}
|
||||
variants={fadeInUp}
|
||||
transition={{ delay: index * 0.1 }}
|
||||
>
|
||||
<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">
|
||||
<motion.div
|
||||
className={`flex-1 ${isEven ? 'lg:pr-16' : 'lg:pl-16'} ${
|
||||
isEven ? 'lg:text-right' : 'lg:text-left'
|
||||
} text-center lg:text-left`}
|
||||
initial={{ opacity: 0, x: isEven ? -40 : 40 }}
|
||||
animate={isInView ? { opacity: 1, x: 0 } : { opacity: 0, x: isEven ? -40 : 40 }}
|
||||
transition={{ delay: index * 0.1 + 0.2, duration: 0.6 }}
|
||||
>
|
||||
<motion.div
|
||||
className="card-dark p-8 max-w-lg mx-auto lg:mx-0"
|
||||
whileHover={{ y: -5, boxShadow: "0 0 30px rgba(51, 102, 255, 0.3)" }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
<div className="mb-4">
|
||||
<span className="text-sm font-medium text-neon uppercase tracking-wider">
|
||||
Step {index + 1}
|
||||
@@ -114,24 +147,34 @@ const ProcessTimeline = () => {
|
||||
<p className="text-sm text-foreground-muted">
|
||||
{step.details}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.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'
|
||||
}`}>
|
||||
<motion.div
|
||||
className={`w-16 h-16 rounded-full border-4 flex items-center justify-center ${
|
||||
isActive
|
||||
? 'border-neon bg-neon text-neon-foreground shadow-neon'
|
||||
: 'border-border bg-background text-foreground-muted'
|
||||
}`}
|
||||
initial={{ scale: 0, rotate: -180 }}
|
||||
animate={isInView ? { scale: 1, rotate: 0 } : { scale: 0, rotate: -180 }}
|
||||
transition={{
|
||||
delay: index * 0.1 + 0.3,
|
||||
duration: 0.6,
|
||||
type: "spring",
|
||||
stiffness: 200
|
||||
}}
|
||||
>
|
||||
<Icon className="w-6 h-6" />
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Spacer for layout */}
|
||||
<div className="flex-1 hidden lg:block"></div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user