Skip to content

Commit 36f1a2a

Browse files
gavinostlergavinostler
committed
refactor: refactor outreach
1 parent 3a58425 commit 36f1a2a

3 files changed

Lines changed: 224 additions & 172 deletions

File tree

‎app/src/components/unique/ImageTextImage.tsx‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
interface Row {
2+
title: string;
3+
text: string;
4+
imageLeft: string;
5+
imageRight: string;
6+
imageDescriptionLeft: string;
7+
imageDescriptionRight: string;
8+
}
9+
10+
interface ImageTextImageRowProps {
11+
row: Row;
12+
}
13+
14+
const ImageTextImageRow = ({
15+
row,
16+
}: React.PropsWithChildren<ImageTextImageRowProps>) => {
17+
return (
18+
<div className="size-full flex flex-row justify-center-safe items-center gap-24">
19+
<div className="relative w-auto h-100 flex items-center justify-center">
20+
<img
21+
src={row.imageLeft}
22+
className="max-w-none h-[100%] opacity-0 lg:opacity-25"
23+
alt={row.imageDescriptionLeft}
24+
/>
25+
<div className="absolute font-sans inset-0 size-full flex flex-col justify-center items-center text-black text-xl px-[10%] text-center gap-5">
26+
<div className="font-bold">{row.title}</div>
27+
<p>{row.text}</p>
28+
</div>
29+
</div>
30+
<img
31+
src={row.imageRight}
32+
className="h-100 rounded-xl opacity-20 lg:opacity-100 absolute lg:relative"
33+
alt={row.imageDescriptionRight}
34+
></img>
35+
</div>
36+
);
37+
};
38+
39+
interface ImageTextImageProps extends React.ComponentProps<'section'> {
40+
rows: Row[];
41+
}
42+
43+
const ImageTextImage = ({
44+
rows,
45+
className,
46+
}: React.PropsWithChildren<ImageTextImageProps>) => {
47+
return (
48+
<section
49+
className={
50+
'bg-white relative w-full h-auto flex flex-col gap-16 overflow-hidden ' +
51+
className
52+
}
53+
>
54+
{rows.map((row) => {
55+
return <ImageTextImageRow row={row} />;
56+
})}
57+
</section>
58+
);
59+
};
60+
61+
export default ImageTextImage;

‎app/src/pages/Outreach.tsx‎

Lines changed: 89 additions & 160 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,68 @@
11
import { GrayBox, GrayBoxContent } from '../components/GrayBox';
2+
import ImageTextImage from '../components/unique/ImageTextImage';
3+
4+
interface OutreachEvent {
5+
title: string;
6+
description: string;
7+
image: string;
8+
imageDescription: string;
9+
}
10+
11+
const outreachEvents: OutreachEvent[] = [
12+
{
13+
title: 'Science Nights',
14+
description:
15+
'Our team regularly attends elementary school science nights, where students can interact with our robot, explore engineering concepts, and see STEM in action.',
16+
image: '/outreach1.png',
17+
imageDescription:
18+
'Image of Team 1280 working with children for outreach purposes, standing over robot.',
19+
},
20+
{
21+
title: 'Library Events',
22+
description:
23+
'At the Danville Library, we introduce younger students to the world of FIRST through engaging robot demonstrations and fun, interactive activities.',
24+
image: '/outreach2.png',
25+
imageDescription: 'Outreach 2',
26+
},
27+
{
28+
title: 'Girl Scout Gold Award/STEM Night',
29+
description:
30+
'As part of a Girl Scout Gold Award, we developed activities for children to explore STEM concepts while also providing opportunities to drive our robot. We receive similar requests from many local groups and are always excited to share our passion for robotics.',
31+
image: '/outreach3.png',
32+
imageDescription: 'Outreach 3',
33+
},
34+
{
35+
title: 'Veterans’ Hall Outreach',
36+
description:
37+
'Every year, we showcase our robot, equipment, and designs at the Veterans Hall during Veterans Day. This event frequently garners local news coverage and allows us to share our work with a broad audience.',
38+
image: '/outreach4.png',
39+
imageDescription: 'Outreach 4',
40+
},
41+
];
42+
43+
const outreachPrograms: OutreachEvent[] = [
44+
{
45+
title: 'First Lego League',
46+
description:
47+
'Our team has partnered with local elementary schools to help launch three new FLL teams at Alamo Elementary School and Rancho Romero Elementary School for the 2025–26 season. We are dedicated to sharing our knowledge, mentoring students, and promoting the values of STEM and FIRST to inspire the next generation of innovators.',
48+
image: '/fll-logo.png',
49+
imageDescription: 'FLL Logo',
50+
},
51+
{
52+
title: 'Robotics Class & Club',
53+
description:
54+
'We help organize and support the robotics class and club at our school and in the community. These programs give students hands-on experience with design, building, and programming, fostering teamwork and problem-solving skills that extend beyond the classroom.',
55+
image: '/srv-logo.png',
56+
imageDescription: 'SRV Logo',
57+
},
58+
{
59+
title: 'Comrades Program',
60+
description:
61+
'We work closely with our high school’s special education program, known as the Comrades. Our members host regular lunch sessions where students learn programming concepts and apply them using VEX robots, providing both technical skills and an inclusive, collaborative learning environment.',
62+
image: '/outreach5.png',
63+
imageDescription: 'Outreach 5',
64+
},
65+
];
266

