Add README, CTA tracking tags, and section scroll reveals (animations respect reduced motion)

Author: adi-varshney

README.md

@@ -1,7 +1,35 @@
-<h1>Welcome!</h1>
-This repository is for the website of FIRST Tech Challenge Team #25710 Alpine Robotics!</h1>
+# Alpine Robotics Website
 
-Here, you can find the source code that we used to build this site.
+Modern static site for FTC Team 25710 with light/dark theming, animated hero, and responsive galleries.
 
-Contact us at [email protected] with any questions and concerns!
-We are always looking for new ways to connect and collaborate, so we would be glad to talk to you!
+## Design tokens
+- Colors (light): `--color-bg-light: #f3f7f9`, `--card-bg: #fff`, `--text-primary: #0f2014`, `--text-secondary: #4a5b66`, accents `--color-accent: #22c55e`, `--color-blue: #00b4ff`.
+- Colors (dark, via `body[data-theme="dark"]`): background `--color-bg-light: #0b1014`, `--card-bg: #121b22`, `--text-primary-dark: #f9fafb`, `--text-secondary-dark: #cfd8e3`.
+- Typography: headings `Space Grotesk`, body `Inter`.
+- Radii/spacing: `--radius-lg: 24px`; spacing tokens `--space-2`…`--space-16`.
+- Motion: durations `--duration-fast/base/slow`, easing `--easing-smooth`, `--easing-bounce`.
+
+## Structure
+- Root pages: `index.html`, `404.html`.
+- Subpages in `pages/`: `about.html`, `season.html`, `robots.html`, `team.html`, `gallery.html`, `sponsors.html`.
+- Assets: `assets/css/main.css`, `assets/css/pages.css`, `assets/js/main.js`, `images/`.
+
+## Components & theming
+- Theme toggle switches `body[data-theme]` between light/dark (persists in `localStorage`).
+- Shared cards (`.card`, `.metric`, hero info card) inherit text colors via tokens, so new text stays readable in both themes.
+- Section headers (`.section__header`, `.section__title`, `.section__description`) stack vertically in light mode for clean alignment.
+
+## Animations
+- GSAP is used for hero entrance and scroll reveals (`assets/js/main.js`); respects `prefers-reduced-motion`.
+
+## Updating content
+- Hero stats/cta: edit `index.html` hero copy and metrics.
+- Pages: update text in `pages/*.html`; navigation is shared markup on each page.
+- Gallery: add images under `images/galleryImages/...` and insert new `<article class="gallery-card">` entries; include `loading="lazy" decoding="async" sizes="..."`.
+
+## Running checks
+- Open `index.html` in a browser; theme toggle should persist.
+- For performance/accessibility, run Lighthouse in Chrome and verify contrast in both themes.
+
+## Analytics
+- Google Tag Manager is included in page heads; CTA buttons carry `data-gtag` attributes to track key actions.

assets/js/main.js

@@ -55,6 +55,21 @@ function initScrollReveals() {
       }
     });
   });
+
+  const headers = document.querySelectorAll(".section__header");
+  headers.forEach((el) => {
+    gsap.from(el, {
+      opacity: 0,
+      y: 24,
+      duration: 0.8,
+      ease: "power2.out",
+      scrollTrigger: {
+        trigger: el,
+        start: "top 85%",
+        toggleActions: "play none none reverse"
+      }
+    });
+  });
 }
 
 function initMountainParallax() {

index.html

@@ -70,9 +70,9 @@ <h1 class="hero__title">Alpine Robotics Team 25710</h1>
               <div class="moon"></div>
             </div>
             <div class="hero__actions">
-              <a class="btn btn--primary" href="./pages/season.html">See the 2025–26 Season</a>
-              <a class="btn btn--ghost" href="./pages/robots.html">View Previous Robots</a>
-              <a class="btn btn--ghost" href="mailto:[email protected]">Email the team</a>
+              <a class="btn btn--primary" href="./pages/season.html" data-gtag="cta-season">See the 2025–26 Season</a>
+              <a class="btn btn--ghost" href="./pages/robots.html" data-gtag="cta-robots">View Previous Robots</a>
+              <a class="btn btn--ghost" href="mailto:[email protected]" data-gtag="cta-email">Email the team</a>
             </div>
             <div class="metrics">
               <div class="metric">