Add submission: ritu-submission for design-engineer-001

challenges/design-engineer-001/submissions/ritu-submission/main.js

@@ -0,0 +1,90 @@
+// ── Intersection Observer for scroll reveals ──
+// Only observe .reveal elements that are NOT inside the hero (hero uses page-load animations)
+const revealObserver = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+        if (entry.isIntersecting) {
+            entry.target.classList.add('visible');
+            revealObserver.unobserve(entry.target);
+        }
+    });
+}, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
+
+document.querySelectorAll('.reveal').forEach(el => {
+    // Skip hero elements — they animate on page load, not on scroll
+    if (!el.closest('.hero')) {
+        revealObserver.observe(el);
+    }
+});
+
+// ── Animated counters ──
+const counterObserver = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+        if (entry.isIntersecting) {
+            const el = entry.target;
+            const target = parseFloat(el.dataset.count);
+            const suffix = el.dataset.suffix || '';
+            const isDecimal = el.dataset.decimal === 'true';
+            const duration = 1800;
+            const start = performance.now();
+
+            function animate(now) {
+                const elapsed = now - start;
+                const progress = Math.min(elapsed / duration, 1);
+                const eased = 1 - Math.pow(1 - progress, 3);
+                const current = target * eased;
+
+                el.textContent = (isDecimal ? current.toFixed(1) : Math.round(current)) + suffix;
+
+                if (progress < 1) requestAnimationFrame(animate);
+            }
+            requestAnimationFrame(animate);
+            counterObserver.unobserve(el);
+        }
+    });
+}, { threshold: 0.5 });
+
+document.querySelectorAll('[data-count]').forEach(el => counterObserver.observe(el));
+
+// ── Mobile nav toggle ──
+const toggle = document.querySelector('.nav__toggle');
+const navLinks = document.querySelector('.nav__links');
+toggle.addEventListener('click', (e) => {
+    e.stopPropagation();
+    const isOpen = navLinks.classList.toggle('open');
+    toggle.classList.toggle('open', isOpen);
+    toggle.setAttribute('aria-expanded', isOpen);
+});
+
+// ── Close mobile nav on outside click ──
+document.addEventListener('click', (e) => {
+    if (navLinks.classList.contains('open') && !navLinks.contains(e.target) && !toggle.contains(e.target)) {
+        navLinks.classList.remove('open');
+        toggle.classList.remove('open');
+        toggle.setAttribute('aria-expanded', 'false');
+    }
+});
+
+// ── Smooth scroll for anchor links ──
+document.querySelectorAll('a[href^="#"]').forEach(link => {
+    link.addEventListener('click', e => {
+        const id = link.getAttribute('href');
+        if (id === '#') return;
+        const target = document.querySelector(id);
+        if (target) {
+            e.preventDefault();
+            target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+            navLinks.classList.remove('open');
+            toggle.classList.remove('open');
+            toggle.setAttribute('aria-expanded', 'false');
+        }
+    });
+});
+
+// ── Animate dashboard bars on load ──
+window.addEventListener('load', () => {
+    document.querySelectorAll('.dash-chart__bar').forEach((bar, i) => {
+        const h = bar.style.height;
+        bar.style.height = '0%';
+        setTimeout(() => { bar.style.height = h; }, 300 + i * 80);
+    });
+});

challenges/design-engineer-001/submissions/ritu-submission/rationale.md

@@ -0,0 +1,43 @@
+# Design Rationale
+
+> **Screen recording** of the final site: [Signal Flow Website.mp4](https://drive.google.com/file/d/1_VuQEXwMEpm7__hwMTgVRFm54r2iL756/view?usp=sharing) (~32s)
+>
+> **Figma file:** [Signalflow Design](https://www.figma.com/design/eVC0Vr5CZGvjcxPyZeqXyj/Rough-work?node-id=6-21&t=5mDOTckAT98fvzrs-1)
+
+![Signalflow Hero Section](assets/signalflow-hero.png)
+
+## The Goal
+
+Minimalist and polished with proper design hierarchy, following the brand guide as strictly as possible. The AI output was structurally sound but generic. Only deliberate departure from the guide: the font choice. Everything else stays within the system.
+
+## Typography & Navigation
+
+**Font upgrade** — Replaced Inter (generic, default-feeling) with **Plus Jakarta Sans** for headings and **DM Sans** for body. Fonts play a huge role in how a site feels, and this single change immediately moved it away from "AI template" territory.
+
+**Subtle sticky nav** — The original solid `#1B2B4B` nav bar was visually heavy and competed with the hero. Replaced with frosted glass — white background, `backdrop-filter: blur(20px)`, sticky positioning. The CTA stays visible but the nav doesn't fight the content.
+
+## Hero & Buttons
+
+**Dashboard image** — The original hero was text-only. A pipeline intelligence product needs to *show* the product. Added a dashboard screenshot (Dribbble reference → NanoBanana for edits → upscaler → Figma for final polish with a white bottom gradient to blend into the next section). Converted from PNG 5.3MB to WebP 273KB.
+
+**Button treatment** — Primary was flat `#3B82F6`, felt lifeless. Added a gradient (`#4F90F7` → `#2563EB`) with a white shine overlay. Secondary changed from bordered outline to text-only ghost — shifts focus to primary while white space draws attention in a quieter way. Nav CTA shares the same gradient + shine for consistency.
+
+## Color & Layout
+
+**Same palette, more depth** — Kept all brand colors (`#1B2B4B`, `#3B82F6`, `#F59E0B`, `#64748B`) but added shades for hierarchy. "Know which deals will close" uses `#1B2B4B`, "before your reps do" steps down to `#3D5A80`. Feature icons and badge use the warm amber family (`#FEF3C7`/`#F59E0B`) for warmth.
+
+**Feature pattern interrupt** — The 6-card flat grid was monotonous. Broke the top three into full-width two-column showcases with alternating left/right layouts + interactive graphics. Remaining three stay as a card grid below.
+
+**Gentle social proof** — Original used deep `#1B2B4B` background. That white-to-navy jump felt jarring against our gentle palette, so replaced with soft `#F8FAFC`. Stats animate from 0 with eased counters.
+
+**Modern step cards** — Redesigned "How It Works" from a vertical numbered list to horizontal cards with large watermark numbers and hover effects. **Dark footer** (`#1B2B4B`) anchors the page.
+
+## Animations & Code
+
+All animations and SVG vectors are **100% AI-generated** — scroll reveals via `IntersectionObserver`, staggered delays, animated counters, hero load animations. Everything is vanilla CSS/JS, no libraries. CSS and JS extracted into separate files for cleaner architecture.
+
+---
+
+**Tooling note:** In my experience, projects like this are easier with Tailwind CSS and an animation library — the AI handles those abstractions better and changes take fewer iterations. Vanilla CSS/JS worked fine here but took a couple extra tries to nail.
+
+All files are contained within `submissions/ritu-submission/`. No files outside this folder were modified.