/* ============================================================
HOME — common SGSITS org page. Introduces the institute and
its three student engineering teams, then routes into each.
============================================================ */
function TeamChoice({ team, onEnter }) {
const a = team.accent;
const [hover, setHover] = React.useState(false);
return (
onEnter(team.id)}
onMouseEnter={() => setHover(true)}
onMouseLeave={() => setHover(false)}
onFocus={() => setHover(true)}
onBlur={() => setHover(false)}
className="team-choice"
aria-label={"View " + team.name}
style={{
position: "relative", overflow: "hidden", textAlign: "left", padding: 0,
background: "var(--surface)", border: "1px solid " + (hover ? a : "var(--border)"),
borderTop: "4px solid " + a, minHeight: 440, display: "flex", flexDirection: "column",
cursor: "pointer", transition: "transform .25s ease, border-color .25s ease, box-shadow .25s ease",
transform: hover ? "translateY(-6px)" : "none",
boxShadow: hover ? "0 18px 50px -18px " + a + "aa" : "none",
}}>
{team.cover ?
:
}
{team.mono}
{team.discipline}
{team.name}
View Team
);
}
function StatsStrip({ stats, fill, float }) {
return (
{stats.map((s, i) => (
);
}
function StatCell({ n, prefix, suffix, label }) {
const [ref, seen] = useInView(0.4);
const val = useCountUp(n, seen);
return (
{prefix && {prefix} }
{n !== null && {val} }
{suffix && {suffix} }
{label}
);
}
function OrgStat({ n, prefix, suffix, label, icon, boxed }) {
const [ref, seen] = useInView(0.5);
const val = useCountUp(n, seen);
return (
{prefix && {prefix} }
{val}
{suffix && {suffix} }
{label}
);
}
/* INNOVATE / COLLABORATE / COMPETE — above-the-fold feature cards */
function OrgFeatureCards({ onInnovate, onCollaborate, onCompete }) {
const cards = [
{ icon: "bolt", solid: true, title: "INNOVATE", text: "Pushing the boundaries of design and engineering.", on: onInnovate },
{ icon: "people", solid: false, title: "COLLABORATE", text: "United by passion, driven by teamwork.", on: onCollaborate },
{ icon: "trophy", solid: true, title: "COMPETE", text: "From concept to competition, we never stop improving.", on: onCompete },
];
return (
{cards.map((c, i) => (
{c.title}
{c.text}
))}
);
}
/* ── Hero ── shared assets + copy, then selectable layouts ── */
const HERO_PANELS = [
{ src: "uploads/teams/gs-motorsports/car/FS_Track_Cornering.jpg", pos: "center 40%", label: "Formula Student" },
{ src: "uploads/teams/gs-racers-baja/Baja_RainSplash.jpg", pos: "center 45%", label: "GS Racers · Baja SAE" },
{ src: "uploads/teams/yaan/Yan_Flight.jpeg", pos: "center 35%", label: "Aero Segment" },
];
const HERO_H = "100%";
function HeroCopy({ onExplore, onSponsors }) {
return (
TEAM GS RACERS
A passion for innovation.
Explore Teams
Our Sponsors
);
}
/* Shared left scrim — solid black from the left edge up to the G of "TEAM GS",
then a long smooth fade into the photo. Measures the real G position so it
tracks font loading, resize and responsive type sizes. */
function CopyScrim() {
const ref = React.useRef(null);
const [stops, setStops] = React.useState(null); // { solid, fade } in px
React.useEffect(() => {
const measure = () => {
const el = ref.current;
const g = document.getElementById("hero-g-mark");
if (!el || !g) return;
const s = el.getBoundingClientRect();
const r = g.getBoundingClientRect();
if (s.width === 0) return;
const solid = Math.max(0, r.left - s.left); // black is solid up to the G
const fade = Math.min(s.width, solid + s.width * 0.34); // then fades out
setStops({ solid, fade });
};
measure();
const t = setTimeout(measure, 350);
window.addEventListener("resize", measure);
if (document.fonts && document.fonts.ready) document.fonts.ready.then(measure).catch(() => {});
return () => { clearTimeout(t); window.removeEventListener("resize", measure); };
}, []);
const bg = stops
? "linear-gradient(90deg, rgba(5,5,5,1) 0%, rgba(5,5,5,1) " + stops.solid + "px, rgba(5,5,5,0.55) " + ((stops.solid + stops.fade) / 2) + "px, rgba(5,5,5,0) " + stops.fade + "px)"
: "linear-gradient(90deg, rgba(5,5,5,1) 0%, rgba(5,5,5,1) 22%, rgba(5,5,5,0.55) 33%, rgba(5,5,5,0) 46%)";
return (
);
}
/* 0 — BANNER: single pre-composed triptych, full-bleed */
const HERO_BANNER = { src: "uploads/hero/teams-triptych.jpg", pos: "center center" };
function HeroBanner({ copy }) {
return (
);
}
/* 1 — SPLIT: three skewed diagonal panels */
function HeroSplit({ copy }) {
const p = HERO_PANELS;
const clips = [
"polygon(0% 0%, 58% 0%, 52% 100%, 0% 100%)",
"polygon(54% 0%, 80% 0%, 74% 100%, 48% 100%)",
"polygon(76% 0%, 100% 0%, 100% 100%, 70% 100%)",
];
const dividers = [{ left: "52%" }, { left: "73.5%" }];
return (
{p.map((x, i) => (
0 ? "true" : undefined}
style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", objectPosition: x.pos }} />
))}
{dividers.map((d, i) => (
))}
{p.map((x, i) => (
{x.label}
))}
);
}
/* 2 — MOSAIC: editorial split — solid text panel + 3-image collage */
function HeroMosaic({ copy }) {
const p = HERO_PANELS;
return (
{[0, 1, 2].map((i) => (
/ {p[i].label}
))}
);
}
/* 3B — DUO: single pre-composed two-shot photo (Baja splash test + track pass), full-bleed */
const HERO_DUO = { src: "uploads/hero/baja-duo-composite.jpg", pos: "center center", label: "GS Racers · Baja SAE" };
function HeroDuo({ copy }) {
const p = HERO_DUO;
return (
{p.label}
);
}
/* 3 — FILMSTRIP: full-bleed lead image + vertical perforated film strip (click a frame to swap the lead) */
function HeroFilmstrip({ copy }) {
const p = HERO_PANELS;
const [active, setActive] = React.useState(0);
return (
{p.map((x, i) => (
{/* blurred fill so there are no empty bars around the fully-shown photo */}
))}
{p.map((x, i) => {
const on = i === active;
return (
setActive(i)}
onMouseEnter={() => setActive(i)}
style={{ position: "relative", aspectRatio: "16 / 9", overflow: "hidden", padding: 0, cursor: "pointer", display: "block",
border: on ? "2px solid var(--orange)" : "1px solid rgba(255,255,255,0.16)",
boxShadow: on ? "0 0 16px rgba(255,107,0,0.35)" : "none", background: "none", transition: "border-color .2s ease, box-shadow .2s ease" }}>
{x.label}
);
})}
);
}
/* 4 — SLIDESHOW: crossfading lead image with Ken-Burns drift */
function HeroSlideshow({ copy }) {
const p = HERO_PANELS;
const [idx, setIdx] = React.useState(0);
React.useEffect(() => {
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
const tick = () => setInterval(() => setIdx((i) => (i + 1) % p.length), 4200);
let id = tick();
const onVis = () => {
clearInterval(id);
if (!document.hidden) id = tick();
};
document.addEventListener("visibilitychange", onVis);
return () => { clearInterval(id); document.removeEventListener("visibilitychange", onVis); };
}, []);
return (
{p.map((x, i) => (
{p.map((x, i) => (
setIdx(i)}
style={{ width: i === idx ? 36 : 18, height: 20, padding: "8px 3px", border: "none", background: "none", cursor: "pointer", display: "grid", transition: "width .35s ease" }}>
))}
);
}
function SponsorStrip() {
const TITLE = { name: "Hindustan Equipments", src: "uploads/sponsor/hindustan-equipments.png" };
const partners = [
{ name: "PATH", src: "uploads/sponsor/gold/path.png" },
{ name: "Virtuoso CNC Arts", src: "uploads/sponsor/gold/virtuoso-cnc-arts.png" },
{ name: "Bhagirath Brothers", src: "uploads/sponsor/gold/bhagirath-brothers.png" },
{ name: "Fluidomat", src: "uploads/sponsor/gold/fluidomat.png" },
{ name: "Tirupati Industries", src: "uploads/sponsor/silver/tirupati-industries.png" },
{ name: "Bajrang", src: "uploads/sponsor/silver/bajrang.png" },
{ name: "TPL", src: "uploads/sponsor/silver/tpl.png" },
{ name: "Neo Hydraulics", src: "uploads/sponsor/silver/neo-hydraulics.png" },
{ name: "Techforce Composites", src: "uploads/sponsor/silver/techforce-composites.jpg" },
{ name: "Mantra Composites", src: "uploads/sponsor/silver/mantra-composites.png" },
{ name: "Magpie", src: "uploads/sponsor/bronze/magpie.png" },
{ name: "Prashanti", src: "uploads/sponsor/bronze/prashanti.png" },
{ name: "SGSITS Alumni Assoc.", src: "uploads/sponsor/gold/sgsits-alumni-assoc.png" },
{ name: "SKF", src: "uploads/sponsor/bronze/skf.png" },
{ name: "IPG", src: "uploads/sponsor/bronze/ipg.png" },
{ name: "Ansys", src: "uploads/sponsor/bronze/ansys.png" },
{ name: "SolidWorks", src: "uploads/sponsor/bronze/solidworks.png" },
{ name: "Abhikalp", src: "uploads/sponsor/bronze/abhikalp.png" },
{ name: "Wings", src: "uploads/sponsor/gold/wings.jpg" },
{ name: "Ascentt", src: "uploads/sponsor/gold/ascentt.jpg" },
{ name: "Vishalfab", src: "uploads/sponsor/gold/vishalfab.jpg" },
{ name: "JSW Sarbloh Motors", src: "uploads/sponsor/gold/jsw-sarbloh-motors.jpg" },
{ name: "Batch 1998", src: "uploads/sponsor/silver/batch-1998.jpg" },
{ name: "Scientific", src: "uploads/sponsor/silver/scientific.jpg" },
{ name: "Robosol", src: "uploads/sponsor/silver/robosol.jpg" },
{ name: "Batch 1975", src: "uploads/sponsor/silver/batch-1975.jpg" },
{ name: "Khanwalkar Industries", src: "uploads/sponsor/silver/khanwalkar-industries.jpg" },
{ name: "Si Mangla", src: "uploads/sponsor/silver/si-mangla.jpg" },
{ name: "AICTE IDEA Lab", src: "uploads/sponsor/bronze/aicte-idea-lab.png" },
{ name: "Monica Opto Hub", src: "uploads/sponsor/bronze/monica-opto-hub.png" },
{ name: "MPFC", src: "uploads/sponsor/bronze/mpfc.png" },
{ name: "Shubh Traders", src: "uploads/sponsor/bronze/shubh-traders.png" },
{ name: "T-Motor", src: "uploads/sponsor/bronze/t-motor.png" }];
const row = [TITLE, ...partners, TITLE, ...partners];
// pause the marquee while it's out of view — it otherwise animates on every frame
const mqRef = React.useRef(null);
React.useEffect(() => {
const el = mqRef.current;
if (!el || !("IntersectionObserver" in window)) return;
const io = new IntersectionObserver(([e]) => el.classList.toggle("offscreen", !e.isIntersecting));
io.observe(el);
return () => io.disconnect();
}, []);
return (
{/* Supporting partners marquee — title sponsor included */}
Supporting partners
{partners.length + 1} PARTNERS · SEASON 2026
);
}
/* ── NEWSROOM ── upcoming events + special moments + future prospects ── */
const NEWS_IG = (window.ORG && window.ORG.socials && window.ORG.socials[0] && window.ORG.socials[0].href) || "#";
/* sub-section heading used by all three newsroom rows */
function NewsroomRowHead({ eyebrow, title }) {
return (
);
}
/* upcoming events — dated cards; accent color-codes the card to the team it concerns (defaults to home orange = Formula Student) */
function EventCard({ tag, date, title, blurb, accent }) {
const c = accent || "var(--orange)";
return (
{date}
See on Instagram
);
}
/* special moments — a photo + short caption; drop a real photo into the Ph's `img` prop */
function MomentCard({ img, href, label, title, blurb }) {
const photo =
Newsroom
Events, moments & what’s next
);
}
function OrgHomePage({ go, enterTeam, t = {} }) {
const scrollToTeams = () => {
const el = document.getElementById("org-teams");
if (el) window.scrollTo({ top: el.offsetTop - 70, behavior: "smooth" });
};
const stats = [
{ n: 19, label: "SEASONS SINCE 2007" },
{ n: 3, label: "PLATFORMS · BAJA /\nFORMULA / AERO" },
{ n: null, prefix: "AIR 1", label: "MULTIPLE ALL-INDIA RANKS" },
];
const showExtras = t.homeExtras !== false;
return (
{/* ── above-the-fold: hero + feature cards + stats, all visible on load ── */}
{(() => {
const copy = { go("crowdfunding"); window.scrollTo({ top: 0 }); }} />;
const layout = t.heroLayout || "banner";
if (layout === "split") return
{/* stats strip — floats over the bottom of the hero */}
{/* ── who we are (org) ── */}
Built Here.
Three student-run teams. One campus. Every machine — formula car, Baja ATV, unmanned aircraft — is designed, fabricated, and campaigned by SGSITS students with no professional engineers on the build.
We learn by doing — and we prove it at national and international competitions every season.
{ go("about"); window.scrollTo({ top: 0 }); }}>
Read Our Story
{/* ── our teams ── */}
Our Teams
Three disciplines · one garage
{TEAM_ORDER.map((id) =>
);
}
Object.assign(window, { OrgHomePage, OrgFeatureCards, TeamChoice, HeroCopy, HeroBanner, HeroSplit, HeroMosaic, HeroDuo, HeroFilmstrip, HeroSlideshow, NewsroomSection, EventCard, MomentCard, ProspectCard });