Skip to content

Refactoring Hero Part of Pages Into Hero Component #117

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
memtech3 merged 2 commits into from
Apr 4, 2026
Merged

Refactoring Hero Part of Pages Into Hero Component #117

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9d0d967
first pass at extracting hero into component
memtech3 Apr 4, 2026
4a9275f
updated Home to use hero component, removed project ticker per #123
memtech3 Apr 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 42 additions & 0 deletions src/components/Hero.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
export default function Hero({
heading,
subheading,
backgroundImage,
backgroundAltText,
children,
}) {
// split heading text so that yellow can be applied to last word only
const headingWithoutLastWord =
heading.length > 1
? heading.trim().split(/\s+/).slice(0, -1).join(" ")
: null;
const headingLastWord =
heading.length > 1 ? heading.trim().split(/\s+/).pop() : heading;

return (
<section className="relative min-h-screen flex items-center justify-center px-4 overflow-hidden">
{backgroundImage != null && (
<>
<img
src={backgroundImage}
alt={backgroundAltText}
className="absolute inset-0 w-full h-full object-cover object-center brightness-50 z-0"
/>
{/* Image overlay for better text contrast */}
<div className="absolute inset-0 bg-black/25 z-0"></div>{" "}
</>
)}

<div className="relative text-center max-w-6xl mx-auto z-10">
<h1 className="text-6xl md:text-8xl lg:text-9xl tracking-tight text-gray-200 mb-8">
<span className="block">{headingWithoutLastWord}</span>
<span className="block text-yellow-400">{headingLastWord}</span>
</h1>
<p className="text-xl md:text-2xl font-light tracking-wide text-gray-200 mb-12 max-w-3xl mx-auto">
{subheading}
</p>
{children}
</div>
</section>
);
}
32 changes: 9 additions & 23 deletions src/pages/About.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { useState } from "react";
import StatisticsCard from "../components/StatisticsCard";
import TextLink from "../components/TextLink";
import Hero from "../components/Hero";