367
const Outreach = () => (
468
<>
@@ -31,99 +95,18 @@ const Outreach = () => (
3195
</GrayBox>
3296
</div>
3397
</section>
34-
<section className="bg-white relative w-full h-auto flex flex-col gap-16 overflow-hidden">
35-
<div className="size-full flex flex-row justify-center-safe items-center gap-24">
36-
<div className="relative w-auto h-100 flex items-center justify-center">
37-
<img
38-
src="/bg-logo.png"
39-
className="max-w-none h-[100%] opacity-25"
40-
alt="Background Logo"
41-
/>
42-
<div className="absolute font-sans inset-0 size-full flex flex-col justify-center items-center text-black text-xl px-[25%] text-center gap-5">
43-
<div className="font-bold">Science Nights</div>
44-
<p>
45-
Our team regularly attends elementary school science nights, where
46-
students can interact with our robot, explore engineering
47-
concepts, and see STEM in action.
48-
</p>
49-
</div>
50-
</div>
51-
<img
52-
src="/outreach1.png"
53-
className="h-100 rounded-xl opacity-20 lg:opacity-100 absolute lg:relative"
54-
alt="Outreach 1"
55-
></img>
56-
</div>
57-
<div className="size-full flex flex-row justify-center-safe items-center gap-24">
58-
<div className="relative w-auto h-100 flex items-center justify-center">
59-
<img
60-
src="/bg-logo.png"
61-
className="max-w-none h-[100%] opacity-25"
62-
alt="Background Logo"
63-
/>
64-
<div className="absolute font-sans inset-0 size-full flex flex-col justify-center items-center text-black text-xl px-[25%] text-center gap-5">
65-
<div className="font-bold">Library Events</div>
66-
<p>
67-
At the Danville Library, we introduce younger students to the
68-
world of FIRST through engaging robot demonstrations and fun,
69-
interactive activities.
70-
</p>
71-
</div>
72-
</div>
73-
<img
74-
src="/outreach2.png"
75-
className="h-100 rounded-xl opacity-20 lg:opacity-100 absolute lg:relative"
76-
alt="Outreach 2"
77-
></img>
78-
</div>
79-
<div className="size-full flex flex-row justify-center-safe items-center gap-24">
80-
<div className="relative w-auto h-100 flex items-center justify-center">
81-
<img
82-
src="/bg-logo.png"
83-
className="max-w-none h-[100%] opacity-25"
84-
alt="Background Logo"
85-
/>
86-
<div className="absolute font-sans inset-0 size-full flex flex-col justify-center items-center text-black text-xl px-[15%] text-center gap-5">
87-
<div className="font-bold">Girl Scout Gold Award/STEM Night</div>
88-
<p>
89-
As part of a Girl Scout Gold Award, we developed activities for
90-
children to explore STEM concepts while also providing
91-
opportunities to drive our robot. We receive similar requests from
92-
many local groups and are always excited to share our passion for
93-
robotics.
94-
</p>
95-
</div>
96-
</div>
97-
<img
98-
src="/outreach3.png"
99-
className="h-100 rounded-xl opacity-20 lg:opacity-100 absolute lg:relative"
100-
alt="Outreach 3"
101-
></img>
102-
</div>
103-
<div className="size-full flex flex-row justify-center-safe items-center gap-24">
104-
<div className="relative w-auto h-100 flex items-center justify-center">
105-
<img
106-
src="/bg-logo.png"
107-
className="max-w-none h-[100%] opacity-25"
108-
alt="Background Logo"
109-
/>
110-
<div className="absolute font-sans inset-0 size-full flex flex-col justify-center items-center text-black text-xl px-[20%] text-center gap-5">
111-
<div className="font-bold">Veterans’ Hall Outreach</div>
112-
<p>
113-
Every year, we showcase our robot, equipment, and designs at the
114-
Veterans Hall during Veterans Day. This event frequently garners
115-
local news coverage and allows us to share our work with a broad
116-
audience.
117-
</p>
118-
</div>
119-
</div>
120-
<img
121-
src="/outreach4.png"
122-
className="h-100 rounded-xl opacity-20 lg:opacity-100 absolute lg:relative"
123-
alt="Outreach 4"
124-
></img>
125-
</div>
126-
</section>
98+
<ImageTextImage
99+
rows={outreachEvents.map((row) => {
100+
return {
101+
imageLeft: '/bg-logo.png',
102+
imageDescriptionLeft: 'SRV Logo',
103+
imageDescriptionRight: row.imageDescription,
104+
imageRight: row.image,
105+
title: row.title,
106+
text: row.description,
107+
};
108+
})}
109+
/>
127110
<section className="text-left bg-white relative h-auto w-full px-10 lg:px-24 pt-18 pb-8 overflow-hidden max-w-[64rem] mx-auto">
128111
<div className="lg:min-w-160">
129112
<div className="text-black text-3xl text-center lg:text-left lg:text-5xl font-roboto whitespace-nowrap">
@@ -139,73 +122,19 @@ const Outreach = () => (
139122
</GrayBox>
140123
</div>
141124
</section>
142-
<section className="text-left bg-white relative h-400 w-full flex flex-col items-center mb-10 overflow-hidden">
143-
<img
144-
src="/bg-logo.png"
145-
className="absolute w-auto h-full max-w-none opacity-25"
146-
alt="Background Logo"
147-
/>
148-
<div className="absolute w-full h-full flex flex-col text-black text-xl text-center justify-evenly">
149-
<div className="w-full h-100 flex flex-row justify-evenly items-center lg:px-20">
150-
<div className="flex items-center justify-center h-100 opacity-15 lg:opacity-100 lg:h-full aspect-9/8 absolute lg:relative">
151-
<img
152-
src="/fll-logo.png"
153-
className="w-auto h-full max-w-none"
154-
alt="FLL Logo"
155-
></img>
156-
</div>
157-
<div className="h-full aspect-square flex flex-col justify-center items-center gap-5 font-sans">
158-
<div className="font-bold">First Lego League</div>
159-
<p>
160-
Our team has partnered with local elementary schools to help
161-
launch three new FLL teams at Alamo Elementary School and Rancho
162-
Romero Elementary School for the 2025–26 season. We are dedicated
163-
to sharing our knowledge, mentoring students, and promoting the
164-
values of STEM and FIRST to inspire the next generation of
165-
innovators.
166-
</p>
167-
</div>
168-
</div>
169-
<div className="w-full h-100 flex flex-row justify-evenly items-center lg:px-20">
170-
<div className="flex items-center justify-center h-100 opacity-15 lg:opacity-100 lg:h-full aspect-9/8 absolute lg:relative">
171-
<img
172-
src="/srv-logo.png"
173-
className="w-auto h-full max-w-none"
174-
alt="SRV Logo"
175-
></img>
176-
</div>
177-
<div className="h-full aspect-square flex flex-col justify-center items-center gap-5 font-sans z-1">
178-
<div className="font-bold">Robotics Class & Club</div>
179-
<p>
180-
We help organize and support the robotics class and club at our
181-
school and in the community. These programs give students hands-on
182-
experience with design, building, and programming, fostering
183-
teamwork and problem-solving skills that extend beyond the
184-
classroom.
185-
</p>
186-
</div>
187-
</div>
188-
<div className="w-full h-100 flex flex-row justify-evenly items-center lg:px-20">
189-
<div className="flex items-center justify-center h-100 opacity-15 lg:opacity-100 lg:h-full aspect-9/8 absolute lg:relative">
190-
<img
191-
src="/outreach5.png"
192-
className="w-auto h-full max-w-none rounded-xl"
193-
alt="Outreach 5"
194-
></img>
195-
</div>
196-
<div className="h-full aspect-square flex flex-col justify-center items-center gap-5 font-sans z-1">
197-
<div className="font-bold">Comrades Program</div>
198-
<p>
199-
We work closely with our high school’s special education program,
200-
known as the Comrades. Our members host regular lunch sessions
201-
where students learn programming concepts and apply them using VEX
202-
robots, providing both technical skills and an inclusive,
203-
collaborative learning environment.
204-
</p>
205-
</div>
206-
</div>
207-
</div>
208-
</section>
125+
<ImageTextImage
126+
className="pb-30"
127+
rows={outreachPrograms.map((row) => {
128+
return {
129+
imageLeft: '/bg-logo.png',
130+
imageDescriptionLeft: 'SRV Logo',
131+
imageDescriptionRight: row.imageDescription,
132+
imageRight: row.image,
133+
title: row.title,
134+
text: row.description,
135+
};
136+
})}
137+
/>
209138
</>
210139
);
211140

0 commit comments

Comments
 (0)