Skip to content

Commit 0fba55c

Browse files
lovable-dev[bot]lovable-dev[bot]
committed
Reverted to commit a7f64b8 
1 parent cd0be11 commit 0fba55c

6 files changed

Lines changed: 106 additions & 529 deletions

File tree

‎src/components/ApplicationsSection.tsx‎

Lines changed: 61 additions & 144 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11

2-
import React, { useEffect, useRef } from "react";
2+
import React from "react";
33
import { Link } from "react-router-dom";
44
import { Button } from "@/components/ui/button";
55
import { Card, CardContent } from "@/components/ui/card";
@@ -8,154 +8,71 @@ import { useIsMobile } from "@/hooks/use-mobile";
88

99
const ApplicationsSection = () => {
1010
const isMobile = useIsMobile();
11-
const sectionRef = useRef<HTMLElement>(null);
12-
const cardsRef = useRef<HTMLDivElement>(null);
13-
const titleRef = useRef<HTMLHeadingElement>(null);
1411

15-
// Advanced parallax effect on scroll
16-
useEffect(() => {
17-
const handleScroll = () => {
18-
if (!sectionRef.current || !cardsRef.current) return;
19-
20-
const scrollPosition = window.scrollY;
21-
const viewportHeight = window.innerHeight;
22-
const sectionTop = sectionRef.current.offsetTop;
23-
const sectionHeight = sectionRef.current.offsetHeight;
24-
25-
// Calculate how far through the section we've scrolled (0 to 1)
26-
const scrollProgress = (scrollPosition - (sectionTop - viewportHeight)) /
27-
(sectionHeight + viewportHeight);
28-
29-
// Check if section is in viewport (with buffer)
30-
if (scrollProgress >= -0.2 && scrollProgress <= 1.2) {
31-
// Card staggered animations
32-
const cards = cardsRef.current.querySelectorAll('.focus-card');
33-
34-
cards.forEach((card, index) => {
35-
const cardElement = card as HTMLElement;
36-
// Create a staggered effect based on index and scroll
37-
const delay = index * 0.15;
38-
const cardScrollProgress = Math.max(0, Math.min(1, (scrollProgress - delay) * 2));
12+
return (
13+
<section className="py-20 bg-primary-blue/5 relative">
14+
<div className="container mx-auto px-4">
15+
<div className="max-w-6xl mx-auto">
16+
<h2 className="text-3xl md:text-4xl font-bold mb-16 text-center text-primary-blue">
17+
<span className="relative pb-2">
18+
Where We Apply Our Technology
19+
<span className="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-20 h-1 bg-bistre"></span>
20+
</span>
21+
</h2>
3922

40-
// Only apply effect if not on mobile
41-
if (!isMobile) {
42-
// Initial state is translated down and rotated
43-
const translateY = 100 - (cardScrollProgress * 100);
44-
const opacity = Math.min(1, cardScrollProgress * 2);
45-
const rotateX = 20 - (cardScrollProgress * 20); // Tilt effect
46-
const scale = 0.8 + (cardScrollProgress * 0.2); // Subtle scale
23+
<div className={`grid ${isMobile ? 'grid-cols-1' : 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5'} gap-6 max-w-5xl mx-auto`}>
24+
<Card className="focus-card bg-offwhite border-primary-blue/20 hover:border-primary-blue/50">
25+
<CardContent className="p-6 flex flex-col items-center text-center">
26+
<div className="focus-icon bg-primary-blue/5 text-primary-blue">
27+
<Bot size={24} />
28+
</div>
29+
<h3 className="text-lg font-bold text-primary-blue">Robotics</h3>
30+
</CardContent>
31+
</Card>
4732

48-
cardElement.style.transform = `perspective(1000px) translateY(${translateY}px) rotateX(${rotateX}deg) scale(${scale})`;
49-
cardElement.style.opacity = `${opacity}`;
50-
} else {
51-
cardElement.style.transform = '';
52-
cardElement.style.opacity = '1';
53-
}
54-
});
55-
56-
// Title parallax effect
57-
if (titleRef.current) {
58-
const titleProgress = Math.max(0, Math.min(1, scrollProgress * 3));
59-
const titleTranslateY = 50 - (titleProgress * 50);
60-
const titleOpacity = Math.min(1, titleProgress * 1.5);
61-
62-
titleRef.current.style.transform = `translateY(${titleTranslateY}px)`;
63-
titleRef.current.style.opacity = `${titleOpacity}`;
64-
}
65-
}
66-
};
67-
68-
window.addEventListener('scroll', handleScroll);
69-
return () => {
70-
window.removeEventListener('scroll', handleScroll);
71-
};
72-
}, [isMobile]);
73-
74-
return (
75-
<section ref={sectionRef} className="py-20 bg-primary-blue/5 relative overflow-hidden">
76-
{/* Decorative shapes with parallax */}
77-
<div className="absolute -z-10 opacity-10 top-0 left-0 w-full h-full overflow-hidden">
78-
<div className="parallax-item absolute top-10 left-10 w-64 h-64 rounded-full bg-bistre/20"></div>
79-
<div className="parallax-item absolute bottom-20 right-20 w-80 h-80 rounded-full bg-primary-blue/20"></div>
80-
<div className="parallax-item absolute top-[60%] left-[30%] w-40 h-40 rounded-full bg-bistre/15"></div>
81-
<div className="parallax-item absolute top-[20%] right-[20%] w-32 h-32 rounded-full bg-primary-blue/15"></div>
82-
</div>
83-
84-
{/* 3D perspective wrapper for depth */}
85-
<div style={{ perspective: "2000px" }} className="relative z-10">
86-
<div className="container mx-auto px-4">
87-
<div className="max-w-6xl mx-auto">
88-
<h2
89-
ref={titleRef}
90-
className="text-3xl md:text-4xl font-bold mb-16 text-center text-primary-blue"
91-
style={{ willChange: "transform, opacity" }}
92-
>
93-
<span className="relative pb-2">
94-
Where We Apply Our Technology
95-
<span className="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-20 h-1 bg-bistre"></span>
96-
</span>
97-
</h2>
33+
<Card className="focus-card bg-offwhite border-primary-blue/20 hover:border-primary-blue/50">
34+
<CardContent className="p-6 flex flex-col items-center text-center">
35+
<div className="focus-icon bg-primary-blue/5 text-primary-blue">
36+
<Cpu size={24} />
37+
</div>
38+
<h3 className="text-lg font-bold text-primary-blue">Drones</h3>
39+
</CardContent>
40+
</Card>
41+
42+
<Card className="focus-card bg-offwhite border-primary-blue/20 hover:border-primary-blue/50">
43+
<CardContent className="p-6 flex flex-col items-center text-center">
44+
<div className="focus-icon bg-primary-blue/5 text-primary-blue">
45+
<Database size={24} />
46+
</div>
47+
<h3 className="text-lg font-bold text-primary-blue">Smart Manufacturing</h3>
48+
</CardContent>
49+
</Card>
9850

99-
<div
100-
ref={cardsRef}
101-
className={`grid ${isMobile ? 'grid-cols-1' : 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5'} gap-6 max-w-5xl mx-auto`}
102-
>
103-
<Card className="focus-card bg-offwhite border-primary-blue/20 hover:border-primary-blue/50 transition-all duration-700" style={{ willChange: "transform, opacity" }}>
104-
<CardContent className="p-6 flex flex-col items-center text-center">
105-
<div className="focus-icon bg-primary-blue/5 text-primary-blue">
106-
<Bot size={24} />
107-
</div>
108-
<h3 className="text-lg font-bold text-primary-blue">Robotics</h3>
109-
</CardContent>
110-
</Card>
111-
112-
<Card className="focus-card bg-offwhite border-primary-blue/20 hover:border-primary-blue/50 transition-all duration-700" style={{ willChange: "transform, opacity" }}>
113-
<CardContent className="p-6 flex flex-col items-center text-center">
114-
<div className="focus-icon bg-primary-blue/5 text-primary-blue">
115-
<Cpu size={24} />
116-
</div>
117-
<h3 className="text-lg font-bold text-primary-blue">Drones</h3>
118-
</CardContent>
119-
</Card>
120-
121-
<Card className="focus-card bg-offwhite border-primary-blue/20 hover:border-primary-blue/50 transition-all duration-700" style={{ willChange: "transform, opacity" }}>
122-
<CardContent className="p-6 flex flex-col items-center text-center">
123-
<div className="focus-icon bg-primary-blue/5 text-primary-blue">
124-
<Database size={24} />
125-
</div>
126-
<h3 className="text-lg font-bold text-primary-blue">Smart Manufacturing</h3>
127-
</CardContent>
128-
</Card>
129-
130-
<Card className="focus-card bg-offwhite border-primary-blue/20 hover:border-primary-blue/50 transition-all duration-700" style={{ willChange: "transform, opacity" }}>
131-
<CardContent className="p-6 flex flex-col items-center text-center">
132-
<div className="focus-icon bg-primary-blue/5 text-primary-blue">
133-
<Car size={24} />
134-
</div>
135-
<h3 className="text-lg font-bold text-primary-blue">Automotive</h3>
136-
</CardContent>
137-
</Card>
138-
139-
<Card className="focus-card bg-offwhite border-primary-blue/20 hover:border-primary-blue/50 transition-all duration-700" style={{ willChange: "transform, opacity" }}>
140-
<CardContent className="p-6 flex flex-col items-center text-center">
141-
<div className="focus-icon bg-primary-blue/5 text-primary-blue">
142-
<Microscope size={24} />
143-
</div>
144-
<h3 className="text-lg font-bold text-primary-blue">Biomedical</h3>
145-
</CardContent>
146-
</Card>
147-
</div>
51+
<Card className="focus-card bg-offwhite border-primary-blue/20 hover:border-primary-blue/50">
52+
<CardContent className="p-6 flex flex-col items-center text-center">
53+
<div className="focus-icon bg-primary-blue/5 text-primary-blue">
54+
<Car size={24} />
55+
</div>
56+
<h3 className="text-lg font-bold text-primary-blue">Automotive</h3>
57+
</CardContent>
58+
</Card>
14859

149-
<div className="text-center mt-16">
150-
<Link to="/about">
151-
<Button
152-
variant="outline"
153-
className="border-2 border-primary-blue text-primary-blue hover:bg-primary-blue/5"
154-
>
155-
Learn More About Our Work
156-
</Button>
157-
</Link>
158-
</div>
60+
<Card className="focus-card bg-offwhite border-primary-blue/20 hover:border-primary-blue/50">
61+
<CardContent className="p-6 flex flex-col items-center text-center">
62+
<div className="focus-icon bg-primary-blue/5 text-primary-blue">
63+
<Microscope size={24} />
64+
</div>
65+
<h3 className="text-lg font-bold text-primary-blue">Biomedical</h3>
66+
</CardContent>
67+
</Card>
68+
</div>
69+
70+
<div className="text-center mt-16">
71+
<Link to="/about">
72+
<Button variant="outline" className="border-2 border-primary-blue text-primary-blue hover:bg-primary-blue/5">
73+
Learn More About Our Work
74+
</Button>
75+
</Link>
15976
</div>
16077
</div>
16178
</div>

‎src/components/DevelopmentFocusSection.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const DevelopmentFocusSection = () => {
1616
</h2>
1717

1818
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
19-
<Card className="focus-card bg-offwhite border-primary-blue/20 hover:border-primary-blue/50 animate-float duration-[4s] delay-[0s]">
19+
<Card className="focus-card bg-offwhite border-primary-blue/20 hover:border-primary-blue/50">
2020
<CardContent className="p-8">
2121
<div className="focus-icon bg-primary-blue/5 text-primary-blue">
2222
<CircuitBoard size={24} />
@@ -28,7 +28,7 @@ const DevelopmentFocusSection = () => {
2828
</CardContent>
2929
</Card>
3030

31-
<Card className="focus-card bg-offwhite border-primary-blue/20 hover:border-primary-blue/50 animate-float duration-[4s] delay-[0.5s]">
31+
<Card className="focus-card bg-offwhite border-primary-blue/20 hover:border-primary-blue/50">
3232
<CardContent className="p-8">
3333
<div className="focus-icon bg-primary-blue/5 text-primary-blue">
3434
<Cpu size={24} />
@@ -38,7 +38,7 @@ const DevelopmentFocusSection = () => {
3838
</CardContent>
3939
</Card>
4040

41-
<Card className="focus-card bg-offwhite border-primary-blue/20 hover:border-primary-blue/50 animate-float duration-[4s] delay-[1s]">
41+
<Card className="focus-card bg-offwhite border-primary-blue/20 hover:border-primary-blue/50">
4242
<CardContent className="p-8">
4343
<div className="focus-icon bg-primary-blue/5 text-primary-blue">
4444
<Cpu size={24} />
@@ -48,7 +48,7 @@ const DevelopmentFocusSection = () => {
4848
</CardContent>
4949
</Card>
5050

51-
<Card className="focus-card bg-offwhite border-primary-blue/20 hover:border-primary-blue/50 animate-float duration-[4s] delay-[0.2s]">
51+
<Card className="focus-card bg-offwhite border-primary-blue/20 hover:border-primary-blue/50">
5252
<CardContent className="p-8">
5353
<div className="focus-icon bg-primary-blue/5 text-primary-blue">
5454
<Database size={24} />
@@ -60,7 +60,7 @@ const DevelopmentFocusSection = () => {
6060
</CardContent>
6161
</Card>
6262

63-
<Card className="focus-card bg-offwhite border-primary-blue/20 hover:border-primary-blue/50 animate-float duration-[4s] delay-[0.7s]">
63+
<Card className="focus-card bg-offwhite border-primary-blue/20 hover:border-primary-blue/50">
6464
<CardContent className="p-8">
6565
<div className="focus-icon bg-primary-blue/5 text-primary-blue">
6666
<CircuitBoard size={24} />
@@ -72,7 +72,7 @@ const DevelopmentFocusSection = () => {
7272
</CardContent>
7373
</Card>
7474

75-
<Card className="focus-card bg-offwhite border-primary-blue/20 hover:border-primary-blue/50 animate-float duration-[4s] delay-[1.2s]">
75+
<Card className="focus-card bg-offwhite border-primary-blue/20 hover:border-primary-blue/50">
7676
<CardContent className="p-8">
7777
<div className="focus-icon bg-primary-blue/5 text-primary-blue">
7878
<CircuitBoard size={24} />

0 commit comments

Comments
 (0)