Skip to content

Redesign Become a Sponsor page #17

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
nchalla3 merged 1 commit into from
Apr 15, 2026
Merged

Redesign Become a Sponsor page #17

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
298 changes: 174 additions & 124 deletions src/app/become-sponsor/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,160 +10,210 @@ export const metadata: Metadata = {
description: "Partner with Formula Slug, UC Santa Cruz's premier engineering team. Support the next generation of engineers.",
};

const benefits = [
{
title: "Brand Visibility",
description:
"Your logo prominently displayed on our Formula SAE Electric vehicle, team apparel, and digital platforms — gaining direct exposure within the UC Santa Cruz community and beyond.",
},
{
title: "Recruiting Pipeline",
description:
"Direct access to UCSC's top engineering talent in Electrical, CS, and Computer Engineering. Formula Slug alumni have gone on to Tesla, Apple, Zero Motorcycles, and Joby Aviation. Our 150+ members are motivated, hands-on problem solvers.",
},
{
title: "Technical Collaboration",
description:
"Opportunities for joint research, product testing, and prototype development. Our teams work on battery management, motor control, composite materials, and autonomous systems — ideal for industry partnerships.",
},
{
title: "Community Impact",
description:
"Support hands-on STEM education at one of California's premier research universities. Your sponsorship directly bridges academic theory with real-world engineering challenges.",
},
];

const contributions = [
{
label: "FUNDING",
body: "The team depends on sponsor funding to purchase the materials and components required to build our car.",
},
{
label: "RESOURCES",
body: "In-kind donations such as parts and services give us the resources to turn our project into reality.",
},
{
label: "GUIDANCE",
body: "Working with unexplored technology creates challenges. Industry expertise helps us shape the engineers of the future.",
},
];

const stats = [
{ value: "150+", label: "Active Members" },
{ value: "10+", label: "Engineering Disciplines" },
{ value: "7+", label: "Years of Competition" },
];

