System-End/campfire
1
0
Fork 0
mirror of https://github.com/System-End/campfire.git synced 2026-04-19 16:28:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore: bring astro up to date w/ frontend

Browse source
This commit is contained in:
techpixel 2026-01-16 15:21:47 -05:00
parent 9c49edf987
commit 88b5aa2a17
No known key found for this signature in database
GPG key ID: 34D6A091A305A398
1 changed files with 64 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
astro/src/components/pages/App.tsx
View file

@ -12,19 +12,64 @@ import clsx from 'clsx';
const FORM_URL_ORGANIZER_APPLICATION = "https://forms.hackclub.com/t/8L51MzWyrHus";
const FORM_URL_RSVP = "https://forms.hackclub.com/t/a3QSt8MuvHus";
function FlagshipCTA({ className, compact, maxWidth }: { className?: string; compact?: boolean; maxWidth?: boolean }) {
return (
<div className={className}>
<a
href="https://flagship.hackclub.com?utm_source=campfire-website"
target="_blank"
rel="noopener"
className={clsx(
"flex items-center rounded-[20px] transition-transform hover:scale-105 active:scale-95 cursor-pointer",
compact ? "gap-4 px-6 py-3" : "gap-8 px-8 py-4",
maxWidth && "max-w-2xl"
)}
style={{
backgroundColor: '#F9E2CA',
border: '4px solid #D5A16C',
boxShadow: '-6px 10px 0px 0px rgba(0,0,0,0.25)'
}}
>
<img
src="/compressed/branding/logo-flagship.png"
alt="Campfire Flagship"
className={clsx("object-contain select-none", compact ? "h-10" : "h-12 md:h-14")}
/>
<span
className={clsx(
"text-[#854d16] font-bold font-ember-and-fire",
compact ? "text-xl" : "text-2xl md:text-3xl"
)}
>
{compact ? "Join our flagship in LA with Open Sauce creators!" : "Come to our flagship event in Los Angeles with William Osman and Michael Reeves!"}
</span>
</a>
</div>
);
}
function App() {
const [email, setEmail] = useState("");
const [scrollY, setScrollY] = useState(document.body.scrollTop);
const [isLargeScreen, setIsLargeScreen] = useState(window.innerWidth >= 1280);
const [windowHeight, setWindowHeight] = useState(window.innerHeight);
const [windowWidth, setWindowWidth] = useState(window.innerWidth);
const emailRef = useRef<HTMLInputElement>(null);
useEffect(() => {
if (window.location.pathname === '/flagship') {
window.location.href = 'https://flagship.hackclub.com?utm_source=campfire_landing_page';
return;
}
document.addEventListener("scroll", () => {
setScrollY(window.scrollY);
});
const handleResize = () => {
setIsLargeScreen(window.innerWidth >= 1280);
setWindowHeight(window.innerHeight);
setWindowWidth(window.innerWidth);
};
window.addEventListener("resize", handleResize);
return () => window.removeEventListener("resize", handleResize);
@ -69,7 +114,10 @@ function App() {
</nav>
</header>
<section className="relative h-full flex items-end pb-32 2xl:pb-48 px-6 md:px-16 md:px-24 2xl:px-32 bg-[url(/backgrounds/blue-sky.webp)] bg-center bg-cover">
<section className={clsx(
"relative h-full px-6 md:px-16 md:px-24 2xl:px-32 bg-[url(/backgrounds/blue-sky.webp)] bg-center bg-cover",
windowHeight > windowWidth && windowWidth < 860 ? "flex items-stretch pb-16" : "flex items-end pb-32 2xl:pb-48"
)}>
<div className="absolute top-0 left-0 w-full h-full pointer-events-none">
<img src="/backgrounds/sky-shine.webp" alt="" className="w-full h-full object-cover select-none" />
</div>
@ -109,10 +157,24 @@ function App() {
className="w-full h-full object-cover object-top select-none"
/>
</div>
<FlagshipCTA
className={clsx(
"hidden min-[860px]:flex justify-center w-full absolute left-0 right-0 z-40",
windowHeight < 950 ? "-top-8" : "top-4"
)}
maxWidth
compact={windowHeight < 830}
/>
<div className="flex flex-col md:flex-row justify-between items-center md:items-start xl:items-center w-full gap-8 pb-16 z-30 h-full pt-16 md:pt-0 md:h-auto">
<div className="flex flex-col gap-4 w-full md:w-[648px]">
<div className={clsx(
"flex flex-col gap-4 w-full md:w-[648px]",
windowHeight > windowWidth && windowWidth < 860 && "justify-between h-full"
)}>
<div className="mb-6">
{windowWidth >= 400 && <FlagshipCTA className="min-[860px]:hidden -mt-12 mb-8" compact={windowWidth < 500} />}
<div className="flex items-center gap-3 mb-4 relative z-30">
<a href='https://hackclub.com' className='transition-transform hover:scale-105 active:scale-95'>
<img