Skip to content

Commit 9101cbf

Browse files
Alexandrbig1Alexandrbig1
authored
Merge pull request #130 from a-woodworth/Frontend/fix-duplicate-heading-id
Fix duplicate heading id
2 parents fe35801 + 80755dc commit 9101cbf

1 file changed

Lines changed: 108 additions & 72 deletions

File tree

‎src/components/SupplementForGoalsSection.jsx‎

Lines changed: 108 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,94 +1,130 @@
11
import { useRef } from 'react';
2-
import { aminoAcids, intraWorkout, preWorkout, proteinPowder, weightManagement } from '../assets';
2+
import {
3+
aminoAcids,
4+
intraWorkout,
5+
preWorkout,
6+
proteinPowder,
7+
weightManagement,
8+
} from '../assets';
39
import { useIntersectionObserver } from '../hooks/useIntersectionObserver';
410
import './SupplementForGoalsSection.css';
511

612
const goalCards = [
7-
{ label: 'protein powder', image: proteinPowder, href: '/collections/protein-powder' },
8-
{ label: 'pre-workout', image: preWorkout, href: '/collections/pre-workout' },
9-
{ label: 'intra-workout', image: intraWorkout, href: '/collections/intra-workout' },
10-
{ label: 'amino acids', image: aminoAcids, href: '/collections/amino-acids' },
11-
{ label: 'weight management', image: weightManagement, href: '/collections/weight-management' },
13+
{
14+
label: 'protein powder',
15+
image: proteinPowder,
16+
href: '/collections/protein-powder',
17+
},
18+
{ label: 'pre-workout', image: preWorkout, href: '/collections/pre-workout' },
19+
{
20+
label: 'intra-workout',
21+
image: intraWorkout,
22+
href: '/collections/intra-workout',
23+
},
24+
{ label: 'amino acids', image: aminoAcids, href: '/collections/amino-acids' },
25+
{
26+
label: 'weight management',
27+
image: weightManagement,
28+
href: '/collections/weight-management',
29+
},
1230
];
1331

1432
export default function SupplementForGoalsSection() {
15-
const goalsRef = useRef(null);
33+
const goalsRef = useRef(null);
1634

17-
useIntersectionObserver({
18-
ref: goalsRef,
19-
selector: '.card-reveal',
20-
className: 'animate-fadeInUp',
21-
threshold: 0.12
22-
});
35+
useIntersectionObserver({
36+
ref: goalsRef,
37+
selector: '.card-reveal',
38+
className: 'animate-fadeInUp',
39+
threshold: 0.12,
40+
});
2341

24-
return (
25-
<section id="goals" ref={goalsRef} className="px-10 py-24 flex flex-col gap-16">
26-
<h2 id="why-choose" className="section-title">
27-
<span className="text-[#000]">Supplements for </span><span className="text-[#f7faff]">every</span> <span className="text-[#000]">goal</span>
28-
</h2>
42+
return (
43+
<section
44+
id="goals"
45+
ref={goalsRef}
46+
className="px-10 py-24 flex flex-col gap-16"
47+
aria-labelledby="goals-heading"
48+
>
49+
<h2 id="goals-heading" className="section-title">
50+
<span className="text-[#000]">Supplements for </span>
51+
<span className="text-[#f7faff]">every</span>{' '}
52+
<span className="text-[#000]">goal</span>
53+
</h2>
2954

30-
<div className="space-y-10">
31-
<div className="flex justify-center flex-col md:flex-row gap-10">
32-
{goalCards.slice(0, 2).map((goalCard, index) => (
33-
<GoalCard
34-
key={goalCard.label}
35-
item={goalCard}
36-
delayIndex={index}
37-
size="large"
38-
/>
39-
))}
40-
</div>
55+
<div className="space-y-10">
56+
<div className="flex justify-center flex-col md:flex-row gap-10">
57+
{goalCards.slice(0, 2).map((goalCard, index) => (
58+
<GoalCard
59+
key={goalCard.label}
60+
item={goalCard}
61+
delayIndex={index}
62+
size="large"
63+
/>
64+
))}
65+
</div>
4166

42-
<div className="flex justify-center flex-col md:flex-row gap-[26px]">
43-
{goalCards.slice(2, 5).map((goalCard, index) => (
44-
<GoalCard
45-
key={goalCard.label}
46-
item={goalCard}
47-
delayIndex={index + 2}
48-
size="small"
49-
/>
50-
))}
51-
</div>
52-
</div>
53-
</section >
54-
);
67+
<div className="flex justify-center flex-col md:flex-row gap-[26px]">
68+
{goalCards.slice(2, 5).map((goalCard, index) => (
69+
<GoalCard
70+
key={goalCard.label}
71+
item={goalCard}
72+
delayIndex={index + 2}
73+
size="small"
74+
/>
75+
))}
76+
</div>
77+
</div>
78+
</section>
79+
);
5580
}
5681