const About = () => {
const statistics = [
Expand Down Expand Up @@ -140,29 +141,14 @@ const About = () => {

return (
<div className="min-h-screen">
{/* Hero Section with Officer Photo Background */}
<section className="relative min-h-screen flex items-center justify-center px-4 overflow-hidden">
{/* Officer Photo Background */}
<img
src="/assets/GeneralPhotos/OfficerPhoto.webp"
alt="Officer Group Photo"
className="absolute inset-0 w-full h-full object-cover object-center brightness-50 z-0"
/>
{/* Overlay for contrast */}
<div className="absolute inset-0 bg-black/25 z-0"></div>
<div className="relative text-center max-w-6xl mx-auto z-10">
{/* No glass effect */}
<h1 className="text-6xl md:text-8xl lg:text-9xl tracking-tight text-gray-200 mb-8">
<span className="block">ABOUT</span>
<span className="block text-yellow-400">TURTLE</span>
</h1>
<p className="hero-subtitle text-xl md:text-2xl font-light tracking-wide text-white mb-12 max-w-3xl mx-auto">
TURTLE is a student-led research lab at Texas A&M University,
pioneering innovative robotics solutions and developing the next
generation of robotics leaders.
</p>
</div>
</section>
<Hero
heading="ABOUT TURTLE"
backgroundImage="/assets/GeneralPhotos/OfficerPhoto.webp"
backgroundAltText="Officer Group Photo"
subheading="TURTLE is a student-led research lab at Texas A&M University, pioneering
innovative robotics solutions and developing the next generation of
robotics leaders."
></Hero>

{/* Statistics Section */}
<section className="py-24 px-4 bg-gradient-to-br from-gray-800 to-gray-900">
Expand Down
55 changes: 17 additions & 38 deletions src/pages/Apply.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,50 +1,29 @@
import { Link } from "react-router-dom";
import ButtonLink from "../components/ButtonLink";
import Hero from "../components/Hero";

const Apply = () => {
// ✅ Toggle this to open/close applications
const applicationsOpen = false; // change to false when closed

return (
<div className="min-h-screen">
{/* Hero Section with Background Image */}
<section className="relative min-h-screen flex items-center justify-center px-4 overflow-hidden">
{/* Background Image */}
<img
src="/assets/GeneralPhotos/ApplyNowJpg.webp"
alt="Apply Now Background"
className="absolute inset-0 w-full h-full object-cover object-center brightness-50 z-0"
/>
{/* Overlay for contrast */}
<div className="absolute inset-0 bg-black/25 z-0"></div>
<div className="relative text-center max-w-6xl mx-auto z-10">
{/* Removed glass-card wrapper */}
{applicationsOpen ? (
<h1 className="text-6xl md:text-8xl lg:text-9xl tracking-tight text-white drop-shadow-2xl mb-8">
<span className="block">APPLY</span>
<span className="block text-accent">NOW</span>
</h1>
) : (
<h1 className="text-6xl md:text-8xl lg:text-9xl tracking-tight mb-8">
<span className="block">APPLICATIONS CLOSED</span>
</h1>
)}

<p className="hero-subtitle text-xl md:text-2xl font-light tracking-wide text-gray-200 mb-12 max-w-3xl mx-auto drop-shadow-md">
{applicationsOpen
? "Fill out this form to join Hatchling or Advanced Project teams at TURTLE."
: "Applications are currently closed. Please check back soon for future openings."}
</p>
{applicationsOpen && (
<ButtonLink
sizeVariant="xl"
to="https://forms.gle/59pUiPUCpDrgBCqn7"
>
APPLY NOW
</ButtonLink>
)}
</div>
</section>
<Hero
heading={applicationsOpen ? "APPLY NOW" : "APPLICATIONS CLOSED"}
subheading={
applicationsOpen
? "Fill out this form to join Hatchling or Advanced Project teams at TURTLE."
: "Applications are currently closed. Please check back soon for future openings."
}
backgroundImage="/assets/GeneralPhotos/ApplyNowJpg.webp"
backgroundAltTextalt="Apply Now Background"
>
{applicationsOpen && (
<ButtonLink sizeVariant="xl" to="https://forms.gle/59pUiPUCpDrgBCqn7">
APPLY NOW
</ButtonLink>
)}
</Hero>

{/* Application Process */}
<section className="py-24 px-4">
Expand Down
20 changes: 6 additions & 14 deletions src/pages/DevelopmentPrograms.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { useNavigate } from "react-router-dom";
import ButtonLink from "../components/ButtonLink";
import Hero from "../components/Hero";

const DevelopmentPrograms = () => {
const navigate = useNavigate();
Expand Down Expand Up @@ -69,21 +70,12 @@ const DevelopmentPrograms = () => {
</div>
</div>

{/* Hero Section */}
<section className="relative min-h-screen flex items-center justify-center px-4 pt-20">
<div className="absolute inset-0 bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900"></div>
<div className="relative text-center max-w-6xl mx-auto z-10">
<h1 className="text-6xl md:text-8xl lg:text-9xl tracking-tight text-gray-200 mb-8">
<span className="block">DEVELOPMENT</span>
<span className="block text-yellow-400">PROGRAMS</span>
</h1>
<p className="hero-subtitle text-xl md:text-2xl font-light tracking-wide text-gray-400 mb-12 max-w-3xl mx-auto">
To provide the resources and environment that enables undergraduate
<Hero
heading="DEVELOPMENT PROGRAMS"
subheading="To provide the resources and environment that enables undergraduate
engineers to grow outside the classroom through technical lectures
and collaborative, hands-on semester projects
</p>
</div>
</section>
and collaborative, hands-on semester projects"
></Hero>

{/* Program Sections */}
{programs.map((program, index) => (
Expand Down
34 changes: 7 additions & 27 deletions src/pages/Hatchling.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { useEffect, useState } from "react";
import ImageCarousel from "../components/ImageCarousel";
import ButtonLink from "../components/ButtonLink";
import Hero from "../components/Hero";

const Hatchling = () => {
// Check localStorage for slides visibility
Expand Down Expand Up @@ -161,33 +162,12 @@ const Hatchling = () => {

return (
<div className="min-h-screen">
{/* Hero Section */}
<section className="relative min-h-screen flex items-center justify-center px-4 overflow-hidden">
{/* Background Image */}
<img
src="/assets/GeneralPhotos/Fall_2025_CSTAT_Hatchling_Group_Photo.webp"
alt="Hatchling Program Background"
className="absolute inset-0 w-full h-full object-cover object-center brightness-50"
/>

{/* Overlay for light contrast */}
<div className="absolute inset-0 bg-black/25"></div>

{/* Text only — no box */}
<div className="relative text-center z-10 max-w-6xl mx-auto -translate-y-36">
<h1 className="text-5xl md:text-7xl lg:text-8xl tracking-tight text-white drop-shadow-2xl">
<span className="block">HATCHLING</span>
<span className="block">DEVELOPMENT</span>
<span className="block text-accent">PROGRAM</span>
</h1>

<div className="founding-info mt-8">
<p className="text-lg md:text-xl font-light text-gray-200 drop-shadow-md">
Founded 2015 • External Expansion 2025
</p>
</div>
</div>
</section>
<Hero
heading="HATCHLING DEVELOPMENT PROGRAM"
subheading="Founded 2015 • External Expansion 2025"
backgroundImage="/assets/GeneralPhotos/Fall_2025_CSTAT_Hatchling_Group_Photo.webp"
backgroundAltText="Hatchling Program Background"
></Hero>

{/* Mission Statement Section */}
<section className="py-24 px-4">
Expand Down
68 changes: 24 additions & 44 deletions src/pages/Home.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,8 @@ import { useState } from "react";
import { Analytics } from "@vercel/analytics/react";
import { Link } from "react-router-dom";
import SponsorTicker from "../components/SponsorTicker";
import ProjectTicker from "../components/ProjectTicker";
import { projects } from "../data/projects";
import ButtonLink from "../components/ButtonLink";
import Hero from "../components/Hero";

const ENABLE_SHOWCASE_POPUPS = true;

Expand All @@ -15,49 +14,30 @@ const Home = () => {
<>
<Analytics />
<div className="min-h-screen">
{/* Hero Section */}
<section className="relative min-h-screen flex items-center justify-center px-4">
<div className="absolute inset-0 bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900"></div>

<div className="relative text-center max-w-6xl mx-auto z-10">
<h1 className="text-6xl md:text-8xl lg:text-9xl tracking-tight text-gray-200 mb-8">
<span className="block">TURTLE</span>
<span className="block text-yellow-400">ROBOTICS</span>
</h1>

<p className="hero-subtitle text-xl md:text-2xl font-light tracking-wide text-gray-400 mb-12 max-w-3xl mx-auto">
Pioneering robotics solutions and student leadership development
at Texas A&M University
</p>

<div className="flex flex-col sm:flex-row gap-6 justify-center items-center relative z-50">
<ButtonLink
className="hero-button"
to="/projects"
sizeVariant="large"
style="primary"
>
EXPLORE PROJECTS
</ButtonLink>
<ButtonLink
className="hero-button"
to="/about"
sizeVariant="large"
style="primary-outline"
>
LEARN MORE
</ButtonLink>
</div>
</div>

{/* Project Ticker - positioned at bottom */}
<div className="absolute bottom-0 left-0 right-0 z-10">
<ProjectTicker projects={projects} />
<Hero
heading="TURTLE ROBOTICS"
subheading="Pioneering robotics solutions and student leadership development
at Texas A&M University"
>
<div className="flex flex-col sm:flex-row gap-6 justify-center items-center relative z-50">
<ButtonLink
className="hero-button"
to="/projects"
sizeVariant="large"
style="primary"
>
EXPLORE PROJECTS
</ButtonLink>
<ButtonLink
className="hero-button"
to="/about"
sizeVariant="large"
style="primary-outline"
>
LEARN MORE
</ButtonLink>
</div>

{/* Sponsor Ticker - positioned above project ticker */}
{/* ...existing code... */}
</section>
</Hero>

{/* About Section */}
<section className="py-24 px-4">
Expand Down
34 changes: 7 additions & 27 deletions src/pages/MechanicalIncubator.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import ImageCarousel from "../components/ImageCarousel";
import ButtonLink from "../components/ButtonLink";
import TextLink from "../components/TextLink";
import Hero from "../components/Hero";

const MechanicalIncubator = () => {
const learningObjectiveGroups = [
Expand Down Expand Up @@ -141,33 +142,12 @@ const MechanicalIncubator = () => {

return (
<div className="min-h-screen">
{/* Hero Section */}
<section className="relative min-h-screen flex items-center justify-center px-4 overflow-hidden">
{/* Background Image */}
<img
src="/assets/GeneralPhotos/Fall_2025_CSTAT_Hatchling_Group_Photo.webp"
alt="Hatchling Program Background"
className="absolute inset-0 w-full h-full object-cover object-center brightness-50"
/>

{/* Overlay for light contrast */}
<div className="absolute inset-0 bg-black/25"></div>

{/* Text only — no box */}
<div className="relative text-center z-10 max-w-6xl mx-auto -translate-y-36">
<h1 className="text-5xl md:text-7xl lg:text-8xl tracking-tight text-white drop-shadow-2xl">
<span className="block">MECHANICAL</span>
<span className="block">INCUBATOR</span>
<span className="block text-accent">PROGRAM</span>
</h1>

<div className="founding-info mt-8">
<p className="text-lg md:text-xl font-light text-gray-200 drop-shadow-md">
Releasing Fall 2026
</p>
</div>
</div>
</section>
<Hero
heading="MECHANICAL INCUBATOR PROGRAM"
subheading="Releasing Fall 2026"
backgroundImage="/assets/GeneralPhotos/Fall_2025_CSTAT_Hatchling_Group_Photo.webp"
backgroundAltText="Hatchling Program Background"
></Hero>

{/* Mission Statement Section */}
<section className="py-24 px-4">
Expand Down
Loading
Loading