export default function BecomeSponsorPage() {
return (
<main className="min-h-screen text-white" style={{ backgroundColor: colors.background.primary }}>
<main
className="min-h-screen text-white"
style={{ backgroundColor: colors.background.primary }}
>
<div className="container mx-auto p-0 sm:px-6 lg:px-8">
<Navbar />
{/* Header centered between navbar and content */}
<div className="pt-[12vh] pb-4">
<h1 className="text-4xl sm:text-6xl font-bold text-center px-4">

{/* Page title */}
<div className="pt-[12vh] pb-6 text-center px-4">
<h1 className="text-4xl sm:text-6xl font-bold">
<ShimmerTitle>Become a Sponsor</ShimmerTitle>
</h1>
</div>

<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
{/* Hero Section */}
<div className="text-center py-8">
<p className="text-xl max-w-3xl mx-auto leading-relaxed " style={{ color: colors.gray[300] }}>
Formula Slug is dedicated to empowering the next
generation of engineers by providing hands-on
experience through the design and development
of electric vehicles as part of the Formula SAE
competition. By sponsoring our team, you're directly contributing to hands-on engineering experience to the largest engineering club at UC Santa Cruz.
</p>

<div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 pb-20 space-y-20">

{/* Hero blurb */}
<p
className="text-lg sm:text-xl text-center max-w-3xl mx-auto leading-relaxed"
style={{ color: colors.gray[300] }}
>
Formula Slug is dedicated to empowering the next generation of
engineers through hands-on design and development of electric
vehicles in the Formula SAE competition. By sponsoring our team,
you&apos;re directly funding experiential learning for the largest
engineering club at UC Santa Cruz.
</p>

{/* Stats row */}
<div className="grid grid-cols-3 gap-4 sm:gap-8">
{stats.map((stat) => (
<div
key={stat.label}
className="rounded-xl p-5 sm:p-8 text-center"
style={{ backgroundColor: colors.background.secondary }}
>
<div
className="text-3xl sm:text-5xl font-bold mb-1"
style={{ color: colors.electricBlue }}
>
{stat.value}
</div>
<div
className="text-[10px] sm:text-sm tracking-wide sm:uppercase sm:tracking-widest leading-tight"
style={{ color: colors.gray[400] }}
>
{stat.label}
</div>
</div>
))}
</div>

{/* Why Partner With Us */}
<section className="py-0">
<h2 className="text-3xl font-bold text-center mb-12" style={{ color: colors.slugYellow }}>
<section>
<h2
className="text-3xl font-bold text-center mb-10"
style={{ color: colors.slugYellow }}
>
Why Partner With Us?
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
{[
{
title: "Brand Visibility",
description: "Your logo prominently displayed on our Formula SAE Electric vehicle, team apparel, and digital platforms. Your company will gain exposure and visibility within the UC Santa Cruz community.",
},
{
title: "Recruiting Pipeline",
description: "Direct access to UC Santa Cruz's top engineering talent across Electrical, Computer Science, and Computer Engineering disciplines. Formula Slug alumni have gone on to work full-time at companies like Tesla, Apple, Zero Motorcycles and Joby Aviation. Our 150+ members represent motivated, hands-on problem solvers with real-world project experience in electric vehicle technology.",
},
{
title: "Technical Collaboration",
description: "Opportunities for joint research projects, product testing, and prototype development. Our multidisciplinary teams work on cutting-edge EV technology including battery management, motor control, composite materials, and autonomous systems, which are perfect for industry partnerships.",
},
{
title: "Community Impact",
description: "Support hands-on STEM education at UC Santa Cruz, one of California's premier research universities. Your sponsorship directly enables experiential learning that bridges academic theory with real-world engineering challenges.",
}
].map((benefit, index) => (
<div key={index} className="p-6 rounded-lg" style={{ backgroundColor: colors.background.secondary }}>
<div className="flex items-center mb-4">
<h3 className="text-xl font-semibold" style={{ color: colors.electricBlue }}>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{benefits.map((benefit) => (
<div
key={benefit.title}
className="rounded-xl p-6 flex gap-4"
style={{
backgroundColor: colors.background.secondary,
borderLeft: `3px solid ${colors.electricBlue}`,
}}
>
<div>
<h3
className="text-lg font-semibold mb-2"
style={{ color: colors.electricBlue }}
>
{benefit.title}
</h3>
<p className="text-sm leading-relaxed" style={{ color: colors.gray[400] }}>
{benefit.description}
</p>
</div>
<p style={{ color: colors.gray[400] }}>
{benefit.description}
</p>
</div>
))}
</div>
</section>

{/* What Your Sponsorship Does */}
<section className="py-12">
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-start">
<div>
<h2 className="text-3xl font-bold text-center mb-6" style={{ color: colors.slugYellow }}>
Make A Difference
</h2>
<div className="space-y-6">
<div className="p-4 rounded-lg" style={{ backgroundColor: colors.background.secondary }}>
<h3 className="text-xl font-bold mb-2" style={{ color: colors.electricBlue }}>
FUNDING
</h3>
<p style={{ color: colors.gray[400] }}>
The team depends on sponsor funding to purchase the materials and components required to build our car.
</p>
</div>

<div className="p-4 rounded-lg" style={{ backgroundColor: colors.background.secondary }}>
<h3 className="text-xl font-bold mb-2" style={{ color: colors.electricBlue }}>
RESOURCES
</h3>
<p style={{ color: colors.gray[400] }}>
In-kind donations such as parts and services give us the resources to turn our project into reality.
</p>
</div>

<div className="p-4 rounded-lg" style={{ backgroundColor: colors.background.secondary }}>
<h3 className="text-xl font-bold mb-2" style={{ color: colors.electricBlue }}>
GUIDANCE
</h3>
<p style={{ color: colors.gray[400] }}>
Working with unexplored technology creates challenges. The years of industry experience help us shape the engineers of the future.
</p>
</div>
</div>
</div>

{/* Stats Card */}
<div>
<h2 className="text-3xl font-bold text-center mb-6" style={{ color: colors.slugYellow }}>
By the Numbers
</h2>
<div className="p-6 rounded-lg text-center" style={{ backgroundColor: colors.background.secondary }}>
<div className="space-y-4">
<div>
<div className="text-2xl font-bold" style={{ color: colors.electricBlue }}>150+</div>
<div className="text-sm" style={{ color: colors.gray[400] }}>Active Members</div>
</div>
<div>
<div className="text-2xl font-bold" style={{ color: colors.electricBlue }}>10+</div>
<div className="text-sm" style={{ color: colors.gray[400] }}>Engineering Disciplines</div>
</div>
<div>
<div className="text-2xl font-bold" style={{ color: colors.electricBlue }}>1</div>
<div className="text-sm" style={{ color: colors.gray[400] }}>Incredible Car</div>
</div>
{/* Make a Difference */}
<section>
<h2
className="text-3xl font-bold text-center mb-10"
style={{ color: colors.slugYellow }}
>
Make a Difference
</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{contributions.map((item) => (
<div
key={item.label}
className="rounded-xl p-6 text-center"
style={{ backgroundColor: colors.background.secondary }}
>
<div
className="text-sm font-bold tracking-widest mb-3"
style={{ color: colors.electricBlue }}
>
{item.label}
</div>
<div
className="w-8 mx-auto mb-4 h-px"
style={{ backgroundColor: colors.electricBlue }}
/>
<p className="text-sm leading-relaxed" style={{ color: colors.gray[400] }}>
{item.body}
</p>
</div>
</div>
))}
</div>
</section>

{/* Sponsorship CTA */}
<section className="py-2 text-center">
<div className="max-w-5xl mx-auto">
<h2 className="text-4xl font-bold mb-8" style={{ color: colors.textColor }}>
Ready to Partner With Us?
</h2>
<p className="text-xl mb-12 leading-relaxed" style={{ color: colors.gray[300] }}>
Check out our{" "}
<a
href="/assets/FormulaSlug_Sponsorship_Packet.pdf"
target="_blank"
rel="noopener noreferrer"
className="text-2xl font-bold hover:opacity-80 transition-opacity"
style={{ color: colors.electricBlue }}
>
sponsorship packet
</a>
, which includes gold, silver, and bronze sponsorship tiers.
</p>
<p className="text-base mt-8" style={{ color: colors.gray[500] }}>
Interested in a custom sponsorship package? Reach out to discuss opportunities tailored to your organization.
</p>
{/* CTA */}
<section className="text-center space-y-6">
<h2 className="text-4xl font-bold" style={{ color: colors.textColor }}>
Ready to Partner With Us?
</h2>
<p className="text-lg leading-relaxed max-w-2xl mx-auto" style={{ color: colors.gray[300] }}>
Review our sponsorship packet to explore Gold, Silver, and Bronze
tiers — or reach out to discuss a custom package tailored to your
organization.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center pt-2">
<a
href="/assets/FormulaSlug_Sponsorship_Packet.pdf"
target="_blank"
rel="noopener noreferrer"
className="inline-block px-8 py-3 rounded-lg font-bold text-base transition-opacity duration-200 hover:opacity-85"
style={{
backgroundColor: colors.electricBlue,
color: "#fff",
}}
>
View Sponsorship Packet
</a>
<a
href="/contact"
className="inline-block px-8 py-3 rounded-lg font-bold text-base transition-colors duration-200 hover:bg-white"
style={{
border: `2px solid ${colors.gray[500]}`,
color: colors.gray[300],
}}
>
Contact Us
</a>
</div>
</section>


</div>
</div>
<Footer />
</main>
);
}
}
Loading