5782
function GoalCard({ item, delayIndex = 0, size }) {
58-
const labelId = `goal-label-${delayIndex}`;
59-
const dimensions = size === 'large'
60-
? { width: 600, height: 342, minClass: 'min-h-[200px] md:min-h-[224px] lg:min-h-[280px]' }
61-
: { width: 436, height: 220, minClass: 'min-h-[140px] md:min-h-[160px] lg:min-h-[200px]' };
83+
const labelId = `goal-label-${delayIndex}`;
84+
const dimensions =
85+
size === 'large'
86+
? {
87+
width: 600,
88+
height: 342,
89+
minClass: 'min-h-[200px] md:min-h-[224px] lg:min-h-[280px]',
90+
}
91+
: {
92+
width: 436,
93+
height: 220,
94+
minClass: 'min-h-[140px] md:min-h-[160px] lg:min-h-[200px]',
95+
};
6296

63-
return (
64-
<a
65-
href={item.href}
66-
className="block card-reveal card-elevate"
67-
style={{ animationDelay: `${delayIndex * 120}ms` }}
68-
aria-labelledby={labelId}
69-
role="group"
70-
>
71-
<div className="relative overflow-hidden rounded card-inner">
72-
<GoalCardImage item={item} dimensions={dimensions} />
97+
return (
98+
<a
99+
href={item.href}
100+
className="block card-reveal card-elevate"
101+
style={{ animationDelay: `${delayIndex * 120}ms` }}
102+
aria-labelledby={labelId}
103+
role="group"
104+
>
105+
<div className="relative overflow-hidden rounded card-inner">
106+
<GoalCardImage item={item} dimensions={dimensions} />
73107

74-
<div className="absolute bottom-3 left-3">
75-
<span id={labelId} className="supplement-goal-label">
76-
{item.label}
77-
</span>
78-
</div>
79-
</div>
80-
</a>
81-
);
108+
<div className="absolute bottom-3 left-3">
109+
<span id={labelId} className="supplement-goal-label">
110+
{item.label}
111+
</span>
112+
</div>
113+
</div>
114+
</a>
115+
);
82116
}
83117

84118
function GoalCardImage({ item, dimensions }) {
85-
return <img
86-
src={item.image}
87-
alt={item.label}
88-
loading="lazy"
89-
decoding="async"
90-
width={dimensions.width}
91-
height={dimensions.height}
92-
className={`w-full ${dimensions.minClass} object-contain bg-white transition-opacity duration-300`}
119+
return (
120+
<img
121+
src={item.image}
122+
alt={item.label}
123+
loading="lazy"
124+
decoding="async"
125+
width={dimensions.width}
126+
height={dimensions.height}
127+
className={`w-full ${dimensions.minClass} object-contain bg-white transition-opacity duration-300`}
93128
/>
129+
);
94130
}

0 commit comments

Comments
 (0)